/*------------ Color Palette ------------*/
/*
LIGHT ORANGE: #e4644b
DARK ORANGE: #d05942
DARK BROWN: #484141
Menu text: #f7f1e3
Submenu text: #ae9f9f
*/

/*------------ General Settings ------------*/
/*@import url(https://fonts.useso.com/css?family=Montserrat);*/

/*------------ Main Menu ------------*/
.mainmenu {
	width:100%;
	position:absolute;
	z-index:20;
	left:0;
	top:100%;
	padding:0;
	display:none;
}
.mainmenu {-webkit-animation:mainmenu 0.5s ease-out both;}
@-webkit-keyframes mainmenu {
	0% {opacity:0; -webkit-transform:translateY(-10%);}
	100% {opacity:1; -webkit-transform:translateY(0%);}
}

.mainmenu > li {
	background-color: #f2f2f2;
	border-top: 1px solid #CCC;
	height:3.2rem;
	color: #333;
	box-sizing: border-box;
	position:relative;
}

.mainmenu > li span {
	display:block;
	line-height:3.2rem;
	color: #333;
}

/*------------ Sub Menu ------------*/
.submenu {
	box-sizing: border-box;
	color: #ddd;
	content: " ";
	background-color: #484141;
	/*opacity: 0.5;*/
}

.submenu li {
	line-height: 2.4rem;
	height: 2.4rem;
	background-color: #900;
	border-left: solid 6px #484141;
	transition: border-left 220ms ease-in;
}

.mainmenu li a {display:block; color:#fff;}
.submenu li a {display:block; color:#f2f2f2;}

.submenu li:first-child {padding-top:0.5rem;}
.submenu li:last-child {padding-bottom:0.5rem;}

.submenu .chosen,
.submenu .chosen:hover {
	border-left: solid 6px #96d145;
}

.submenu li:hover {
	border-left: solid 6px #d05942;
}

.submenu li span {
}

.animate {
	animation: flip 2000ms ease-in-out alternate;
}

@keyframes flip {
	to {
		transform: rotateY(360deg);
	}
}