/* ---------------------------------------------*/
/* --- HEADER --- */
/* ---------------------------------------------*/

.header {
    position: fixed;

    left: 0;
    width: 100%;

    top: 0;
    height: 8vh;

    text-align: center;

    z-index: 400010;

}

.logo {
    position: absolute;

    height: 60%;
    top: 20%;

    width: 100%;
    left: 0;

    text-align: center;

}

.menu-titre /* commun pour les titres des palettes de menus */
{
    display: block;

    position: relative;

    top: 0;
    height: 0;

    width: 100%;
    height: 4vh;

    text-align: center;

    color: #FFF;
    font-family: 'Open_sanslight', Arial, sans-serif;
    font-size: 2vh;
    line-height: 4vh;
    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: 3.1vh;
    margin-top: 0.9vh;

    width: 92%;
    left: 4%;

    text-align: center;

    color: #FFF;
    font-family: 'Open_sanslight', Arial, sans-serif;
    font-size: 1.8vh;
    line-height: 3.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;
}

.menu-conteneur-responsive {
    display: block;

    position: absolute;

    width: 100%;
    height: auto;

    padding: 0;
    margin: 0;

    left: 0;
    top: 8vh;

    z-index: 300000;

    background-color: #0B213B;

}

.menuon, .menuoff {
    display: block;
}

.menu-theso-tiroir {
    display: block;

    position: fixed;

    top: 8vh;
    height: 4vh;

    overflow: hidden;

    left: 0;
    width: 50%;

    text-align: center;

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

    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: 16vh; /* régler en fonction du nombre de boutons dans la palette (4 vh par bouton + 4 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: block;

    top: 12vh;

    width: 2%;
    left: 24%;

    z-index: 299999;

}

.menu-public-tiroir {
    display: block;

    position: fixed;

    top: 8vh;
    height: 4vh;

    overflow: hidden;

    left: 23%;
    width: 23%;

    text-align: center;

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

    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: 8vh; /* régler en fonction du nombre de boutons dans la palette (4 vh par bouton + 4 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 {
    position: fixed;

    display: block;

    top: 12vh;

    width: 2%;
    left: 33.5%;

    z-index: 299999;

}

.menu-pro-tiroir {
    display: block;

    position: fixed;

    top: 8vh;
    height: 4vh;

    overflow: hidden;

    width: 50%;
    left: 50%;

    text-align: center;

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

    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: 8vh; /* régler en fonction du nombre de boutons dans la palette (4 vh par bouton + 4 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 {
    position: fixed;

    display: block;

    top: 12vh;

    width: 2%;
    left: 74%;

    z-index: 299999;

}

.menu-etsad-tiroir {
    display: block;

    position: fixed;

    top: 8vh;
    height: 4vh;

    overflow: hidden;

    width: 14%;
    left: 86%;

    text-align: center;

    background-color: rgba(80, 150, 167, 0.95);

    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-etsad-tiroir:hover {
    height: 8vh; /* régler en fonction du nombre de boutons dans la palette (4 vh par bouton + 4 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-etsad-pointe {
    position: fixed;

    display: block;

    top: 12vh;

    width: 2%;
    left: 92%;

    z-index: 299999;

}

/* ---------------------------------------------*/
/* --- LOGIN --- */
/* ---------------------------------------------*/

.login-text {
    top: 5vh;
    position: absolute;
    left: calc(50% - 19vh);
    text-transform: none;
    font-size: 3vh;
}

.login-inscription {
    position: absolute;
    left: 2vh;
    bottom: 2vh;
}

.login-mdp-oublie {
    position: absolute;
    right: 2vh;
    bottom: 2vh;
}

.login-lien {
    font-size: 1.7vh !important;
    color: #FFF !important;
}

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

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

.login-btn {
    border-width: 0;
    padding: 1vh 4vh;
    font-size: 2vh;
    letter-spacing: 0.1vh;
    font-weight: bold;
    opacity: 1;
    margin-top: 0.3vh;
}

.deco-btn {
    border: 0;
    margin-top: 4vh;
    font-size: 2vh;
    letter-spacing: 0.1vh;
    font-weight: bold;
}

.part-pro-btn {
    border-width: 0;
    padding: 1vh 4vh;
    font-size: 2vh;
    letter-spacing: 0.1vh;
    font-weight: bold;
    opacity: 1;
    position: absolute;
}

.part-btn {
    top: 40%;
    left: 31%;
}

.pro-btn {
    top: 54%;
    left: 24%;
}