html, body{width: 100%;height: 100%;margin: 0;padding: 0; font-family: ZonaPro_SemiBold;color:white;}

 							/* FONTS */

@font-face {
    font-family: ZonaPro_SemiBold;
    src: url(font/zonapro-semibold-webfont.woff);
}

@font-face {
    font-family: ZonaPro_Black;
    src: url(font/zonapro-black-webfont.woff);
}

@font-face {
    font-family: ZonaPro_Bold;
    src: url(font/zonapro-bold-webfont.woff);
}

@font-face {
    font-family: ZonaPro_Thin;
    src: url(font/zonapro-thin-webfont.woff);
}

@font-face {
    font-family: ZonaPro_Light;
    src: url(font/zonapro-light-webfont.woff);
}

@font-face {
    font-family: ZonaPro_Hairline;
    src: url(font/zonapro-hairline-webfont.woff);
}


@font-face {
    font-family: bebasneue_bold;
    src: url(font/bebasneue_bold-webfont.woff);
}

@font-face {
    font-family: bebasneue_regular;
    src: url(font/bebasneue_regular-webfont.woff);
}

@font-face {
    font-family: bebasneue_book;
    src: url(font/bebasneue_book-webfont.woff);
}

@font-face {
    font-family: bebasneue_light;
    src: url(font/bebasneue_light-webfont.woff);
}

@font-face {
    font-family: bebasneue_thin;
    src: url(font/bebasneue_thin-webfont.woff);
}


.bebas-bold{font-family: bebasneue_bold;}
.bebas-regular{font-family: bebasneue_regular;}
.bebas-book{font-family: bebasneue_book;}
.bebas-light{font-family: bebasneue_light;}
.bebas-thin{font-family: bebasneue_thin;}

.black{font-family: ZonaPro_Black;}
.bold{font-family: ZonaPro_Bold;}
.semibold{font-family: ZonaPro_SemiBold;}
.light{font-family: ZonaPro_Light;}
.thin{font-family: ZonaPro_Thin;}
.hairline{font-family: ZonaPro_Hairline;}
.little_px{font-size: 30px;}
.white{color: white;}


                             /* VIDEO */




#background video{position: fixed;
	              left: 0;top: 0;
	              min-width: 100%; min-height: 100%;
	              width: auto; height: auto;
	              z-index: -100;
                  background: url(images/Screenshot_5.jpg) no-repeat;background-size: cover;}









							/* NAVIGATION */


#black_bar{width: 120%;
		   height: 135px;
		   background-color: black;
		   filter: blur(10px) opacity(80%);
		   position: fixed;
		   left:-5%;top: -5%;
		   z-index: 1;
		   }

nav{position: fixed;
 	top:20px;right:10px;
 	width: 75%;
 	color:white;
 	font-family: ZonaPro_SemiBold;
    z-index: 10;}

nav #nav_img{position: absolute;
			 left: 1%;top: 3.5%;
			 z-index: -10;
			 transition: 0.5s;
			 display: none;}

nav #summer_logo{width:20%;float: right;}
nav #summer_logo2{width: 20%;float: right;}

nav #timer {margin: 0;}
nav #demo  {margin: 0;
	        font-size: 30px;
	    	float: right;
	    	padding: 20px 50px 20px 40px;
	    	background: url(images/brush8.png) no-repeat;
	    	background-position:center;
	    	font-family: ZonaPro_Black;}

nav ul{list-style: none;
	   display: flex;
	   flex-wrap: wrap;
	   justify-content: space-between;}

nav ul li a {text-decoration: none;
			 color: white;
			 padding-right: 5px;}

nav li {color: white;}
nav li :hover{color:#f4c145;transition: 0.5s ease-out;}

#reseaux2{position: fixed;
		  left: 1.5%;top: 2.5%;
		  z-index: 3}
#reseaux2 a{margin-right: 10px;}

#r1{transition: 0.5s;
	opacity: 0;}
