@font-face {
    font-family: 'Bebas';
    src: url('fonts/bebas.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Futura';
    src: url('fonts/futura.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

ul,li,h1,h2,h3,p{
    margin: 0;
    padding: 0;
    font-weight: normal;
}

body{
    margin: 0;
    padding: 0;
    font-family: 'Futura';
    color: #2F3D86;
}

li{
    list-style-type: none;
}

#navigationHaut{
    top: 0;
    z-index: 99;
    position: fixed;
    width: 100%;
    background: url('img/bg-header.png') no-repeat -3.55vw center;
    background-size: 105%;
    color: #FFFFFF;
    font-family: 'Bebas';
    display: flex;
    justify-content: center;
    border-bottom: 0.15vw solid #FFFFFF;
}

#navigationHaut ul{
    width: 90%;
    margin-left: -1.8%;
    display: flex;
    flex-flow: row;
    justify-content: center;
}

#navigationHaut ul a{
    color: #FFFFFF;
    text-decoration: none;
    height: 3.97vw;
    display: flex;
    align-items: center;
    transition: 0.2s;
    padding-left: 3vw;
    padding-right: 3vw;
    font-size: 1.2vw;
    text-shadow: 0px 0px 15px rgba(0,0,0,0.5);
}

#navigationHaut ul a:hover{
    background-color: rgba(241,90,125,0.5);
}

#navigationHaut ul a.logo:hover{
    background-color: transparent;
}

#navigationHaut img{
    height: 3.5vw;
}

#aLaUne{
    margin-top: 4vw;
    display: flex;
    flex-flow: wrap;
    border-left: 0.30vw solid #FFFFFF;
    border-right: 0.30vw solid #FFFFFF;
    border-top: 0.20vw solid #FFFFFF;
    box-sizing: border-box;
}

#aLaUne>div{
    width: 33.3333333%;
    height: 19.8vw;
    display: flex;
    align-items: flex-end;
    cursor: pointer;
}

#aLaUne .spaceballs{
    background: url('img/titres/spaceballs/bg.png') no-repeat center center;
    background-size: 100%;
    transition: 0.2s;
    border-left: 0.30vw solid #FFFFFF; border-right: 0.30vw solid #FFFFFF; box-sizing: border-box;
}

#aLaUne .spaceballs:hover{
    background: url('img/titres/spaceballs/bg.png') no-repeat center center;
    background-size: 105%;
    transition: 0.2s;
}

#aLaUne .jeepers{
    background: url('img/titres/jeepers-creepers/bg.png') no-repeat center center;
    background-size: 100%;
    transition: 0.2s;
    box-sizing: border-box;
}

#aLaUne .jeepers:hover{
    background: url('img/titres/jeepers-creepers/bg.png') no-repeat center center;
    background-size: 105%;
    transition: 0.2s;
}

#aLaUne .retour{
    background: url('img/titres/retourmorts/bg.png') no-repeat center center;
    background-size: 100%;
    transition: 0.2s;
    box-sizing: border-box;
}

#aLaUne .retour:hover{
    background: url('img/titres/retourmorts/bg.png') no-repeat center center;
    background-size: 105%;
    transition: 0.2s;
}

#aLaUne .belle{
    background: url('img/titres/belleenfant/bg.png') no-repeat center center;
    background-size: 100%;
    transition: 0.2s;
    box-sizing: border-box;
}

#aLaUne .belle:hover{
    background: url('img/titres/belleenfant/bg.png') no-repeat center center;
    background-size: 105%;
    transition: 0.2s;
}

#aLaUne .pack3, #aLaUne .pack2{
    background: url('img/titres/packs/bg.png') no-repeat center center;
    background-size: cover;
    transition: 0.2s;
}

#aLaUne .pack3:hover, #aLaUne .pack2:hover{
    background: url('img/titres/packs/bg.png') no-repeat center center;
    background-size: cover;
    transition: 0.2s;
}

