/*******************************************************************************************
                                            Body
*******************************************************************************************/
 
/*********************
        Police  
*********************/

@font-face {
    font-family: Orsys2020;
    src: url("/ContentV11/font/open-sans/OpenSans-Regular.ttf");
}



/*********************
        Tout  
*********************/

html {
    height: 100%;
    font-size: 12pt;
    padding: 0px;
    margin: 0px;
    background-color: #FFFFFF;
    overflow-x: hidden;
}


h1, h2, h3 {
    font-weight:normal; 
    /*margin-block-start: 0; 
    margin-block-end: 0;
    margin: 0px !important;*/
}

header {
    background-color: #FFFFFF;
    margin-left: auto;
    margin-right: auto;
}

nav {
    background-color: #FFFFFF;
    margin-left: auto;
    margin-right: auto;
}

body {
    font-size: 12pt;
    color: #000000;
    /*font-family: 'Orsys2020', 'webdings';
    font-family: Open Sans, 'arial';*/
    font-family: Lato;
    line-height: 1.4;
    padding: 0px;
    margin: 0px;
}

footer {
    padding: 0px;
    margin: 0px;
}


container {
    position: relative;
}


/********************************
        nettoyage navigateur   
********************************/

.sansCroixIe::-ms-clear { display: none; }



/*********************
        Menu commun  
*********************/

