/***********************************************************************/

/**************************** DEFAULT **********************************/

html {
    --bg-color: #58d5b7;
    --bg-color-dark: #40bd9f;
    --bg-color-dark-text: #2c7667;
    --bg-color-green: #e6f9f4;
    --bg-color-santevet: #8ec63f;
    --bg-color-white: #ffffff;
    --bg-color-grey: #eeeeee;
    --bg-color-grey-hover: #e6e6e6;
    --bg-color-medium-grey: #d3d3d3;
    --bg-color-dark-grey: #092f57;
    --bg-color-black: #000000;
    --bg-color-blue: #02223b;
    --bg-color-blue-alpha: rgba(2, 34, 59, .3);
    --bg-color-blue-dark-alpha: rgba(2, 34, 59, .6);
    --bg-color-blue-hover: #184366;
    --bg-color-blue-form: #03223e;
    --bg-color-yellow: #ffb400;
    --bg-color-orange: #ff5400;
    --bg-color-pink: #ffd3e1;
    --bg-color-dark-pink: #ff0054;
    font-family: 'Open Sans', sans-serif;
}
html, body {
    margin: 0px;
    padding: 0px;
    width: 100%;
    /* height: 100%; */
    font-family: 'Open Sans', sans-serif;
    color: #092f57;
}

.color-alert {
    color: #ff5400;
}
.
.labeldefaut {
    font-weight: bold;
}

::selection {
    color: white;
    background-color: #58d5b7;
}
::-moz-selection {
    color: white;
    background-color: #58d5b7;
}

:focus {
    outline: none !important;
}

::-moz-focus-inner {
    border: 0 !important;
}

.font400 {
    /*color: #092f57;*/
    font-weight: 400;
}

.font600 {
    /*color: #092f57;*/
    font-weight: 600;
}

.font700 {
    /*color: #092f57;*/
    font-weight: 700;
}

.nomarge {
    margin: 0px;
    padding: 0px;
}
.nomargin {
    margin: 0!important;
}
.nopadding {
    padding: 0!important;
}
.nolargepadding {
    padding-left: 0!important;
    padding-right: 0!important;
}
.closeleft {
    padding-left: 0px;
    margin-left: 0px;
}

.closeright {
    padding-right: 0px;
    margin-right: 0px;
}

.titlepointer {
    cursor: default;
}

.clearfix {
    clear: both;
    width: 100%;
}
a {
    text-decoration: underline;
    color: #092f57;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Open Sans', sans-serif;
}
h1 {
    color: #092f57;
    font-size: 24px;
    font-weight: bold;
    font-family: 'Open Sans', sans-serif;
}

h2 {
    color: #092f57;
    font-size: 18px;
    font-weight: bold;
    font-family: 'Open Sans', sans-serif;
}

.modal h2 {
    font-size: 30px;
}
.modal h3 {
    margin: 0 0 15px 0;
}
.modal-body p {
    font-size: 14px;
}
.modal-header {
    border-bottom: none;
    overflow: auto;
}
.modal-header .close {
    font-size: 38px;
    color: #58d5b7;
    opacity: 1;
}
.modal-header h3 {
    margin: 0;
    float: left;
    font-weight: bold;
    font-size: 34px;
}
.modal-body h4 {
    font-weight: bold;
}
.right {
    float: right;
}
.left {
    float: left;
}
p {
    color: #092f57;
}

ul, ol {
    margin-top: 0;
    margin-bottom: 0;
}

.blockgris {
    background-color: #eeeeee;
    padding: 25px;
    overflow: auto;
}
.blockgris h3 {
    margin: 0 0 10px 0;
}
.textleft {
    text-align: left;
}

.textright {
    text-align: right;
}

.mission {
    border-left: 6px solid #8ec63f;
    padding: 0 0 0 12px;
    font-size: 18px;
}
.erreur404 {
    font-size: 26px;
    margin: 30px auto;
}
.erreur404 h1 {
    font-size: 60px;
    margin-top: 100px;
}
.erreur404 img {
    margin: 0 auto;
    text-align: center;
    width: 100%;
    height: auto;
}
.erreur404 a {
    text-transform: uppercase;
}
/***********************************************************************/

/***************************** COMMUN **********************************/

.inline-block {
    display: inline-block;
}
span.chained::before {
    content:"k";
    opacity: 0;
}
.cale50 {
    width: 50px;
}
.cale75 {
    width: 75px;
}
.cale100 {
    width: 100px;
}
.fond {
    background-color: rgba(2, 34, 59, .6);
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
}
.lienh3,
.lienh3:hover {
    text-decoration: none;
}
.lienh3 h3 {
    margin-top: 0px;
    font-weight: bold;
    font-size: 14px;
}

/*----------------------------------- BOUTONS ----------------------------------*/
.btn-black {
    background-color:#02223b;
    color: #ffffff;
    /*width: 176px;*/
    /*margin-left: 20px;*/
    margin-right: 20px;
    height: 35px;
    border-radius: 0;
    border: 1px solid black;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
}

.btn-black:hover {
    color: white;
    background-color:#184366 ;
    border: 1px solid #184366;
}


.btn-blanc2 {
    background-color:#fff;
    color: #02223b;
    /*width: 176px;*/
    /*margin-left: 20px;*/
    margin-right: 20px;
    height: 35px;
    border-radius: 0;
    border: 1px solid #02223b;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
}

.btn-blanc2:hover {
    color: #02223b;
    background-color:#fff ;
    border: 1px solid #02223b;
}

.textright .btn-blanc2 {
    margin: 0;
}

.btn-transparent {
    background-color: transparent;
    color: #02223b;
    border: 1px solid #02223b;
    padding: 5px 20px;
    font-weight: bold;
    font-size: 14px;
    line-height: 12px;
    border-radius: 0px;
    text-decoration: none;
    text-transform: uppercase;
}

.btn-transparent:hover {
    color: white;
    background-color: #02223b;
    border: 1px solid #02223b;
}

.btn-blanc {
    background-color: #ffffff;
    color: #02223b;
    border: 1px solid #03223e;
    padding: 5px 8px;
    font-weight: 700;
    font-size: 14px;
    line-height: 12px;
    border-radius: 0px;
    text-decoration: none;
    text-transform: uppercase;
}
.btn-blanc:hover {
    color: #ffffff;
    background-color: #03223e;
}
.label-blanc,
.label-blanc:active {
    background-color: #ffffff;
    color: #02223b;
    border: 1px solid #03223e;
    padding: 5px 20px;
    font-weight: 700;
    font-size: 14px;
    line-height: 12px;
    border-radius: 0px;
    cursor: default;
    box-shadow: none;
}

.btn-bleu {
    background-color: #03223e;
    color: #ffffff;
    border: 1px solid #03223e;
    padding: 5px 20px;
    font-weight: 700;
    font-size: 14px;
    line-height: 12px;
    border-radius: 0px;
    text-decoration: none;
}
.btn-bleu:hover {
    color: #03223e;
    background-color: #ffffff;
}
.label-bleu,
.label-bleu:active {
    background-color: #03223e;
    color: #ffffff;
    border: 1px solid #03223e;
    padding: 5px 20px;
    font-weight: 700;
    font-size: 14px;
    line-height: 12px;
    border-radius: 0px;
    cursor: default;
    box-shadow: none;
}


/*--------------------------------- FIN BOUTONS --------------------------------*/

/* ------------------------- NAV TABS (ONGLETS BOOTSTRAP) --------------------- */
.nav-tabs {
    border: none;
}
.nav-tabs .onglet {
    margin: 0px;
    padding: 0px;
    border: none;
}
.nav-tabs > li > a {
    border-radius: 0px;
    color: #02223b;
    height: 40px;
    line-height: 40px;
    padding: 0px 10px!important;
    font-weight: bold;
    font-size: 14px;
    text-decoration: none;
    display: inline-block;
}
.nav-tabs > li > a:hover {
    background-color: #58d5b7;
    border: none;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    background-color: #ff5400;
    cursor: default;
    border: none;
    color: white;
}

.active #ongletparams .picto-profilMobile-parametres {
    display: none;
    visibility: hidden;
}

.active #ongletparams .picto-profilMobile-parametres-blanc {
    display: block;
    visibility: visible;
    float: left;
    margin: 10px 0 0 2px;
}

.nav-tabs > li:not(.active) > a + br + img {
    display: none;
}
.nav-tabs > li.active > a + br + img {
    display: block;
    margin: auto;
}
.tab-pane {
    margin: 20px 0px!important;
}
/* ----------------------- FIN NAV TABS (ONGLETS BOOTSTRAP) ------------------- */

/* ----------------------- TAB CONTENT (ONGLETS BOOTSTRAP) -------------------- */
.tab-content {
    padding-top: 0px;
    margin: 20px 0;
}
/* --------------------- FIN TAB CONTENT (ONGLETS BOOTSTRAP) ------------------ */


/* -------------------------------- FORMULAIRES ------------------------------- */

.form-control {
    background-color: #ffffff;
    color: #02223b;
    border: 1px solid #02223b!important;
    width: 95%;
    height: 30px;
    padding-left: 10px;
    display: block;
    margin: auto;
    margin-bottom: 5px;
    border-radius: 0;
}

#evenement_date_date,
#evenement_date_time{
    width: 100%;
    margin: 0;
    overflow: auto;
}
#evenement_date_date select,
#evenement_date_time select{
    background-color: #ffffff;
    color: #02223b;
    border: 1px solid #02223b!important;
    width: 29%;
    float: left;
    height: 30px;
    padding-left: 10px;
    display: block;
    margin: 0 5px 5px 0;
    border-radius: 0;
}

#evenement_date {
    height: inherit;
    padding: 0;
    border: none !important;
    background: transparent;
}


/* ------------------------------ FIN FORMULAIRES ----------------------------- */

/* -------------------------------- AFFICHAGE --------------------------------- */
.page {
    padding: 0px;
    margin: 0px;
}
.lienspan {
    text-decoration: none;
}
.encart {
    padding: 0px;
    margin: 20px 0px;
    text-align: left;
}
.strut {
    width: 0px;
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}
.strut-bottom {
    width: 0px;
    height: 100%;
    display: inline-block;
    vertical-align: bottom;
}
.medaille {
    border-radius: 50%;
    cursor: pointer;
}

@media(max-width:767px) {
    /*--------------------------- AFFICHAGE ---------------------------*/
    .page {
        padding-top: 35px;
        margin: 0px 20px;
    }
    /*------------------------- FIN AFFICHAGE -------------------------*/
}

/* ------------------------------ FIN AFFICHAGE ------------------------------- */

/*//////////////////////////////////////////////////////////////////////////////*/
/********************************************************************************/

/************************************ LOGIN *************************************/
#bodyLogin {
    background-color: #58d5b7;
}
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #eeeeee inset;
}

::-webkit-input-placeholder {
    font-style: italic;
}

:-moz-placeholder {
    font-style: italic;
}

::-moz-placeholder {
    font-style: italic;
}

:-ms-input-placeholder {
    font-style: italic;
}

#section1 {
    padding-top: 40px;
}

#logoLogin {
    text-align: center;
}

#section2 {
    padding-top: 45px;
}

#formLogin {
    background-color: #ffffff;
    max-width: 490px;
    padding: 20px;
    margin: auto;
}
/*--- A cause de DataTables ---*/
#formLogin {
    float: none;
}

/*--- A cause de DataTables ---*/

#connectContent,
#labelRecup,
#ChangeEmailContent {
    color: #092f57;
    font-size: 18px;
    text-align: center;
}

#connectContent > b {
    font-weight: 700;
}

#layoutLogin .form-horizontal {
    padding-top: 40px;
    margin: 0;
    /*background-color: blue;*/
}


#layoutLogin .form-group > label {
    /*background-color: pink;*/
    height: 38px;
    line-height: 38px;
    font-size: 16px;
}
#layoutLogin .form-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-right: 10px;
}




#lastinput {
    margin-bottom: 7px;
}

#remember_me {
    margin-left: 5px;
}

#remember {
    position: relative;
    top: -5px;
}

#section3 {
    margin-top: 5px;
}

#logoPartenaireLogin {
    background-color: #ffffff;
    max-width: 490px;
    padding: 20px 50px;
    margin: auto;
    overflow: hidden;
}

.logoheight {
    height: 52px;
    line-height: 52px;
}

#footerLogin {
    max-width: 490px;
    padding-top: 10px;
    padding-bottom: 20px;
    margin: auto;
    /*--- A cause de DataTables ---*/
    float: none;
    /*--- A cause de DataTables ---*/
}

#submitLogin,
#submitReset {
    margin-right: 0px;
}

#change_email_valider {
    margin-top: 10px;
    margin-right: 0px;
}

#formChangeEmail {
    margin-top: 40px;
    text-align: center;
}


