@font-face {
    font-family: 'HelveticaNeue';
    src: url('GraublauWeb.eot');
    src: local('❤'),
        url('GraublauWeb.woff') format('woff'),
        url('GraublauWeb.otf') format('opentype'),
        url('GraublauWeb.svg#grablau') format('svg');
}

@font-face {
    font-family: 'Avenir';
    src: url('GraublauWeb.eot');
    src: local('❤'),
        url('GraublauWeb.woff') format('woff'),
        url('GraublauWeb.otf') format('opentype'),
        url('GraublauWeb.svg#grablau') format('svg');
}

.ui-selectonemenu .ui-selectonemenu-trigger{
    z-index: 0 !important;
}

.Card-10-raison{
    position: relative;
    border: 1px solid #eee;
    box-shadow: 0.5px 0.5px 6.5px #eee;
}

.MaxHeigth{
    height: 8em;
    overflow: hidden;
}

.FontArticleSource {
    font-size: 16px;
    font-style: normal;
    font-variant: normal;
    color: #999999;
}
.Card-ruban{
    box-sizing: border-box;
    position: absolute;
    top:272px;
    left: -5px;
    padding: 0px 0 0 5px;
    margin: 0px;
    background-image: url('ruban.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 223px 40px;
    width: 223px;
    height: 40px;
    line-height: 40px;
    color: #fff;
}




#searchbar2{
    font-weight: bold;
    font-family: 'HelveticaNeue'; 
    border: none;
    height: 34px;
    background-color: #EEEEEE;
    border-radius: 18px;
    padding: 5px 40px;
    color: #A9A9A9;
    width: 90%;
    overflow: hidden;
    left: 0%;
}

.ui-datascroller {
    border: none !important;
}

.ui-datascroller .ui-datascroller-item {
    border-bottom: solid 0px #d1d3d4 !important;
}

.fieldset-customed{
    min-height: 210px !important; 
    border-radius: 0px !important;
}
.fieldset-no-padding{
    padding: .6em .1em;
}
span.required{
    font-size: 22px;
    color: #dc3545 !important;
}

.Botton5px{
    margin-bottom: 5px;
}
.soustitre
{
    color: #009E60;
    font-size: 22px;
    font-weight: bold
}

.table-unbordered{    
    border: none;  
}

.TitreActualite{
    color: #009560;
    font-weight: bold;
    font-size: 28px
}

.TitreSectionColor{
    color: #F88100;
}
.TitreColorNoire{
    color: #000000;
    font-family: HelveticaNeue;
}
.DatePositionStyles{
    left: 10px;
    bottom:10px;
}


.ActuFontColor{
    color: #000000;
}
.ActuImgBorder{
    border: 1px solid #014111;
}
.ActuDatePosition{
    left: 0%;
    bottom: 0.5%;
}
.ActuDatePositionActuDetails{
    left: 2%;
    bottom: 3.5%;
}
span.DateActualite{
    font-weight: bold;
    text-align: center;
    display: inline-block;
    padding: 1%;
    background-color: #F88100;
    color: #FFFFFF;
    bottom: 5px;
    left: 0px;
}
div.DateActualite100{
    font-weight: bold;
    text-align: center;
    display: inline-block;
    padding: 1%;
    background-color: #F93;
    color: #FFFFFF;
}
div.agenda-date {
    box-sizing: border-box;
    padding: 10% 20%; 
    width: 85%;
    height: 110px;
    background: #F93;
    float: left;
    text-align: center;
}
div.communique-box {
    height: 110px;
    background: #FFF;
    margin-bottom: 5px;
    padding: 5px;
    color: #fff;
    align-content: center;
    font-weight: bold;
}
div.box-date {
    box-sizing: border-box;
    padding: 6% 20%; 
    width: 100%;
    background: #F90;
    float: left;
    text-align: center;
    min-height: 100px;
    
}
span.actu-box-date {
    width: 60px;
    height: 60px;
    background: #F90;
    position: absolute;
    bottom: 0;
    left: 0;
    color: #FFF;
    text-align: center;
    font-weight: bold;
}


