/***CODE POUR VISUEL 3D***/
.canvas-wrapper{
position:fixed;
width: 100%;
height:100%;
z-index:30;
}
.webgl{
width: 100%;
height:100%;
}
html.lenis{
height:auto;
}
.lenis.lenis-smooth{
scroll-behavior:auto;
}
.lenis.lenis-smooth [data-lenis-prevent]{
overscroll-behavior: contain;
}
.lenis.lenis-stopped{
overflow: hidden;
}
.lenis.lenis-scrolling iframe{
pointer-events: none;
}

 	/*BLEU CLAIR*/
	/*background:#5C8EA4;*/
    /*background-color: rgba(136,171,189,1.0);*/
	/*BLEU MOYEN*/
	/*background:#487C94;*/
    /*background-color: rgba(92,142,164,1.0);*/
	/*BLEU FONCÉ*/
	/*background:#11647C;*/
    /*background-color: rgba(16,97,120,1.0);*/
	/*BLEU FOND IMAGES*/
	/*background:#709DB1;*/

@font-face {
	font-family: 'Montserrat'; 
	src: url('font/Montserrat-Light.otf'); 
}
body{
	font-family: 'Open Sans', arial, sans-serif;
	background:#5C8EA4;
}
.body-index{
	background-color: #11647C;
	background-image:url("images/patternBis124x128.svg");
	background-position:left top;
	background-size: 10%;
}

*{
	margin:0;
	padding:0;
}

.clear{
	clear:both;
}

section {
	width:100%;
	margin:0px;
	height:100vh;
	position:relative;
}