#r1:hover{opacity: 1}

#r2{transition: 0.5s;
	opacity: 0;}
#r2:hover{opacity: 1}

#r3{transition: 0.5s;
	opacity: 0;}
#r3:hover{opacity: 1}

#r4{transition: 0.5s;
	opacity: 0;}
#r4:hover{opacity: 1}

#reseaux3{position: fixed;
		  left: 1.5%;top: 2.5%;
		  z-index: 4}
#reseaux3 a{margin-right: 10px;}



					/* NAVIGATION HAMBURGER */


#hamburgerNav{display: none;}

#black_square{width: 60px;height: 60px;
			  position:fixed;
			  top:2%;right: 2%;
			  z-index: 200;}


#black_square img{margin: 5%;width:90%;
				  position:absolute;
				  top:0%;left: 0%;}

#navHidden{width:70%;height:100%;
		   position: fixed;
		   top: 0;left: -75%;
		   z-index: 200;
		   background: url(images/background3.jpg);
		   background-size: cover;
		   opacity:0.98;
		   box-shadow:0px 4px 10px #111;
		   letter-spacing: 1.5px;
		   font-family: bebasneue_bold;
		   font-size:18pt;
		   color: #1f0707;
		   transition: 0.7s;}

#navHidden ul{list-style: none;
			  display: flex;
			  flex-direction: column;
			  justify-content: space-around;
			  height:100%;
			  padding: 0;padding-left: 10%;}

#navHidden ul li{}
#navHidden ul li a{text-decoration: none;color: #1f0707;}

.nav-icons{width:30px;margin-right: 25px;}









#title{position: fixed;
	   top:25%;
	   left:50%;transform: translateX(-50%);
	   font-family: ZonaPro_Thin;
	   font-size: 30pt;
	   z-index: -99;
	   line-height: 150%;
	   /*text-shadow: 1px 1px 2px #111;*/
	   color: #1f0707;}

#title h1{font-weight: normal;
		  margin: 0;
		  letter-spacing: -6px;}
#title img{width: 700px;}

#bvn{letter-spacing: 10px;}

#themes{position: absolute;
		top: 100%; left: 0%;
		font-size: 16pt;
		font-family: bebasneue_bold;
		letter-spacing:-0.8px;
		word-spacing: 20px;
		line-height: 1.3;
		}

.nowordspacing{word-spacing: 0px;}

.letterspacing{letter-spacing: 15px;}




@keyframes changeposition {
  from {
    top: -1%;
  }

  to {
    top: 4%;
  }
}

div {
  
}

#panda{position: fixed;
	   top:0%;
	   left: 0%;
	   z-index: -99;
	   animation-duration: 1.5s;
  	   animation-name: changeposition;
  	   animation-iteration-count: infinite;
  	   animation-direction: alternate;
  	   }


#SGF img{display:none;z-index: -99;}


                              /* GALLERY */


#gallery{background: url(images/sand.png);
		 margin-top: 20%;
		 position: relative;
		 height: 1080px;
		 width: 100%;}
#gallery img{width: 100%}


.fotorama {position: absolute;
		   bottom: 5%;
		   left: 0;
		   width: 100%}


.gallery_titles{position: absolute;
			    top:60%;
			    left:50%;transform: translateX(-50%);
				padding:5%;
				font-weight: normal;
				color: #e2c039;
				margin: 0 auto;
				transition: 0.5s;}
.gallery_titles:hover{color:white;}

.gallery_titles h2{font-size: 35pt;
				   font-weight: normal;
				   text-align: center;
				   text-shadow: 1px 1px 5px #111;
				   letter-spacing: 3px;
				   }
.gallery_titles p{font-size: 10pt;
				   text-align: right;
				   }


				   	/* SYNOPSIS */


#synopsis{background-color: black;
		  background: url(images/background2.jpg);
		  width: 100%;
		  position: relative;
		  top: -100px;}

