/* ATELIER VOOVOYEZ - COPYRIGHT */

/****/

/* STYLES MULTI MEDIA QUERY - */
/* MAX WIDTH : 1600/1300/1000/960/600/550PX */
/* MAX HEIGHT : 640/480PX */


/********************************/
/********* CSS VIEW.CSS ************/
/********************************/
@media screen and (max-width: 1600px){
    .view a.info{
       margin-top: 39px; /*20px*/
      margin-left: -65px;
    }

    .view a.zoom{
      margin-top: 80px;
    }
}


@media screen and (max-width: 1300px){
    .view a.info{
       margin-top: 30px; /*20px*/
      margin-left: -45px;
    }

    .view a.zoom{
      margin-top: 60px;
    }
}


@media screen and (max-width: 1000px){
    .view a.info{
       margin-top: 20px; /*20px*/
      margin-left: -30px;
      font-size: 0.8em;
    }

    .view a.zoom{
      margin-top: 43px;
    }
}


/********************************/
/********* CSS BODY ************/
/********************************/


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

/********* Scène *********/
@media screen and (max-width: 1600px){
    #container .ma_taille{
        width: 180px; /* Taille des vignettes */
    }
    /********* Illustrations *********/
    #container .parallax .scene .illustrations h1{
        font-size:2.2em;
        top:220px;
        left:230px;
    }

    #container .parallax .scene .illustrations #illustration1{
        left:200px;
        top:280px;
    }

    #container .parallax .scene .illustrations #illustration2{
        left:60px;
        top:100px;
    }

    /********* Logo *********/
    #container .parallax .scene .logo h1{
        font-size:2.2em;
        top:230px;
        left:220px;
    }

    #container .parallax .scene .logo #logo1{
        left:160px;
        top:20px;
    }

    #container .parallax .scene .logo #logo2{
        left:0px;
        top:150px;
    }


    /********* Site web *********/
    #container .parallax .scene .site h1{
        font-size:2.2em;
        top:130px;
        left:60px;
    }

    #container .parallax .scene .site #web1{
        left:0px;
        top:180px;
    }

    #container .parallax .scene .site #web2{
        left:160px;
        top:80px;
    }


    /********* Retouches photos *********/
    #container .parallax .scene .retouche h1{
        font-size:2.2em;
        top:220px;
        left:-220px;
    }

    #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 h1{
        font-size:2.2em;
        top:190px;
        left:220px;
    }

    #container .parallax .scene .miseenpage #page1{
        top:100px;
        left:0px;
    }

    #container .parallax .scene .miseenpage #page2{
        left:160px;
        top:-20px;
    }

    /********* Packaging CD *********/
    #container .parallax .scene .packaging h1{
        font-size:2.2em;
        top:70px;
        left:-40px;
    }

        #container .parallax .scene .packaging #CD1{
        left:260px;
        top:0px;
    }

    #container .parallax .scene .packaging #CD2{
        left:145px;
        top:140px;
    }
}



@media screen and (max-width: 1300px){
    #container .ma_taille{
        width: 150px; /* Taille des vignettes */
    }

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

    /********* Illustrations *********/
    #container .parallax .scene .illustrations{
        width: 400px;
    	height:300px;   
    }


    /********* Illustrations *********/
    #container .parallax .scene .illustrations h1{
        font-size:1.8em;
        top:120px;
        left:190px;
    }

    #container .parallax .scene .illustrations #illustration_1{
        left:200px;
        top:160px;
    }

    #container .parallax .scene .illustrations #illustration_2{
        left:60px;
        top:50px;
    }

    /********* Logo *********/
    #container .parallax .scene .logo h1{
        font-size:1.8em;
        top:190px;
        left:170px;
    }

    #container .parallax .scene .logo #logo1{
        left:140px;
        top:20px;
    }

    #container .parallax .scene .logo #logo2{
        left:0px;
        top:120px;
    }


    /********* Site web *********/
    #container .parallax .scene .site h1{
        font-size:2.2em;
        top:240px;
        left:50px;
    }

    #container .parallax .scene .site #web1{
        left:40px;
        top:300px;
    }

    #container .parallax .scene .site #web2{
        left:160px;
        top:180px;
    }


    /********* Retouches photos *********/
    #container .parallax .scene .retouche h1{
        font-size:2.2em;
        top:190px;
        left:-250px;
    }

    #container .parallax .scene .retouche #retouche1{
        left:0px;
        top:20px;
        position: absolute;
        z-index: 1;
    }

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

    /********* Mise en page *********/
    #container .parallax .scene .miseenpage h1{
        font-size:2.2em;
        top:170px;
        left:160px;
    }

    #container .parallax .scene .miseenpage #page1{
        top:100px;
        left:-20px;
    }

    #container .parallax .scene .miseenpage #page2{
        left:100px;
        top:0px;
    }

    /********* Packaging CD *********/
    #container .parallax .scene .packaging h1{
        font-size:2.2em;
        top:70px;
        left:-40px;
    }

        #container .parallax .scene .packaging #CD1{
        left:260px;
        top:20px;
    }

    #container .parallax .scene .packaging #CD2{
        left:165px;
        top:120px;
    }
}



   
@media screen and (max-width: 1000px){
    #container  .ma_taille{
        width: 120px; /* Taille des vignettes */
    }

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

    /********* Illustrations *********/
    #container .parallax .scene .illustrations{
        width: 450px;
        height:300px; 
    }


    /********* Illustrations *********/
    #container .parallax .scene .illustrations h1{
        font-size:1.8em;
        top:140px;
        left:160px;
    }

    #container .parallax .scene .illustrations #illustration_1{
        left:150px;
        top:180px;
    }

    #container .parallax .scene .illustrations #illustration_2{
        left:60px;
        top:100px;
    }

    /********* Logo *********/
    #container .parallax .scene .logo h1{
        font-size:1.8em;
        top:190px;
        left:140px;
        white-space: normal;
    }

    #container .parallax .scene .logo #logo1{
        left:90px;
        top:50px;
    }

    #container .parallax .scene .logo #logo2{
        left:0px;
        top:120px;
    }


    /********* Site web *********/
    #container .parallax .scene .site h1{
        font-size:1.8em;
        top:250px;
        left:40px;
    }

    #container .parallax .scene .site #web1{
        left:40px;
        top:300px;
    }

    #container .parallax .scene .site #web2{
        left:130px;
        top:220px;
    }


    /********* Retouches photos *********/
    #container .parallax .scene .retouche h1{
        font-size:1.8em;
        top:180px;
        left:-50px;
        white-space: normal;
    }

    #container .parallax .scene .retouche #retouche1{
        left:30px;
        top:40px;
        position: absolute;
        z-index: 1;
    }

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

    /********* Mise en page *********/
    #container .parallax .scene .miseenpage h1{
        font-size:1.8em;
        top:170px;
        left:130px;
    }

    #container .parallax .scene .miseenpage #page1{
        top:100px;
        left:-20px;
    }

    #container .parallax .scene .miseenpage #page2{
        left:70px;
        top:30px;
    }

    /********* Packaging CD *********/
    #container .parallax .scene .packaging h1{
        font-size:1.8em;
        top:70px;
        left:-40px;
    }

    #container .parallax .scene .packaging #CD1{
        left:200px;
        top:20px;
    }

    #container .parallax .scene .packaging #CD2{
        left:115px;
        top:120px;
    }
}


