@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');

@font-face {
    font-family: "Bodega";
    src:url(../fonts/BodegaSans_Black.ttf) format("truetype");
}

/* ====================================================================================================================
 * RESPONSIVE-MOBILE GLOBAL
 * ====================================================================================================================*/
 
 * {
     box-sizing: border-box;
 }
 
 html {
     font-size: 62.5%;
 }
 
 body {
     margin: 30px;
     font-family: 'Open Sans', sans-serif;
     font-size: 1.6rem;
     background-color: #444444;
     color: #fff;
     line-height: 2;
     text-align: center;
 }
 
 h1, h2, h3 {
     font-family: "Bodega", sans-serif;
     text-transform: uppercase;
 }
 
 span.orange {
     color: #ff9d00;
 }
 
 img, video {
        max-width: 100%;
    }
 
 
 /* ====================================================================================================================
 * RESPONSIVE-MOBILE HEADER
 * ====================================================================================================================*/
 
 
 .header {
     text-align: left;
     background-color: #fff;
     padding: 30px;
     background: linear-gradient(165deg, rgba(255,255,255,1) 50%, rgba(51,51,51,1) 50%);
 }
 
 
 .header nav {
     display: flex;
     flex-direction: column;
     align-items: flex-end;
     font-size: 2.5rem;
 }
 
 .header nav a {
     color: #fff;
     text-decoration: none;
     font-family: "Bodega", sans-serif;
 }
 
 
 
 /* ====================================================================================================================
 * RESPONSIVE-MOBILE MAIN
 * ====================================================================================================================*/
 
 /* ============= MAIN - Global ==============*/
 
 main {
     max-width: 1500px;
     margin: auto;
 }
 
 .flexslider {
     display: none;
 }
 
 h1 {
     font-size: 4rem;
 }
 
 main h2 {
     padding: 10px 30px;
     font-size: 3rem;
     text-align: left;
     box-shadow: -3px -3px 0 #3f3f3f;
 }
 
 
 /* ============= MAIN - Nos motos ==============*/
 
 
 .nos-motos article {
     background-color: #fff;
     margin-bottom: 25px;
     padding: 20px;
     color: #666666;
 }
 
 .nos-motos article h3 {
     color: #ff9d00;
     font-size: 2.5rem;
     border-bottom: solid 2px #ff9d00;
     padding-top: 0;
     margin-top: 0;
 }
 
 .nos-motos article a {
     color: #fff;
     text-decoration: none;
     display: block;
     background-color: #ff9d00;
     padding: 10px;
 }
 
  
 /* ============= MAIN - Nous connaitre ==============*/ 
 
 
 .nous-connaitre article footer {
     display: flex;
     flex-direction: column;
     margin: 30px;
 }
 
 .nous-connaitre article footer a {
     color: #fff;
     font-size: 5rem;
 }
 
  .nous-connaitre video {
     display: none;
 }
 
 
 /* ====================================================================================================================
 * RESPONSIVE-MOBILE FOOTER
 * ====================================================================================================================*/
 
 body>footer {
     margin-top: 70px;
     padding: 40px;
     box-shadow: 1px 1px 10px #282828;
 }
 
 body>footer nav {
     display: flex;
     flex-wrap: wrap;
     margin: 30px 0;
 }
 
 body>footer a {
     color: #fff;
     flex-basis: 50%;
 }
 
 body>footer img {
     width: 50px;
 }
 
 body>footer p:nth-of-type(2) {
     color: rgba(255, 255, 255, 0.5);
     margin-top: 0;
 }
 
 
 
 /* ====================================================================================================================
 * RESPONSIVE-TABLETTE
 * ====================================================================================================================*/
 
 @media screen and (min-width: 768px) { 
    
    /* ============= HEADER ==============*/
    
    body {
        background-image:url("../img/bg_body.svg");
    }
    
    
    /* ============= HEADER ==============*/
    
    .header {
        display: flex;
        justify-content: space-between;
        background: linear-gradient(130deg, rgba(255,255,255,1) 50%, rgba(51,51,51,1) 50%);
    }
    
     
     
    /* ============= MAIN - Global ==============*/
 
    .flexslider {
        display: block;
        border: solid 10px #fff;
        border-radius: 0;
    }
    
    /* ============= MAIN - Nos motos ==============*/
    
    .nos-motos {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    
    .nos-motos h2 {
        flex-basis: 100%;
    }
    
   .nos-motos article {
        flex-basis: 48%;
    }
      
    /* ============= MAIN - Nous connaitre ==============*/ 
    
    .nous-connaitre video {
    display: block;
    }
    
    /* ============= FOOTER ==============*/ 
    
     
     body>footer nav {
         display: block;
     }
     
     body>footer a {
         color: #fff;
         margin: 0 15px;
     }
} 



 /* ====================================================================================================================
 * RESPONSIVE-DESKTOP
 * ====================================================================================================================*/

 @media screen and (min-width: 1025px) { 
     
     
     body>header, footer {
         width: 100%;
     }
     
      /* ============= HEADER ==============*/
     
     body>header {
         background: linear-gradient(165deg, rgba(255,255,255,1) 50%, rgba(51,51,51,1) 50%);
     }
     
     .header {
         max-width: 1500px;
         margin: auto;
     }
     
     
     
    /* ============= MAIN - Nos motos ==============*/
    
    .nos-motos {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    
    .nos-motos h2 {
        flex-basis: 100%;
    }
    
   .nos-motos article {
       flex-basis: 23%;
    }   
    
    /* ============= MAIN - Nous connaitre ==============*/ 
    
    .nous-connaitre {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    
    .nous-connaitre h2 {
        flex-basis: 100%;
    }
    
    .nous-connaitre article {
        text-align: left;
        flex-basis: 45%;
    }
    
    .nous-connaitre article h3 {
         margin: 0;
    }
    
    .nous-connaitre video {
        width: 50%;
    }
    
    .nous-connaitre article footer {
        flex-direction: row;
    }
 
    .nous-connaitre article footer a {
        margin-right: 40px;
    }
     
 }
 
  @media screen and (min-width: 1560px) { 
     
     
     /* ============= GLOBAL ==============*/
     
     body {
         margin: 0;
     }
     
     .header {
         padding: 30px 0;
     }
 }