/*

Basic styles for the Top Menu.
Customize this css to match the style of your website
Copy this css to your main css file to decrease the number of file requests.

*/

ul#mainmenu {
	list-style-type: none;
	margin: 0;
	padding: 0;
	background: none;
	position: relative;
}
ul#mainmenu > li {
	float: left;
}
ul#mainmenu li {
	position: relative;
}
ul#mainmenu li a {
	display: block;
	padding: 30px 20px;
	color: #ffffff;
	text-decoration: none;
	transition: all 300ms;
	box-sizing: border-box;
}

ul#mainmenu li .topmenu-cell {
	display: block;
	padding: 15px;
	color: #ffffff;
	text-decoration: none;
	transition: all 300ms;
}

ul#mainmenu li a:hover {
	background-color:#0C5466;
	color:#FFFFFF;
	text-shadow: 2px 2px 2px rgba(0, 0, 0, .7);	
}

ul#mainmenu li > ul {
	display: none;
	position: absolute;
	background: #0C5466;
	list-style-type: none;
	margin: 0;
	padding: 0;
	min-width: 200px;
}

ul#mainmenu li > ul li a {
	padding:10px 20px;
}

ul#mainmenu li > ul li ul {
	display: none;
	position: absolute;
	background: #197a91;
	list-style-type: none;
	margin: 0;
	padding: 0;
	min-width: 200px;
}

ul#mainmenu li.menuover > ul {
	display: block;
	top: 0;
	left: 0;
	z-index: 100;
}

ul#mainmenu li.mobileVisible {
	display: none;
}


/* Mobile Menu */
#mobile-header {
	display: none;
	background: #cccccc;
}
#mobile-title {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 39px;
}
#mobile-title a {
	text-decoration: none;
	color: #3c5f88;
	padding: 5px 10px;
}
#pancake-menu {
	width: 32px;
	padding: 5px 10px;
	position: relative;
}
#pancake-menu span {
	display: block;
	height: 3px;
	width: 32px;
	margin: 5px 0;
	background: #444444;
	text-indent: 9999px;
	overflow: hidden;
	transition: all 300ms;
}
#pancake-menu.open{
}
#pancake-menu.open span {
	margin: 0;
	position: absolute;
	top: calc(50% - 1px);
	left: calc(50% - 17px);
}
#pancake-menu.open span:nth-child(1){
	transform: rotate(45deg);
}
#pancake-menu.open span:nth-child(2) {
	opacity: 0;
}
#pancake-menu.open span:nth-child(3){
	transform: rotate(-45deg);
}

@media only screen and (max-width: 650px) {
	ul#mainmenu {
		
	}
	ul#mainmenu > li {
		float: none;
	}
	ul#mainmenu li a {
		width: 100%;
	}
	
	ul#mainmenu li a {
    padding: 15px 20px;
    }
	
	ul#mainmenu li > ul {
		position: relative;
		background: #2b4059;
		padding: 0 0 0 0px;
	}
	ul#mainmenu li > ul ul {
		background: #1f2e40;
	}
	ul#mainmenu li.mobileVisible {
		display: block;
	}

	#mobile-header {
		display: flex;
		justify-content: space-between;
	}
}