.lien { color: #000000; }

/* mise en gras de la ligne survolée */
.lien:hover { font-weight: bold; }

.catCol {
    background-color: #FFFFFF;
    /*background-color:#F3F2F1;*/
}

.catDeroulant {
    margin: auto;
}
.domTitle:hover { font-weight: bold; }

/*********************
        Corps  
*********************/


/* ******************** MENU Desktop - 1200px ******************** */ 

@media screen and (min-width: 800px) {

/*****************************
|    mise en page générale   |
*****************************/

    header { padding: 0px; }
    nav { padding: 0px; }

    .container {
        width: 1200px;
        margin:-6px auto 0px auto;
        padding:0px;
        background-color: #FFFFFF;
    }

    .largeur{
        width: 1200px;
    }


            
/*****************************
|       Classe commune       |
*****************************/
    
    .onlyLarge { }
    .onlySmall { display: none; }

    .inlineLargeBlockSmall { display: inline-block; }
    .inlineBlockLarge { display: inline-block; }
    .inlineBlockSmall { display: none; }
    .flexBlockLarge { display: flex; }
    .flexBlockSmall { display: none; }
    .tableBlockLarge { display: table; }
    .tableBlockSmall { display: none; }
    .inlineSmall { }
    .ctrSmall { }

    .onlyLarge100 {  width:100%; }
    .onlySmall100 { }

    .separateurGris { margin: 0px auto 20px auto; }


    .retrait { padding: 10px 40px 10px 40px; }
    .padding40 { padding: 40px; }
    .decallageGauche { margin-left: 40px; }
    .decallageGauche80 { margin-left: 80px; }
    .decallageGauche20 { margin-left: 20px; }
    .paddingGauche40 { padding-left: 40px; }
    .paddingGauche20 { padding-left: 20px; }
    .paddingGaucheRight { padding: 0px 20px; }
    .paddingCentre { padding:10px 210px; }

    .paddingTop40 { padding-top:40px; } 
    .marginTop20 { margin-top: 20px; }
    .marginSmall{  }

    .photo { width:1200px;}

    #fileAriane { font-size: 10pt; }

    #popup { margin-left: 650px; animation: popupMove 2000ms;  }
    #popupB {width: 500px;} 
    #etoilesBloc {width: 63%;}
    #demandeDevis_intraSurMesure { padding-left: 150px; padding-right: 150px; }
    #demandeDevis_intraStandard { padding-left: 150px; padding-right: 150px; }

    /*****************************
    |   Gabarit   |
    *****************************/ 
    .duoEspace { margin-left: 65px; margin-right: 65px; } 

    .blocTrio1 { margin-top: -250px; }
    .blocTrio2 { margin-top: -300px; }
    .blocTrio3 { margin-top: -180px; }
    .blocTrioText { width: 345px; }
    .blocTrioWidth { width: 325px; margin: 40px 25px 10px 25px;  }
    .blocPresPictoTrio { height: 290px; }
    .blocSolution { padding:0px 4%; }
    .blocDuo { padding:10px 50px; }


    .blocNumeroDescription { width: 100%; }
    .blocParagraphePhoto { float:left; width: 650px; padding-right: 10px; }   
    .blocVideo { float:left; max-width: 600px; padding: 0px 10px; }
    .blocVideoText { float:left; max-width: 540px; padding: 0px 20px; }

    .blocBoutonJauneTrio  { width: 399px;  display: inline-block; }

    .questionReponse{ float: left; width: 620px; padding-top: 20px; padding-left: 30px;padding-right: 20px; }
    .blocTrioDbPicto { margin:0px 30px; }
    .width50PercentLarge { float: left; width: 50%; }
    .width65PercentLarge { float: left; width: 65%; }
    

/********************************
|   id/classe propre à 1 page   |
********************************/

    .catCol { width: 300px; padding:0 20px;}
    .catColPage { width: 360px; padding:0 20px;}
    .catDeroulant { width: 1026px; }
    .catDomDeroulant { width:100%; }
    .catDomWidth { width:300px; }

    .catSousDomVille { margin-top: 2px; }
    .catSousDomVilleButton { width:330px;  }
    .colonneText { display: inline-block; width: 60%; }
    
    /* body */

    #header_inscription { margin-left: 40px; font-size: 12pt;  }

    #header_contactInt { margin-right: 60px; margin-top: -55px; }
    #header_phone { padding-left: 12px; padding-right: 20px; vertical-align: top; }
    #centre_expert { margin-top: -187px; }
    #centre_expert_menu { height: 40px; margin-top:45px; margin-bottom: 30px; }
    .centre_expert_gabarit { width: auto; margin-left: 50px; padding-right: 50px; font-size: 14pt; font-weight: bold;display: list-item; float: left; list-style-position: outside; text-align: center; }
    #footerColoneDroiteFra { position: relative; float:left; width:555px; margin-left: 40px; }
    #footerColoneDroiteAfr { position: relative; float:left; width:320px; margin-left: 460px; }

    /* pages */
    #home_sanitaire { line-height:26px; }
    #opcoActionCo_financement { padding-bottom:700px; }
    #cad_editeur { min-height:310px; }

    #fad_bouton{ margin-left: 600px; }
    #listCours { width:750px }

    .planningColGauche { float: left; width:50%;margin-left: 10%; }
    .planningColDroite { float: left; width:40%;}
    .planningLargeurMenuDeroulant { width: 420px; }
    .planningcolOne { width: 18%; }

    .temoignageCom { padding-top: 90px; font-size: 12pt;  }

    /* moteur de recherche */
    #other #IN #MA #CM { font-size: 16pt; }

    .index_financeFormation { background-color: #F3F2F1; margin-top: -140px; padding-top: 90px; height:550px; }
   
    .centre_carreLogoRef { margin: 20px 29px;  width:130px; display:inline-block; }
    .centre_carreLogoRefWidth { max-width:110px; }

    #intraSurMesure_ListeTitrePictoTrio { margin-top: -430px; }
    .rechercheExt_70p { width: 70%; }


    .width_70p { width: 70%; }
    .width_60p { width: 60%; }
    .width_50p { width: 50%; }
    .width_40p { width: 40%; }
    .width_30p { width: 30%; }

    /*#recherche_SearchBarre { margin: 0px 29px;}*/
    #centre_MapsText { float:left; width: 30%; }
    #centre_MapsGoogle { float:left; width: 50%; }
    #centre_Description { float:left; width:60%; }

    #recherche_Title { font-size:22pt; }
    #recherche_Menu { max-width: 35%;padding: 0px 20px 0px 20px; float:left; }
    #recherche_Resultats { float:right; width: 60%; }

    #formation_body { float:left; width: 63%; }
    #formation_encart { position:fixed; top: 150px; margin-left: 800px; width: 380px; padding-top: 5px; }
    .formation_sessionDate { width: 325px; }
    .formation_sessionVille { width: 170px; }
    #formation_trademarks { width: 80%; margin-left: 100px; }

    #session, #contact { float:left; width: 70%; padding-left:7%; }

    #cpf_commentMarcheDif { width: 280px; }
    .coursCertifiants_certifs { height: 26px; margin:0px 10px; }
    .coursDigitaux_certifs { height: 45px; margin:0px 40px; }
}


/* ******************** MENU responsive - 500px ******************** */
@media screen and (max-width: 799px) {

    /*****************************
|    mise en page générale   |
*****************************/

    body { width:99%;}
    header { padding: 0px 0px 0px 1px; }
    nav  { padding: 1px 0px 0px 0px; }

    .container {
        width:97%;
        max-width: 800px;
        padding:5px;
        background-color: #FFFFFF;
    }

    .largeur{
        min-width:100%;
        max-width: 800px;
    }

        
/*****************************
|       Classe commune       |
*****************************/
    
    .onlyLarge { display: none; }
    .onlySmall {  }
    
    .inlineLargeBlockSmall { display: block; }
    .inlineBlockLarge { display: none; }
    .inlineBlockSmall { display: inline-block; }
    .flexBlockLarge { display: none; }
    .flexBlockSmall { display: flex; }
    .tableBlockLarge { display: none; }
    .tableBlockSmall { display: table; }
    .inlineSmall { float:left; }
    .ctrSmall { text-align: center; }

    .onlyLarge100 { }
    .onlySmall100 { width:100%; }
    
    .separateurGris { margin: 10px auto; }

    .retrait { padding: 10px 0px; }
    .paddingGauche40 { }
    .paddingGauche { padding-left: 10px; }
    .paddingGaucheR { padding-left: 10px; margin-top:50px;}
    .paddingCentre { padding:10px; }


    .paddingTitreFormation { padding: 20px 0px; cursor: pointer; }
    .paddingTop40 { padding-top:0px; } 
    .marginTop20 { margin-top: 0px; }

    .introduction { padding: 0px 4px; }
    .photo { width:100%;}

    #fileAriane { font-size: 10pt; float:left; margin-top: 10px; margin-left:10px; width:95% }
    #popup {width:100%; text-align:center; animation: popupMoveR 2000ms; margin-left:-7px; } 
    #popupB { text-align:left; width: 350px; display:block; margin:auto; } 


    #footerColoneDroiteFra { position: relative;text-align:left; padding: 10px 0px; }
    #footerColoneDroiteAfr { position: relative;text-align:center; padding: 10px 0px; }

    .footer { padding-bottom: 42px; }
    #footerClair {     }

    /*****************************
    |   Gabarit                  |
    *****************************/ 

    .duoEspace { width: 90%; } 
    .blocTrio1 { margin-top: 20px; }
    .blocTrio2 { margin-top: 20px; }
   
    .blocTrioWidth { width: 320px; margin: 40px 20px 10px 20px;  }

    .blocNumeroDescription { width: 90%; }
    .blocParagraphePhoto { width:95%; }
    .blocVideo { max-width: 480px; padding: 10px 10px; }
    .blocVideoText { max-width: 450px; padding: 10px 40px 10px 20px ; }
    .questionReponse{ width: 95%; padding:5px; }
   
    .blocBoutonJauneTrio  { width: 100%; }
    .blocDuo { padding:10px 20px; }



/********************************
|   id/classe propre à 1 page   |
********************************/

    .catCol .catColPage { padding-left:20px; }
    .catDeroulant { width: 100%; }
    .catDomDeroulant { text-align:center; }
    .catDomWidth { width:95%; }
    
    .catSousDomVille { margin-top: 16px; }
    .colonneText { width:100%; display: inline-block; }

    /* body */
    #header_logo { height: 40px;}

    #header_inscription { margin-left: 10px; font-size: 10pt; vertical-align:top; padding-top: 20px; }
    #header_contactInt { margin-right: 10px;max-width: 70%; text-align:right; margin-top: -45px; }
    #header_phone { margin-left: 50px;  }
    #centre_expert { margin-top: 10px; text-align:center;  background: linear-gradient(#00ACC6 , #007792);height:auto; padding:20px; }
    #centre_expert_menu { margin-top: 10px; list-style:none; }
    .centre_expert_gabarit { text-align:center; margin-top:15px; width:100%;}
    
    /* pages */
    #home_sanitaire { }
    #opcoActionCo_financement { padding-bottom:870px; }
    #cad_editeur { min-height:300px; }
    #listCours { width:95%; }
    
    .planningColGauche {  }
    .planningColDroite {  }
    .planningLargeurMenuDeroulant { width: 90%; }
    .planningcolOne { width: 90%; }
    /*.planningcolAutre { float:left; width: 90%; }*/
    .temoignageCom {  padding-top: 20px; width: 80%; margin-left: -60px; font-size: 10pt;  }

    /* moteur de recherche */
    #other #IN #MA #CM {  font-size: 12pt; }

    .index_financeFormation { }
   
    .centre_carreLogoRef { float: left; margin: 10px 0px; display:block;  width:100%; text-align:center; }
    .centre_carreLogoRefWidth { min-width:200px;max-width:250px; padding: 0px 0px; }

    #intraSurMesure_ListeTitrePictoTrio { margin-top: 10px; }
    .rechercheExt_70p { width: 90%; }

    .width_70p { width: 95%; }
    .width_60p { width: 95%; }
    .width_50p { width: 95%; }
    .width_40p { width: 95%; }
    .width_30p { width: 95%; }

    /*#recherche_SearchBarre { margin: 0px 29px;}*/
    #centre_MapsText {  width: 90%; }
    #centre_MapsGoogle {  width:100%; }
    #centre_Description { width:100%; }

    #recherche_Title { float:left; padding-bottom:5px; width:100%; font-size:18pt; }
    #recherche_Menu { text-align: center; width:100%; }
    #recherche_Resultats { float:left; width: 100%; }

    #formation_body { width: 100%; }
    #formation_encart { position: relative; width: 100%; }
    .formation_sessionDate { width: 53%; }
    .formation_sessionVille { margin-left: 4%; width: 41%;  text-align: right; }
    #formation_trademarks { }


    #session { width: 100%; }

    #cpf_commentMarcheDif { width: 500px; margin-top:20px; }
    .coursCertifiants_certifs .coursDigitaux_certifs { min-width: 70px;max-width: 150px; max-height:70px; padding:15px 100px; }
    
}


@keyframes popupMove {
    from {
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
    }

   
    to {
        -webkit-transform: translate(0, 160px);
        -moz-transform: translate(0, 160px);
        -o-transform: translate(0, 160px);
        -ms-transform: translate(0, 160px);
    }

}



@keyframes popupMoveR {
    from {
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
    }

   
    to {
        -webkit-transform: translate(0, 70px);
        -moz-transform: translate(0, 70px);
        -o-transform: translate(0, 70px);
        -ms-transform: translate(0, 70px);
    }

}
    
    

/*********************
        File ariane  
*********************/

#filAriane {
	list-style-type:none;
	padding-left:0px;
	font-size:12pt;
    margin-bottom:20px;
    margin-top:5px;
	color:#098289;	
}

.loader {
position : fixed;
z-index: 9999;
background : url('icon-loader.gif') 50% 50% no-repeat;
top : 0px;
left : 0px;
height : 100%;
width : 100%;
cursor : wait;
}

/*******************************************************************************************
                                              Button
*******************************************************************************************/

.bouton_Jaune {
    color:#000000;	
    background-color:#FEC809;
    margin: 0px 5px;
    padding: 5px 15px 8px 15px;
    border-radius: 8px; 
}


.bouton_Jaune:hover {
    color:#FFFFFF;	
    background-color:#42667D;
}


.bouton_Bleu {
    color:#FFFFFF;	
    background-color:#42667D;
}


.bouton_Bleu:hover {
    color:#000000;	
    background-color:#FEC809;
}

.buttonImage { }

.buttonImage:hover {
    background-color:  #DFE2E2;
}


.button { }
    

.button:hover {
    font-weight:bold;
}



a, a:visited, a:hover         {   text-decoration:none; }
a:active, a:focus, a:hover  {   outline:none; }
input[type="image"] {   outline:none; } 

/*input[type="text"]:active, input[type="text"]:hover, input[type="text"]:focus {  border:none; outline:none;*/  }