@media(max-width:767px) {
    /*----------------------------- LOGIN -----------------------------*/
    #connectContent {
        padding-top: 10px;
    }
    #section1,
    #section2,
    #labelRecup {
        padding-top: 20px;
    }
    #formLogin,
    #logoPartenaireLogin {
        width: 90%;
        padding: 20px;
    }

    .logoheight {
        width: 100%;
        padding: 0px;
        height: inherit;
        line-height: inherit;
    }
    .logoheight + div {
        width: 65%;
        padding-left: 0px;
    }
    #formChangeEmail {
        margin-top: 20px;
    }
    #layoutLogin .col-xs-2 {
        width: 35%!important;
        padding-right: 0px;
        text-align: right;
    }
    #layoutLogin .closeleft {
        padding-left: 15px!important;
    }
    #remember_me {
        margin-left: 2%;
    }
    #envoiPasse button {
        margin: 0px;
    }
    #layoutLogin .form-horizontal {
        padding-top: 20px;
    }
    #labelRecup {
        padding-top: 10px;
    }
    /*--------------------------- FIN LOGIN ---------------------------*/
}
@media(max-width:400px) {
    /*----------------------------- LOGIN -----------------------------*/
    #logoLogin img {
        width: 70%;
    }
    #envoiPasse .btn-black {
        font-size: 13px;
    }
    /*--------------------------- FIN LOGIN ---------------------------*/
}

/*///////////////////////////////////////////////////////////////////////////*/
/*****************************************************************************/

/********************************** LAYOUT ***********************************/
/* Colorisation de la grille */
/*
#logo {
    background-color: lightblue;
}
#search {
    background-color: yellowgreen;
}
#partenairesDeconnexion {
    background-color: crimson;
}
#corpsSite {
    background-color: #ffb400;
}
#colonneLeft {
    background-color: #ff5400;
}
#corpsMainMenu {
    background-color: pink;
}
*/


#corpsSite {
    width: 100%;
    padding-top: 103px;
}
#placeContent {
    padding: 0px;
    margin: 0px;
}
#content {
    padding-left: 25px !important;
}
#recalage {
    height: 40px;
    display: none;
}
@media(max-width:767px) {
    /*----------------------------- LAYOUT ------------------------------*/
    #content {
        padding-left: 0 !important;
        margin-top:20px;
    }
    /*--------------------------- FIN LAYOUT ----------------------------*/
}

/*///////////////////////////////////////////////////////////////////////////*/
/*****************************************************************************/

/********************************** HEADER ***********************************/

header {
    background-color: #58d5b7;
    width: 100%;
    height: 83px;
    position: fixed;
    z-index: 100;
}

#headerFixed {
    background-color: #58d5b7;
    color: #ffffff;
    height: 83px;
    padding: 0px;
    /*border-bottom: 1px solid rgba(2, 34, 59, .3);*/
    -moz-box-shadow: 0 0 10px #02223b;
    -webkit-box-shadow: 0 0 10px #02223b;
    box-shadow: 0 0 10px #02223b;
}
#logo {
    padding: 0px 20px 0px 0px;
}
#logoheader::before,
#btn-annuaire::before,
#autocomplete::before,
#btn-partenaires::before,
#btn-deconnexion::before {
    content: "";
    width: 0;
    height: 83px;
    display: inline-block;
    vertical-align: middle;
}
#logoheader,
#btn-annuaire,
#autocomplete,
#btn-partenaires,
#btn-deconnexion {
    display: inline-block;
    vertical-align: middle;
}
#btn-deconnexion  > span {
    position: relative;
    top: 5px;
}
.btn-header {
    color: #ffffff;
    padding: 0 20px 0 15px;
    font-size: 18px;
    font-weight: bold;
}
.btn-header:hover {
    background-color: #02223b;
    cursor: pointer;
}

/*--------------------------------- Menu Burger --------------------------------*/

/* btn */

.menuBurger {
    position: relative;
    top: 12px;
    display: inline-block;
    width: 30px;
    height: 30px;
    margin-right: 10px;
}

.menuBurger span {
    margin: 0 auto;
    position: relative;
    top: 10px;
}

.menuBurger span:before, .menuBurger span:after {
    position: absolute;
    content: '';
}

.menuBurger span, .menuBurger span:before, .menuBurger span:after {
    background-color: #ffffff;
    width: 30px;
    height: 4px;
    border-radius: 2px;
    display: block;
}

.menuBurger span:before {
    margin-top: -10px;
}

.menuBurger span:after {
    margin-top: 10px;
}

/* --- Fin btn --- */

/* example 5 */

.example5 span {
    -webkit-transition-duration: 0s;
    transition-duration: 0s;
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
}

.example5.fermer span {
    background-color: rgba(0, 0, 0, 0.0);
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
}

.example5 span:before {
    -webkit-transition-property: margin, -webkit-transform;
    transition-property: margin, transform;
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -webkit-transition-delay: 0.2s, 0s;
    transition-delay: 0.2s, 0s;
}

.example5.fermer span:before {
    margin-top: 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition-delay: 0s, 0.2s;
    transition-delay: 0s, 0.2s;
}

.example5 span:after {
    -webkit-transition-property: margin, -webkit-transform;
    transition-property: margin, transform;
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -webkit-transition-delay: 0.2s, 0s;
    transition-delay: 0.2s, 0s;
}

.example5.fermer span:after {
    margin-top: 0;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transition-delay: 0s, 0.2s;
    transition-delay: 0s, 0.2s;
}

/* Fin example 5 */

/*------------------------------- Fin Menu Burger ------------------------------*/

/*-------------------------------- Quick Search --------------------------------*/
#searchCol {
    /*padding: 0px 0px 0px 20px;*/
    padding: 0px;
}
#autocomplete {
    display: inline-block;
    width: 100%;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #2c7667;
    font-style: italic;
}
::-moz-placeholder { /* Firefox 19+ */
    color: #2c7667;
    font-style: italic;
}
:-ms-input-placeholder { /* IE 10+ */
    color: #2c7667!important;
    font-style: italic!important;
}
::-ms-input-placeholder { /* Edge */
    color: #2c7667;
    font-style: italic;
}
:-moz-placeholder { /* Firefox 18- */
    color: #2c7667;
    font-style: italic;
}
::placeholder { /* CSS Working Draft */
    color: #2c7667;
    font-style: italic;
}

#quickSearchForm {
    margin: 0px;
}
#autocomplete::after {
    content: "XX";
    background: url(../images/pictogrammes/LOUPE_verte.png) no-repeat;
    color: transparent;
    background-size: 25px;
    font-size: 21px;
    position: relative;
    left: -14px;
    top: 5px;
    z-index: 2;
}
#quickSearch {
    background-color: #9CE6D7;
    color: #2c7667;
    border-radius: 25px;
    border: none;
    width: 95%;
    height: 46px;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    padding-left: 25px;
    padding-right: 50px;
    outline: 0;
    position: relative;
    margin-right: -30px;
}

#ui-id-1,
#ui-id-2 {
    position: relative;
    z-index: 999;
    background-color: #e6f9f4;
    color: #02223b;
    width: 300px;
    max-height: 600px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0px;
}
#ui-id-1 li.ui-menu-item,
#ui-id-2 li.ui-menu-item {
    overflow: hidden;
}
#ui-id-1 .ui-menu-item-wrapper,
#ui-id-2 .ui-menu-item-wrapper {
    background-color: #e6f9f4;
    border: none!important;
    color: #02223b;
    padding: 5px 10px;
    cursor: pointer;
}
#ui-id-1 .ui-menu-item-wrapper:hover,
#ui-id-2 .ui-menu-item-wrapper:hover {
    background-color: #ff5400;
    color: #ffffff;
}
#partenairesDeconnexion {
    font-size: 0;
    padding: 0px 0px 0px 20px;
}
/*------------------------------ Fin Quick Search ------------------------------*/

/*-------------------------------MENU ANNUAIRE-----------------------------*/
#corpsMainMenu {
    background-color: #58d5b7;
    width: 100%;
    display: none;
}
#mainMenu {
    background-color: #58d5b7;
    height: 100vh;
    padding-top: 30px;
    padding-left: 0px;
    padding-right: 0px;
    z-index: 99;
}

.blockLogoMenu > div.col-sm-3 a {
    background: #fff;
    font-size: 12px;
}
.blockLogoMenu {
    padding: 0px;
    margin-top: 15px;
}
.listeEcoleHeader {
    display: block;
    position: relative;
}
.listeEcoleHeader .img-responsive {
    padding: 10px 0;
}

.listeEcoleHeader .caption {
    background-color: #40bd9f;
    position: absolute;
    width: 100%;
    height: 10%;
    font-size: 0px;
    opacity: 0;
    -webkit-transition: all ease .3s;
    -moz-transition: all ease .3s;
    transition: all ease .3s;
    z-index: 2;
    border-right: 1px solid #32ad90;
}
.listeEcoleHeader.ecoleMenuActive .caption,
.listeEcoleHeader:hover .caption{
    background-color: #02223c;
}
.blockLogoMenu > div:last-child .listeEcoleHeader .caption {
    border-right: none;
}
.listeEcoleHeader:hover .caption,
.listeEcoleHeader.ecoleMenuActive .caption {
    height: 100%;
    opacity: 1;
}

.listeEcoleHeader .caption > span {
    color: #ffffff;
    font-size: 14px;
    display: inline-block;
    vertical-align: middle;
}

.flecheNoire {
    width: 10%;
    height: auto;
}

.blockEcoleMenu {
    margin-top: 50px;
    padding: 0px;
}

.blockEcoleMenu a {
    text-decoration: none;
    text-transform: uppercase;
    font-size: 22px;
    font-weight: 600;
    color: #ffffff;
}

.genre {
    color: #ffffff;
    margin-top: 0px;
    margin-bottom: 20px;
    cursor: default;
}
.genre > div {
    display: inline-block;
}
.genre > div:hover {
    color: #02223b;
    cursor: pointer;
}

.blocListeAnnuaireMenu {
    background-color: #40bd9f;
    padding-top: 0px;
    padding-bottom: 15px;
    margin: 0px 0px 30px 0px;
}

.blocListeAnnuaireMenu > img {
    margin-bottom: 10px;
    vertical-align: top;
}

.blocListeAnnuaireMenu a div {
    color: #02223b;
    font-size: 18px;
    font-weight: normal;
    cursor: default;
    font-family: 'Open Sans', sans-serif;
}
.blocListeAnnuaireMenu a div div {
    display: inline-block;
}
.blocListeAnnuaireMenu a div div:hover {
    color: #ffffff;
    cursor: pointer;
}

/*------------------------------- FIN MENU ANNUAIRE-----------------------------*/
@media(max-width:1199px) {
    /*-------------------------- MENU HEADER --------------------------*/
    .btn-header {
        font-size: 16px;
    }
    .menuBurger {
        top: 4px;
        width: 25px;
        height: 25px;
    }
    .menuBurger span, .menuBurger span:before, .menuBurger span:after {
        width: 25px;
        height: 3px;
    }
    .menuBurger span:before {
        margin-top: -9px;
    }

    .menuBurger span:after {
        margin-top: 9px;
    }

    ::-webkit-input-placeholder {/* Chrome, Safari, Opera */
        font-size: 14px;
    }
    ::-moz-placeholder {/* Firefox */
        font-size: 14px;
    }
    :-ms-input-placeholder {/* IE10–11 */
        font-size: 14px!important;
    }
    ::-ms-input-placeholder {/* Edge */
        font-size: 14px;
    }
    ::placeholder {/* CSS Working Draft */
        font-size: 14px;
    }

    /*------------------------ FIN MENU HEADER ------------------------*/
    /*----------------------- SOUS MENU HEADER ------------------------*/
    .listeEcoleHeader .caption > span {
        font-size: 14px;
    }
    /*--------------------- FIN SOUS MENU HEADER ----------------------*/
}
@media(max-width:991px) {
    /*-------------------------- MENU HEADER --------------------------*/
    #header {
        /*background-color: mediumpurple;*/
    }
    #logoheader img {
        width: 160px;
    }
    .btn-header {
        font-size: 12px;
    }
    .menuBurger {
        top: 4px;
        width: 20px;
        height: 20px;
    }
    .menuBurger span, .menuBurger span:before, .menuBurger span:after {
        width: 20px;
        height: 3px;
    }
    .menuBurger span:before {
        margin-top: -7px;
    }

    .menuBurger span:after {
        margin-top: 7px;
    }

    #partenairesDeconnexion {
        padding: 0px 0px 0px 5px;
    }
    .btn-deconnexion > span {
        top: 0px;
    }
    /*------------------------ FIN MENU HEADER ------------------------*/
    /*----------------------- SOUS MENU HEADER ------------------------*/
    .listeEcoleHeader .caption > span {
        font-size: 14px;
    }
    .blockLogoMenu {
        padding: 0px;
        width: 100%;
        margin: 0;
    }
    .blockEcoleMenu {
        margin: 50px 0 0 0;
        padding: 0px;
        width: 100%;
    }
    /*--------------------- FIN SOUS MENU HEADER ----------------------*/
}

/*------------------------- MENU HEADER XS ------------------------*/
#conteneurHeaderMobile {
    background-color: #58d5b7;
    padding: 10px 0px 0px 0px;
    margin: 0px;
    position: relative;
    top: -30px;
}
/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
#headerRechercheMobile {
    background-color: #58d5b7;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 110;
    height: 70px;
    display: none;
}

#btnRetourMobile {
    text-align: center;
}
#btnRetourMobile:hover {
    background-color: #02223b;
    cursor: pointer;
}
#menuRetourMobile {
    display: inline-block;
    vertical-align: middle;
}

