@font-face {
    font-family: futura-bold;
    src: url(https://www.marieclaire.fr/tropheesellesdefrance/assets/fonts/Futura-Bol.otf);
}

@font-face {
    font-family: futura-Lig;
    src: url(https://www.marieclaire.fr/tropheesellesdefrance/assets/fonts/Futura-Lig.otf);
}
@font-face {
    font-family: futura-Boo;
    src: url(https://www.marieclaire.fr/tropheesellesdefrance/assets/fonts/Futura-Boo.otf);
}

@font-face {
    font-family: futura-BooObl;
    src: url(https://www.marieclaire.fr/tropheesellesdefrance/assets/fonts/Futura-BooObl.otf);
}

@font-face {
    font-family: futura-Dem;
    src: url(https://www.marieclaire.fr/tropheesellesdefrance/assets/fonts/Futura-Dem.otf);
}

@font-face {
    font-family: futura-Med;
    src: url(https://www.marieclaire.fr/tropheesellesdefrance/assets/fonts/Futura-Med.otf);
}

.BodyContent{
    width: inherit;
}
*.bold,h1,h2,h3,h4,h5{
    font-family: futura-bold;
}

p{
    font-family: futura-Lig;
    font-size: 19.2px;
}

p.boo, h3.boo{
    font-family: futura-Boo;
}

p.ligh, h3.ligh{
    font-family: futura-Lig;
}


.bodyContent{
    background-color: #faf7f7;
}

::-webkit-scrollbar {
    width: 0;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
    display: none;
}

/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background: #FF0000;
}

::-webkit-scrollbar-thumb{
    background: inherit;
}


body{
    background: #FAF7F7;
}

.text-container {
    position: relative;
    overflow: hidden;
}

/*.carousel-item:nth-of-type(5){*/
/*    background: yellow;*/
/*    color: yellow;*/
/*}*/

#container-text::after {
    /*content: '';*/
    /*position: absolute;*/
    /*left: 0px;*/
    /*right: 0px;*/
    /*height: 50%;*/
    /*bottom: 0px;*/
    /*background: linear-gradient(180deg, rgba(139,167,32,0) 0%, rgba(255,255,255,1) 100%);*/
    /*pointer-events: none;*/
}

.container-fluid{
    padding-left: 0;
    padding-right: 0;
}


.upper{
    text-transform: uppercase;
}

.bold{
    font-weight: bold;
}

.dd-none{
    display: none;
}

.dd-block{
    display: block!important;
}
.overflow-y-scroll-h{
    overflow-y: scroll;
}

#block1 #container-text{
    /*height: 57vh;*/
    height: 77vh;
    overflow-y: scroll;
}

#block1 h5{
    font-size: 19.2px;
}
#block1 #bloc-visu-move{
    position: relative;
    /*margin-left: 2rem;*/
}

#intro-header #logo{
    margin-left: 6%;
}

.block-message{
    margin-bottom: 5rem;
}

.h-62{
    /*height: 62%!important;*/
    height: 56%!important;
}

#block1 .align-self-end img{
    width: 100%;
    margin-left: 5rem;
    margin-bottom: 5rem;
}

#carrousel-4 .h-62{
    height: 48%!important;
}

#block1 #bloc-visu-move #visu-1:hover{
    /*animation: anime-rotation-bloc-visu-move 0.5s linear forwards;*/
}

#block1 #bloc-visu-move #visu-2, #block1 #bloc-visu-move #visu-3{
    position: absolute;
}

#visu-2,#visu-3{
    width: 35%;
}
#bloc-visu-move:hover #visu-1 {
    transform: rotate(-10deg);
    transition: transform 0.4s ease;
}

#bloc-visu-move:hover #visu-2 {
    left: 20%;
    top: 80%;
    transition: all 0.4s ease;
}

#bloc-visu-move:hover #visu-3 {
    left: 88%;
    top: 17%;
    transition: all 0.4s ease;
}

#visu-1{
    width: 60%;
    margin: 0 auto;
    position: relative;
    z-index: 5;
    transition: all .4s ease;
}

#visu-2 , #visu-3 {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: all .4s ease;
}

#block1 #container-text{
    font-size: 1rem;
}

#block1 .block-message{
    /*margin-left: 1rem;*/
}
#block2{
    background-image: url('https://www.marieclaire.fr/tropheesellesdefrance/assets/img/bloc-2/bg.png');
    background-size: 100% 100%;

    padding-bottom: 20vh;
}

