/*GLOBAL*/
@media screen {
body {
	display:table;
	font-family:helveticanow;
	background-color:#14233F;
	color:#FFFFFF;
}
body>* {
	display:table-row;
}
body>*>* {
	display:table-cell;
}
body[rel="fr"] *[rel="en"],
body[rel="en"] *[rel="fr"] {
	display:none;
}
a, a:link, a:active, a:visited, a:hover{
	color:#1B3156;
}
@keyframes uwait {
    0%   {transform:rotate(0deg);}
    25%  {transform:rotate(90deg);}
    50%  {transform:rotate(180deg);}
    75%  {transform:rotate(270deg);}
    100% {transform:rotate(360deg);}
}    
.wait {
  display:none;
  width:20px;
  height:20px;
}
    .wait svg {
      width:100%;
      height:100%;
      animation-name: uwait;
      animation-duration: 1s;
      animation-iteration-count: infinite;
      transform-origin:50% 50%;
      animation-timing-function: steps(2, end);
    }
    .wait path {
      stroke-width:2px;
      stroke-linejoin:round;
      fill:none;
    }
.waiting .wait {
  display:inline-block;
}


main {
	height:100%;
}
main>section {
	padding-bottom:30px;
}
}



/*HEADER*/
@media screen {
#logogitana {
	position:absolute;
	display:inline-block;
	top:0;
	left:0;
	text-align:center;
}
		#logogitana:after {
			content:'';
			position:absolute;
			top:0;
			right:0;
			height:40%;
			background-color:#FFCE21;
		}
		#logogitana img {
			position:absolute;
			left:50%;
			top:50%;
			width:64.5%;
			height:auto;
			transform:translate(-50%, -50%);
		}

header>section {
	position:relative;
}
#mainnav {
	position:absolute;
	display:table;
	top:75px;
	left:50%;
	transform:translateX(-50%);
}
		#mainnav>div {
			display:table-row;
		}
		#mainnav a {
			display:table-cell;
			text-align:center;
			padding-left:2vw;
			padding-right:2vw;
			font-weight:800;
			text-transform:uppercase;
		}
		#mainnav a.linktracker {
			display:none;
		}
		#mainnav.withtracker a {
			padding-left:1vw;
			padding-right:1vw;
		}
		#mainnav.withtracker a.linktracker {
			display:table-cell;
		}
		header a, 
		header a:link,
		header a:active,
		header a:visited {
			color:#FFFFFF;
		}
		#mainnav a.on,
		#mainnav a:hover {
			color:#FFCE21;
		}
		body[rel='fr'] header .languages a.fr,
		body[rel='en'] header .languages a.en {
			border-bottom-color:#FFCE21;
		}

header .languages {
	position:absolute;
	text-transform:uppercase;
	box-sizing:border-box;
}
		header .languages>a {
			border-bottom:2px solid transparent;
		}
		header .languages>a:hover {
			font-weight:bold;
		}
		body[rel='fr'] header .languages a.fr,
		body[rel='en'] header .languages a.en {
			font-weight:800;
		}
#socialnetwork {
	position:absolute;
	top:0;
	right:0;
	z-index:10;
}
		#socialnetwork a {
			vertical-align:middle;
			display:inline-block;
			height:100%;
		}
		#socialnetwork svg {
			width:100%;
			height:100%;
		}
		#socialnetwork  path {
			fill:#FFFFFF;
		}
		#socialnetwork label {
			display:none;
		}

}


/*TIMEKEEPER*/
@media screen {
	#timekeeper {
		position:absolute;
	}
			#timekeeper caption {
				font-weight:100;
				text-transform:uppercase;
				font-size:10px;
				width:100%;
				line-height:2em;
			}
			#timekeeper td {
				border:1px solid rgba(255,255,255,0.5);
				vertical-align:middle;
				padding:0 10px;
				font-size:14px;
			}
			#timekeeper .marchlab {
			}
			#timekeeper .marchlab>a {
				display:block;
			}
			#timekeeper .marchlab img {
				width:auto;
				box-sizing:border-box;
			}
			#timekeeper .chrono {
				white-space:nowrap;
				border-bottom:0px;
			}
					#timekeeper .chrono>* {
						display:inline-block;
						text-align:right;
					}
					#timekeeper .chrono>i {
					}
					#timekeeper .chrono>*:after {
						display:inline-block;
					}
					body[rel='fr'] #timekeeper .chrono>b:after {
						content:'j';
					}
					body[rel='en'] #timekeeper .chrono>b:after {
						content:'d';
					}
					#timekeeper .chrono>u:after {
						content:'h';
					}
					#timekeeper .chrono>i:after {
						content:'min';
					}
					#timekeeper .chrono>s:after {
						content:'s';
					}
					#timekeeper .advance {
						text-align:center;
						border-top:0px;
					}
					#timekeeper .advance.pos .pos,
					#timekeeper .advance.neg .neg {
						font-weight:600;
					}
					#timekeeper .advance.pos .pos {
						color:#89EC28;
					}
					#timekeeper .advance.neg .neg {
						color:#F5412A;
					}

}


