#gd{
    padding-bottom: 2%;
    background: rgb(64,99,70);
    background: linear-gradient(90deg, rgba(64, 99, 70, 0.5) 0%, rgba(255,255,255,1) 50%, rgba(64, 99, 70, 0.5) 100%);
}
#conteneur-map{
    display: flex;
    justify-content: center;
    align-items: center;
}
/*div contenant la carte*/
#map{
    margin:6% 0 6% 0;
    height:90vh;
    width:85%;
    border-radius:10px;
    border:1.5px solid #406346;
}
.leaflet-control-attribution {
    display:none;
}
#tof-1{
    height:95px;
    width:95px;
    background-image: url(../image/tri-carton.webp);
    background-position: center;
    background-size: cover;
    border-radius: 5px 5px 5px 5px;
    transform: rotate(90deg);
}
#tof-2{
    height:95px;
    width:95px;
    background-image: url(../image/vetement-larousse.webp);
    background-position: center;
    background-size: cover;
    border-radius: 5px 5px 5px 5px;
    transform: rotate(90deg);
}
#tof-3{
    height:95px;
    width:95px;
    background-image: url(../image/borne-mairie.webp);
    background-position: center;
    background-size: cover;
    border-radius: 5px 5px 5px 5px;
    transform: rotate(90deg);
    
}
#tof-4{
    height:95px;
    width:95px;
    background-image: url(../image/tri-vetement-la-carraire.webp);
    background-position: center;
    background-size: cover;
    border-radius: 5px 5px 5px 5px;
    transform: rotate(90deg);
  
}
#tof-5{
    height:95px;
    width:95px;
    background-image: url(../image/tri-station-total.webp);
    background-position: center;
    background-size: cover;
    border-radius: 5px 5px 5px 5px;
    transform: rotate(90deg);
}  
#tof-6{
    height:95px;
    width:95px;
    background-image: url(../image/tri-moliere.webp);
    background-position: center;
    background-size: cover;
    border-radius: 5px 5px 5px 5px;
    transform: rotate(90deg);
    
}

#tof-7{
    height:95px;
    width:95px;
    background-image: url(../image/tri-terrasse.webp);
    background-position: center;
    background-size: cover;
    border-radius: 5px 5px 5px 5px;
    transform: rotate(90deg);
 
}
#tof-8{
    height:95px;
    width:95px;
    background-image: url(../image/borne-village-marque.webp);
    background-position: center;
    background-size: cover;
    border-radius: 5px 5px 5px 5px;
    transform: rotate(90deg);
}

  /*Media Queries*/
  
  
   @media (max-width:900px) {   
  
    #gd{
      padding-bottom:10%;
    }
   }
  
   @media (max-width:665px){
 
   
  #conteneur-map{
    margin-top:12%;
  }
   }
   
   
   
  @media(max-width:391px){
 
 
     #tof-1{
      height:20vh;
      width:115px;
      transform: rotate(90deg);
      
  }
  #tof-2{
    height:20vh;
    width:115px;
    transform: rotate(90deg);
  
  }
  #tof-3{
      height:20vh;
      width:115px;
      transform: rotate(90deg);
  
  }
  #tof-4{
      height:20vh;
      width:115px;
      transform: rotate(90deg);
  
  }
  #tof-5{
      height:20vh;
      width:115px;
      transform: rotate(90deg);
  }
  #tof-6{
      height:20vh;
      width:115px;
      transform: rotate(90deg);
  }
  
  #tof-7{
      height:20vh;
      width:115px;
      transform: rotate(90deg);
  }
  #tof-8{
      height:20vh;
      width:115px;
      transform: rotate(90deg);
  
  }
  }
 
 
 
  @media (max-width:321px){

  /*tri carton centre ville*/
  #tof-1{
    width:80%;
    transform: rotate(90deg);
     height:16vh; 
    margin:auto;
  }
  /*depot de vetement la rousse*/
  #tof-2{
    width:70%;
    transform: rotate(90deg);
    height:16vh; 
    margin:auto;
   
  }
  /*borne de charge mairie*/
  #tof-3{
    width:70%;
    transform: rotate(90deg);
    height:16vh; 
    margin:auto;
  }
  /*depot de vetements la carraire*/
  #tof-4{
    width:70%;
    transform: rotate(90deg);
    height:16vh; 
    margin:auto;
  }
  /*point de tri station total*/
  #tof-5{
    height:16vh;
    width:100%;
    transform: rotate(90deg);
    margin:auto;
    
  }
  /*point de tri la carraire*/
  #tof-6{
    height:16vh;
    width:100%;
    transform: rotate(90deg);
    margin:auto;
  
  }
  /*point de tri les terrasses*/
  #tof-7{
    height:16vh;
    width:100%;
    transform: rotate(90deg);
    margin:auto;
   
  }
  /*borne de charge village de marque*/
  #tof-8{
     height:16vh; 
    width:70%;
    transform: rotate(90deg);
    margin:auto;
  }
  }