@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+Symbols+2&display=swap);
@import url(https://fonts.googleapis.com/css?family=Karla:400,400i,700,700i);
@import url(https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700);
@import url(https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700);
body{align-items:stretch;display:flex;flex-direction:column;height:100dvh;overflow:hidden}

@media(max-height: 550px){
body{overflow:auto}}

@media(max-width: 580px){
body{height:auto}}

@media(width <= 1199px){
.container{width:100%}}

.container::before,.container::after{content:none;display:none}

.masthead.v4{border-bottom:1px solid #e6e6e6;flex:0 0 auto}

.masthead.v4 a.logo{overflow:visible;width:auto}

.masthead.v4 a.logo svg{height:24px;width:150px}

.masthead.v4 .navbar .container{align-items:end;display:flex;justify-content:space-between}

.masthead.v4 .navbar .container .nav li a.btn-primary.purple{color:#fff;font-weight:600}

.masthead.v4 .navbar .container .nav li a.btn-primary.purple:hover{background-color:rgba(66,62,135,.9)}

.masthead.v4 .navbar .container .nav li a.btn-primary.purple:active{background-color:#423e87}

main.player-container{flex:0 0 auto;padding:24px 15px 0}

main.player-container #title{color:#9b9b9b;font-family:inter,helvetica,"Helvetica Neue",sans-serif;font-size:14px;font-weight:400;line-height:36px}

main.player-container #title h1{color:#333;font-family:inter,helvetica,"Helvetica Neue",sans-serif;font-size:20px;font-weight:700;line-height:36px;margin:0}

.player{display:flex;flex:1 1 auto;justify-content:center;margin:0;overflow:hidden;position:relative}

@media(max-height: 550px){
.player{flex:1 0 280px}}

.player #fullscreen{aspect-ratio:16/9;display:flex;justify-content:center;line-height:0;max-height:100%;max-height:fit-content;max-width:100%;padding:0;position:relative}

.player #fullscreen video{max-height:fit-content;width:100%}

.controls{bottom:0;display:flex;flex-direction:column;left:0;padding:0 5px;position:absolute;transition:.5s opacity ease-in-out;user-select:none;width:100%}

[dir="rtl"] .controls{left:auto;right:0}

.controls .progress{cursor:pointer;height:16px;outline:none;position:relative;touch-action:none;width:100%}

.controls .progress-time{background-color:#ccc;border-radius:2px;height:4px;left:0;position:absolute;top:50%;transform:translateY(-50%);transition:height .1s ease-in-out;width:100%}

[dir="rtl"] .controls .progress-time{left:auto;right:0}

.controls .progress-time.current{background-color:#2ecf80;width:0}

.controls .fast-forward{background-color:rgba(255,255,255,.5);border-radius:2px;height:4px;left:0;position:absolute;top:50%;transform:translateY(-50%);transition:height .1s ease-in-out;width:0}

[dir="rtl"] .controls .fast-forward{left:auto;right:0}

.controls .scrubber{background-color:#2ecf80;border-radius:50%;height:13px;left:0;pointer-events:none;position:absolute;top:50%;transform:translate(-50%, -50%) scale(0);transition:transform .1s ease-in-out;width:13px}

[dir="rtl"] .controls .scrubber{left:auto;right:0;transform:translate(50%, -50%) scale(0)}

.controls .seek-tooltip{background-color:rgba(0,0,0,.8);border-radius:4px;bottom:100%;color:#fff;font-size:12px;left:0;line-height:1.5;margin-bottom:8px;opacity:0;padding:2px 6px;pointer-events:none;position:absolute;transform:translateX(-50%);transition:opacity .1s ease-in-out;white-space:nowrap}

[dir="rtl"] .controls .seek-tooltip{left:auto;right:0;transform:translateX(50%)}

.controls .progress:hover .progress-time,.controls .progress:hover .fast-forward,.controls .progress.is-keyboard .progress-time,.controls .progress.is-keyboard .fast-forward,.controls .progress.is-dragging .progress-time,.controls .progress.is-dragging .fast-forward{height:6px}

.controls .progress:hover .scrubber,.controls .progress.is-keyboard .scrubber,.controls .progress.is-dragging .scrubber{transform:translate(-50%, -50%) scale(1)}

[dir="rtl"] .controls .progress:hover .scrubber,[dir="rtl"] .controls .progress.is-keyboard .scrubber,[dir="rtl"] .controls .progress.is-dragging .scrubber{transform:translate(50%, -50%) scale(1)}

.controls .progress:hover .seek-tooltip,.controls .progress.is-dragging .seek-tooltip{opacity:1}

.controls .control-bar{align-items:center;display:flex;width:100%}

.controls button{align-items:center;background:rgba(0,0,0,0);border:none;display:flex;flex-direction:row;height:42px;justify-content:center;margin:0;padding:0;width:42px}

.controls button::before{color:#fff;content:attr(data-icon);font-family:"Noto Sans Symbols 2",sans-serif;font-size:20px;line-height:20px;position:relative;text-shadow:1px 1px 0 #000;top:2px;transition:color .25s ease-in-out}

[dir="rtl"] .controls button::before{text-shadow:-1px 1px 0 #000}

.controls button:hover::before{color:#2ecf80}

.controls .timer{color:#fff;flex:5;font-size:14px;height:42px;line-height:42px;padding-left:15px;position:relative;text-shadow:1px 1px 0 #000}

[dir="rtl"] .controls .timer{padding-left:0;padding-right:15px;text-shadow:-1px 1px 0 #000}

@media(prefers-reduced-motion: reduce){
.controls .progress-time,.controls .fast-forward,.controls .scrubber,.controls .seek-tooltip{transition:none}}

.player:hover .controls,.player:focus-within .controls{opacity:1}

.transcribe-container button{margin:30px auto}

footer{flex:0 0 auto;gap:16px;padding:2em 0}

footer .container{align-items:center;display:flex;justify-content:space-between}

@media(max-width: 580px){
footer .container{align-items:start;flex-direction:column}

footer .container ul.nav>li:first-of-type>a{padding-left:0}

[dir="rtl"] footer .container ul.nav>li:first-of-type>a{padding-left:0;padding-right:0}}