*{
    -webkit-touch-callout: none;
  -webkit-user-select: none;
   -khtml-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  }
  html {
    overflow:   scroll;
  }
  ::-webkit-scrollbar {
      width: 0px;
      background: transparent; 
  }
  body{
    margin: 0;
    background: gray;
  }
  section{
    background: url("http://www.gerasfm.lt/wp-content/uploads/2018/07/cropped-beach-1236581_1920.jpg");
    background-size: cover;
    position: relative;
    width: 450px;
    height: 180px;
    margin: auto;
  }

    #play{
      position: relative;
      width: 80px;
      height: 80px;
      background: rgba(222,31,51,0.9);
      border: none;
      margin: auto;
      cursor: pointer;
    }
    .play::after{
      content: '';
      display: block;
      width: 30px;
      height: 30px;
      border-left: solid #fff 12px;
      border-right: solid #fff 12px;
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
    }


    .paused::after {
      content: '';
      display: block;
      position: relative;
      border-style: solid;
      border-width: 15px 0 15px 30px;
      border-color: transparent transparent transparent white;
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
    }


    input[type="range"] {
        margin: auto;
        -webkit-appearance: none;
        position: relative;
        overflow: hidden;
        height: 10px;
        width: 250px;
        cursor: pointer;
        border-radius: 0;
    }

    ::-webkit-slider-runnable-track {
        background-color: rgb(47,43,43) ;
    }

    ::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 0; /* 1 */
        height: 10px;
        background: rgba(222,31,51,0.9);
        -webkit-box-shadow: -100vw 0 0 100vw rgba(222,31,51,0.9);
                box-shadow: -100vw 0 0 100vw rgba(222,31,51,0.9);
    }

    ::-moz-range-track {
        height: 10px;
        background: rgba(47,43,43,0.45);
    }

    ::-moz-range-thumb {
        background: rgba(222,31,51,0.9);
        height: 10px;
        width: 5px;
        border: 3px solid rgba(222,31,51,0.9);
        border-radius: 0 !important;
        box-shadow: -100vw 0 0 100vw rgba(222,31,51,0.9);
        box-sizing: border-box;
    }

    ::-ms-fill-lower {
        background: rgba(222,31,51,0.9);
    }

    ::-ms-thumb {
        background: rgba(222,31,51,0.9);
        border: 2px solid rgba(222,31,51,0.9);
        height: 10px;
        width: 20px;
        box-sizing: border-box;
    }

    ::-ms-ticks-after {
        display: none;
    }

    ::-ms-ticks-before {
        display: none;
    }

    ::-ms-track {
        background: rgba(222,31,51,0.9);
        color: transparent;
        height: 10px;
        border: none;
    }

    ::-ms-tooltip {
        display: none;
    }
.box-out{
  position: relative;
  overflow: hidden;
  height: 25px;
  width: 100%;
  background: rgba(47,43,43,0.45);
  z-index: 9;

}
.wrapper-scroll p {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  color: white;
  z-index: 20;
  margin: 0;
  line-height: 25px;
  white-space: nowrap;
  animation: marquee 10s linear infinite;
}

@keyframes marquee {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}
.box-in{
  position: relative;
  background: rgb(222,31,51);
  height: 100%;
  width: 25px;
  z-index: 100
}
.spacing{
  margin-right: 10px;
}
.up{
  margin-top: 30px;
}
.relative{
  position: relative;
}
#volume-range{
margin-top: 20px;
position: absolute;
right: 0;
}
.container{
  position: absolute;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.icon{
width: 36px;
height: 36px;
}
a{
width: 0;
}
.note{
  position: absolute;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
@media only screen and (max-width: 450px) {
section{
  width: 100vw;
}
.icon{
  width: 25px;
  height: 25px;
}
input[type="range"] {
    width: 70%;
    position: absolute;
    right: 15px !important;
}
.relative{
  position: relative;
}

}
@media only screen and (max-width: 340px) {
section{
  width: 100vw;
}
.icon{
  width: 22px;
  height: 22px;
}
input[type="range"] {
  width: 70%;
    position: absolute;
    right: 15px !important;
}
.relative{
  position: relative;
}

}
@media only screen and (max-width: 318px) {
.icon{
  width: 18px;
  height: 18px;
}

}