#piscinagiste{
    width: 100%;
    position: relative;
    background:#001e32;
    color:#FFF;
    overflow:hidden;
}
#piscinagiste .aux-content-top-margin .aux-primary{
    padding-top:0 !important;
}

.exergue{color:#00ffff;}

body video{filter: contrast(101%);}
body.mac video{filter: brightness(88%);}

.section-fullscreen{
    position: relative;
    width:100%;
    height:100vh;
    overflow: hidden;
}
.section-fullscreen-center{
    display: flex;
    align-items: center;
    justify-content: center;
}
.back-video{
    position: absolute;
    right: 0;
    bottom: 0;
    height: 100%;
    width:auto;
}



.tete-chapitre-titre{font-size:2rem; margin-bottom:5px; line-height:1;font-weight: 100; letter-spacing: 5px;}
.tete-chapitre-sstitre{font-size: 4.45rem;font-weight: bold;margin-bottom:20px;line-height: 0.8;}
.tete-chapitre-texte{font-size:1.3rem; line-height:1.2; font-weight:bold;}

.contenu-chapitre-titre{font-size:2.9rem; font-weight:bold; margin-bottom:20px; line-height:1.2;}
.contenu-chapitre-texte{font-size:1.2rem; line-height:1.2; font-weight:bold;}
.contenu-chapitre-fin{font-size:2.5rem; line-height:1; font-weight:100;}

#main{opacity:0;}

#piscinagiste-logo-menu-svg{
    display:inline-block; opacity:0;
}
#piscinagiste-logo-menu{
    display:none;
}
#piscinagiste-logo-menu-svg{
    z-index: 1000;
}


#animation-intro{
    position: relative;
    width:100%;
    margin:0 auto;
    height:700vh;
    overflow: hidden;
}

#header-animation{
    position: absolute;
    width:100%;
    background: #001e32;
    height:100vh;
    overflow: hidden;
}

#piscinagiste-logo-menu-svg{
    width: 210px;
    height: 40px;
}
#piscinagiste-logo-menu-svg svg{
    width: 100%;
    height: auto;
    display:block;
}

#title-piscinagiste{
    position:absolute;
    bottom:0;left:0;
    width:100%;
    color: #FFFFFF;
    font-size: 6px;
    text-transform: uppercase;
    text-align: left;
    letter-spacing: 1px;
    font-weight:normal;
    margin:0;
    font-family:"Ubuntu";
    line-height:1;
}


.animation-canvas-cont{
    position: relative;
    width:100%;
    height:100vh;
    overflow: hidden;
}
.animation-canvas-cont canvas {
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100%;
    width: auto;
}

@media (min-aspect-ratio: 1920/1080) {
    .animation-canvas-cont canvas {
        width: 100%;
        height: auto;
    }
}


#icon-scroll, #icon-scroll:before {
    position: absolute;
    left: 50%;
}
#icon-scroll {
    width: 30px;
    height: 50px;
    margin-left: -15px;
    bottom: 100px;
    margin-top: -35px;
    box-shadow: inset 0 0 0 2px #FFFFFF;
    border-radius: 20px;
}
#icon-scroll span{
    color: #FFFFFF;
    transform: translateX(-50%);
    display: inline-block;
    left: 50%;
    position: absolute;
    bottom: -30px;
    font-size: 0.9em;
}

#icon-scroll:before {
    content: '';
    width: 8px;
    height: 8px;
    background: #FFFFFF;
    margin-left: -4px;
    top: 8px;
    border-radius: 4px;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-name: mousescroll;
}
@keyframes mousescroll {
    0% {opacity:1;}
    100% {opacity:0; transform: translateY(20px);}
}



#subtitle{
    display: flex;
    align-items: center;
    justify-content: center;
    position:absolute;
    top:0; left:0;
    width:100%;
    height:100vh;
    opacity:0;
    will-change: transform;
}
#subtitle h2{
    padding:0; margin:0;
    font-size:4rem;
    letter-spacing: 3px;
    color:#FFFFFF;
    line-height:1.1;
    font-weight:bold;
    text-align: center;
}


#intro-texte-cont{
    display: flex;
    align-items: center;
    justify-content: center;
    position:absolute;
    top:0; left:0;
    width:100%;
    height:100vh;
    opacity:0;
}
#text1, #text2, #text3{
    max-width:700px;
    width:96%;
    font-size:2rem;
    line-height:1.2;
    color:#FFF;
    font-weight: bold;
    word-break: break-word;
    text-transform: initial;
    font-family:"Ubuntu";
    margin:0;
}
#intro-texte > span{opacity:0.4;}


