@charset "UTF-8";
video::-webkit-media-controls { display:none !important; }
.miniplay__button{position: absolute; left: 15px; bottom: 26px; width: 20px; height: 20px; background: #fff; transform: translateY(50%);}
.timeline {position: absolute; bottom: 25px; width: calc(100% - 147px); margin-left: 85px; margin-right: 32px; height: 2px; cursor: pointer;}
.timeline__drag {width: 17px; height: 17px; border-radius: 17px; position: absolute; z-index: 2; transform-origin: 0 0; transform: translateY(-50%);}
.timeline__progress {display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: 0 0; position: relative; z-index: 1;}

svg#Sound_Layer{position: absolute; left: 47px; bottom: 26px; width: 20px; height: 20px; transform: translateY(50%);}
.sound__wrapper{display: none; position: absolute; left: -10px; bottom: 20px; width: 40px; height: 110px;}
.sound__button{position: absolute; left: 47px; bottom: 26px; width: 20px; height: 20px; background: transparent; transform: translateY(50%);}
.sound__bar{position: absolute; left: 50%; bottom: 0px; width: 2px; height: 100px; transform: translateX(-50%);}
.sound__drag {width: 16px; height: 16px; border-radius: 16px; position: absolute; z-index: 2; transform-origin: 50% 50%; transform: translateY(-50%) translateX(-50%); left: 50%}

.fullscreen__button{position: absolute; right: 21px; bottom: 26px; width: 20px; height: 20px; background: url(../../imgs/expandir.png) no-repeat center center / contain; transform: translateY(50%);}
.fullscreen__button.fullScreen{background: url(../../imgs/expandir2.png) no-repeat center center / contain;}

#circulo-play__button{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
#circulo-play__button > path{stroke-dasharray: 940;}

.play__button{position: absolute; width: 80px; height: 80px; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.play__button::after{content: ""; position: absolute; width: 40px; height: 45px; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--big-playButton-backgroundcolor); transition: left .5s;}

.play__button.is-paused::after {
  animation: pauseToPlayBig 0.5s linear forwards;;
}

.play__button.is-playing::after {
  animation: playToPauseBig 0.5s linear forwards;;
}

.miniplay__button.is-paused {
  animation: pauseToPlay 0.5s linear forwards;
}

.miniplay__button.is-playing {
  animation: playToPause 0.5s linear forwards;
}

#circulo-play__button.is-paused > path {
  animation: pauseToPlaySvg 0.75s linear forwards;
}

#circulo-play__button.is-playing > path {
  animation: playToPauseSvg 0.75s linear forwards;
}

@keyframes playToPause {
  0% {
    clip-path: polygon( 0 0, 0 0, 0 0, 0 0, 0 0, 100% 50%, 100% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0% 100% );
  }
  50% {
    clip-path: polygon( 0 0, 33% 0, 33% 0, 66% 0, 66% 0, 100% 0, 100% 100%, 66% 100%, 66% 100%, 33% 100%, 33% 100%, 0% 100%);
  }

  100% {
    clip-path: polygon( 0 0, 33% 0, 33% 50%, 66% 50%, 66% 0, 100% 0%, 100% 100%, 66% 100%, 66% 50%, 33% 50%, 33% 100%, 0% 100%);
  }
}

@keyframes pauseToPlay {
  0% {
    clip-path: polygon( 0 0, 33% 0, 33% 50%, 66% 50%, 66% 0, 100% 0%, 100% 100%, 66% 100%, 66% 50%, 33% 50%, 33% 100%, 0% 100%);
  }

  50% {
    clip-path: polygon( 0 0, 33% 0, 33% 0, 66% 0, 66% 0, 100% 0, 100% 100%, 66% 100%, 66% 100%, 33% 100%, 33% 100%, 0% 100%);
  }

  100% {
    clip-path: polygon( 0 0, 0 0, 0 0, 0 0, 0 0, 100% 50%, 100% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0% 100% );
  }
}

@keyframes playToPauseBig {
  0% {
    clip-path: polygon( 0 0, 0 0, 0 0, 0 0, 0 0, 100% 50%, 100% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0% 100% );
    opacity: 0.5;
  }

  50% {
    clip-path: polygon( 0 0, 33% 0, 33% 0, 66% 0, 66% 0, 100% 0, 100% 100%, 66% 100%, 66% 100%, 33% 100%, 33% 100%, 0% 100%);
    opacity: 0.25;
  }

  100% {
    clip-path: polygon( 0 0, 33% 0, 33% 50%, 66% 50%, 66% 0, 100% 0%, 100% 100%, 66% 100%, 66% 50%, 33% 50%, 33% 100%, 0% 100%);
    opacity: 0.0;
  }
}

@keyframes pauseToPlayBig {
  0% {
    clip-path: polygon( 0 0, 33% 0, 33% 50%, 66% 50%, 66% 0, 100% 0%, 100% 100%, 66% 100%, 66% 50%, 33% 50%, 33% 100%, 0% 100%);
    opacity: 0;
  }

  50% {
    clip-path: polygon( 0 0, 33% 0, 33% 0, 66% 0, 66% 0, 100% 0, 100% 100%, 66% 100%, 66% 100%, 33% 100%, 33% 100%, 0% 100%);
    opacity: 0.25;
  }

  100% {
    clip-path: polygon( 0 0, 0 0, 0 0, 0 0, 0 0, 100% 50%, 100% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0% 100% );
    opacity: 0.5;
  }
}

@keyframes playToPauseSvg {
  0% {
    stroke-dashoffset: 470;
  }

  100% {
    stroke-dashoffset: 940;
  }
}

@keyframes pauseToPlaySvg {
  0% {
    stroke-dashoffset: 940;
  }

  100% {
    stroke-dashoffset: 470;
  }
}