.unePrez{
    position: relative;
    display: flex;
    width: 100%;
    background-color: rgba(39,39,39,0.6);
    color: #FFFFFF;
    padding: 2vw;
    flex-flow: row;
    height: 40%;
    box-sizing: border-box;
}

.unePrez .jaquette img{
    height: 13.5vw;
    margin-top: -70%;
    margin-right: 2vw;
}

.unePrez .textes{
    width: 100%;
    position: relative;
}

.unePrez h1{
    position: absolute;
    width: 100%;
    top: -30%;
    font-family: Bebas;
    font-size: 1.6vw;
    text-shadow: 0px 0px 5px rgba(0,0,0,0.2);
}

.pack2 .unePrez, .pack3 .unePrez{
    position: relative;
    display: flex;
    flex-flow: column!important;
    align-items: center;
    width: 100%;
    background-color: rgba(39,39,39,0.6);
    color: #FFFFFF;
    padding: 2vw;
    flex-flow: row;
    height: 40%;
    box-sizing: border-box;
}


.pack2 .jaquette, .pack3 .jaquette{
    margin-top: -0%;
}

.pack2 .textes, .pack3 .textes{
    margin-top: -30.5%;
    text-align: center;
}


#aLaUne .pack3 .jaquette img, #aLaUne .pack2 .jaquette img{
    height: 12vw;
    margin-top: -70%;
    margin-right: 0vw;
}

.unePrez p{
    position: absolute;
    top: 75%;
    font-size: 1vw;
    color: #FFFFFF;
}

.pack3 .unePrez p, .pack2 .unePrez p{
    position: absolute;
    width: 100%;
    margin-top: 32%;
    font-size: 1vw;
    color: #FFFFFF;
    text-align: center;
}

.promo{
    font-size: 0.8vw;
}

.unePrez a{
    position: absolute;
    right: -1vw;
    bottom: -1vw;
    text-transform: uppercase;
    background-color: #FFFFFF;
    color: #F15A7D;
    text-decoration: none;
    padding: 0.5vw;
    font-size: 0.5vw;
    text-shadow: 0px 0px 0px rgba(0,0,0,0.2);
}

.unePrez a.dvd{
    position: absolute;
    right: 7vw!important;
    bottom: -1vw;
    text-transform: uppercase;
    background-color: #FFFFFF;
    color: #F15A7D;
    text-decoration: none;
    padding: 0.5vw;
    font-size: 0.5vw;
    text-shadow: 0px 0px 0px rgba(0,0,0,0.2);
}

.pack3 a, .pack2 a{
    position: absolute;
    right: 18.6vw;
    bottom: -17.80vw;
    text-transform: uppercase;
    background-color: #FFFFFF;
    color: #F15A7D;
    text-decoration: none;
    padding: 0.5vw;
    font-size: 0.5vw;
    text-shadow: 0px 0px 0px rgba(0,0,0,0.2);
}


.bloc{
    margin-top: 0.1vw;
    display: flex;
    flex-flow: column;
    align-items: center;
    padding-left: 5vw;
    padding-right: 5vw;
    padding-top: 4vw;
    padding-bottom: 2.6vw;
}

.bloc-cta{
    margin-top: 0.1vw;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    padding: 1vw;
    text-align: center;
    font-family: Bebas;
    font-size: 1.5vw;
    background: #1A1A1A;
    transition: 0.2s;
    width: 100%;
    height: 90.9%;
}

.bloc-cta:hover{
    background-color: #2F3D86;
    cursor: pointer;
}

.bloc-cta a{
    text-decoration: none;
    color: #FFFFFF;
}

.bloc-cta img{
    height: 1.5vw;
    margin-left: 1vw;
    margin-top: 2vw;
    transition: 0.2s;
}

.bloc-cta:hover img{
    margin-left: 2vw;
}