#chapitre1-intro-cont{
    position:absolute; top:0; right:8%;
    max-width:700px;
    width:82%;
    height:100vh;
    opacity:0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: stretch;
    align-items: center;
    column-gap:50px;
}

#chapitre1-intro{
    position:relative;
    opacity:0;
}

#txt-vous-1, #txt-vous-2, #txt-vous-3{opacity:0;}



.barre-piscinagiste{height:20vh; width:auto; display: flex; flex-direction: row; column-gap: 30px;}
.barre-piscinagiste img{width:auto; height:100%; max-width: none;}


.chapitre-content-cont{
    position:absolute;
}

#chapitre1-content-1{
    margin:-100vh auto 0 auto;
    height:400vh;
    z-index:500;
    max-width:1100px; width:96%;
}

#chapitre1-content-1 .chapitre-content-cont{
    width:40%;
    left:0;
    top:40vh;
    opacity:0;
}
#chapitre1-content-1 .contenu-chapitre-fin{
    position:absolute;
    top:80vh; left:0;
    width:100%;
    opacity:0;
}
#chapitre1-content-1 img{
    position:absolute;
    top:0; right:0;
    height:100vh;
    width:auto;
    max-width: none;
    opacity:0;
}


#chapitre1-content-2{
    height:100vh;
    z-index:400;
    margin:-20vh auto 0 auto;
    max-width:1100px; width:96%;
    overflow: visible;
}

#chapitre1-content-2 #chapitre1-content-2-image-1{
    position:absolute; top: 10%; left: 0;
    width:82%; height:auto;
}
#chapitre1-content-2 #chapitre1-content-2-image-2{
    position:absolute;  top: 26%; right: 0;
    width:24%; height:auto;
    border:solid 20px #001e32;
}

#chapitre1-content-2 .chapitre-content-cont{
    width:50%;
    right: 24%;
    top: 47%;
    background: #001e32;
    padding:20px 30px 20px 60px; box-sizing: border-box;
}
#chapitre1-content-2 .contenu-chapitre-fin{
    position:absolute;
    bottom:10%; left:20%;
    width:75%;
}


#chapitre1-content-3{
    height:200vh;
    z-index:450;
    padding-bottom:100vh;
    margin-top:10vh;
}
#chapitre1-content-3-inner{
    position:absolute; top:0; left:0; width:100%; height:100vh;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: stretch;
    align-items: center;
}
#chapitre1-content-3 .chapitre-content-cont{
    position:initial;
    width:96%;
    max-width:600px;
    text-align:center;
}
#chapitre1-content-3-images{
    width: 100%;
    margin: 5vh 0;
    text-align: center;
    /*aspect-ratio: 1800/500;*/
    display: block;
    max-width: 1200px;
}
#chapitre1-content-3-images img{
    /*height:100%;*/
    opacity:0;
}
#chapitre1-content-3-image-1{
    width:20%;
}
#chapitre1-content-3-image-2{
    width:20%;
    margin-left:2%;
}
#chapitre1-content-3-image-3{
    width:24%;
    margin-left:2%;
}
#chapitre1-content-3-image-4{
    width:26%;
    margin-left:2%;
}
#chapitre1-content-3 .contenu-chapitre-fin{
    width:96%;
    text-align:center;
}






#animation-chapitre2{
    position: relative;
    width:100%;
    margin:-150vh auto 0 auto;
    height:400vh;
    overflow: hidden;
    z-index:500;
}
#animation-chapitre2-canvas-cont{
    opacity:0;
}

#chapitre2-intro-cont{
    position:absolute; top:0; left:10%;
    max-width:700px;
    width:82%;
    height:100vh;
    opacity:0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: stretch;
    align-items: center;
    column-gap:50px;
}
#chapitre2-intro{
/*    position: absolute;
    top:50%; transform: translateY(-50%);
    left:17%;
    width:28%;*/
    color:#FFF;
    opacity:0;
}

#chapitre2-intro .tete-chapitre-sstitre{
    line-height:1;
}

/*#barre-createur-2-1{position:absolute; top:100vh; left: 10%; height: 25vh; width: 30px; background:#FFF;}
#barre-createur-2-2{position:absolute; top:100vh; left: 13%; height: 25vh; width: 30px; background:#FFF;}
*/

#chapitre2-content-1{
    z-index:450;
    margin-top:-60vh;
    height:auto;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: center;
    align-items: center;
}
#chapitre2-content-1 .chapitre-content-cont {
    position: initial;
    width:96%;
    max-width:960px;
    text-align:center;
}

#chapitre2-content-1-video{
    height:auto; max-width:670px; width:100%; margin:60px auto;
}


