@charset "UTF-8";

:root {
    --plyr-color-main: #00b2ff;
    --plyr-font-size-base: 13px;
    --plyr-font-size-small: 12px;
    --plyr-font-size-time: 11px;
    --plyr-font-size-badges: 9px;
    --plyr-font-size-menu: var(--plyr-font-size-base);
    --plyr-font-weight-regular: 500;
    --plyr-font-weight-bold: 600;
    --plyr-font-size-captions-medium: 18px;
    --plyr-font-size-captions-large: 21px
}

@font-face {
    font-display: swap;
    font-family: Gordita;
    font-style: normal;
    font-weight: 300;
    src: url(https://cdn.plyr.io/static/fonts/gordita-light.woff2) format("woff2"), url(https://cdn.plyr.io/static/fonts/gordita-light.woff) format("woff")
}

@font-face {
    font-display: swap;
    font-family: Gordita;
    font-style: normal;
    font-weight: 400;
    src: url(https://cdn.plyr.io/static/fonts/gordita-regular.woff2) format("woff2"), url(https://cdn.plyr.io/static/fonts/gordita-regular.woff) format("woff")
}

@font-face {
    font-display: swap;
    font-family: Gordita;
    font-style: normal;
    font-weight: 500;
    src: url(https://cdn.plyr.io/static/fonts/gordita-medium.woff2) format("woff2"), url(https://cdn.plyr.io/static/fonts/gordita-medium.woff) format("woff")
}

@font-face {
    font-display: swap;
    font-family: Gordita;
    font-style: normal;
    font-weight: 600;
    src: url(https://cdn.plyr.io/static/fonts/gordita-bold.woff2) format("woff2"), url(https://cdn.plyr.io/static/fonts/gordita-bold.woff) format("woff")
}

@font-face {
    font-display: swap;
    font-family: Gordita;
    font-style: normal;
    font-weight: 900;
    src: url(https://cdn.plyr.io/static/fonts/gordita-black.woff2) format("woff2"), url(https://cdn.plyr.io/static/fonts/gordita-black.woff) format("woff")
}

@keyframes fade-in {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes shrink-hide {
    0% {
        opacity: .5;
        width: 38px
    }

    20% {
        width: 45px
    }

    to {
        opacity: 0;
        width: 0
    }
}

.player-container {
    margin-left: auto;
    margin-right: auto;
    }
    .plyr {
    border-radius: 4px;
    margin-bottom: 15px;
}

body {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    color: #4a5764;
    font-family: Gordita, Avenir, Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
    font-size: 15px;
    font-size: .9375rem;
    font-weight: 500;
    line-height: 1.75
}

.plyr {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    align-items: center;
    direction: ltr;
    display: flex;
    flex-direction: column;
    font-family: inherit;
    font-family: var(--plyr-font-family, inherit);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    font-weight: var(--plyr-font-weight-regular, 400);
    line-height: 1.7;
    line-height: var(--plyr-line-height, 1.7);
    max-width: 100%;
    min-width: 200px;
    position: relative;
    text-shadow: none;
    transition: box-shadow .3s ease;
    z-index: 0
}