/*******************************************************************************************
                                            Background
*******************************************************************************************/

.b_bleuClair {
    background-color:  #00ACC6;     /* (0,172,198) */
}

.b_bleuVert {
    background: linear-gradient(#00ACC6 , #007792);     /* (0,176,151) #00B097 | (0,172,198) #00ACC6 */
}




.b_bleuTurquoise {
    background-color: #007792;     /* (0,119,146) */
}

.b_bleubouton {
    background-color: #195F73;       
}

.b_bleu {
    background-color: #1694A9;       
}


.b_gris {
    background-color: #E7E7E8;
}


.b_grisNew {
    background-color: #F2F4FA;
}


.b_grisClair {
    background-color: #F3F2F1;
}

.b_grisFonce {
    background-color: #DFE2E2;
}
    
.b_grisTresFonce {
    background-color: #8A8C89;
}

.b_jaune {
    background-color: #FEC809;
}   

.b_orange {
    background-color: #F26923;
}

.b_rouge {
    background-color : #FF0000;
}

.b_violet {
    background-color: #8B74A2;
}
    
.b_blanc {
    background-color: #FFFFFF;
}   


/*******************************************************************************************
                                                Color
*******************************************************************************************/
.c_blanc {
    color: #FFFFFF;
}

.c_bleuClair {
    color: #00ACC6;     /* (0,172,198) */
}

.c_bleuTurquoise {
    color: #007792;     /* (0,119,146) */
}

.c_bleuVert {
    color: #098289 !important;     /* (9,130,137) */
}

.c_brunOr {
    color: #A57C30;
}

.c_jaune {
    color: #FEC80A;
}

.c_gris {
    color: #838383;
}

.c_orange {
    color: #F26923;
}

.c_rouge {
    color: #FF0000;
}

.c_corail {
    color: #F37887;
}

.c_bordeau {
    color: #B4212B;
}

.c_rougeBrun {
    color: #5F0000;
}

.c_violet {
    color: #8B4B6C;
}

.c_vertClair {
    color: #8BB73E;
}

.c_vert {
    color: #2E7A72;
}

.c_noir {
    color: #000000;
}

.c_noir2 {
    color: #231F20;
}



/*******************************************************************************************
                                                Font size
*******************************************************************************************/

.size40 {
    font-size: 40pt;
} 

.size28 {
    font-size: 28pt;
}

.size26 {
    font-size: 26pt;
}

.size24 {
    font-size: 24pt;
}

.size22 {
    font-size: 22pt;
}

.size20 {
    font-size: 20pt;
}

.size18 {
    font-size: 18pt;
}

.size16 {
    font-size: 16pt;
}
    
.size14 {
    font-size: 14pt;
}
    
.size13 {
    font-size: 13pt;
}    

.size12 {
    font-size: 12pt;
}
    
.size11 {
    font-size: 11pt;
}
    
.size10 {
    font-size: 10pt;
}

.size08 {
    font-size: 8pt;
}



.width260 { width:260px; }
.width285 { width:285px; }
.width300 { width:300px; }
.width340 { width:340px; }
.width355 { width:355px; }
.width360 { width:360px; }
.width400 { width:400px; }

/*******************************************************************************************
                                                Mise en page
*******************************************************************************************/

.inlineBlock { display: inline-block; }
.inlineBlockTop { display: inline-block; vertical-align: top; }

.vertMiddle { vertical-align: middle; }
.cursorPointer { cursor: pointer; }

/*******************************************************************************************
                                                Marge
*******************************************************************************************/


.mrgTop5  { margin-top: 5px; }
.mrgTop10 { margin-top: 10px; }
.mrgTop15 { margin-top: 15px; }
.mrgTop20 { margin-top: 20px; }
.mrgTop25 { margin-top: 25px; }
.mrgTop30 { margin-top: 30px; }
.mrgTop35 { margin-top: 35px; }
.mrgTop40 { margin-top: 40px; }
.mrgTop45 { margin-top: 45px; }
.mrgTop50 { margin-top: 50px; }

.mrgAutoHor { margin-left: auto;  margin-right: auto; }


.bordureGaucheJaune {
    border-left-color: #FEC809;
    border-left-style: solid;
    padding: 0px 5px 2px 10px;
}

/*******************************************************************************************
                                                Puce
*******************************************************************************************/

.puceRonde {    
    display: list-item;
    list-style-type: disc;
}

.puceCarreBleue {   
    display: list-item;
    list-style-type: square;
    color: #1694A9;
}



/*******************************************************************************************
                                                Split
*******************************************************************************************/


.relativ {
    position: relative;
}

.relativLeft {
    position: relative;
    float: left;
}

.relativRight {
    position: relative;
    float: right;
}

.large100 {
    width:100%;
}

.large95 {
    width:95%;
}

.large90 {
    width:90%;
}




/*******************************************************************************************
                                                Table
*******************************************************************************************/
.table {
	display:table;
	width:100%;
}

.cell {
	display:table-cell !important;
	vertical-align:middle;
}




/*******************************************************************************************
                                                Texte
*******************************************************************************************/

.gras {
    font-weight:bold;
}

.slg {
	text-decoration:underline;	
}

slgJaune{
	text-decoration:underline;	
}


.left {
    text-align: left;
}

.ctr {
    text-align: center;
}

.right {
    text-align: right;
}

.italique {
    font-style:italic;
}

.justify {
    text-align: justify;
}

.titreSlgSup {
	border-bottom: 4px solid #098289;
    padding-left: 25px;
    padding-right:  25px;
    padding-bottom: 3px; 
}

.titreSlgInf {
	border-bottom: 4px solid #098289;
    padding-left: -45px;
    padding-right: -45px;
    padding-bottom: 3px; 
}


.titreSlgJauneSupDroit {
	border-bottom: 4px solid #FEC80A;
    padding-right:  65px;
    padding-bottom: 3px; 
}


.slgHover:hover  {
	text-decoration:underline;	
    color: #098289;
}


/*******************************************************************************************
                                                Onglet
*******************************************************************************************/

    .onglet {
        position: relative;
        float: left;
        background-color: #FFFFFF;
    }

    .inactif {
        text-decoration:underline;
        color: #808080;
    }

    .actif {
        text-decoration:overline;
        color: #098289;
    }

.slick2-list {
    overflow: unset!important;
}

.slick2-list div {
    display: inline-block;
}

.slick2-slide > div > div {
    width: auto !important;
}

.c_0, .c_0_t, .c_0_a {
    display: none;
}
.c_1_t {
    position: absolute;
    left: 0px;
    top: 48px;
    width: 33px;
    height: 1px;
    background-color: #0099A9;
    display: block;
}
.c_1_a {
    position: absolute;
    left: 50px;
    top: 33px;
    width: 50%;
    font-size: 20px;
    font-style: italic;
    color: #0099A9;
    display: block;
}
.c_1 {
    position: absolute;
    left: 50px;
    bottom: 50px;
    width: 45%;
    display: block;
}
.c_1 .t {
    font-size: 20px;
    font-weight: 800;
    color: #0099A9;
    display: block;
}
.c_1 .d {
    font-size: 18px;
    color: #000000;
    margin-top: 20px;
    margin-bottom: 20px;
    min-height: 50px;
    display: block;
}
.c_1 .b {
    font-size: 18px;
    font-weight: 800;
    color: #000000;
    background-color: #FED201;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10%;
    padding-right: 10%;
    border-radius: 10px;
    width: fit-content;
    display: block;
}

@media screen and (max-width: 799px) {
    .c_1_a, .c_1 .t {
        font-size: 15px;
    }
    .c_1 .d, .c_1 .b {
        font-size: 12px;
    }
}