#btnRetourMobile .glyphicon {
    color: white;
    font-size: 35px;
}
#quickSearchMobile {
    padding: 5px 10px;
}
#quickSearchMobileDiv {
    text-align: center;
}
#quicksearchMobileDivForm {
    width: 98%;
    height: 100%;
    display: inline-block;
}
#quicksearchMobileDivForm form {
    padding: 0px;
    margin: 0px;
}
#quicksearchMobileDivForm input {
    width: 98%;
    display: inline-block;
    vertical-align: middle;
}
#loupeRechercheMobile {
    background-color: #ff5400;
    text-align: center;
}
#loupeRechercheMobile:hover {
    cursor: pointer;
}
#menuLoupeRechercheMobile {
    display: inline-block;
    vertical-align: middle;
}
/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
#headerMobile {
    background-color: #58d5b7;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 100;
    width: 100%;
    height: 71px;
}
#btnHeaderMobile {
    text-align: center;
}
#btnHeaderMobile:hover {
    background-color: #02223b;
    cursor: pointer;
}
#menuBurgerMobile {
    display: inline-block;
    vertical-align: middle;
}
#btnHeaderMobile .glyphicon-menu-hamburger:before {
    content: "\e236";
}
#btnHeaderMobile .glyphicon {
    color: white;
    font-size: 35px;
}
#header-logo-mobile {
    text-align: center;
}
#menuLogoMobile {
    display: inline-block;
    vertical-align: middle;
}
#header-logo-mobile img {
    height: 53px;
}

#loupeMobile {
    text-align: center;
}
#loupeMobile:hover {
    background-color: #02223b;
    cursor: pointer;
}
#menuLoupeMobile {
    display: inline-block;
    vertical-align: middle;
}
#mainMenuMobile {
    background-color: #58d5b7;
    z-index: 99;
    position: absolute;
    top: 70px;
    right: 0;
    height: 100vh;
}

/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

@media(max-width:767px) {
    /*-------------------------- MENU HEADER --------------------------*/

    /*--------------------------------- Menu Burger --------------------------------*/

    /* btn */

    .menuBurger {
        position: relative;
        top: 6px;
        display: inline-block;
        width: 40px;
        height: 40px;
        margin-right: 2px;
    }

    .menuBurger span {
        margin: 0 auto;
        position: relative;
        top: 10px;
    }

    .menuBurger span:before, .menuBurger span:after {
        position: absolute;
        content: '';
    }

    .menuBurger span, .menuBurger span:before, .menuBurger span:after {
        background-color: #ffffff;
        width: 30px;
        height: 4px;
        border-radius: 4px;
        display: block;
    }

    .menuBurger span:before {
        margin-top: -12px;
    }

    .menuBurger span:after {
        margin-top: 12px;
    }

    /* --- Fin btn --- */

    /*------------------------------- Fin Menu Burger ------------------------------*/
    #retour {
        position: relative;
        left: -4px;
        margin-top: 10px;
    }
    #headerMobile {
        padding: 0px;
        margin: 0px;
    }
    #mainMenuMobile .caption > span {
        font-size: 18px!important;
        color: #02223b;
    }
    .listeEcoleHeader {
        min-height: 40px;
        margin-bottom: 10px;
    }
    .blockLogoMenu > div {
        width: 25%;
        margin: 0;
        padding: 0;
    }
    #mainMenuMobile {
        height: 100vh;
        margin: 0;
        padding: 0 0 50px 0;
        overflow: auto;
    }
    .blockEcoleMenu {
        margin: 0;
        padding: 0;
        overflow-x: scroll !important;
        height: inherit;
        left: 0;
        top: 30px;
        z-index: 1;
    }
    .listeEcoleHeader .img-responsive {
        display: none;
    }
    .listeEcoleHeader .caption {
        opacity: 1;
        height: 40px;
    }
    .listeEcoleHeader.ecoleMenuActive .caption {
        background-color: #02213b;
    }
    #mainMenuMobile .ecoleMenuActive .caption > span {
        color: #fff;
    }
    #mainMenuMobile .flecheNoire {
        visibility: hidden;
    }
    #mainMenuMobile .ecoleMenuActive .flecheNoire {
        visibility: visible;
    }
    .listeEcoleHeader {
        margin: 0;
    }
    header {
        height: 65px;
    }
    .dropdown.actuopt {
        float: left;
        margin: 15px 15px 0;
    }
    .actuopt .dropdown-menu {
        float: left !important;
        left:0 !important;
    }
    body .dropdown-menu:before {
        left: 9px !important;
        right: auto;
    }
    body .dropdown-menu:after {
        left: 10px !important;
        right: auto;
    }
    #listeActualites .actuhead img {
        margin: 0 auto;
    }
    /*------------------------ FIN MENU HEADER ------------------------*/
}
@media(max-width:600px) {
    /*-------------------------- MENU HEADER --------------------------*/
    #mainMenuMobile .caption > span {
        font-size: 16px!important;
    }
    /*------------------------ FIN MENU HEADER ------------------------*/
}
@media(max-width:550px) {
    /*-------------------------- MENU HEADER --------------------------*/

    .blockLogoMenu > div {
        padding: 0px;
    }
    #mainMenuMobile .ersatz {
        position: relative;
        background-color: #40bd9f!important;
        color: #02223b;
        font-size: 14px !important;
        line-height: 50px;
        width: 90px!important;
        height: 50px;
    }
    #mainMenuMobile .caption > span {
        font-size: 14px!important;
    }
    #mainMenuMobile .flecheNoire {
        width: 15%;
        height: auto;
    }
    #btnHeaderMobile {
        padding-left: 10px;
        padding-right: 10px;
    }
    /*------------------------ FIN MENU HEADER ------------------------*/
}
@media(max-width:490px) {
    /*-------------------------- MENU HEADER --------------------------*/
    #header-logo-mobile {
        padding: 0px;
    }
    .xs8.col-xs-8 {
        display:inline-block;
    }
    .xs2.col-xs-2 {
        display:inline-block;
    }
    #loupeMobile:hover {
        background: none;
    }
    #headerRechercheMobile {
        padding: 23px;
    }
    /*------------------------ FIN MENU HEADER ------------------------*/
}
@media(max-width:400px) {
    /*-------------------------- MENU HEADER --------------------------*/

    .xs2.col-xs-2 {
        padding: 0px;
    }
    #mainMenuMobile .ersatz {
        width: 65px!important;
        font-size: 11px!important;
    }
    #mainMenuMobile .caption > span {
        font-size: 12px !important;
    }
    #btnHeaderMobile {
        padding: 0px;
    }
    #header-logo-mobile {
        width: 65%;
    }

    /*------------------------ FIN MENU HEADER ------------------------*/
}
@media(max-width:350px) {
    /*-------------------------- MENU HEADER --------------------------*/
    #header-logo-mobile img {
        width: 150px;
        height: auto;
    }
    #quicksearchMobileDivForm {
        font-size: 14px;
    }
    /*------------------------ FIN MENU HEADER ------------------------*/
}


/*----------------------- FIN MENU HEADER XS ----------------------*/

/*///////////////////////////////////////////////////////////////////////////*/
/*****************************************************************************/

/******************************** BLOCK ADMIN ********************************/

#blocAdmin {
    background-color: #ffb400;
    color: #02223b;
    /*margin-left: 20px;*/
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 25px;
    display: block;
    text-align: center;
}

#blocAdmin div {
    display: inline-block;
    vertical-align: middle;
}
#blocAdmin span.picto {
    margin-right: 30px;
}
#blocAdmin a {
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 1px;
    margin-right: 10px;
}
#blocAdmin a:hover {
    color: #fff;
}

#blocAdmin a:focus, #blocAdmin a:hover {
    text-decoration: none;
}
#blocAdmin .picto-admin-blanc {
    width: 37px;
}

#inscriptions .not{
    padding-top: 15px;
}
@media(max-width:767px) {
    /*-------------------------- MENU ADMIN ---------------------------*/
    #blocAdminMobile {
        background-color: #ffb400;
        color: #02223b;
    }
    /*------------------------ FIN MENU ADMIN -------------------------*/
}


/*-------------------------- ADMIN AJOUT ETUDIANTS VIA EXCEL ---------------------------*/
#formImportExcelAjoutEtudiants input, #formImportExcelAjoutEtudiants button, #formImportExcelAjoutEtudiants select {
    margin-top: 4%;
}
#formImportExcelAjoutEtudiants form {
    width: 60%;
    margin: 5% 15%;
}
#formImportExcelAjoutEtudiants form .item-form {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
#formImportExcelAjoutEtudiants form .item-form .form-control {
    width: 60%;
    margin: 0;
    border: none !important;
}
#contentTemplateAjoutEtudiantsExcel .alert {
    margin-top: 2.5%;
    display: none;
}
#contentTemplateAjoutEtudiantsExcel .alert > h4 {
    margin: 0;
}
#lienRetour {
    width: 30%;
    margin-left: 35%;
    padding: 7px;
    margin-top: 2.5%;
    display: none;
}
#loader {
    display: none;
}
/*------------------------ FIN ADMIN AJOUT ETUDIANTS VIA EXCEL -------------------------*/

/***********************************************************************/

/*************************** COLONNE des MENUS LEFT ********************/
#colonneLeft {
    position: relative;
    width: 272.5px;
}
#colonneMenuLeft {
    width: 100%;

}
@media(max-width:1199px) {
    /*------------------------- COLONNE LEFT --------------------------*/
    #blocAdmin span.picto,
    #blocAdmin a {
        margin-right: 0px;
        font-size: 14px;
    }
    #blocAdmin span.picto {
        margin-left: -5px;
    }
    #colonneLeft {
        /*background-color: var(--bg-color-olive);*/
        width: 222.5px;
    }
    /*----------------------- FIN COLONNE LEFT ------------------------*/
}
@media(max-width:991px) {
    /*------------------------- COLONNE LEFT --------------------------*/
    #blocAdmin span.picto {
        margin-bottom: 5px;
    }
    #colonneLeft {
        /*background-color: var(--bg-color-olive);*/
        width: 167.5px;
    }
    #feedBackText {
        padding-left: 10px!important;
        font-size: 13px!important;
    }
    /*----------------------- FIN COLONNE LEFT ------------------------*/
}
/*-------------------------------- Menu Left -------------------------------------*/
#blockMenu {
    background-color: #02223b;
}

#blockMenu a {
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
}
#blockMenu a:focus, #blockMenu a:hover {
    text-decoration: none;
}

#blockMenu .level2:hover {
    background-color: #184366;
}

.menuLeftOpen {
    background-color: #58d5b7;
}

.level1,
.nolevel1 {
    margin-bottom: 0px;
    line-height: 24px;
    clear: both;
}

#menuLeft a:not(.menuLeftActive) .level1:hover {
    background-color: #184366;
}

.level1 span.picto,
.nolevel1 span.picto {
    margin: 10px 5px 0px 10px;
}

.level1 div,
.nolevel1 div {
    position: relative;
    top: -5px;
    display: inline-block;
}

.level1 span.glyphicon,
.nolevel1 span.glyphicon {
    font-size: 16px;
    margin-right: 10px;
    margin-top: 12px;
    float: right;
}

.menuLeftActive div {
    background-color: #58d5b7;
}

.sousMenuLeftOpen {
    background-color: #e6f9f4;
    color: #02223b;
    font-weight: bold;
}

.level12 {
    padding-left: 60px;
    clear: both;
}

.level12:hover {
    background-color: #e6f9f4;
    color: #02223b;
    font-weight: bold;
}

.level12 div {
    display: inline-block;
    margin: 0px;
}

.level12 .glyphicon {
    font-size: 16px;
    margin-right: 10px;
    margin-top: 1px;
    float: right;
}

.menuLeftActive2 div {
    background-color: #e6f9f4;
    color: #02223b;
    font-weight: bold;
}

.submenu {
    padding-left: 60px;
}

.level2 {
    padding-left: 80px;
}

.submenu:hover {
    background-color: #184366;
}

.sousMenuLeftActive div {
    background-color: #184366;
}


/*-------------------------- MENU LEFT XS -------------------------*/

#menuLeftMobile {
    clear: both;
    background-color: #02223b;
    color: white;
    height: 46px;
    top: 71px;
    left: 0px;
    padding-left: 0px;
    padding-right: 0px;
    font-size: 25px;
    position: fixed;
    z-index: 98;
}
#menuLeftMobile a {
    color: white;
    padding: 0;
    margin: 0;
    text-decoration: none;
    font-size: 16px;
}
#menuLeftMobile a
#menuLeftMobile span.glyphicon-chevron-down,
#menuLeftMobile span.glyphicon-chevron-up {
    position: relative;
    top: -10px;
    margin-left: 2px;
    font-size: 12px;
}
.menuLeftMobile {
    background-color: #02223b;
    height: 100%;
    padding: 7px 0px;
}
.menuLeftMobile a:hover .picto-menuLeft-profil,
.menuLeftMobileActive .picto-menuLeft-profil {
    background-image: url("../images/pictogrammes/iconesMenuLeft/profil-vert.png");
}
.menuLeftMobile a:hover .picto-menuLeft-actu,
.menuLeftMobileActive .picto-menuLeft-actu {
    background-image: url("../images/pictogrammes/iconesMenuLeft/actu-verte.png");
}
.menuLeftMobile a:hover .glyphicon,
.menuLeftMobileActive .glyphicon {
    color: #58d5b7;
}
.menuLeftMobile a:hover .picto-menuLeft-etoile,
.menuLeftMobile a:focus .picto-menuLeft-etoile {
    background-image: url("../images/pictogrammes/iconesMenuLeft/etoile-verte.png");
    cursor: pointer;
}
#menuLeftMobile .popover {
    border-radius: 0px;
    background-color: #eeeeee;
    z-index: 130;
    width: 200px;
}
#menuLeftMobile .popover.bottom .arrow:after {
    border-bottom-color: #eeeeee;
}
#menuLeftMobile .popover-title {
    background-color: transparent;
    color:  #092f57;
}
#menuLeftMobile .popover-content {
    background-color: transparent;
    color:  #092f57;
    font-size: 12px;
}
.menuLeftMobile a:hover .picto-menuLeft-off {
    background-image: url("../images/pictogrammes/iconesMenuLeft/off-vert.png");
}
.menuLeftMobileActive {

}

