@media handheld and (orientation: portrait), (max-width: 1100px) and (orientation: portrait), screen and (device-aspect-ratio: 2/3), screen and (device-aspect-ratio: 40/71), screen and (device-aspect-ratio: 3/4), (orientation: portrait) {
    .menu-titre /* commun pour les titres des palettes de menus */
    {
        display: block;
        position: relative;

        top: 0;
        height: 0;

        width: 100%;
        height: 10vh;

        text-align: center;

        color: #FFF;
        font-family: 'Open_sanslight', Arial, sans-serif;
        font-size: 2vh;
        line-height: 10vh;
        letter-spacing: 1px;

        text-transform: uppercase;

        z-index: 300001;
    }

    .menu-bt /* commun pour les bouton de l'ensemble du menu */
    {

        display: block;
        position: relative;

        height: 4.1vh;
        margin-top: 0.9vh;

        width: 96%;
        left: 2%;

        text-align: center;

        color: #FFF;
        font-family: 'Open_sanslight', Arial, sans-serif;
        font-size: 1.8vh;
        line-height: 4.1vh;
        letter-spacing: 1px;

        text-transform: uppercase;

        background-color: transparent;

        cursor: pointer;

        -webkit-transition: all 0.2s linear;
        -moz-transition: all 0.2s linear;
        -ms-transition: all 0.2s linear;
        -o-transition: all 0.2s linear;
        transition: all 0.2s linear;

    }

    .menu-bt:hover {
        background-color: rgba(255, 255, 255, 0.2);

        -webkit-transition: all 0.2s linear;
        -moz-transition: all 0.2s linear;
        -ms-transition: all 0.2s linear;
        -o-transition: all 0.2s linear;
        transition: all 0.2s linear;
    }

    .menuoff {
        display: block;

        position: fixed;

        width: 100%;
        height: calc(100% - 8vh);

        padding: 0;
        margin: 0;

        left: -100%;
        top: 8vh;

        z-index: 300000;

        background-color: #0B213B;

        -webkit-transition: all 0.4s linear;
        -moz-transition: all 0.4s linear;
        -ms-transition: all 0.4s linear;
        -o-transition: all 0.4s linear;
        transition: all 0.4s linear;

    }

    .menuon {
        display: block;

        position: fixed;

        width: 100%;
        height: calc(100% - 8vh);

        padding: 0;
        margin: 0;

        left: 0;
        top: 8vh;

        z-index: 300000;

        background-color: #0B213B;

        -webkit-transition: all 0.4s linear;
        -moz-transition: all 0.4s linear;
        -ms-transition: all 0.4s linear;
        -o-transition: all 0.4s linear;
        transition: all 0.4s linear;

    }

    .menu-theso-tiroir {
        display: block;

        position: relative;

        top: 0;

        height: 10vh;

        overflow: hidden;

        left: 0;
        width: 100%;

        text-align: center;

        background-color: rgba(29, 69, 108, 0.85);

        z-index: 300000;

        -webkit-transition: all 0.2s linear;
        -moz-transition: all 0.2s linear;
        -ms-transition: all 0.2s linear;
        -o-transition: all 0.2s linear;
        transition: all 0.2s linear;

    }

    .menu-theso-tiroir:hover {
        height: 25vh; /* régler en fonction du noombre de boutons dans la palette (5 vh par bouton + 10 vh pour le titre de la palette) */
        padding-bottom: 1.2vh;

        -webkit-transition: all 0.2s linear;
        -moz-transition: all 0.2s linear;
        -ms-transition: all 0.2s linear;
        -o-transition: all 0.2s linear;
        transition: all 0.2s linear;
    }

    .menu-theso-pointe {
        position: fixed;

        display: none;

    }

    .menu-public-tiroir {
        display: block;

        position: relative;

        top: 0;
        height: 10vh;

        overflow: hidden;

        left: 0;
        width: 100%;

        text-align: center;

        background-color: rgba(144, 171, 73, 0.85);

        z-index: 300000;

        -webkit-transition: all 0.2s linear;
        -moz-transition: all 0.2s linear;
        -ms-transition: all 0.2s linear;
        -o-transition: all 0.2s linear;
        transition: all 0.2s linear;

    }

    .menu-public-tiroir:hover {
        height: 15vh; /* régler en fonction du noombre de boutons dans la palette (4 vh par bouton + 10 vh pour le titre de la palette) */
        padding-bottom: 1.2vh;

        -webkit-transition: all 0.2s linear;
        -moz-transition: all 0.2s linear;
        -ms-transition: all 0.2s linear;
        -o-transition: all 0.2s linear;
        transition: all 0.2s linear;
    }

    .menu-public-pointe {
        display: none;

    }

    .menu-pro-tiroir {
        display: block;

        position: relative;

        top: 0;
        height: 10vh;

        overflow: hidden;

        width: 100%;
        left: 0;

        text-align: center;

        background-color: rgba(66, 125, 111, 0.85);

        z-index: 300000;

        -webkit-transition: all 0.3s linear;
        -moz-transition: all 0.3s linear;
        -ms-transition: all 0.3s linear;
        -o-transition: all 0.3s linear;
        transition: all 0.3s linear;

    }

    .menu-pro-tiroir:hover {
        height: 50vh; /* régler en fonction du noombre de boutons dans la palette (4 vh par bouton + 10 vh pour le titre de la palette) */
        padding-bottom: 1.2vh;

        -webkit-transition: all 0.3s linear;
        -moz-transition: all 0.3s linear;
        -ms-transition: all 0.3s linear;
        -o-transition: all 0.3s linear;
        transition: all 0.3s linear;
    }

    .menu-pro-pointe {
        display: block;

    }

    .menu-etsad-tiroir {
        display: none;
    }

    .menu-etsad-tiroir:hover {
        display: none;
    }

    .menu-etsad-pointe {
        display: none;
    }

    .login-text {
        top: 11vh;
    }

    .login-input {
        width: calc(100% - 10vh);
        text-align: center;
        margin: 1vh;
    }

    #login-form {
        margin-top: 20vh;
    }
}