#btn-prev:active,#btn-next:active{
    scale: 0.5;
    transition: all .12s linear;
}
#block2 .block-text{
    position: absolute;
    top: 10%;
}
#block2 .title-block-text{
    font-size: 1.6vw;
}

#block2 #slider-cursor{
    position: relative;
    left: -2%;
}

#slider-cursor img {
    transition: all .5s linear;
}

#block2 .carousel{
    color: white;
}
#carouselExampleFade p{
    font-size: 1.2rem;
}


#block2 .carousel h3{
    font-family: futura-med;
}

#block3 #intro-header{
    margin-left: 10%;
    font-size: 1rem;
}

#block3 #logo{
    width: 19%;
}

.container-fluid .menu{
    /*margin-left: 10rem;*/
    /*margin-left: 4rem;*/
    margin-top: 0.5rem;
    border: inherit;
}

.BodyContent{
    padding: 0;
}
.container-fluid .menu div{
    position: relative;
    font-family: futura-BooObl;
    border: 2px solid black;
    border-radius: 36px;
    padding: 0.7rem;
    padding-left: 0.9rem;

    background: white;
    color: black;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    text-transform: uppercase;
    transition: left .3s ease-out;
    left: 0;
    font-size: 16px;


}
.container-fluid .menu:hover div,.container-fluid .menu div.selected{
    background: #ffcf1e;
    color: white;
    left: -1rem;
    transition: left .3s ease-out;
}

#endblock .block-text{
    /*padding-left: 5rem;*/
    padding-left: 3.1rem;
    padding-top: 1.8rem;
    font-size: 1rem;
}

#endblock .overflow-y-scroll-h{
    /*height: 20rem;*/
    height: 73%;
}

#endblock #bg5 .overflow-y-scroll-h{
    height: 20rem;
}
#endblock #name{
    font-size: 30px;
    margin-bottom: 0;
    font-weight: bolder;
}

#endblock #name, #endblock #subtile{
    font-size: 25px;
    /*font-size: 1.3vw;*/
    white-space: nowrap;

    margin-bottom: 0.75rem;
}

#endblock #subtile{
    color: #ffce1f;
    /*font-size: 0.70rem;*/
    font-size: 16px;
}
#endblock .menu div,.container-fluid .menu {
    cursor: pointer;
}
#endblock .bg{
    background-size: contain;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
}

#endblock #bg2 #name{
    white-space: inherit;
    max-width: 150%;
}
#endblock #bg2 .overflow-y-scroll-h{
    height: 68%;
}


#endblock #bg2 #cache-cache{
    /*height: 77%;*/
}
#endblock #bg1{
    background-image: url('https://www.marieclaire.fr/tropheesellesdefrance/assets/img/bloc-3/cards/1_CARD_PRIX_INNOVATION.png');
}

#endblock #bg2{
    background-image: url('https://www.marieclaire.fr/tropheesellesdefrance/assets/img/bloc-3/cards/2_CARD_PRIX_CREATION.png');
}

#endblock #bg3{
    background-image: url('https://www.marieclaire.fr/tropheesellesdefrance/assets/img/bloc-3/cards/3_CARD_PRIX_SOLIDARITE.png');
}

#endblock #bg4{
    background-image: url('https://www.marieclaire.fr/tropheesellesdefrance/assets/img/bloc-3/cards/4_CARD_PRIX_COURAGE.png');
}

#endblock #bg5{
    background-image: url('https://www.marieclaire.fr/tropheesellesdefrance/assets/img/bloc-3/cards/5_CARD_PRIX_SIMONE_VEIL.png');
}
#endblock #bg5 #cache-cache{
    height: 73%;
}

#endblock #cache-cache{
    height: 100%;
    overflow: hidden;
}

.carousel-inner {
    overflow: visible !important;
}

.carousel-item {
    z-index: 10;
}

.carousel-item:not(.active):not(.isLeaving) {
    opacity: 0;
    transform: rotate(90deg) translateY(50vw);
    transform-origin: bottom left;
}

.carousel-item.active {
    opacity: 1;
    transform: rotate(0) translateY(0);
    transform-origin: bottom left;
    transition: all .2s ease;
}

.carousel-item.isLeaving, .bg.isLeaving {
    opacity: 0;
    transform: rotate(-90deg) translateY(-50vw);
    transform-origin: top left;
    transition: all .5s ease;
}


