html, body {
  height: 100%;
  width: 100%;
}

/* #map {
position: relative;
top: 0;
bottom: 0;
width: 100%;
background-color: #fff;    
} */

.icona {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
position: relative;
cursor: pointer;
/* 

-webkit-transition: background-color;
-webkit-transition-duration: 0.5s;
-webkit-transition-timing-function: ease-in;



-moz-transition: background-color;
-moz-transition-duration: 0.5s;
-moz-transition-timing-function: ease-in;



-ms-transition: background-color;
-ms-transition-duration: 0.5s;
-ms-transition-timing-function: ease-in;



-o-transition: background-color;
-o-transition-duration: 0.5s;
-o-transition-timing-function: ease-in; */
}



.header{
position: relative;
width: 100%;
height:100%;
background: fixed no-repeat center;
background-size: cover;
}



.map_container{
position: absolute;
width: 100%;
height: 100%;
background-color: rgb(255, 255, 255);
opacity: 1;
-webkit-transition: opacity;
-webkit-transition-duration: 1.5s ;
-webkit-transition-timing-function: easy-in;
-moz-transition: opacity;
-moz-transition-duration: 1.5s ;
-moz-transition-timing-function: easy-in;
-ms-transition: opacity;
-ms-transition-duration: 1.5s ;
-ms-transition-timing-function: easy-in;
-o-transition: opacity;
-o-transition-duration: 1.5s ;
-o-transition-timing-function: easy-in;
}



.mycontainer{
position: absolute;
top: 5%;
left: 5%;
border-radius: 100%;
padding:1%;
width:60px;
border: solid 2px transparent;
/* -webkit-transition: border-color,border-radius,padding,margin;
-webkit-transition-duration: 0.5s,1s,1s,1s;
-webkit-transition-timing-function: ease-out;
-moz-transition: border-color,border-radius,padding,margin;
-moz-transition-duration: 0.5s,1s,1s,1s;
-moz-transition-timing-function: ease-out;
-ms-transition: border-color,border-radius,padding,margin;
-ms-transition-duration: 0.5s,1s,1s,1s;
-ms-transition-timing-function: ease-out;
-o-transition: border-color,border-radius,padding,margin;
-o-transition-duration: 0.5s,1s,1s,1s;
-o-transition-timing-function: ease-out; */
}



.mycontainer:hover{
margin-top: 0.5%;
margin-left: 0.5%;
border-radius:5%;
border-color:black;
background-color: rgba(104, 117, 117, 0.604);
padding:0.5%;
}



.mycontainer:hover .icona{
background-color: rgb(0, 0, 0);
}



.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
left: 0;
top: 0;
background-color: rgba(255, 255, 255, 0.959);
/* background-color: rgba(0,0,0, 0.9); */
overflow-x: hidden;
transition: 0.5s;
}



.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: left;
margin-top: 30px;
margin-left: 30px;
}



.overlay a {
padding: 8px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}



.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}



.overlay .closebtn {
position: absolute;
top: 2px;
left: 80%;
font-size: 60px;
}



/* @media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
} */



#rangeValue {
  position: relative;
  display: block;
  text-align: center;
  font-size: 10;
  color: #ffffff;
  font-weight: 100;
}
.range {
  width: 70%;
  height: 100%;
  -webkit-appearance: none;
  background: #111;
  outline: none;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 1);
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #00fd0a;
  cursor: pointer;
  border: 4px solid #333;
  box-shadow: -407px 0 0 400px #00fd0a;
}