@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;left:0%;overflow:hidden;padding:0 5px;position:absolute;transition:.5s opacity ease-in-out;user-select:none;width:100%}.controls .progress-time{background-color:#ccc;height:5px;left:0;position:absolute;width:100%}.controls .progress-time:hover{cursor:pointer}.controls .progress-time.current{background-color:#2ecf80;width:0}.controls .fast-forward{background-color:#fff;height:5px;left:0;position:absolute;width:0}.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;margin-top:5px;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}.controls button:hover::before{color:#2ecf80}.controls .timer{color:#fff;flex:5;font-size:14px;height:42px;line-height:42px;margin-top:5px;padding-left:15px;position:relative;text-shadow:1px 1px 0 #000}.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}}
