/* ################################################

    -------------------------
    # LANDING PAGE CRIT'AIR #
    -------------------------

    1 - GLOBAL
    2 - TITLES
    3 - GREEN BOX
    4 - BOX BG GREY
    5 - BOX SHADOW
    6 - POPOVER
    7 - ICONES
    8 - BLOCK 'PRATIQUE'
    9 - VIGNETTE NIVEAU CRIT'AIR
        a - bubbles
    10 - MEDIA QUERIES

################################################## */


/* ## GLOBAL #################################### */
#critair {
    margin-bottom: 20px;
}

#critair.main {
    margin-top: 0;
}

.text-justify {
    text-align: justify;
}

#critair .span6.no-margin-lft {
    margin-left: 0;
}

.video-img {
    cursor: pointer;
    text-align: center;
    position: relative;
}

#critair .margin80 {
    margin-top: 80px;
    margin-bottom: 80px
}

#critair .margin20 {
    margin-top: 20px;
    margin-bottom: 20px
}

#critair .btn-bleu {
    padding: 15px 50px;
}

#critair .conversion .btn-bleu{
    width: auto;
    float: none;
    display: inline-block;
}

#critair .conversion .btn-bleu .link{
     color: white;
}

/* ## TITLES #################################### */
#critair h1 {
    line-height: 30px;
    margin-top: 0;
    font-size: 24.5px;
    font-weight: bold;
    margin-right: 15px;
    float: left;
}

#critair h1 span {
    font-size: 35px;
    display: inline-block;
    line-height: 50px;
}

#critair h2 {
    font-size: 24px
}

#critair h2.title {
    text-transform: uppercase;
}

#critair h3 {
    font-size: 20px;
    line-height: 20px;
    margin-top: 25px;
}


/* ## GREEN BOX #################################### */
#critair .box-bg-green {
    padding: 40px 0 30px;
    background-color: #5d9530;
    color: #fff
}

#critair .box-bg-green p{
    display: inline-block;
    width: 80%;
}


/* ## HEADER IMAGE #################################### */
#critair .img-header {
    background: url(/assets/img/critair/img-fond-2000.jpg) no-repeat bottom center;
    -webkit-background-size: cover;
    background-size: cover;
    width: 100%;
    min-height: 249px;
}

/* ## BOX BG GREY #################################### */
#critair .box-bg-grey {
    border-top: 1px solid #D4D4D4;
    border-bottom: 1px solid #D4D4D4;
    background: #F8F9FB;
    padding: 40px 0 30px;
}

/* ## BOX SHADOW #################################### */
#critair .box-shadow {
    margin-top: 40px;
    margin-bottom: 40px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.2) 24px 4px 50px 0px;
    -moz-box-shadow: rgba(0, 0, 0, 0.2) 24px 4px 50px 0px;
    box-shadow: rgba(0, 0, 0, 0.2) 24px 4px 50px 0px;
}

#critair .box-shadow .text{
    padding: 40px;
}


/* ## POPOVER #################################### */
#critair .popover {
    width:250px;
    height:auto;
    color: #000;
}


/* ## ICONES #################################### */
#critair .eolienne-ico {
    width: 64px;
    height: 75px;
    background: url(/assets/img/critair/sprite-landing-critair.png) -43px -1170px no-repeat;
    float: left;
    margin-right: 5px;
}

#critair .ampoule-ico {
    width: 70px;
    height: 115px;
    background: url(/assets/img/critair/sprite-landing-critair.png) -40px -1012px no-repeat;
    display: inline-block;
    margin-right: 10px;
}

#critair .ico-info {
    width: 20px;
    height: 20px;
    background: url(/assets/img/critair/sprite-landing-critair.png) -65px -938px;
    display: inline-block;
    top: -5px;
    position: relative;
}

#critair p .ico-info {
    top: 3px;
    margin-right: 8px;
}

/* ## BLOCK 'PRATIQUE' #################################### */
#critair .pratique {
    margin-bottom: 5px;
    border-bottom: 1px solid #D4D4D4;
}

#critair .pratique h2 {
    display: block;
    line-height: 115px;
    vertical-align: middle;
}

#critair .pratique h2 span {
    vertical-align: middle;
}

