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

    hr{
        display: none;
    }

    .visible{
        display: flex;
    }

    #burger{
        width: 2em;
        position: absolute;
        top: 2em;
        right: 2em;
        z-index: 9999999;
        display: block;
    }
    

    #logo-mobile{
        display: block;
        margin: 1em auto;
        width: 30%;
    }

    .poster.desktop{
        display: none;
    }

    .poster.mobile{
        display: flex;
    }

    nav{
        width: 100%;
        position: fixed;
        left: 0;
        top: 0;
        display: none;
        flex-direction: column;
        height: 100%;
        z-index: 99999;
        background: white;
    }

    nav .logo img{
        width: 5em;
    }

    nav div{
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    nav div a{
        margin-top: 3vh;
    }

    main{
        width: 80%;
        margin: 5vh auto;
    }

    main .poster{
        width: 45%;
    }

    .on-hover{
        opacity: 1;
    }

    /* .hover-informations.on-hover{
        background: none !important;
    } */

    .hover-informations h3,
    .hover-informations .play{
        display: none;
    }

    .hover-informations h2{
        font-size: 0.8em;
    }

    main .poster .hover-informations .btn{
        display: none;
    }

    .hover-informations{
        justify-content: flex-end;
    }

    main .poster .hover-informations{
        height: inherit;
        bottom: 0;
        border-radius: 0 0 1vh 1vh;
    }

    .date{
        width: 30%;
        left: 35%;
    }

    .publication > div{
        width: 100%;
    }

    .publication > img{
        width: 100%;
    }

    .publication .title{
        flex-wrap: wrap;
    }

    .publication .title h1{
        width: 100%;
    }

    #synopsis{
        text-align: justify;
    }

    .publication .btns{
        margin: 2vh 0;
        justify-content: space-evenly
    }

    .informations h3{
        font-size: 1em;
    }

    .informations{
        flex-wrap: wrap;
    }
    .informations #casting{
        width: 100%;
    }

    .publication .btn{
        padding: 1vh;
    }

    .teaser h2{
        font-size: 1.2em;
    }
    .teaser iframe{
        width: 100%;
        height: 25vh;
    }

    section{
        padding: 3% 10%;
        line-height: 1.4em;
    }

    article iframe{
        width: 90%;
    }

    footer{
        margin-top: 20vh;
    }

    footer div{
        width: 80% !important;
    }

    footer div a{
        line-height: 1.5em;
    }

    footer div h4{
        margin-top: 0;
    }

    .teams > div{
        width: 100%;
    }

}