body {
  margin: 0;
  padding: 0;
}
h2 {
font-size:100%;
  margin: 8px;
}
#map {
position: absolute;
width: 100%;
height: 90%;
cursor: crosshair;
/* cursor: url(../images/cross-red.png), crosshair; */
}
.btn {
  box-sizing: border-box;
  appearance: none;
  border: 3px double #000;
  border-radius: 0.2em;
  color: #000;
  align-self: center;
  font-size: .8rem;
  line-height: .2;
  margin: 0 0 4px;
  padding: .6em .8em;
  text-decoration: none;
  text-align: center;
  font-family: arial, sans-serif;
  font-weight: 700;
}
.fr {
  border-color: #000;
  color: #000;
  box-shadow: 0 0 40px 40px #fff inset, 0 0 0 0 #ddd;
  transition: all 150ms ease-in-out;
}  
.fr:hover {
  color: navy;
  box-shadow: 0 0 10px 0 #202020, 0 0 10px 4px #000 inset;
}
.es {
  border-color: #000;
  color: #000;
  background-color: teal;
  box-shadow: 0 0 40px 40px teal inset, 0 0 0 0 #ddd;
  transition: all 150ms ease-in-out;
}  
.es:hover {
  color: #fff;
  box-shadow: 0 0 10px 0 #202020, 0 0 10px 4px #000 inset;
}
.ovrlc {
background-color: white;
opacity: 0.8;
border-radius: 10px;
border: 1px solid teal;
padding: 5px 10px;
}
.ovrlz {
background-color: white;
opacity: 0.8;
border-radius: 10px;
border: 2px solid gray;
padding: 5px 10px;
}
#buttonParking {
width: 40px;
height: 40px;
background-image: url(../images/parking.png);
background-repeat: no-repeat;
border-radius: 2px;
border:2px solid black;
padding: 0px 0px;
}
#buttonSommet {
width: 55px;
height: 40px;
background-image: url(../images/montagne.png);
background-repeat: no-repeat;
border-radius: 2px;
border:1px solid black;
padding: 0px 0px;
cursor: pointer;
}
#imageSommet {
margin-left: 58px;
}
#divEtages {
position: absolute;
width: 185px;
top: 310px;
right: 5%;
background-color:teal;
border:1px solid white;
z-index: 9999;
}

#divRoches {
position: absolute;
width: 185px;
top: 330px;
right: 5%;
background-color:teal;
border:1px solid white;
z-index: 9999;
}

#legEtages {
position: absolute;
top: 355px;
right: 5%;
z-index: 9999;
display: none;
}

#legRoches {
position: absolute;
top: 355px;
right: 5%;
z-index: 9999;
display: none;
}
.ol-scale-line {
background: teal;
padding: 5px;
}
#slider {
position: absolute;
top: .5em;
right: 4.5em;
/*background: rgba(200, 200, 200, 0.8);*/
z-index: 9999;
}
input[type=range] {
  -webkit-appearance: none;
  margin: -4px 0px; /* modif jll 31-03-18 */
  width: 80%;
}
input[type=range]:focus {
  outline: none;
} 
/* mozilla */
input[type=range]::-moz-range-track {
  height: 6.4px; /* modif jll 31-03-18 */
  cursor: pointer;
  animate: 0.2s;
  /*box-shadow: 1px 1px 1px #000000, 0px 00px 20px #0d0d0d;*/
  background: teal;
  border-radius: 2.3px;
  border: 0.2px solid #010101;
}
input[type=range]::-moz-range-thumb {
  /*box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;*/
  border: 1px solid #000000;
  height: 16px; /* modif jll 31-03-18 */
  width: 8px; /* modif jll 31-03-18 */
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
} 
/* chrome - safari - android */  
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 6.4px; /* modif jll 31-03-18 */
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: teal;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 16px; /* modif jll 31-03-18 */
  width: 8px; /* modif jll 31-03-18 */
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -5px;
}
/* edge */
input[type=range]::-ms-track {
  width: 100%;
  height: 6.4px; /* modif jll 31-03-18 */
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: teal;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
input[type=range]::-ms-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 16px; /* modif jll 31-03-18 */
  width: 8px; /* modif jll 31-03-18 */
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}
/*
input[type=range]::-ms-fill-lower {
  background: red;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: red;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]:focus::-ms-fill-lower {
  background: green;
}
input[type=range]:focus::-ms-fill-upper {
  background: green;
}
*/
@media screen and (max-width: 1024px) {
h2 {
  display: none;
  font-size:60%;
}
.btn {
  border: 1px solid #000;
  /*font-size: .6rem;*/
  line-height: .2;
  padding: .5em .5em;
  font-weight: 600;
  }
  #divEtages #divRoches {
    display: none;
  }  
}