#mainnav-collapse { display:none; color:white; width:100%; position:absolute; left:0; z-index:999; background:white; color:#192e40; 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; color:inherit; }
#mainnav-collapse .nav-item a:hover { text-decoration:none; color:inherit; }
#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 #mainnav-button { display:block; background:transparent; border:0; transition:background-color .2s; color:inherit; }
#mainmenu-nav #mainnav-button:hover, #mainmenu-nav #mainnav-button.active { background-color:rgba(255,255,255,0.25); }
#mainmenu-nav #mainnav-button .button-text { line-height:24px; font-size:20px; text-transform:uppercase; font-weight:bold; } 

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

@media (max-width:1230px) {
	#mainmenu-nav #mainnav-button .button-image { position:relative; overflow:hidden; width:24px; height:24px; margin-right:5px; }
	#mainmenu-nav #mainnav-button .button-image:focus { outline:none; }
	#mainmenu-nav #mainnav-button .button-image span { display:block; position:absolute; top:11px; 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:#fff; 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) {
	#mainnav-collapse { width:300px; }
}

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

#mainnav-collapse .nav-item { border-top:1px solid #d9d9d9; }
#mainnav-collapse .nav-item:first-child { border-top:0; } 
#mainnav-collapse .nav-panel .nav-panel { border-top:1px solid #d9d9d9; }
#mainnav-collapse .nav-panel .nav-item { margin-left:5px; }

@media (min-width:1230px) {
	#mainmenu { }
	#mainmenu-nav { display:none; }
	#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; }
	#mainnav-collapse .nav-item a { margin-right:0; }
	#mainnav-collapse .nav-item a { display:block; height:100px; line-height:20px; font-size:20px; padding:40px 15px; transition:background-color .2s; font-weight:bold; text-transform:uppercase; } 
	#mainnav-collapse .nav-item a:hover { color:inherit; background-color:rgba(255,255,255,0.15); }
	#mainnav-collapse .nav-item .nav-toggle.on { background-color:rgba(255,255,255,0.15); }
	#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:15px 30px; min-width:280px; color:#192e40; }
	#mainnav-collapse .nav-item .nav-panel .nav-item { float:none; border-top:1px solid #bab7ab; padding:10px 0; margin-left:0; font-size:18px } 
	#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; font-weight:500; padding:0; height:auto; } 
	#mainnav-collapse .nav-item .nav-panel .nav-item a:hover { color:#ed1c24; }
	
	
	#mainnav .nav-item .collapse { position:absolute; top:100%; left:0; z-index:999; }
    /* nav hover disabled, change to display block to reactivate */
	#mainnav .nav-item .collapse.over { display:none; }
	#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; }
}