/* ATELIER VOOVOYEZ - COPYRIGHT */


/********************************/
/********* CSS BODY ************/
/********************************/
::-moz-selection { 
    /*color: gold;  */
    background: #999; 
}

::selection{ 
    /*color: gold;  */
    background: #999; 
} 

body{
    height: 100%;
    overflow: hidden;
    width:100%;
    /*background-color: #e0d7d2;*/
    background-color: rgba(224,215,210,1);
    cursor:url(../datas/img/pics/pointer32.png), auto;
    margin-left: 0;
    font-family: "Lato",sans-serif;
    font-weight: 300;
    font-size: 1em;
    box-sizing: border-box;
    line-height: 1.2;
}

#container{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1002;
    /*background-color: #e0d7d2;*/
}

.overlay{
    background: black;
    opacity: .5;
    position:fixed;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    z-index:100;
}

/********************************/
/******* CSS PARALLAX ***********/
/********************************/

/********* Scène *********/
#container .parallax{
    min-height:500px;
    position: absolute;
    overflow: hidden;
    /*display: table;*/
    width: 100%;
    height: 100%;
    left:0px;
    top:0px;
    z-index: -1001;
}

#container .ma_taille{ /*.parallax .scene */
    width: 200px; /* Taille des vignettes */
}


#container .parallax .scene{
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    z-index: -1000;
    min-height: 750px;
}

#container .scene, #container .scene .layer{
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0px;
    margin:0px;
    z-index: -999;
}


#container .scene, #container .scene .layer:nth-child(2){
    width: 100%;
    height: 100%;
}

#container ul.scene{
    list-style: outside none none;
    display: block;
    padding: 0px;
    margin: 0px;
}


#container .parallax .scene .background{
/*    background: url("../datas/img/background.jpg") no-repeat scroll 50% 100% / cover transparent;*/
   background-color: rgba(224,215,210,1);/*#e0d7d2;*/
    opacity: 0.3;
    position: absolute;
    width: 120%;
/*    height: 100%;*/
    left: -10%;
    top:-10%;
    bottom:-10%;
}

#container img{ /*.parallax .scene .view*/
    width: 100%;
} 

#container .shadow{ /*.parallax .scene*/
    height: 100%;
    width: 100%;
    position: relative;
    overflow: visible;
}


#container .shadow:before,#container .shadow:after{ /*.parallax .scene*/
   z-index: -1;
  position: absolute;
  content: "";
  bottom: 10px;
  left: 5px;
  width: 53%;
  top: 90%;
/*  max-width:300px;*/
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

#container .shadow:after{ /* .parallax .scene*/
    -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: -8px;
  left: auto;

}

#container .parallax h1:hover{
    color:white !important;
}



/********* Illustrations *********/

#container .parallax .scene .illustrations{
    position: absolute;
    display: block;
    left:80%;
    background-image: url(../datas/img/background/Fond-Illustrations.jpg);
    background-repeat: no-repeat;
    width: 920px;
    height:480px;
    z-index: -5;
}


#container .parallax .scene .illustrations h1{
    position: absolute;
    top:220px;
    left:230px;
    font-family:'Sketch Nice', Arial;
    font-size:3em;
    cursor: pointer;
    z-index: 3;
    white-space: nowrap;
    color: rgba(0,0,0,0.3);
}

#container .parallax .scene .illustrations #illustration_1{
    left:200px;
    top:280px;
    position: absolute;
    z-index: 1;
}

#container .parallax .scene .illustrations #illustration_2{
    left:60px;
    top:100px;
    position: absolute;
    z-index: 2;
}

/********* Logo *********/
#container .parallax .scene .logo{
    position: absolute;
    left:45%; /* 520px */
    top:18%; /* 50px */
    z-index: -5;
}

#container .parallax .scene .logo h1{
    position: absolute;
    top:230px;
    left:220px;
    font-size:3em;
    text-transform: uppercase;
    font-weight: 600;
    color: rgba(0,0,0,0.3);
    letter-spacing: 2px;
    cursor: pointer;
    white-space: nowrap;
}


#container .parallax .scene .logo #logo1{
    left:160px;
    top:20px;
    position: absolute;
    z-index: 2;
}

