/* Our normalize css */
* {
  margin: 0;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Our wrapper */
.wrapper {
  width: 100%;
  height: 480px;
  max-height: 100vh;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}



/* Our image information */
.bottom,
.middle,
.top {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-color: white;
  background-size: cover;
  background-position: center;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  overflow: hidden;
}


.bottom {
  background: #2196f3;
}

.middle {
  background: #bbdefb;
}

.top {
  background: #ffffff;
}

.top {
  width: 125px;
}

.scroller {
  width: 50px;
  height: 50px;
  position: absolute;
  left: 100px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  background-color: #fff;
  opacity: 0.9;
  transition: opacity 0.12s ease-in-out;
  pointer-events: auto;
  cursor: pointer;
  box-shadow: 3.5px 0px 7px rgba(100, 100, 100, 0.2);
}

.scroller-middle {
  margin-top: 25px;
}

.scroller:hover {
  opacity: 1;
}

.scrolling {
  pointer-events: none;
  opacity: 1;
}

.scroller__thumb {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  padding: 7px;
}

.scroller:before,
.scroller:after {
  content: " ";
  display: block;
  width: 7px;
  height: 9999px;
  position: absolute;
  left: 50%;
  margin-left: -3.5px;
  z-index: 30;
  transition: 0.1s;
  box-shadow: 3.5px 0px 7px rgba(100, 100, 100, 0.2);
}

.scroller:before {
  top: 49px;
}

.scroller:after {
  bottom: 49px;
}

/* If you want to change the colors, make sure you change the fill in the svgs to match */
.scroller-middle>.scroller__thumb {
  border: 5px solid #FFCCBC;
}

.scroller-middle:before,
.scroller-middle:after {
  background: #FFCCBC;
}

.bottom {
  background: #2196f3;
}

.middle {
  background: #bbdefb;
}

.top {
  background: #ffffff;
}

.top {
  width: 125px;
}

.scroller {
  width: 50px;
  height: 50px;
  position: absolute;
  left: 100px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  background-color: #fff;
  opacity: 0.9;
  transition: opacity 0.12s ease-in-out;
  pointer-events: auto;
  cursor: pointer;
  box-shadow: 3.5px 0px 7px rgba(100, 100, 100, 0.2);
}

.scroller-middle {
  margin-top: 25px;
}

.scroller:hover {
  opacity: 1;
}

.scrolling {
  pointer-events: none;
  opacity: 1;
}

.scroller__thumb {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  padding: 7px;
}

.scroller:before,
.scroller:after {
  content: " ";
  display: block;
  width: 7px;
  height: 9999px;
  position: absolute;
  left: 50%;
  margin-left: -3.5px;
  z-index: 30;
  transition: 0.1s;
  box-shadow: 3.5px 0px 7px rgba(100, 100, 100, 0.2);
}

.scroller:before {
  top: 49px;
}

.scroller:after {
  bottom: 49px;
}

/* If you want to change the colors, make sure you change the fill in the svgs to match */
.scroller-middle>.scroller__thumb {
  border: 5px solid #FFCCBC;
}