/* body {
  background: linear-gradient(45deg, rgba(0,41,144,1) 0%, rgba(0,217,255,1) 100%);
} */

.btfsvg {
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  /* top: 0;
  left: 0;
  right: 0;
  bottom: 0; */
  margin: auto;
  z-index: -99;
}
 /* #logo-contour {
     fill: none;
     stroke:#a0d9f7;
     stroke-width:2;
     stroke-miterlimit:10;
     stroke-dasharray: 2000;
     stroke-dashoffset: 2000;
     animation: draw 3s;
     animation-delay: 2s;
     animation-fill-mode: forwards;
     animation-iteration-count: 1;
     animation-timing-function: linear;    
   } */
  /* #logo-remplissage {
     fill-opacity: 0;
     fill: url(#gradient);
     stroke-opacity: 0;
     stroke:#FFD833;
     stroke-width:4;
     animation: show 2s;
     animation-delay: 4s;
     animation-fill-mode: forwards;
     animation-iteration-count: 1;
     animation-timing-function: linear;    
   } */
#gradient {
  background: linear-gradient(to bottom, rgba(234,90,12,1) 0%, rgba(255,217,0,1) 51%, rgba(234,90,12,1) 100%);
  }
  #contours {
     fill:none;
     stroke:#000;
     stroke-width:2;
     stroke-miterlimit:10;
     stroke-dasharray: 5000;
     stroke-dashoffset: 5000;
     animation: draw 3s;
     animation-fill-mode: forwards;
     animation-iteration-count: 1;
     animation-timing-function: linear;
     animation-timeline: view();
     
    }
   #details {
     fill: none;
     stroke:#000;
     stroke-width: 1;
     stroke-miterlimit: 10;
     stroke-dasharray: 5000;
     stroke-dashoffset: 5000;
     animation: draw 3s;
     animation-delay: 1s;
     animation-fill-mode: forwards;
     animation-iteration-count: 1;
     animation-timing-function: linear;
     animation-timeline: view();
     
   }
  #details-back {
     fill: none;
     stroke:#000;
     stroke-width:1;
     stroke-miterlimit:10;
     stroke-dasharray: 1000;
     stroke-dashoffset: 1000;
     animation: draw 3s;
     animation-delay: 1s;
     animation-fill-mode: forwards;
     animation-iteration-count: 1;
     animation-timing-function: linear;
     animation-timeline: view();
     
   }
  #traces-back {
     fill: none;
     stroke:#000;
     stroke-width:2;
     stroke-miterlimit:10;
     stroke-dasharray: 1000;
     stroke-dashoffset: 1000;
     animation: draw 3s;
     animation-delay: 1s;
     animation-fill-mode: forwards;
     animation-iteration-count: 1;
     animation-timing-function: linear;
     animation-timeline: view();
     
   }
  #grille {
     fill: none;
     stroke:#000;
     stroke-width:1;
     stroke-miterlimit:10;
     stroke-dasharray: 1000;
     stroke-dashoffset: 1000;
     animation: draw 3s;
     animation-delay: 1s;
     animation-fill-mode: forwards;
     animation-iteration-count: 1;
     animation-timing-function: linear;
     animation-timeline: view();
     
   }
  #ventilation {
     fill: none;
     stroke:#000;
     stroke-width:1;
     stroke-miterlimit:10;
     stroke-dasharray: 1000;
     stroke-dashoffset: 1000;
     animation: draw 3s;
     animation-delay: 1s;
     animation-fill-mode: forwards;
     animation-iteration-count: 1;
     animation-timing-function: linear;
     animation-timeline: view();
     
   }
  #ligne-back {
     fill: none;
     stroke:#000;
     stroke-width:2;
     stroke-miterlimit:10;
     stroke-dasharray: 1000;
     stroke-dashoffset: 1000;
     animation: draw 3s;
     animation-delay: 1s;
     animation-fill-mode: forwards;
     animation-iteration-count: 1;
     animation-timing-function: linear;
     animation-timeline: view();
     
   }
  #remplissage-back {
     fill-opacity: 0;
     fill: #FFD833;
     animation: show 1s;
     animation-delay: 3s;
     animation-fill-mode: forwards;
     animation-iteration-count: 1;
     animation-timing-function: linear;
     animation-timeline: view();
     
   }
  #porte {
     fill: none;
     stroke:#000;
     stroke-width:2;
     stroke-miterlimit:10;
     stroke-dasharray: 2000;
     stroke-dashoffset: 2000;
     animation: draw 3s;
     animation-fill-mode: forwards;
     animation-iteration-count: 1;
     animation-timing-function: linear;
     animation-timeline: view();
     
   }
  #sup {
     fill-opacity: 0;
     fill: #FFD833;
     animation: show 1s;
     animation-delay: 3s;
     animation-fill-mode: forwards;
     animation-iteration-count: 1;
     animation-timing-function: linear;
     animation-timeline: view();
     
   }
  #down {
     fill-opacity: 0;
     fill: #FFD833;
     animation: show 1s;
     animation-delay: 3s;
     animation-fill-mode: forwards;
     animation-iteration-count: 1;
     animation-timing-function: linear;
     animation-timeline: view();
     
   }
  #car-back {
     fill-opacity: 0;
     fill: #FFD833;
     animation: show 1s;
     animation-delay: 3s;
     animation-fill-mode: forwards;
     animation-iteration-count: 1;
     animation-timing-function: linear;
     animation-timeline: view();
     
   }
  #details-sup {
     fill: none;
     stroke:#000;
     stroke-width:1;
     stroke-miterlimit:10;
     stroke-dasharray: 1000;
     stroke-dashoffset: 1000;
     animation: draw 3s;
     animation-delay: 1s;
     animation-fill-mode: forwards;
     animation-iteration-count: 1;
     animation-timing-function: linear;
     animation-timeline: view();
     
   }
  #poignee {
     fill: none;
     stroke:#000;
     stroke-width:1;
     stroke-miterlimit:10;
     stroke-dasharray: 500;
     stroke-dashoffset: 500;
     animation: draw 3s;
     animation-delay: 1s;
     animation-fill-mode: forwards;
     animation-iteration-count: 1;
     animation-timing-function: linear;
     animation-timeline: view();
     
   }
  #serrure {
     fill: none;
     stroke:#000;
     stroke-width:1;
     stroke-miterlimit:10;
     stroke-dasharray: 100;
     stroke-dashoffset: 100;
     animation: draw 3s;
     animation-delay: 1s;
     animation-fill-mode: forwards;
     animation-iteration-count: 1;
     animation-timing-function: linear;
     animation-timeline: view();
     
   }
  #combustible {
     fill: none;
     stroke:#000;
     stroke-width:1;
     stroke-miterlimit:10;
     stroke-dasharray: 1000;
     stroke-dashoffset: 1000;
     animation: draw 3s;
     animation-delay: 1s;
     animation-fill-mode: forwards;
     animation-iteration-count: 1;
     animation-timing-function: linear;
     animation-timeline: view();
     
   }
  #remplissage {
     fill-opacity: 0;
     fill: #FFD833;
     animation: show 1s;
     animation-delay: 3s;
     animation-fill-mode: forwards;
     animation-iteration-count: 1;
     animation-timing-function: linear;
     animation-timeline: view();
     
   }
  #roues {
     fill: none;
     stroke:#000;
     stroke-width:1;
     stroke-miterlimit:10;
     stroke-dasharray: 1000;
     stroke-dashoffset: 1000;
     animation: draw 3s;
     animation-delay: 1s;
     animation-fill-mode: forwards;
     animation-iteration-count: 1;
     animation-timing-function: linear;
     animation-timeline: view();
     
   }
  #phare {
     fill: none;
     stroke:#000;
     stroke-width:1;
     stroke-miterlimit:10;
     stroke-dasharray: 500;
     stroke-dashoffset: 500;
     animation: draw 3s;
     animation-delay: 1s;
     animation-fill-mode: forwards;
     animation-iteration-count: 1;
     animation-timing-function: linear;    
     animation-timeline: view();
     
   }
  #phare-remplissage {
     fill-opacity: 0;
     fill: #FFD833;
     animation: show 1s;
     animation-delay: 3s;
     animation-fill-mode: forwards;
     animation-iteration-count: 1;
     animation-timing-function: linear;    
     animation-timeline: view();
     
   }
  #fenetre {
     fill: none;
     stroke:#000;
     stroke-width:1;
     stroke-miterlimit:10;
     stroke-dasharray: 1000;
     stroke-dashoffset: 1000;
     animation: draw 3s;
     animation-delay: 1s;
     animation-fill-mode: forwards;
     animation-iteration-count: 1;
     animation-timing-function: linear;    
     animation-timeline: view();
     
   }
  #fenetre-1 {
     fill: none;
     stroke:#000;
     stroke-width:2;
     stroke-miterlimit:10;
     stroke-dasharray: 1000;
     stroke-dashoffset: 1000;
     animation: draw 3s;
     animation-delay: 1s;
     animation-fill-mode: forwards;
     animation-iteration-count: 1;
     animation-timing-function: linear;    
     animation-timeline: view();
     
   }
  #fenetre-2 {
     fill: none;
     stroke:#000;
     stroke-width:2;
     stroke-miterlimit:10;
     stroke-dasharray: 1000;
     stroke-dashoffset: 1000;
     animation: draw 3s;
     animation-delay: 1s;
     animation-fill-mode: forwards;
     animation-iteration-count: 1;
     animation-timing-function: linear;    
     animation-timeline: view();
     
   }
  #retro {
     fill-opacity: 0;
     fill: #FFD833;
     animation: show 1s;
     animation-delay: 3s;
     animation-fill-mode: forwards;
     animation-iteration-count: 1;
     animation-timing-function: linear;    
     animation-timeline: view();
     
   }
  #caisson-cables {
     fill: none;
     stroke:#000;
     stroke-width:1;
     stroke-miterlimit:10;
     stroke-dasharray: 1000;
     stroke-dashoffset: 1000;
     animation: draw 3s;
     animation-delay: 1s;
     animation-fill-mode: forwards;
     animation-iteration-count: 1;
     animation-timing-function: linear;    
     animation-timeline: view();
     
   }
  #bandeau {
     fill-opacity: 0;
     fill: #FFD833;
     animation: show 1s;
     animation-delay: 3s;
     animation-fill-mode: forwards;
     animation-iteration-count: 1;
     animation-timing-function: linear;    
     animation-timeline: view();
     
   }
  #bloc-1 {
     fill-opacity: 0;
     fill: #FFD833;
     animation: show 1s;
     animation-delay: 3s;
     animation-fill-mode: forwards;
     animation-iteration-count: 1;
     animation-timing-function: linear;    
     animation-timeline: view();
     
   }
  #bloc-2 {
     fill-opacity: 0;
     fill: #FFD833;
     animation: show 1s;
     animation-delay: 3s;
     animation-fill-mode: forwards;
     animation-iteration-count: 1;
     animation-timing-function: linear;    
     animation-timeline: view();
     
   }
  #cables {
     fill: none;
     stroke:#000;
     stroke-width:6;
     stroke-miterlimit:10;
     stroke-dasharray: 1000;
     stroke-dashoffset: 1000;
     animation: draw 3s;
     animation-delay: 1s;
     animation-fill-mode: forwards;
     animation-iteration-count: 1;
     animation-timing-function: linear;    
     animation-timeline: view();
     
   }
  #barre {
     fill-opacity: 0; 
     fill: #FFD833;
     animation: show 1s;
     animation-delay: 3s;
     animation-fill-mode: forwards;
     animation-iteration-count: 1;
     animation-timing-function: linear;    
     animation-timeline: view();
     
   }
  #details-barre {
     fill: none;
     stroke:#000;
     stroke-width:1;
     stroke-miterlimit:10;
     stroke-dasharray: 500;
     stroke-dashoffset: 500;
     animation: draw 3s;
     animation-delay: 1s;
     animation-fill-mode: forwards;
     animation-iteration-count: 1;
     animation-timing-function: linear;    
     animation-timeline: view();
     
   }
  #poignee {
     fill-opacity: 0; 
     fill: #FFD833;
     animation: show 1s;
     animation-delay: 3s;
     animation-fill-mode: forwards;
     animation-iteration-count: 1;
     animation-timing-function: linear;    
     animation-timeline: view();
     
   }
  #bande-1 {
     fill-opacity: 0;
     fill: #FFD833;
     animation: show 1s;
     animation-delay: 3s;
     animation-fill-mode: forwards;
     animation-iteration-count: 1;
     animation-timing-function: linear;    
     animation-timeline: view();
     
   }
  #accroche {
     fill: none;
     stroke:#000;
     stroke-width:1;
     stroke-miterlimit:10;
     stroke-dasharray: 500;
     stroke-dashoffset: 500;
     animation: draw 3s;
     animation-delay: 1s;
     animation-fill-mode: forwards;
     animation-iteration-count: 1;
     animation-timing-function: linear;    
     animation-timeline: view();
     
   }
  #ronds {
     fill-opacity: 0;
     fill: #FFD833;
     stroke:none;
     animation: show 1s;
     animation-delay: 3s;
     animation-fill-mode: forwards;
     animation-iteration-count: 1;
     animation-timing-function: linear;    
     animation-timeline: view();
     
   }
  #roue-details_1 {
     fill: none;
     stroke:#000;
     stroke-width:2;
     stroke-miterlimit:10;
     stroke-dasharray: 1000;
     stroke-dashoffset: 1000;
     animation: draw 3s;
     animation-delay: 1s;
     animation-fill-mode: forwards;
     animation-iteration-count: 1;
     animation-timing-function: linear;    
     animation-timeline: view();
     
   }
  #roue-details {
     fill: none;
     stroke:#000;
     stroke-width:2;
     stroke-miterlimit:10;
     stroke-dasharray: 1000;
     stroke-dashoffset: 1000;
     animation: draw 3s;
     animation-delay: 1s;
     animation-fill-mode: forwards;
     animation-iteration-count: 1;
     animation-timing-function: linear;    
     animation-timeline: view();
     
   }
  

 
  @keyframes draw {
  to {
    stroke-dashoffset: 0;
    opacity: 1;
 }
    }
  
  @keyframes show {
  to {
    fill-opacity: 1;
    opacity: 1;
    stroke-opacity: 1;
 }
    }