/********************************************************************************
*                             BEM Methodology                                   *
*  [$] Block = block                                                            *
*  [$] Element = block__element                                                 *
*  [$] Modifier = block__element--modifier                                      *
*                                                                               *
*                             Banner Component                                  *          
*                                                                               *
*  [^]hp-bh1 = Homepage - Banner h1                                             *
*  [^]hp-fps = Homepage - Find project support                                  *
*  [^]hp-slider = Homepage - Slider Carousel                                    *
*                                                                               *
*  [@] Animation = Animation CSS                                                *
*  [#] Screen size: xs,sm,md,lg                                                 *
*  [+] Font-size: To change the font-size only                                  *
*                                                                               *
********************************************************************************/



/* [$] Element *****************************************/

.banner__wrapper[class*='bg-'] {
    position: relative;
    background-repeat: no-repeat;
    background-position: center center;
}

@media (min-width: 768px) {
    section article[class*='col-']:not(:last-child):after {
        background: #ffffff;
        width: 5px;
        content: "";
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        min-height: 70px;
    }
}
    
    /* [#] xs screen */
        @media (max-width: 767px) {
            section article[class*='col-']:not(:last-child) {
                padding-bottom:5px;
            } 
            .banner__article > article {
                padding: 0;
            }
        }
    
    
/*.banner__article > [class*='col-']:not(:last-child):after {
    background: #ffffff;
    width: 5px;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    min-height: 70px;
}*/

/* [^]hp-bh1 */

    #homepage_banner-h1 .banner__wrapper {
        min-height: 400px;
        background-repeat:no-repeat;
    } 
    
        /* [#] xs screen */
        @media (max-width: 767px) {            
            #homepage_banner-h1 .banner__wrapper {
                background-position: right center;
                position: relative;
            }
        } 
            
    #homepage_banner-h1 .banner__description {
        padding-bottom: 10px;
    }
    
/* END [^]hp-bh1 */
               

/* [^]hp-fps */
        
    #homepage__find-project-support .arrow-box__top-inside {
        margin-top:30px;
    }

/* END [^]hp-fps */


/* [$] Modifier ****************************************/

/* [^]hp-bh1 */
        
    #homepage_banner-h1  h1.banner__title--section-h1 {
        margin: 0 auto;
        font-weight: 400;
        padding: 40px 0;
        width: 600px;
        position: relative;
        text-align: center;
    }
    
    /*.banner__title--border-bottom h1.banner__title--section-h1::after {
        position: absolute;
        content: '';
        bottom: 20px;
        border-bottom: 2px solid #ffffff;
        max-width: 150px;
        width: 100%;
        -webkit-transform: translate(-50%,0);
           -moz-transform: translate(-50%,0);
            -ms-transform: translate(-50%,0);
             -o-transform: translate(-50%,0);
                transform: translate(-50%,0);
        left: 50%;
    }*/
            
        /* [#] xs screen */
            @media (max-width: 767px) {
                #homepage_banner-h1  h1.banner__title--section-h1 {
                    width: 300px;
                }
            }

/* END [^]hp-bh1 */
    


/* [^]hp-slider */
        
    #homepage_slider .banner__section-link--bottom {
        width:100%;   
    }


/* END [^]hp-slider */

/*   A Retirer du CSS lorsqu'on aura implémenté dans la page dynamiquement */

/* .banner__article--bg-1 {
    background-image: url('/eiah2/_tools/resources/front/img/about/get-inspired-1.jpg');
    height: 400px;
}

.banner__article--bg-2 {
    background-image: url('/eiah2/_tools/resources/front/img/about/get-inspired-2.jpg');
    height: 400px;
}

#homepage__slider > .row:last-child {
    display:none;
}*/


/* FIN A RETIRER */

.banner__title--quotes:before {content: url(/eiah2/_tools/resources/front/img/about/quote-open.png);top: -0.2em;position: relative;left: -0.2em;}
.banner__title--quotes:after {content: url(/eiah2/_tools/resources/front/img/about/quote-close.png);top: -0.2em;position: relative;left: 0.2em;}

.banner__title--quotes {
line-height: 1.5em;
}