#critair .pratique h2:before {
    content: '';
    position: relative;
    width: 70px;
    height: 115px;
    background: url(/assets/img/critair/sprite-landing-critair.png) -40px -1012px no-repeat;
    display: inline-block;
    margin-right: 10px;
    top: 25px;
}

/* ## VIGNETTE NIVEAU CRIT'AIR #################################### */
#critair .vignette {
    margin: 40px 20px;
    width: 157px;
    height: 300px;
}

#critair .vignette-top,
#critair .vignette-bottom {
    padding: 10px;
    color: #ffffff;
}

#critair .vignette-top {
    width: 100%;
    height: 185px;
    -webkit-border-radius: 40px 40px 0px 0px;
    -moz-border-radius: 40px 40px 0px 0px;
    border-radius: 40px 40px 0px 0px;
    background-color: #5d9530;
}

/* -- bubbles */
#critair .vignette-top .bubble {
    content: "";
    position: absolute;
    width: 100%;
    height: 70px;
    -webkit-border-radius: 0px 40px 40px 40px;
    -moz-border-radius: 0px 40px 40px 40px;
    border-radius: 0px 40px 40px 40px;
    background-color:#FFFFFF;
    -webkit-box-shadow: rgba(0, 0, 0, 0.2) 9px 5px 15px 0px;
    -moz-box-shadow: rgba(0, 0, 0, 0.2) 9px 5px 15px 0px;
    box-shadow: rgba(0, 0, 0, 0.2) 9px 5px 15px 0px;
    color: #000;
    line-height: 70px;
    text-align: center;
    top: -10px;
}

#critair .vignette-top .bubble span.title{
    color: #000;
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
}

#critair .vignette-bottom {
    width: 100%;
    min-height: 115px;
    -webkit-border-radius: 0px 0px 40px 40px;
    -moz-border-radius: 0px 0px 40px 40px;
    border-radius: 0px 0px 40px 40px;
    background-color: #4f6244;
    overflow: hidden;
}

#critair .vignette-bottom p {
    line-height: 1em;
    display: inline-block;
}

#critair .niveau0 .vignette-bottom p {
    margin-top: 30px;
    padding: 0 10px;
}

#critair .vignette-bottom p span.upper {
    text-transform: uppercase;
}

#critair .vignette.niveau0 .vignette-top {background-color:#9ac93b;}
#critair .vignette.niveau1 .vignette-top {background-color:#c5adcd;}
#critair .vignette.niveau2 .vignette-top {background-color:#f1e086;}
#critair .vignette.niveau3 .vignette-top {background-color:#f3c190;}
#critair .vignette.niveau4 .vignette-top {background-color:#8d1d1b;}
#critair .vignette.niveau5 .vignette-top {background-color:#7b7a76;}

#critair .vignette.niveau0 .vignette-bottom {background-color:#5d9530;}
#critair .vignette.niveau1 .vignette-bottom {background-color:#7f5489;}
#critair .vignette.niveau2 .vignette-bottom {background-color:#fed604;}
#critair .vignette.niveau3 .vignette-bottom {background-color:#e68733;}
#critair .vignette.niveau4 .vignette-bottom {background-color:#7d1a15;}
#critair .vignette.niveau5 .vignette-bottom  {background-color:#6e6e6c;}


#critair .vignette .ico {
    position: relative;
    top: 60px;
    height: 125px;
    width: 121px;
    margin: 0 auto;
}

#critair .vignette.niveau0 .ico { background: url(/assets/img/critair/sprite-landing-critair.png) -15px -6px;}
#critair .vignette.niveau1 .ico { background: url(/assets/img/critair/sprite-landing-critair.png) -15px -185px;}
#critair .vignette.niveau2 .ico { background: url(/assets/img/critair/sprite-landing-critair.png) -15px -330px;}
#critair .vignette.niveau3 .ico { background: url(/assets/img/critair/sprite-landing-critair.png) -15px -485px;}
#critair .vignette.niveau4 .ico { background: url(/assets/img/critair/sprite-landing-critair.png) -15px -633px;}
#critair .vignette.niveau5 .ico { background: url(/assets/img/critair/sprite-landing-critair.png) -15px -783px;}



#critair .carousel-inner.span12 {
    margin-left: 0;
}