#synopsis #texts{width: 60%;
				 margin: 0 auto;
				 padding-top:5%;
				 font-family:ZonaPro_Light;
				 color: #bb9130;}


#synopsis #texts h2{margin-bottom:5%;
					font-family:ZonaPro_Bold;}

#synopsis #texts a{text-decoration: none;
				   transition: 0.5s;}
#synopsis #texts a:hover{color:#f46c42;}



#goldCenter{margin: 0 auto;
			padding-top: 3%;padding-bottom: 3%;
			width: 60%;
			display: flex;
			justify-content: space-around;
			flex-wrap: wrap;}


a{color:white;}

#gold{position: relative;}

#gold p{position: absolute;
		width: 128%;
		text-align: center;
		font-size: 25pt;
		font-family:ZonaPro_Bold;
		text-shadow: 2px 2px 15px #222;}

#gold img{filter: brightness(0%);transition: 0.8s;}
#gold img:hover{filter: brightness(100%);}

#gold #cloud{padding-top:70px;}

#cloudText{top:45%;
		   left:64%;transform: translateX(-64%);}

#sunText{top:36%;
		 left:-14%;}		   




		 			/* PAGE 3 */

#page3{width: 100%;
	   background: url(images/background3.jpg);
	   background-size: cover;
	   margin-top:-100px;
	 }

#page3 #page3_objects{margin: 0 auto;
					  width: 70%;}

#page3 h4{padding:0;
		  font-size: 20pt;
		  color:#121212;
		  font-family:ZonaPro_Bold,
		  text-shadow: 2px 2px 15px #222;}

#page3 #text_trailer{padding-top: 10%;padding-bottom: 3%;
					 margin: 0;}

#trailer{position: relative;
		 width: 100%;
		 padding-bottom: 56.25%;
		 height: 0;
		 margin-bottom:100px;
		 margin-top:100px;}

#trailer iframe{position: absolute;
				top:0;
				left:0;
				width:100%;
				height:100%;}

#text_partenaires{margin: 0;margin-top:2%;}
#page3 #partenaires{display: flex;justify-content: center;flex-wrap: wrap;padding: 0;margin: 0;list-style: none;}
#page3 #partenaires img{width: 150px;margin:35px;}


	   				/* PAGE 4 LINK JCJ */


#JCJ{text-decoration: none;}

#page4{width: 100%;
	   height: 250px;
	   background: url(images/Wallpaper_negative.jpg) fixed;}

#page4 h3{text-align: center;
		  margin: 0;
		  padding-top:125px;
		  font-size: 20pt;
		  text-shadow: 2px 2px 15px #222;}
#right{margin-left: 40%;}

/*h3 {
  position: relative;
  color: #FFF;
  text-decoration: none;
}

h3:hover {
  color: #FFF;
}

h3:before {
  content: "";
  position: absolute;
  width: 30%;
  height: 2px;
  bottom: 0;
  left: 35%;
  background-color: #FFF;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

h3:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

*/



		  			/* FOOTER */


#footer{position: relative;
		width: 100%;
	    background-color:#121212;}

#rangee1{display: flex; justify-content: space-between;}

#map1{width: 30%;max-width: 450px;}
#map{height: 250px;
     width: 100%;
 	 margin: 10px;}

#reseaux{margin-left: 15%;}

#espace_pro{margin-right: 10%;margin-top:2%;}
#espace_pro a{text-decoration: none;}


#textbas{width: 100%;
		 bottom: 3%;
		 margin: 0 auto;
		 text-align: center;
	     margin-top: 10px;
	 	 font-family: ZonaPro_Light;
	 	 font-size: 10pt;
	 	 color: #333;}







	   				/* OTHER PAGES */


#page_title{font-weight: normal;
			margin: 0;
			margin-top: 5%;margin-left: 5%;
			font-size: 30pt;
			letter-spacing: 80px;}





