@import url(https://fonts.googleapis.com/css?family=Open+Sans);

*{
  box-sizing: border-box;
}

.wrapper {
     display: grid;
     grid-template-columns: repeat(2, 2fr);
     grid-gap: 10px;
     grid-auto-rows: minmax(1080px, auto);
   }


#map-before, #map-after{ 
       height: 800px;
       
}
h2{
     text-align: center;
}

.legend {
     padding: 6px 8px;
     font: 14px Arial, Helvetica, sans-serif;
     background: white;
     background: rgba(255, 255, 255, 0.8);
     /*box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);/
     /border-radius: 5px;*/
     line-height: 24px;
     color: #555;
   }
   .legend h4 {
     text-align: center;
     font-size: 16px;
     margin: 2px 12px 8px;
     color: #777;
   }

   .legend span {
     position: relative;
     bottom: 3px;
   }

   .legend i {
     width: 18px;
     height: 18px;
     float: left;
     margin: 0 8px 0 0;
     opacity: 0.7;
   }

   .legend i.icon {
     background-size: 18px;
     background-color: rgba(255, 255, 255, 1);
   }
   .contorl-panel {
     padding: 6px 8px;
     width:150px;
     font: 14px Arial, Helvetica, sans-serif;
     background: white;
     background: rgba(255, 255, 255, 0.8);
     /*box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);/
     /border-radius: 5px;*/
     line-height: 24px;
     color: #555;
   }
   .contorl-panel h4 {
     text-align: center;
     font-size: 16px;
     margin: 2px 12px 8px;
     color: #777;
   }

   .contorl-panel span {
     position: relative;
     bottom: 3px;
     cursor:pointer
   }

   .contorl-panel i {
     width: 18px;
     height: 18px;
     float: left;
     margin: 0 8px 0 0;
     opacity: 0.7;
   }

   .legend i.icon {
     background-size: 18px;
     background-color: rgba(255, 255, 255, 1);
   }



   .search {
     width: 100%;
     /*position: relative;*/
     display: flex;
   }
   
   .searchTerm {
     width: 100%;
     border: 3px solid #00B4CC;
     border-right: none;
     padding: 5px;
     height: 20px;
     border-radius: 5px 0 0 5px;
     outline: none;
     color: #9DBFAF;
   }
   
   .searchTerm:focus{
     color: #00B4CC;
   }
   
   .searchButton {
     width: 40px;
     height: 36px;
     border: 1px solid #00B4CC;
     background: #00B4CC;
     text-align: center;
     color: #fff;
     border-radius: 0 5px 5px 0;
     cursor: pointer;
     font-size: 20px;
   }
   
   /*Resize the wrap to see the search bar change!*/
   .wrap{
     width: 100%;
     /*position: absolute;
     /*top: 50%;
     left: 50%;**/
     /*transform: translate(-50%, -50%);*/
   }

   .mycluster {
    
    width: 45px;
    height: 45px;
    background-color: greenyellow;
    border-radius: 50%;
    text-align: center;
    font-size: 24px;
  }
  .myspan{
    font-size: 11px;
  }

  .mapT{
    display: flex;
    flex-direction: row 
  }
   
  .reset-carte{
      padding-top: 15px;
  }
  .item{
    flex-grow: 4;
  }
  
  #reset>i:active{
    transform: rotate(-190deg);
  }