/* ======
   HEADER 
   ====== */
/*
header#header * { 
	outline: 1px solid red;
}*/

header#header {
	position: sticky;
	top: 0;
	z-index: 9000; 
	background-color: var(--color__oia-blue); }

#container { }
	

.header__nav_container {
	display: flex;
	justify-content: space-around; }





/* =============
   NAV_AUXILIARY 
   ============= */

.nav__auxiliary .header__nav_container {
	justify-content: space-between;
	padding: 0; }

.nav__auxiliary {
	overflow: hidden;
	flex-grow: 1;
	justify-content: flex-end;
	position: relative;
	font-size: 1.6rem;
	width: 100%;
	background-color: var(--color__midnight);
	border-bottom: 1px solid var(--color__oia-blue);}

.nav__auxiliary nav {
	display: flex;
	padding-right: var(--spacing__x);
	transform: translateX(1.5rem); }
	
.nav__auxiliary nav li {
	display: inline-block; }

.nav__auxiliary nav li a {
	display: block;
	position: relative;
	transition: all .4s;
	padding: 1.25rem 1.6rem; 
	color: var(--color__sky); }

.nav__auxiliary nav li a:before {
	height: .8em;
	width: 1px;
	background: var(--color__sky);
	content: '';
	left: 0;
	top: 50%;
	transform: translateY(-40%);
	display: block;
	position: absolute; }

.nav__auxiliary nav li a:before {
	height: .8em;
	width: 1px;
	background: var(--color__white);
	content: '';
	left: 0;
	top: 50%;
	transform: translateY(-40%);
	display: block;
	position: absolute; }
	
.nav__auxiliary nav li:first-of-type a:before {
	content: none; }

.nav__auxiliary nav li a:hover {
	color: var(--color__white); }
	
	
@media all and (max-width:1180px) {

	.nav__auxiliary	nav ul {
		display: none; }
	 
}



/* ===============
   ADVISORY TICKER 
   =============== */	
.advisory_ticker {
	background: var(--color__oia-blue);
	height: 100%;
	width: 36%; 
	float: left;
	z-index: 4;
	position: relative;
	color: var(--color__white);
	overflow: hidden; }

.advisory_ticker:before {
	height: 100%;
	width: 999rem;
	background: var(--color__oia-blue);
	content: '';
	right: 0;
	z-index: -1;
	top: 0;
	display: block;
	position: absolute; }

.ticker__items {
	overflow: hidden; }

.ticker__items__container {
	display: flex;
	width: max-content;
	animation-delay: .5s;
	animation-play-state: running; }

.ticker__items__container .item {
	box-sizing: border-box;
	padding: 14px;
	text-align: center;
	white-space: nowrap;
	margin-right: 12rem; }

.ticker__items__container .item a {
	color: var(--color__sky);  }

/* Pause the animation on hover */
.advisory_ticker:hover .ticker__items__container {
	animation-play-state: paused; }
	
	
@media all and (max-width:1180px) {

	.advisory_ticker {
		background: var(--color__midnight);
		width: 100%; }
	 
	 .advisory_ticker:before {
	 	display: none; }
}
	

@media all and (max-width:500px) {

	.advisory_ticker {
		font-size: 1.3rem; }
		
}


/* ===================
   NAV_MAIN / BRANDING
   =================== */
   
.nav__main .header__nav_container {
	padding: 3rem var(--spacing__x); }
	
.branding {
	z-index: 190;
	position: relative;
	line-height: 0;
	transition: all .6s;
	flex: 1; }		

.branding a {
	display: block; }
	
.branding,
.branding img {
	width: auto;
	height: 55px; }		

.nav__main {
	float: left;
	clear: left;
	width: 100%;	
	position: relative; }
	
.nav__main nav {
	padding-right: 3rem; }

 .nav__main nav ul {
 	display: flex;
    align-items: stretch;
 	height: 100%;
 	column-gap: 4rem; /* IWS make this 3rem */}
 		
.nav__main nav li {	 }

.nav__main nav li a {
	box-sizing: border-box !important;
	cursor: pointer;
	display: flex;
	padding: 1rem 1rem;
	border: 3px solid transparent;
	font-size: 2.4rem;
	color: var(--color__white); }
  
.nav__main nav li.has-btn a {
	color: var(--color__midnight); }   
 
.nav__main nav li.has-btn a {
	background: var(--color__lime); }

/* Uncomment when IWS is active */	
@media all and (max-width:1400px) {
	
	header#header .header__panel,
	header#header .nav__main {
		float: left;
		clear: left;
		width: 100%; }
	
	.branding,
	.branding img {
		height: 45px; }	
		
	.nav__main nav {
		padding-right: 3rem; }
	
	 .nav__main nav ul {
 		column-gap: 1rem; }
 	
	.nav__main nav li a {
		font-size: 2.1rem; 
		padding: .5rem 1rem; }
	 
	 
}

