@charset "UTF-8";
/* CSS Document */

@font-face {
    font-family: 'fresco';
    src: url('fonts/FRESCO-NORMAL.woff') format('woff'),
         url('fonts/FRESCO-NORMAL.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;}

body {
	height:100%;
	font-family: 'fresco', "Times New Roman", Times, serif;
	color:#000;
	margin: 0;
	font-size: 13px;
}


img { max-width: 100%; margin: 0 auto; display: inline-block;}
ul {margin: 0; list-style: none; padding: 0;}

a {text-decoration: none; color: #000;}
a:hover {text-decoration: underline;color: #000;}

::-webkit-scrollbar { 
    display: none; 
}

/* =========================== Main containers ===========================*/

.full {width: 100%; display: inline-block; font-size: 0;}

/*--------------- Home page --------------------*/

.title-container .page-title  {position: fixed; left: 50%; transform: translate(-50%, 0); top: 40%; z-index: 10; max-width: 100%; width: 800px;}
.projets-title-container .page-title  {position: fixed; left: 0;  bottom: 0; z-index: 10; max-width: 80%; width: 200px; padding: 10px 25px;}
.title-container .page-title img  {position: relative; display: block; z-index: 10; margin: 0 auto;  }

.title-container .arrow-bottom  {position: fixed; left: 50%; transform: translate(-50%, 0); bottom: 20px; z-index: 10; max-width: 10%;  display: none; }

.menu-container {position: fixed; right: 10%; top: 50px; z-index: 100; width: 10%; text-align: center;}
.menu-container .menu-open {width: 40px; height: 60px; cursor: pointer; margin: 0 auto; padding: 0; }

.menu-items {padding-top: 40px; display: none; height: 200px; z-index: 100; position: relative; }
.menu-items a { font-size: 12px; padding-bottom: 5px; display: block; color: #706f6f;}

.whole-container {position: absolute; margin: 0 auto; display: block; text-align: center; z-index: 1; width: 100%; }
	.whole-container .image-container {position: relative; display: inline-block; max-width: 70%; width: 500px; margin: 0 auto; overflow-x: auto;}
.whole-container .image-container a img {overflow: hidden; padding: 0; transition: all linear 0.2s}
.whole-container .image-container a img:hover {opacity: 0.7;}

.projets-whole-container {width: 100%; max-width: 1360px; display: block; margin: 0 auto; font-size: 0;}
.projets-whole-container .projets-image-container a {width: 33.3%; display: inline-block; overflow: hidden; padding: 0; font-size: 11px;}
.projets-whole-container .projets-image-container a img {display: block; max-width: 100%; transition: all linear 0.2s}
.projets-whole-container .projets-image-container a img:hover {opacity: 0.7;}
	
.svg-button, .svg-button-open  {
	display: block;
	width: 40px;
	height: 60px;}

.svg-button {background: url('pictures/menu-closed.svg') no-repeat; background-position: center; margin: 0 auto; height: 100%; width: 100%; display: block;  }	
.svg-button-open {background: url('pictures/menu-open.svg') no-repeat; background-position: center;
}	
/*--------------- Home page --------------------*/

.slider-container {height: 100vh; margin: 0 auto; text-align: center; display: block; overflow-x: hidden;}


/*--------------- Projets page --------------------*/
.arrow-container {display: none; position: absolute; z-index: 11; width: 100%; height: 15vh; top: 0; text-align: center; background: #FFF;}
.arrow-container > a > img {display: inline-block; height: 75px; width: auto; vertical-align: middle;}

.valign-pix {height: 100%; display: inline-block; vertical-align: middle; }




.copyright-home {position: fixed; width: 100%; bottom: 0; padding: 5px; font-size: 11px; text-align: center; z-index: 5; }
.copyright {width: 100%; bottom: 0; font-size: 11px; text-align: center; z-index: 5; display: block;  }
.copyright p {padding: 5px; }

.contact .copyright {width: 100%; max-width: 100%; position: fixed; left: 0; bottom: 0; padding: 0; font-size: 11px; text-align: center; z-index: 5; display: block;  }
.contact .copyright p {padding: 5px;}



.vignettes a {display: block; margin: 0;}

.corner-top {display: block; height: 25px; width: 25px; position: relative; left: -25px; margin-bottom: 0px;}
.corner-bottom {display: block; height: 25px; width: 25px; position: absolute; right: -25px;  -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg);   transform: rotate(180deg);
}


.projet-whole-container  {position: relative; display: block; margin: 0 auto 0; max-width: 100%; }
.projet-whole-container-responsive  {position: relative; display: none; margin: 0 auto 0; max-width: 100%;}
.bxslider .vignettes {max-width: 768px ; width: auto; display: block; margin: 0 auto;}
.bxslider.sts .vignettes {max-width: 830px ; width: auto; display: block; margin: 0 auto;}
.bxslider.etiger .vignettes {max-width: 1000px ; width: auto; display: block; margin: 0 auto;}

.main-container {position: absolute; width: 100%;  top: 570px; padding: 0; overflow: hidden; display: block; z-index; 90; }
.main-container .text-box {position: relative; display: block; width: 600px; max-width: 80%; margin: 0 auto;  text-align: left; padding-bottom: 100px; padding-top: 50px;}
.main-container .text-box h1 {margin-top: 0px;}
.main-container .text-box h1.p404 {margin-top: 0px; font-size: 74px;}
.main-container .text-box h1 img {height: 60px; width: auto;}
.main-container .text-box h1 img.two-lines {height: 120px; width: auto;}

.main-container.paysage h1 img {height: 100px; }
.main-container.sts {top: 470px; }
.main-container.etiger {top: 500px; }
.main-container.briquet {top: 450px; }
.main-container.caves {top: 475px; }
.main-container.samsung {top: 500px; }
.main-container.vuitton {top: 490px; }
.main-container.cinna {top: 540px; }
.main-container.muguette {top: 500px; }
.main-container.radiateur {top: 500px; }
.main-container.ensci {top: 490px; }
.main-container.a-propos {top: 570px; }
.main-container.contact {position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);}
.main-container.contact .text-box {position: relative; display: block; width: 400px; max-width: 80%; margin: 0 auto;  text-align: left; padding-bottom: 100px; padding-top: 50px;}


/*-----------Menu---------------*/

#nav-icon4 {
  width: 40px;
  height: 40px;
  position: relative;
  margin: 50px auto;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .1s width ease-in-out;
  -moz-transition: .1s width ease-in-out;
  -o-transition: .1s width ease-in-out;
  transition: .1s width ease-in-out;
  cursor: pointer;
}

#nav-icon4 span {
  display: block;
  position: absolute;
  height: 1px;
  width: 100%;
  background: #706f6f;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .1s width ease-in-out;
  -moz-transition: .1s  width ease-in-out;
  -o-transition: .1s  width ease-in-out;
  transition: .1s  width ease-in-out;
  -webkit-transition: .25s all width ease-in-out;
  -moz-transition: .25s all ease-in-out;
  -o-transition: .25s all ease-in-out;
  transition: .25s all ease-in-out;;
}



#nav-icon4 span:nth-child(1) {
  top: 0px;
  left: 50%;
  width: 60px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

#nav-icon4 span:nth-child(2) {
  top: 18px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}



#nav-icon4.open span:nth-child(1) {
  top: 1px;
  left: 33px;
  width: 40px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

#nav-icon4.open span:nth-child(2) {
  top: 1px;
  left: 5px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}



