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;}
.light{font-family: ZonaPro_Light;}
.thin{font-family: ZonaPro_Thin;}
.hairline{font-family: ZonaPro_Hairline;}
.little_px{font-size: 30px;}
.white{color: white;}
.shadow{box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);}

                             /* 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.png) 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:0%;
 	width: 75%;
 	color:white;
 	font-family: ZonaPro_SemiBold;
    z-index: 10;}

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

nav img{width: 20%;float: right;}

nav #timer {margin: 0;display: none;}
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;}


#hamburgerNav{display: none;}

#black_square{width: 60px;height: 60px;
			  position:fixed;
			  top:2%;right: 2%;
			  z-index: 200;}
#black{width: 100%;height: 100%;
	   background-color: white;
	   filter: blur(15px);
	   opacity:0.1;}

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

#navHidden{width:75%;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: 30px;
	   z-index: -99;
	   line-height: 150%;
	   text-shadow: 2px 2px 15px #222;}

#title h1{font-weight: normal;
		  margin: 0;
		  letter-spacing: -2px;}

.letterspacing{letter-spacing: -5px;}

@keyframes changepositionL {
  from {
    left: 25%;
  }

  to {
    left: 50%;
  }
}

div {
  
}


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

  to {
    top: 5%;
  }
}

div {
  
}

#panda{position: absolute;
	   top:5%;
	   left:3%;
	   z-index:-99;
	   animation: changeposition 1.5s;
  	   animation-iteration-count: infinite;
  	   animation-direction: alternate;
}

 #panda img{width:550px;}





                              /* GALLERY */


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

.fotorama__html div,
.fotorama__html a {
  display: block;
  height: 100%;
  /* Transparent links are not clickable in IE,
     but non-existent background fixes this.
    (Put an empty 1×1 image here to avoid
     errors in console.) */
  background: url(_.gif);
}

.gallery_titles{
				padding-top: 30%;
				font-weight: normal;
				color: #e2c039;
				width: 30%;
				margin: 0 auto;}

.gallery_titles h2{font-size: 30pt;
				   font-weight: normal;
				   }
.gallery_titles p{font-size: 10pt;
				   text-align: right;
				   }



				   	/* SYNOPSIS */

/* #rectangle_noir{position: absolute;
				top:150%;
				left: 0;
				width: 100%;
				height: 80px;
				background-color: black;} */

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

#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%;
			width: 60%}


a{color:white;}

#gold{float: left;
	  margin-left:15%;
	  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%;
	   height: 1165px;
	   background: url(images/background3.jpg);
	   background-size: cover;
	   margin-top:950px;}

#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: 100px;}

#page3 #partenaires{display: flex;justify-content: space-around;}
#page3 #partenaires img{width: 150px;}


	   				/* 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;}


/*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{width: 100%;
	   height: 250px;
	   background-color:#252525;}




	   				/* OTHER PAGES */

body{background: url(images/background7.jpg) no-repeat;background-color: #885356}

#page_title{font-weight: normal;
			text-align: center;
			margin-top: 100px;
			margin-bottom: 30px;
			font-size: 60pt;
			letter-spacing: 30px;
		 	font-family: bebasneue_bold;
		 	text-shadow: 2px 2px 8px rgba(0,0,0,0.3);
		 	}
#page_title_hidden{opacity: 0;}

#sous-titre{font-weight: normal;
			text-align: center;
			margin-top: 30px;
			margin-bottom: 100px;
			font-size: 20pt;
			letter-spacing: 10px;
		 	font-family: bebasneue_regular;
		 	text-shadow: 2px 2px 8px rgba(0,0,0,0.3);
		 	}

#content{margin:0 auto;margin-bottom:8%;
		 max-width: 1050px;
		 width: 60%;
		 }

#content_color{background-color: rgba(0,0,0,0.3);
			   padding: 25px;
			   padding-bottom: 20%;
			   box-shadow:3px 3px 10px rgba(0,0,0,0.3);}

#content h2{margin-top:350px;font-size: 25pt; letter-spacing: -2px;}
#content p{font-family: ZonaPro_Light}
#content h4{font-family: bebasneue_bold;font-size: 25pt;}
#content #header{margin-bottom: 50px;width: 100%}

#content a{font-family: bebasneue_bold;
		   font-size: 15pt;
		   letter-spacing: 4px;
		   text-decoration: none;
		   color: white;
		   transition: 0.5s;}

#content a:hover{color:#f46c42;}



#contentAnim{margin-left:5%;margin-top:5%;margin-bottom: 10%;
		 max-width: 1700px;
		 width: 90%;
		 }


