.headerBar { position: fixed; z-index: 1000; width: 100%; background-color: #222222; color: #FFFFFF; box-shadow: 0px 0px 10px #222222; }
.menuButtonContainer { float: left; width: 30px; height: 30px; padding: 20px; cursor: pointer; }
.logoImageContainer { position: fixed; z-index: 1001; top: 0px; left: 50%; margin-left: -45px; width: 50px; height: 30px; padding: 20px; }
.optionsButtonContainer { float: right; width: 30px; height: 30px; padding: 20px; cursor: pointer; }

.menuBackend { position: fixed; z-index: 1002; width: 100%; height: 100%; background-color: #000000; opacity: 0.7; display: none; }
.menuContainer { position: fixed; z-index: 1003; top: 0px; left: -275px; width: 260px; height: 100%; background-color: #222222; color: #FFFFFF; box-shadow: 0px 0px 15px #333333; } 

@keyframes showMCAni { from { left: -275px; } to { left: 0px; } }
.showMC { animation-name: showMCAni; animation-duration: 0.3s; animation-iteration-count: 1; animation-fill-mode: forwards; }
@keyframes hideMCAni { from { left: 0px; } to { left: -275px; } }
.hideMC { animation-name: hideMCAni; animation-duration: 0.3s; animation-iteration-count: 1; animation-fill-mode: forwards; }

@keyframes iconMenuOpenedAni { from { transform: rotate(0deg); background: url("../images/icon_menu_closed.png"); background-size: 100%; } to { transform: rotate(180deg); background: url("../images/icon_menu_opened.png"); background-size: 100%; } }
.iconMenuOpened { animation-name: iconMenuOpenedAni; animation-duration: 0.3s; animation-iteration-count: 1; animation-fill-mode: forwards; }
@keyframes iconMenuClosedAni { from { transform: rotate(180deg); background: url("../images/icon_menu_opened.png"); background-size: 100%; } to { transform: rotate(0deg); background: url("../images/icon_menu_closed.png"); background-size: 100%; } }
.iconMenuClosed { animation-name: iconMenuClosedAni; animation-duration: 0.3s; animation-iteration-count: 1; animation-fill-mode: forwards; }


.searchContainer { position: fixed; z-index: 999; top: -100%; left: 0px; width: 100%; height: 100%; padding: 20px; box-sizing: border-box; background-color: #222222; color: #FFFFFF; overflow: scroll; } 

@keyframes showSCAni { from { top: -100%; } to { top: 0px; } }
.showSC { animation-name: showSCAni; animation-duration: 0.3s; animation-iteration-count: 1; animation-fill-mode: forwards; }
@keyframes hideSCAni { from { top: 0px; } to { top: -100%; } }
.hideSC { animation-name: hideSCAni; animation-duration: 0.3s; animation-iteration-count: 1; animation-fill-mode: forwards; }

@keyframes iconSearchOpenedAni { from { transform: rotate(0deg); background: url("../images/icon_search.png"); background-size: 100%; } to { transform: rotate(-90deg); background: url("../images/icon_menu_opened.png"); background-size: 100%; } }
.iconSearchOpened { animation-name: iconSearchOpenedAni; animation-duration: 0.3s; animation-iteration-count: 1; animation-fill-mode: forwards; }
@keyframes iconSearchClosedAni { from { transform: rotate(-90deg); background: url("../images/icon_menu_opened.png"); background-size: 100%; } to { transform: rotate(0deg); background: url("../images/icon_search.png"); background-size: 100%; } }
.iconSearchClosed { animation-name: iconSearchClosedAni; animation-duration: 0.3s; animation-iteration-count: 1; animation-fill-mode: forwards; }

.searchNoResults { width: 100%; text-align: center; font-size: 20px; margin-top: 130px; font-weight: 700; color: #444444; }
.searchNoResultsDesc { font-size: 13px; font-weight: 300; }

.menuHeader { width: 100%; height: 70px; border-bottom: 1px solid #333333; }
.menuMenuButtonContainer { float: right; width: 30px; height: 30px; padding: 20px; cursor: pointer; }
.menuHeaderTitle { float: left; height: 30px; padding: 20px; overflow: hidden; font-size: 23px; font-weight: bold; }

.menuEl { width: 100%; padding:20px; box-sizing: border-box; letter-spacing: 5px; cursor: pointer; }
.menuFooter { width: 100%; padding: 20px; box-sizing: border-box; font-size: 13px; color: #444444; text-align: center; border-top: 1px solid #333333; }

.dimmedEl { opacity: 0.2; }

@keyframes loadPageAni { from { opacity: 0; padding-top: 50px; } to { opacity: 1; padding-top: 0px; } }
.loadPage { animation-name: loadPageAni; animation-duration: 0.2s; animation-iteration-count: 1; animation-fill-mode: forwards; }

.loadingDiv { z-index: 3005; position: fixed; top: -70px; left: 50%; width: 60px; height: 60px; padding: 15px; box-sizing: border-box; margin-left: -30px; border-radius: 100%; background-color: #FFFFFF; box-shadow: 0px 0px 10px #333333; }
.loadingImage { width: 30px; height: 30px; border: 0px; }
@keyframes showLoadingDiv { from { top: -70px; } to { top: 90px; } }
.showLoading { animation-name: showLoadingDiv; animation-duration: 0.3s; animation-iteration-count: 1; animation-fill-mode: forwards; }
@keyframes hideLoadingDiv { from { top: 90px; } to { top: -70px; } }
.hideLoading { animation-name: hideLoadingDiv; animation-duration: 0.3s; animation-iteration-count: 1; animation-fill-mode: forwards; }

.adminBox { padding: 20px; box-sizing: border-box; }
.adminName { font-weight: 700 }
.adminEmail { font-style: italic; font-size: 11px; color: #666666; }