/*SUB NAV*/
@media screen {
#subnav {
	position:relative;
	width:100%;
	background-color:#F7F7F7;
	color:#14233f;
	height:auto;
	transition:height 0.2s ease-out;
	padding-top:10px;
	padding-bottom:10px;
	z-index:500;
	overflow:hidden;
}
body.PRESS #subnav {
	/*background-color:#FFF8DD;*/
}

#subnav.off {
	height:0;
	padding:0px;
}
#subnav>div {
	display:table;
}
	#subnav .submenu {
		display:none;
	}
	#subnav .submenu.open {
		display:table-row;
	}
	#subnav .rubrics {
		display:table-cell;
		padding:1em 2vw;
		box-sizing:border-box;
		vertical-align:top;
	}
			#subnav .rubrics>div {
				width:200px;
				height:180px;
			}
					#subnav .rubric {
						display:block;
						position:relative;
						line-height:35px;
						padding-left:0.5em;
						background-color:transparent;
						border-left:0px solid transparent;
						cursor:pointer;
						transition:all 0.2s ease-in-out;
					}
					#subnav .rubric:after {
						content: " ";
						background-image:url("data:image/svg+xml;charset=utf-8,<svg width='10' height='10' viewBox='-5 -5 10 10' xmlns='http://www.w3.org/2000/svg'><path d='M-5-5l5 5l-5 5' fill='none' stroke-width='1.5' stroke='%23798297' fill-rule='evenodd'/></svg>");
						background-repeat:no-repeat;
						background-position:right center;
						position:absolute;
						top:0;
						right:15px;
						height:100%;
						width:10px;
						font-size:30px;
						font-weight:100;
						transition:all 0.2s ease-out;
					}
					#subnav .rubric:hover {
						border-left-width:12px;
						border-color:#A4A4A4;
					}
					#subnav .rubric.open {
						background-color:#FFFFFF;
						border-left-width:12px;
						border-color:#FFCE21;
					}
					#subnav .rubric:hover:after,
					#subnav .rubric.open:after {
						right:5px;
					}
					#subnav .rubric+.rubric {
						border-top:1px dotted rgba(20,35,63,0.3);
					}
	#subnav .contents {
		display:table-cell;
		position:relative;
		width:100%;
		height:100%;
		box-sizing:border-box;
	}
			#subnav .contents sub,
			#subnav .contents sup {
				display:block;
				position:absolute;
				top:30%;
				width:40px;
				height:40px;
				line-height:40px;
				text-align:center;
				background-color:#FFFFFF;
				box-shadow: 2px 0px 6px -1px rgba(0,0,0,0.75);
				border-radius:50%;
				font-family:fas;
				color:#000000;
				z-index:300;
				cursor:pointer;
			}
			#subnav.off .contents sub,
			#subnav.off .contents sup {
				display:none;
			}
			#subnav .contents sub.off,
			#subnav .contents sup.off {
				display:none;
			}
			#subnav .contents sub {
				left:-10px;
			}
			#subnav .contents sup {
				right:5px;
			}
			#subnav .contentlinks {
				position:absolute;
				top:0;
				left:10px;
				right:25px;
				height:100%;
				overflow-x:auto;
				overflow-y:hidden;
				scrollbar-width:none;
			}
			#subnav .contentlinks::-webkit-scrollbar {
				width:0;
			}

			#subnav .contentlinks>div {
				white-space:nowrap;
				height:100%;
				vertical-align:top;
			}
			#subnav .contentlinks.off {
				display:none;
			}
					#subnav .contentlinks a {
						position:relative;
						display:inline-block;
						width:200px;
						vertical-align:top;
						margin-right:15px;
						background-color:rgba(0,0,0,0.01);
						border-bottom:5px solid transparent;
						padding:5px;
					}

				#subnav .contentlinks a:hover {
					border-bottom:5px solid rgba(0,0,0,0.1);
					background-color:#FFFFFF;
				}
				#subnav .contentlinks a.on {
					border-bottom:5px solid #ffce21;
					background-color:#FFFFFF;
				}
						#subnav .contentlinks a .image {
							position:relative;
							display:block;
							width:200px;
							height:130px;
							background-size:cover;
						}
						#subnav .contentlinks a .date,
						#subnav .contentlinks a .title {
							display:block;
						}
						#subnav .contentlinks a .date {
							display:block;
							font-weight:100;
							font-size:13px;
							line-height:1.6;
						}
						#subnav .contentlinks a .title {
							display:block;
							font-weight:700;
							font-size:13px;
							line-height:1.2;
							white-space:normal;
							height:51px;
						}
						#subnav .contentlinks a.archives {
						}
						#subnav .contentlinks a.archives .image {
							background-size:contain;
							background-repeat:no-repeat;
							background-position:center center;
						}

						#subnav .contentlinks[data-id="photos"] .image::before {
							position: absolute;
							content:'';
							background-image:url(/assets/images/homeblocks_icon_type_2.svg);
							background-size:contain;
							top:50%;
							left:50%;
							width:40px;
							height:40px;
							transform:translate(-50%, -50%);
							opacity:0.6;
							transition:all 0.3s ease-out;
						}
						#subnav .contentlinks[data-id="photos"] a:hover .image::before {
							opacity:1;
							width:50px;
							height:50px;
						}

						#subnav .contentlinks[data-id="videos"] .image::before {
							position: absolute;
							content:'';
							background-image:url(/assets/images/homeblocks_icon_type_3.svg);
							background-size:contain;
							top:50%;
							left:50%;
							width:40px;
							height:40px;
							transform:translate(-50%, -50%);
							opacity:0.6;
							transition:all 0.3s ease-out;
						}
						#subnav .contentlinks[data-id="videos"] a:hover .image::before {
							opacity:1;
							width:50px;
							height:50px;
						}

	#subnav .submenu.direct .rubrics {
		padding:0;
	}
	#subnav .submenu.direct .rubrics>div {
		width:1px;
	}
	#subnav .submenu.direct .contentlinks>div,
	#subnav .submenu .contentlinks.direct>div {
		text-align:center;
	}
	#subnav .submenu .contentlinks[data-id="press"] a .image {
		background-size:50% 50%;
		background-repeat:no-repeat;
		background-position:center center;
	}
	#subnav .rubric[data-id="press"]  {
		margin-top:15px;
		background-color:rgba(255,206,33,0.2);
	}
}