#endblock{
    position: relative;
}
#endblock .bg{
    position: absolute;
    opacity: 1;
}

#endblock #subtile{
    font-family: 'futura-Med';
}
.bg.isLeaving {
    transform: rotate(90deg) translateY(-100vw);
    /*transition: all .100s ease;*/
    transition-duration: 1s;
}

/*todo change this for set by default*/
.bg.return {
    transform: rotate(0deg) translateY(0vw);
    /*transition: all .100s ease;*/
    transition-duration: 1s;
    opacity: 1;
}

.z-index-999{
    z-index: 999!important;
}

/*TODO TMP*/
#bg1{
    z-index: 5
}
#bg2{
    z-index: 4;
}
#bg3{
    z-index: 3;
}
#bg4{
    z-index: 2;
}
#bg5{
    z-index: 1;
}


@keyframes anime-rotation-bloc-visu-move {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-3deg);
    }
}

/*X-Small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {

    #title-img{
        width: 75% !important;
    }
    #bloc-visu-move{
        display: none;
    }
    #block2 .carousel h3, #block2 .carousel p{
        color: black;
    }

    #block3 #intro-header{
        margin-left: 0;
        padding-right: 1.4rem;
    }
    #carouselExampleFade p{
        width: inherit!important;
    }

    #block2 .title-block-text{
        font-size: 4.6vw;
    }

    #block2 .block-text{
        position: initial;
    }

    #block2 .carousel-item img{
        display: none!important;
    }

    .overflow-y-scroll-h{
        overflow: inherit;
    }
    #block1 #container-text{
        height: auto;
        overflow-y: inherit;
        padding-right: 3rem;
    }
    #block2 #carouselExampleFade img{
        opacity: 0;
        height: 80vh;
    }
    #block3 #logo{
        width: 80%;
        margin-top: 2rem;
    }

    #btn-next,#btn-prev{
        transform: scale(3.5);
    }

    #endblock{
        height: 238vh;
    }

    .carousel-inner{
        transition: inherit;
    }

    #endblock #bg1, #endblock #bg2,#endblock #bg3,#endblock #bg4,#endblock #bg5{
        background-image: inherit;
        transition: none;
    }

    #endblock #bg2,#endblock #bg3,#endblock #bg4,#endblock #bg5 {
        /*opacity: 0;*/
        display: none;
    }

    .bg.isLeaving{
        display: none;!important;
    }

    .bg.z-index-999{
        display: block!important;
    }

    #endblock .block-text{
        padding-left: 1rem;
        padding-top: 1rem;
        padding-right: 3rem;
    }

    .carousel-item.active {
        opacity: 1;
        transform: inherit;
        transform-origin: inherit;
        transition: inherit;
    }

    .menu.dd-block{
        width: 16rem;
    }

    /*.isLeaving{*/
    /*    opacity: 0;*/
    /*}*/
    /*#endblock #cache-cache{*/
    /*    height: inherit;*/
    /*}*/

    /*#endblock{*/
    /*    height: 134vh;*/
    /*}*/

    /*#endblock .overflow-y-scroll-h{*/
    /*    overflow: inherit;*/
    /*    height: inherit;*/
    /*}*/

    /*#endblock .block-text.h-100{*/
    /*    height: inherit !important;*/
    /*}*/


    .order-last.block-text, #endblock .overflow-y-scroll-h{
        /*height: 200vh!important;*/
        height: initial!important;
    }

    #endblock #cache-cache{
        /*height: 96%;*/
        height: initial;
        overflow: initial;
    }
}
/*Small devices (landscape phones, less than 768px)*/
@media (max-width: 767.98px) {  }
/*Medium devices (tablets, less than 992px)*/
@media (max-width: 991.98px) {  }
/*Large devices (desktops, less than 1200px)*/
@media (max-width: 1199.98px) {  }
/*// X-Large devices (large desktops, less than 1400px)*/
@media (max-width: 1399.98px) {  }

@media only screen and (max-width: 1532px) {
    #endblock #bg5 .overflow-y-scroll-h {
        height: 17rem;
    }
}

@media only screen and (max-width: 1300px) {
    #endblock #bg5 .overflow-y-scroll-h {
        height: 17rem;
    }

    #endblock #bg2 #name{
        white-space: inherit;
        max-width: 150%;
    }
}