#container .parallax .scene .logo #logo2{
    left:0px;
    top:150px;
    position: absolute;
    z-index: 1;
}
/********* Site web *********/
#container .parallax .scene .site{
    position: absolute;
    left:42%; /*-150px*/
    top:75%; /*100px*/
    z-index: -5;
}

#container .parallax .scene .site h1{
   position: absolute;
    top:120px;
    left:30px;
    font-size:3em;
    text-transform: uppercase;
    font-weight: 600;
    color: rgba(0,0,0,0.3);
    letter-spacing: 2px;
    cursor: pointer;
    white-space: nowrap;
}


#container .parallax .scene .site #web1{
    left:0px;
    top:180px;
    position: absolute;
    z-index: 1;
}

#container .parallax .scene .site #web2{
    left:160px;
    top:50px;
    position: absolute;
    z-index: 2;
}
/********* Retouches photos *********/
#container .parallax .scene .retouche{
    position: absolute;
    left:5%; /*170px*/
    top:-17%; /*500px*/
    z-index: -5;
}

#container .parallax .scene .retouche h1{
    position: absolute;
    top:220px;
    left:-340px;
    font-size:3em;
    text-transform: uppercase;
    font-weight: 600;
    color: rgba(0,0,0,0.3);
    letter-spacing: 2px;
    cursor: pointer;
    white-space: nowrap;
}

#container .parallax .scene .retouche #retouche1{
    /*left:260px;
    top:300px;*/
    position: absolute;
    z-index: 1;
}

#container .parallax .scene .retouche #retouche2{
    left:160px;
    top:130px;
    position: absolute;
    z-index: 2;
}

/********* Mise en page *********/
#container .parallax .scene .miseenpage{
    position: absolute;
    left:-4%;/*1170px*/
    top:33%; /*850px*/
    z-index: -5;
}

#container .parallax .scene .miseenpage h1{
   position: absolute;
    top:190px;
    left:220px;
    font-size:3em;
    text-transform: uppercase;
    font-weight: 600;
    color: rgba(0,0,0,0.3);
    letter-spacing: 2px;
    cursor: pointer;
    white-space: nowrap;
}

#container .parallax .scene .miseenpage #page1{
    left:0px;
    top:100px;
    position: absolute;
    z-index: 1;
}

#container .parallax .scene .miseenpage #page2{
    left:160px;
    top:-20px;
    position: absolute;
    z-index: 2;
}
/********* Packaging CD *********/
#container .parallax .scene .packaging{
    position: absolute;
    left:85%; /*760px*/
    top:70%; /*450px*/
    z-index: -5;
}

#container .parallax .scene .packaging h1{
   position: absolute;
    top:70px;
    left:-130px;
    font-size:3em;
    text-transform: uppercase;
    font-weight: 600;
    color: rgba(0,0,0,0.3);
    letter-spacing: 2px;
    cursor: pointer;
    white-space: nowrap;
}

#container .parallax .scene .packaging #CD1{
    left:260px;
    top:0px;
    position: absolute;
    z-index: 2;
}

#container .parallax .scene .packaging #CD2{
    left:145px;
    top:140px;
    position: absolute;
    z-index: 1;
}

/****************************************/
/********* CSS OTHERS THUMB *************/
/****************************************/
.others{
    display: none;
    margin-left: auto;
    margin-right: auto;
    width: 70%;
    text-align: center; /*center*/
   /*margin-top:100px;*/
    /*text-align-last:left;
    -moz-text-align-last:left;*/
    left: 0%;
    top: 6%;
    position: relative;
    padding: 20px;
    background-color: #FFEFEF;
    max-width: 1200px;
    max-height: 80%;
    overflow-y:auto;
    z-index: 1700;
    /*border-radius: 10px;*/
}

/*.others:before{
    content: url('http://cdn-sg1.pgimgs.com/images/pg/close-button.png');
    top:-10px;
    position: absolute;
}*/

.others .ma_taille{
    display: none;
    /*display: inline-block;*/
    padding: 10px;
    position: relative;
}