@media all and (max-width:1300px) {

	.nav__main nav {
		padding-right: 2rem; }
		
	.nav__main nav li a {
		font-size: 1.8rem; }

}
   
@media all and (max-width:1100px) {
	
	 .nav__main .header__nav_container {
		display: block;
	 	padding-top: 2rem;
	 	padding-bottom: 2rem; }
	
		
	.nav__main nav {
		margin-top: 3rem;
		padding-right: 0; }
	 
	 .nav__main nav ul {  
	 	
	 }
	 
	.nav__main nav ul li {
	  	flex-grow: 1; }
		
	.nav__main nav li a {
	 	line-height: 1.25em;
	 	border-width: 2px;
	 	margin-left: 0;
		height: auto;
		border-radius: 10px;
		justify-content: center;
		width: auto;
		padding: .5em;
		background: var(--color__midnight); }
}


@media all and (max-width:900px) {
	

	.nav__main nav ul {
	 		column-gap: .5rem; }
	 	
 }	


@media all and (max-width:700px) {
	
	.branding,
	.branding img {
		height: 40px; }	
	
	.nav__main nav {
		margin-top: 2rem; }
		
	.nav__main nav li a {
		white-space: nowrap;
		padding: .5em;
		font-size: 1.8rem; }

}




@media all and (max-width:700px) {
	
	.nav__main nav {
		display: none; }
		
	.nav__main nav ul li { 
	  	width: auto; }
}


@media all and (max-width:500px) {


	.branding,
	.branding img {
		height: 30px; }	
	

}


@media all and (max-width:400px) {


	.branding,
	.branding img {
		height: 26px; }	
	

}


/* ===============
   MEGA MENU CLOSE 
   ============== */
.close_mega_menu {
	overflow: hidden;
	right: 2rem;
	top: 2rem; }


.close_mega_menu a {
	background-size: contain;
	height: 2rem;
	width: 2rem;
	display: block; }

.close_mega_menu a span {
	display: block;
	text-indent: -999rem; }

.close_mega_menu {
	position: absolute;
	z-index: 900000; }
	
.close_mega_menu a {
	background: url('../svg/nav-close.svg') no-repeat center;
	background-size: contain; }


@media all and (max-width:1000px) {
	
	 .open_mega_menu {
	 	position: absolute;
	 	top: 50px;
	 	right: var(--spacing__x);
	 	z-index: 900; }

}



/* =============
   HEADER PANELS 
   ============= */
.header__panel {
	float: left;
	clear: left;
	width: 100%;
	max-height: 0;
	overflow: hidden;
	position: relative;
	background: var(--color__midnight);
	color: var(--color__white);
	text-align: center;
	transition: all .6s;
	z-index: 9; }

.header__search__container,
.header__track__container,
.header__localisation__container {
	transition: all .6s;
	transition-delay: .2s;
	opacity: 0;
	padding: 9rem var(--spacing__x); }


.header__search__active,
.header__track__active,
.header__localisation__active {
	max-height: 999rem; }

.header__search__active .header__search__container,
.header__track__active .header__track__container,
.header__localisation__active .header__localisation__container {
	opacity: 1; }
	
.header__panel .close-panel {
	color: var(--color__sky);
	font-size: 1.6rem;
	position: absolute;
	top: 1rem;
	right: var(--spacing__x); }	
	
	
/* =========
   MINIMISED 
   ========= */	
header#header.minimised {
	position: relative;
	background-color: transparent; }		
	
	
.header__minimised_container {
	position: relative;
	padding: 3rem var(--spacing__x); }
	
.header__minimised_container .branding {
	margin-right: 50px; }
	
.close-page	{
	display: block;
	cursor: pointer;
	position: absolute;
	right: var(--spacing__x);
	top: 3rem;
	height: 2.4rem;
	width: 2.4rem;
	text-indent: -999rem;
	background: url('../svg/icon__close__white.svg') no-repeat center; }
	
.close-page	a {
	display: block; }	
	

/* ==============
   HEADER TOOLBAR 
   ============== */	
.header__toolbar	 {
	position: relative;
	z-index: 9000;
	display: flex;}

.header__toolbar	 ul {
	display: flex; }

.header__toolbar	 ul li {
	height: 6rem;
	overflow: hidden; }
			
.header__toolbar a {
	display: none;
	width: 5rem;
	height: 100%;
	text-indent: -99em;
	background: no-repeat center;
	background-size: auto 4.5rem; }

.header__toolbar	 a#open__track {
	background-image: url('../svg/toolbar_track_v3.svg'); }

.header__toolbar	 a#open__search {
	background-image: url('../svg/toolbar_search_v3.svg'); }