div.DateActualite100 p{
    margin: 5px auto;
}
span.DateActualiteWidth1{
    width: 30%;
}
span.DateActualiteWidth2{
    width: 50%;
}
div.DateActualiteWidth100{
    width: 90%;
    height: 88px;
}
span.DateActualiteDetails{
    font-weight: bold;
    text-align: center;
    display: inline-block;
    padding: 2%;
    background-color: #F88100;
    color: #FFFFFF;
    width: 5%;
    bottom: 13px;
}
.PadingLeft{
    padding-left: 7% !important;
}
.PadingLeft8{
    padding-left: 12%;
}
.HomePading{
    padding-left: 3% !important;
}
.PadingLeftRight{
    padding-left: 7% !important;
    padding-right: 7% !important;
}
.PadingRight{
    padding-right: 7% !important;
}
.PadingLeft5{
    padding-left: 5% !important;
}
.PadingLeftRight10{
    padding-left: 10% !important;
    padding-right: 10% !important;
}
.PadingLeftRight8{
    padding-left: 8% !important;
    padding-right: 8% !important;
}
.PadingLeftRight5{
    padding-left: 5% !important;
    padding-right: 5% !important;
}
.PadingRight5{
    padding-right: 5% !important;
}
.PadingLeft3 {
    padding-left: 3% !important
}
.BoldBlack{
    color: #000;
    font-weight: bold;
}
.PadWithBorder10P120{ 
    border-top:solid 0px transparent;
    border-bottom:solid 0px transparent;
    border-left:solid 120px transparent;
    border-right:solid 120px transparent;
}
.MoisActualite{
    font-size: 160%;
}
.JourActualite{
    font-size: 200% ;
}
.JourActualite250{
    font-size: 250% ;
}
.PubTextCoulor{
    font-size: 170%;
    color: #010101;
}
.BradcrumbColor{
    color: #999999;
    font-weight: normal;
}
.WhiteBackground{
    background-color: #FFFFFF;
}
.HomeSection2BgColor{
    background-color: #EEEEEE;
}
#HomeSection4BgColor{
    background-color: #F88100;
}
#HomeSection5BgColor{
    background-color: #F88100;
}
#BoutonBackGroundColor{
    font-family:  'HelveticaNeue';
    background-color: #009560; 
    width: 100%;
    color: #FFFFFF;
    border: 1px solid #009560;
    border-radius: 0px !important;
    text-align: center;
    height: 45px !important;
}
button#PlusActus{
    background-color: #009560;
    width: 100%;
    color: #FFFFFF;
    border: 1px solid #009560;
    border-radius: 0px !important;
    text-align: center;
    height: 45px;
}
button#PlusActus:hover,button#PlusActus:focus {
    background-color: #0b7550;
    width: 100%;
    color: #FFFFFF;
    border: 1px solid #009560;
    border-radius: 0px !important;
    text-align: center;
    height: 45px;
}
button#BoutonBackGroundColor:hover, button#BoutonBackGroundColor:focus{
    font-family:  'HelveticaNeue';
    background-color: #FFFFFF; 
    width: 100%;
    color: #009560 ;
    border: 1px solid #009560;
    border-radius: 0px !important;
    text-align: center;
}
img.disparaitre-img {width: 99.8%; height: 455px; top:0px; left: 0px;}

