#s_teaser--controls-wrap {padding-top: 6rem;}

#s_teaser--controls {
    cursor: pointer !important;
    padding-right: 4.25rem;
    transition: transform 500ms ease-in-out;
}

#s_teaser--controls-wrap[data-status="show"] #s_teaser--controls {transform: translateY(0);}
#s_teaser--controls-wrap[data-status="hide"] #s_teaser--controls {transform: translateY(100%);}


/* PLAY / PAUSE */
#s_teaser--control-toggle[data-status='play'] img:nth-child(1) {display: none;}
#s_teaser--control-toggle[data-status='pause'] img:nth-child(2) {display: none;}


/* PROGRESS */
#s_teaser--control-progress[value] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    color: var(--c-yellow);
    background: var(--c-white);
    border: 0;
    width: 100%;
    height: .5rem;
}
#s_teaser--control-progress[value]::-webkit-progress-bar {background: var(--c-white);}
#s_teaser--control-progress[value]::-webkit-progress-value {background: var(--c-yellow);}
#s_teaser--control-progress[value]::-moz-progress-bar {background: var(--c-yellow);}


/* VOLUME */
#s_teaser--control-volume {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: .5rem;
    border-radius: 0;
    cursor: pointer !important;
}

#s_teaser--control-volume::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    appearance: none;
    background: var(--c-white);
    height: .5rem;
    border-radius: 0;
}

#s_teaser--control-volume::-moz-range-track {background: var(--c-yellow);}

#s_teaser--control-volume::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: .5rem;
    height: .5rem;
    background: var(--c-yellow);
    box-shadow: -100vw 0 0 100vw var(--c-yellow);
}