#mainnav-collapse { display:none; width:100%; position:absolute; left:0; top: 60px; 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 a { display:block; padding:10px 0; margin-right:24px; font-weight: bold;}
#mainnav-collapse .nav-item a:hover { text-decoration:none; color:#343D47; }
#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); }


#mainmenu-nav { text-align:center;  background:rgba(255,255,255,0); }
#mainmenu-nav #mainnav-button { 
	display:flex;
	justify-content: center;
	align-items: center; 
	background:transparent; 
	border:0; 
	transition:.2s ease;
	color:white;
    position: absolute;
    right: 10px;
    top: 10px;
	padding: 15px 20px;
}
#mainmenu-nav #mainnav-button .inner { display:inline-block; padding:14px 5px; }
#mainmenu-nav #mainnav-button:hover, #mainmenu-nav #mainnav-button.active { background-color:#fff; color: #102548; }
#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; }
	#mainmenu-nav #mainnav-button {top:5px; right: 0; }
	#header .logo {  width: 275px;}
}

@media (max-width:1199px) {
	#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:#fff; }  
	#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:""; }
	#navigation a { color:#343D47; }
	#navigation a:hover { color:#102548; }
	#mainmenu-nav #mainnav-button:hover .button-image span,  #mainmenu-nav #mainnav-button:active .button-image span{ background:#102548; }  
	#mainmenu-nav #mainnav-button:hover .button-image span::before,
	#mainmenu-nav #mainnav-button:hover .button-image span::after,
	#mainmenu-nav #mainnav-button:active .button-image span::before,
	#mainmenu-nav #mainnav-button:active .button-image span::after
	{background-color: #102548; }
	
	#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 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 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; background:#102548; }
}

#mainnav-collapse { width:100%; }


#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 .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:1200px) {
	#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; text-transform: uppercase;}
	#mainnav-collapse .nav-item a { display:block; padding:30px 10px 30px; transition:background-color .2s; color: #fff; } 
	#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; color:#102548; } 
	
	
	#mainnav .nav-item .collapse { position:absolute; top:100%; left:0; z-index:999; }
	#mainnav .nav-item.last .collapse { left:auto; right:0; }
	#mainnav #nav-news .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; }
	#navigation #mainnav { left: unset !important; margin-top: 10px; margin-right: 20px;}
}

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

/* SOCIAL */
#header-social-media-links {
	display: block;
    position: absolute;
    right: 20px;
    top: 75px;
	display: none;
}

@media(min-width: 1200px) {
	#header-social-media-links {  display: block; top: 85px; right: 30px;}
}
@media(min-width: 1400px) {
	#header-social-media-links { top: 95px;	}
	#navigation #mainnav {  margin-top: 20px; }
}
#header-social-media-links .social-link {
	height: 22px;
	width: 22px;
	display: inline-block;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	margin-right: 15px;
}
#header-social-media-links .social-link:hover {
	filter: brightness(.7);
}
#header-social-media-links .social-last {
	margin-right: 0;
}