/*----------------RESPONSIVE---------------------------*/
@media only screen and (max-width: 768px) {
.whole-container .image-container {display: inline-block; max-width: 60%;}
.projet-whole-container  {display: none; }
.projet-whole-container-responsive  {display: block;}
.main-container {position: relative; max-width: 80%; width: 80%; margin: 0 auto; top: 0; padding: 0; overflow: visible; display: block; background: #FFF;}
.main-container .text-box {position: relative; display: block; width: 100%; max-width: 60%;  text-align: left; padding-bottom: 100px; padding-top: 25px;}

.main-container.sts {top: 0; }
.main-container.briquet {top: 0; }
.main-container.caves {top: 0; }
.main-container.samsung {top: 0; }
.main-container.vuitton {top: 0; }
.main-container.cinna {top: 0; }
.main-container.muguette {top: 0; }
.main-container.radiateur {top: 0; }
.main-container.etiger {top: 0; }
.main-container.ensci {top: 0; }
.main-container.a-propos {top: 0; }
.main-container.contact {position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);}
.main-container.contact .text-box {max-width: 100%;}
.projets-whole-container .projets-image-container a {width: 50%; display: inline-block; overflow: hidden; padding: 0; font-size: 11px;}

}

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

.whole-container .image-container {display: inline-block; max-width: 100%;}
.main-container .text-box h1 img {height: 40px; width: auto;}
.main-container .text-box h1 img.two-lines {height: 80px; width: auto;}
.projet-whole-container  {max-width: 100%; width: 100%;}
.main-container .text-box { max-width: 100%;}

.menu-container {position: fixed; right: 5%; top: 0; z-index: 100; width: 20%; text-align: center;}
.menu-container .menu-open {width: 40px; height: 60px; cursor: pointer; margin: 0 auto; padding: 0; }

.menu-items {padding-top: 10px; display: none; height: 200px: z-index: 100; position: relative; }
.menu-items a { font-size: 12px; padding-bottom: 5px; display: block; }

}