.ball{
    position: absolute;
    width: 12%;
    height: 21%;
    opacity: 0.7;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    cursor: pointer;
    display: none;
    /*background-color: red;*/
}

.ball-1{
  top: 6.2%;
  left: 44%;
}

.ball-2{
  top: 14%;
  left: 32%;
}

.ball-3{
  top: 34%;
  left: 25.6%;
}

.ball-4{
  top: 56.2%;
  left: 27.8%;
}

.ball-5{
  top: 70.7%;
  left: 37.4%;
}

.ball-6{
  top: 70.6%;
  left: 50.2%;
}

.ball-7{
  top: 56%;
  left: 60.1%;
}

.ball-8{
  top: 33.8%;
  left: 63.3%;
}

.ball-9{
  top: 14%;
  left: 56%;
}

.ball-10{
  top: 35.4%;
  left: 41.9%;
  width: 16.1%;
  height: 29.1%;
  border-radius: 123px;
}
/*...........................................................................................*/
video::-webkit-media-controls-fullscreen-button {
  display: none;
}

#btnPlayPause{
  position: absolute;
  cursor: pointer;
  background: url(/images/control_icon.svg);
  background-size: 409%;
  border: none;
  background-repeat: no-repeat;
  width: 5%;
  height: 9%;
  text-indent: -9999px;
  opacity: 0.5;
}

#btnPlayPause:hover{
  opacity: 1;
}

#btnPlayPause:focus {
  outline: 1;
}

.play{
  bottom: 2%;
  left: 1%;
  background-position:0 !important;
}

.pause{
  bottom: 2%;
  left: 1%;
  background-position:33% !important;
}

#volume-bar{
  bottom: 3.2%;
  width: 6%;
  position: absolute;
  right: 5%;
  opacity: 0.5;
  z-index: 9999;
}

#volume-bar:hover{
  opacity: 1;
}

#volume-bar:focus{
  outline: 1;
}


#btnMute{
  position: absolute;
  right: 1.6%;
  bottom: 1.8%;
  background: url(/images/control_icon.svg);
  background-size: 409%;
  border: none;
  background-repeat: no-repeat;
  width: 2.5%;
  height: 4%;
  text-indent: -9999px;
  opacity: 0.5;
  z-index: 9999;
}

#btnMute:hover{
  opacity: 1;
}


#btnMute:focus{
  outline: 1;
}

.mute{
  background-position: 105% !important;
}

.unmute{
  background-position: 70% !important;
}


@media only screen and (max-width: 575px) {
  #btnMute{
    right: 0.2% !important;
    bottom: 1% !important;
    width: 5% !important;
    height: 9% !important;
  }

  #volume-bar{
    right: 6.4%;
    bottom: 4.5%;
    width: 9%;
    height: 1%;
  }

  #btnPlayPause{
    width: 10%;
    height: 16%;
  }


  input[type="range"]::-webkit-slider-thumb {
    height: 10px !important;
    padding-top: 5px !important;
    padding-bottom: 10px !important;
  }

  .ie{
    bottom: -8%;
    height: 100px !important;
  }

}


@media  (min-width : 576px) and (max-width : 768px) {
  #btnMute{
    right: 0.2% !important;
    bottom: 2% !important;
    width: 5% !important;
    height: 8% !important;
  }

  #volume-bar{
    bottom: 5.8%;
    position: absolute;
    right: 6%;
    opacity: 0.5;
    width: 9%;
    height:1% ;
  }

  input[type="range"]::-webkit-slider-thumb {
    height: 20px !important;
  }

  .ie{
    bottom: -8% !important;
    height: 100px !important;
  }

}

@media  (min-width : 768px) and (max-width : 1400px) {
  #btnMute{
    right: 0.2% !important;
    bottom: 1% !important;
    width: 4% !important;
    height: 7% !important;
  }

  #volume-bar{
    height: 1%;
    bottom: 4%;
    width: 6%;
  }

  .ie{
    bottom:-3% !important;
    height: 100px !important;
  }

  /* Chrome */
  input[type="range"]::-webkit-slider-thumb {
    height: 20px !important;
  }
}

@media only screen and (min-width: 1400px) {
  .ie{
    bottom:0 !important;
  }
}

/* .fancybox-slide{
  padding:0 !important;
} */

/*.......................................................................................................*/
nput[type=range] {
  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
  width: 100%; /* Specific width is required for Firefox. */
  background: transparent; /* Otherwise white in Chrome */
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type=range]:focus {
  outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

input[type=range]::-ms-track {
  width: 100%;
  cursor: pointer;

  /* Hides the slider so custom styles can be added */
  background: transparent; 
  border-color: transparent;
  color: transparent;
}


input[type="range"]{
  -webkit-appearance: none;
  outline: none !important;
  appearance:none;
  border:none;
  border-radius:30px;
}
input[type="range"]::-moz-focus-outer {
    border: 0;
}
input[type="range"]:hover {
  outline:none;
}

/* Chrome */

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 1px solid #000000;
  height: 30px;
  width: 10%;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
  margin-top: -10px;
  margin-bottom: -10px;
  border-radius:30px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}

/* Moz */

input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: #838383;
  cursor: pointer;
  border-radius:50%;
  border:none;
  outline:none;
}
input[type="range"]::-moz-range-progress {
  background-color: #fff;
    height: 100%;
  border-radius:30px;
  border:none;
}
input[type="range"]::-moz-range-track {  
  background-color: #fff;
  border-radius:30px;
  border:none;
    height: 100%;
}

/* IE*/

input[type="range"]::-ms-fill-lower {
  background-color: #fff;
    height: 100%;
  border-radius:30px;
  border:none;
}
input[type="range"]::-ms-fill-upper {  
  background-color: #fff;
  border-radius:30px;
  border:none;
    height: 100%;
}

/*....................................*/