body {
  font-family: "Verdana", sans-serif;
  font-size: 18px;
  line-height: 2;
  color: #fff;
  background-color: #222;
  overscroll-behavior-y: contain;
}
form {
  width: 100%;
}
button {
  border-radius: 8px;
  color: #420915;
}
button:hover{
  background-color: #aaa;
}
input, button {
  font-size: 14px;
  padding: 10px 10px;
}
#mainContent {
  position:relative;
  z-index: 1;
  width: 100%;
  height: auto;
  margin: 0 auto;
  background-color: #222;
}
#file-select {
  position:relative;
  opacity: 1;
  top: 0;
  z-index: 10;
  height: 60px;
  width: 100%;
}
#file-select:hover{
  opacity: 1;
}
#search{
  border:none;
  width:48px;
  height:48px;
  cursor:pointer;
  background-repeat: no-repeat;
}
#flipper{
  background:url(mirror.png);
  border:none;
  width:48px;
  height:48px;
  cursor:pointer;
  margin-right: 10px;
  background-repeat: no-repeat;
}
#showoverlay{
  background:url(eq.png);
  border:none;
  width:48px;
  height:48px;
  cursor:pointer;
  margin-right: 10px;
  background-repeat: no-repeat;
}
#showcontrols{
  background:url(controls.png);
  border:none;
  width:48px;
  height:48px;
  cursor:pointer;
  background-repeat: no-repeat;
}
#video_player_box{
  position: relative;
  width: 100%;
  margin-bottom: -10px;
  background-color: #000;
}
#my_video {
  width: 100%;
  height: auto;
  transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
}
#overlay {
  display: none;
  position: absolute;
  z-index: 10;
  right: 0;
  left: 0;
  padding: 0 20px 20px;
  opacity: .5;
  color: #fff;
  font-size: 12px;
  background-color: #000;
}
#video_controls_bar{
  display:none;
  position:absolute;
  z-index: 10;
  right: 0;
  left: 0;
  padding: 10px;
  opacity: .5;
  background-color:#000;
}
#ctrl1, #ctrl2 {
  float: left;
}
#ctrl2 {
  padding-top: 5px;
}
button#playpausebtn{
  background:url(play.png);
  border:none;
  width:48px;
  height:48px;
  cursor:pointer;
  padding: 10px;
  margin-right: 10px;
  background-repeat: no-repeat;
}
button#playpausebtn:hover{
  opacity:1;
}
#ctrl3, #ctrl4, #ctrl5 {
  float: right;
}
#ctrl4 {
  padding: 2px 0;
}
input[type=checkbox]
{
  /* Double-sized Checkboxes */
  -ms-transform: scale(4.3); /* IE */
  -moz-transform: scale(4.3); /* FF */
  -webkit-transform: scale(4.3); /* Safari and Chrome */
  -o-transform: scale(4.3); /* Opera */
  padding: 10px;
  margin-left: 20px;
}
button#mutebtn{
  background:url(mute.png);
  border:none;
  width:48px;
  height:48px;
  cursor:pointer;
  padding: 10px;
  margin-right: 10px;
  background-repeat: no-repeat;
}
button#fullscreenbtn{
  background:url(fullscreen.png);
  border:none;
  width:48px;
  height:48px;
  cursor:pointer;
  padding: 10px;
  margin-left: 10px;
  background-repeat: no-repeat;
}
*:focus {
  outline: none;
}
input#volumeslider{padding:0;}
input[type='range'] {
    -webkit-appearance: none !important;
    height:3px;
}
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  background: #FFF;
  height:18px;
  width:18px;
  border-radius:100%;
  cursor:pointer;
}
input#seekslider{
  width:98%;
  padding:0;
}
#backbtn, 
#forwardbtn,
#start_loop,
#end_loop, 
#run_loop,
#framem,
#framep {
  margin-bottom: 1rem;
}
#tempo-slider {
  margin: 0 0 10px 0;
}
.fader {
  float: left;
  width: 12.5%;
  margin: 20px 0;
  text-align: center;
}
.freq {
  margin: 0 auto;
  height: 200px;
  text-align: center;
}

