/* This is for the front pages - i.e. code in includeMenusFrontPage.jsp */
.invisibleOverlay {position: fixed;top: 0;left: 0;right: 0;bottom: 0;display: flex;justify-content: center;align-items: center;z-index: 1000; color:white;}
.waitingWave {height: 50vh;display: flex;justify-content: center;align-items: flex-start;padding-top:10%;}
.wave {width: 5px;height: 100px;background: linear-gradient(45deg, cyan, #fff);margin: 10px;animation: wave 1.2s linear infinite;border-radius: 20px;}
.wave:nth-child(2) {animation-delay: 0.1s;}
.wave:nth-child(3) {animation-delay: 0.2s;}
.wave:nth-child(4) {animation-delay: 0.3s;}
.wave:nth-child(5) {animation-delay: 0.4s;}
.wave:nth-child(6) {animation-delay: 0.5s;}
.wave:nth-child(7) {animation-delay: 0.6s;}
.wave:nth-child(8) {animation-delay: 0.7s;}
.wave:nth-child(9) {animation-delay: 0.8s;}
.wave:nth-child(10) {animation-delay: 0.9s;}
@keyframes wave {0% {transform: scale(0);} 50% {transform: scale(1);} 100% {transform: scale(0);}}

#hamburger {display: none; width: 30px; height: 30px; position: relative; cursor: pointer; font-size: 1.25rem;}
#hamburger span, #hamburger span:before, #hamburger span:after {display: block; position: absolute; height: 2px; width: 100%; background: #000; transition: all 0.3s ease; border-radius: 2px; font-weight:normal;}
#hamburger span { top:50%; transform:translateY(-50%); background:transparent; }
#hamburger span:before { content:''; top:-5px; }
#hamburger span:after { content:''; top:6px; bottom:auto; }
#hamburger.active span {background: transparent;}
#hamburger.active span:before, #hamburger.active span:after {top: 0;}
#hamburger.active span:before {transform: rotate(45deg);}
#hamburger.active span:after {transform: rotate(-45deg);}
@media(max-width:991px){
	#hamburger { display:block; }
}

header #mainMenu button.btn.btn-primary { font-weight:normal;width:auto;font-size:1.125rem;padding:9px;padding-bottom:7px; margin-left:-5px; } 
@media(max-width:991px){
header #mainMenu button.btn.btn-primary { margin-top:1rem; }
}

#mainMenu a:hover { text-decoration:none; }
/* underlines on main menu on desktop */
@media(min-width:992px) {
	#mainMenu > ul > li:hover > a { opacity: 1; }
	#mainMenu > ul > li > a::before {content: '';position: absolute;width: 100%;height: 3px;background-color: #4B48E3;bottom: -4px;transform: scaleX(0);transform-origin: center;transition: transform 0.3s ease-out;}
	#mainMenu > ul > li:hover > a::before {transform: scaleX(1);}
	#mainMenu { position:relative; top: 1px; }
	#mainMenu a:hover { opacity: 0.3; }
}

#blackOverlay {opacity: 0; visibility: hidden; background-color:black;position: fixed;top: 80px;left: 0;right: 0;bottom: 0;}
#blackOverlay.active {opacity: 0.9;visibility: visible; }
#mainMenu {opacity: 1;visibility: visible;}
#mainMenu.active {opacity: 1;visibility: visible;}
@media(max-width:991px){
	#mainMenu { opacity: 0;visibility: hidden; }
}

/* display menu on hover on desktop */
@media(min-width:992px){
	#mainMenu > ul > li:hover .sublist {display: block;}
	#mainMenu > ul > li::after {content: "";position: absolute;height: 30px; bottom: -30px; left: 0;right: 0;} /* puts some space to cover the gap so the hover works on the menu */
}

.navbar { justify-content: space-between;}
#mainMenu > ul  { align-items:center; position:relative; top: 1px;}
#mainMenu { width:100%; max-width:1000px; z-index: 10000; align-items:center;} 
#mainMenu ul { display:flex; flex-direction: row; justify-content: space-between; margin:0px; margin-left:auto; }
#mainMenu ul li { padding: 0px; margin: 0px; position:relative;}
#mainMenu ul li a { color:black; font-size: 1rem; white-space: nowrap; font-family: 'Kumbh Sans', sans-serif;}
#mainMenu .sublist { display:none; position: absolute; top: 52px; left: 0; background: black; opacity: 0.8; padding: 30px; margin-left: -30px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;}
#mainMenu .sublist.active { display:block; }
#mainMenu .sublist ul { flex-direction: column; color:white; padding:0px;}
#mainMenu .sublist ul li { padding-bottom: 1rem;   }
#mainMenu .sublist ul li a { color:white; }
#mainMenu ul li a { font-weight:normal; }
#mainMenu > ul > li > a { font-weight:bold; }
@media(max-width:991px){
	#mainMenu > ul  { font-weight:normal;}
	#mainMenu > ul > li > a { font-weight:normal; }
	#mainMenu { margin-top:50px; max-width:100%; align-items: center; justify-content: center;} 
	#mainMenu ul { flex-direction: column; margin-left:0; }
	#mainMenu ul li a { color:white; }
	#mainMenu ul li { padding-bottom: 1rem; width:200px; }
	#mainMenu .sublist { position: relative; background: none; top: 100%; padding-left: 20px; margin-left: 0px; padding-top: 1rem; padding-bottom: 0px; }
	#mainMenu .sublist ul li a { font-size: 1rem; }
	#mainMenu .sublist ul li a:active { color:red; opacity: 0.3; }
	#logoAndHamburger { display:flex; justify-content:space-between;width:100%;align-items: center; }
}