/* CSS REBORN */ 
/* Version Desktop */

/** General **/

p   {
    color: #FFF;
    font-family: "Nexa-Regular", sans-serif;
    font-size: 1.5em;
    line-height: 35px;
}

h2  {    
    font-family: "Monument-Extended_Black", sans-serif;
    font-size: 3em;
    color: #fff;
}

body    {background-color: #000;}

/** Header **/

header  {height: auto; width: 100vw;}

#RE-mainImg {
    height: auto;
    width: 100vw;
} 

header h1   {
    position: absolute;
    top: 30vw;
    right: 10%;
    font-family: "Nexa-Black", sans-serif;
    font-size: 7em;
    color: #FFF;
}

header h1 strong    {color: #D4A140;}

/** Descriptif **/

#RE-Descriptif  {
    height: auto;
    width: 100vw;
}

.SousTitreH2    {
    height: 40vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;

}

.SousTitreH2 h2 {
    text-align: center;
}

/** Meubles en PNG **/

.meubleSide {
    height: 45vw;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
}

.meubleSide figure  {width: 50vw; height: 90%;}

.meubleLeft img {
    height: 100%;
    left: 0;
}

.meubleLeft figure  {
    margin-left: -5%; 
}

.meubleRight img {
    height: 100%;
    right: 0;
    float: right;
}

.meubleRight    {
    justify-content: flex-end;
    float: right;
}

.meubleRight p  {
    position: relative;
    left: -13%;
}

.meubleSide p   {
    height: auto;
    width: 35vw;
}

/** Camaro **/

#RE-Camaro figure  {
    height: auto;
    width: 100vw;
}

#RE-Camaro figure img   {
    height: auto;
    width: 100%;
}

#RE-Camaro h2   {
    width: 40vw;
    position: relative;
    top: 30vh;
    left: 30%;
    right: auto;
    text-align: center;
}

/** RE-TXT **/

.RE-TXT {
    height: auto;
    width: 100vw;
    display: flex;
    justify-content: center;
    margin: 5vh 0;
    align-items: center;
    flex-direction: column;
    flex-wrap: nowrap;
}

.RE-TXT p   {width: 75vw;}

/** Camaro IMG **/

