h1 {
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1.5rem;
    color: #8D8C89;
    text-align: center;
    line-height: 8.1rem;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.main {
    width: 100%;
    min-height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-image: url('../images/logo-bg.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

#logo1 {
    width: 80%;
}

.st0,
#point-contour {
    fill: none;
    stroke: rgba(142, 141, 138, 0.42);
    mix-blend-mode: multiply;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
}

/* 2eme version du logo en haut pour acces menu depuis les pages secondaires  */
header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    top: 5%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    position: absolute;
    width: 100%;
    height: auto;
}

#btn-menu {
    width: 97px;
}

.pastille {
    opacity: 0.5;
    fill: #E85A4F;
    cursor: url(../images/menu.png), auto;
    -webkit-animation: organic 2s infinite alternate-reverse;
    animation: organic 2s infinite alternate-reverse;
    -webkit-transform-origin: center center;
    transform-origin: center center;

}

@-webkit-keyframes organic {
    from {
        opacity: .8;
    }

    to {
        opacity: 0.3;
    }
}

@keyframes organic {
    from {
        opacity: .8;
    }

    to {
        opacity: 0.3;
    }
}

.chemin {
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
}

#point {
    fill: #E85A4F;
    stroke: none;
}



/* NAVIGATION DES SECTIONS---------------------- */

.presentation {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 72rem;
    height: 70rem;
    margin: auto;
    position: absolute;
    top: 20%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    overflow: hidden;
}

[type=radio] {
    position: fixed;
    left: -100vw;
}

#web:checked~.web {
    display: block;
}

#edition:checked~.edition {
    display: block;
}

#animation:checked~.animation {
    display: block;
}

.web,
.edition,
.animation {
    display: none;
}

.item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-top: 5rem;
}

label {
    font-weight: 600;
    font-size: 1.8rem;

    color: #E7594E;
    text-align: center;
    cursor: pointer;
    width: 33%;
    -webkit-transition: .5s;
    transition: .5s;
}

label:hover {
    color: #C1CDBC;
}

.portfolio {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.visuelcut img {
    width: 720px;
    height: 450px;
    border: 1px solid #8D8C89;
    -o-object-fit: cover;
    object-fit: cover;
}

.visuelcut a {
    cursor: url(../images/openred.png), auto;
}

article {
    padding: 1rem 0;
    width: 720px;
    height: 100px;
}

h2 {
    font-size: 2rem;
    color: #8D8C89;
    font-weight: 400;
    line-height: 2.3rem;
    -webkit-transform: rotate(0);
            transform: rotate(0);
    text-align: left;
}

p {
    font-size: 1.5rem;
    color: #8D8C89;
    font-weight: 400;
    line-height: 2rem;
}

.visuelcut a {
    width: 720px;
    height: 450px;
}

.choixItem {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 5rem 1rem;
}

.choixItem label {
    font-size: 1.4rem;
    color: #8D8C89;
    font-weight: 600;
    padding: .5rem 1rem;
    border-bottom: 0.1rem solid transparent;
    background-color: transparent;
    -webkit-transition: 1s;
    transition: 1s;
    width: auto;
    margin: 0 1rem 1rem 1rem;
}

.choixItem label:hover {
    color: #E7594E;
    font-weight: 600;
    border-bottom: 0.1rem solid #E7594E;
}


.ecran {
    overflow: hidden;
    position: relative;
    width: 720px;
    height: 530px;
}

.tout {
    position: absolute;
    left: 0;
    top: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-transition: .35s;
    transition: .35s;
}

#civi:checked~.ecran .tout {
    left: -720px;
}

#civiland:checked~.ecran .tout {
    left: -1440px;
}

#cuir:checked~.ecran .tout {
    left: -2160px;
}

#agency:checked~.ecran .tout {
    left: -2880px;
}

#clim:checked~.ecran .tout {
    left: -3600px;
}

#info:checked~.ecran .tout {
    left: -720px;
}

#valentin:checked~.ecran .tout {
    left: -720px;
}

#baume:checked~.ecran .tout {
    left: -1440px;
}

#nail:checked~.ecran .tout {
    left: -2160px;
}

#brushes:checked~.ecran .tout {
    left: -2880px;
}

#mini:checked~.ecran .tout {
    left: -3600px;
}

#pack:checked~.ecran .tout {
    left: -720px;
}

#men:checked~.ecran .tout {
    left: -1440px;
}

#pick:checked~.ecran .tout {
    left: -2160px;
}

#brochure:checked~.ecran .tout {
    left: -2880px;
}

#ral:checked~.ecran .tout {
    left: -3600px;
}



/** LIGHTBOX  **/

.lightbox {
    display: none;

    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100%;
    text-align: center;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    cursor: url(../images/close.png), auto;
}