#chapitre2-content-1 .contenu-chapitre-fin{
    width:96%;
    max-width:960px;
    text-align:center;
}

#chapitre2-content-2{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: start;
    padding-left:12%;
    margin-top:20vh;

}
#chapitre2-content-2 .chapitre-content-cont{
    position: initial;
    width:96%;
    max-width:550px;
    text-align:left;
    z-index: 420;
}
#chapitre2-content-2 .contenu-chapitre-fin{
    width:96%;
    margin-top:100px;
    text-align:left;
    z-index: 430;
}

#chapitre2-content-2-video{
    position:absolute;
    right:0; top:50%; transform: translateY(-50%);
    height:auto; width:60%; z-index: 410;
}




#chapitre2-content-3{
    height:150vh;
    text-align: center;
}

#chapitre2-content-3-video{
    margin:10vh auto 6vh auto;
    width:100%; height:auto;
    max-width: 1200px;
}
#chapitre2-content-3 .chapitre-content-cont {
    position:relative;
    max-width: 1000px;
    width:96%;
    margin:0 auto 10vh auto;
    text-align:center;
    word-break: break-word;
}
#chapitre2-content-3 .contenu-chapitre-fin {
    position: relative;
    width:50%;
    margin:0 25%;
    text-align:center;
}






#animation-chapitre3{
    position: relative;
    width:100%;
    margin:-150vh auto 0 auto;
    height:400vh;
    overflow: hidden;
}
#animation-chapitre3-canvas-cont{
    opacity:0;
}

#chapitre3-intro-cont{
    position:absolute; top:0; left:40%;
    max-width:750px;
    width:40%;
    height:100vh;
    opacity:0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: stretch;
    align-items: center;
    column-gap:50px;
}
#chapitre3-intro{
    /*position: absolute;
    top:50%; transform: translateY(-50%);
    left:47%;
    width:29%;*/
    color:#FFF;
    opacity:0;
    word-break: break-word;
}
/*#barre-createur-3-1{position:absolute; top:100vh; left: 40%; height: 25vh; width: 30px; background:#FFF;}
#barre-createur-3-2{position:absolute; top:100vh; left: 43%; height: 25vh; width: 30px; background:#FFF;}
*/



#chapitre3-content-1{
    height:150vh;
    margin-top:-100vh;
}
#chapitre3-content-1-container{
    position:absolute; top:0; left:0; width:100%; height:100vh;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: stretch;
    align-items: center;
    column-gap:50px;
}
#chapitre3-content-1 .chapitre-content-cont {
    position: initial;
    width:40%;
}
#chapitre3-content-1 .contenu-chapitre-fin {
    position: initial;
    width:100%;
    margin-top:10vh;
}

#chapitre3-content-1-video{
    height:auto; width:30%;
    opacity:0;
}





#chapitre3-content-2{
    height:200vh;
    margin-top:-100vh;
}
#chapitre3-content-2-inner{
    position:relative;width:100%; height:100vh;
}
#chapitre3-content-2-video{
    position:absolute;
    object-fit: cover;
    height:105%; width:105%;
    top:0; left:0;
    opacity:0;
}


#chapitre3-content-2 .chapitre-content-cont {
    top:30%; left:10%;
    width:80%;
    max-width:410px;
    opacity:0;
}
#chapitre3-content-2 .contenu-chapitre-fin {
    position: absolute;
    bottom:15vh; left:10%;
    width:80%;
    opacity:0;
}





#chapitre3-content-3{
    height:100vh;
    background:#001e32;
}

#chapitre3-content-3-video{
    position:absolute;
    object-fit: cover;
    width:100%;
    bottom:0; left:0;
}
#chapitre3-content-3 .chapitre-content-cont{
    top:20vh;
    width:96%;
    max-width:770px;
    left:50%; transform: translateX(-50%);
    text-align:center;
    opacity: 0;
}
#chapitre3-content-3 .contenu-chapitre-fin {
    position: absolute;
    bottom:0;left:5%;
    transform: translateY(-20%);
    width:90%;
    text-align:right;
    opacity: 0;
}









