body {
  background-color: #2d2d2d;
  color: #dfdfdf;
  height: 100%;
  overflow: hidden;
  width: 100%;
  position: fixed;
  text-align:center;
  -webkit-user-select: none;
  /*-webkit-tap-highlight-color: transparent;*/
  -webkit-touch-callout: none;
}

.slidecontainer {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 65%;
  height: 25px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #FFFFFF;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #FFFFFF;
  cursor: pointer;
}

#overlay {
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /*background-color: rgba(0,0,0,0.5);*/ /* Black background with opacity */
  background-color: #2d2d2d;
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
}

.div-wrapper {
  position: relative;
  height: 100%;
  width: 100%;
  vertical-align: middle;
  margin: 0;
  padding: 0;
  border: 0;
}

.div-wrapper img {
  display: none; 
  position: fixed;
  bottom:0;
  left:50%;
  width: 300px;
  height: 48px;
  margin-left: -150px;
}

body {
  margin: 0;
  padding: 0;
}

button {
  touch-action: manipulation;
}

canvas {
  touch-action: manipulation;
}

* {
  touch-action: manipulation;
}

* {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}