/*MAIN*/
@media screen {
.wait path {
  stroke:#1B3156;
}
}



/*PAGE*/
@media screen {
#pagecontent {
	position:relative;
	z-index:400;
	transition: all 0.2s ease;
}
#pagecontent.blur {
	opacity:0.3;
	filter: blur(4px);

}

		#pagecontent h1 {
			text-align:center;
			line-height:1.5;
			font-size:40px;
			font-weight:300;
			text-transform:uppercase;
			padding:20px 0;
		}
		#pagecontent h2 {
			text-align: center;
			line-height:1.25;
			font-size: 30px;
			font-weight:300;
			text-transform: uppercase;
			padding:20px 0;
		}
		#pagecontent h3 {
			line-height:1.25;
			font-size:30px;
			font-weight:100;
			padding:30px 0 10px 0;
		}
		#pagecontent h4 {
			line-height:1.25;
			font-size:22px;
			font-weight:100;
			padding:20px 0 10px 0;
		}

}



/*FOOTER*/
@media screen {
footer {
	background-color:#14233F;
	color:#FFFFFF;
}
		footer>section {
			position:relative;
			padding:3vw 25vw 3vw 35vw;
			border-top:2px solid #FFCE21;
		}
				footer .logo {
					position:absolute;
					top:3vw;
					left:7vw;
					width:300px;
					height:100px;
				}
				footer .title {
					font-family:gotham;
					font-weight:bold;
					text-transform:uppercase;
				}
				footer .title em {
					color:#6F9ED4;
				}
				footer .text {
					line-height:1.25;
					font-family:gotham;
					font-weight:normal;
				}
						footer .text p+p {
							margin-top:2em;
						}
				footer .link {
					position:absolute;
					display:inline-block;
					top:3vw;
					right:7vw;
					font-family:gotham;
					font-weight:bold;
					font-size:13px;
					padding:2ex 3ex;
					color:#FFFFFF;
					background-color:#6F9ED4;
				}
				footer .legal {
					position:absolute;
					display:inline-block;
					bottom:1vw;
					right:7vw;
					font-family:gotham;
					font-weight:bold;
					font-size:13px;
					padding:2ex 3ex;
					color:#FFFFFF;
				}


}


