@media only screen and (orientation:landscape) {

    #bandeau {
        position: fixed;
        width: 135px;
        height: 100vh;
        background: white;
        box-shadow: 8px 0px 10px rgba(0, 0, 0, .1);
        z-index: 10;
    }

    #logo {
        position: absolute;
        top: 18px;
        left: 12%;
        width: 75%;
        cursor: pointer;
    }

    #logoAnime {
        position: absolute;
        top: 15px;
        left: 12.8%;
        width: 73%;
        opacity: 0;
        cursor: pointer;
        display: block
    }

    #logoAnime:hover {
        opacity: 1;
    }

    #logoTypo {
        position: absolute;
        top: 50%;
        margin-top: -72%;
        left: -46%;
        width: 190%;
        transform: rotate(-90deg);
        cursor: pointer;
        transition: opacity .5s;
        -webkit-transition: opacity .5s;
    }

    #boutonMobile {
        display: none;
    }

    #croix {
        display: none;
    }

    #liens {
        position: absolute;
        width: 100%;
        bottom: 1%;
    }

    .lien {
        position: relative;
        margin-top: 0;
        margin-bottom: 12%;
        width: 100%;
        font-family: Apfel Regular;
        font-size: 20px;
        text-align: center;
        transition: opacity .3s;
        -webkit-transition: opacity .3s;
    }

    .lien:hover {
        opacity: .4;
    }

    #liensMobile {
        display: none;
    }

    a {
        text-decoration: none;
        color: black;
    }

    .etoile {
        position: relative;
        margin-top: -4%;
        margin-bottom: 2%;
        left: 50%;
        margin-left: -7%;
        width: 14%;
    }
}

@media only screen and (orientation:portrait) {

    #bandeau {
        position: fixed;
        width: 100vw;
        height: 20vw;
        background: white;
        box-shadow: 0px 8px 10px rgba(0, 0, 0, .1);
        z-index: 10;
    }

    #logo {
        position: absolute;
        top: 11%;
        left: 3%;
        height: 75%;
        cursor: pointer;
    }

    #logoAnime {
        position: absolute;
        top: 15px;
        left: 12.8%;
        width: 73%;
        opacity: 0;
        cursor: pointer;
        display: none;
    }

    #logoTypo {
        position: absolute;
        width: 42vw;
        top: 11%;
        left: 50%;
        margin-left: -21vw;
        cursor: pointer;
        -webkit-transition: opacity .5s;
        transition: opacity .5s;
    }

    #boutonMobile {
        position: absolute;
        top: 34%;
        right: 6%;
        height: 29%;
        opacity: 1;
        -webkit-transition: -webkit-transform .8s ease-out, opacity .1s linear;
        transition: transform .8s ease-out, opacity .1s linear;
        cursor: pointer;
        display: block;
    }

    #croix {
        position: absolute;
        top: 31%;
        right: 6.5%;
        height: 35%;
        opacity: 0;
        -webkit-transition: -webkit-transform .8s ease-out, opacity .1s linear;
        transition: transform .8s ease-out, opacity .1s linear;
        cursor: pointer;
        display: block;
    }

    #liens {
        display: none;
    }

    #liensMobile {
        position: absolute;
        top: 100%;
        height: 100vh;
        width: 100%;
        padding-top: 10vh;
        background: white;
        display: none;
        opacity: 0;
        -webkit-transition: opacity .3s linear;
        transition: opacity .3s linear;
    }

    .lien {
        position: relative;
        margin-top: 0;
        margin-bottom: 9vh;
        width: 100%;
        font-family: Apfel Fett;
        font-size: 110px;
        text-align: center;
        -webkit-transition: opacity .3s;
        transition: opacity .3s;
    }

    .lien:hover {
        opacity: .4;
    }

    a {
        text-decoration: none;
        color: black;
    }

    .etoile {
        position: relative;
        margin-top: -6vh;
        margin-bottom: 2vh;
        left: 50vw;
        margin-left: -2.25vh;
        width: 4.5vh;
    }
}