.bloc h1{
    font-family: Bebas;
    margin-top: -2vw!important;
    margin-bottom: 1.5vw!important;
    font-size: 1.6vw;
}

.lisere-rose{
    background-color: #F15A7D;
    height: 0.11vw;
    width: 8%;
    margin-bottom: 2vw;
}

.bloc p{
    font-size: 1.1vw;
}

.bg-rose{
    background-color: #F15A7D;
    color: #FFFFFF;
}

.bg-bleu{
    background-color: #2F3D86;
    color: #FFFFFF;
}

.bg-chaine{
    background: url('img/bg-yt.png') no-repeat center center;
    background-size: cover;
    color: #FFFFFF;
}

.list-yt{
    width: 100%;
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
}

.list-yt img{
    height: 10vw;
    border: 0.2vw solid #FFFFFF;
    transition: 0.2s;
}

.list-yt img:hover{
    border: 0.2vw solid #F15A7D;
}

.list-peoples{
    display: flex;
    width: 100%;
    flex-flow: wrap;
    justify-content: space-around;
    align-items: center;
}

.list-peoples li{
    margin-top: 2vw;
    width: 20%;
    display: flex;
    flex-flow: column;
    align-items: center;
    font-family: Bebas;
    font-size: 1.3vw;
}

.list-peoples li img{
    border-radius: 100%;
    width: 40%;
    margin-bottom: 1vw;
}

.list-peoples li div{
    font-size: 1vw;
}


.cta{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F15A7D;
    font-family: Bebas;
    padding-top: 1vw;
    padding-bottom: 0.9vw;
    padding-left: 2vw;
    padding-right: 2vw;
    font-size: 1.3vw;
    color: #FFFFFF;
    cursor: pointer;
    transition: 0.2s;
    text-decoration: none;
    margin-top: 2vw;
}

.cta:hover{
    background-color: #FFFFFF;
    color: #F15A7D;
}

.bloc-contact{
    width: 100%;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
}

.bloc-contact>div{
    width: 48%;
}

.bloc-contact textarea{
    width: 100%;
    border: none;
    background-color: #FFFFFF;
    height: 10vw;
    font-family: Futura;
    padding: 1vw;
    box-sizing: border-box;
    font-size: 1vw;
    color: #2F3D86;
}

.list-networks a{
    display: flex;
    margin-bottom: 1vw;
    width: 100%;
    justify-content: center;
    align-items: center;
    height: 2vw;
    background-color: #FFFFFF;
    color: #2F3D86;
    font-family: Bebas;
    text-decoration: none;
    font-size: 0.9vw;
}

#loading{
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    background-color: #2F3D86;
    z-index: 99;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}

#loading img{
    width: 10%;
}

#loading p{
    color: #FFFFFF;
    font-family: Bebas;
    font-size: 0.8vw;
}

.pack2{
    width: 50%!important; border-top: 0.30vw solid #FFFFFF!important; border-right: 0.15vw solid #FFFFFF!important; box-sizing: border-box!important
}

.pack3{
    width: 50%!important; border-top: 0.30vw solid #FFFFFF!important; border-left: 0.15vw solid #FFFFFF!important; box-sizing: border-box!important
}

.belle{
    width: 50%!important; border-top: 0.30vw solid #FFFFFF!important; border-right: 0.15vw solid #FFFFFF!important; box-sizing: border-box!important
}

#navigationHautMobile{
    display: none;
}

#navigationMobileMenu{
    display: none;
}

