.page-template-page-media-player-demo section{padding:120px 0 80px}.page-template-page-media-player-demo section .container{max-width:calc(800px + (var(--container-outer-padding) * 2))}.page-template-page-media-player-demo section h1{margin:0}.page-template-page-media-player-demo section .eyebrow{margin:120px 0 30px}.page-template-page-media-player-demo section iframe[src*="spotify.com"]{width:100%}.page-template-page-media-player-demo footer{display:none}.media-player{--seek-before-width:0%;--volume-before-width:100%;--buffered-width:0%;margin:0 auto;position:relative}.media-player button{appearance:none;background:0 0;border:none;border-radius:0;cursor:pointer;display:block;outline:none;padding:0}.media-player [data-icon-play-state],.media-player [data-icon-volume-range],.media-player [data-icon-cc-state],.media-player [data-icon-fullscreen-state]{color:var(--white);display:block;left:50%;opacity:0;pointer-events:none;position:absolute;top:50%;transform:translate3d(-50%,-50%,0) scale(.95);transition:.2s var(--transition-timing-function);visibility:hidden;width:16px}.media-player [data-play-state=play] [data-icon-play-state=pause],.media-player [data-play-state=pause] [data-icon-play-state=play],.media-player [data-volume-range="0:0"] [data-icon-volume-range="0:0"],.media-player [data-volume-range="1:33"] [data-icon-volume-range="1:33"],.media-player [data-volume-range="34:66"] [data-icon-volume-range="34:66"],.media-player [data-volume-range="67:100"] [data-icon-volume-range="67:100"],.media-player [data-cc-state=hidden] [data-icon-cc-state=hidden],.media-player [data-cc-state=showing] [data-icon-cc-state=showing],.media-player [data-fullscreen-state=inline] [data-icon-fullscreen-state=inline],.media-player [data-fullscreen-state=fullscreen] [data-icon-fullscreen-state=fullscreen]{opacity:1;pointer-events:all;transform:translate3d(-50%,-50%,0) scale(1);visibility:visible}.media-player button svg{display:block}.media-player .controls{align-items:center;display:flex}.media-player .play-icon{background:var(--black);min-width:60px;position:relative}.media-player .play-icon:hover,.media-player .play-icon[data-play-state=play]{background:var(--red)}.media-player .play-icon [data-icon-play-state]{height:22px;width:unset}.media-player .song-title{color:var(--black);display:block;margin:0 20px;min-width:var(--song-title-width);overflow:hidden;position:relative;--song-title-width:330px}.media-player .song-title.marquee:after{background:linear-gradient(to right,rgba(246,244,241,0),rgba(246,244,241,1));content:'';display:block;height:100%;position:absolute;right:0;top:0;width:31px;z-index:1}.media-player .song-title span{display:block;width:max-content}.media-player .song-title.marquee:after{animation:song-title-marquee-after var(--marquee-animation-speed) infinite linear forwards}.media-player .song-title.marquee span{animation:song-title-marquee var(--marquee-animation-speed) infinite linear forwards}.media-player .song-title.marquee:hover:after,.media-player .song-title.marquee:hover span,.media-player .play-icon[data-play-state=pause]~.song-title.marquee span{animation-play-state:paused}.media-player .volume-controls{margin:0 20px;position:relative;z-index:1}.media-player .volume-controls:after{background:var(--white);bottom:-2px;box-shadow:0 4px 20px rgba(31,31,31,.25);content:'';display:block;height:calc(100% + 80px + 10px + 4px);left:50%;opacity:0;pointer-events:none;position:absolute;transform:translate3d(-50%,0,0);transition:.2s var(--transition-timing-function);visibility:hidden;width:calc(100% + 12px);z-index:-1}.media-player .volume-controls .volume-icon{height:22px;position:relative;width:16px}.media-player .volume-controls .volume-icon [data-icon-volume-range]{color:var(--black)}.media-player .volume-controls .volume-slider{bottom:calc(80px - 22px + 4px);left:50%;opacity:0;pointer-events:none;position:absolute;transform:translate3d(-50%,0,0) rotate(-90deg);transition:.2s var(--transition-timing-function);visibility:hidden;width:80px}.media-player .volume-controls:hover:after,.media-player .volume-controls:hover .volume-slider{opacity:1;pointer-events:all;visibility:visible}.media-player .time-output{align-items:baseline;display:flex;font-size:calc(14rem / 16);line-height:calc(22 / 14);margin-right:20px;position:relative;top:-1px}.media-player .time-output .current-time{text-align:right}.media-player .time-output .divider{margin:0 3px}.media-player input[type=range]{appearance:none;-webkit-appearance:none;background:0 0;height:5px;margin:0;outline:none;padding:0;position:relative;width:100%;--slider-track-bkg:linear-gradient(to right,rgba(31,31,31,1) var(--buffered-width),rgba(31,31,31,.4) var(--buffered-width))}.media-player input[type=range].volume-slider{--slider-track-bkg:var(--black)}.media-player input[type=range]::-webkit-slider-runnable-track{background:var(--slider-track-bkg);cursor:pointer;height:1px;width:100%}.media-player input[type=range]:before{background-color:var(--red);content:'';cursor:pointer;height:3px;left:0;position:absolute;top:1px;width:var(--seek-before-width)}.media-player input[type=range].volume-slider:before{width:var(--volume-before-width)}.media-player input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--red);border:none;cursor:pointer;height:5px;position:relative;top:-2px;width:5px}.media-player input[type=range]:active::-webkit-slider-thumb{transform:scale(1.2)}.media-player input[type=range]::-moz-range-track{background:var(--slider-track-bkg);cursor:pointer;height:1px;width:100%}.media-player input[type=range]::-moz-range-progress{background-color:var(--red)}.media-player input[type=range]::-moz-focus-outer{border:0}.media-player input[type=range]::-moz-range-thumb{background:var(--red);border:none;border-radius:0;cursor:pointer;height:5px;position:relative;top:-2px;width:5px}.media-player input[type=range]:active::-moz-range-thumb{transform:scale(1.2)}.media-player input[type=range]::-ms-track{background:0 0;border:solid transparent;color:transparent;cursor:pointer;height:3px;width:100%}.media-player input[type=range]::-ms-fill-lower{background-color:var(--red)}.media-player input[type=range]::-ms-fill-upper{background:var(--slider-track-bkg);height:1px}.media-player input[type=range]::-ms-thumb{background:var(--red);border:none;border-radius:0;cursor:pointer;height:5px;position:relative;top:-2px;width:5px}.media-player input[type=range]:active::-ms-thumb{transform:scale(1.2)}.media-player .cc-icon{height:22px;margin:0 20px 0 0;position:relative;width:16px}.media-player .fullscreen-icon{height:22px;margin:0 20px 0 0;position:relative;width:16px}.media-player.video video{display:block;object-fit:cover;width:100%}.media-player.video .controls{bottom:0;left:0;position:absolute;transform:translate3d(0,0,0);width:100%;z-index:1}.media-player.video:not(.embed) .controls:after{background:linear-gradient(to bottom,rgba(31,31,31,0),rgba(31,31,31,1));content:'';display:block;height:100%;left:0;opacity:0;position:absolute;top:0;transition:.2s var(--transition-timing-function);width:100%;z-index:-1}.media-player.video:not(.embed):hover .controls:after{opacity:1}.media-player.video .play-icon{background:var(--red)}.media-player.video input[type=range].seek-slider,#sticky-media-player input[type=range].seek-slider{--slider-track-bkg:linear-gradient(to right,rgba(255,255,255,1) var(--buffered-width),rgba(255,255,255,.4) var(--buffered-width))}.media-player.video .volume-controls:not(:hover) .volume-icon [data-icon-volume-range],#sticky-media-player .volume-controls:not(:hover) .volume-icon [data-icon-volume-range]{color:var(--white)}.media-player.video .time-output,#sticky-media-player .time-output{color:var(--white)}.media-player.video .time-output>span,#sticky-media-player .time-output>span{opacity:.5}.media-player.video .time-output>.current-time,#sticky-media-player .time-output>.current-time{opacity:1}.media-player[data-dialog-open]{cursor:pointer}.media-player.audio.embed:hover .btn.icon{background:var(--red)}.media-player.audio.embed .controls p.btn{margin:0 0 0 20px}.media-player.audio.embed:hover .controls p.btn{color:var(--red)}button[data-sticky-media-player-file]{background:0 0;border:none;display:contents;font-weight:700;outline:none;padding:0;position:relative;text-decoration:underline;text-underline-offset:2px;transition:.3s var(--transition-timing-function);vertical-align:-1px;z-index:0}button[data-sticky-media-player-file]:hover,button[data-sticky-media-player-file]:focus{background-position:left bottom;color:var(--red)}button[data-sticky-media-player-file] svg{padding-right:4px}#sticky-media-player{background:var(--black);bottom:10px;max-width:calc(100vw - 20px);opacity:0;pointer-events:none;position:fixed;right:10px;transition:.3s var(--transition-timing-function);visibility:hidden;width:500px;z-index:99}#sticky-media-player.open{opacity:1;pointer-events:all;visibility:visible}#sticky-media-player .song-title{color:var(--white);min-width:var(--song-title-width);width:var(--song-title-width);--song-title-width:150px}#sticky-media-player .song-title.marquee:after{background:linear-gradient(to right,rgba(31,31,31,0),rgba(31,31,31,1))}#sticky-media-player .play-icon{background:var(--red)}#sticky-media-player input[type=range].seek-slider{min-width:60px;width:100%}#sticky-media-player .volume-controls{margin-right:15px}#sticky-media-player .time-output{margin-right:30px}#sticky-media-player .close-sticky-player{align-items:center;background:var(--gray);border:none;color:var(--white);display:flex;font-size:calc(12rem / 16);height:20px;justify-content:center;position:absolute;right:0;top:0;width:20px;z-index:1}#sticky-media-player .close-sticky-player:hover{background:var(--white);color:var(--black)}@media (prefers-reduced-motion:no-preference){@keyframes song-title-marquee{0%{transform:translate3d(0,0,0)}30%,50%{transform:translate3d(calc(-100% + var(--song-title-width)), 0, 0)}80%{transform:translate3d(0,0,0)}}@keyframes song-title-marquee-after{0%{opacity:1}30%,50%{opacity:0}}}