.header__toolbar	 a#open__megamenu {
	background-image: url('../svg/toolbar_nav.svg'); }
	
.header__toolbar	 a#open__search,
.header__toolbar	 a#open__megamenu {
	display: block; }

.header__toolbar	 a#open__megamenu {
	margin-left: 2rem; }


@media all and (max-width:1100px) {
	
	 .header__toolbar a {
		margin-left: 2rem; }
	
	 .header__toolbar a#open__track,
	 .header__toolbar a#open__search {
	 	display: block; }

}

@media all and (max-width:1100px) {
	
	.header__toolbar	 {
		position: absolute;
		top: 2rem;
		transform: translateX(5px);
		right: var(--spacing__x); }

	.header__toolbar	 ul li {
		height: 5rem; }
}

@media all and (max-width:700px) {
	
	 .header__toolbar ul li {
		height: 4rem; }


}

@media all and (max-width:500px) {
	
	 .header__toolbar ul li {
		height: 3rem; }
		
	 .header__toolbar a { 
		width: 4.5rem;
		margin-left: 0rem;
	 	background-size: auto 2.5rem; }

	.header__toolbar	 a#open__megamenu {
		margin-left: 0; }
	
}


@media all and (max-width:400px) {
	
	 .header__toolbar ul li {
		height: 2.5rem; }
		
	 .header__toolbar a { 
		width: 3.25rem;
	 	background-size: auto 2rem;}

}






	
/* ========
   SCROLLED 
   ======== */		

.nav__auxiliary {
	max-height: 999px;
	transition: max-height 1s; }	
	
.scrolled header#header .nav__auxiliary {
	max-height: 0; }
	
	
	
	
/* =================
   LANGUAGE SWITCHER 
   ================= */		

/* Switcher */
.nav__auxiliary .weglot-flags  {
	display: flex;
	align-self: center; }

a#open__localisation {
	position: relative; }

a#open__localisation:before {
	margin-right: 0; }
	
a#open__localisation span {
	display: none;
	text-indent: -999em; }

a#open__localisation:after {
	content: '';
	transition: all .6s;
	position: absolute;
	display: block;
	bottom: -7px;
	right: -5px;
	width: 12px;
	height: 12px;
	z-index: 1;
	background-position: bottom right;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='11px' height='7px' viewBox='0 0 11 7' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(5.2684, 3.2268) rotate(90) translate(-5.2684, -3.2268)translate(2.0601, -2.0232)' fill='%23FFFFFF'%3E%3Cpolygon id='Fill-1' transform='translate(3.2083, 5.25) rotate(90) translate(-3.2083, -5.25)' points='7.08714701 8.45833333 3.20870572 4.69894832 -0.670666534 8.45833333 -2.04166667 7.12973762 3.20879882 2.04166667 8.45833333 7.12973762'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }

a#open__localisation.active:after {
	transform: rotate(180deg); }
	
/* Country Selector */		
.country-selector {
	display: block;
	text-align: right; }

.country-selector label,	
.country-selector ul li {
	display: block !important;
	line-height: 1.4em;
	margin: 0 !important; }	

.country-selector label,	
.country-selector a {
	color: var(--color__white);
	font-weight: normal;
	padding: 1.5rem 0 ;
	display: block; }	
	
.country-selector .weglot-flags span:before,
.weglot-flags a:before {
	border: 1px solid var(--color__white); 
	border-radius: 5rem !important; }

.country-selector .weglot-flags span:before,
.country-selector .weglot-flags a:before {
	position: absolute;
	right: 0; }

.country-selector .weglot-flags span,
.country-selector .weglot-flags a {
	padding-right: 5rem; }

.country-selector a:hover { 
	text-decoration: none !important; }
	
.country-selector.weglot-inline a:hover {
	color: var(--color__sky); }	
@media all and (max-width:500px) {	

	.nav__auxiliary nav {
		padding-left: 2rem;
		transform: translate(0); }
}


/* Weglot custom flags */
.weglot-flags.flag-3.en>a:before, .weglot-flags.flag-3.en>span:before { 			background-image: url('../svg/us-2.svg'); }
.weglot-flags.flag-3.de>a:before, .weglot-flags.flag-3.de>span:before { 			background-image: url('../svg/de-2.svg'); }
.weglot-flags.flag-3.es>a:before, .weglot-flags.flag-3.es>span:before { 			background-image: url('../svg/es-2.svg'); }
.weglot-flags.flag-3.br>a:before, .weglot-flags.flag-3.br>span:before,
.weglot-flags.flag-3.a0>a:before, .weglot-flags.flag-3.a0>span:before { 			background-image: url('../svg/br-2.svg'); }
.weglot-flags.flag-3.zh>a:before, .weglot-flags.flag-3.zh>span:before { 			background-image: url('../svg/cn-2.svg'); }