@media only screen and (max-width: 1024px)
{
    .bloc h1{
        font-size: 4vw;
    }

    .bloc p{
        font-size: 3vw;
    }

    .cta{
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #F15A7D;
        font-family: Bebas;
        padding-top: 1vw;
        padding-bottom: 0.9vw;
        padding-left: 2vw;
        padding-right: 2vw;
        font-size: 3vw;
        color: #FFFFFF;
        cursor: pointer;
        transition: 0.2s;
        text-decoration: none;
        margin-top: 2vw;
    }

    #aLaUne{
        margin-top: 15.8vw;
        display: flex;
        flex-flow: wrap;
        border-left: 0.30vw solid #FFFFFF;
        border-right: 0.30vw solid #FFFFFF;
        border-top: 0.20vw solid #FFFFFF;
        box-sizing: border-box;
    }

    #aLaUne>div{
        width: 100%;
        height: 30vw;
        display: flex;
        align-items: flex-end;
        cursor: pointer;
        border-top: 0.30vw solid #FFFFFF;
    }

    .unePrez .jaquette img{
        height: 25vw;
        margin-top: -80%;
        margin-right: 2vw;
    }

    .unePrez h1{
        position: absolute;
        width: 100%;
        top: -11%;
        font-family: Bebas;
        font-size: 3.5vw;
        text-shadow: 0px 0px 5px rgba(0,0,0,0.2);
    }

    .pack2, .belle{
        width: 100%!important; border-top: 0.30vw solid #FFFFFF!important; border-right: 0.15vw solid #FFFFFF!important; box-sizing: border-box!important
    }

    .pack3{
        width: 100%!important; border-top: 0.30vw solid #FFFFFF!important; border-left: 0.15vw solid #FFFFFF!important; box-sizing: border-box!important
    }

    .pack2 .textes, .pack3 .textes{
        margin-top: -27.5%;
        text-align: left;
    }

    #aLaUne .pack3 .jaquette img, #aLaUne .pack2 .jaquette img{
        height: 20vw;
        margin-top: -40%!important;
        margin-right: 30vw;
    }

    .unePrez p{
        position: absolute;
        top: 55%;
        font-size: 2.5vw;
        color: #FFFFFF;
    }

    .pack2 .jaquette, .pack3 .jaquette{
        margin-top: 5%;
    }

    .unePrez a{
        position: absolute;
        right: -1vw;
        bottom: -1vw;
        text-transform: uppercase;
        background-color: #FFFFFF;
        color: #F15A7D;
        text-decoration: none;
        padding: 0.9vw;
        font-size: 2vw!important;
        text-shadow: 0px 0px 0px rgba(0,0,0,0.2);
    }
    
    .unePrez a.dvd{
        position: absolute;
        right: -1vw!important;
        bottom: 4vw!important;
        text-transform: uppercase;
        background-color: #FFFFFF;
        color: #F15A7D;
        text-decoration: none;
        padding: 0.9vw;
        font-size: 2vw!important;
        text-shadow: 0px 0px 0px rgba(0,0,0,0.2);
    }

    .pack3 a, .pack2 a{
        position: absolute;
        right: -1vw;
        bottom: -26.80vw;
        text-transform: uppercase;
        background-color: #FFFFFF;
        color: #F15A7D;
        text-decoration: none;
        padding: 0.9vw;
        font-size: 2vw!important;
        text-shadow: 0px 0px 0px rgba(0,0,0,0.2);
    }

    .pack3 .unePrez p, .pack2 .unePrez p{
        position: absolute;
        top: -30vw;
        width: 100%;
        margin-top: 32%;
        font-size: 3vw;
        color: #FFFFFF;
        text-align: right;
    }

    .promo{
        font-size: 2vw;
    }

    .list-peoples li{
        margin-top: 3vw;
        width: 50%;
        display: flex;
        flex-flow: column;
        align-items: center;
        font-family: Bebas;
        font-size: 3.3vw;
    }

    .list-peoples li img{
        border-radius: 100%;
        width: 40%;
        margin-bottom: 1vw;
    }

    .list-peoples li div{
        font-size: 3vw;
    }

    .list-yt{
        width: 100%;
        display: flex;
        flex-flow: wrap;
        justify-content: space-around;
    }

    .list-yt img{
        height: 15vw;
        border: 0.2vw solid #FFFFFF;
        transition: 0.2s;
        margin-bottom: 2.5vw;
    }

    .bloc-contact{
        width: 100%;
        display: flex;
        flex-flow: column;
        justify-content: space-between;
    }

    .bloc-contact>div{
        width: 100%;
    }

    .bloc-contact textarea{
        width: 100%;
        border: none;
        background-color: #FFFFFF;
        height: 20vw;
        font-family: Futura;
        padding: 1vw;
        box-sizing: border-box;
        font-size: 3vw;
        color: #2F3D86;
    }

    .list-networks{
        margin-top: 3vw;
    }

    .list-networks a{
        display: flex;
        margin-bottom: 1vw;
        width: 100%;
        justify-content: center;
        align-items: center;
        height: 4vw;
        background-color: #FFFFFF;
        color: #2F3D86;
        font-family: Bebas;
        text-decoration: none;
        font-size: 3vw;
    }

    #loading{
        position: fixed;
        width: 100%;
        height: 100vh;
        top: 0;
        background-color: #2F3D86;
        z-index: 99;
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
    }

    #loading img{
        width: 30%;
    }

    #loading p{
        color: #FFFFFF;
        font-family: Bebas;
        font-size: 3vw;
    }

    #navigationHaut{
        display: none;
        top: 0;
        z-index: 99;
        position: fixed;
        width: 100%;
        background: url('img/bg-header.png') no-repeat -3.55vw center;
        background-size: auto 100%;
        color: #FFFFFF;
        font-family: 'Bebas';
        justify-content: center;
        border-bottom: 0.15vw solid #FFFFFF;
    }

    #navigationHaut ul{
        width: 90%;
        margin-left: -1.8%;
        display: flex;
        flex-flow: row;
        justify-content: center;
    }

    #navigationHaut ul a{
        color: #FFFFFF;
        text-decoration: none;
        height: 10vw;
        display: flex;
        align-items: center;
        transition: 0.2s;
        padding-left: 3vw;
        padding-right: 3vw;
        font-size: 3vw;
        text-shadow: 0px 0px 15px rgba(0,0,0,0.5);
    }

    #navigationHaut ul a:hover{
        background-color: rgba(241,90,125,0.5);
    }

    #navigationHautMobile ul a.logo:hover{
        background-color: transparent;
    }

    #navigationHautMobile img{
        height: 15vw;
    }

    #navigationHautMobile{
        display: flex;
        top: 0;
        z-index: 99;
        position: fixed;
        width: 100%;
        background: url('img/bg-header.png') no-repeat -66vw center;
        background-size: auto 100%;
        color: #FFFFFF;
        font-family: 'Bebas';
        justify-content: center;
        border-bottom: 0.15vw solid #FFFFFF;
    }

    #menuMobile{
        color: #FFFFFF;
        position: absolute;
        right: 4.5vw;
        top: 4.5vw;
        font-size: 6vw;
    }

    #menuMobileClose{
        color: #FFFFFF;
        position: absolute;
        right: 4.5vw;
        top: 4.5vw;
        font-size: 6vw;
    }

    #navigationMobileMenu{
        display: none;
        position: fixed;
        width: 100%;
        height: 100vh;
        top: 0;
        left: 0;
        background-color: #2F3D86;
        z-index: 99;
    }

    #navigationMobileMenu ul{
        padding: 3vw;
        display: flex;
        flex-flow: column;
        justify-content: center;
    }

    #navigationMobileMenu ul a{
        color: #FFFFFF;
        text-decoration: none;
        height: 10vw;
        display: flex;
        align-items: center;
        transition: 0.2s;
        padding-left: 3vw;
        padding-right: 3vw;
        font-size: 5vw;
        text-transform: uppercase;
        font-family: Bebas;
        text-shadow: 0px 0px 15px rgba(0,0,0,0.5);
    }
}