#mainnav-collapse { display:none; width:100%; position:absolute; left:0; z-index:999; background:white; padding:20px; box-shadow:3px 3px 5px 0 rgba(0,0,0,0.35); }
#mainnav-collapse.open { display:block; }

#mainnav-collapse nav { text-align:left; }
#mainnav-collapse .nav-item { }
#mainnav-collapse .nav-item a { display:block; padding:10px 0; margin-right:24px; }
#mainnav-collapse .nav-item a:hover { text-decoration:none; color:inherit; }
#mainnav-collapse .nav-item.active > .nav-toggle > a { background-color:rgba(255,255,255,0.15); }
#mainnav-collapse .nav-item .nav-toggle { position:relative; }
#mainnav-collapse .nav-item .nav-toggle button { position:absolute; top:0; right:0; bottom:0; border:0; width:30px; background:transparent url(../images/icons/arrow_drop-menu_up.png) center center no-repeat; }
#mainnav-collapse .nav-item .nav-toggle button.collapsed { background-image:url(../images/icons/arrow_drop-menu_down.png); }

#mainnav-collapse .nav-item .nav-item {  }

#mainmenu-nav { text-align:center; height:50px; margin:15px 0; background:rgba(255,255,255,0.25); }
#mainmenu-nav #mainnav-button { display:block; padding:15px; background:transparent; border:0; transition:background-color .2s; color:white; }
#mainmenu-nav #mainnav-button .inner { display:inline-block; padding:14px 5px; }
#mainmenu-nav #mainnav-button:hover, #mainmenu-nav #mainnav-button.active { background-color:#0a0e58; }
#mainmenu-nav #mainnav-button .button-text { text-transform:uppercase; font-size:20px; line-height:20px; }

@media (max-width:480px) {
	#mainmenu-nav #mainnav-button .button-image { display:none; }
}

@media (max-width:991px) {
	#mainmenu-nav #mainnav-button .button-image { position:relative; overflow:hidden; width:20px; height:20px; margin-right:10px; }
	#mainmenu-nav #mainnav-button .button-image:focus { outline:none; }
	#mainmenu-nav #mainnav-button .button-image span { display:block; position:absolute; top:9px; left:0; right:0; height:2px; background:white; }  
	#mainmenu-nav #mainnav-button .button-image span::before, #mainmenu-nav #mainnav-button .button-image span::after { position:absolute; display:block; left:0; width:100%; height:2px; background-color:white; content:""; }
	#mainmenu-nav #mainnav-button .button-image span::before { top:-6px; }
	#mainmenu-nav #mainnav-button .button-image span::after { bottom:-6px; }
	
	#mainmenu-nav #mainnav-button .button-image {  }
	#mainmenu-nav #mainnav-button .button-image span { transition:background 0s 0.1s; }
	#mainmenu-nav #mainnav-button .button-image span::before
	, #mainmenu-nav #mainnav-button .button-image span::after { transition-duration:0.1s, 0.1s; transition-delay:0.1s, 0s; }
	#mainmenu-nav #mainnav-button .button-image span::before { transition-property:top, transform; }
	#mainmenu-nav #mainnav-button .button-image span::after { transition-property:bottom, transform; }
	/* active state, i.e. menu open */
	#mainmenu-nav #mainnav-button.active .button-image {  }
	#mainmenu-nav #mainnav-button.active .button-image span { background:none; }
	#mainmenu-nav #mainnav-button.active .button-image span::before { top:0; transform:rotate(45deg); }
	#mainmenu-nav #mainnav-button.active .button-image span::after { bottom:0; transform:rotate(-45deg); }
	#mainmenu-nav #mainnav-button.active .button-image span::before
	, #mainmenu-nav #mainnav-button.active .button-image span::after { transition-delay:0s, 0.1s; }
}

#mainnav-collapse { width:100%; }

@media (min-width:481px) {
	/* #mainmenu { position:relative; } */
	/* #mainnav-collapse { width:300px; } */
}

@media (min-width:768px) {
/* 	#mainmenu-nav #mainnav-button .button-image { display:none; } */
}

#mainnav-collapse .nav-item { border-top:1px solid #c6c1be; }
#mainnav-collapse .nav-item:first-child { border-top:0; } 
#mainnav-collapse .nav-item .nav-toggle:hover { background-color:rgba(0,0,0,0.1); }
#mainnav-collapse .nav-panel {}
#mainnav-collapse .nav-panel .nav-panel { border-top:none; }
#mainnav-collapse .nav-panel .nav-panel .nav-item { margin-left:5px; font-weight:300; }
#mainnav-collapse .nav-panel .nav-panel .nav-item:hover { background-color:rgba(0,0,0,0.1); } 

@media (min-width:992px) {
	#mainmenu { position:static; }
	#mainmenu-nav { display:none; margin:15px 0; }
	#mainnav-collapse { display:block; width:auto; position:static; top:auto; left:auto; background:none; color:inherit; padding:0; box-shadow:none; }
	#mainnav-collapse .nav-item { float:left; border-top:0; font-size:16px; line-height:20px; } 
	#mainnav-collapse .nav-item:first-child { margin-left:0; }
	#mainnav-collapse .nav-item a { margin-right:0; }
	#mainnav-collapse .nav-item a { display:block; padding:30px 10px 30px; transition:background-color .2s; } 
	#mainnav-collapse .nav-item a:hover { background-color:rgba(255,255,255,0.15); color:inherit; }
	#mainnav-collapse .nav-item .nav-toggle.on { background-color:rgba(255,255,255,0.15); }
	#mainnav-collapse .nav-item .nav-toggle.on a:hover { background:none; }
	#mainnav-collapse .nav-item .nav-toggle button { display:none; }
	#mainnav-collapse .nav-item .nav-panel { box-shadow:3px 3px 5px 0 rgba(0,0,0,0.35); background:white; padding:5px 0; min-width:280px; }
	#mainnav-collapse .nav-item .nav-panel .nav-item { float:none; border-top:1px solid #bfbfbf; padding:20px 25px; margin-left:0; font-size:20px; color:#2c2b6c; } 
	#mainnav-collapse .nav-item .nav-panel .nav-item.first { border-top:0; }
	#mainnav-collapse .nav-item .nav-panel .nav-item a { display:block; text-transform:none; padding:0; height:auto; } 
	#mainnav-collapse .nav-item .nav-panel .nav-item a:hover {  }
	
	
	#mainnav .nav-item .collapse { position:absolute; top:100%; left:0; z-index:999; }
	#mainnav .nav-item.last .collapse { left:auto; right:0; }
	#mainnav .nav-item .collapse.over { display:block; }
	#mainnav .nav-item .collapse.in { display:none; }
	#mainnav .nav-item .collapse.in.over { display:block; }
	#mainnav .nav-item button { display:none; }
	
	#mainnav-collapse nav { display:block; float:left; max-height:66px; }
}

@media (min-width:1230px) {
	#mainnav-collapse .nav-item { font-size:20px; line-height:20px; }
	#mainnav-collapse .nav-item a { padding:30px 15px; }
}