:root {
    --track-color: #000;
    --track-height: 20px;
    --divider-width: 50px;
    --track-width: 20px;
}
.slidecontainer {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 50px;
  background:none;
  background-color: none;
  outline: none;
  opacity: 1;
  position: absolute;  
  top: 80%;
  left: 0;
  
  margin: 0;
  transition: 0.3s all;
}

.slider:focus {
  outline: none;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--track-width);
  height: var(--track-height);
  background: none;
  cursor: pointer;
  outline: none;
}

.slider::-moz-range-thumb {
  width: var(--track-width);
  height: var(--track-height);
  background: none;
  cursor: pointer;
  outline: none;
}
.compareBox {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
}
.beforeBox, #afterBox {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.beforeBox {
    width: 100%;
    left: 0;
    
    height: 100%;
}
.afterBox {
    width: 100%;
    left: 0;
    height: 100%;
    background: url(bg-skel.jpg) bottom center no-repeat;
    background-size: cover;
}
.divider {
    width: 1px;
    height: 100%;
    position: absolute;
    background: url(line.png) repeat-y center;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}
.arrow {
    top: 80%;
    position: absolute;
    transform: translate(-50%,-50%);
    width: 80px;
    height: 80px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    left: 50%;
    text-align: center;
    display: block;
}