.Section3BgColor{
    background-color: #009560;
}
.FontHelveticaNeue{
    font-family:  'robotolight'; 
}
button#BoutonPlusDeServces{
    font-family:  'HelveticaNeue';
    background-color: #FFFFFF; 
    width: 100%;
    height: 45px;
    color: #3FADB7;
    border: 1px solid #FFFFFF;
    border-radius: 0px !important;
    text-align: center;
}
button#BoutonPlusDeServces:hover,button#BoutonPlusDeServces:focus{
    font-family:  'HelveticaNeue';
    background-color: #009560; 
    width: 100%;
    height: 45px;
    color: #FFFFFF;
    border: 1px solid #009560;
    border-radius: 0px !important;
    text-align: center;
}
#BtnPlusDeService{
    background-color: #FFFFFF;
    color: #00939F;
    border-radius: 0;
}
.ui-accordion-header,
.ui-accordion .ui-accordion-header.ui-state-hover,
.ui-accordion .ui-accordion-header.ui-state-active,
.ui-accordion ui-tabs-outline{
    background-color: #EEEEEE;
    border-color: #EEEEEE;
}
.RaduisedCard{
    border-radius: 55px; 
    background-color: #DDDDDD;
}
.BarnnerBack{
    background-color: #00939F;
}
.TransParenceBack{ background-color: transparent !important;}
.EmptyBox3{ display:block; width:100%; height:3px; overflow:hidden;}
.EmptyBox2{ display:block; width:100%; height:2px; overflow:hidden;}
.EmptyBox1{ display:block; width:100%; height:1px; overflow:hidden;}
.EmptyBox55{ display:block; width:100%; height:55px; overflow:hidden;}
.BackGroundVert{background-color: #009461;}
.GrayLightBackground{ background-color:#CCCCCC}
.GrayDarkBackground{background-color: #4F4F4F;}
.EventIconColor{ color: #000000;}
.Fs35{font-size:34px !important;}

.EmptyBox22{ display:block; width:100%; height:22px; overflow:hidden;}
.EmptyBox24{ display:block; width:100%; height:24px; overflow:hidden;}
.EmptyBox15{ display:block; width:100%; height:15px; overflow:hidden;}
ul#outilsDisponibles li{
    color: #FFFFFF;
    font-family:'HelveticaNeue';
    line-height: 20px;
    list-style-image: url('if_check_925925.svg')
}
#ButtonTransparentOtls{
    background-color: transparent;
    color: #FFFFFF;
    min-width: 30%;
    border: 1px #FFFFFF solid;
    padding: 0px 7px 0px 7px;
}
#ButtonTransparentOtls.ui-state-hover, #ButtonTransparentOtls.ui-state-focus{
    color: #049662 !important;
    background-color: #FFFFFF;
    padding: 7px 7px 7px 7px
}
#ButtonTransparentFAQ{
    background-color: transparent;
    min-width: 30%;
    color: #FFFFFF;
    border: 1px #FFFFFF solid;
    padding: 0px 7px 0px 7px;
}
#ButtonTransparentFAQ.ui-state-hover, #ButtonTransparentFAQ.ui-state-focus{
    color: #202123 !important;
    background-color: #FFFFFF;
    padding: 0px 7px 0px 7px;
}
.AgendaBorderColor{
    border: 1px solid #014111;
}
@media (max-width: 1200px) {
    #disparaitre-img{
       display: none;
    }
    div.wrapperContent{
        width: 100%;
        margin: 0;
    }
}
@media (max-width: 640px) {

}
@media (max-width: 960px) {
    .Container42{
        width: 100% !important;
    }
    #dissmisse{
        height: 5px !important;
    }
}
.Container45{ width:45%; float:left;}
.Container42{ width:42%; float:left;}

#showcase{
    background-image:url('../images/showcases/barnner-0.jpg');
    background-repeat: no-repeat;
    background-position: center;
    min-height: 590px !important;
    background-attachment: scroll;
    background-size: auto;
}

.showbarner{
    -webkit-box-shadow:inset 0 0 2550px 50px #757575;
    box-shadow:inset 0 0 2550px 50px #757575;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 650px !important;
    background-attachment: scroll;
    background-size:auto;
    width: 100% !important;
}