/* Background Images */
#control-key {
  position: fixed;
  width: 280px;
  top: 40px;
  left: calc((100% - 280px)/2);
  left: 10px;
  z-index: 0;
  padding: 15px;
}
/*
#control-key li {
  list-style: none;
}
/*
#control-key img {
  height: 25px;
  width: 25px;
}
*/
#control-key li {
  list-style: none;
  font-weight: bold;
  font-size: 10px;
  font-family: "Myriad Pro", sans-serif;
  padding: 5px;
}

#control-key li#search-icon {
  background: url(search100.png) no-repeat 0 10px;
}

#control-key li#mirror-icon {
  background: url(mirror100.png) no-repeat 0 10px;
}

#control-key li#eq-icon {
  background: url(eq100.png) no-repeat 0 10px;
}

#control-key li#timeline-icon {
  background: url(timeline100.png) no-repeat 0 10px;;
}

#control-key li#search-icon,
#control-key li#mirror-icon,
#control-key li#eq-icon,
#control-key li#timeline-icon {
  background-size: 20px;
  padding: 11px 0 0 30px;
}

#cb-slideshow li {
  list-style:none;
}
#cb-slideshow,
#cb-slideshow:after { 
  position: fixed;
  width: 100%;
  /*height: 100%;*/
  top: -20px;
  left: 0;
  z-index: 0; 
  background-color:#000;
}
#cb-slideshow:after { 
  content: '';
  background: transparent url(pattern.png) repeat top left; 
}
#cb-slideshow li span { 
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  color: transparent;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: none;
  opacity: 0;
  z-index: 0;
  -webkit-backface-visibility: hidden;
  -webkit-animation: imageAnimation 24s linear infinite 0s;
  -moz-animation: imageAnimation 24s linear infinite 0s;
  -o-animation: imageAnimation 24s linear infinite 0s;
  -ms-animation: imageAnimation 24s linear infinite 0s;
  animation: imageAnimation 24s linear infinite 0s; 
}
#cb-slideshow li div { 
  z-index: 1000;
  position: absolute;
  top: 75px;
  left: 0px;
  width: 100vw;
  text-align: center;
  opacity: 0;
  color: #fff;
  -webkit-animation: titleAnimation 24s linear infinite 0s;
  -moz-animation: titleAnimation 24s linear infinite 0s;
  -o-animation: titleAnimation 24s linear infinite 0s;
  -ms-animation: titleAnimation 24s linear infinite 0s;
  animation: titleAnimation 24s linear infinite 0s; 
}
#cb-slideshow li div h3 { 
  font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
  font-size: 60px;
  padding: 0;
  /*line-height: 120px; */
}
#cb-slideshow li:nth-child(1) span { 
  background-image: url(image1.png) 
}
#cb-slideshow li:nth-child(2) span { 
  background-image: url(image1.png);
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  -o-animation-delay: 6s;
  -ms-animation-delay: 6s;
  animation-delay: 6s; 
}
#cb-slideshow li:nth-child(3) span { 
  background-image: url(image1.png);
  -webkit-animation-delay: 12s;
  -moz-animation-delay: 12s;
  -o-animation-delay: 12s;
  -ms-animation-delay: 12s;
  animation-delay: 12s; 
}
#cb-slideshow li:nth-child(4) span { 
  background-image: url(image1.png);
  -webkit-animation-delay: 18s;
  -moz-animation-delay: 18s;
  -o-animation-delay: 18s;
  -ms-animation-delay: 18s;
  animation-delay: 18s; 
}

#cb-slideshow li:nth-child(2) div { 
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  -o-animation-delay: 6s;
  -ms-animation-delay: 6s;
  animation-delay: 6s; 
}
#cb-slideshow li:nth-child(3) div { 
  -webkit-animation-delay: 12s;
  -moz-animation-delay: 12s;
  -o-animation-delay: 12s;
  -ms-animation-delay: 12s;
  animation-delay: 12s; 
}
#cb-slideshow li:nth-child(4) div { 
  -webkit-animation-delay: 18s;
  -moz-animation-delay: 18s;
  -o-animation-delay: 18s;
  -ms-animation-delay: 18s;
  animation-delay: 18s; 
}

@media(min-width: 340px) { 
  #control-key li {
    font-size: 15px;
  }

  #control-key li#search-icon,
  #control-key li#mirror-icon,
  #control-key li#eq-icon,
  #control-key li#timeline-icon {
    background-size: 30px;
    padding: 11px 0 0 40px;
  }
}