#listeEcoleMobile {
    background-color: #ffffff;
    position: fixed;
    z-index: 97;
    top: 116px;
    left: 0px;
    height: 46px;
    padding: 0px;
    overflow: hidden;
    display: none;
}
#listeEcoleMobile a {
    color: #184366;
    padding: 0px;
    margin: 0px;
    text-decoration: none;
}
#listeEcoleMobile a > div {
    padding: 10px 15px;
    width: inherit;
}
#listeEcoleMobile a > div:hover {
    background-color: #eeeeee;
}



@media(max-width:350px) {
    /*--------------------- SOUS MENU ACTU ECOLES ---------------------*/
    #listeEcoleMobile a:last-child > div {
        font-size: 12px;
        height: 40px;
        line-height: 20px;
    }
    /*------------------- FIN SOUS MENU ACTU ECOLES -------------------*/
}
/*------------------------ FIN MENU LEFT XS -----------------------*/

/*------------------------------ Jeu concours -----------------------------------*/
#jeuconcours {
    background: url(../images/autre/affiche-jeuconcours.jpg) no-repeat;
    background-size: contain;
    height: 315px;
    margin: 20px 0 0 0;
    position: relative;
}
#jeuconcours .cta {
    position: absolute;
    bottom: 15px;
    left: 0;
    right: 0;
    text-align: center;
}
.modal-header h3.titrejeuconcours {
    font-weight: bold;
    font-size: 23px;
    text-transform: uppercase;
    width: 90%;
    padding-bottom: 20px;
    border-bottom: 1px solid #58d5b7;
}




/*------------------------------ Fin Menu Left -----------------------------------*/
/*------------------------------ Menu FeedBack -----------------------------------*/
#blockFeedBack {
    background-color: #eeeeee;
    margin-top: 25px;
}

#feedBackText {
    padding-left: 20px;
    padding-top: 20px;
    font-size: 16px;
}
/*---------------------------- FIN Menu FeedBack ---------------------------------*/

/***********************************************************************/

/***************************** CONTACT *******************************/

#formulaireContact {
    background-color: #eeeeee;
    padding: 20px;
}
#contact_titre {
    width: 100%;
}
#contact_contenu {/* textarea */
    width: 100%;
    height: 40%;
}

/***********************************************************************/

/***************************** ADMIN *******************************/
#recalageAdmin {
    height: 0px;
}
#tabadmin {
    background-color: #ffffff;
    padding: 0px 0px 20px 0px;
}

#admin .nav-tabs {
    background-color: #ffffff;
    /*margin-bottom: 40px;*/
    overflow-x: auto;
    overflow-y: hidden;
    text-align: center;
    margin: 0 auto;
    width: fit-content;
}
#admin .menunav {
    border-bottom: 1px solid #ccd3d8;
}
#tabadmin .tab-content {;
    padding-bottom: 10px;
}
#admin .tab-content div {
    text-align: left;
}
.phrasesnoncf {
    width: 100%;
    margin: 20px 0 40px 0;
}
#admin .nav-tabs li,
#tabclub .nav-tabs li {
    background-color: #ffffff;
    padding: 0 25px;
}

#tabclub .nav-tabs li {
    width: 33.3%;
}
#admin .fade > div {
    margin-bottom: 20px;
}

#admin .nav-tabs > li.active > a,
#tabclub .nav-tabs > li.active > a {
    background-color: #fff;
    border-bottom: 7px solid #58d6b7;
    color: #02223b;
    font-weight: bold;
}

#admin .nav-tabs > li > a,
#tabclub .nav-tabs > li > a {
    font-weight: normal;
    border-bottom: 7px solid #fff;
}

#admin .nav-tabs > li > a:hover,
#tabclub .nav-tabs > li > a:hover{
    background-color: #fff;
    color: #02223b;
    border-bottom: 7px solid #58d6b7;
}

#actualite h1 {
    color: #ff5302;
    text-transform: uppercase;
}
.desc {
    width: 100%;
    border-bottom: 1px solid #ccd3d8;
    margin: 20px 0;
}
.desc strong {
    background: #fff;
    padding: 0 10px 10px 0;
}
.desc h1 {
    margin: 0;
}
.desc span.green {
    color: #58d5b7 !important;
    font-weight: normal !important;
}
#actualite .actuopt .btn-primary {
    color: #02223b;
}
#actualite .dropdown {
    margin: 20px 0 0 15px;
}

.not {
    text-align: center!important;
}
#clubs .btn-black,
#actualites .btn-black{
    margin: 20px;
}
#clubs > div:not(.not) {
    background-color: #eeeeee;
    padding: 10px;
}
#clubs > div > h2 {
    margin: 5px 0px 15px 0px;
}

#formulaireClubs,
#formulaireActus,
#formulaireEvenements {
    background-color: #eeeeee;
    padding: 20px;
    margin-bottom: 20px;
}

#formulaireInscr{
    background-color: #eeeeee;
    padding: 20px;
    margin-bottom: 20px;
}

#evenement_submit {
    margin: 20px;
}

#formulaireInscr form {
    margin-bottom: 0;
}

#club_nom,
#club_description,
#actualite_nom,
#actualite_contenu {
    width: 100%;
}
#club_description,
#actualite_contenu {
    height: 200px;
    margin-bottom: 20px;
}
#labelType {
    margin-bottom: 15px;
}
#club_type input[type=radio] {
    margin: 0px 0px 0px 20px;
}
#club_type input[type=radio] + label {
    margin: 0px 20px 0px 5px;
    font-weight: normal;
}
.addMembre,
.removeMembre {
    margin-top: 30px;
}

#admin .tab-content a {
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
}
.spanEdit {
    color: #000000;
    padding : 3px;
    margin-left: 20px;
}
.spanEdit:hover {
    color: #ffffff;
    cursor: pointer;
    background: #58d5b7;
}
.spanSuppr {
    color: #000000;
    padding : 3px;
    margin-left: 5px;
}
.spanSuppr:hover {
    color: #ffffff;
    cursor: pointer;
    background: red;
}


h1.titreAdmin {
    margin: 20px!important;
}
/*-------------------------- MENU ADMIN XS ------------------------*/

#blocAdminMobile {
    clear: both;
    background-color: #ffb400;
    color: #02223b;
    position: fixed;
    z-index: 80;
    top: 116px !important;
    left: 0px;
    width: 100%;
    height: 46px;
    font-size: 0;
    text-align: center;
    -webkit-transition: all ease .3s;
    -moz-transition: all ease .3s;
    transition: all ease .3s;
}
#blocAdminMobile div {
    margin: 0px 5px;
    font-size: 14px;
    display:inline-block;
    vertical-align:middle;
}
#blocAdminMobile a {
    position: relative;
    left: -10px;
}
#blocAdminMobile a:hover {
    color: #ff5400;
}
/*------------------------ FIN MENU ADMIN XS ----------------------*/

@media(max-width:767px) {
    #recalageAdmin {
        height: 25px;
    }
    /*-------------------------- MENU ADMIN ---------------------------*/
    #tabAdmin .clubTitre h3 {
        font-size: 18px;
    }
    #tabAdmin .clubTitre h3 small {
        font-size: 12px;
    }
    #tabAdmin .clubListing h4 {
        font-size: 16px;
    }
    /*------------------------ FIN MENU ADMIN -------------------------*/
}

/***********************************************************************/

/***************************** PROFIL *******************************/

#profil {

}

#blocCitationJour {
    background-color: #ffd3e1;
    border-left: 10px solid #ff0054;
    padding: 0;
    margin: 0;
}
#titreBlocCitationJour {
    color: #ff0054;
    font-size: 20px;
    font-weight: bold;
    padding: 0px 20px;
}
#photoBlocCitationJour {
    padding: 20px 0px;
    font-size: 0;
}
#coupeBlocCitationJour {
    padding-top: 20px;
    vertical-align: top;
}
#phraseBlocCitationJour {
    width: 100%;
    padding: 20px;
    font-size: 14px;
    vertical-align: middle;
}
#auteurBlocCitationJour {
    padding: 0;
    text-align: right;
    vertical-align: top;
}
#coeurBlocCitationJour {
    padding: 0px 20px;
}

#visuelProfil {
    border: none;
    padding: 0px;
    margin: 25px 0px 0px 0px;
}
#cachePhotoProfil {
    position: relative;
    z-index: 10;
    width: 225px;
    height: 225px;
    border: none;
    padding: 0px;
    margin: 0px;
    display: inline-block;
    vertical-align: top;
    overflow: hidden;
    background: url(../images/pictogrammes/bg-profile.jpg) no-repeat;
    background-size: cover;
}
#visuelProfil a {
    text-decoration: none;
    border: none;
    margin: 0px;
    padding: 0px;
    width: 100%;
}
#cachePhotoProfil img {
    border: none;
    margin: 0px;
    padding: 0px;
}
/*--- A cause de DataTables ---*/
.ekko-lightbox .modal-dialog {
    margin: auto;
    padding: 0px;
    left: 0%;
}
/*--- Fin A cause de DataTables ---*/
#changerPhotoProfil {
    position: absolute;
    top: 191px;
    left: 180px;
    z-index: 20;
    opacity: .6;
}
#changerPhotoProfil:hover,
#labelChangerPhotoProfil:hover{
    opacity: 1;
}
#labelChangerPhotoProfil {
    background-color: rgba(2, 34, 59, .6);
    color: #ffffff;
    position: absolute;
    top: 185px;
    height: 40px;
    width: 225px;
    padding-left: 20px;
    font-size: 13px;
    font-weight: bold;
    text-align: left;
    z-index:9;
    -webkit-transition: all ease .3s;
    -moz-transition: all ease .3s;
    transition: all ease .3s;
    opacity: 0;
}

#labelChangerPhotoProfil > div::before {
    content: "";
    width: 0;
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}
#labelChangerPhotoProfil > div {
    display: inline-block;
    vertical-align: middle;
    opacity: 0;
}
#cachePhotoProfil:hover > #labelChangerPhotoProfil
{
    opacity: 1;
    z-index: 2;
}
#cachePhotoProfil:hover > #labelChangerPhotoProfil div
{
    opacity: 1;
}

#cacheCouvertureProfil {
    background-color: #02223b!important;
    width: 100%;
    height: 185px;
    border: none;
    color:white;
    font-size:20px;
    padding-left: 235px;
    padding-bottom: 10px;
    margin: 0px;
    margin-left: -225px;
    display: inline-block;
    vertical-align: top;
}
#textCouverture {
    display: inline-block;
    vertical-align: bottom;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.60);
}
#textCouverture small {
    font-size: 75%;
}
#textCouverture span.picto {
    position: relative;
    top: 2px;
}
#changerPhotoCouv {
    position: absolute;
    top: 116px;
    left: 100%;
    margin-left: -75px;
    z-index: 4;
}
#changerPhotoCouv a {
    background: #02223b;
    padding: 15px;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: block;
    text-align: center;
}

#iconesProfilMobile {
    display: none;
}

/* ----------------------- VOIR NAV TABS (ONGLETS BOOTSTRAP) ------------------- */
#nav_onglets_profil {
    margin-left: 219px;
    margin-top: -40px;
    border: none;
}

#nav_onglets_profil.connecte li {
    width: 25%;
}

#nav_onglets_profil li {
    width: 33.3%;
}

#ongletparams {
    padding-left: 0px!important;
}
#ongletparams div::before {
    content: "";
    width: 0;
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}
#ongletparams > span {
    display: inline-block;
    vertical-align: middle;
}
#ongletparams > div {
    display: inline-block;
    vertical-align: middle;
}
#ongletparams .picto-profilMobile-parametres {
    display: inline-block;
    visibility: visible;
}
#ongletparams .picto-profilMobile-parametres-blanc {
    display: none;
    visibility: hidden;
}

#ongletparams:hover .picto-profilMobile-parametres {
    display: none;
    visibility: hidden;
}
#ongletparams:hover .picto-profilMobile-parametres-blanc {
    display: inline-block;
    visibility: visible;
}