#intro, #first-panel, #second-panel, #third-panel, #final, #footer {
	background-image: linear-gradient(to right, rgba(16,97,120,1.0), rgba(16,97,120,1.0), rgba(16,97,120,0.0), rgba(16,97,120,1.0), rgba(16,97,120,1.0));
}
.signaletique {
	position:absolute;
	width:16%;
	margin:10vh 42% 0px 42%;
}
.tag {
	position:absolute;
	width:50%;
	margin:15vh 15% 0px 35%
}
.camera-part0{
	position:absolute;
	z-index:10;
	width:30%;
	margin:20vh 0% 0px 70%;
}
.camera-part1{
	position:absolute;
	z-index:30;
	width:25%;
	margin:20vh 5% 0px 70%;
}
.camera-part2{
	position:absolute;
	z-index:20;
	width:30%;
	margin:20vh 0% 0px 70%;
}
.poster1 {
	position:absolute;
	width:16%;
	margin:50vh 62% 0px 22%;
	z-index:50;
}
.poster2 {
	position:absolute;
	width:16%;
	margin:22vh 17% 0px 67%;
	z-index:5;
}
.element{
	position: fixed;
	height: auto;
	z-index:20;
	top: 50%;
	bottom:50%;
	margin-top:-10%;
}
.elementBIS{
	position: fixed;
	height: auto;
	z-index:10;
	top: 50%;
	bottom:50%;
	margin-top:-10%;
}
.elementTER{
	position: fixed;
	height: auto;
	z-index:40;
	top: 50%;
	bottom:50%;
	margin-top:-10%;
	width:100%;
	/*background-color: aqua;*/
}
.element-center{
	text-align:center;
	font-family: 'Montserrat', sans-serif;
	font-weight: 300;
	font-size:3em;
}
.element-center a{
	text-decoration: none;
	color:#FFFFFF;
}
.element-left{
	text-align:right;
}
.element-left img{
	padding-right:2%;
}
.element-right{
	text-align:left;
}
.element-right img{
	padding-left:2%;
}
.element1, .element5{
	width: 22%;
	/*background: black;*/
	right: 39%;
	left: 39%;
}
.element2, .element6{
	width: 12%;
	/*background: red;*/
	right: 44%;
	left: 44%;
}
.element3, .element7{
	width: 38%;
	/*background: aqua;*/
	right: 31%;
	left: 31%;
}
.element4, .element8{
	width: 19.6%;
	/*background:brown;*/
	right: 40.2%;
	left: 40.2%;
}
.vh-100{
  min-height:50vh;
  height:100vh!important;
}
@media only screen and (max-width: 1500px) {
.element-center{
	font-size:2em;
}
.signaletique {
	position:absolute;
	width:20%;
	margin:10vh 40% 0px 40%;
}
.tag {
	position:absolute;
	width:60%;
	margin:15vh 10% 0px 30%
}
.camera-part0{
	position:absolute;
	z-index:10;
	width:40%;
	margin:15vh 0% 0px 60%;
}
.camera-part1{
	position:absolute;
	z-index:30;
	width:34%;
	margin:15vh 6% 0px 60%;
}
.camera-part2{
	position:absolute;
	z-index:20;
	width:40%;
	margin:15vh 0% 0px 60%;
}
.poster1 {
	position:absolute;
	width:20%;
	margin:50vh 58% 0px 22%;
	z-index:50;
}
.poster2 {
	position:absolute;
	width:20%;
	margin:22vh 15% 0px 65%;
	z-index:5;
}
}
@media only screen and (max-width: 1200px) {
.element, .elementBIS, .elementTER{
	margin-top:-15%;
}
.element1, .element5{
	width: 33%;
	/*background: red;*/
	right: 33.5%;
	left: 33.5%;
}
.element2, .element6{
	width: 18%;
	/*background: black;*/
	right: 41%;
	left: 41%;
}
.element3, .element7{
	width: 57%;
	/*background:brown;*/
	right: 21.5%;
	left: 21.5%;
}
.element4, .element8{
	width: 29.4%;
	/*background:aqua;*/
	right: 35.3%;
	left: 35.3%;
}
}
@media only screen and (max-width: 850px) {
.signaletique {
	position:absolute;
	width:36%;
	margin:10vh 32% 0px 32%;
}
.tag {
	position:absolute;
	width:64%;
	margin:15vh 8% 0px 28%
}
.camera-part0{
	position:absolute;
	z-index:10;
	width:50%;
	margin:15vh 0% 0px 50%;
}
.camera-part1{
	position:absolute;
	z-index:30;
	width:43%;
	margin:15vh 7% 0px 50%;
}
.camera-part2{
	position:absolute;
	z-index:20;
	width:50%;
	margin:15vh 0% 0px 50%;
}
.poster1 {
	position:absolute;
	width:25%;
	margin:50vh 55% 0px 20%;
	z-index:50;
}
.poster2 {
	position:absolute;
	width:25%;
	margin:22vh 12% 0px 63%;
	z-index:5;
}
}
@media only screen and (max-width: 780px) {
#intro, #first-panel, #second-panel, #third-panel, #final, #footer {
	background-image: linear-gradient(to right, rgba(16,97,120,1.0), rgba(16,97,120,1.0), rgba(16,97,120,0.0), rgba(16,97,120,0.0), rgba(16,97,120,0.0), rgba(16,97,120,1.0), rgba(16,97,120,1.0));
}
}
@media only screen and (max-width: 600px) {
.signaletique {
	position:absolute;
	width:46%;
	margin:10vh 28% 0px 28%;
}
.tag {
	position:absolute;
	width:68%;
	margin:15vh 6% 0px 26%
}
.camera-part0{
	position:absolute;
	z-index:10;
	width:60%;
	margin:15vh 0% 0px 40%;
}
.camera-part1{
	position:absolute;
	z-index:30;
	width:50%;
	margin:15vh 7% 0px 43%;
}
.camera-part2{
	position:absolute;
	z-index:20;
	width:60%;
	margin:15vh 0% 0px 40%;
}
.poster1 {
	position:absolute;
	width:30%;
	margin:50vh 53% 0px 17%;
	z-index:50;
}
.poster2 {
	position:absolute;
	width:30%;
	margin:22vh 10% 0px 60%;
	z-index:5;
}
}