.showbarnera{
    background-repeat: no-repeat;
    background-position: center;
    min-height: 650px !important;
    background-attachment: scroll;
    background-size:auto;
    width: 100% !important;
}

.From18to10{font-size:18px;}
.From18to12{ font-size:18px;}
.From40to20{ font-size:40px;}

.From22to10{
    font-size: 22px;  
}

#showcase h1{  
    width: 25%;  
}
.BolderWhite{
    color: #FFFFFF ! important;
    font-weight: bold;
    text-shadow: 2px 2px #0f925a;
}
.BorderContent{
    border: solid 1px #1FA0AB;  
}
.recherch{

    background-color: #DDDDDD;
    margin: 0 auto;
}
recherche{
    padding: 5px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border: 1px solid #4F4F4F;
}
.TexColorOrange{
    color: #F88100;
}
.BordNone{
    border: none !important;
}
span.IcoLeft{
    left: 2px;
    top: 5px;
}
span.IcoRight{
    right:  2.5px;
    top: 5px;
}
span.IcoCenter{
    top: 5px;

}

.css-draw-l{bottom:  -4%; left: 29%;height: 60px; width: 25%;z-index: 98  ;transform: skew(-25deg); border-top-left-radius: 7px;}
.css-draw-r{bottom:  -4%; right: 29%;height: 60px ; width: 25%;z-index: 97;transform: skew(25deg); border-top-right-radius: 7px;}

#searchbar{
    font-weight: bold;
    font-family: 'HelveticaNeue'; 
    border: none;
    height: 35px;
    background-color: #FFFFFF;
    border-radius: 20px;
    padding: 5px 40px;
    color: #A9A9A9;
    overflow: hidden;
}
#searchbar:hover{
    cursor: default;
    background-color: #F1F6F9;
}
.ActuTexteColor{
    color: #736c6c;
}


#searchbar span{
    display: inline;
}
.agendaText{
    color: #777777;
}

.grayTextColor{
    color: #626262;
    font-weight: bold;
}
#recherche{    
    height: 53px;
    background-color: #00939F;
    padding: 5px 20px 0px 20px;
    border-top-left-radius:77px 100px ;
    border-top-right-radius: 77px 100px;
    /* 
    background: url('../../resources/images/searchbar.png') no-repeat center;
    background-size: cover;
    background-attachment: fixed;
    height: 53px;*/
}

#recherche input[type=text]{
    font-weight: bold;
    font-family: 'HelveticaNeue'; 
    border: none;
    height: 30px;
    background-color: #DDDDDD;
    border-radius: 18px;
    padding: 5px 40px;
    color: #A9A9A9;
}

#recherche input[type=text]:hover{
    cursor: default;
    background-color: #F1F6F9;
}
.AlSelfCenter{
    align-self: center !important;
}
#recherche input[type=submit]:hover{
    cursor: pointer;
}
#CardWithoutPadding {

    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
}
.Card{
    padding: 10px;
}

.titre-showcase{
    bottom: 40%; 
    left: 13%;
}
.description{
    padding-bottom: 2px;
    color: #3e3e4a;
    border-bottom: 0.5px solid #F1F6F9;
}

/**
 * POUR LA PRESETATION EN RESPONSIVE
 **/

/* X-large desktop */
@media (min-width:1280px) and (max-width:1366px){    
    .From18to10{font-size:13px;}
    img.disparaitre-img { width: 99.8%;height: 488px;top: 0px;left: 0px;}

}


/* Large desktop */
@media (min-width:1200px) and (max-width:1280px){

    img.disparaitre-img {height: 489px !important;}
    .PadingLeft8{padding-left: 0px !important;}
    .PadingLeft5{padding: 0px !important;}
    .From18to10{font-size: 10px;}
    .Card-ruban{
        box-sizing: border-box;
        position: absolute;
        top:176px;
        left: -5px;
        padding: 0px 0 0 5px;
        margin: 0px;
        background-image: url('ruban.png');
        background-size: 223px 40px;
        width: 223px;
        height: 40px;
        line-height: 40px;
        color: #fff;
    }

}