@media screen and (max-width: 1600px) {


nav li {color: white;}
nav li :hover{color:#f4c145;transition: 0.3s ease-out;}

  
#panda img{width: 85%;}

@keyframes changeposition {
  from {
    top: 3%;
  }

  to {
    top: 6%;
  }
}

div {
  
}

#title{font-size: 25pt;
	   top:30%;}

#themes{top: 100%; left: 0%;
		font-size: 12pt;
		word-spacing: 12px;
		line-height: 1.3;}

nav{font-size: 11pt;}
nav #nav_img{left: 0.7%;top: 5%;	 
			 width: 140px;}

#gallery{height: 1000px;}
.gallery_titles h2{font-size: 25pt;
				   font-weight: normal;
				   }

#goldCenter{margin: 0 auto;
			padding-top: 3%;
			width: 70%}

#synopsis{background-size: cover;}

}



@media screen and (max-width: 1366px) {
  
#panda img{width: 70%;}

#title{font-size: 22pt;}

#background video{width: 80%;}	

#themes{top: 100%; left: 0%;
		font-size: 10.5pt;
		word-spacing: 10px;
		line-height: 1.5;
		text-align: right;}

nav{font-size: 9pt;}

nav #nav_img{left: 1.5%;top: 5%;
			 width: 130px;}

#gallery{height: 900px;
		 margin-top: 15%;}
.gallery_titles h2{font-size: 25pt;
				   font-weight: normal;
				   }

#goldCenter{margin: 0 auto;
			padding-top: 3%;
			width: 80%}

#synopsis{background-size: cover;}


iframe{width: 850px;
	   height: 480px;
	   margin: 0 auto;
	   }
#page3{}
}







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

#background video{display: none;}
#background{position: fixed;
	              left: 0;top: 0;
	              min-width: 100%; min-height: 100%;
	              width: auto; height: auto;
	              z-index: -100;
                  background: url(images/background1.jpg) no-repeat;background-size: cover;}


nav{display: none;}
#hamburgerNav{display: block;}

@keyframes changeposition {
  from {
    top: 5%;
  }

  to {
    top: 10%;
  }
}

#panda{left: 25%;top:0%;width:60%;}
#panda img{width: 100%}


#title{top:85%;}


#synopsis{top:1000px;}

#goldCenter{width: 80%;padding-bottom: 10%}
#gold img{width: 100%;}
#gold p{font-size:20pt}



#page3{margin-top:1000px;}

iframe{width: 600px;
	   height: 350px;
	   margin: 0 auto;}


#gallery{display: none;}

}


@media screen and (max-width: 768px) {

#panda{left: 15%;top:0%;width:80%;}
#SGF img{display:initial;position:fixed;left: 0%;top:50%;width:100%;}


#title{top:65%;display: none;}


#page4 h3{text-align: center;
		  margin: 0;
		  padding-top:125px;
		  font-size: 15pt;


}




@media screen and (max-width: 600px) {

#title{font-size: 18pt;}
#bvn{font-size: 12pt;}
}




@media screen and (max-width: 450px) {


#gold{width: 250px;margin-left:10%;}
#title{font-size: 13pt;}
#themes{text-align:center;}

#bvn{font-size: 10pt;}
#map1{width: 90%;max-width: 450px;margin: 0 auto;}
#rangee1{flex-wrap:wrap;justify-content: center;}

#SGF img{top:62%;width:100%;}
}






@media screen and (max-width: 375px) {


#goldCenter{width: 80%}
#gold{margin-left:0%;}

#synopsis{}

#page3{}


#text_partenaires{margin: 0;margin-top:8%;margin-bottom:4%;}
#page3 #partenaires img{width: 100px;margin:10px;}

#rangee1{flex-wrap:wrap;}
#map1{width: 90%;max-width: 450px;margin: 0 auto;}
#map{height: 250px;
     width: 100%;
 	 margin: 0px;
 	 margin-top:20px;}
#reseaux{margin: 0 auto;}

#espace_pro{margin: 0 auto; margin-top:5%;margin-bottom: 5%; }

}