.RE-GalerieCamaro   {
    height: auto;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.CamaroX3   {
    height: 45vh;
    width: 80vw;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.CamaroWidth    {
    height: auto;
    width: 80vw;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 10vh 0;
}

.CamaroWidth img   {
    height: auto;
    width: 90%;
}

.CamaroX3 img   {
    height: 100%;
    width: auto;
}

/** Material IMG **/

.materialImg    {
    height: auto;
    width: 100vw;
    margin: 10vh 0;
}

.materialImg img    {
    height: auto;
    width: 100%;
}

/** Portes IMG **/

.ParalaxImg {
    display: flex;
    justify-content: center;
    align-items: center;
}

.PortesIMG  {
    height: 60vh;
    width: 75vw;
    margin-top: 10vh;
}

.PortesIMG img  {
    position: relative;
    height: 20vh;
    width: auto;
    border-radius: 10px;
    
}

#RE-B1  {top: 0; left: 20%;}
#RE-B2  {top: 30%; left: 20%;}
#RE-B3  {top: 10%; left: 20%;}

/** REBORN vu de haut **/

.VuHaute figure  {
    height: auto;
    width: 100vw;
}

.VuHaute figure img   {
    height: auto;
    width: 100%;
}

.VuHaute h2   {
    width: 40vw;
    position: relative;
    top: -30%;
    left: 30%;
    right: auto;
    text-align: center;
}

/** Détails REBORN **/

#RE-C1  {height: auto; width: 20vw; top: 40%; left: 17%;}
#RE-C2  {height: auto; width: 10vw;top: 10%; left: 14%; z-index: 100;}
#RE-C3  {height: auto; width: 25vw;top: 37%; left: 12%;}

.fullWidthRE2   {margin: 10vh 0;}

/** Savoir-faire REBORN **/

.ParalaxImgBig  {
    height: 100vh;
    width: 100vw;
}

.ParalaxImgBig img   {
    border-radius: 10px;
    position: relative;
}

.ParalaxImgBig P    {
    position: relative;
    height: auto;
    width: 37vw;
    top: 15vh;
    left: 55vw;
}

#RE-D1  {height: auto; width: 15vw; top: -20vh; left: 20%;}
#RE-D2  {height: auto; width: 10vw; top: -3vh; left: 17%;}
#RE-D3  {height: auto; width: 10vw; top: 9vh; left: 0%;}
#RE-D4  {height: auto; width: 10vw; top: 18vh; left: -5%;}
#RE-D5  {height: auto; width: 15vw; top: 33vh; left: -27%;}
#RE-D6  {height: auto; width: 20vw; top: 39vh; left: -30%;}
#RE-D7  {height: auto; width: 7vw; top: 32vh; left: -32%; z-index: 40;}
#RE-D8  {height: auto; width: 17vw; top: 4vh; left: 54%; z-index: 20;}
#RE-D9  {height: auto; width: 14vw; top: 25vh; left: 37%;}
#RE-D10  {height: auto; width: 15vw; top: 15vh; left: 34%;}
#RE-D11 {height: auto; width: 10vw; top: 18vh; left: 30%;}

/* Version Large Desktop */

@media screen and (max-width: 1599px) and (min-width: 960px) {
    
    h2  {font-size: 2em;}
    
    .CamaroX3   {height: 30vh; width: 100vw; flex-direction: row;}
    
    .CamaroX3 img   {height: 25vh; width: auto;}
    

}

/* Version tablette */

@media screen and (max-width: 959px) and (min-width: 768px) {
    h2  {font-size: 2em; text-align: center;}
    .meubleSide {height: 20vh;}
    .meubleSide p {font-size: 1em; line-height: 23px;}

    .PortesIMG img  {
        height: 15vh;
        width: auto;
        border-radius: 10px;

    }

    #RE-B1  {top: 0; left: 3%;}
    #RE-B2  {top: 15%; left: -19%;}
    #RE-B3  {top: 7%; left: 7%;}
    
    #RE-C1  {height: auto; width: 25vw; top: 40%; left: 17%;}
    #RE-C2  {height: auto; width: 19vw;top: 25%; left: 14%; z-index: 100;}
    #RE-C3  {height: auto; width: 25vw;top: 37%; left: 12%;}
    
    .ParalaxImgBig P    {
        width: 80vw;
        position: inherit;
        margin: 0 7%;
    }
    
    #RE-D1  {width: 25vw; top: 5vh; left: 20%;}
    #RE-D2  {width: 10vw; top: 10vh; left: 17%;}
    #RE-D3  {width: 15vw; top: 5vh; left: 15%;}
    #RE-D4  {width: 20vw; top: 21vh; left: -20%;}
    #RE-D5  {width: 25vw; top: 43vh; left: -27%;}
    #RE-D6  {width: 25vw; top: 39vh; left: 50%;}
    #RE-D7  {width: 27vw; top: 32vh; left: -5%; z-index: 40;}
    #RE-D8  {width: 17vw; top: 4vh; left: 4%; z-index: 20;}
    #RE-D9  {width: 14vw; top: 45vh; left: -40%;}
    #RE-D10  {width: 15vw; top: 28vh; left: -20%;}
    #RE-D11 {width: 16vw; top: -3vh; left: 15%;} 
}

/* Version mobile */

@media screen and (max-width: 767px) and (min-width: 100px) {
    
    /*Général*/
    
    p   {
        font-size: 1em;
        line-height: 25px;
    }
    
    h2  {font-size: 1.5em; text-align: center;}
    
    /*Header*/
    
    header   {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap-reverse;
    }
    
    header h1   {
        position: inherit;
        font-size: 3em;
        text-align: center;
    }
    
    /*Sous-titre*/
    
    .SousTitreH2    {
        height: 20vh;
        width: 100vw;
        text-align: center;
    }
    
    /*Meubles side*/

    .meubleSide {flex-direction: column; height: 50vh; margin: 10vh 0;}
    
    .meubleRight    {flex-direction: row-reverse;}
    
    .meubleRight p  {margin-left: 10vh;}
    
    .meubleSide figure {height: 25vh; width: 100vw;}
    
    .meubleSide p   {width: 75vw;}
    
    /*Camaro*/
    
    #RE-Camaro h2   {
        height: 15vh;
        width: 75vw;
        left: 12.5%;
        top: 1vh;
    }
    
    /*Galerie Camaro*/
    
    .CamaroX3   {height: 90vh; width: 100vw; flex-direction: column;}
    
    .CamaroX3 img   {height: 25vh; width: auto;}
    
    /*Portes IMG*/
    
    .PortesIMG  {height: 50vh; margin-top: 0;}
    
    .PortesIMG img  {height: 15vh;}
    
    
    /*REBORN vu de haut*/
    
    .VuHaute h2 {width: 75vw; left: 12.5%}
    
    /*Détails REBORN*/
    
    /** Savoir-faire REBORN **/
    
    .ParalaxImgBig {height: 100vh;}
    
    #RE-B1  {top: 0; left: 3%;}
    #RE-B2  {top: -8%; left: 19%;}
    #RE-B3  {top: -14%; left: 7%;}
    
    #RE-C1  {width: 48vw; top: 40%; left: 17%;}
    #RE-C2  {width: 19vw;top: 25%; left: 0%; z-index: 100;}
    #RE-C3  {width: 42vw;top: 37%; left: 12%;}
    
    .ParalaxImgBig P    {
        width: 75vw;
        position: inherit;
        margin: 0 7%;
    }
    
    #RE-D1  {width: 35vw; top: 5vh; left: 20%;}
    #RE-D2  {width: 10vw; top: 10vh; left: 17%;}
    #RE-D3  {width: 15vw; top: 5vh; left: 15%;}
    #RE-D4  {width: 25vw; top: 18vh; left: -40%;}
    #RE-D5  {width: 25vw; top: 13vh; left: 27%;}
    #RE-D6  {width: 25vw; top: 11vh; left: 30%;}
    #RE-D7  {width: 27vw; top: 32vh; left: -5%; z-index: 40;}
    #RE-D8  {width: 30vw; top: 43vh; left: 9%; z-index: 20;}
    #RE-D9  {width: 24vw; top: 20vh; left: -10%;}
    #RE-D10  {width: 25vw; top: 33vh; left: -20%;}
    #RE-D11 {width: 26vw; top: 35vh; left: 55%;} 
}

/**Version mobile paysage**/

@media (orientation: landscape) and (max-device-width : 812px) {
    
    /** Meubles en PNG **/

    .meubleSide {
        height: 45vw;
        width: 100vw;
        display: flex;
        align-items: center;
        justify-content: space-around;
        flex-wrap: wrap;
    }

    .meubleSide figure  {width: 50vw; height: 90%;}

    .meubleLeft img {
        height: 100%;
        left: 0;
    }

    .meubleLeft figure  {
        margin-left: -5%; 
    }

    .meubleRight img {
        height: 100%;
        right: 0;
        float: right;
    }

    .meubleRight    {
        justify-content: flex-end;
        float: right;
    }

    .meubleRight p  {
        position: relative;
        left: -13%;
    }

    .meubleSide p   {
        height: auto;
        width: 35vw;
    }
    

    
    
    .PortesIMG  {display: flex; justify-content: space-around; align-items: center;}
    
    .PortesIMG img  {display: block; height: 25vh;}
    
    #RE-B1  {top: 0; left: 0;}
    #RE-B2  {top: 0; left: 0;}
    #RE-B3  {top: 0; left: 0;}
    
    #RE-C1  {height: auto; width: 20vw; top: 0; left: 0;}
    #RE-C2  {height: auto; width: 15vw;top: 0; left: 0;}
    #RE-C3  {height: auto; width: 20vw;top: 0; left: 0;}
    
    .ParalaxImgBig  {height: 150vh; display: flex; justify-content: space-around; align-items: flex-start; flex-wrap: wrap;}

    .ParalaxImgBig img  {display: block; height: auto;}
    
    #RE-D1  {height: 15vw; top: 0; left:0; margin-bottom: 5vh;}
    #RE-D2  {height: 15vw; top: 0; left:0; margin-bottom: 5vh;}
    #RE-D3  {height: 15vw; top:0; left: 0; margin-bottom: 5vh;}
    #RE-D4  {height: 15vw; top: 0; left:0; margin-bottom: 5vh;}
    #RE-D5  {height: 15vw; top: 0; left: 0; margin-bottom: 5vh;}
    #RE-D6  {height: 15vw; top: 0; left: 0; margin-bottom: 5vh;}
    #RE-D7  {height: 15vw; top: 0; left: 0; margin-bottom: 5vh;}
    #RE-D8  {height: 15vw; top:0; left:0; margin-bottom: 5vh;}
    #RE-D9  {height: 15vw; top: 0; left:0; margin-bottom: 5vh;}
    #RE-D10 {height: 15vw; top: 0; left:0; margin-bottom: 5vh;}
    #RE-D11 {height: 15vw; top: 0; left:0; margin-bottom: 5vh;}
    
}
    
/*Version 2.5
By l-ct.fr
0x b0 29 12 52 e0 cb 0c b3 0f 1c */