@media (min-aspect-ratio: 23/10) {

    #chapitre1-content-1 .chapitre-content-cont {width:60%;}

    #chapitre1-content-2 #chapitre1-content-2-image-1{
        top:0; left:10%;
        width:72%; height:auto;
    }
    #chapitre1-content-2 #chapitre1-content-2-image-2{
        top: 16%; right: 0;
        width:24%; height:auto;
        border:solid 10px #001e32;
    }

    #chapitre1-content-2 .chapitre-content-cont{
        width:75%;
        right: 24%;
        top: 37%;
        padding:20px;
    }
    #chapitre1-content-2 .contenu-chapitre-fin{
        bottom:5%; left:0;
        width:100%;
    }

    #chapitre1-content-3 .chapitre-content-cont{
        max-width:800px;
    }
    #chapitre1-content-3-images{
        margin: 5vh 0;
    }


}
@media screen and (max-height: 750px) {
    #chapitre1-content-2 #chapitre1-content-2-image-1{
        top:0; left:10%;
        width:72%; height:auto;
    }
    #chapitre1-content-2 #chapitre1-content-2-image-2{
        top: 16%; right: 0;
        width:24%; height:auto;
        border:solid 10px #001e32;
    }

    #chapitre1-content-2 .chapitre-content-cont{
        width:75%;
        right: 24%;
        top: 37%;
        padding:20px;
    }
    #chapitre1-content-2 .contenu-chapitre-fin{
        bottom:5%; left:0;
        width:100%;
    }


    #chapitre1-content-3 .chapitre-content-cont{
        max-width:800px;
    }
    #chapitre1-content-3-images{
        margin: 5vh 0;
    }

    #chapitre3-content-2 .chapitre-content-cont {
        top:10%; left:5%; width:90%;
        max-width:600px;
    }
    #chapitre3-content-2 .contenu-chapitre-fin {
        bottom:10vh; left:5%;
        width:90%;
    }



}


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

}


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

    #chapitre2-content-2{
        padding-left:4%;
    }

    #chapitre3-intro-cont{left:10%; width:80%;}
}

@media screen and (max-width: 1200px) {
    #chapitre1-content-2 #chapitre1-content-2-image-1{top: 0; left: 0; width:82%; height:auto;}
    #chapitre1-content-2 #chapitre1-content-2-image-2{top: 16%; right: 0; width:24%; height:auto; border:solid 10px #001e32;}
    #chapitre1-content-2 .chapitre-content-cont{width:70%; right: 24%; top: 37%; padding:20px;}
    #chapitre1-content-2 .contenu-chapitre-fin{bottom:5%; left:0; width:100%; }


    #chapitre2-content-2{
        height:auto;
        padding-left:2%;
    }
    #chapitre2-content-2 .chapitre-content-cont{width:96%;}
    #chapitre2-content-2 .contenu-chapitre-fin{margin-top:50px;margin-bottom:50px;}

    #chapitre2-content-2-video{
        position:relative;
        right:auto; top:auto; transform: initial;
        height:auto; width:100%; z-index: 410;
    }

    #chapitre3-intro-cont{left:10%; width:80%; column-gap:20px;}

}

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

    .contenu-chapitre-fin{font-size:2rem;}
    .tete-chapitre-titre{font-size:1.6rem; letter-spacing: 3px;}
    .tete-chapitre-sstitre{font-size:2.8rem;}

    #intro-texte{font-size:2em;}
    .contenu-chapitre-titre{font-size:2rem;}
    #txt-vous-1, #txt-vous-2, #txt-vous-3 {line-height: 0.9;}

    #chapitre1-intro-cont{right:3%; width:94%; column-gap:20px;}
    #chapitre2-intro-cont{left:3%; width:94%; column-gap:20px;}
    #chapitre3-intro-cont{left:3%; width:94%; column-gap:20px;}

    .barre-piscinagiste{column-gap: 15px;}

    #chapitre1-content-1 .chapitre-content-cont {width:100%; left:0; top:10vh;}
    #chapitre1-content-1 .contenu-chapitre-fin{top:80vh;}
    #chapitre1-content-1 img{height:auto; width:100%; top:50vh; transform: translateY(-50%)}


    #chapitre1-content-2 #chapitre1-content-2-image-1{top: 0; left: 0; width:100%; height:auto;}
    #chapitre1-content-2 #chapitre1-content-2-image-2{top: 16%; right: -13%; width:34%; height:auto; border:solid 6px #001e32;}
    #chapitre1-content-2 .chapitre-content-cont{width:80%; right: 20%; top: 20%; padding:5px;}
    #chapitre1-content-2 .contenu-chapitre-fin{bottom:5%; left:0; width:100%; }



    #chapitre3-content-1-container{flex-direction: column; column-gap:0; row-gap:20px;}
    #chapitre3-content-1 .chapitre-content-cont {
        width:96%;
    }
    #chapitre3-content-1 .contenu-chapitre-fin {
        position: initial;
        width:96%;
        margin-top:5vh;
    }

    #chapitre3-content-1-video{
        height:auto; width:100%;
        opacity:0;
    }

}



@media screen and (max-width: 750px) {
}



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

}