/*darkmasks*/
@media screen {
#darkmask {
	display:none !important;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:rgba(20,35,63,0.9);
	opacity:0.1;
	transition: all 0.5s ease;
	cursor:pointer;
	z-index:10000;
}
#darkmask:after {
	content:"\f057";
	font-family:fas;
	position:absolute;
	top:1vw;
	right:1vh;
	font-size:22px;
	color:#FFFFFF;
}
#darkmask.on {
	display:block !important;
	opacity:1;
}
	#darkmask .video {
		position:fixed;
		width:80vw;
		height:45vw;
		top:50%;
		left:50%;
		transform:translate(-50%, -50%);
	}
	#darkmask .sound {
		position: fixed;
		width: 80vw;
		height: 30vw;
		top:50%;
		left:50%;
		transform:translate(-50%, -50%);
	}

	#darkmask .photogalery {
		position:fixed;
		width:75vw;
		height:50vw;
		max-height:80vh;
		top:50%;
		left:50%;
		transform:translate(-50%, -50%);
	}
			#darkmask .photogalery .imgcontainer {
				position:absolute;
				top:0;
				left:0;
				bottom:0;
				right:0;
				background-size:contain;
				background-position:center center;
				background-repeat:no-repeat;
				z-index:900;
			}
			#darkmask .photogalery sup,
			#darkmask .photogalery sub {
				position:absolute;
				font-family:'fas';
				font-size:20px;
				top:50%;
				height:20vw;
				line-height:20vw;
				width:33vw;
				transform:translateY(-50%);
				color:#FFCE21;
				z-index:1000;
				opacity:0.5;
				transition: all 0.5s ease;
				cursor:pointer;
				user-select:none;
			}
			#darkmask .photogalery sup:hover,
			#darkmask .photogalery sub:hover {
				opacity:1;
				width:34vw;
			}
			#darkmask .photogalery sub {
				left:-5vw;
				padding-left:2vw;
				text-align:left;
			}
			#darkmask .photogalery sup {
				right:-5vw;
				padding-right:2vw;
				text-align:right;
			}
			#darkmask .photogalery sub:hover {
				left:-6vw;
			}
			#darkmask .photogalery sup:hover {
				right:-6vw;
			}
			#darkmask .photogalery .page {
				position:absolute;
				bottom:-2em;
				line-height:2em;
				left:0;
			}
			#darkmask .photogalery .credits {
				position:absolute;
				bottom:-2em;
				line-height:2em;
				right:0;
			}

			#darkmask video {
				position:fixed;
				width:80vw;
				height:45vw;
				top:50%;
				left:50%;
				transform:translate(-50%, -50%);
			}
}



/*legalmessage*/
@media screen {
	#legalmessage {
		position:fixed;
		display:none;
		top:0;
		bottom:0;
		left:0;
		right:0;
		z-index:20000;
	}
	#legalmessage.on {
		display:block;
	}
			#legalmessage .back {
				position:absolute;
				top:0;
				left:0;
				width:100%;
				height:100%;
				background-color:rgba(20,35,63,0.9);
				opacity:0.1;
				transition: all 0.5s ease;
				cursor:pointer;
			}
			#legalmessage.on .back {
				opacity:1;
			}

			#legalmessage .message {
				position:absolute;
				top:50%;
				left:50%;
				transform:translate(-50%, -50%);
				width:40%;
				height:6em;
				line-height:1.5em;
				background-color:#FFFFFF;
				padding:1em;
				color:#14233F;
			}
					#legalmessage .message .close {
						content:"\f057";
						font-family:fas;
						position:absolute;
						top:1vw;
						right:1vh;
						font-size:22px;
						cursor:pointer;
					}
					#legalmessage .message a {
						text-decoration:underline;
					}
}


/*carrousel*/
@media screen {
#carrousel {
	position:relative;
	height:250px;
	user-select:none;
}
		#carrousel .content {
			position:absolute;
			display:inline-block;
			width:auto;
			top:0;
			bottom:0;
			left:0;
			right:0;
			white-space:nowrap;
			overflow:hidden;
		}
		#carrousel .content.off {
			visibility:hidden;
		}
		#carrousel .element {
			display:inline-block;
			height:100%;
			padding:0 2px;
			vertical-align: middle;
		}

				#carrousel .element .image {
					position:relative;
					width:150px;
					height:150px;
					box-sizing:border-box;
					padding-top:150px;
					margin-top:50px;
					background-size:cover;
					filter:grayscale(100%);
					text-align:center;
				}
				#carrousel .element.on .image {
					width:250px;
					height:250px;
					margin-top:0px;
					filter:none;
				}
				#carrousel.off .element .image,
				#carrousel.off .element.on .image {
					width:250px !important;
					height:250px !important;
					margin-top:0px !important;
					filter:none !important;
				}
						#carrousel .element .image.on {
						}
						#carrousel .element .image.on label {
							color:#ffce21;
						}

#carrouseldetails {
	text-align:center;
	width:75vw;
	max-width:800px;
	margin:30px auto 30px auto;
}
		#carrouseldetails .detail {
			display:none;
		}
		#carrouseldetails .detail.on {
			display:block;
		}
		#carrouseldetails .name {
			font-size:35px;
			line-height:1.1;
			font-weight:300;
		}
		#carrouseldetails .function {
			text-transform:uppercase;
			font-size:16px;
			letter-spacing:3px;
			color:#FFCE21;
		}

		#carrouseldetails article {
			margin:30px 0;
		}
		#carrouseldetails.off article {
			display:none;
		}

}