/********************************************************************************
*                             BEM Methodology                                   *
*  [$] Block = block                                                            *
*  [$] Element = block__element                                                 *
*  [$] Modifier = block__element--modifier                                      *
*                                                                               *
*                             Banner Component                                  *
*                                                                               *
*  [^]bp = Banner parallax                                                      *                 
*                                                                               *
*                                                                               *
*  [^]bpa = Banner parallax animation                                           *
*  [^]ba = Banner article                                                       *
*                                                                               *
*  [@] Animation = Animation CSS                                                *
*  [#] Screen size: xs,sm,md,lg                                                 *
*                                                                               *
********************************************************************************/


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

.banner__wrapper {
    position: relative;
    background-repeat: no-repeat;
}

.banner__title{
    text-align: center;
}

.banner__title.text-left {
    text-align:left !important;
}

.banner__title.text-right {
    text-align:right !important;
}

.banner__text{
    text-align: left;
}

/* [^]bp */

.banner__parallax h1{
    font-size:3em;
}

.banner__scroll-down {
    position: relative;
}

/* end of [^]bp */
  

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

.banner__title--section--h1 {
    font-size:11em;
    margin:40px 0;
}

.banner__elements--text-bck{
    background: rgba(0, 0, 0, 0.2);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
} 


/* [#] xs screen */
@media (max-width: 767px) { 
    .banner__title--section--h1 {
        font-size:8em;
    }
}

.banner__title--section-h2 {
  font-size:1.5em;
  margin: 0;
}    


}    

/* [^]bp */

.banner__wrapper--parallax {
    /*background-attachment: fixed; voir le conflit avec cover*/
    background-color: #ffffff;
    overflow: hidden;
    background-position: center center;
    background-size:cover;
}


.banner__scroll-down--color-white a:hover, .banner__scroll-down--color-white a:focus, 

.banner__scroll-down--color-white i {
    color:#ffffff;
}

.banner__scroll-down--color-orange a:hover, .banner__scroll-down--color-orange a:focus, 

.banner__scroll-down--color-orange i {
    color:#FF4000;
}

/* end of [^]bp */

/* [^]bpa */

.page__title--h1.animation.split-text {
    margin:inherit;
}


/* end of [^]bpa */

/* [^]ba */

ul.banner__wrapper--about-job-list {
    padding-left: 5em;
    padding-top: 1.5em;
}

ul.banner__wrapper--about-job-list > li {
    padding-bottom: 2em;
}

ul[class*="bulleted-list"] {
    list-style: none;
}

ul.bulleted-list-orange > li:before {
    content: "\f111";
    font-family: FontAwesome;
    color: #F26115;
    margin-right: 10px;
    font-size: 0.55em; /* size by default but it will change according to the font-size of the content text (ul li) */
    margin-left:-17px;
}


/* end of [^]ba */


/* [@] Animation ***************************************/

  /* [^]bpa */

    .animation-transport-properties {
        width: 100%;
        height: 560px;
        display: block;
        overflow:hidden;
        margin:0 auto;
    }
    
    
    
    /* Road moving */
    
        .road-move {
            background-image: url(../../../../img/animations/animation-city/road.png);
            background-repeat: repeat-x;
            background-position:0 bottom;
        }
        
        @keyframes animatedRoad {
            0% { background-position: -10% bottom; }
            100% { background-position:  110% bottom; }
        }
                
        .road-move {
            animation: animatedRoad 95s linear infinite;
            height: 554px;
        }
        
        
    /* city moving */
    
        .city-move {
            background-image:url(../../../../img/animations/animation-city/city-line.png);
            background-repeat: no-repeat;
            position:absolute;
            
        }
        
        
        /*--------- Large screen --------*/
        
        @media (min-width: 1281px) and (min-height: 720px) {
            .city-move {
                background-repeat:repeat-x;
            }
        }
        
        @keyframes animatedCityLine{
             0% { background-position: 0 167px; }
             100% { background-position:  -2160px 167px; }
        }
        
        .city-move {
            animation: animatedCityLine 80s linear infinite;
        }
        
    /* cloud-move */
    
        .cloud-move {
            background-image:url(../../../../img/animations/animation-city/cloud-blue.png);
            background-repeat: repeat-x;
            position:absolute;
            background-position: center 0px;
        }
        
    
    /* ambulance moving */
    
        .ambulance-move {
            background-image: url(../../../../img/animations/animation-city/ambulance.png);
            background-repeat: no-repeat;
            position:absolute;
        }
        
        @keyframes animatedAmbulance{
             0% { background-position: -30% 492px; }
             100% { background-position:  180% 492px; }
        }
        
        .ambulance-move {
            animation: animatedAmbulance 15s linear infinite;
        }
    
        
    /* cars moving */
    
        .cars-move {
            background-image: url(../../../../img/animations/animation-city/light-orange-car.png),
              url(../../../../img/animations/animation-city/blue-van.png),
              url(../../../../img/animations/animation-city/bus-red.png), 
              url(../../../../img/animations/animation-city/blue-car.png);
            background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
            transform:scaleX(-1);
            position:absolute;
        }
        
        @keyframes animatedCars{
           0% { background-position: -70% 463px, -90% 455px, -50% 453px, -30% 463px }
           100% { background-position:  140% 463px, 110% 455px, 160% 453px, 180% 463px; }
        }
                
        .cars-move { 
            animation: animatedCars 15s linear infinite;
        }

    /* tractor and tram moving */

      .tram-move {
        background-image: url(../../../../img/animations/animation-city/trame-red.png);
        background-repeat:no-repeat, no-repeat;
        transform:scaleX(-1);
        position:absolute;
      }
      
      @keyframes animatedTram {
         0% { background-position:  -15% 520px; }
         100% { background-position:  135% 520px; }
      }

      .tram-move { 
          animation: animatedTram 25s linear infinite;
      }
      
      
    /* trucks moving */  
        
        .trucks-move {      
            background-image: url(../../../../img/animations/animation-city/bus-blue.png), 
            url(../../../../img/animations/animation-city/camion.png),
            url(../../../../img/animations/animation-city/dark-orange-car.png);
            background-repeat: no-repeat, no-repeat, no-repeat;
            position:absolute;
        }
            
        @keyframes animatedTrucks{
            0% { background-position: -50% 492px, -70% 492px, -40% 503px }
            
            100% { background-position:  160% 492px, 140% 492px, 170% 503px; }
        }
                
        .trucks-move { 
            animation: animatedTrucks 15s linear infinite;
        } 
            
      
    /* plane moving */
    
      .plane-move {
        background-image: url(../../../../img/animations/animation-city/plane.png);    
        background-repeat: no-repeat;
        position:absolute;
      }    
      
      @keyframes animatedPlane{
         0% { background-position:  -15% 45px }
         100% { background-position:  135% 25px }
      }
      
      .plane-move { 
          animation: animatedPlane 45s linear infinite;
      }
      

    /* helicopter moving */
    
      .helicopter-move {
        background-image: url(../../../../img/animations/animation-city/helicopter.png);
        background-repeat: no-repeat;
        transform:scaleX(-1);
        position:absolute;
      }    
      
      @keyframes animatedHelicopter {
         0% { background-position:   110% 0}
         100% { background-position:  -10% 0 }
      }
      
      .helicopter-move{ 
          animation: animatedHelicopter 35s linear infinite;
      }
   
  /* end of [^]bpa */