/*------------------------------ Formulaire mes informations -------------------------------*/
#info {
    padding: 0px;
}
#listeInfos {
    background-color: #ffffff;
    overflow: auto;
    width: 100%;
}
#listeInfos > div {
    background-color: #eeeeee;
    overflow: auto;
}
.infos {
    color: #02223b;
    padding-top: 20px;
    padding-bottom: 20px;
    overflow: auto;
}
#editionProfil {
    color: #02223b;
    padding-top: 20px;
    padding-bottom: 20px;
    overflow:auto;
}
#ecoleAbregee {
    display: none!important;
}
#info form input.form-control {
    background-color: #ffffff;
    color: #02223b;
    border: 1px solid #02223b!important;
    width: 95%;
    height: 30px;
    padding-left: 10px;
    display: block;
    margin: auto;
    margin-bottom: 5px;
}
#info form input.form-control.readonly {
    background-color: transparent;
    border: 1px solid transparent!important;
    width: 95%;
    height: 30px;
    padding-left: 0px;
    display: block;
    margin: auto;
    margin-bottom: 5px;
    box-shadow: none;
    cursor: text;
}
#info .emptyfield {
    padding: 0 10px;
    font-style: italic;
}
#basculeModifs {
    line-height: 17px;
}
.modifinfos {
    width: 95%;
    margin: auto;
    margin-bottom: 5px;
    text-align: left;
}
#info form div:first-child input:first-child,
#info form div:first-child input:nth-child(2),
#info form div:first-child input:nth-child(3){
    font-weight: bold;
}
#info #utilisateur_dateNaissance {
    width: 95%;
    height: 30px;
    display: block;
    margin: auto;
    margin-bottom: 5px;
    padding-top: 0;
    padding-left: 0;
    text-align: left;
    border:none !important;
    background: none;
    clear: both;
}

#info #utilisateur_dateNaissance select {
    background-color: #ffffff;
    color: #02223b;
    border: 1px solid #02223b !important;
    width: 29%;
    float: left;
    height: 30px;
    padding-left: 10px;
    display: block;
    margin: 0 5px 5px 0;
    border-radius: 0;
}


#btnPhoto,
#info #btnValidAnnule {
    width: 95%;
    margin: auto;
    margin-bottom: 5px;
    text-align: left;
}
#utilisateur_fileProfil,
#utilisateur_fileCouv {
    display: none;
}
#commentModifinfos {
    width:95%;
    height:70px;
    margin:auto;
    margin-bottom:5px;
    padding-left: 0px;
    padding-top:10px;
}
#info .btn-bleu,
#info .btn-blanc {
    height: 30px;
}
#info input[type="text"],
#info input[type="email"]{
    border: 1px solid #aaaaaa!important;
}
#previsualisationProfil,
#previsualisationCouv {
    width: 49.5%;
    display: inline-block;
    vertical-align: bottom;
}
.preview {
    background-color: #e6e6e6;
    padding: 10px;
    margin: 10px 0px 0px 0px;
}
.preview table tr td:first-child {
    width: 100%;
    text-align: left;
}
.preview table tr td:last-child {
    padding-bottom: 10px;
}
.preview table tr td:last-child span.glyphicon {
    top: 0px;
    cursor: pointer;
}
.preview__name {
    padding-bottom: 10px;
    word-wrap: break-word;
}
.preview__thumb img {
    width: 100%;
}
#boutonPhotoProfil,
#boutonPhotoCouverture {
    width: 49.5%;
    box-sizing: border-box;
    padding-top: 8px;
    margin-bottom: 5px;
    display: inline-block;
}
#btnPhoto div.cale {
    width: 1%;
    height: 0px;
    display: inline-block;
    vertical-align: top;
}
#closeModifUtilisateur {
    margin-left: 5px;
    cursor: pointer;
}
.boutonposition {
    width: 95%;
    margin: auto;
}
.boutonposition .annuler {
    display: inline-block;
    cursor: pointer;
}
.boutonposition span.glyphicon {
    position: relative;
    top: 3px;
    margin-left: 5px;
    color: #03223e;
}
#editionProfil input[type=text]:focus,
#editionProfil input[type=email]:focus,
#editionProfil input[type=password]:focus,
#editionProfil #utilisateur_dateNaissance_day:focus,
#editionProfil #utilisateur_dateNaissance_month:focus,
#editionProfil #utilisateur_dateNaissance_year:focus {
    border: 1px solid #58d5b7!important;
    -moz-box-shadow: 0 0 8px #58d5b7;
    -webkit-box-shadow: 0 0 8px #58d5b7;
    box-shadow: 0 0 8px #58d5b7;
}
#btnValidAnnule input[type=submit].btn-bleu:hover {
    background-color: #184366;
    color: #ffffff;
}
#btnValidAnnule input[type=button].btn-blanc:hover {
    background-color: #58d5b7;
    color: #02223b;
}

/*---------------------------- Fin Formulaire mes informations -----------------------------*/
/*---------------------------------- Formulaire phrase -------------------------------------*/
#citation {

}
#citation > div {
    margin-top: 20px;
    overflow: auto;
}
#bandeauPhrase {
    background-color: #ffd3e1;
    border-left: 10px solid #ff0054;
    font-size: 16px;
    font-weight: bold;
    text-align: left;
    padding: 20px;
    margin: 0px;
}

#modifPhrase {
    background-color: #eeeeee;
    padding: 10px;
    margin-bottom: 20px;
}
#modifPhrase form {
    margin-bottom: 0px!important;
}
#modifPhrase table td:first-child {
    width: 100%;
}
#modifPhrase table td:last-child {
    padding-left: 10px;
}
#modifPhrase #citation_contenu {
    width: 100%!important;
    height: 30px!important;
    border: 1px solid transparent!important;
    margin-bottom: 0px!important;
}
#modifPhrase #citation_contenu:focus {
    border: 1px solid #58d5b7!important;
    -moz-box-shadow: 0 0 8px #58d5b7;
    -webkit-box-shadow: 0 0 8px #58d5b7;
    box-shadow: 0 0 8px #58d5b7;
}
#modifPhrase #citation_contenu::-webkit-input-placeholder {
    color: #092f57;
}
#modifPhrase:-moz-placeholder {
    color: #092f57;
}
#modifPhrase::-moz-placeholder {
    color: #092f57;
}
#modifPhrase:-ms-input-placeholder {
    color: #092f57;
}
#modifPhrase button[type="submit"] {
    height: 30px!important;
}
#modifPhrase button[type="submit"]:hover {
    background-color: #184366;
    color: #ffffff;
}
#citation_valider {

}
/*-------------------------------- Fin Formulaire phrase -----------------------------------*/
/**----------------------------------- Formulaire mes Animaux ------------------------------------**/
#listeAnimal {
    overflow: auto;
}
#listeAnimal table,
#listeAnimal tr,
#listeAnimal td {
    color: #02223b!important;
}
#listeAnimal > div {
    background-color: #eeeeee;
    padding: 10px;
    margin: 0px;
    overflow: auto;
}
.ficheAnimal {
    background-color: #eeeeee;
    padding: 0;
    vertical-align: top;
}
.ficheAnimal > div {
    padding: 10px;
}
.ficheAnimal > div:hover {
    background-color: #e6e6e6;
    border-color: #e6e6e6;
}
.ficheAnimal > div > table > tbody > tr:first-child > td:first-child {
    padding: 0px;
}
.especeNom {
    width: 100%;
    padding: 0 0 0 20px;
}
.spanEditAnimal {
    color: #02223b;
    opacity: 0.2;
}
.spanEditAnimal:hover {
    color: #02223b;
    opacity: 1;
}
.spanVoirAnimal {
    color: #02223b;
    opacity: 0.2;
}
.spanVoirAnimal:hover {
    color: #02223b;
    opacity: 1;
}
.spanSupprAnimal {
    color: #02223b;
    opacity: 0.2;
}
.spanSupprAnimal:hover {
    color: #02223b;
    opacity: 1;
}
#blocAjoutAnimal {
    padding: 10px;
    margin: 0px;
}
/*#blocAjoutAnimal > div:hover {
    background-color: #e6e6e6;
    border-color: #e6e6e6;
}*/
#blocAjoutAnimal > div > table > tbody > tr > td {
    padding: 0px;
}
#blocAjoutAnimal > div > table.tableContainer {
    width: 100%;
}
#boutonAjoutAnimal {
    font-size: 0px;
    vertical-align: top;
}
#boutonAjoutAnimal > a + div {
    font-size: 16px;
}
#boutonAjoutAnimal table tr:first-child td:first-child {
    width: 50px;
}
#boutonAjoutAnimal table tr:first-child td:nth-child(2) {
    padding-left: 10px;
    text-align: left;
}
#cercleplus {
    padding: 8px;
    border: 3px solid #02223b;
    border-radius: 50%;
    box-sizing: border-box;
}
#cercleplus:hover {
    background-color: #184366;
}
#formAjoutAnimal,
#formEditAnimal {
    padding: 0px;
    display: none;
}
#formAnimal table tr:first-child td:first-child,
#formModifAnimal table tr:first-child td:first-child {
    vertical-align: top;
}
#prevueAjoutAnimal,
#prevueModifAnimal {
    width: 82px;
}
#prevueAjoutAnimal .preview table tr td,
#prevueModifAnimal .preview table tr td {
    padding: 0px!important;
}
#prevueAjoutAnimal .preview table tr:last-child td:last-child,
#prevueModifAnimal .preview table tr:last-child td:last-child {
    text-align: right;
    padding-right: 20px!important;
}
#prevueAjoutAnimal .preview__name,
#prevueModifAnimal .preview__name {
    width: 82px;
    overflow-wrap: break-word!important;
}
#formModifAnimal table tr td:not(.rowspanButton) {
    padding-left: 10px;
}
#formAnimal,
#formModifAnimal {
    background-color: #eeeeee;
    display: inline-block;
    margin: 0px;
    padding: 0px;
}
#formAnimal form,
#formModifAnimal form {
    margin-bottom: 0px;
}
#formAnimal label,
#formModifAnimal label {
    font-size: 13px;
}
#formAnimal label img.medaille {
    background-color: #02223b;
}
#formAnimal label img.medaille:hover {
    background-color: #184366;
}
#iconeModifAnimal {
    position: absolute;
    opacity: 0.6;
    z-index: 2;
}
.rowspanButton .inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}
.inputfile-1 + label {
    color: #fff;
    background-color: #02223b;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    text-align: center;
    line-height: 70px;
    display: table-cell;
    vertical-align: middle;
}
.inputfile-1 + label:hover {
    background: #184366;
}
.glyphicon.ajoutanimal {
    font-size: 50px;
    height: 100px;
    line-height: 80px;
}

#iconeModifAnimal:hover {
    opacity: 1;
}
#formAnimal input[type=text],
#formModifAnimal input[type=text]{
    width: 100%;
    height: 35px;
    margin: 0px 0px 10px 0px;
}
#formAnimal input[type=text]:focus,
#formModifAnimal input[type=text]:focus {
    border: 1px solid #58d5b7!important;
    -moz-box-shadow: 0 0 8px #58d5b7;
    -webkit-box-shadow: 0 0 8px #58d5b7;
    box-shadow: 0 0 8px #58d5b7;
}
#formAnimal input[type=submit].btn-bleu,
#formAnimal input[type=button].btn-blanc,
#formModifAnimal input[type=submit].btn-bleu,
#formModifAnimal input[type=button].btn-blanc {
    height: 35px;
    padding: 5px 15px;
}
#formAnimal input[type=submit].btn-bleu:hover,
#formModifAnimal input[type=submit].btn-bleu:hover {
    background-color: #184366;
    color: #ffffff;
}
#visuelModifAnimal {
    cursor: pointer;
}
#closeAddAnimal,
#closeEditAnimal {
    position:relative;
    top:3px;
    margin-left: 20px;
    font-size: 20px;
}
#closeAddAnimal div,
#closeEditAnimal div {
    background-color: transparent;
    position: relative;
    top: -1px;
    width: 30px;
    height: 30px;
    padding-top: 3px;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
}
#closeAddAnimal div:hover,
#closeEditAnimal div:hover {
    background-color: #58d5b7;
    color: #02223b;
    cursor: pointer;
}
/**---------------------------- Fin Formulaire mes Animaux --------------------------------------**/
/*-------------------------------- Formulaire paramètres -----------------------------------*/
#listeParametres {

}
#listeParametres > div {
    background-color: #eeeeee;
    padding-top: 10px;
}
#visibilite {
    margin: 20px 0px 20px 0;
    padding: 5px;
}
.labelParam a {
    background-color: #58d5b7;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    color: #02223b;
    font-size: 20px;
    margin-left: 5px;
    margin-right: 10px;
}
#visibilite .popover {
    border-radius: 0px;
    background-color: #02223b;
    z-index: 130;
    width: 300px;
}
.popover.left > .arrow:after {
    border-left-color: #02223b;
}
.popover.left > .arrow {
    border-left-color: #02223b;
}
#visibilite .popover.left > .arrow {
    border-left-color: #02223b;
}
#visibilite .popover-title {
    background-color: transparent;
    color:  #ffffff;
    font-weight: bold;
}
#visibilite .popover-content {
    background-color: transparent;
    color:  #ffffff;
    font-size: 12px;
    font-weight: normal;
}

#update_annee .popover {
    border-radius: 0px;
    background-color: #02223b;
    z-index: 130;
    width: 300px;
}
#update_annee .popover.left > .arrow {
    border-left-color: #02223b;
}
#update_annee .popover-title {
    background-color: transparent;
    color:  #ffffff;
}
#update_annee .popover-content {
    background-color: transparent;
    color:  #ffffff;
    font-size: 12px;
}

