/*========================================================*/


/* Custom, iPhone Retina */ 
@media only screen and (min-width : 0px){
}

@media only screen and (min-width : 320px) {
    /* --- SMARTSLIDER --------------------------------------------------------------------------------*/
        div.smartslider{position: relative; margin-bottom: 30px; display: block;}

        div.smartslider div.affichageSlider{width: 100%; }
        div.smartslider div.affichageController{width: 100%;}

        div.smartslider div.carousel{height: 100%; min-height: 305px;}
        /*div.smartslider div.carousel div.containerDescription{display: none}*/
        div.smartslider div.carousel div.chargementSlider{position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-color: #ededed;z-index: -1;text-align: center;align-items: center;display: flex;justify-content: center;}
        div.smartslider div.carousel div.chargementSlider img{max-width: 50%;max-height: 50%;margin-left: auto;margin-right: auto;}
        div.smartslider div.carousel div.chargementSlider div.containerLoader{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
        div.smartslider div.carousel div.chargementSlider div.containerLoader div.loader{border-left: 2px solid rgb(0,79,159);border-top: 2px solid rgba(0, 0, 0, 0.2);border-right: 2px solid rgba(0, 0, 0, 0.2);border-bottom: 2px solid rgba(0, 0, 0, 0.2);height: 25px;width: 25px;left: 49%;border-radius: 25px;-webkit-animation: load 0.8s infinite linear;-moz-animation: load 0.8s infinite linear;-ms-animation: load 0.8s infinite linear;-o-animation: load 0.8s infinite linear;animation: load 0.8s infinite linear;}

        div.smartslider div.carousel-inner{max-height: 460px; height: calc(100% + 18px); min-height: 305px;}
        div.smartslider div.carousel-inner div.carousel-item{width: 100%;z-index: 1; min-height: 275px;}
        div.smartslider div.carousel-inner div.carousel-item a{color:#fff;}
        div.smartslider div.carousel-inner div.carousel-item div.image{width: 100%;height: 100%; background-size: cover; background-position: center;margin-left: auto; margin-right: auto; background-repeat: no-repeat; min-height: 275px;}
        div.smartslider div.carousel-inner div.carousel-item div.image.left{background-position: left}
        div.smartslider div.carousel-inner div.carousel-item div.image.right{background-position: right}
        div.smartslider div.carousel-inner div.carousel-item div.image.center{background-position: center}

        div.smartslider div.carousel-inner div.carousel-item div.containerDescription{position: absolute; top:0; right: 0; width: 220px; background-color: rgba(11,178,76,.7); padding: 20px; height: 100%;}
        div.smartslider div.carousel-inner div.carousel-item div.containerDescription div.slideDescription{height: 100%;}
        div.smartslider div.carousel-inner div.carousel-item div.containerDescription div.slideDescription div.slideContent{min-height: auto; background: transparent; padding: 0; margin-bottom: 0;}
        div.smartslider div.carousel-inner div.carousel-item div.containerDescription div.slideDescription div.slideContent span.titre{}
        div.smartslider div.carousel-inner div.carousel-item div.containerDescription div.slideDescription div.slideContent span.titre h4{text-transform: uppercase; color: #FFFFFF; font-size: 24px; margin-bottom: 0px;}
        div.smartslider div.carousel-inner div.carousel-item div.containerDescription div.slideDescription div.slideContent div.contenuDescription{color: #FFFFFF; margin-bottom: 20px; font-size: 16px;}
        div.smartslider div.carousel-inner div.carousel-item div.containerDescription div.slideDescription div.slideContent p{color: #fff;}
        
        div.smartslider div.carousel-inner div.carousel-item div.containerDescription div.lirePlus{position: absolute; transform: skew(-20deg) translateX(-50%); left: 50%; background: #a0c855; box-sizing: border-box; text-align: center; width: 135px; margin: auto; bottom: -18px;}
        div.smartslider div.carousel-inner div.carousel-item div.containerDescription div.lirePlus:hover{background: #0bb24c;}
        div.smartslider div.carousel-inner div.carousel-item div.containerDescription div.lirePlus a.plus{transform: skew(20deg); display: inline-block; padding: 10px 5px; color: #FFFFFF; text-transform: uppercase; font-family: 'Agro-Medium'; font-size: 17px;}

        div.smartslider div.containerControler{position: relative; z-index: 10; height: 100%; text-align: center;}
        div.smartslider div.containerIndicators{position: relative; display: block;}
        div.smartslider div.containerIndicators ol.carousel-indicators{bottom: 0; width: 100%; position: relative; margin: 0; font-family: 'Tec-Regular', Arial, Verdana, sans-serif; font-size: 16px; display: inline-block;}
        div.smartslider div.containerIndicators ol.carousel-indicators li {width: auto; min-height: 107px; border-radius: 0; position: relative; margin:0px; text-indent: 0; background:#8d8d8d; height: auto; display: inline-flex; align-items: center;}
        div.smartslider div.containerIndicators ol.carousel-indicators li:last-of-type{margin-bottom: 0px;}
        div.smartslider div.containerIndicators ol.carousel-indicators li.active {background: #0bb24c;}
        div.smartslider div.containerIndicators ol.carousel-indicators li{margin-bottom: 10px;}
        div.smartslider div.containerIndicators ol.carousel-indicators li div.imageIndicator{height: 85px; width:85px; margin: 5px; display: inline-block; background-size: auto 100%; background-position: center;}
        div.smartslider div.containerIndicators ol.carousel-indicators li div.containerInfo{display: none; margin-top: 5px;  margin-bottom: 5px; margin-left: 10px; max-width: calc(100% - 105px);}
        div.smartslider div.containerIndicators ol.carousel-indicators li div.containerInfo div.titre{}
        div.smartslider div.containerIndicators ol.carousel-indicators li div.containerInfo div.titre h4{text-transform: uppercase; color: #FFFFFF; font-size: 23px; margin-bottom: 0px;}
        div.smartslider div.containerIndicators ol.carousel-indicators li div.containerInfo div.containerDate{}
        div.smartslider div.containerIndicators ol.carousel-indicators li div.containerInfo div.containerDate span.date{color: #fff; font-size: 14px; line-height: 14px;}

        div.smartslider div.fakeDescriptionFond{position: absolute;bottom: 0;background: #fff;box-shadow: 0px 0px 11px 5px rgba(0,0,0,0.25);height: 35px;width: 550px;left: 50%;transform: translate(-50%); max-width: 300px}
        div.smartslider a.carousel-control-next{ z-index: 100; opacity: 1; height: 165px; width: 60px; right: -15px; top: 50%; transform: translateY(-50%);}
        div.smartslider a.carousel-control-prev{ z-index: 100; opacity: 1; height: 165px; width: 60px; left: -15px; top: 50%; transform: translateY(-50%);}
        div.smartslider a.carousel-control-next div.containerArrow, div.smartslider a.carousel-control-prev div.containerArrow{position: absolute; top: 50%;width: auto; transform: translateY(-50%); margin: 0px; z-index: 50; height: 135px; width: 30px; background: #fff; opacity: 1;}
        div.smartslider a.carousel-control-next div.containerArrow {box-shadow: -5px 0px 13px rgba(0,0,0,0.25); right: 15px;}
        div.smartslider a.carousel-control-prev div.containerArrow {box-shadow: 5px 0px 13px rgba(0,0,0,0.25); left: 15px;}
        div.smartslider a.carousel-control-next div.cacheArrow{height: 100%;width: 15px;position: absolute;top: 0;right: 0;background: #fff;z-index: 100;}
        div.smartslider a.carousel-control-prev div.cacheArrow{height: 100%;width: 15px;position: absolute;top: 0;left: 0;background: #fff;z-index: 100;}
        div.smartslider a.carousel-control-next div.containerArrow span.carousel-control-next-icon, div.smartslider a.carousel-control-prev span.carousel-control-prev-icon {display: inline-block;width: 18px;height: 70px;background: transparent no-repeat center center;background-size: 100% 100%; }
        div.smartslider a.carousel-control-prev div.containerArrow span.carousel-control-prev-icon{background-image: url('../images/fleche_gauche.png'); background-size: contain; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
        div.smartslider a.carousel-control-next div.containerArrow span.carousel-control-next-icon{background-image: url('../images/fleche_droite.png'); background-size: contain; position: absolute; right:0; top: 50%; transform: translateY(-50%);}
}   

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {
    div.smartslider div.fakeDescriptionFond{max-width: 350px !important;}
    div.smartslider div.carousel-inner div.carousel-item div.description{}


}
@media only screen and (min-width : 576px) {
    div.smartslider div.carousel-inner{max-height: 500px;}
    div.smartslider div.carousel-inner div.carousel-item{width: 100%;z-index: 1;}
    div.smartslider div.carousel-inner div.carousel-item a{color:#fff;}
    div.smartslider div.carousel-inner div.carousel-item div.image{width: 100%;height: 100%; background-size: cover; background-position: center;margin-left: auto; margin-right: auto;}

    div.smartslider div.carousel-inner div.carousel-item div.description{max-width: 540px;}
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
    /*div.smartslider div.containerIndicators{display: none;}*/
    div.smartslider div.affichageSlider{padding-right: 0px;}
    div.smartslider div.affichageController{padding-left: 10px;}
    div.smartslider{position: relative; margin-bottom: 30px; display: flex;}    
    div.smartslider div.affichageSlider{width: 100%; max-width: 725px; min-width: 320px;}
    div.smartslider div.affichageController{width: 100%; max-width: 405px; min-width: 320px;}
    div.smartslider div.carousel-inner{max-height: 550px;}
    div.smartslider div.carousel-inner div.carousel-item{width: 100%;z-index: 1; height: calc(100% - 18px);}
    div.smartslider div.carousel-inner div.carousel-item a{color:#fff;}
    div.smartslider div.carousel-inner div.carousel-item div.image{width: 100%;height: 100%; background-size: cover; background-position: center;margin-left: auto; margin-right: auto;}
    div.smartslider div.carousel-inner div.carousel-item div.description div.content h1{font-size: 25px; font-family: "OpenSans-condensed"; font-weight: 700; font-style: italic; margin-bottom: 0; color: #000 !important;}
    div.smartslider div.carousel-inner div.carousel-item div.description div.content h2{font-size: 20px; font-family: "OpenSans-condensed"; font-weight: 700; font-style: italic; margin-bottom: 0; color: #373737 !important;}

    div.smartslider div.containerControler{position: relative; z-index: 10; height: 100%; text-align: left;}
    div.smartslider div.containerIndicators{position: relative; display: block;}
    div.smartslider div.containerIndicators ol.carousel-indicators{bottom: 0; width: 100%; position: relative; margin: 0; font-family: 'Tec-Regular', Arial, Verdana, sans-serif; font-size: 16px; display: inline-block;}
    div.smartslider div.containerIndicators ol.carousel-indicators li {width: 100%;min-height: 107px; border-radius: 0; position: relative; margin:0px; text-indent: 0; background:#8d8d8d; height: auto; display: flex; align-items: center;}
    div.smartslider div.containerIndicators ol.carousel-indicators li.active {background: #0bb24c;}
    div.smartslider div.containerIndicators ol.carousel-indicators li{margin-bottom: 10px;}
    div.smartslider div.containerIndicators ol.carousel-indicators li div.imageIndicator{height: 85px; width:85px; margin: 5px; display: inline-block;}
    div.smartslider div.containerIndicators ol.carousel-indicators li div.containerInfo{display: inline-block; margin-top: 5px;  margin-bottom: 5px; margin-left: 10px; max-width: calc(100% - 105px);}
    div.smartslider div.containerIndicators ol.carousel-indicators li div.containerInfo div.titre{}
    div.smartslider div.containerIndicators ol.carousel-indicators li div.containerInfo div.titre h4{text-transform: uppercase; color: #FFFFFF; font-size: 23px; margin-bottom: 0px;}
    div.smartslider div.containerIndicators ol.carousel-indicators li div.containerInfo div.containerDate{}
    div.smartslider div.containerIndicators ol.carousel-indicators li div.containerInfo div.containerDate span.date{color: #fff; font-size: 14px; line-height: 14px;}

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
}