.closeButton
{
    cursor: pointer;
    position:static;
    display: block;
    top:10px;
    right:10px;
    width:30px;
    height:30px;
    background:url('../datas/img/pics/btnclose.png') no-repeat center center;
    z-index: 1800;
    background-size: 100%;
}

.load{
    position: absolute;
    right: 19px;
    bottom: 5px;
    color:black;
    display: block;
}
/********************************/
/********* CSS MAIN *************/
/********************************/
.main-fixed{
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: middle;
}

.main-fixed nav#nav{
    position: fixed;
    top:75%; /*510px*/
    left:3%;
    width:550px;
/*    height: 30px;*/
    display: block;
    z-index: 1600;
}

 nav ul{
    height: 100%;
/*    padding: 0px 5px 0px 20px;*/
    margin-top: 10px;
    font-size: 1.4em;
}

 nav ul li{
    display: inline-block;
    height: 100%;
    cursor: pointer;
    color: black;
/*    margin-left: 5px;*/
    padding-right: 10px;
}

 nav ul li+li{
    border-left: solid 1px;
    padding-left: 10px;
}

nav ul li a{
    text-decoration: none;
    color: black;
    text-transform: uppercase;
}

nav ul li a:hover{
    color: white;
}

nav img{
    width:500px;
}

nav ul li a.active{
    color: white;
}
/********************************/
/********* CSS CANVAS ***********/
/********************************/
canvas{
    /*position: absolute;
	top: 74.5%; 510px
	left: 234px;
    z-index: 1100;*/
    display: none;
}



/********************************/
/********* CSS CONTACT ***********/
/********************************/
#contact{
    position: fixed; /*absolute*/
    background-color: #e0d7d2;
    -webkit-transition: top 1.3s ease 0s;
    -moz-transition: top 1.3s ease 0s;
    transition: top 1.3s ease 0s;
    z-index: 1500;
    backface-visibility: hidden;
    font-family: "Lato",sans-serif;
    font-weight: 300;
    overflow-y: scroll;
}



/********* Back to top *********/
#back-top {
    position: fixed;
    right: 40px;
    bottom: 20px;
}

#back-top a {
	display: block;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	color: #bbb;
}


#back-top a i:hover {
	color: #000;
}

/* arrow icon (span tag) */
#back-top a i{
	/* transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}



/********* Infos : Coord+Map *********/
#informations{
/*    background-color: white;*/
    /*position: absolute;*/
    /*bottom:5px;*/
    display: block;
    height:300px;
    width:100%;
}

/********* Map *********/
#contact #map { 
    height: 260px;
    width: 100%;
    display: block;
    font-family: "Lato",sans-serif;
    font-weight: 300;
    font-size: 1em;
}


/********* Coordonnées *********/
#contact #coordonnes{
    display: block;
}

#contact #coordonnes .contact-info{
    /*float: left;*/
    display: inline-block;
    width: 33%;
    margin: 20px 0px;
    text-align: center;
}

#contact #coordonnes .contact-info h4{
    font-weight: bold;
    margin-bottom: 5px;
}

#contact #coordonnes .contact-info i{
    margin-right: 10px;
    color: #FFA420;
    /*background-color: #FFF;*/
    display: inline-block;
    padding-top: 3px;
    text-align: center !important;
    border-radius: 50%;
}


/********* Formulaire *********/
#contact #formulaire-contact{
    display: block;
    margin-bottom: 100px;
    margin-top: 15%;
    margin-left: 3%;
}
#contact #formulaire{
    /*position: absolute;*/
    display: inline-block;
    /*background-color: white;*/
    width: 55%;
    /*min-width: 55%;*/
}

#contact #accroche{
   display: inline-block;
    width: 30%;
    text-align: center;
    vertical-align: top;
    margin-top: 10%;
    margin-left: 5%;
    border-bottom: solid 1px;
    padding-bottom: 20px;
}

#contact #formulaire .ligne{
    width: 100%;
    overflow: hidden;
}

#contact #formulaire .ligne .premier{
    width: 45%;
    float: left;
}

#contact #formulaire .ligne:first-child .premier{
    width: 47%;
}

#contact #formulaire .ligne .second{
    margin-left: 51%;
    width: 45%;
}