@media (min-width:1200px) and (max-width:1024px){

    #searchbar{height: 25px; font-size: 8px; width: 100%; left:-8.5%;}
    #searchbar2{font-weight: bold;font-family: 'HelveticaNeue';border: none; height: 34px; background-color: #EEEEEE; border-radius: 18px; padding: 5px 40px; color: #A9A9A9; overflow: hidden; height: 30px; font-size: 7px;width:88%; left:0%;}
    .css-draw-l{bottom:  -4%; left: 24%;height: 48px; width: 40%;z-index: 98  ;transform: skew(-25deg); border-top-left-radius: 7px;}
    .css-draw-r{bottom:  -4%; right: 24%;height: 48px ; width:40%;z-index: 97;transform: skew(25deg); border-top-right-radius: 7px;}


}
@media (min-width: 960px) and (max-width:1200px){
    .BorderRight{border-right: none;border-bottom:  solid 1px #E0E0E0; }
    .CardPadding20{padding: 15px !important ;}
    .From18to10{font-size: 12px;}
    .From22to10{font-size: 22px;}
    .From18to12{font-size: 12px;}
    img.disparaitre-img {display: none;height: 0 !important;}
    .PadingLeft8{padding-left: 0px !important;}
    .PadingLeft5{padding: 0px !important;}
    .PadingLeft{padding-left: 0px;} 
    #searchbar{height: 20px; font-size: 7px; width: 100%; left:-8.5%;}
    #searchbar2{font-weight: bold;font-family: 'HelveticaNeue';border: none; height: 34px; background-color: #EEEEEE; border-radius: 18px; padding: 5px 40px; color: #A9A9A9; overflow: hidden; height: 30px; font-size: 7px; width: 102%; left: -10.5%;}
    .css-draw-r{bottom:  -4%; right: 24%;height: 35px ; width:40%;z-index: 97;transform: skew(25deg); border-top-right-radius: 7px;}  
    .css-draw-l{bottom:  -4%; left: 24%;height: 35px; width: 40%;z-index: 98  ;transform: skew(-25deg); border-top-left-radius: 7px;}
    .MaxHeigth{height: auto !important; overflow: hidden;}

}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 960px) {
    #searchbar{height: 24px; font-size: 7px; width: 100%; left:-12.5%;}
    .css-draw-r{bottom:  -4%; right: 24%;height: 47px ; width:40%;z-index: 97;transform: skew(25deg); border-top-right-radius: 7px;}  
    .css-draw-l{bottom:  -4%; left: 24%;height: 47px; width: 40%;z-index: 98  ;transform: skew(-25deg); border-top-left-radius: 7px;}
    .MaxHeigth{height: auto !important; overflow: hidden;}
}



