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