#mainnav-collapse { display:none; width:390px; max-width:100%; position:absolute; right:0; z-index:999; background-color:#f2f2f2; padding:0; margin-top:1px; box-shadow:3px 3px 5px 0 rgba(0,0,0,0.35); }
#mainnav-collapse.open { display:block; } 

@media (min-width:414px) {
	#mainnav-collapse { max-width:none; }
}

/* #mainnav-button */
#mainnav-button { display:block; background:rgba(0,0,0,0.2); border:0; transition:background-color .2s; color:#333; }
#mainnav-button .inner { display:inline-block; padding:14px 5px; }
#mainnav-button:hover, #mainnav-button.active { background-color:rgba(0,0,0,0.3); }

#mainnav-button .button-text { display:none; text-transform:uppercase; font-weight:400; font-size:22px; line-height:22px; }

#mainnav-button .button-image { position:relative; overflow:hidden; width:22px; height:22px; }
#mainnav-button .button-image:focus { outline:none; }
#mainnav-button .button-image span { display:block; position:absolute; top:10px; left:0; right:0; } 
#mainnav-button .button-image span::before, #mainnav-button .button-image span::after { content:""; position:absolute; display:block; left:0; width:100%; }
#mainnav-button .button-image span, #mainnav-button .button-image span::before, #mainnav-button .button-image span::after { height:3px; background:#333; border-radius:3px; }
#mainnav-button .button-image span::before { top:-6px; }
#mainnav-button .button-image span::after { bottom:-6px; }
#mainnav-button .button-image span { transition:background 0s 0.1s; }
#mainnav-button .button-image span::before, #mainnav-button .button-image span::after { transition-duration:0.1s, 0.1s; transition-delay:0.1s, 0s; }
#mainnav-button .button-image span::before { transition-property:top, transform; }
#mainnav-button .button-image span::after { transition-property:bottom, transform; }
/* active state, i.e. menu open */
#mainnav-button.active .button-image span { background:none; }
#mainnav-button.active .button-image span::before { top:0; transform:rotate(45deg); }
#mainnav-button.active .button-image span::after { bottom:0; transform:rotate(-45deg); }
#mainnav-button.active .button-image span::before, #mainnav-button.active .button-image span::after { transition-delay:0s, 0.1s; }


/* mainnav-collapse */
#mainnav-collapse .nav-item { border-top:1px solid #d9d9d9; }
#mainnav-collapse .nav-panel-level-1>.nav-item:first-child { border-top:0; } 

#mainnav-collapse .nav-item .nav-toggle { position:relative; }
#mainnav-collapse .nav-item .nav-toggle a { display:block; padding:10px 15px; color:#404040; }
#mainnav-collapse .nav-item .nav-toggle a:hover { text-decoration:none; }
#mainnav-collapse .nav-item .nav-toggle a i { font-size:75%; opacity:0.5 }
#mainnav-collapse .nav-item .nav-toggle a:hover i { opacity:1; }
#mainnav-collapse .nav-item .nav-item .nav-toggle a { padding:10px 20px; }

#mainnav-collapse .nav-item.has-submenu>.nav-toggle a { margin-right:60px; } 
#mainnav-collapse .nav-item .nav-toggle button { position:absolute; top:0; right:0; bottom:0; border:0; width:60px; 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-panel .nav-panel { font-size:95%; background:rgba(0,0,0,0.05); }

@media (min-width:481px) {
	#mainnav-button .button-text { display:block; }
	#mainnav-button .button-image { margin-right:10px; }
}

@media (min-width:768px) {
	#mainnav-collapse { right:0; }
}

@media (min-width:1230px) {
	#mainmenu-nav { display:none; }
	#mainnav-collapse { display:block; width:auto; max-width:none; position:static; top:auto; left:auto; background:none; color:inherit; padding:0; box-shadow:none; }

	#mainnav-collapse nav { float:left; }

	#mainnav-collapse .nav-panel .nav-panel { font-size:100%; background:white; }

	#mainnav-collapse .nav-panel-level-1>.nav-item { position:relative; float:left; border-top:0; margin-left:0; }
	#mainnav-collapse .nav-panel-level-1>.nav-item:first-child { margin-left:0; }
	#mainnav-collapse .nav-item.has-submenu>.nav-toggle a { margin-right:0; }
	
	#mainnav-collapse .nav-panel-level-1>.nav-item>.nav-toggle>a { padding-right:10px; padding-left:10px; }
	#mainnav-collapse .nav-panel-level-1>.nav-item>.nav-toggle>a:hover
	, #mainnav-collapse .nav-panel-level-1>.nav-item>.nav-toggle.on>a { background:rgba(255,255,255,0.3); }
	
	#mainnav-collapse .nav-panel-level-1>.nav-item>.collapse
	, #mainnav-collapse .nav-panel-level-1>.nav-item>.collapsing { position:absolute; top:50px; z-index:999; border-top:12px solid transparent; }
	#mainnav-collapse .nav-panel-level-1>.nav-item.last>.collapse
	, #mainnav-collapse .nav-panel-level-1>.nav-item.last>.collapsing { right:0; }
	#mainnav-collapse .nav-item>.collapse.over { display:block; }
	#mainnav-collapse .nav-item>.collapse.in { display:none; }
	#mainnav-collapse .nav-item>.collapse.in.over { display:block; }
	#mainnav-collapse .nav-item>.nav-toggle>button { position:absolute; top:-1000px; left:-1000px; bottom:auto; right:auto; }
	#mainnav-collapse .nav-item>.nav-toggle>button:focus { top:100%; left:50%; bottom:auto; right:auto; margin-left:-15px; }

	#mainnav-collapse .nav-panel-level-1 .nav-panel { box-shadow:3px 3px 5px 0 rgba(0,0,0,0.35); background:#f2f2f2; padding:0; min-width:280px; }
	#mainnav-collapse .nav-panel-level-2 .nav-item { float:none; }
	#mainnav-collapse .nav-panel-level-2 .nav-item.has-submenu { position:relative; } 
	#mainnav-collapse .nav-panel-level-2 .nav-item:first-child { border-top:0; } 
	#mainnav-collapse .nav-panel-level-2 .nav-item a { display:block; text-transform:none; }

	#mainnav-collapse .nav-panel-level-2 .nav-item>.collapse { position:absolute; top:0; left:100%; } 
}

/* search */
#mainmenu-search {  }
#mainmenu-search .dropdown-toggle { display:none; }
#mainmenu-search form { position:relative; } 
#mainmenu-search form #search-field {  }
#mainmenu-search form label { display:none; }
#mainmenu-search form .form-group { margin-bottom:0; }

@media (min-width:1230px) {
	#mainmenu-search { position:relative; }
	#mainmenu-search .dropdown-toggle { display:block; }
	#mainmenu-search .dropdown-toggle:hover { background-color:rgba(255,255,255,0.15); }
	#mainmenu-search .dropdown-toggle:focus { outline:5px auto -webkit-focus-ring-color; }
}