.lightbox:after {
    content: "";
    background-image: url(../images/close.png);
    width: 4rem;
    height: 4rem;
    background-repeat: no-repeat;
    background-position: center center;
    position: fixed;
    top: 5%;
    right: 5%;
}

.lightbox video,
.lightbox img {
    width: 50%;
    height: 80%;
    -o-object-fit: contain;
    object-fit: contain;
}

.lightbox:target {
    outline: none;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

/** RESPONSIVE ----------------------------------------------- **/
@media only screen and (max-width: 1870px) {
    .titre {
        left: 10%;
    }

    .navigation {

        right: 10%;
    }

}
@media only screen and (max-width: 1084px) {
    .presentation {
        width: 700px;
        height: auto;
        top: 25%;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }

    .tout {
        width: 4200px;
        height: auto;
    }

    .item {
        margin-top: 0;
    }

    .choixItem {
        margin: 2rem 0rem;
        width: 70rem;
    }

    .choixItem label {
        font-size: 1.6rem;
        margin: 0;
        text-align: left;
    }

    .visuelcut img {
        width: 700px;
    }

    .visuelcut a {
        width: 700px;
        height: auto;
    }

    .ecran {
        width: 700px;
        height: 551px;
        margin-top: 1rem;
    }

    article {
        width: 70rem;
    }


    #civi:checked~.ecran .tout {
        left: -700px;
    }

    #civiland:checked~.ecran .tout {
        left: -1400px;
    }

    #cuir:checked~.ecran .tout {
        left: -2100px;
    }

    #agency:checked~.ecran .tout {
        left: -2800px;
    }

    #clim:checked~.ecran .tout {
        left: -3500px;
    }

    #valentin:checked~.ecran .tout {
        left: -700px;
    }

    #baume:checked~.ecran .tout {
        left: -1400px;
    }

    #nail:checked~.ecran .tout {
        left: -2100px;
    }

    #brushes:checked~.ecran .tout {
        left: -2800px;
    }

    #mini:checked~.ecran .tout {
        left: -3500px;
    }

    #pack:checked~.ecran .tout {
        left: -700px;
    }

    #men:checked~.ecran .tout {
        left: -1400px;
    }

    #pick:checked~.ecran .tout {
        left: -2100px;
    }

    #brochure:checked~.ecran .tout {
        left: -2800px;
    }

    #ral:checked~.ecran .tout {
        left: -3500px;
    }
    @media only screen and (max-width: 1080px) {
        .titre {
            top: 14%;
            left: 50%;
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
        }
        h1 {
            -webkit-transform: rotate(0);
            transform: rotate(0);
        }
        .navigation {
    right: auto;
            bottom: 10%;
        }
    }
}

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

    .presentation {
        width: 500px;
        height: auto;
        top: 25%;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }

    .tout {
        width: 3000px;
        height: auto;
    }

    .item {
        margin-top: 0;
    }

    .choixItem {
        margin: 2rem 0rem;
        width: 50rem;
    }

    .choixItem label {
        text-align: center;
        width: 14rem;
    }

    .visuelcut img {
        width: 500px;

        height: 313.25px;
    }

    .visuelcut a {
        width: 500px;
        height: auto;
    }

    .ecran {
        width: 500px;
        height: 516px;
        margin-top: 1rem;
    }

    article {
        width: 50rem;
    }

    #civi:checked~.ecran .tout {
        left: -500px;
    }

    #civiland:checked~.ecran .tout {
        left: -1000px;
    }

    #cuir:checked~.ecran .tout {
        left: -1500px;
    }

    #agency:checked~.ecran .tout {
        left: -2000px;
    }

    #clim:checked~.ecran .tout {
        left: -2500px;
    }

    #valentin:checked~.ecran .tout {
        left: -500px;
    }

    #baume:checked~.ecran .tout {
        left: -1000px;
    }

    #nail:checked~.ecran .tout {
        left: -1500px;
    }

    #brushes:checked~.ecran .tout {
        left: -2000px;
    }

    #mini:checked~.ecran .tout {
        left: -2500px;
    }

    #pack:checked~.ecran .tout {
        left: -500px;
    }

    #men:checked~.ecran .tout {
        left: -1000px;
    }

    #pick:checked~.ecran .tout {
        left: -1500px;
    }

    #brochure:checked~.ecran .tout {
        left: -2000px;
    }

    #ral:checked~.ecran .tout {
        left: -2500px;
    }
}

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

    .presentation {
        width: 400px;
        height: auto;
        top: 25%;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }

    .tout {
        width: 2400px;
        height: auto;
    }

    .item {
        margin-top: 0;
        font-size: 1.6rem;

    }

    .choixItem {
        margin: 2rem 0rem;
        width: 40rem;
    }

    .choixItem label {
        text-align: center;
    }

    .visuelcut img {
        width: 400px;
        height: auto;
    }

    .visuelcut a {
        width: 400px;
        height: auto;
    }

    .ecran {
        width: 400px;
        height: 356px;
        margin-top: 1rem;
    }

    article {
        width: 40rem;
    }

    #civi:checked~.ecran .tout {
        left: -400px;
    }

    #civiland:checked~.ecran .tout {
        left: -800px;
    }

    #cuir:checked~.ecran .tout {
        left: -1200px;
    }

    #agency:checked~.ecran .tout {
        left: -1600px;
    }

    #clim:checked~.ecran .tout {
        left: -2000px;
    }

    #valentin:checked~.ecran .tout {
        left: -400px;
    }

    #baume:checked~.ecran .tout {
        left: -800px;
    }

    #nail:checked~.ecran .tout {
        left: -1200px;
    }

    #brushes:checked~.ecran .tout {
        left: -1600px;
    }

    #mini:checked~.ecran .tout {
        left: -2000px;
    }

    #pack:checked~.ecran .tout {
        left: -400px;
    }

    #men:checked~.ecran .tout {
        left: -800px;
    }

    #pick:checked~.ecran .tout {
        left: -1200px;
    }

    #brochure:checked~.ecran .tout {
        left: -1600px;
    }

    #ral:checked~.ecran .tout {
        left: -2000px;
    }
}

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

    .presentation {
        width: 300px;
        height: auto;
        top: 250px;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }

    .tout {
        width: 1800px;
        height: auto;
    }

    .item {
        margin-top: 0;
    }

    .choixItem {
        margin: 2rem 0rem;
        width: 30rem;
    }

    .choixItem label {
        font-size: 1.4rem;
        margin: 0;
        width: 9rem;
        text-align: center;
        padding: .5rem 0rem;
    }

    .visuelcut img {
        width: 300px;
        height: 188.25px;
    }

    .visuelcut a {
        width: 300px;
        height: auto;
    }

    .ecran {
        width: 300px;
        height: 287.5px;
        margin-top: 1rem;
    }

    article {
        width: 300px;
    }

    article h2 {
        font-size: 1.6rem;
        width: 300px;
    }

    article p {
        font-size: 1.3rem;
        width: 300px;
    }

    #civi:checked~.ecran .tout {
        left: -300px;
    }

    #civiland:checked~.ecran .tout {
        left: -600px;
    }

    #cuir:checked~.ecran .tout {
        left: -900px;
    }

    #agency:checked~.ecran .tout {
        left: -1200px;
    }

    #clim:checked~.ecran .tout {
        left: -1500px;
    }

    #valentin:checked~.ecran .tout {
        left: -300px;
    }

    #baume:checked~.ecran .tout {
        left: -600px;
    }

    #nail:checked~.ecran .tout {
        left: -900px;
    }

    #brushes:checked~.ecran .tout {
        left: -1200px;
    }

    #mini:checked~.ecran .tout {
        left: -1500px;
    }

    #pack:checked~.ecran .tout {
        left: -300px;
    }

    #men:checked~.ecran .tout {
        left: -600px;
    }

    #pick:checked~.ecran .tout {
        left: -900px;
    }

    #brochure:checked~.ecran .tout {
        left: -1200px;
    }

    #ral:checked~.ecran .tout {
        left: -1500px;
    }
}

@media only screen and (max-width: 1084px) {
    .titre {
        top: 18%;
    }

    .navigation {
        bottom: 15%;
    }
}

@media only screen and (max-width : 768px) {
    .titre {
        top: 18%;
    }


}

@media only screen and (max-width : 320px) {
    .titre {
        top: 18%;
    }

    .navigation {
        bottom: 5%;
    }

}

@media only screen and (max-height : 768px) {
    .presentation {
        top: 50%;
        -webkit-transform: translate(-50%, -25%);
        transform: translate(-50%, -25%);
    }

    .navigation {
        bottom: 2%;
    }

}

@media only screen and (max-height : 630px) {
    .presentation {
        top: 50%;
        -webkit-transform: translate(-50%, -38%);
        transform: translate(-50%, -38%);
    }
}

@media only screen and (max-height : 640px) {
    .navigation {
        bottom: 1%;
    }
}

@media only screen and (max-height : 568px) {
    .presentation {
        top: 50%;
        -webkit-transform: translate(-50%, -25%);
        transform: translate(-50%, -25%);
    }

    .titre {
        top: 20%;
    }

    .navigation {
        bottom: 1%;
    }
}

@media only screen and (max-height : 414px) {

    .titre {
        top: 20%;
    }
}