.buffer{
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-40px, -50px);
    display:none;
}
.ripple {
  display: inline-block;
  position: relative;
  width: 50px;
  height: 50px;
}
.ripple div {
  position: absolute;
  border: 4px solid #fff;
  opacity: 1;
  border-radius: 50%;
  animation: ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.ripple div:nth-child(2) {
  animation-delay: -0.5s;
}
@keyframes ripple {
  0% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: 0px;
    left: 0px;
    width: 72px;
    height: 72px;
    opacity: 0;
  }
}
.hide{
    display: none;
}
        
.video_wrapper {
position: relative;
display: flex;
align-items: center;
/*justify-content: center;*/
z-index: 11;
}

/**/

.video_wrapper .video {
width: 100%;
}

.video_wrapper:fullscreen .video {
width: 100vw;
height: 100vh;
}

.video_wrapper .watermark {
opacity: 0;
display: none;
}

.video_wrapper .watermark .holder {
position: absolute;
background: #ffffff;
color: #414040;
padding: 10px 0px 10px 10px;
border-radius: 5px;
font-size: 10px;
word-wrap: break-word;
}

.video_wrapper .watermark.active .holder {
animation: fadeOut 1000ms;
}

.video_wrapper .watermark.watermark-top .holder {
bottom: unset;
top: 100px;
}

.video_wrapper .watermark.watermark-bottom .holder {
bottom: 100px;
top: unset;
}

.video_wrapper .watermark.watermark-left .holder {
left: 100px;
right: unset;
}

.video_wrapper .watermark.watermark-right .holder {
left: unset;
right: 100px;
}

@media screen and (orientation:portrait) {
  .video_wrapper:fullscreen .watermark.watermark-top .holder {
    bottom: unset;
    top: 38vh;
  }

  .video_wrapper:fullscreen .watermark.watermark-bottom .holder {
    bottom: 38vh;
    top: unset;
  }

  .video_wrapper:fullscreen .watermark.watermark-left .holder {
    left: 1rem;
    right: unset;
  }

  .video_wrapper:fullscreen .watermark.watermark-right .holder {
    left: unset;
    right: 1rem;
  }
}

.video::-webkit-media-controls-fullscreen-button{
display: none !important;
}

.video_wrapper .fullscreen-button{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 50px;
  height: 50px;
  background: url("../icons/fullscreen-white.svg") no-repeat center center;
  background-size: 50%;
  cursor: pointer;
}

.conBtn{
position: absolute;
padding: 10px;
background-color: transparent;
border-radius: 50px;
outline: none;
color: #fff;
border: none;
width: 25px;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
}
.video-controls .fa{
  font-size: 1.5rem;
}
.video-controls #play-pause{
  top: 50%;
  bottom: unset;
  left: 50%;
  transform: translate(-50%,-65%);
  background-color: #ffe14dbd;
  right: unset;
  width: 50px;
  height: 50px;
}
.video-controls #rewind{
  top: 50%;
  bottom: unset;
  left: 20%;
  transform: translate(-50%,-65%);
  background-color: #ffe14d2b;
  right: unset;
  width: 25px;
  height: 25px;
}
.video-controls #skip{
  top: 50%;
  bottom: unset;
  left: 80%;
  transform: translate(-50%,-65%);
  background-color: #ffe14d2b;
  right: unset;
  width: 25px;
  height: 25px;
}
.video-controls #mute{
  top: unset;
  bottom: 35px;
  left: unset;
  padding: 0;
  right: 15px;
  background-color: #ffe14d;
  width: 25px;
  height: 25px;
  font-size: 0.8rem;
}
.video-controls #video_duration{
  top: unset;
  left: unset;
  bottom: 35px;
  right: 75px;
  padding: 0;
  font-family: "Sen", sans-serif;
  letter-spacing:  1px;
  height: 25px;
  line-height: 25px;
  font-size: 0.8rem;
}

.conBtn:hover{
  filter: brightness(70%);
}


/**/

#seek-bar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 5px;
-webkit-appearance: none;
margin: 15px auto;
width: 95%;
background-color: transparent;
}

/*progress support*/
#seek-bar.slider-progress {
--range: calc(var(--max) - var(--min));
--ratio: calc((var(--value) - var(--min)) / var(--range));
--sx: calc(0.5 * 20px + var(--ratio) * (100% - 20px));
}

/*webkit*/
#seek-bar::-webkit-slider-thumb {
width: 20px;
height: 20px;
border-radius: 20px;
background: #ffe14d;
border: none;
box-shadow: none;
margin-top: calc(5px * 0.5 - 20px * 0.5);
-webkit-appearance: none;
}

#seek-bar::-webkit-slider-runnable-track {
height: 5px;
border-radius: 10px;
background: #e5e5e5;
border: none;
box-shadow: none;
}
#seek-bar::-webkit-slider-thumb:hover {
background: #fff;
}

#seek-bar::-webkit-slider-thumb:active {
background: #fff;
}

#seek-bar.slider-progress::-webkit-slider-runnable-track {
background: linear-gradient(#ffe14d, #ffe14d) 0 / var(--sx) 100% no-repeat,
  #e5e5e5;
}

/*mozilla*/
#seek-bar::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 20px;
background: #ffe14d;
border: none;
box-shadow: none;
}

#seek-bar::-moz-range-track {
height: 5px;
border-radius: 10px;
background: #f5f5f5;
border: none;
box-shadow: none;
}

#seek-bar::-moz-range-thumb:hover {
background: #fff;
}

#seek-bar::-moz-range-thumb:active {
background: #fff;
}

#seek-bar.slider-progress::-moz-range-track {
background: linear-gradient(#ffe14d, #ffe14d) 0 / var(--sx) 100% no-repeat,
  #e5e5e5;
}

/*ms*/
#seek-bar::-ms-fill-upper {
background: transparent;
border-color: transparent;
}

#seek-bar::-ms-fill-lower {
background: transparent;
border-color: transparent;
}

#seek-bar::-ms-thumb {
width: 20px;
height: 20px;
border-radius: 20px;
background: #ffe14d;
border: none;
box-shadow: none;
margin-top: 0;
box-sizing: border-box;
}

#seek-bar::-ms-track {
height: 5px;
border-radius: 10px;
background: #f5f5f5;
border: none;
box-shadow: none;
box-sizing: border-box;
}

#seek-bar::-ms-thumb:hover {
background: #fff;
}

#seek-bar::-ms-thumb:active {
background: #fff;
}

#seek-bar.slider-progress::-ms-fill-lower {
height: 5px;
border-radius: 10px 0 0 10px;
margin: -undefined 0 -undefined -undefined;
background: #ffe14d;
border: none;
border-right-width: 0;
}