.update_annee {
    float: left;
    font-weight: bold;
    text-align: left;
    padding: 0;
}
.update_annee .glyphicon {
    width: 30px;
    height: 30px;
    line-height: 25px;
    background: #fff;
    border-radius: 50%;
    border: 2px solid #02223b;
    color: #02223b;
    text-align: center;
    cursor: pointer;
}
#update_annee_moins {
    margin: 0 20px 0 0;
}
#update_annee_plus {
    margin: 0 0 0 20px;
}
#editionparametre {
    padding-bottom: 0px;;
}
.labelParam {
    color: #02223b;
    font-size: 16px;
    font-weight: bold;
}
#menuParam {
    background-color: #ffffff;
    position: relative;
    top: 4px;
    border:  1px solid #02223b;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 0px;
    margin-bottom: 20px;
    font-weight: bold;
}
#menuParam:hover {
    border: 1px solid #eeeeee;
    -moz-box-shadow: 0 0 8px #58d5b7;
    -webkit-box-shadow: 0 0 8px #58d5b7;
    box-shadow: 0 0 8px #58d5b7;
}
#visibiliteParam {
    font-size: 14px;
    display:none;
}
#choixParamSelect {
    background-color: #ffffff;
    color: #02223b;
    border-bottom:  1px solid #eeeeee;
    padding: 0px;
    font-size: 14px;
}
#choixParamActif {
    padding-left: 10px;
    display: inline-block;
}
#choixParamSelect span {
    color: #02223b;
    position: relative;
    top: 3px;
    padding-right: 10px;
    float: right;
}
.choixParam {
    color: #02223b;
    padding-left: 20px;
    font-size: 14px;
    margin: 5px 0px;
    text-align: left;
    display: block;
}
.choixParam:hover {
    background-color: #eeeeee;
    cursor: pointer;
}
#formChgmtMDP input[type=password]:focus,
#parametres_newPasswordConfirm:focus {
    border: 1px solid #58d5b7!important;
    -moz-box-shadow: 0 0 8px #58d5b7;
    -webkit-box-shadow: 0 0 8px #58d5b7;
    box-shadow: 0 0 8px #58d5b7;
}
#formChgmtMDP input[type=submit].btn-bleu:hover,
#listeParametres #chmtMDP a.btn-bleu:hover {
    background-color: #184366;
    color: #ffffff;
}
#formChgmtMDP input[type=button].btn-blanc:hover {
    background-color: #58d5b7;
    color: #02223b;
}

#chmtMDP {
    clear: both;
    padding: 20px 0px;

}
#chmtMDP > div {
    padding: 0;
}
#formChgmtMDP {
    background-color: #e6e6e6;
    padding: 10px;
    margin-bottom: 20px;
    display: inline-block;
}
#formChgmtMDP input {
    margin: 0px auto 10px auto;
}

#chmtMDP #formChgmtMDP {
    background: none;
    padding: 0;
}
img.actu {
    width: 50px;
    height: auto;
}

@media(max-width:1199px) {
    /*------------------------- CITATION JOUR -------------------------*/
    .leftfixed {
        width: 235px;
    }
    .corps {
        margin-left: -235px;
    }
    /*----------------------- FIN CITATION JOUR -----------------------*/
    /*------------------------- VISUEL PROFIL -------------------------*/
    #cacheCouvertureProfil {
        background: url(../images/profil/profilBg225.jpg) 225px center no-repeat;
        height: 225px;
    }
    #changerPhotoCouv {
        top: 150px;
    }
    /*----------------------- FIN VISUEL PROFIL -----------------------*/
    /*------------------------ ONGLETS PROFIL -------------------------*/
    .nav-tabs > li > a {
        padding: 0px 10px!important;
    }
    #nav_onglets_profil {
        margin-left: 0px;
        margin-top: 0px;
    }
    #TitreBlocCitationJour {
        width: 90px;
    }
    #ContenuBlocCitationJour {
        width: 88%;
        margin: 0px;
        vertical-align: middle;
        padding-left: 235px;
        padding-right: 0px;
    }
    #boutonPhotoProfil, #boutonPhotoCouverture {
        font-size: 12px;
        padding: 8px 5px;
    }
    #feedBackText {
        font-size: 14px;
    }
    .visuelTrombi.col-xs-2 {
        padding: 0;
    }
    .visuelTrombi .btn {
        padding: 5px 10px;
    }
    .modifinfos {
        margin-top: 20px;
    }
    table.table-bordered.dataTable tbody th, table.table-bordered.dataTable tbody td {
        font-size: 14px;
    }
    #admin .clubTable {
        width: 45% !important;
    }
    #admin .tab-content a.lirelasuite {
        padding: 5px 10px;
    }
}
/*------------------------------ Fin Formulaire paramètres ---------------------------------*/
@media(max-width:1100px) {
    /*-------------------------- PHRASE DU JOUR -------------------------*/
    #titreBlocCitationJour span.chained::after {
        content: " ";
    }
    #jeuconcours {
        height: 265px;
    }
    /*------------------------ FIN PHRASE DU JOUR -----------------------*/
}
@media(max-width:900px) {
    /*-------------------------- PHRASE DU JOUR -------------------------*/
    #titreBlocCitationJour {
        padding-right: 0px;
        font-size: 16px;
    }
    /*------------------------ FIN PHRASE DU JOUR -----------------------*/
    #nav_onglets_profil li a {
        font-size: 12px;
    }
    #cacheCouvertureProfil {
        background-size: cover !important;
    }
    #ongletparams .picto.grand {
        width: 22px;
        height: 22px;
    }
    #listeParametres > div {
        padding: 20px;
    }
    #chmtMDP {
        padding: 0 20px;
    }
    #chmtMDP .btn-bleu {
        padding: 5 10px;
    }
    #listeActualites .blocNew .picto.supergrand {
        width: 100%;
        height: auto;
    }
    #listeActualites .blocNew a.lirelasuite {
        padding: 5px;
        font-size: 13px;
    }
    .blockLogoMenu {
        margin: 0;
        width: 100%;
    }
    .blockEcoleMenu {
        padding: 0px;
        width: 100%;
        margin: 20px 0 0 0;
    }
    .utilisateurTrombi .visuelTrombi.col-xs-2 {
        width: 30%;
    }
    .utilisateurTrombi .coordonneesTrombi.col-xs-10 {
        width: 70%;
    }
    .clubContenu .actu-details,
    .clubContenu .col-xs-3{
        width: 100%;
    }
    .clubContenu .col-xs-3 a.lirelasuite {
        float: left;
        margin: 20px 0 0 0;
    }
    .utilisateurTrombi .coordonneesTrombi.col-xs-10 .col-md-6,
    .utilisateurTrombi .coordonneesTrombi.col-xs-10 .col-xs-6 {
        width: 50%;
        float: left;
    }
    #phraseBlocCitationJour {
        font-size: 14px;
    }
    #admin .clubTable {
        width: 100% !important;
        min-height: inherit;
    }
    .actuDetails .col-xs-9,
    .actuDetails .col-xs-3 {
        width: 100%;
    }
    .actuDetails .col-xs-3 a.lirelasuite {
        float: left;
        text-align: left;
    }
    #bandeauPhrase {
        font-size: 14px;
    }
    #jeuconcours {
        height: 225px;
    }
}
@media(max-width:767px) {
    /*--------------------------- PARAMETRES ----------------------------*/
    .labelParam {
        text-align: left;
    }
    .blockLogoMenu {
        margin: 0;
        position: fixed;
        z-index: 9;
    }
    #headerRechercheMobile {
        height: inherit;
        padding: 18px 15px;
        position: fixed;
        z-index: 99999;
    }
    #headerRechercheMobile .picto-loupe {
        margin: 5px 0 0 0;
    }
    #loupeRechercheMobile {
        height: 35px;
        width: 55px;
        padding: 0;
    }
    #btnHeaderSearchMobile {
        background-size: 35px;
        margin-top: 5px;
    }

    #entreesetus #lastinput .closeleft,
    #formulaireActus #lastinput .closeleft,
    #formulaireClubs #lastinput .closeleft,
    #entreesevenements #lastinput .closeleft {
        padding-left: 15px;
        margin-left: 0;
    }
    #formulaireEvenements .textright {
        text-align: center;
    }
    #pageEvenementClub .btn-black, #placeContent .btn-black {
        margin: 0 0 20px 0 !important;
    }
    .form-control {
        margin: 0;
        width: 100%;
    }
    .blockgris {
        padding: 15px;
    }
    #placeContent .textright .btn-black {
        margin: 0 !important;
    }

    ul.listeevnt .inline-block {
        display: none;
    }
    #admin .clubTable {
        min-height: inherit !important;
        height:inherit !important;
    }
    #admin .nav-tabs li, #tabclub .nav-tabs li {
        width: 33.3%;
        padding: 0;
    }
    #admin .nav-tabs {
        overflow: hidden;
    }
    .actuDetails {
        padding: 20px 0 !important;
    }
    .btn-black {font-size: 15px;}
    .textright {
        margin-top: 10px;
    }
    .textright .btn-blanc2 {
        text-align: left;
        float: left;
    }
    #listeEcoleMobile a {
        text-align: center;
        margin: 0 auto;
        display: inline-block;
    }
    #listeEcoleMobile a > div {
        padding: 10px 5px;
        width: inherit;
    }

    #actualite .dropdown {
        margin: 0;
    }
    .erreur404 h1 {
        margin-top: 50px;
    }
    .erreur404 {
        margin: 60px auto 30px auto;
    }
    #textCouverture {
        text-shadow: none;
    }
    .desc {
        border-bottom: none;
        margin: 0;
    }
    #actualite .col-xs-11,
    #actualite .col-xs-1 {
        width: 100%;
    }
    /*------------------------- FIN PARAMETRES --------------------------*/
}
@media(max-width:600px) {
    /*-------------------------- PHRASE DU JOUR -------------------------*/
    #blocCitationJour {
        display: none;
    }
    .page {
        padding-top: 25px;
    }
    /*------------------------ FIN PHRASE DU JOUR -----------------------*/
    /*-------------------------- VISUEL PROFIL --------------------------*/

    #corpsSite {
        padding-top:110px;
    }
    #visuelProfil {
        border: none;
        padding: 0px;
        margin: 25px 0px 0px 0px;
        text-align: center;
    }
    #cachePhotoProfil {
        position: relative;
        z-index: 10;
        top: 40px;
        width: 140px;
        height: 140px;
        border: none;
        padding: 0px;
        margin: 0px;
        display: inline-block;
        overflow: hidden;
        background: url(../images/pictogrammes/bg-profile.jpg) no-repeat;
        background-size: cover;
    }
    #visuelProfil a {
        text-decoration: none;
        border: none;
        width: 45px;
        height: 45px;
    }
    #photoProfil {
        border: none;
        margin: 0px;
        padding: 0px;
        width: 140px!important;
        height: 140px!important;
    }
    #changerPhotoCouv a {
        padding:11px;
    }
    #changerPhotoProfil {
        top: 105px;
        left: 95px;
    }
    #iconeChangerCouv {
        width: 25px;
        height: auto;
    }
    #labelChangerPhotoProfil {
        top: 100px;
        height: 40px;
        width: 140px;
        padding-left: 10px;
        font-size: 13px;
        font-weight: bold;
        text-align: left;
        display: none;
    }
    #changerPhotoCouv {
        top: 95px;
        margin-left: -70px;
    }
    #cacheCouvertureProfil {
        background-color: transparent;
        background-position: 0px center!important;
        position: relative;
        top: -160px;
        width: 100%;
        height: 170px!important;
        border: none;
        color:white;
        font-size:20px;
        padding-left: 0px;
        padding-bottom: 10px;
        margin: 0px;
        display: inline-block;
    }
    #textCouverture {
        position: relative;
        top: 140px;
        color: #02223b;
        display: inline-block;
    }

    #iconesProfilMobile {
        overflow: auto;
        display: block;
        text-align: center;
    }
    #iconesProfilMobile p {
        margin: 10px 0;
    }
    #iconesProfilMobile span {
        border: 2px solid #02223b;
        border-radius: 50%;
        margin: 0px;
    }
    #iconesProfilMobile span.picto-profilMobile-parametres-blanc {
        display: none;
    }
    #iconesProfilMobile span.picto-profilMobile-infos:hover {
        background-color: #58d5b7;
        background-image: url("../images/pictogrammes/iconesMobile/infos-blanc.png");
        border: 2px solid #58d5b7;
    }
    #iconesProfilMobile div.active span.picto-profilMobile-infos {
        background-color: #58d5b7;
        background-image: url("../images/pictogrammes/iconesMobile/infos-blanc.png");
        border: 2px solid #58d5b7;
    }
    #iconesProfilMobile span.picto-profilMobile-phrase:hover {
        background-color: #58d5b7;
        background-image: url("../images/pictogrammes/iconesMobile/phrase-blanc.png");
        border: 2px solid #58d5b7;
    }
    #iconesProfilMobile div.active span.picto-profilMobile-phrase {
        background-color: #58d5b7;
        background-image: url("../images/pictogrammes/iconesMobile/phrase-blanc.png");
        border: 2px solid #58d5b7;
    }
    #iconesProfilMobile span.picto-profilMobile-animaux:hover {
        background-color: #58d5b7;
        background-image: url("../images/pictogrammes/iconesMobile/animaux-blanc.png");
        border: 2px solid #58d5b7;
    }
    #iconesProfilMobile div.active span.picto-profilMobile-animaux {
        background-color: #58d5b7;
        background-image: url("../images/pictogrammes/iconesMobile/animaux-blanc.png");
        border: 2px solid #58d5b7;
    }
    #iconesProfilMobile span.picto-profilMobile-parametres:hover {
        background-color: #58d5b7;
        background-image: url("../images/pictogrammes/iconesMobile/parametres-blanc.png");
        border: 2px solid #58d5b7;
    }
    #iconesProfilMobile div.active span.picto-profilMobile-parametres {
        background-color: #58d5b7;
        background-image: url("../images/pictogrammes/iconesMobile/parametres-blanc.png");
        border: 2px solid #58d5b7;
    }
    #nav_onglets_profil {
        display: none;
    }
    /*------------------------ FIN VISUEL PROFIL ------------------------*/
    /*------------------------- EDITION PROFIL --------------------------*/
    #commentModifinfos {
        font-size: 12px!important;
    }
    /*----------------------- FIN EDITION PROFIL ------------------------*/
    /*------------------------ EDITION ANIMAUX --------------------------*/
    .especeNom {
        width: 100%!important;
    }
    /*---------------------- FIN EDITION ANIMAUX ------------------------*/
    /*--------------------------- PARAMETRES ----------------------------*/
    .labelParam {
        padding: 0 0 10px 0;
    }

    #chmtMDP {
        margin-top: -50px;
    }
    /*------------------------- FIN PARAMETRES --------------------------*/
    #retour {
        margin: 5px 0 0 -15px;
    }
    .form-control {
        margin: 0;
    }
    #layoutLogin .form-group input[type="checkbox"] {
        margin-left: 0;
    }
    #logoPartenaireLogin .logoheight {
        margin-bottom: 10px;
        width: 100% !important;
        clear: both;
    }

    #logoPartenaireLogin .col-xs-5,
    #logoPartenaireLogin .col-xs-2 {
        width: 20%;
        float: left;
    }
    .clubEdition,
    .clubContenu{
        padding: 10px;
    }
    .clubEtoile {
        padding: 0;
    }
    #logoPartenaireLogin .col-xs-5,
    #logoPartenaireLogin .col-xs-2 {
        width: 50%;
        float: left;
    }
}
@media(max-width:469px) {
    /*------------------------- EDITION PROFIL --------------------------*/
    #boutonPhotoProfil,
    #boutonPhotoCouverture {
        width: 100%;
    }
    #commentModifinfos {
        height: 105px;
        padding-top: 50px;
    }
    #btnPhoto, #info #btnValidAnnule,
    #info .modifinfos {
        text-align: center;
    }
    /*----------------------- FIN EDITION PROFIL ------------------------*/
    /*------------------------ EDITION ANIMAUX --------------------------*/
    .especeNom {
        font-size: 14px!important;
    }
    #formAnimal,
    #formEditAnimal {
        font-size: 14px!important;
    }
    #blocAjoutAnimal table {
        width: 100%;
    }

    #formAnimal input[type=text],
    #formEditAnimal label,
    #formEditAnimal input[type=text],
    #formEditAnimal input[type=submit] {
        width: 120%;
    }
    .utilisateurTrombi .visuelTrombi.col-xs-2,
    .utilisateurTrombi .coordonneesTrombi.col-xs-10 {
        width: 100%;
    }
    .nav-tabs > li > a {
        padding: 0px 6px!important;
    }
    #pageEvenementClub h3 {
        font-size: 20px;
    }
    #personnelHeader,
    #personnelBody {
        padding: 0 !important;
    }
    #textePersonnel h1 {
        margin: 20px 0 !important;
    }
    div.dataTables_wrapper div.dataTables_length, div.dataTables_wrapper div.dataTables_filter, div.dataTables_wrapper div.dataTables_info, div.dataTables_wrapper div.dataTables_paginate {
        text-align: left;
        margin-bottom: 10px;
    }
    #bandeauPhrase .btn-blanc {
        display: -webkit-inline-box;
        padding: 5px;
    }
    .inputfile-1 + label {
        width: 50px;
        height: 50px;
        line-height: 50px;
    }
    .glyphicon.ajoutanimal {
        font-size: 25px;
        line-height: 40px;
    }
    #formAnimal input[type=text], #formModifAnimal input[type=text] {
        width: 100%
    }

    .erreur404 h1 {
        font-size: 38px;
    }

    /*---------------------- FIN EDITION ANIMAUX ------------------------*/
}
@media(max-width:400px) {
    /*-------------------------- VISUEL PROFIL --------------------------*/
    #iconesProfilMobile p {
        font-size: 12px;
        margin: 10px 0 0 0;
    }
    #listeInfos input[type=text] {
        /*font-size: 13px!important;*/
    }
    #ecoleComplete {
        display: none!important;
    }
    #ecoleAbregee {
        display: block!important;
    }
    /*------------------------ FIN VISUEL PROFIL ------------------------*/
    /*------------------------- EDITION PROFIL --------------------------*/
    #infosProfil {
        padding-left: 0px;
        padding-right: 0px;
    }
    #infosProfil input[type=text],
    #infosProfil input[type=email],
    #editionProfil input[type=text],
    #editionProfil input[type=email] {
        padding: 0px 0px 0px 5px!important;
        font-size: 12px;
    }
    /*----------------------- FIN EDITION PROFIL ------------------------*/
    /*--------------------------- PARAMETRES ----------------------------*/
    #visibilite .popover {
        width: 200px;
    }

    #update_annee .popover {
        width: 200px;
    }

    #formModifMDP h3 {
        font-size: 15px;
        font-weight: bold;
    }
    /*------------------------- FIN PARAMETRES --------------------------*/
    #placeContent {
        padding: 20px;
        overflow: auto;
    }
    .labelParam {
        padding: 0;
        height: 40px;
        font-size: 15px;
    }
    .labelParam a {
        float: right;
    }
    .page {
        padding: 0;
        margin: 0;
    }
    #chmtMDP .labelParam {
        height: 0;
        margin: 0;
    }
    #formModifMDP #formChgmtMDP label {
        width:100%;
        text-align: center;
    }
    #chmtMDP > div {
        margin-bottom: 0;
    }
    #visibilite {
        margin: 0 0px 20px 0;
    }
    .blocNew .actu-details,
    #listeActualites .blocNew .col-xs-3 {
        width: 100%;
    }
    #listeActualites .blocNew a.lirelasuite {
        float: left;
        text-align: left;
    }
    .actuhead h1 {
        text-align: center !important;
    }
    #loupeRechercheMobile {
        width: 42px;
    }
}
@media(max-width:350px) {
    /*-------------------------- VISUEL PROFIL --------------------------*/
    #profil {
        margin-left: 0px;
        margin-right: 0px;
    }
    #cacheCouvertureProfil {
        background-position: 0px center!important;
        width: 100%;
    }
    #textCouverture {
        font-size: 18px;
    }
    #changerPhotoCouv {
        margin-left: -55px;
    }
    /*------------------------ FIN VISUEL PROFIL ------------------------*/
    /*------------------------- ONGLETS PROFIL --------------------------*/
    #iconesProfilMobile > div {
        padding-left: 10px;
        padding-right: 10px;
    }
    /*----------------------- FIN ONGLETS PROFIL ------------------------*/
    #commentModifinfos em {
        font-size: 10px;
    }
    #basculeModifs {
        font-size: 12px;
    }
    #listeInfos input[type=text] {
        /*font-size: 12px!important;*/
    }
}