/* ## MEDIA QUERIES #################################### */
/* --- Landscape phones and down */
@media (max-width: 767px) {

    /* -- Titles */
    #critair h1 {
        display: block;
        width: 200px;
        margin: 0 auto 15px;
        float: none;
    }

    #critair h2 {
        font-size: 35px;
        text-align: center;
    }

    #critair h3 {
        margin-bottom: 20px;
    }

    #critair h3 a {
        color: #000;
        text-decoration: none;
    }

    /* -- image header -- */
    #critair .img-header {
        min-height: 150px;
    }

    /* -- block 'pratique' */
    #critair .pratique h2 span {
        width: 117px;
        display: inline-block;
        line-height: 40px;
    }
    #critair .pratique h2:before {
        content: '';
        position: relative;
        margin-top: -33px;
        margin-left: -100px;
        width: 70px;
        height: 115px;
        background: url(/assets/img/critair/sprite-landing-critair.png) -40px -1012px no-repeat;
    }

    #critair .pratique {
        border-bottom: 0;
    }

    #critair .pratique h2 {
        border-bottom: 1px solid #e5e5e5;
    }

    #critair .pratique .accordion-group {
        border: 0;
        border-bottom: 1px solid #e5e5e5;
    }

    #critair .pratique .accordion-inner {
        border-top: 0;
        border-bottom: 0;
    }

    /* -- box shadow */
    #critair .box-shadow {
        width: 90%;
        -webkit-box-shadow: rgba(0, 0, 0, 0.2) 6px 0px 35px -3px;
        -moz-box-shadow: rgba(0, 0, 0, 0.2) 6px 0px 35px -3px;
        box-shadow: rgba(0, 0, 0, 0.2) 6px 0px 35px -3px;
    }

    #critair .content.box-shadow {
        padding: 0;
    }

    #critair .content.box-shadow .text{
        padding: 15px;
    }

    #critair .content.box-shadow .text h2{
        font-size: 22px;
    }

    /* -- box green */
    #critair .box-bg-green p {
        display: block;
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }

    /* ---- box green / accordion */
    #critair .box-bg-green .accordion-heading {
        background-color: #458432;
        text-align: center;
    }

    #critair .box-bg-green .accordion-heading a {
        color: #fff;
        text-transform: uppercase;
        text-decoration: none;
        font-weight: bold;
    }

    #critair .box-bg-green .accordion-group {
        border: none;
    }

    #critair .box-bg-green {
        padding-bottom: 0;
    }

    #critair .box-bg-green .accordion {
        margin-bottom:0 ;
    }

    #critair .box-bg-green .accordion-body {
        margin-bottom: 20px;
        margin-top: 20px;
    }

    #critair .accordion-heading a.collapsed:after {
        background: url(/assets/img/critair/sprite-landing-critair.png) no-repeat center -1186px/130px transparent;
        content: "";
        height: 12px;
        position: relative;
        width: 35px;
        float: right;
    }

    #critair .accordion-heading a:after {
        background: url(/assets/img/critair/sprite-landing-critair.png) no-repeat center -1130px/130px transparent;
        content: "";
        height: 12px;
        position: relative;
        width: 35px;
        float: right;
    }

    #critair .accordion-heading a.collapsed.ico-blanc:after {
        background: url(/assets/img/critair/sprite-landing-critair.png) no-repeat center -1451px/130px transparent;
        content: "";
        height: 12px;
        position: relative;
        width: 35px;
        float: right;
    }

    #critair .accordion-heading a.ico-blanc:after {
        background: url(/assets/img/critair/sprite-landing-critair.png) no-repeat center -1387px/130px transparent;
        content: "";
        height: 12px;
        position: relative;
        width: 35px;
        float: right;
    }


    #critair #accordion-intro .accordion-heading a.collapsed:after {
        position: absolute;
        width: 35px;
        float: none;
    }
    #critair #accordion-intro .accordion-heading a:after {
        position: absolute;
        width: 35px;
        float: none;
    }


    /* Carroussel */
    /* Récupération du CSS provenant de la home page / dupliqué ici pour éviter toutes régressions  */
    /* Fonctionne avec le script présent dans critair.js */
    #critair #servicesCarousel {
        background-color: #fff;
        margin-top: 20px;
        text-align: left;
    }


    #critair #servicesCarousel .carousel-indicators {
        border: none;
        display: block;
        overflow: hidden;
        right: inherit;
        top: inherit;
        z-index: inherit;
    }

    #critair #servicesCarousel .carousel-indicators li {
        background-color: inherit;
        border: none;
        border-radius: 0;
        box-shadow: none;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
        height: inherit;
        margin: 0;
        padding: 10px 0;
        text-align: left;
        text-indent: 0;
        width: 100%;
        color: #c6c6c6;
        font-size: 19px;
    }

    #critair #servicesCarousel .carousel-indicators li.active {
        background: none;
        color: black;
        font-weight: 500;
    }

    #critair #servicesCarousel .carousel-indicators li:first-child {
        border-left: 1px solid transparent;
        padding: 5px 0;
    }

    #critair #servicesCarousel .carousel-inner .item img {
        float: right;
        margin-left: 30px;
        margin-top: 45px;
    }

    #critair #servicesCarousel .carousel-inner .item h2 {
        font-size: 30px;
        font-weight: 500;
        margin-bottom: 10px;
        margin-top: 5px;
        text-align: left;
        line-height: 30px;
    }

    #critair #servicesCarousel .carousel-inner .item p {
        font-size: 15px;
        line-height: 21px;
        margin-bottom: 15px;
        /*text-align: justify;*/
    }

    #critair #servicesCarousel .carousel-inner .item.active .span8{
        height: 325px;
    }

    #critair #servicesCarousel .carousel-inner .item .span8{
        padding-left: 20px;
    }

    #critair #servicesCarousel .carousel-inner .item .span8 {
        padding-left: 0;
    }
    #critair #servicesCarousel .carousel-inner .item.active .span8 {
        height: auto;
    }
    #critair #servicesCarousel .carousel-indicators li.fl-d:after {
        content: '';
        background: url(/assets/img/critair/sprite-landing-critair.png) no-repeat center -1240px/130px transparent;
        width: 30px;
        height: 30px;
        position: absolute;
        right: 10px;
        top: 17px;
    }
    #critair #servicesCarousel .carousel-indicators li.fl-g:after {
        content: '';
        background: url(/assets/img/critair/sprite-landing-critair.png) no-repeat center -1300px/130px transparent;
        width: 30px;
        height: 30px;
        position: absolute;
        left: 15px;
        top: 17px;
    }
    #critair #servicesCarousel .carousel-indicators li:first-child {
        padding: 10px;
    }
    #critair #servicesCarousel .carousel-indicators {
        display: flex;
        justify-content: center;
    }
    #critair #servicesCarousel .carousel-inner .item h2 {
        text-align: center;
    }
    #critair {
        padding: 0 0 25px;
    }

    #critair #servicesCarousel .carousel-inner .item{
        padding: 20px 15px;
    }

    #critair #servicesCarousel .carousel-indicators li {
        width: 50%;
        border-top: 1px solid #d4d4d4;
        text-align: center;
        line-height: 45px;
        border-bottom: 1px solid #d4d4d4;
        color: black;
    }

    #critair #servicesCarousel .carousel-inner .item img {
        float: none;
        margin: 0 auto;
    }

    #critair #servicesCarousel .carousel-inner .item p {
        max-width: 100%;
    }

    #critair .carousel-inner {
        overflow: unset;
    }

    /* Vignettes */
    #critair .vignette {
        width: 195px;
    }
    #critair .vignette-top {
        height: 205px;
    }
    #critair .vignette-top .bubble {
        width: 175px;
    }
}

/* -- */
@media (min-width: 767px) {
    #critair .carousel-indicators {
        display: none;
    }
    #critair .carousel-inner>.item,
    .carousel-inner>.active, .carousel-inner>.next,
    .carousel-inner>.prev {
        display: inline-block;
    }
    #critair .carousel-inner {
        overflow: unset;
    }
}

@media screen and (max-width: 1200px) and (min-width: 1002px) {
    #critair .box-bg-green p { width: 70%}
}

@media screen and (max-width: 1002px) and (min-width: 768px) {
    #critair .box-bg-green p { width: 60%}

    #critair .vignette {
        width: 195px;
    }
    #critair .vignette-top {
        height: 205px;
    }
}

@media (max-width: 550px) {
    #critair .conversion .btn-bleu {
        white-space:normal;
    }
}

@media (max-width: 364px) {
    #critair .btn-bleu {
        padding: 15px 5px;
        white-space:nowrap;
    }
}