html {
    background-color: #F5F5F7;
}

#global {
    height: 0%;
}

.logoKaessa {
    text-align: center;
}
.logoKaessa img {
    width: 12em;
}

/********** MENU DE NAVIGATION **********/
.navBtnWrapper {
    max-width: 41.56em;
    margin-top: 2.2em;
}
.navBtnWrapper .navBtn {
    margin-left: 5em;
    margin-bottom: 1em;
    justify-content: stretch;
}
.navBtnWrapper #demarcheNavBtn p {
    white-space: nowrap;
}
.navBtnWrapper .navBtn a.btn {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex-basis: 104px;
	width: 120px;
    padding: 0;
	text-align: center;
	font-size: 18px;
	font-weight: 300;
	line-height: 1;
	color: #FFF;
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-position: center top;
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}
.navBtnWrapper .navBtn a.btn:hover {
	-webkit-transition: 500ms -webkit-filter linear;
	-moz-transition: 500ms -moz-filter linear;
	-moz-transition: 500ms filter linear;
	-ms-transition: 500ms -ms-filter linear;
	-o-transition: 500ms -o-filter linear;
	transition: 500ms filter linear, 500ms -webkit-filter linear;
	-webkit-filter: none;
	filter: none;
}
.navBtnWrapper #organigrammeNavBtn a.btn { background-image: url('../img/v2/accueil_contact.svg'); }
.navBtnWrapper #organigrammeNavBtn.bientot a.btn { background-image: url('../img/v2/accueil_contact_bientot.svg'); }

.navBtnWrapper #demarcheNavBtn a.btn { background-image: url('../img/v2/accueil_mes_demarches.svg'); }
.navBtnWrapper #demarcheNavBtn.bientot a.btn { background-image: url('../img/v2/accueil_mes_demarches_bientot.svg'); }

.navBtnWrapper #ceNavBtn a.btn { background-image: url('../img/v2/accueil_CSE.svg'); }
.navBtnWrapper #ceNavBtn.bientot a.btn { background-image: url('../img/v2/accueil_CSE_bientot.svg'); }

.navBtnWrapper #chantierNavBtn a.btn { background-image: url('../img/v2/accueil_chantier.svg'); }
.navBtnWrapper #chantierNavBtn.bientot a.btn { background-image: url('../img/v2/accueil_chantier_bientot.svg'); }

.navBtnWrapper #aideFinanciereNavBtn a.btn { background-image: url('../img/v2/accueil_aides_financieres.svg'); }
.navBtnWrapper #aideFinanciereNavBtn.bientot a.btn { background-image: url('../img/v2/accueil_aides_financieres_bientot.svg'); }

.navBtnWrapper #parcMaterielNavBtn a.btn { background-image: url('../img/v2/accueil_parc_materiel.svg'); }
.navBtnWrapper #parcMaterielNavBtn.bientot a.btn { background-image: url('../img/v2/accueil_parc_materiel_bientot.svg'); }

.navBtnWrapper #rhNavBtn a.btn { background-image: url('../img/v2/accueil_RH.svg'); }
.navBtnWrapper #rhNavBtn.bientot a.btn { background-image: url('../img/v2/accueil_rh_bientot.svg'); }

.navBtnWrapper #commerceNavBtn a.btn { background-image: url('../img/v2/accueil_commerce.svg'); }
.navBtnWrapper #commerceNavBtn.bientot a.btn { background-image: url('../img/v2/accueil_commerce_bientot.svg'); }

.navBtnWrapper #espceFormationNavBtn a.btn { background-image: url('../img/v2/accueil_formation.svg'); }
.navBtnWrapper #espceFormationNavBtn.bientot a.btn { background-image: url('../img/v2/accueil_formation_bientot.svg'); }

.navBtnWrapper #interventionNavBtn a.btn { background-image: url('../img/v2/accueil_intervention.svg'); }
.navBtnWrapper #interventionNavBtn.bientot a.btn { background-image: url('../img/v2/accueil_intervention_bientot.svg'); }

.navBtnWrapper .navBtn .textBtn {
    height: 2em;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0.5em 0 0 0;
    text-align: center;
    font-weight: 600;
    color: #42ABFB;
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}
.navBtnWrapper .navBtn:hover .textBtn {
	-webkit-transition: 500ms -webkit-filter linear;
	-moz-transition: 500ms -moz-filter linear;
	-moz-transition: 500ms filter linear;
	-ms-transition: 500ms -ms-filter linear;
	-o-transition: 500ms -o-filter linear;
	transition: 500ms filter linear, 500ms -webkit-filter linear;
	-webkit-filter: none;
	filter: none;
}
/********** END MENU DE NAVIGATION **********/

/********** MOBILE VERSION **********/
@media screen and (max-device-width: 480px) {

    /********** HEADER **********/
    #header {
        flex-direction: column;
        justify-content: center;
    }
    #header .accountBar {
        margin: 1.15em 0 1em 0;
    }
    .accountBar .welcomeW {
        display: none;
    }
    #header .searchMenuBox {
        margin: 0;
        order: 1;
    }
    .searchMenuBox {
        width: 85%;
    }
    .searchMenuBox .taggingBox {
        width: 95%;
    }
    /********** END HEADER **********/

    .logoKaessa img {
        width: 10em;
        margin-top: 1.4em;
    }

    .navBtnWrapper {
        margin-top: 1.4em;
        justify-content: center;
    }
    .navBtnWrapper .navBtn {
        height: 8em;
        margin: 0 1em;
        flex-basis: 8em;
    }
    .navBtnWrapper .navBtn a.btn {
        background-size: 5em;
    }
    .navBtnWrapper .navBtn p.textBtn {
        font-size: 0.875em;
    }
  }
/********** END MOBILE VERSION **********/