/********************************************************************/

/***************************** TROMBINOSCOPE ******************/

#trombinoscope {

}
#filtre {
    color: #02223b;
    font-size: 14px;
    font-weight: bold;
}
#filtre:hover,
#filtre:active,
#filtre:focus {
    color: #184366;
}
#filtre div {
    padding-top: 2px;
    padding-left: 0px;
    padding-right: 5px;
    display: inline-block;
}
#docfiltres {
    background-color: #58d5b7;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    margin-left: 20px;
    cursor: pointer;
}
#docfiltres a {
    text-decoration: none;
    color: #02223b;
    font-size: 20px;
}
#trombinoscope .popover {
    max-width: 600px;
    border-radius: 0px;
    background-color: #02223b;
    z-index: 130;
}
#trombinoscope .popover.right .arrow:after {
    border-right-color: #02223b;
}
#trombinoscope .popover-title {
    background-color: transparent;
    color:  #ffffff;
    /*padding-top: 160px;*/
}
#trombinoscope .popover-content {
    background-color: transparent;
    color:  #ffffff;
}

#separeFiltres {
    display: none;
}

/*----------------------------- FILTRE TOGGLE BOLD/REGULAR -----------------------------------*/
.filtresACocher {
    height: 190px;
}
#rechercheTrombi input[type=radio]:checked + label,
#rechercheTrombi input[type=checkbox]:checked + label {
    font-weight: bold;
    cursor: pointer;
}
#rechercheTrombi  input[type=radio] + label,
#rechercheTrombi  input[type=checkbox] + label{
    font-weight: normal;
    cursor: pointer;
}
#rechercheTrombi form {
    overflow: auto;
}
/*----------------------------- FIN FILTRE TOGGLE BOLD/REGULAR -----------------------------------*/

#listeUtilisateur {
    padding: 0px;
}
#resultatFiltre {
    margin-bottom: 25px;
}
#resultatFiltre span:first-child {
    color: #02223b;
    font-size: 14px;
    font-weight: bold;
}
#resultatFiltre span:nth-child(2) {
    color: #58d5b7;
}

.utilisateurTrombi {
    background-color: #eeeeee;
    padding: 20px;
    margin-bottom: 20px;
    text-align: left;
    overflow: auto;
}

.visuelTrombi {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    padding: 0;
}
.visuelTrombi .btn {
    margin: 20px 0px 0px 0px;
}
.animalListe {
    font-size: 0px;
}
.animalListe span {
    font-size: 14px;
}
.prive {
    cursor: default;
}

@media(max-width:920px) {
    /*----------------------------- FILTRES -----------------------------*/
    .filtresACocher {
        padding: 0px 0px 0px 10px;
    }
    #rechercheTrombi .glyphicon {
        font-size: 12px;
    }
    /*--------------------------- FIN FILTRES ---------------------------*/
}
@media(max-width:590px) {
    /*----------------------------- FILTRES -----------------------------*/
    #separeFiltres {
        clear: both!important;
        display: block;
        position: relative;
        top: 5px;
    }
    .filtresACocher {
        width: 50%;
        padding: 0px 15px;
    }
    .filtresACocher:nth-child(4),
    .filtresACocher:last-child {
        height: 170px;
    }
    .utilisateurTrombi {
        padding: 10px 0px 0px 0px;
    }
    .visuelTrombi {
        display: block;
        padding: 0px;
        margin: auto;
    }
    .visuelTrombi .btn {
        margin: 10px 0px;
    }
    .coordonneesTrombi {
        padding: 10px 0px;
        margin: 0px;
        display: block;
        overflow: auto;
        width: 100%;
    }
    /*--------------------------- FIN FILTRES ---------------------------*/
}
@media(max-width:360px) {
    /*----------------------------- FILTRES -----------------------------*/
    #rechercheTrombi label {
        font-size: 12px;
    }
    #rechercheTrombi .glyphicon {
        font-size: 10px;
    }
    .filtresACocher {
        height: 180px;
        padding: 0px 0px 0px 15px;
    }
    .filtresACocher:nth-child(4),
    .filtresACocher:last-child {
        height: 145px;
    }
    /*--------------------------- FIN FILTRES ---------------------------*/
}
/********************************************************************/

/***************************** LISTE des ACTUALITES ******************/

#listeActualites .blocNew {
    background: #ffb400;
}
#listeActualites .blocNew:hover {
    background: #ffcb4d;
}

#listeActualites .blocNew a {
    text-decoration: none;
    margin: 10px 0 0 0;
}
.actu-details {
    font-size: 12px;
    margin: 10px 0 0 0;
}
a.lirelasuite {
    background-color: #03223e;
    color: #ffffff;
    border: 1px solid #03223e;
    padding: 5px 20px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
}
a.lirelasuite:hover {
    border: 1px solid #03223e;
    background-color: #fff;
    color: #03223e;
}

/*-------------------------- Actualite -------------------------------*/
.blocNew {
    background-color: #eeeeee;
    color: #02223b;
    padding: 20px;
    margin-bottom: 25px;
}
#listeActualites h3 {
    margin-top: 0px;
    font-weight: 600;
    text-decoration: none;
    font-size:16px;
}
#listeActualites a:hover {
    color: #184366;
}
.encart h3 {
    font-weight: 600;
}
#listeActualites .actuhead {
    margin: 0 0 25px 0;
}
.actuopt .btn-primary {
    color: #ffffff;
    background-color: transparent;
    border-color: transparent;
    font-size: 20px;
    padding: 0;
}
.actuopt .btn-primary:hover,
.actuopt .btn-primary:focus,
.actuopt.open .dropdown-toggle.btn-primary,
.actuopt .btn-primary:hover {
    color: #092f57;
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
}
.actuopt .dropdown-menu {
    border-radius: 0;
    right: 0;
    float: right;
    left: inherit;
}
.actuopt .dropdown-menu > li > a {
    color: #092f57;
    background-color: #fff;
}
.actuopt .dropdown-menu > li > a:hover {
    color: #fff;
    background-color: #58d5b7;
}
.infoactu {
    color: #ff5302;
}