#contentInfo{margin:5%;margin-top:130px;max-width: 1000px;}
#contentInfo p{font-size: 15px;}
#contentInfo h4{font-family: ZonaPro_Black}

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

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



				/* INVITES */


.invites{display: flex;justify-content: space-around;flex-wrap: wrap;}
.invites img{box-shadow:0px 4px 20px #111;}

.invites_photo{display: none;}
.invites_banner{width: 100%;}

#img_width{max-width:100%;max-height:100%;}

.invites .descriptif{margin-top:5%;
					 font-family: ZonaPro_Light;}

.invites .descriptif .invites_nom{font-size: 20pt;
								  font-family: ZonaPro_Bold;}
.invites_work{display: flex;flex-wrap: wrap;
			  margin-top: 2%;margin-bottom: 10%}

.invites_work img{box-shadow:0px 4px 20px #111;}

#invites_presentation{margin-bottom: 200px;
		              display: flex;flex-wrap: wrap;
					  justify-content: space-around;}

#invites_presentation img {width: 300px;
						   box-shadow:0px 4px 20px #111;
						   transition: 0.2s ease-out;
						    margin:5px;
						   filter: grayscale(90%);}
#invites_presentation a :hover{transform: translate(0, -10px);
							   box-shadow:0px 4px 20px #FFF;
							   filter:brightness(170%)}



				/*    CONTACT     */

#content input{width:250px;height: 25px;font-family:ZonaPro_Light;font-size: 15px;}
#content textarea{font-family:ZonaPro_Light;font-size: 15px;}


				/* ANIMATIONS */

.overflow{width: 750px;height: 250px;
		  position: relative;
		  overflow: hidden;
		  box-shadow:0px 4px 20px #111;
		  margin: 10px;
		  -webkit-transition: 0.2s;
		  transition: 0.2s;
		  transition-timing-function: ease-out;}

#animations_banners{display: flex;
					flex-wrap: wrap;
					justify-content: center;}

#animations_banners img{width: 750px;height: 250px;
						position: absolute;
						top: 0px;left: 0px;
						-webkit-transition: 0.2s;
						transition: 0.2s;
						transition-timing-function: ease-out;
						}

#animations_banners img:hover{transform: scale(1.1);
							  }

.overflow:hover{box-shadow:0px 4px 20px #FFFFFF;}

				/* PARTENAIRES */

#partenaires{list-style: none;
			 display: flex;
			 flex-wrap: wrap;
			 justify-content: space-between;
			 padding: 0;}

#partenaires li{margin:15px;}




				/* EXPOSANTS */



#exposants_flex{display: flex;}
.liste_expo{list-style: none;}



				/* EXPOSANTS */

#paiement{width: 100%;}



/* PORGRAMMATION*/

table span{font-size: 18pt}
td{padding:10px;}
th{padding:10px;}



				/* MEDIA SCREEN */

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

nav{font-size: 11pt;}

#panda{margin-right: 0%;width:35%;}
#panda img{width: 100%;}

#content{margin-top:13%;max-width: 1000px;margin:0 auto;}

}

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

nav{font-size: 9pt;}
#page_title{top:5%;}

}


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

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

#panda{display: none;}

#black_bar{display: none;}

#content{margin:0 auto;margin-top:13%;margin-bottom: 10%;
		 width: 80%}


}

@media screen and (max-width: 1000px) {
#page_title{top:0%;}
#content{margin-top: 25%}

}


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

#page_title{letter-spacing: 8px;margin-top:0px;margin-bottom:0px;}

#content{margin-top: 13%}
.invites_work{justify-content: center;}

.overflow{width: 500px;height: 166px;}

#animations_banners img{width: 500px;height: 166px;
						top:0px;left:0px;
						}

#invites_presentation img {width: 200px;
						   box-shadow:0px 4px 20px #111;
						   transition: 0.2s ease-out;
						    margin:5px;
							filter: grayscale(90%);}


.partenaireslogo{width:75px;}

}

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



.overflow{width: 400px;height: 133px;
	      }

#animations_banners img{width: 400px;height: 133px;
						top:0px;left:0px;}


#content{margin:0 auto;width:90%;margin-top: 30%}
.invites_photo{display:block;}
.invites_banner{display:none;}

#invites_presentation img {width: 120px;
						   box-shadow:0px 4px 20px #111;
						   transition: 0.2s ease-out;
						    margin:5px;}

#content_color{padding:15px;padding-top:40px;}

}

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

.overflow{width: 300px;height: 100px;}
#animations_banners img{width: 300px;height: 100px;}
#page_title{font-size: 40px;top:100%}
#content{margin-top:15%}

#content a{font-size: 10pt;}

}