@media(min-width: 576px) {
  #control-key {
    width: 500px;
  }  
  #control-key li {
    font-size: 22px;
  }

  #control-key li#search-icon,
  #control-key li#mirror-icon,
  #control-key li#eq-icon,
  #control-key li#timeline-icon {
    background-size: 44px;
    padding: 11px 0 0 52px;
  }
}

@media screen and (max-width: 600px) {
  #cb-slideshow li div h3 {
    font-size: 16px
  }
}

@media screen and (max-width: 1140px) {
  #cb-slideshow li div h3 {
    font-size: 36px
  }
}

/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation { 
  0% { opacity: 0;
  -webkit-animation-timing-function: ease-in; }
  8% { opacity: 1;
       -webkit-animation-timing-function: ease-out; }
  17% { opacity: 1 }
  25% { opacity: 0 }
  100% { opacity: 0 }
}
@-moz-keyframes imageAnimation { 
  0% { opacity: 0;
  -moz-animation-timing-function: ease-in; }
  8% { opacity: 1;
       -moz-animation-timing-function: ease-out; }
  17% { opacity: 1 }
  25% { opacity: 0 }
  100% { opacity: 0 }
}
@-o-keyframes imageAnimation { 
  0% { opacity: 0;
  -o-animation-timing-function: ease-in; }
  8% { opacity: 1;
       -o-animation-timing-function: ease-out; }
  17% { opacity: 1 }
  25% { opacity: 0 }
  100% { opacity: 0 }
}
@-ms-keyframes imageAnimation { 
  0% { opacity: 0;
  -ms-animation-timing-function: ease-in; }
  8% { opacity: 1;
       -ms-animation-timing-function: ease-out; }
  17% { opacity: 1 }
  25% { opacity: 0 }
  100% { opacity: 0 }
}
@keyframes imageAnimation { 
  0% { opacity: 0;
  animation-timing-function: ease-in; }
  8% { opacity: 1;
       animation-timing-function: ease-out; }
  17% { opacity: 1 }
  25% { opacity: 0 }
  100% { opacity: 0 }
}
/* Animation for the title */
@-webkit-keyframes titleAnimation { 
  0% { opacity: 0 }
  8% { opacity: 1 }
  17% { opacity: 1 }
  19% { opacity: 0 }
  100% { opacity: 0 }
}
@-moz-keyframes titleAnimation { 
  0% { opacity: 0 }
  8% { opacity: 1 }
  17% { opacity: 1 }
  19% { opacity: 0 }
  100% { opacity: 0 }
}
@-o-keyframes titleAnimation { 
  0% { opacity: 0 }
  8% { opacity: 1 }
  17% { opacity: 1 }
  19% { opacity: 0 }
  100% { opacity: 0 }
}
@-ms-keyframes titleAnimation { 
  0% { opacity: 0 }
  8% { opacity: 1 }
  17% { opacity: 1 }
  19% { opacity: 0 }
  100% { opacity: 0 }
}
@keyframes titleAnimation { 
  0% { opacity: 0 }
  8% { opacity: 1 }
  17% { opacity: 1 }
  19% { opacity: 0 }
  100% { opacity: 0 }
}
/* Show at least something when animations not supported */
.no-cssanimations #cb-slideshow li span{
opacity: 1;
}

footer {
  position: relative;
  text-align: center;
}
@media(max-width: 510px) {
  footer {
    padding: 3rem 0 .5rem;
  }
  footer p {
    font-size: 14px;
  }
  #ctrl2 {
    padding-top:1rem;
    font-size: 9px;
  }
  input#volumeslider {
    max-width: 60px;
  }
  input[type='range'] {
    height: 1px;
  }
  #backbtn,
  #forwardbtn,
  #start_loop,
  #end_loop,
  #run_loop,
  #framem,
  #framep {
    margin-bottom: .25rem;
    font-size: .75rem;
  }
  #video_controls_bar {
    padding: 5px;
  }
  button#playpausebtn {
    margin-right: 0;
  }
  button#mutebtn{
    margin-right: 0;
  }
  button#fullscreenbtn {
    margin-left: 0;
  }
}