/* Portrait tablet to landscape and desktop */
@media (min-width: 640px) and (max-width: 768px) {
    .BorderRight{border-right: none; border-bottom:  solid 1px #E0E0E0;}
    .PadingLeft8{padding-left: 0px !important;}
    .CardPadding20{padding: 10px !important ;}
    .From18to10{font-size: 12px;}
    .From22to10{font-size: 18px;}
    .From18to12{font-size: 12px;}
    .PadingLeft5{padding: 0px !important;}
    .PadingLeft{padding-left: 0px;}
    .Wid20{ width:30%;}
    span.DateActualiteWidth1{width: 25%; font-size:15px;}
    #searchbar{height: 26px; font-size: 12px; width: 100%; left:-10.5%; visibility: hidden;}
    #searchbar2{    font-weight: bold;font-family: 'HelveticaNeue';border: none; height: 34px; background-color: #EEEEEE; border-radius: 18px; padding: 5px 40px; color: #A9A9A9; overflow: hidden; height: 30px; font-size: 7px;width:100%; left:0%;}
    .css-draw-l{visibility: hidden !important; height: 0; width: 0;}
    .css-draw-r{visibility: hidden !important; height: 0; width: 0;}
    .MaxHeigth{height: auto !important; overflow: hidden;}

}

/* Landscape phone to portrait tablet */
@media (min-width:480px) and (max-width: 640px) {

    .BorderRight{border-right: none;border-bottom:  solid 1px #E0E0E0;}
    .PadingLeft8{padding-left: 0px !important;}
    .CardPadding20{padding: 5px !important ;}
    .From18to10{font-size: 10px;}
    .From18to12{font-size: 12px;}
    .From22to10{ font-size: 19px;}
    .PadingLeft5{padding: 0px !important;}
    .Wid20{ width:50%;}
    .PadingLeft{padding-left: 0px;}
    .PadingLeft5{padding: 0px !important;}
    span.DateActualiteWidth1{ width: 50%; font-size:12px; }
    #searchbar{height: 25px; font-size: 7px;width: 90%; left:-22%; visibility: hidden;}
    #searchbar2{    font-weight: bold;font-family: 'HelveticaNeue';border: none; height: 34px; background-color: #EEEEEE; border-radius: 18px; padding: 5px 40px; color: #A9A9A9; overflow: hidden; height: 30px; font-size: 7px;width:100%; left:0%;}
    .css-draw-l{visibility: hidden; height: 0; width: 0;}
    .css-draw-r{visibility: hidden; height: 0; width: 0;}
    .MaxHeigth{height: auto !important; overflow: hidden;}
}

/* Portrait phones and down */
@media (min-width:320px) and (max-width: 480px){
    .BorderRight{ border-right: none;border-bottom:  solid 1px #E0E0E0;}
    .PadingLeft8{padding-left: 0px !important;}
    .CardPadding20{padding: 2.5px !important ;}
    .From18to10{font-size: 10px;}
    .From22to10{ font-size: 12px;}
    .From18to12{font-size: 12px;}
    .PadingLeft{padding-left: 0px;}
    .Wid20{ width:50%;}
    span.DateActualiteWidth1{ width: 50%; font-size:12px;}
    .PadingLeft5{padding: 0px !important;}
    #searchbar{height: 25px; font-size: 7px;width:90%; left:-20%; visibility: hidden;}
    #searchbar2{ font-weight: bold;font-family: 'HelveticaNeue';border: none; height: 34px; background-color: #EEEEEE; border-radius: 18px; padding: 5px 40px; color: #A9A9A9; overflow: hidden; height: 30px; font-size: 7px;width:100%; left:0%;}
    .css-draw-l{visibility: hidden !important; height: 0; width: 0;}
    .css-draw-r{visibility: hidden !important; height: 0; width: 0;}
    .Card-ruban {box-sizing: border-box;position: absolute;top: 138px; left: -5px;padding: 0px 0 0 5px;margin: 0px;background-image: url('ruban.png');background-size: 223px 40px;
                 width: 223px;
                 height: 40px;
                 line-height: 40px;
                 color: #fff;
    }
    .JourActualite{font-size: 100%;}
    .MaxHeigth{height: auto !important; overflow: hidden;}
}

@media (min-width:280px) and (max-width: 320px){
    #searchbar{height: 25px; font-size: 7px;width:87%; left:-25%; visibility: hidden;}
    #searchbar2{font-weight: bold;font-family: 'HelveticaNeue';border: none; height: 34px; background-color: #EEEEEE; border-radius: 18px; padding: 5px 40px; color: #A9A9A9; overflow: hidden; height: 25px; font-size: 7px; width:100%; left:0%;}
    .css-draw-l{visibility: hidden !important; height: 0; width: 0;}
    .css-draw-r{visibility: hidden !important; height: 0; width: 0;} 
    .MaxHeigth{height: auto !important; overflow: hidden;}
}

@media (max-width: 320px){

}




/**
 ** END KASSI 
 **/