@media all and (min-width: 100px) and (max-width: 767px) {

    @font-face {
        font-family: Helvetica_Neue;
        src: url(Fonts/Helvetica_neue.woff);
    }

    html, body, #legende_fr, #legende_en, #titre, #contact, #contacts, #bio, #langue{
        font-family: Helvetica_Neue;
        overflow: hidden;
    }

    html, body{
        position: absolute;
        margin: 0;
        width: 100vw;
        height: 100%;
        overflow: hidden;
        font-size: 4vw;
    }

    /*EFFET AU SURVOL*/
    #titre:hover,#contact:hover{

    }

    /*VICTOR MAÇON*/
    #titre{
        position: absolute;
        top: 2%;
        z-index: 2000;
        text-align: left;
        left: 4vw;
        color: black;
        cursor: pointer;
    }
    /*BIO*/
    #bio{
        z-index: 3;
        display: none;
        position: absolute;
        margin: 0;
        width: 55vw;
        left: 4vw;
        top: 10%;
    }
    /*CONTACT*/
    #contact{
        position: absolute;
        top: 2%;
        z-index: 3;
        text-align: right;
        right: 4vw;
        color: black;
        cursor: pointer;
    }

    /*NUMERO MAIL ETC*/
    #contacts{
        z-index: 3;
        display: none;
        position: absolute;
        text-align: right;
        margin: 0;
        width: 55vw;
        right: 4vw;
        top: 10%;
    }
    a, a:active, a:visited{
        text-decoration: none;
        color: black;
    }
    /*EN-FR*/
    #langue{
        position: absolute;
        bottom: 6%;
        z-index: 4;
        text-align: left;
        left: 4vw;
        color: black;
    }
    #en, #fr{
        cursor: pointer;
    }
    #fr{
        opacity: 0.5;
    }
    .en{
        display: block;
    }
    .fr{
        display: none;
    }

    /*PHOTOS*/
    #image{
        position: absolute;
        z-index: 1;
        margin: 0;
        top: 8%;
        width: 100vw;
        bottom: 11%;
        -webkit-backface-visibility: hidden;
    }
    /*ZONES CLIQUABLES*/
    #gauche{
        position: absolute;
        height: 80vh;
        top: 20px;
        width: 50vw;
        left: 0px;
        z-index:2;
        opacity: 0.5;
        cursor: w-resize;
    }
    #droite{
        position: absolute;
        height: 80vh;
        top: 20px;
        width: 50vw;
        right: 0px;
        z-index:2;
        opacity: 0.5;
        cursor: e-resize;
    }
    /*LEGENDES*/
    #index_legende{
        position: absolute;
        bottom: 2%;
        z-index: 3;
        width: 60vw;
        text-align: left;
        padding-left: 4vw;
        color: black;
        visibility: hidden;
    }
    #legende_fr,#legende_en{
        position: absolute;
        bottom: 2%;
        z-index: 3;
        text-align: left;
        padding-left: 4vw;
        padding-right: 4vw;
        color: black;
    }
    #legende_fr{
        display: none;
    }

}