.image-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.panoramic-image {
    position: relative;
    left: 0px;
    top: 0;
    width: auto;
    height: 100%;
}

.slidecontainer {
  width: 68%; /* Width of the outside container */
  margin-left:2%;
  padding: 30px 0px;
  position:relative;
  height:12px;
}

.slide-tip {
  position:absolute;
  right:0px;
  top:50px;
  width:auto;
  text-align:right; 
  visibilty: visible;
}

.slidecontainer:hover > .slide-tip {
  visibilty: hidden; display:none;
}

/* The slider itself */
.image-slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 100%; /* Full-width */
  height: 2px; /* Specified height */
  background: #4a4a4a; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 1; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
  cursor: col-resize;
}



.image-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 70px;
  height: 40px;
  border: 0;
  background: url(../images/logo-handle.gif);
  cursor: pointer;
}

.image-slider::-moz-range-thumb {
  width: 70px;
  height: 40px;
  border: 0;
  background: url(../images/logo-handle.gif);
  cursor: pointer;
}

#previous-button, #next-button {
    cursor: pointer; 
    width: 27px; 
    height: auto;
}

.range-nav-buts{position:absolute; bottom:12px; right:2%;}

@media screen and (max-width:600px)
{ 
.slidecontainer{width:95%; height:92px}
}