#contact #formulaire .form-group{
    margin-bottom: 10px;
}

#contact #formulaire .form-group input,#contact #formulaire .form-group textarea, #contact #formulaire .form-group select{
    background-color: #FFFFFF;
    border: medium solid transparent;
    /*padding: 9px 10px;*/
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left:10px;
    border-color: transparent;
    font-size: 14px;
    width: 100%;
    letter-spacing: 0.5px;
}

#contact #formulaire .form-group textarea{
/*    height: 100px;*/
    background-color: #FFFFFF;
    border: medium solid transparent;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left:10px;
    border-color: transparent;
    font-size: 14px;
    width:96%;
    resize: none;
    font-family: "Lato",sans-serif;
    font-weight: 300;
}

#contact #formulaire .form-group select{
    appearance:none;
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
    background-image: url(../datas/img/pics/expand22.png);
    background-repeat: no-repeat;
    background-position: 95%;
    background-color: #ffffff;
}

#contact #formulaire button[type='submit']{
    width:auto;/*100px*/
    height:40px;
    cursor: pointer;
    background:none;
    border:none;
    margin: 0;
    padding: 0;
    font-size: 18px;
    font-weight: lighter;
}

#contact #formulaire .submit{
    text-align: right;
    margin-right: 20px;
}

#contact #formulaire button[type='submit']:before{
    content:"\003e"; 
   padding-right: 10px;
}


/*********** Footer ***************/
#footer {
    position: relative;
    text-transform: uppercase;
    text-align: center;
    padding: 25px 0px;
    font-size: 14px;
}


/********************************/
/********* CSS OVERVIEW ***********/
/********************************/

/********* General *********/
#overview{
    display: block;
    position: fixed; /*absolute*/
    overflow-y: scroll;
    text-align: center;
    transition: left 1s ease 0s;
    -webkit-transition: left 1s ease 0s;
    -moz-transition: left 1s ease 0s;
    z-index: 1500;
    backface-visibility: hidden;
    background-color: #e0d7d2;
}

#overview #projects{
    width: 80%;
    margin: auto;
    max-width: 1200px;
}

#overview #projects > div{
    margin-bottom: 200px;
}

#overview #back{
    position: fixed;
    left: 10px;
    top: 10px;
}

#overview #back a{
    display: block;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	color: #bbb;
}

#overview #back i:hover{
    color: #000;
}

/* arrow icon (span tag) */
#overview #back a i{
	/* transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}

/********* Header *********/
#overview .header{
    margin-bottom: 80px;
}

#overview .header #vignette{
    float: left;
    /*width:20%;*/
    width: 200px;
    /*height: 100%;*/
}

#overview .header #vignette img{
    /*height: 100%;*/
    max-width: 100%;
    width: 100%;
    min-width: 200px;
}

#overview .header #description{
    /*width: 78%;*/
    text-align: justify;
    /*margin-left: 22%;*/
    margin-left: 220px;
}

#overview .header #description p.text-description::first-letter{
    color:#c76c0c;
    font-size: 250%;
    font-weight: 400;
    padding-right: 3px;
}

#overview .header #description h1{
    text-align: left;
    font-size: 3em;
    text-transform: uppercase;
    margin-bottom: 1.5px;
    line-height: 1;
}

#overview .header #description h2{
    font-size: 1.5em;
    font-weight: 700;
    margin-bottom: 5px;
    text-transform: uppercase;
}

#overview figcaption.legend{
    font-size: 1.5em;
    font-weight: 300;
    margin-bottom: 10px;
    text-transform: uppercase;
    text-align: center;
}


#overview .header #description p{
    font-size: 1em;
}

#overview #projects figure{
    margin-bottom: 140px;
}


#overview #projects figure:last-child{
    /*margin-bottom: 400px;*/
}

#overview #projects blockquote{
    float: none;
    display:block;
    padding: 15px 20px 15px 45px;
    margin: 20px 0 0px;
    position: relative;
    text-align: justify;

    /*Borders - (Optional)*/
    border-left: 15px solid #c76c0c;
    border-right: 2px solid #c76c0c;

    /*Box Shadow - (Optional)*/
    -moz-box-shadow: 2px 2px 15px #ccc;
    -webkit-box-shadow: 2px 2px 15px #ccc;
    box-shadow: 2px 2px 15px #ccc;
}

