/********************************************************************************
*                             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;
}