.dropdown-menu:before {
    position: absolute;
    top: -7px;
    right: 9px;
    display: inline-block;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #ccc;
    border-left: 7px solid transparent;
    border-bottom-color: rgba(0, 0, 0, 0.2);
    content: '';
}

.dropdown-menu:after {
    position: absolute;
    top: -6px;
    right: 10px;
    display: inline-block;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #ffffff;
    border-left: 6px solid transparent;
    content: '';
}

/*------------------------ Fin Actualite -----------------------------*/

/********************************************************************/

/***************************** LISTE des CLUBS ******************/

#listeClubs {

}
#ongletsClubs {
    background-color: #ffffff;
    padding: 20px 0px;
}
#tabclub {
    background-color: #ffffff;
    padding-bottom: 20px;
}
#tabclub ul {
    background-color: #ffffff;
}
#tabclub ul li {
    background-color: #ffffff;
}

#pageEvenementClub .btn-black,
#placeContent .btn-black {
    margin: 20px;
}

.clubTable {
    margin: 10px 0px;
    background-color: #eeeeee;
    width: 100%;
}
.clubEtoile {
    background-color: #d3d3d3;
    padding: 0px 10px;
}
.clubEdition {
    background-color: #d3d3d3;
    color: #02223b;
    padding: 20px;
    vertical-align: top;
}
.clubEdition a {
    margin: 0 0 15px 0;
    display: block;
}
.clubVoir {
    background-color: #d3d3d3;
    color: #02223b;
    padding: 10px;
    vertical-align: middle;
}
.clubEffacer {
    background-color: #d3d3d3;
    color: #02223b;
    padding: 10px;
    vertical-align: bottom;
}
.clubContenu {
    background-color: #eeeeee;
    text-align: left;
    padding: 25px;
    width: 100%;
    font-size: 14px;
}
.clubTitre {
    width: 20%;
    /*border-left: 5px solid #092f57;*/
    padding: 0px 20px;
}
.clubListing {
    width: 90%;
    padding: 25px;
}
.clubListing h4 {
    display: inline-block;
    margin-right: 20px;
}
.clubListing h3 {
    margin: 0;
    font-weight: bold;
}
.clubListing p {
    margin: 20px;
}
ul.listeevnt {
    padding: 0 0 0 20px;
}

#club_type > div {
    display: inline-block;
}

#admin .clubTable {
    background: #f6f6f6;
    width: 47%;
    float: left;
    margin: 0 25px 25px 0;
    min-height: 155px;
    height: 155px;
}

#admin .clubTable:hover {
    background: #e6f9f4;
}

.actuTable,
.actuContenu{
    background: #ffb400;
}

.actuTable:hover,
.actuContenu:hover{
    background: #ffcb4d;
}

.actuTable {
    width: 100%;
    padding: 20px;
    margin-bottom: 25px;
}

.actuTable td {
}
.actuTable h3 {
    font-size: 16px;
    margin: 0 0 10px 0;
}
.actuDetails,
.actuDetails p {
    font-size: 14px;
    margin:0;
}
.actuDetails {
    padding: 20px;
}
.actuPicto {
    padding: 20px 0 20px 20px;
}
.actuEdition {
    border-top: 1px solid #092f57;
    padding: 10px 0 0 0;
    margin: 15px 0 0 0;
}
.actuEdition a {
    margin: 0 10px 0 0;
}


/*---------------------- Evènements du club -------------------------------*/

#evenementsClub {
    overflow: auto;
}


@media(max-width:330px) {
    /*---------------------------- PERSONNEL ----------------------------*/
    #tabclub li a {
        font-size: 12px;
    }
    /*-------------------------- FIN PERSONNEL --------------------------*/
}

/********************************************************************/

/***************************** PERSONNEL ******************/

#personnelHeader {
    padding: 0px 20px 20px 20px;
}

#personnelBody {
    padding: 0px 20px 20px 20px;
}

@media(max-width:767px) {
    /*---------------------------- PERSONNEL ----------------------------*/
    #personnelHeader {
        padding: 80px 20px 20px 20px;
    }
    /*-------------------------- FIN PERSONNEL --------------------------*/
}
@media(max-width:500px) {
    /*---------------------------- PERSONNEL ----------------------------*/
    #personnelHeader div.col-xs-6 {
        display: block;
        width: 100%;
        margin: auto;
    }
    #personnelHeader #textePersonnel h2 {
        text-align: center;
    }
    /*-------------------------- FIN PERSONNEL --------------------------*/
}

/********************************************************************/

/***************************** PARTENAIRES ******************/

#listePartenaires {

}


#tabpartenaires .nav-tabs {
    border: none;
    border-bottom: 1px solid #eeeeee;
}
#tabpartenaires .nav-tabs .onglet {
    padding: 0px 10px!important;
    margin: 0px;
    border: none;
}
#tabpartenaires .nav-tabs > li {
    width: 107px;
    margin: 0px 70px!important;
    display: inline-block;
    vertical-align: bottom;
}
#tabpartenaires .nav-tabs > li > a {
    border-radius: 0px;
    color: #02223b;
    height: 40px;
    padding: 0px!important;
    line-height: 42px;
    font-size: 16px;
    font-weight: normal;
    text-decoration: none;

}
#tabpartenaires .nav-tabs > li > a:hover {
    background-color: #ffffff;
    border: none;
}
#tabpartenaires .nav-tabs > li.active > a,
#tabpartenaires .nav-tabs > li.active > a:hover,
#tabpartenaires .nav-tabs > li.active > a:focus {
    background-color: #ffffff;
    font-weight: bold;
    cursor: default;
}
#tabpartenaires .nav-tabs > li .gras {
    color: transparent;
    font-weight: bold;
    position: absolute;
}
#tabpartenaires .nav-tabs > li:not(.active) .grasHover:hover .gras {
    color: #02223b;
}
#tabpartenaires .nav-tabs > li:not(.active) .grasHover:hover .pasgras {
    color: transparent;
}
#tabpartenaires li #couleurSantevet {
    background-color: transparent;
    height: 7px;
}
#tabpartenaires li.active #couleurSantevet {
    background-color: #8ec63f;
    height: 7px;
}
#tabpartenaires li #couleurHills div {
    background-color: transparent;
    height: 7px;
}
#tabpartenaires li.active #couleurHills div:first-child {
    background-color: #ed1b36;
    height: 7px;
    width: 50%;
    border: 0px;
}
#tabpartenaires li.active #couleurHills div:last-child {
    background-color: #0055a5;
    height: 7px;
    width: 50%;
    border: 0px;
}
#tabpartenaires .nav-tabs > li:not(.active) > a + br + img {
    display: none;
}
#tabpartenaires .nav-tabs > li.active > a + br + img {
    display: inline-block;
    position: absolute;
    top: 45px!important;
    margin-left: -10px!important;
}
#tabpartenaires .tab-content {
    padding: 5px 0px 0px 0px;
}
#tabpartenaires .tab-pane {
    margin: 0px 0px 20px 0px!important;
}

#tabpartenaires {
    background-color: #ffffff;
    padding: 0px;
}
#tabpartenaires ul {
    background-color: #ffffff;
    text-align: center;
    font-size: 0px;
}
#tabpartenaires ul li {
    background-color: #ffffff;
    float: none;
    display: inline-block;
}

#santevet img,
#hills img {
    width: 100%;
}
.SMART {
    display: none;
}
.bottom {
    margin-bottom: 20px;
}
.large {
    padding: 0;
}
#santevet p,
#hills p{
    color: #092f57;
    padding-right: 5%;
}
@media(max-width:600px) {
    /*----------------------- ONGLETS PARTENAIRES -----------------------*/
    .PC {
        display: none;
    }
    .SMART {
        display: block;
    }
    /*--------------------- FIN ONGLETS PARTENAIRES ---------------------*/
}
@media(max-width:560px) {
    /*----------------------- ONGLETS PARTENAIRES -----------------------*/
    #tabpartenaires .nav-tabs > li > a {
        font-size: 14px;
    }
    #tabpartenaires .nav-tabs > li {
        margin: 0px 4%!important;
    }
    /*--------------------- FIN ONGLETS PARTENAIRES ---------------------*/
    #santevet {
        font-size: 12px;
    }
}
@media(max-width:320px) {
    /*----------------------- ONGLETS PARTENAIRES -----------------------*/
    #tabpartenaires .nav-tabs > li {
        margin: 0px 2%!important;
    }
    /*--------------------- FIN ONGLETS PARTENAIRES ---------------------*/
}

/********************************************************************/

/***************************** FOOTER ******************/
footer {
    width: 100%;
    height: 75px;
    margin-top: 25px;
}
#logoPartenaireFooter {
    color: #02223b;
    padding: 0px;
    text-align: left;
}
#logoPartenaireFooter a {
    color: #58d5b7;
    text-decoration: none;
}
#logoPartenaireFooter a:hover {
    color: #58d5b7;
    text-decoration: underline;
}
#footerMentionsLegales {
    padding: 25px 0;
    font-size: 12px;
}
#footerMentionsLegales::before {
    content: "";
    width: 0px;
    display: inline-block;
    vertical-align: middle;
}
#footerMentionsLegales > div {
    display: inline-block;
    vertical-align: middle;
}
/*----------------------- BOUTONS PARTENAIRES -----------------------*/
#partenairesMobile {
    color: #02223b;
    font-weight: bold;
    overflow: auto;
    font-size: 0;
}
#partenairesMobile > div:first-child {
    background-color: white;
    padding: 7px 5px 0px 0px;
}
#partenairesMobile > div:last-child {
    background-color: white;
    padding: 7px 0px 0px 5px;
}
#partenairesMobile > div:hover {
    cursor: pointer;
}
#partenairesMobile a {
    color: #02223b;
    font-size: 14px;
    text-decoration: none;
}
#partenairesMobile a:hover {
    color: #02223b;
    text-decoration: none;
}
#btnSantevetMobile,
#btnHillsMobile {
    background-color: #eeeeee;
    padding-top: 7px;
}
#btnSantevetMobile > div {
    height: 7px;
}
#btnSantevetMobile:hover > div {
    Background-color: #8ec63f;
}
#btnHillsMobile > div:not(.clearfix) {
    width: 50%;
    height: 7px;
    display: inline-block;
}
#btnHillsMobile:hover > div:nth-child(2) {
    Background-color: #ed1b36;
}
#btnHillsMobile:hover > div:last-child {
    Background-color: #0055a5;
}
/*--------------------- FIN BOUTONS PARTENAIRES ---------------------*/
@media(max-width:767px) {
    /*----------------------- BOUTONS PARTENAIRES -----------------------*/
    footer {
        height: 100px;
    }
    #footerMentionsLegales {
        height: 59px;
    }
    /*--------------------- FIN BOUTONS PARTENAIRES ---------------------*/
}
@media(max-width:350px) {
    /*----------------------- BOUTONS PARTENAIRES -----------------------*/
    #footerMentionsLegales {
        font-size: 12px;
    }
    /*--------------------- FIN BOUTONS PARTENAIRES ---------------------*/
}

/*--------------------------- ANNUAIRES ---------------------------------*/
#ajoutAnnuaire input {
    margin-bottom: 5%;
}
.couvertureAnnuaire {
    box-shadow: 0 0 5px grey;
}
#formAjoutAnnuaire {
    background-color: #ffffff;
    position: absolute;
    display: none;
    padding: 1.5%;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    margin-bottom: 3%;
    z-index: 1000;
}
#ajoutAnnuaire legend {
    cursor: pointer;
}
#ajoutAnnuaire legend > .glyphicon {
    float: right;
}
#ajoutAnnuaire .alert {
    display: none;
    text-align: left;
}
#ajoutAnnuaire .alert-danger ul {
    color: #a94442 !important;
    list-style: none;
    margin: 0;
    padding: 0;
}
#listeAnnuairesExistants {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
#listeAnnuairesExistants > div {
    margin-bottom: 2%;
}
#listeAnnuairesExistants a {
    text-decoration: none;
}
.annuaireExistant {
    box-shadow: 0 0 2px grey;
    border-radius: 3px;
    padding: 5px;
}
.annuairesContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.annuairesContainer > div {
    margin-bottom: 3%;
}
.couvertureContainer {
    padding: 0;
    background-color: grey;
}
.shadow-bottom {
    box-shadow: 0 50px 100px grey;
}
.annuairesContainer img:hover {
    opacity: 0.7;
}
.highlight {
    background-color: #fffa74;
}
/*------------------------- FIN ANNUAIRES -------------------------------*/

/*------------------------ AJOUT ETUDIANTS ------------------------------*/
#exempleTableauExcel {
    overflow-x: auto;
}
#exempleTableauExcel > table th, #exempleTableauExcel > table td  {
    white-space: nowrap;
    padding: 8px;
}

/*---------------------- FIN AJOUT ETUDIANTS ----------------------------*/