@media screen and (max-height: 640px){
    /********* Site web *********/
    #container .parallax .scene .site{
        top:55%;
    }
}

@media screen and (max-height: 480px){
    /********* Site web *********/
    #container .parallax .scene .site{
        top:32%;
        left:32%;
    }
}

/********************************/
/********* CSS MAIN *************/
/********************************/





/********************************/
/********* CSS CANVAS ***********/
/********************************/




/********************************/
/********* CSS CONTACT ***********/
/********************************/
@media screen and (max-width: 960px){
    #contact #formulaire-contact{
        display: flex;
        flex-wrap: wrap-reverse;
    }

    #contact #formulaire{
        /*position: absolute;*/
        display: block;
        /*background-color: white;*/
        width: 80%;
        margin: auto;
    }

    #contact #accroche{
        display: block;
        width: 80%;
        text-align: center;
        vertical-align: top;
        margin-left:auto;
        margin-right: auto;
        margin-bottom: 50px;
        margin-top: 50px;
        border-bottom: solid 1px;
        padding-bottom: 20px;
    }
}

@media screen and (max-width: 600px){
    #contact #formulaire-contact{
        margin-top: 20%;
        display: flex;
        flex-wrap: wrap-reverse;
    }

    #contact #formulaire{
        /*position: absolute;*/
        display: block;
        /*background-color: white;*/
        width: 80%;
        margin: auto;
    }

    #contact #accroche{
        display: block;
        width: 80%;
        text-align: center;
        vertical-align: top;
        margin-left:auto;
        margin-right: auto;
        margin-bottom: 50px;
        margin-top: 50px;
        border-bottom: solid 1px;
        padding-bottom: 20px;
    }

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

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

    #contact #formulaire .ligne .second{
        margin-left: 0%;
        width: 100%;
    }

    #contact #coordonnes .contact-info{
        display: flex;
        flex-direction: column;
        width: 100%;
        margin: 35px 0px;
        text-align: center;
    }
}



@media screen and (max-width: 550px){
    nav img{
        width: 300px;
    }

    #contact #accroche{
        margin-top: 90px;
    }

}



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

@media screen and (max-width: 1000px){
    /********* General *********/



    /********* Header *********/
    #overview .header #description{
        margin-left: 0px;
    }

    #overview .header #vignette{
        margin-right: 20px;
    }

    /********* Digipack *********/


    /********* Brochures *********/

}

@media screen and (max-width: 800px){
     /********* Affiche/Image *********/
    #overview #projects figure.soixante-dix img.paysage {
        height: auto;
        width: 100%;
    }
}


/********* Affiche/Image *********/
@media screen and (max-width: 800px){
    #overview #projects figure.soixante-dix img.paysage {
        height: auto;
        width: 100%;
    }

     #overview #projects .twenty.paysage{
        width: 80%;
    }
}

/********* Avant-Après *********/
@media screen and (max-width: 700px){
    #overview #projects .twenty.portrait{
        width: 70%;
    }
}