#overview #projects blockquote p{
    text-align: right;
    font-style: italic;
    font-weight: 500;
}

#overview #projects blockquote::before{
    content: "\201C"; /*Unicode for Left Double Quote*/

    /*Font*/
    font-family: Georgia, serif;
    font-size: 60px;
    font-weight: bold;
    color: #999;

    /*Positioning*/
    position: absolute;
    left: 10px;
    top:5px;
}

#overview #projects blockquote::after{
    /*Reset to make sure*/
    content: "";
}


/********* Avant-Après *********/
#overview #projects .twenty{
    width: 60%;
    margin: auto;
    margin-bottom: 140px;
    position: relative;
}

#overview #projects .twenty.portrait{
    width: 30%;
}

/*#overview #projects .avant-apres{
    width: 100%;
    height: 100%;
}
#overview #projects .avant-apres img{
    width: 100%;
    height: 100%;   
}*/


/********* Affiche/Image *********/
#overview #projects figure.soixante-dix img{
    height: 100%; 
}


/********* Digipack *********/
#overview #projects figure.digipack{
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

#overview #projects figure.digipack .cycle{
    width: 100%;
    background-repeat: no-repeat;
    cursor: move;

}

#overview #projects figure.digipack .cycle .pv-overlay{
    width: 100%;
    height: 91.5%;
    position: absolute;
    /*top: 38px;*/
    left: 0px;
    background: rgba(0, 0, 0, 0.5) none repeat scroll 0% 0%;
    display: block;
    /*filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    -moz-filter: blur(5px);
    -webkit-filter: blur(5px);*/
}


#overview #projects figure.digipack .cycle .pv-overlay i.pvicon-overlay{
    margin-top: -23px;
    top: 50%;
    margin-left: -15px;
    position: absolute;
    left: 50%;
    /*width: 80px;
    height: 87px;*/
}


/********* Card *********/
.container-card { 
    /*width: 200px;*/
    /*height: 260px;*/
    perspective: 800px;
    margin-left: auto;
    margin-right: auto;
}

.container-card p button{
    color: #ffffff;
    font-size: 20px;
    background: #948c94;
    padding: 10px 20px 10px 20px;
    text-decoration: none;
    border: none;
    box-shadow: none;
    margin-top: 20px;
}

.container-card p button:hover{
    background: #ffffff;
    text-decoration: none;
    color:#948c94;
}

.card {
    width: 100%;
    height: 100%;
    /*position: absolute;*/
    transform-style: preserve-3d;
    transition: transform 1s;
}

.card img {
    display: block;
    position: absolute;
    /*width: 100%;*/
    height: 100%;
    backface-visibility: hidden;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.card img:first-child {
    /*background: red;*/
}
.card img:last-child {
    /*background: blue;*/
    transform: translate(-50%, -50%) rotateY( 180deg );
}

.card.flipped {
    transform: rotateY( 180deg );
}

/********* Magazine *********/
#overview #projects figure.container-brochures{
    position: relative;
}

#overview #projects figure.container-brochures img{
    filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    -moz-filter: blur(5px);
    -webkit-filter: blur(5px);

    -webkit-transition: all .5s cubic-bezier( .6, 2, .4, 1);
    -moz-transition: all .5s cubic-bezier( .6, 2, .4, 1);
     -ms-transition: all .5s cubic-bezier( .6, 2, .4, 1);
      -o-transition: all .5s cubic-bezier( .6, 2, .4, 1);
         transition: all .5s cubic-bezier( .6, 2, .4, 1);
}

#overview #projects figure.container-brochures img:hover{
    -o-filter: none;
    -ms-filter: none;
    -moz-filter: none;
    -webkit-filter: none;
    filter:none;
}

#overview #projects figure.container-brochures i.pvicon{
    /*margin-top: -23px;*/
    top: 50%;
    margin-left: -15px;
    position: absolute;
    left: 50%;
    display: block;
    pointer-events:none;
}