38 files changed, 294 insertions, 226 deletions

diff --git a/demo/dist/demo.css b/demo/dist/demo.css
index e9bae18f..1f4a2cbc 100644
--- a/demo/dist/demo.css
+++ b/demo/dist/demo.css
@@ -1 +1 @@
-@charset 'UTF-8';@font-face{font-family:Gordita;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-weight:300;font-style:normal;font-display:swap}@font-face{font-family:Gordita;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-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Gordita;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-weight:500;font-style:normal;font-display:swap}@font-face{font-family:Gordita;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-weight:600;font-style:normal;font-display:swap}@font-face{font-family:Gordita;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');font-weight:900;font-style:normal;font-display:swap}@-webkit-keyframes fadein{0%{opacity:0}100%{opacity:1}}@keyframes fadein{0%{opacity:0}100%{opacity:1}}/*! normalize.css v2.1.3 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a,button.faux-link{background:0 0}a:focus,button.faux-link:focus{outline:thin dotted}a:active,a:hover,button.faux-link:active,button.faux-link:hover{outline:0}h1{font-size:2em;margin:.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:'\201C' '\201D' '\2018' '\2019'}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}*,::after,::before{box-sizing:border-box}body,html{display:-webkit-box;display:flex;width:100%}html{background:linear-gradient(to left top,#4dc1ff,#0074b3);background-attachment:fixed;height:100%}body{display:-webkit-box;display:flex;min-height:100%;-webkit-box-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}.grid{-webkit-box-flex:1;flex:1;overflow:auto}main{margin:auto;text-align:center}aside{position:relative;display:-webkit-box;display:flex;flex-shrink:0;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;width:100%;padding:15px;background:#fff;text-align:center;color:#55646b;text-shadow:none}aside .icon{margin-right:10px;fill:#4baaf4}aside p{margin:0}aside a,aside button.faux-link{color:#4baaf4}aside a.tab-focus,aside button.faux-link.tab-focus{outline:0;box-shadow:0 0 0 3px rgba(75,170,244,.35)}.grid{margin:0 auto;padding:20px}@media only screen and (min-width:768px){.grid{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;width:100%;max-width:1280px}.grid>*{-webkit-box-flex:1;flex:1}}html{font-size:100%}body{font-family:Gordita,Avenir,'Helvetica Neue',sans-serif;line-height:1.75;color:#fff;font-weight:500;text-shadow:0 1px 1px rgba(0,0,0,.15);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-size:15px;font-size:.938rem}button,input,select,textarea{font:inherit}p,small{margin:0 0 20px}small{display:block;font-size:13px;font-size:.813rem}h1{margin:0 0 10px;font-weight:600;letter-spacing:-.025em;font-size:64px;font-size:4rem}.button,.button__count{position:relative;display:-webkit-inline-box;display:inline-flex;vertical-align:middle;-webkit-box-align:center;align-items:center;padding:15px;border-radius:4px;box-shadow:0 1px 1px rgba(0,0,0,.1);background:#fff;border:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-shadow:none;color:#55646b}.button{padding-left:20px;padding-right:20px;transition:all .2s ease;font-weight:600}.button:focus,.button:hover{color:#343f4a}.button:focus::after,.button:hover::after{display:none}.button:hover{-webkit-transform:translateY(-1px);transform:translateY(-1px);box-shadow:0 2px 2px rgba(0,0,0,.1)}.button:focus{outline:0}.button.tab-focus{outline:0;box-shadow:0 0 0 3px rgba(255,255,255,.35)}.button:active{-webkit-transform:translateY(1px);transform:translateY(1px)}.button--with-count{display:-webkit-inline-box;display:inline-flex}.button--with-count .button .icon{flex-shrink:0}.button__count{margin-left:10px;-webkit-animation:fadein .2s ease;animation:fadein .2s ease}.button__count::before{content:'';position:absolute;width:0;height:0;right:100%;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);border:5px solid transparent;border-right-color:#fff;border-left-width:0}header{padding-bottom:20px;text-align:center}header .call-to-action{margin-top:30px}@media only screen and (min-width:768px){header{max-width:360px;margin-right:60px;padding-bottom:40px;text-align:left}}.icon{fill:currentColor;width:16px;height:16px;vertical-align:-3px}a svg,button svg,button.faux-link svg,label svg{pointer-events:none}.btn .icon,a .icon,button.faux-link .icon{margin-right:6px}button.faux-link{position:relative;margin:0;padding:0;width:auto;border:0;background:0 0;vertical-align:baseline;text-align:inherit;font:inherit;line-height:1.75;cursor:pointer;-moz-user-select:text;text-shadow:inherit;border-radius:0}a,button.faux-link{position:relative;border-bottom:1px dotted currentColor;transition:all .2s ease;text-decoration:none;color:#fff;font-weight:600}a::after,button.faux-link::after{content:'';position:absolute;top:100%;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);width:0;height:1px;transition:width .2s ease;background:currentColor}a:focus,a:hover,button.faux-link:focus,button.faux-link:hover{border-bottom-color:transparent;outline:0}a:focus::after,a:hover::after,button.faux-link:focus::after,button.faux-link:hover::after{width:100%}a.tab-focus,button.faux-link.tab-focus{outline:0;box-shadow:0 0 0 3px rgba(255,255,255,.35)}li,ul{list-style:none;margin:0;padding:0}nav{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;margin-bottom:20px}video{max-width:100%;vertical-align:middle}.plyr{margin:20px auto;border-radius:4px;box-shadow:0 2px 5px rgba(0,0,0,.2)}.plyr.plyr--audio{max-width:480px}.plyr__video-wrapper::after{content:'';pointer-events:none;position:absolute;top:0;bottom:0;left:0;right:0;border:1px solid rgba(0,0,0,.15);border-radius:inherit}.plyr__cite{display:none;margin-top:20px}.plyr__cite .icon{margin-right:4px}.plyr--audio~ul .plyr__cite--audio,.plyr--video:not(.plyr--youtube):not(.plyr--vimeo)~ul .plyr__cite--video,.plyr--vimeo~ul .plyr__cite--vimeo,.plyr--youtube~ul .plyr__cite--youtube{display:block}@-webkit-keyframes plyr-progress{to{background-position:25px 0}}@keyframes plyr-progress{to{background-position:25px 0}}@-webkit-keyframes plyr-popup{from{-webkit-transform:translateY(10px);transform:translateY(10px);opacity:.5}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes plyr-popup{from{-webkit-transform:translateY(10px);transform:translateY(10px);opacity:.5}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@-webkit-keyframes plyr-fade-in{from{opacity:0}to{opacity:1}}@keyframes plyr-fade-in{from{opacity:0}to{opacity:1}}.plyr{position:relative;max-width:100%;min-width:200px;font-family:inherit;font-weight:500;line-height:1.7;direction:ltr;text-shadow:none;transition:box-shadow .3s ease;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.plyr audio,.plyr video{width:100%;height:auto;vertical-align:middle;border-radius:inherit}.plyr:focus{outline:0}.plyr--full-ui,.plyr--full-ui *,.plyr--full-ui ::after,.plyr--full-ui ::before{box-sizing:border-box}.plyr--full-ui a,.plyr--full-ui button,.plyr--full-ui button.faux-link,.plyr--full-ui input,.plyr--full-ui label{touch-action:manipulation}.plyr__badge{padding:3px 4px;border-radius:2px;background:#4f5b5f;color:rgba(255,255,255,.9);font-size:10px;line-height:1}.plyr--full-ui ::-webkit-media-text-track-container{display:none}.plyr__captions{display:none;position:absolute;bottom:0;left:0;width:100%;padding:10px;-webkit-transform:translateY(-40px);transform:translateY(-40px);transition:-webkit-transform .4s ease-in-out;transition:transform .4s ease-in-out;transition:transform .4s ease-in-out,-webkit-transform .4s ease-in-out;-webkit-animation:plyr-fade-in .3s ease;animation:plyr-fade-in .3s ease;color:#fff;font-size:12px;text-align:center}.plyr__captions span{border-radius:2px;padding:.2em .5em;background:rgba(0,0,0,.8);-webkit-box-decoration-break:clone;box-decoration-break:clone;line-height:185%;white-space:pre-wrap}.plyr__captions span div{display:inline}.plyr__captions span:empty{display:none}@media only screen and (min-width:480px){.plyr__captions{padding:20px;font-size:13px}}@media only screen and (min-width:768px){.plyr__captions{font-size:18px}}.plyr--captions-active .plyr__captions{display:block}.plyr--hide-controls .plyr__captions{-webkit-transform:translateY(-15px);transform:translateY(-15px)}.plyr__control{position:relative;flex-shrink:0;overflow:visible;padding:7px;border:0;background:0 0;border-radius:3px;cursor:pointer;transition:all .3s ease;color:inherit}.plyr__control svg{width:18px;height:18px;display:block;fill:currentColor;pointer-events:none}.plyr__control:focus{outline:0}.plyr__control.plyr__tab-focus{outline:0;box-shadow:0 0 0 3px rgba(26,175,255,.35)}.plyr__control[aria-pressed=false] .icon--pressed,.plyr__control[aria-pressed=false] .label--pressed,.plyr__control[aria-pressed=true] .icon--not-pressed,.plyr__control[aria-pressed=true] .label--not-pressed{display:none}.plyr--audio .plyr__control.plyr__tab-focus,.plyr--audio .plyr__control:hover,.plyr--audio .plyr__control[aria-expanded=true]{background:#1aafff;color:#fff}.plyr__control--overlaid{display:none;position:absolute;z-index:2;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);padding:15px;background:rgba(26,175,255,.8);border:0;border-radius:100%;box-shadow:0 1px 1px rgba(0,0,0,.15);color:#fff}.plyr__control--overlaid svg{position:relative;left:2px;width:20px;height:20px}.plyr__control--overlaid:focus,.plyr__control--overlaid:hover{background:#1aafff}.plyr--playing .plyr__control--overlaid{opacity:0;visibility:hidden}.plyr--full-ui.plyr--video .plyr__control--overlaid{display:block}.plyr--full-ui ::-webkit-media-controls{display:none}.plyr__controls{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;text-align:center}.plyr__controls .plyr__menu,.plyr__controls .plyr__progress,.plyr__controls .plyr__time,.plyr__controls>.plyr__control{margin-left:5px}.plyr__controls .plyr__menu:first-child,.plyr__controls .plyr__menu:first-child+[data-plyr=pause],.plyr__controls .plyr__progress:first-child,.plyr__controls .plyr__progress:first-child+[data-plyr=pause],.plyr__controls .plyr__time:first-child,.plyr__controls .plyr__time:first-child+[data-plyr=pause],.plyr__controls>.plyr__control:first-child,.plyr__controls>.plyr__control:first-child+[data-plyr=pause]{margin-left:0}.plyr__controls .plyr__volume{margin-left:5px}@media only screen and (min-width:480px){.plyr__controls .plyr__menu,.plyr__controls .plyr__progress,.plyr__controls .plyr__time,.plyr__controls>.plyr__control{margin-left:10px}.plyr__controls .plyr__menu+.plyr__control,.plyr__controls>.plyr__control+.plyr__control,.plyr__controls>.plyr__control+.plyr__menu{margin-left:5px}}.plyr--video .plyr__controls{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:35px 10px 10px;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.7));border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;color:#fff;transition:opacity .4s ease-in-out,-webkit-transform .4s ease-in-out;transition:opacity .4s ease-in-out,transform .4s ease-in-out;transition:opacity .4s ease-in-out,transform .4s ease-in-out,-webkit-transform .4s ease-in-out}.plyr--video .plyr__controls .plyr__control svg{-webkit-filter:drop-shadow(0 1px 1px rgba(0, 0, 0, .15));filter:drop-shadow(0 1px 1px rgba(0, 0, 0, .15))}.plyr--video .plyr__controls .plyr__control.plyr__tab-focus,.plyr--video .plyr__controls .plyr__control:hover,.plyr--video .plyr__controls .plyr__control[aria-expanded=true]{background:#1aafff;color:#fff}.plyr--audio .plyr__controls{padding:10px;border-radius:inherit;background:#fff;color:#4f5b5f}.plyr--video.plyr--hide-controls .plyr__controls{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%);pointer-events:none}.plyr [data-plyr=airplay],.plyr [data-plyr=captions],.plyr [data-plyr=fullscreen],.plyr [data-plyr=pip]{display:none}.plyr--airplay-supported [data-plyr=airplay],.plyr--captions-enabled [data-plyr=captions],.plyr--fullscreen-enabled [data-plyr=fullscreen],.plyr--pip-supported [data-plyr=pip]{display:inline-block}.plyr__video-embed{padding-bottom:56.25%;height:0}.plyr__video-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.plyr__video-embed>div{position:relative;padding-bottom:200%;-webkit-transform:translateY(-35.9375%);transform:translateY(-35.9375%)}.plyr--full-ui .plyr__video-embed iframe{pointer-events:none}.plyr__menu{display:-webkit-box;display:flex;position:relative}.plyr__menu .plyr__control svg{transition:-webkit-transform .3s ease;transition:transform .3s ease;transition:transform .3s ease,-webkit-transform .3s ease}.plyr__menu .plyr__control[aria-expanded=true] svg{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.plyr__menu .plyr__control[aria-expanded=true] .plyr__tooltip{display:none}.plyr__menu__container{position:absolute;z-index:1;bottom:100%;right:-3px;margin-bottom:10px;-webkit-animation:plyr-popup .2s ease;animation:plyr-popup .2s ease;background:rgba(255,255,255,.9);border-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,.15);white-space:nowrap;text-align:left;color:#4f5b5f;font-size:13px}.plyr__menu__container>div{overflow:hidden;transition:height .35s cubic-bezier(.4,0,.2,1),width .35s cubic-bezier(.4,0,.2,1)}.plyr__menu__container::after{content:'';position:absolute;top:100%;right:15px;height:0;width:0;border:4px solid transparent;border-top-color:rgba(255,255,255,.9)}.plyr__menu__container ul{margin:0;padding:7px;list-style:none;overflow:hidden}.plyr__menu__container .plyr__control{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;width:100%;padding:4px 14px;color:#4f5b5f;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.plyr__menu__container .plyr__control::after{content:'';position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);border:4px solid transparent;transition:border-color .2s ease}.plyr__menu__container .plyr__control--forward{padding-right:28px}.plyr__menu__container .plyr__control--forward::after{right:5px;border-left-color:rgba(79,91,95,.8)}.plyr__menu__container .plyr__control--forward.plyr__tab-focus::after,.plyr__menu__container .plyr__control--forward:hover::after{border-left-color:currentColor}.plyr__menu__container .plyr__control--back{position:relative;width:calc(100% - 14px);margin:7px;margin-bottom:3px;padding-left:28px;font-weight:500}.plyr__menu__container .plyr__control--back::after{left:7px;border-right-color:rgba(79,91,95,.8)}.plyr__menu__container .plyr__control--back::before{content:'';position:absolute;top:100%;left:0;right:0;height:1px;overflow:hidden;margin-top:4px;background:#b7c5cd;box-shadow:0 1px 0 #fff}.plyr__menu__container .plyr__control--back.plyr__tab-focus::after,.plyr__menu__container .plyr__control--back:hover::after{border-right-color:currentColor}.plyr__menu__container label.plyr__control{padding-left:7px}.plyr__menu__container label.plyr__control input[type=radio]+span{position:relative;display:block;flex-shrink:0;height:16px;width:16px;border-radius:100%;background:rgba(0,0,0,.1);margin-right:10px;transition:all .3s ease}.plyr__menu__container label.plyr__control input[type=radio]+span::after{content:'';position:absolute;height:6px;width:6px;top:5px;left:5px;-webkit-transform:scale(0);transform:scale(0);opacity:0;background:#fff;border-radius:100%;transition:opacity .3s ease,-webkit-transform .3s ease;transition:transform .3s ease,opacity .3s ease;transition:transform .3s ease,opacity .3s ease,-webkit-transform .3s ease}.plyr__menu__container label.plyr__control input[type=radio]:checked+span{background:#1aafff}.plyr__menu__container label.plyr__control input[type=radio]:checked+span::after{-webkit-transform:scale(1);transform:scale(1);opacity:1}.plyr__menu__container label.plyr__control input[type=radio]:focus+span{outline:0;box-shadow:0 0 0 3px rgba(26,175,255,.35)}.plyr__menu__container label.plyr__control.plyr__tab-focus input[type=radio]+span,.plyr__menu__container label.plyr__control:hover input[type=radio]+span{background:rgba(0,0,0,.1)}.plyr__menu__container .plyr__menu__value{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;margin-left:auto;margin-right:-7px;padding-left:25px;pointer-events:none;overflow:hidden}.plyr__progress{position:relative;display:-webkit-box;display:flex;-webkit-box-flex:1;flex:1}.plyr__progress input[type=range]{position:relative;z-index:2}.plyr__progress .plyr__tooltip{left:0;font-size:11px}.plyr__progress--buffer{position:absolute;left:0;top:50%;width:100%;height:6px;margin:-3px 0 0;padding:0;background:0 0;border:none;border-radius:100px;-webkit-appearance:none}.plyr__progress--buffer::-webkit-progress-bar{background:0 0;transition:width .2s ease}.plyr__progress--buffer::-webkit-progress-value{background:currentColor;border-radius:100px;min-width:6px}.plyr__progress--buffer::-moz-progress-bar{background:currentColor;border-radius:100px;min-width:6px;transition:width .2s ease}.plyr__progress--buffer::-ms-fill{border-radius:100px;transition:width .2s ease}.plyr--video .plyr__progress--buffer{box-shadow:0 1px 1px rgba(0,0,0,.15);color:rgba(255,255,255,.25)}.plyr--audio .plyr__progress--buffer{color:rgba(183,197,205,.66)}.plyr--loading .plyr__progress--buffer{-webkit-animation:plyr-progress 1s linear infinite;animation:plyr-progress 1s linear infinite;background-size:25px 25px;background-repeat:repeat-x;background-image:linear-gradient(-45deg,rgba(47,52,61,.2) 25%,transparent 25%,transparent 50%,rgba(47,52,61,.2) 50%,rgba(47,52,61,.2) 75%,transparent 75%,transparent);color:transparent}.plyr--video.plyr--loading .plyr__progress--buffer{background-color:rgba(255,255,255,.25)}.plyr--audio.plyr--loading .plyr__progress--buffer{background-color:rgba(183,197,205,.66)}.plyr--full-ui input[type=range]{display:block;height:20px;width:100%;margin:0;padding:0;cursor:pointer;border:none;background:0 0;transition:box-shadow .3s ease;border-radius:28px;color:#1aafff;-webkit-appearance:none}.plyr--full-ui input[type=range]::-webkit-slider-runnable-track{height:6px;background:0 0;border:0;border-radius:3px;-webkit-user-select:none;user-select:none;transition:all .3s ease}.plyr--full-ui input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;margin-top:-4px;position:relative;height:14px;width:14px;background:#fff;border:2px solid transparent;border-radius:100%;transition:background .2s ease,border .2s ease,-webkit-transform .2s ease;transition:background .2s ease,border .2s ease,transform .2s ease;transition:background .2s ease,border .2s ease,transform .2s ease,-webkit-transform .2s ease;box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2);box-sizing:border-box}.plyr--full-ui input[type=range]::-moz-range-track{height:6px;background:0 0;border:0;border-radius:3px;-moz-user-select:none;user-select:none;transition:all .3s ease}.plyr--full-ui input[type=range]::-moz-range-thumb{position:relative;height:14px;width:14px;background:#fff;border:2px solid transparent;border-radius:100%;transition:background .2s ease,border .2s ease,-webkit-transform .2s ease;transition:background .2s ease,border .2s ease,transform .2s ease;transition:background .2s ease,border .2s ease,transform .2s ease,-webkit-transform .2s ease;box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2);box-sizing:border-box}.plyr--full-ui input[type=range]::-moz-range-progress{height:6px;background:currentColor;border-radius:3px}.plyr--full-ui input[type=range]::-ms-track{color:transparent;height:6px;background:0 0;border:0;border-radius:3px;-ms-user-select:none;user-select:none;transition:all .3s ease}.plyr--full-ui input[type=range]::-ms-fill-upper{height:6px;background:0 0;border:0;border-radius:3px;-ms-user-select:none;user-select:none;transition:all .3s ease}.plyr--full-ui input[type=range]::-ms-fill-lower{height:6px;background:0 0;border:0;border-radius:3px;-ms-user-select:none;user-select:none;transition:all .3s ease;background:currentColor}.plyr--full-ui input[type=range]::-ms-thumb{position:relative;height:14px;width:14px;background:#fff;border:2px solid transparent;border-radius:100%;transition:background .2s ease,border .2s ease,-webkit-transform .2s ease;transition:background .2s ease,border .2s ease,transform .2s ease;transition:background .2s ease,border .2s ease,transform .2s ease,-webkit-transform .2s ease;box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2);box-sizing:border-box;margin-top:0}.plyr--full-ui input[type=range]::-ms-tooltip{display:none}.plyr--full-ui input[type=range]:focus{outline:0}.plyr--full-ui input[type=range]::-moz-focus-outer{border:0}.plyr--full-ui input[type=range].plyr__tab-focus::-webkit-slider-runnable-track{outline:0;box-shadow:0 0 0 3px rgba(26,175,255,.35)}.plyr--full-ui input[type=range].plyr__tab-focus::-moz-range-track{outline:0;box-shadow:0 0 0 3px rgba(26,175,255,.35)}.plyr--full-ui input[type=range].plyr__tab-focus::-ms-track{outline:0;box-shadow:0 0 0 3px rgba(26,175,255,.35)}.plyr--full-ui input[type=range]:active::-webkit-slider-thumb{background:#1aafff;border-color:#fff;-webkit-transform:scale(1.42857143);transform:scale(1.42857143)}.plyr--full-ui input[type=range]:active::-moz-range-thumb{background:#1aafff;border-color:#fff;transform:scale(1.42857143)}.plyr--full-ui input[type=range]:active::-ms-thumb{background:#1aafff;border-color:#fff;transform:scale(1.42857143)}.plyr--full-ui.plyr--video input[type=range]::-webkit-slider-runnable-track{background:rgba(255,255,255,.25)}.plyr--full-ui.plyr--video input[type=range]::-moz-range-track{background:rgba(255,255,255,.25)}.plyr--full-ui.plyr--video input[type=range]::-ms-track{background:rgba(255,255,255,.25)}.plyr--full-ui.plyr--audio input[type=range]::-webkit-slider-runnable-track{background:rgba(183,197,205,.66)}.plyr--full-ui.plyr--audio input[type=range]::-moz-range-track{background:rgba(183,197,205,.66)}.plyr--full-ui.plyr--audio input[type=range]::-ms-track{background:rgba(183,197,205,.66)}.plyr__time{font-size:11px}.plyr__time+.plyr__time::before{content:'\2044';margin-right:10px}@media only screen and (max-width:767px){.plyr__time+.plyr__time{display:none}}.plyr--video .plyr__time{text-shadow:0 1px 1px rgba(0,0,0,.15)}.plyr__tooltip{position:absolute;z-index:2;bottom:100%;margin-bottom:10px;padding:5px 7.5px;pointer-events:none;opacity:0;background:rgba(255,255,255,.9);border-radius:3px;box-shadow:0 1px 2px rgba(0,0,0,.15);color:#4f5b5f;font-size:12px;font-weight:500;line-height:1.3;-webkit-transform:translate(-50%,10px) scale(.8);transform:translate(-50%,10px) scale(.8);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;transition:opacity .2s .1s ease,-webkit-transform .2s .1s ease;transition:transform .2s .1s ease,opacity .2s .1s ease;transition:transform .2s .1s ease,opacity .2s .1s ease,-webkit-transform .2s .1s ease}.plyr__tooltip::before{content:'';position:absolute;width:0;height:0;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);bottom:-4px;border-right:4px solid transparent;border-top:4px solid rgba(255,255,255,.9);border-left:4px solid transparent;z-index:2}.plyr .plyr__control.plyr__tab-focus .plyr__tooltip,.plyr .plyr__control:hover .plyr__tooltip,.plyr__tooltip--visible{opacity:1;-webkit-transform:translate(-50%,0) scale(1);transform:translate(-50%,0) scale(1)}.plyr .plyr__control:hover .plyr__tooltip{z-index:3}.plyr__controls>.plyr__control:first-child .plyr__tooltip,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip{left:0;-webkit-transform:translate(0,10px) scale(.8);transform:translate(0,10px) scale(.8);-webkit-transform-origin:0 100%;transform-origin:0 100%}.plyr__controls>.plyr__control:first-child .plyr__tooltip::before,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip::before{left:16px}.plyr__controls>.plyr__control:last-child .plyr__tooltip{right:0;-webkit-transform:translate(0,10px) scale(.8);transform:translate(0,10px) scale(.8);-webkit-transform-origin:100% 100%;transform-origin:100% 100%}.plyr__controls>.plyr__control:last-child .plyr__tooltip::before{left:auto;right:16px;-webkit-transform:translateX(50%);transform:translateX(50%)}.plyr__controls>.plyr__control:first-child .plyr__tooltip--visible,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip--visible,.plyr__controls>.plyr__control:first-child+.plyr__control.plyr__tab-focus .plyr__tooltip,.plyr__controls>.plyr__control:first-child+.plyr__control:hover .plyr__tooltip,.plyr__controls>.plyr__control:first-child.plyr__tab-focus .plyr__tooltip,.plyr__controls>.plyr__control:first-child:hover .plyr__tooltip,.plyr__controls>.plyr__control:last-child .plyr__tooltip--visible,.plyr__controls>.plyr__control:last-child.plyr__tab-focus .plyr__tooltip,.plyr__controls>.plyr__control:last-child:hover .plyr__tooltip{-webkit-transform:translate(0,0) scale(1);transform:translate(0,0) scale(1)}.plyr--video{overflow:hidden}.plyr--video.plyr--menu-open{overflow:visible}.plyr__video-wrapper{position:relative;background:#000;border-radius:inherit;z-index:0;overflow:hidden}.plyr__volume{-webkit-box-flex:1;flex:1;position:relative}.plyr__volume input[type=range]{position:relative;z-index:2}@media only screen and (min-width:480px){.plyr__volume{max-width:50px}}@media only screen and (min-width:768px){.plyr__volume{max-width:80px}}.plyr--is-ios .plyr__volume,.plyr--is-ios [data-plyr=mute]{display:none!important}.plyr:-webkit-full-screen{height:100%;width:100%;margin:0;background:#000;border-radius:0!important}.plyr:-moz-full-screen{height:100%;width:100%;margin:0;background:#000;border-radius:0!important}.plyr:-ms-fullscreen{height:100%;width:100%;margin:0;background:#000;border-radius:0!important}.plyr:fullscreen{height:100%;width:100%;margin:0;background:#000;border-radius:0!important}.plyr:-webkit-full-screen video{height:100%}.plyr:-moz-full-screen video{height:100%}.plyr:-ms-fullscreen video{height:100%}.plyr:fullscreen video{height:100%}.plyr:-webkit-full-screen .plyr__video-wrapper{height:100%;width:100%}.plyr:-moz-full-screen .plyr__video-wrapper{height:100%;width:100%}.plyr:-ms-fullscreen .plyr__video-wrapper{height:100%;width:100%}.plyr:fullscreen .plyr__video-wrapper{height:100%;width:100%}.plyr:-webkit-full-screen .plyr__video-embed{overflow:visible}.plyr:-moz-full-screen .plyr__video-embed{overflow:visible}.plyr:-ms-fullscreen .plyr__video-embed{overflow:visible}.plyr:fullscreen .plyr__video-embed{overflow:visible}.plyr:-webkit-full-screen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.plyr:-moz-full-screen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr:-ms-fullscreen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr:fullscreen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen{display:block}.plyr:fullscreen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:fullscreen .plyr__control .icon--exit-fullscreen+svg{display:none}@media only screen and (min-width:1024px){.plyr:-webkit-full-screen .plyr__captions{font-size:21px}.plyr:-moz-full-screen .plyr__captions{font-size:21px}.plyr:-ms-fullscreen .plyr__captions{font-size:21px}.plyr:fullscreen .plyr__captions{font-size:21px}}.plyr:-webkit-full-screen{height:100%;width:100%;margin:0;background:#000;border-radius:0!important}.plyr:-webkit-full-screen video{height:100%}.plyr:-webkit-full-screen .plyr__video-wrapper{height:100%;width:100%}.plyr:-webkit-full-screen .plyr__video-embed{overflow:visible}.plyr:-webkit-full-screen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen+svg{display:none}@media only screen and (min-width:1024px){.plyr:-webkit-full-screen .plyr__captions{font-size:21px}}.plyr:-moz-full-screen{height:100%;width:100%;margin:0;background:#000;border-radius:0!important}.plyr:-moz-full-screen video{height:100%}.plyr:-moz-full-screen .plyr__video-wrapper{height:100%;width:100%}.plyr:-moz-full-screen .plyr__video-embed{overflow:visible}.plyr:-moz-full-screen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen+svg{display:none}@media only screen and (min-width:1024px){.plyr:-moz-full-screen .plyr__captions{font-size:21px}}.plyr:-ms-fullscreen{height:100%;width:100%;margin:0;background:#000;border-radius:0!important}.plyr:-ms-fullscreen video{height:100%}.plyr:-ms-fullscreen .plyr__video-wrapper{height:100%;width:100%}.plyr:-ms-fullscreen .plyr__video-embed{overflow:visible}.plyr:-ms-fullscreen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen+svg{display:none}@media only screen and (min-width:1024px){.plyr:-ms-fullscreen .plyr__captions{font-size:21px}}.plyr--fullscreen-fallback{height:100%;width:100%;margin:0;background:#000;border-radius:0!important;position:fixed;top:0;left:0;right:0;bottom:0;z-index:10000000}.plyr--fullscreen-fallback video{height:100%}.plyr--fullscreen-fallback .plyr__video-wrapper{height:100%;width:100%}.plyr--fullscreen-fallback .plyr__video-embed{overflow:visible}.plyr--fullscreen-fallback.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen{display:block}.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen+svg{display:none}@media only screen and (min-width:1024px){.plyr--fullscreen-fallback .plyr__captions{font-size:21px}}.plyr--no-transition{transition:none!important}.plyr--full-ui [hidden]{display:none}.plyr--full-ui [aria-hidden=true]{display:none}.plyr__sr-only{clip:rect(1px,1px,1px,1px);overflow:hidden;position:absolute!important;padding:0!important;border:0!important;height:1px!important;width:1px!important}
\ No newline at end of file
+@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")}@-webkit-keyframes fadein{0%{opacity:0}100%{opacity:1}}@keyframes fadein{0%{opacity:0}100%{opacity:1}}/*! normalize.css v2.1.3 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a,button.faux-link{background:0 0}a:focus,button.faux-link:focus{outline:thin dotted}a:active,a:hover,button.faux-link:active,button.faux-link:hover{outline:0}h1{font-size:2em;margin:.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:'\201C' '\201D' '\2018' '\2019'}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}body,html{display:-webkit-box;display:flex;width:100%}html{background:linear-gradient(to left top,#4dc1ff,#0074b3);background-attachment:fixed;height:100%}body{-webkit-box-align:center;align-items:center;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;min-height:100%}.grid{-webkit-box-flex:1;flex:1;overflow:auto}main{margin:auto;text-align:center}aside{-webkit-box-align:center;align-items:center;background:#fff;color:#55646b;display:-webkit-box;display:flex;flex-shrink:0;-webkit-box-pack:center;justify-content:center;padding:15px;position:relative;text-align:center;text-shadow:none;width:100%}aside .icon{fill:#4baaf4;margin-right:10px}aside p{margin:0}aside a,aside button.faux-link{color:#4baaf4}aside a.tab-focus,aside button.tab-focus.faux-link{box-shadow:0 0 0 3px rgba(75,170,244,.35);outline:0}.grid{margin:0 auto;padding:20px}@media only screen and (min-width:768px){.grid{-webkit-box-align:center;align-items:center;display:-webkit-box;display:flex;max-width:1280px;width:100%}.grid>*{-webkit-box-flex:1;flex:1}}html{font-size:100%}body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-size:15px;font-size:"decimal-round(0.9375, 3)rem";color:#fff;font-family:Gordita,Avenir,"Helvetica Neue",sans-serif;font-weight:500;line-height:1.75;text-shadow:0 1px 1px rgba(0,0,0,.15)}button,input,select,textarea{font:inherit}p,small{margin:0 0 20px}small{font-size:13px;font-size:"decimal-round(0.8125, 3)rem";display:block}h1{font-size:64px;font-size:"decimal-round(4, 3)rem";font-weight:600;letter-spacing:-.025em;margin:0 0 10px}.button,.button__count{-webkit-box-align:center;align-items:center;background:#fff;border:0;border-radius:4px;box-shadow:0 1px 1px rgba(0,0,0,.1);color:#55646b;display:-webkit-inline-box;display:inline-flex;padding:15px;position:relative;text-shadow:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle}.button{font-weight:600;padding-left:20px;padding-right:20px;transition:all .2s ease}.button:focus,.button:hover{color:#343f4a}.button:focus::after,.button:hover::after{display:none}.button:hover{box-shadow:0 2px 2px rgba(0,0,0,.1);-webkit-transform:translateY(-1px);transform:translateY(-1px)}.button:focus{outline:0}.button.tab-focus{box-shadow:0 0 0 3px rgba(255,255,255,.35);outline:0}.button:active{-webkit-transform:translateY(1px);transform:translateY(1px)}.button--with-count{display:-webkit-inline-box;display:inline-flex}.button--with-count .button .icon{flex-shrink:0}.button__count{-webkit-animation:fadein .2s ease;animation:fadein .2s ease;margin-left:10px}.button__count::before{border:5px solid transparent;border-left-width:0;border-right-color:#fff;content:'';height:0;position:absolute;right:100%;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:0}header{padding-bottom:20px;text-align:center}header .call-to-action{margin-top:30px}@media only screen and (min-width:768px){header{margin-right:60px;max-width:360px;padding-bottom:40px;text-align:left}}.icon{fill:currentColor;height:16px;vertical-align:-3px;width:16px}a svg,button svg,button.faux-link svg,label svg{pointer-events:none}.btn .icon,a .icon,button.faux-link .icon{margin-right:6px}button.faux-link{background:0 0;border:0;border-radius:0;cursor:pointer;font:inherit;line-height:1.75;margin:0;padding:0;position:relative;text-align:inherit;text-shadow:inherit;-moz-user-select:text;vertical-align:baseline;width:auto}a,button.faux-link{border-bottom:1px dotted currentColor;color:#fff;font-weight:600;position:relative;text-decoration:none;transition:all .2s ease}a::after,button.faux-link::after{background:currentColor;content:'';height:1px;left:50%;position:absolute;top:100%;-webkit-transform:translateX(-50%);transform:translateX(-50%);transition:width .2s ease;width:0}a:focus,a:hover,button.faux-link:focus,button.faux-link:hover{border-bottom-color:transparent;outline:0}a:focus::after,a:hover::after,button.faux-link:focus::after,button.faux-link:hover::after{width:100%}a.tab-focus,button.tab-focus.faux-link{box-shadow:0 0 0 3px rgba(255,255,255,.35);outline:0}li,ul{list-style:none;margin:0;padding:0}nav{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;margin-bottom:20px}video{max-width:100%;vertical-align:middle}.plyr{border-radius:4px;box-shadow:0 2px 5px rgba(0,0,0,.2);margin:20px auto}.plyr.plyr--audio{max-width:480px}.plyr__video-wrapper::after{border:1px solid rgba(0,0,0,.15);border-radius:inherit;bottom:0;content:'';left:0;pointer-events:none;position:absolute;right:0;top:0}.plyr__cite{display:none;margin-top:20px}.plyr__cite .icon{margin-right:4px}.plyr--audio~ul .plyr__cite--audio,.plyr--video:not(.plyr--youtube):not(.plyr--vimeo)~ul .plyr__cite--video,.plyr--vimeo~ul .plyr__cite--vimeo,.plyr--youtube~ul .plyr__cite--youtube{display:block}@-webkit-keyframes plyr-progress{to{background-position:25px 0}}@keyframes plyr-progress{to{background-position:25px 0}}@-webkit-keyframes plyr-popup{0%{opacity:.5;-webkit-transform:translateY(10px);transform:translateY(10px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes plyr-popup{0%{opacity:.5;-webkit-transform:translateY(10px);transform:translateY(10px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes plyr-fade-in{from{opacity:0}to{opacity:1}}@keyframes plyr-fade-in{from{opacity:0}to{opacity:1}}.plyr{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;direction:ltr;font-family:inherit;font-weight:500;line-height:1.7;max-width:100%;min-width:200px;position:relative;text-shadow:none;transition:box-shadow .3s ease}.plyr audio,.plyr video{border-radius:inherit;height:auto;vertical-align:middle;width:100%}.plyr:focus{outline:0}.plyr--full-ui{box-sizing:border-box}.plyr--full-ui *,.plyr--full-ui ::after,.plyr--full-ui ::before{box-sizing:inherit}.plyr--full-ui a,.plyr--full-ui button,.plyr--full-ui button.faux-link,.plyr--full-ui input,.plyr--full-ui label{touch-action:manipulation}.plyr__badge{background:#4f5b5f;border-radius:2px;color:rgba(255,255,255,.9);font-size:10px;line-height:1;padding:3px 4px}.plyr--full-ui ::-webkit-media-text-track-container{display:none}.plyr__captions{-webkit-animation:plyr-fade-in .3s ease;animation:plyr-fade-in .3s ease;bottom:0;color:#fff;display:none;font-size:12px;left:0;padding:10px;position:absolute;text-align:center;-webkit-transform:translateY(-40px);transform:translateY(-40px);transition:-webkit-transform .4s ease-in-out;transition:transform .4s ease-in-out;transition:transform .4s ease-in-out,-webkit-transform .4s ease-in-out;width:100%}.plyr__captions span{background:rgba(0,0,0,.8);border-radius:2px;-webkit-box-decoration-break:clone;box-decoration-break:clone;line-height:185%;padding:.2em .5em;white-space:pre-wrap}.plyr__captions span div{display:inline}.plyr__captions span:empty{display:none}@media (min-width:480px){.plyr__captions{font-size:13px;padding:20px}}@media (min-width:768px){.plyr__captions{font-size:18px}}.plyr--captions-active .plyr__captions{display:block}.plyr--hide-controls .plyr__captions{-webkit-transform:translateY(-15px);transform:translateY(-15px)}.plyr__control{background:0 0;border:0;border-radius:3px;color:inherit;cursor:pointer;flex-shrink:0;overflow:visible;padding:7px;position:relative;transition:all .3s ease}.plyr__control svg{display:block;fill:currentColor;height:18px;pointer-events:none;width:18px}.plyr__control:focus{outline:0}.plyr__control.plyr__tab-focus{box-shadow:0 0 0 3px rgba(26,175,255,.35);outline:0}.plyr__control[aria-pressed=false] .icon--pressed,.plyr__control[aria-pressed=false] .label--pressed,.plyr__control[aria-pressed=true] .icon--not-pressed,.plyr__control[aria-pressed=true] .label--not-pressed{display:none}.plyr--audio .plyr__control.plyr__tab-focus,.plyr--audio .plyr__control:hover,.plyr--audio .plyr__control[aria-expanded=true]{background:#1aafff;color:#fff}.plyr__control--overlaid{background:rgba(26,175,255,.8);border:0;border-radius:100%;box-shadow:0 1px 1px rgba(0,0,0,.15);color:#fff;display:none;left:50%;padding:15px;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:2}.plyr__control--overlaid svg{height:20px;left:2px;position:relative;width:20px}.plyr__control--overlaid:focus,.plyr__control--overlaid:hover{background:#1aafff}.plyr--playing .plyr__control--overlaid{opacity:0;visibility:hidden}.plyr--full-ui.plyr--video .plyr__control--overlaid{display:block}.plyr--full-ui ::-webkit-media-controls{display:none}.plyr__controls{-webkit-box-align:center;align-items:center;display:-webkit-box;display:flex;text-align:center}.plyr__controls .plyr__menu,.plyr__controls .plyr__progress,.plyr__controls .plyr__time,.plyr__controls>.plyr__control{margin-left:5px}.plyr__controls .plyr__menu:first-child,.plyr__controls .plyr__menu:first-child+[data-plyr=pause],.plyr__controls .plyr__progress:first-child,.plyr__controls .plyr__progress:first-child+[data-plyr=pause],.plyr__controls .plyr__time:first-child,.plyr__controls .plyr__time:first-child+[data-plyr=pause],.plyr__controls>.plyr__control:first-child,.plyr__controls>.plyr__control:first-child+[data-plyr=pause]{margin-left:0}.plyr__controls .plyr__volume{margin-left:5px}@media (min-width:480px){.plyr__controls .plyr__menu,.plyr__controls .plyr__progress,.plyr__controls .plyr__time,.plyr__controls>.plyr__control{margin-left:10px}.plyr__controls .plyr__menu+.plyr__control,.plyr__controls>.plyr__control+.plyr__control,.plyr__controls>.plyr__control+.plyr__menu{margin-left:5px}}.plyr--video .plyr__controls{background:linear-gradient(transparent,rgba(0,0,0,.7));border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;bottom:0;color:#fff;left:0;padding:35px 10px 10px;position:absolute;right:0;transition:opacity .4s ease-in-out,-webkit-transform .4s ease-in-out;transition:opacity .4s ease-in-out,transform .4s ease-in-out;transition:opacity .4s ease-in-out,transform .4s ease-in-out,-webkit-transform .4s ease-in-out;z-index:2}.plyr--video .plyr__controls .plyr__control svg{-webkit-filter:drop-shadow(0 1px 1px rgba(0, 0, 0, .15));filter:drop-shadow(0 1px 1px rgba(0, 0, 0, .15))}.plyr--video .plyr__controls .plyr__control.plyr__tab-focus,.plyr--video .plyr__controls .plyr__control:hover,.plyr--video .plyr__controls .plyr__control[aria-expanded=true]{background:#1aafff;color:#fff}.plyr--audio .plyr__controls{background:#fff;border-radius:inherit;color:#4f5b5f;padding:10px}.plyr--video.plyr--hide-controls .plyr__controls{opacity:0;pointer-events:none;-webkit-transform:translateY(100%);transform:translateY(100%)}.plyr [data-plyr=airplay],.plyr [data-plyr=captions],.plyr [data-plyr=fullscreen],.plyr [data-plyr=pip]{display:none}.plyr--airplay-supported [data-plyr=airplay],.plyr--captions-enabled [data-plyr=captions],.plyr--fullscreen-enabled [data-plyr=fullscreen],.plyr--pip-supported [data-plyr=pip]{display:inline-block}.plyr__video-embed{height:0;padding-bottom:5625%}.plyr__video-embed iframe{border:0;height:100%;left:0;position:absolute;top:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.plyr__video-embed>div{padding-bottom:20000%;position:relative;-webkit-transform:translateY(-3593.75%);transform:translateY(-3593.75%)}.plyr--full-ui .plyr__video-embed iframe{pointer-events:none}.plyr__menu{display:-webkit-box;display:flex;position:relative}.plyr__menu .plyr__control svg{transition:-webkit-transform .3s ease;transition:transform .3s ease;transition:transform .3s ease,-webkit-transform .3s ease}.plyr__menu .plyr__control[aria-expanded=true] svg{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.plyr__menu .plyr__control[aria-expanded=true] .plyr__tooltip{display:none}.plyr__menu__container{-webkit-animation:plyr-popup .2s ease;animation:plyr-popup .2s ease;background:rgba(255,255,255,.9);border-radius:4px;bottom:100%;box-shadow:0 1px 2px rgba(0,0,0,.15);color:#4f5b5f;font-size:13px;margin-bottom:10px;position:absolute;right:-3px;text-align:left;white-space:nowrap;z-index:1}.plyr__menu__container>div{overflow:hidden;transition:height .35s cubic-bezier(.4,0,.2,1),width .35s cubic-bezier(.4,0,.2,1)}.plyr__menu__container::after{border:4px solid transparent;border-top-color:rgba(255,255,255,.9);content:'';height:0;position:absolute;right:15px;top:100%;width:0}.plyr__menu__container ul{list-style:none;margin:0;overflow:hidden;padding:7px}.plyr__menu__container .plyr__control{-webkit-box-align:center;align-items:center;color:#4f5b5f;display:-webkit-box;display:flex;padding:4px 14px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.plyr__menu__container .plyr__control::after{border:4px solid transparent;content:'';position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);transition:border-color .2s ease}.plyr__menu__container .plyr__control--forward{padding-right:28px}.plyr__menu__container .plyr__control--forward::after{border-left-color:rgba(79,91,95,.8);right:5px}.plyr__menu__container .plyr__control--forward.plyr__tab-focus::after,.plyr__menu__container .plyr__control--forward:hover::after{border-left-color:currentColor}.plyr__menu__container .plyr__control--back{font-weight:500;margin:7px;margin-bottom:3px;padding-left:28px;position:relative;width:calc(100% - 14px)}.plyr__menu__container .plyr__control--back::after{border-right-color:rgba(79,91,95,.8);left:7px}.plyr__menu__container .plyr__control--back::before{background:#b7c5cd;box-shadow:0 1px 0 #fff;content:'';height:1px;left:0;margin-top:4px;overflow:hidden;position:absolute;right:0;top:100%}.plyr__menu__container .plyr__control--back.plyr__tab-focus::after,.plyr__menu__container .plyr__control--back:hover::after{border-right-color:currentColor}.plyr__menu__container label.plyr__control{padding-left:7px}.plyr__menu__container label.plyr__control input[type=radio]+span{background:rgba(0,0,0,.1);border-radius:100%;display:block;flex-shrink:0;height:16px;margin-right:10px;position:relative;transition:all .3s ease;width:16px}.plyr__menu__container label.plyr__control input[type=radio]+span::after{background:#fff;border-radius:100%;content:'';height:6px;left:5px;opacity:0;position:absolute;top:5px;-webkit-transform:scale(0);transform:scale(0);transition:opacity .3s ease,-webkit-transform .3s ease;transition:transform .3s ease,opacity .3s ease;transition:transform .3s ease,opacity .3s ease,-webkit-transform .3s ease;width:6px}.plyr__menu__container label.plyr__control input[type=radio]:checked+span{background:#1aafff}.plyr__menu__container label.plyr__control input[type=radio]:checked+span::after{opacity:1;-webkit-transform:scale(1);transform:scale(1)}.plyr__menu__container label.plyr__control input[type=radio]:focus+span{box-shadow:0 0 0 3px rgba(26,175,255,.35);outline:0}.plyr__menu__container label.plyr__control.plyr__tab-focus input[type=radio]+span,.plyr__menu__container label.plyr__control:hover input[type=radio]+span{background:rgba(0,0,0,.1)}.plyr__menu__container .plyr__menu__value{-webkit-box-align:center;align-items:center;display:-webkit-box;display:flex;margin-left:auto;margin-right:-7px;overflow:hidden;padding-left:25px;pointer-events:none}.plyr__progress{display:-webkit-box;display:flex;-webkit-box-flex:1;flex:1;position:relative}.plyr__progress input[type=range]{position:relative;z-index:2}.plyr__progress .plyr__tooltip{font-size:11px;left:0}.plyr__progress--buffer{-webkit-appearance:none;background:0 0;border:0;border-radius:100px;height:6px;left:0;margin:-3px 0 0;padding:0;position:absolute;top:50%;width:100%}.plyr__progress--buffer::-webkit-progress-bar{background:0 0;transition:width .2s ease}.plyr__progress--buffer::-webkit-progress-value{background:currentColor;border-radius:100px;min-width:6px}.plyr__progress--buffer::-moz-progress-bar{background:currentColor;border-radius:100px;min-width:6px;transition:width .2s ease}.plyr__progress--buffer::-ms-fill{border-radius:100px;transition:width .2s ease}.plyr--video .plyr__progress--buffer{box-shadow:0 1px 1px rgba(0,0,0,.15);color:rgba(255,255,255,.25)}.plyr--audio .plyr__progress--buffer{color:rgba(183,197,205,.66)}.plyr--loading .plyr__progress--buffer{-webkit-animation:plyr-progress 1s linear infinite;animation:plyr-progress 1s linear infinite;background-image:linear-gradient(-45deg,rgba(47,52,61,.2) 25%,transparent 25%,transparent 50%,rgba(47,52,61,.2) 50%,rgba(47,52,61,.2) 75%,transparent 75%,transparent);background-repeat:repeat-x;background-size:25px 25px;color:transparent}.plyr--video.plyr--loading .plyr__progress--buffer{background-color:rgba(255,255,255,.25)}.plyr--audio.plyr--loading .plyr__progress--buffer{background-color:rgba(183,197,205,.66)}.plyr--full-ui input[type=range]{-webkit-appearance:none;background:0 0;border:0;border-radius:28px;color:#1aafff;cursor:pointer;display:block;height:20px;margin:0;padding:0;transition:box-shadow .3s ease;width:100%}.plyr--full-ui input[type=range]::-webkit-slider-runnable-track{background:0 0;border:0;border-radius:3px;height:6px;transition:all .3s ease;-webkit-user-select:none;user-select:none}.plyr--full-ui input[type=range]::-webkit-slider-thumb{background:#fff;border:2px solid transparent;border-radius:100%;box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2);box-sizing:border-box;height:14px;position:relative;transition:background .2s ease,border .2s ease,-webkit-transform .2s ease;transition:background .2s ease,border .2s ease,transform .2s ease;transition:background .2s ease,border .2s ease,transform .2s ease,-webkit-transform .2s ease;width:14px;-webkit-appearance:none;margin-top:-4px}.plyr--full-ui input[type=range]::-moz-range-track{background:0 0;border:0;border-radius:3px;height:6px;transition:all .3s ease;-moz-user-select:none;user-select:none}.plyr--full-ui input[type=range]::-moz-range-thumb{background:#fff;border:2px solid transparent;border-radius:100%;box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2);box-sizing:border-box;height:14px;position:relative;transition:background .2s ease,border .2s ease,-webkit-transform .2s ease;transition:background .2s ease,border .2s ease,transform .2s ease;transition:background .2s ease,border .2s ease,transform .2s ease,-webkit-transform .2s ease;width:14px}.plyr--full-ui input[type=range]::-moz-range-progress{background:currentColor;border-radius:3px;height:6px}.plyr--full-ui input[type=range]::-ms-track{background:0 0;border:0;border-radius:3px;height:6px;transition:all .3s ease;-ms-user-select:none;user-select:none;color:transparent}.plyr--full-ui input[type=range]::-ms-fill-upper{background:0 0;border:0;border-radius:3px;height:6px;transition:all .3s ease;-ms-user-select:none;user-select:none}.plyr--full-ui input[type=range]::-ms-fill-lower{background:0 0;border:0;border-radius:3px;height:6px;transition:all .3s ease;-ms-user-select:none;user-select:none;background:currentColor}.plyr--full-ui input[type=range]::-ms-thumb{background:#fff;border:2px solid transparent;border-radius:100%;box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2);box-sizing:border-box;height:14px;position:relative;transition:background .2s ease,border .2s ease,-webkit-transform .2s ease;transition:background .2s ease,border .2s ease,transform .2s ease;transition:background .2s ease,border .2s ease,transform .2s ease,-webkit-transform .2s ease;width:14px;margin-top:0}.plyr--full-ui input[type=range]::-ms-tooltip{display:none}.plyr--full-ui input[type=range]:focus{outline:0}.plyr--full-ui input[type=range]::-moz-focus-outer{border:0}.plyr--full-ui input[type=range].plyr__tab-focus::-webkit-slider-runnable-track{box-shadow:0 0 0 3px rgba(26,175,255,.35);outline:0}.plyr--full-ui input[type=range].plyr__tab-focus::-moz-range-track{box-shadow:0 0 0 3px rgba(26,175,255,.35);outline:0}.plyr--full-ui input[type=range].plyr__tab-focus::-ms-track{box-shadow:0 0 0 3px rgba(26,175,255,.35);outline:0}.plyr--full-ui input[type=range]:active::-webkit-slider-thumb{background:#1aafff;border-color:#fff;-webkit-transform:scale("");transform:scale("")}.plyr--full-ui input[type=range]:active::-moz-range-thumb{background:#1aafff;border-color:#fff;transform:scale("")}.plyr--full-ui input[type=range]:active::-ms-thumb{background:#1aafff;border-color:#fff;transform:scale("")}.plyr--full-ui.plyr--video input[type=range]::-webkit-slider-runnable-track{background:rgba(255,255,255,.25)}.plyr--full-ui.plyr--video input[type=range]::-moz-range-track{background:rgba(255,255,255,.25)}.plyr--full-ui.plyr--video input[type=range]::-ms-track{background:rgba(255,255,255,.25)}.plyr--full-ui.plyr--audio input[type=range]::-webkit-slider-runnable-track{background:rgba(183,197,205,.66)}.plyr--full-ui.plyr--audio input[type=range]::-moz-range-track{background:rgba(183,197,205,.66)}.plyr--full-ui.plyr--audio input[type=range]::-ms-track{background:rgba(183,197,205,.66)}.plyr__time{font-size:11px}.plyr__time+.plyr__time::before{content:'\2044';margin-right:10px}@media (max-width:767px){.plyr__time+.plyr__time{display:none}}.plyr--video .plyr__time{text-shadow:0 1px 1px rgba(0,0,0,.15)}.plyr__tooltip{background:rgba(255,255,255,.9);border-radius:3px;bottom:100%;box-shadow:0 1px 2px rgba(0,0,0,.15);color:#4f5b5f;font-size:12px;font-weight:500;line-height:1.3;margin-bottom:10px;opacity:0;padding:5px 7.5px;pointer-events:none;position:absolute;-webkit-transform:translate(-50%,10px) scale(.8);transform:translate(-50%,10px) scale(.8);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;transition:opacity .2s .1s ease,-webkit-transform .2s .1s ease;transition:transform .2s .1s ease,opacity .2s .1s ease;transition:transform .2s .1s ease,opacity .2s .1s ease,-webkit-transform .2s .1s ease;z-index:2}.plyr__tooltip::before{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid rgba(255,255,255,.9);bottom:-4px;content:'';height:0;left:50%;position:absolute;-webkit-transform:translateX(-50%);transform:translateX(-50%);width:0;z-index:2}.plyr .plyr__control.plyr__tab-focus .plyr__tooltip,.plyr .plyr__control:hover .plyr__tooltip,.plyr__tooltip--visible{opacity:1;-webkit-transform:translate(-50%,0) scale(1);transform:translate(-50%,0) scale(1)}.plyr .plyr__control:hover .plyr__tooltip{z-index:3}.plyr__controls>.plyr__control:first-child .plyr__tooltip,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip{left:0;-webkit-transform:translate(0,10px) scale(.8);transform:translate(0,10px) scale(.8);-webkit-transform-origin:0 100%;transform-origin:0 100%}.plyr__controls>.plyr__control:first-child .plyr__tooltip::before,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip::before{left:16px}.plyr__controls>.plyr__control:last-child .plyr__tooltip{right:0;-webkit-transform:translate(0,10px) scale(.8);transform:translate(0,10px) scale(.8);-webkit-transform-origin:100% 100%;transform-origin:100% 100%}.plyr__controls>.plyr__control:last-child .plyr__tooltip::before{left:auto;right:16px;-webkit-transform:translateX(50%);transform:translateX(50%)}.plyr__controls>.plyr__control:first-child .plyr__tooltip--visible,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip--visible,.plyr__controls>.plyr__control:first-child+.plyr__control.plyr__tab-focus .plyr__tooltip,.plyr__controls>.plyr__control:first-child+.plyr__control:hover .plyr__tooltip,.plyr__controls>.plyr__control:first-child.plyr__tab-focus .plyr__tooltip,.plyr__controls>.plyr__control:first-child:hover .plyr__tooltip,.plyr__controls>.plyr__control:last-child .plyr__tooltip--visible,.plyr__controls>.plyr__control:last-child.plyr__tab-focus .plyr__tooltip,.plyr__controls>.plyr__control:last-child:hover .plyr__tooltip{-webkit-transform:translate(0,0) scale(1);transform:translate(0,0) scale(1)}.plyr--video{overflow:hidden}.plyr--video.plyr--menu-open{overflow:visible}.plyr__video-wrapper{background:#000;border-radius:inherit;overflow:hidden;position:relative;z-index:0}.plyr__volume{-webkit-box-flex:1;flex:1;position:relative}.plyr__volume input[type=range]{position:relative;z-index:2}@media (min-width:480px){.plyr__volume{max-width:50px}}@media (min-width:768px){.plyr__volume{max-width:80px}}.plyr--is-ios .plyr__volume,.plyr--is-ios [data-plyr=mute]{display:none!important}.plyr:-webkit-full-screen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:-moz-full-screen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:-ms-fullscreen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:fullscreen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:-webkit-full-screen video{height:100%}.plyr:-moz-full-screen video{height:100%}.plyr:-ms-fullscreen video{height:100%}.plyr:fullscreen video{height:100%}.plyr:-webkit-full-screen .plyr__video-wrapper{height:100%;width:100%}.plyr:-moz-full-screen .plyr__video-wrapper{height:100%;width:100%}.plyr:-ms-fullscreen .plyr__video-wrapper{height:100%;width:100%}.plyr:fullscreen .plyr__video-wrapper{height:100%;width:100%}.plyr:-webkit-full-screen .plyr__video-embed{overflow:visible}.plyr:-moz-full-screen .plyr__video-embed{overflow:visible}.plyr:-ms-fullscreen .plyr__video-embed{overflow:visible}.plyr:fullscreen .plyr__video-embed{overflow:visible}.plyr:-webkit-full-screen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.plyr:-moz-full-screen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr:-ms-fullscreen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr:fullscreen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen{display:block}.plyr:fullscreen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:fullscreen .plyr__control .icon--exit-fullscreen+svg{display:none}@media (min-width:1024px){.plyr:-webkit-full-screen .plyr__captions{font-size:21px}.plyr:-moz-full-screen .plyr__captions{font-size:21px}.plyr:-ms-fullscreen .plyr__captions{font-size:21px}.plyr:fullscreen .plyr__captions{font-size:21px}}.plyr:-webkit-full-screen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:-webkit-full-screen video{height:100%}.plyr:-webkit-full-screen .plyr__video-wrapper{height:100%;width:100%}.plyr:-webkit-full-screen .plyr__video-embed{overflow:visible}.plyr:-webkit-full-screen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen+svg{display:none}@media (min-width:1024px){.plyr:-webkit-full-screen .plyr__captions{font-size:21px}}.plyr:-moz-full-screen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:-moz-full-screen video{height:100%}.plyr:-moz-full-screen .plyr__video-wrapper{height:100%;width:100%}.plyr:-moz-full-screen .plyr__video-embed{overflow:visible}.plyr:-moz-full-screen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen+svg{display:none}@media (min-width:1024px){.plyr:-moz-full-screen .plyr__captions{font-size:21px}}.plyr:-ms-fullscreen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:-ms-fullscreen video{height:100%}.plyr:-ms-fullscreen .plyr__video-wrapper{height:100%;width:100%}.plyr:-ms-fullscreen .plyr__video-embed{overflow:visible}.plyr:-ms-fullscreen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen+svg{display:none}@media (min-width:1024px){.plyr:-ms-fullscreen .plyr__captions{font-size:21px}}.plyr--fullscreen-fallback{background:#000;border-radius:0!important;height:100%;margin:0;width:100%;position:fixed;top:0;bottom:0;left:0;right:0;z-index:10000000}.plyr--fullscreen-fallback video{height:100%}.plyr--fullscreen-fallback .plyr__video-wrapper{height:100%;width:100%}.plyr--fullscreen-fallback .plyr__video-embed{overflow:visible}.plyr--fullscreen-fallback.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen{display:block}.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen+svg{display:none}@media (min-width:1024px){.plyr--fullscreen-fallback .plyr__captions{font-size:21px}}.plyr--no-transition{transition:none!important}.plyr--full-ui [hidden]{display:none}.plyr--full-ui [aria-hidden=true]{display:none}.plyr__sr-only{clip:rect(1px,1px,1px,1px);overflow:hidden;border:0!important;height:1px!important;padding:0!important;position:absolute!important;width:1px!important}
\ No newline at end of file
diff --git a/demo/dist/demo.js b/demo/dist/demo.js
index f73613bd..07a5e9b8 100644
--- a/demo/dist/demo.js
+++ b/demo/dist/demo.js
@@ -1,3 +1,3 @@
-document.addEventListener("DOMContentLoaded",function(){function e(e,t,o){e&&e.classList[o?"add":"remove"](t)}function t(t,n){if(t in r&&(n||t!==a)&&(a.length||t!==r.video)){switch(t){case r.video:o.source={type:"video",title:"View From A Blue Moon",sources:[{src:"media/View_From_A_Blue_Moon_Trailer-HD.mp4",type:"video/mp4"}],poster:"media/View_From_A_Blue_Moon_Trailer-HD.jpg",tracks:[{kind:"captions",label:"English",srclang:"en",src:"media/View_From_A_Blue_Moon_Trailer-HD.en.vtt",default:!0},{kind:"captions",label:"French",srclang:"fr",src:"media/View_From_A_Blue_Moon_Trailer-HD.fr.vtt"}]};break;case r.audio:o.source={type:"audio",title:"Kishi Bashi – “It All Began With A Burst”",sources:[{src:"https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3",type:"audio/mp3"},{src:"https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg",type:"audio/ogg"}]};break;case r.youtube:o.source={type:"video",title:"View From A Blue Moon",sources:[{src:"https://youtube.com/watch?v=bTqVqk7FSmY",provider:"youtube"}]};break;case r.vimeo:o.source={type:"video",sources:[{src:"https://vimeo.com/76979871",provider:"vimeo"}]}}a=t,Array.from(i).forEach(function(t){return e(t.parentElement,"active",!1)}),e(document.querySelector('[data-source="'+t+'"]'),"active",!0),Array.from(document.querySelectorAll(".plyr__cite")).forEach(function(e){e.setAttribute("hidden","")}),document.querySelector(".plyr__cite--"+t).removeAttribute("hidden")}}window.shr&&window.shr.setup({count:{classname:"button__count"}});document.addEventListener("focusout",function(e){e.target.classList.remove("tab-focus")}),document.addEventListener("keydown",function(e){9===e.keyCode&&window.setTimeout(function(){document.activeElement.classList.add("tab-focus")},0)});var o=new window.Plyr("#player",{debug:!0,title:"View From A Blue Moon",iconUrl:"../dist/plyr.svg",keyboard:{global:!0},tooltips:{controls:!0},captions:{active:!0},controls:["play-large","play","progress","current-time","mute","volume","captions","settings","fullscreen","pip","airplay"],keys:{google:"AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c"}});window.player=o;var i=document.querySelectorAll("[data-source]"),r={video:"video",audio:"audio",youtube:"youtube",vimeo:"vimeo"},a=window.location.hash.replace("#",""),n=window.history&&window.history.pushState;if(Array.from(i).forEach(function(e){e.addEventListener("click",function(){var o=e.getAttribute("data-source");t(o),n&&window.history.pushState({type:o},"","#"+o)})}),window.addEventListener("popstate",function(e){e.state&&"type"in e.state&&t(e.state.type)}),n){var s=!a.length;s&&(a=r.video),a in r&&window.history.replaceState({type:a},"",s?"":"#"+a),a!==r.video&&t(a,!0)}}),"plyr.io"===window.location.host&&(!function(e,t,o,i,r,a,n){e.GoogleAnalyticsObject="ga",e.ga=e.ga||function(){(e.ga.q=e.ga.q||[]).push(arguments)},e.ga.l=1*new Date,a=t.createElement("script"),n=t.getElementsByTagName("script")[0],a.async=1,a.src="//www.google-analytics.com/analytics.js",n.parentNode.insertBefore(a,n)}(window,document),window.ga("create","UA-40881672-11","auto"),window.ga("send","pageview"));
+document.addEventListener("DOMContentLoaded",function(){function e(e,t,o){e&&e.classList[o?"add":"remove"](t)}function t(t,o){if(t in a&&(o||t!==n)&&(n.length||t!==a.video)){switch(t){case a.video:i.source={type:"video",title:"View From A Blue Moon",sources:[{src:"media/View_From_A_Blue_Moon_Trailer-HD.mp4",type:"video/mp4"}],poster:"media/View_From_A_Blue_Moon_Trailer-HD.jpg",tracks:[{kind:"captions",label:"English",srclang:"en",src:"media/View_From_A_Blue_Moon_Trailer-HD.en.vtt",default:!0},{kind:"captions",label:"French",srclang:"fr",src:"media/View_From_A_Blue_Moon_Trailer-HD.fr.vtt"}]};break;case a.audio:i.source={type:"audio",title:"Kishi Bashi – “It All Began With A Burst”",sources:[{src:"https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3",type:"audio/mp3"},{src:"https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg",type:"audio/ogg"}]};break;case a.youtube:i.source={type:"video",title:"View From A Blue Moon",sources:[{src:"https://youtube.com/watch?v=bTqVqk7FSmY",provider:"youtube"}]};break;case a.vimeo:i.source={type:"video",sources:[{src:"https://vimeo.com/76979871",provider:"vimeo"}]}}n=t,Array.from(r).forEach(function(t){return e(t.parentElement,"active",!1)}),e(document.querySelector('[data-source="'+t+'"]'),"active",!0),Array.from(document.querySelectorAll(".plyr__cite")).forEach(function(e){e.setAttribute("hidden","")}),document.querySelector(".plyr__cite--"+t).removeAttribute("hidden")}}window.shr&&window.shr.setup({count:{classname:"button__count"}});var o="tab-focus";document.addEventListener("focusout",function(e){e.target.classList.remove(o)}),document.addEventListener("keydown",function(e){9===e.keyCode&&window.setTimeout(function(){document.activeElement.classList.add(o)},0)});var i=new window.Plyr("#player",{debug:!0,title:"View From A Blue Moon",iconUrl:"../dist/plyr.svg",keyboard:{global:!0},tooltips:{controls:!0},captions:{active:!0},controls:["play-large","play","progress","current-time","mute","volume","captions","settings","fullscreen","pip","airplay"],keys:{google:"AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c"}});window.player=i;var r=document.querySelectorAll("[data-source]"),a={video:"video",audio:"audio",youtube:"youtube",vimeo:"vimeo"},n=window.location.hash.replace("#",""),s=window.history&&window.history.pushState;if(Array.from(r).forEach(function(e){e.addEventListener("click",function(){var o=e.getAttribute("data-source");t(o),s&&window.history.pushState({type:o},"","#"+o)})}),window.addEventListener("popstate",function(e){e.state&&"type"in e.state&&t(e.state.type)}),s){var c=!n.length;c&&(n=a.video),n in a&&window.history.replaceState({type:n},"",c?"":"#"+n),n!==a.video&&t(n,!0)}}),"plyr.io"===window.location.host&&(!function(e,t,o,i,r,a,n){e.GoogleAnalyticsObject="ga",e.ga=e.ga||function(){(e.ga.q=e.ga.q||[]).push(arguments)},e.ga.l=1*new Date,a=t.createElement("script"),n=t.getElementsByTagName("script")[0],a.async=1,a.src="//www.google-analytics.com/analytics.js",n.parentNode.insertBefore(a,n)}(window,document),window.ga("create","UA-40881672-11","auto"),window.ga("send","pageview"));
 
 //# sourceMappingURL=demo.js.map
diff --git a/demo/dist/demo.js.map b/demo/dist/demo.js.map
index 604de15f..ad95dca8 100644
--- a/demo/dist/demo.js.map
+++ b/demo/dist/demo.js.map
@@ -1 +1 @@
-{"version":3,"file":"demo.js","sources":["demo/src/js/demo.js"],"sourcesContent":["// ==========================================================================\n// Plyr.io demo\n// This code is purely for the https://plyr.io website\n// Please see readme.md in the root or github.com/sampotts/plyr\n// ==========================================================================\n\ndocument.addEventListener('DOMContentLoaded', () => {\n    if (window.shr) {\n        window.shr.setup({\n            count: {\n                classname: 'button__count',\n            },\n        });\n    }\n\n    // Setup tab focus\n    const tabClassName = 'tab-focus';\n\n    // Remove class on blur\n    document.addEventListener('focusout', event => {\n        event.target.classList.remove(tabClassName);\n    });\n\n    // Add classname to tabbed elements\n    document.addEventListener('keydown', event => {\n        if (event.keyCode !== 9) {\n            return;\n        }\n\n        // Delay the adding of classname until the focus has changed\n        // This event fires before the focusin event\n        window.setTimeout(() => {\n            document.activeElement.classList.add(tabClassName);\n        }, 0);\n    });\n\n    // Setup the player\n    const player = new window.Plyr('#player', {\n        debug: true,\n        title: 'View From A Blue Moon',\n        iconUrl: '../dist/plyr.svg',\n        keyboard: {\n            global: true,\n        },\n        tooltips: {\n            controls: true,\n        },\n        captions: {\n            active: true,\n        },\n        controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'fullscreen', 'pip', 'airplay'],\n        keys: {\n            google: 'AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c',\n        },\n    });\n\n    // Expose for testing\n    window.player = player;\n\n    // Setup type toggle\n    const buttons = document.querySelectorAll('[data-source]');\n    const types = {\n        video: 'video',\n        audio: 'audio',\n        youtube: 'youtube',\n        vimeo: 'vimeo',\n    };\n    let currentType = window.location.hash.replace('#', '');\n    const historySupport = window.history && window.history.pushState;\n\n    // Toggle class on an element\n    function toggleClass(element, className, state) {\n        if (element) {\n            element.classList[state ? 'add' : 'remove'](className);\n        }\n    }\n\n    // Set a new source\n    function newSource(type, init) {\n        // Bail if new type isn't known, it's the current type, or current type is empty (video is default) and new type is video\n        if (!(type in types) || (!init && type === currentType) || (!currentType.length && type === types.video)) {\n            return;\n        }\n\n        switch (type) {\n            case types.video:\n                player.source = {\n                    type: 'video',\n                    title: 'View From A Blue Moon',\n                    sources: [\n                        {\n                            src: 'media/View_From_A_Blue_Moon_Trailer-HD.mp4',\n                            type: 'video/mp4',\n                        },\n                    ],\n                    poster: 'media/View_From_A_Blue_Moon_Trailer-HD.jpg',\n                    tracks: [\n                        {\n                            kind: 'captions',\n                            label: 'English',\n                            srclang: 'en',\n                            src: 'media/View_From_A_Blue_Moon_Trailer-HD.en.vtt',\n                            default: true,\n                        },\n                        {\n                            kind: 'captions',\n                            label: 'French',\n                            srclang: 'fr',\n                            src: 'media/View_From_A_Blue_Moon_Trailer-HD.fr.vtt',\n                        },\n                    ],\n                };\n\n                break;\n\n            case types.audio:\n                player.source = {\n                    type: 'audio',\n                    title: 'Kishi Bashi – “It All Began With A Burst”',\n                    sources: [\n                        {\n                            src: 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3',\n                            type: 'audio/mp3',\n                        },\n                        {\n                            src: 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg',\n                            type: 'audio/ogg',\n                        },\n                    ],\n                };\n\n                break;\n\n            case types.youtube:\n                player.source = {\n                    type: 'video',\n                    title: 'View From A Blue Moon',\n                    sources: [\n                        {\n                            src: 'https://youtube.com/watch?v=bTqVqk7FSmY',\n                            provider: 'youtube',\n                        },\n                    ],\n                };\n\n                break;\n\n            case types.vimeo:\n                player.source = {\n                    type: 'video',\n                    sources: [\n                        {\n                            src: 'https://vimeo.com/76979871',\n                            provider: 'vimeo',\n                        },\n                    ],\n                };\n\n                break;\n\n            default:\n                break;\n        }\n\n        // Set the current type for next time\n        currentType = type;\n\n        // Remove active classes\n        Array.from(buttons).forEach(button => toggleClass(button.parentElement, 'active', false));\n\n        // Set active on parent\n        toggleClass(document.querySelector(`[data-source=\"${type}\"]`), 'active', true);\n\n        // Show cite\n        Array.from(document.querySelectorAll('.plyr__cite')).forEach(cite => {\n            cite.setAttribute('hidden', '');\n        });\n        document.querySelector(`.plyr__cite--${type}`).removeAttribute('hidden');\n    }\n\n    // Bind to each button\n    Array.from(buttons).forEach(button => {\n        button.addEventListener('click', () => {\n            const type = button.getAttribute('data-source');\n\n            newSource(type);\n\n            if (historySupport) {\n                window.history.pushState({ type }, '', `#${type}`);\n            }\n        });\n    });\n\n    // List for backwards/forwards\n    window.addEventListener('popstate', event => {\n        if (event.state && 'type' in event.state) {\n            newSource(event.state.type);\n        }\n    });\n\n    // On load\n    if (historySupport) {\n        const video = !currentType.length;\n\n        // If there's no current type set, assume video\n        if (video) {\n            currentType = types.video;\n        }\n\n        // Replace current history state\n        if (currentType in types) {\n            window.history.replaceState(\n                {\n                    type: currentType,\n                },\n                '',\n                video ? '' : `#${currentType}`\n            );\n        }\n\n        // If it's not video, load the source\n        if (currentType !== types.video) {\n            newSource(currentType, true);\n        }\n    }\n});\n\n// Google analytics\n// For demo site (https://plyr.io) only\n/* eslint-disable */\nif (window.location.host === 'plyr.io') {\n    (function(i, s, o, g, r, a, m) {\n        i.GoogleAnalyticsObject = r;\n        i[r] =\n            i[r] ||\n            function() {\n                (i[r].q = i[r].q || []).push(arguments);\n            };\n        i[r].l = 1 * new Date();\n        a = s.createElement(o);\n        m = s.getElementsByTagName(o)[0];\n        a.async = 1;\n        a.src = g;\n        m.parentNode.insertBefore(a, m);\n    })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');\n    window.ga('create', 'UA-40881672-11', 'auto');\n    window.ga('send', 'pageview');\n}\n/* eslint-enable */\n"],"names":["document","addEventListener","toggleClass","element","className","state","classList","newSource","type","init","types","currentType","length","video","source","audio","youtube","vimeo","from","buttons","forEach","button","parentElement","querySelector","querySelectorAll","setAttribute","removeAttribute","window","shr","setup","target","remove","event","keyCode","setTimeout","activeElement","add","player","Plyr","location","hash","replace","historySupport","history","pushState","getAttribute","replaceState","host","i","s","o","g","r","a","m","GoogleAnalyticsObject","q","push","arguments","l","Date","createElement","getElementsByTagName","async","src","parentNode","insertBefore","ga"],"mappings":"AAMAA,SAASC,iBAAiB,mBAAoB,oBAiEjCC,EAAYC,EAASC,EAAWC,GACjCF,KACQG,UAAUD,EAAQ,MAAQ,UAAUD,YAK3CG,EAAUC,EAAMC,MAEfD,KAAQE,IAAYD,GAAQD,IAASG,KAAkBA,EAAYC,QAAUJ,IAASE,EAAMG,eAI1FL,QACCE,EAAMG,QACAC,aACG,cACC,sCAGM,kDACC,qBAGN,2DAGM,iBACC,kBACE,SACJ,yDACI,SAGH,iBACC,iBACE,SACJ,8DAOhBJ,EAAMK,QACAD,aACG,cACC,4EAGM,mFACC,kBAGD,mFACC,0BAOjBJ,EAAMM,UACAF,aACG,cACC,sCAGM,mDACK,wBAOrBJ,EAAMO,QACAH,aACG,sBAGO,sCACK,aAYhBN,QAGRU,KAAKC,GAASC,QAAQ,mBAAUlB,EAAYmB,EAAOC,cAAe,UAAU,OAGtEtB,SAASuB,+BAA+Bf,QAAW,UAAU,SAGnEU,KAAKlB,SAASwB,iBAAiB,gBAAgBJ,QAAQ,cACpDK,aAAa,SAAU,eAEvBF,8BAA8Bf,GAAQkB,gBAAgB,WA1K/DC,OAAOC,YACAA,IAAIC,wBAEQ,4BASd5B,iBAAiB,WAAY,cAC5B6B,OAAOxB,UAAUyB,OAJN,wBAQZ9B,iBAAiB,UAAW,YACX,IAAlB+B,EAAMC,gBAMHC,WAAW,oBACLC,cAAc7B,UAAU8B,IAhBpB,cAiBd,SAIDC,EAAS,IAAIV,OAAOW,KAAK,kBACpB,QACA,gCACE,qCAEG,uBAGE,qBAGF,aAED,aAAc,OAAQ,WAAY,eAAgB,OAAQ,SAAU,WAAY,WAAY,aAAc,MAAO,wBAEhH,oDAKTD,OAASA,MAGVlB,EAAUnB,SAASwB,iBAAiB,iBACpCd,SACK,cACA,gBACE,gBACF,SAEPC,EAAcgB,OAAOY,SAASC,KAAKC,QAAQ,IAAK,IAC9CC,EAAiBf,OAAOgB,SAAWhB,OAAOgB,QAAQC,mBAiHlD1B,KAAKC,GAASC,QAAQ,cACjBnB,iBAAiB,QAAS,eACvBO,EAAOa,EAAOwB,aAAa,iBAEvBrC,GAENkC,UACOC,QAAQC,WAAYpC,QAAQ,OAAQA,cAMhDP,iBAAiB,WAAY,YAC5B+B,EAAM3B,OAAS,SAAU2B,EAAM3B,SACrB2B,EAAM3B,MAAMG,QAK1BkC,EAAgB,KACV7B,GAASF,EAAYC,OAGvBC,MACcH,EAAMG,OAIpBF,KAAeD,UACRiC,QAAQG,mBAEDnC,GAEV,GACAE,EAAQ,OAASF,GAKrBA,IAAgBD,EAAMG,SACZF,GAAa,MAQN,YAAzBgB,OAAOY,SAASQ,iBACNC,EAAGC,EAAGC,EAAGC,EAAGC,EAAGC,EAAGC,KACtBC,sBAYoE,OAXtE,GACIP,EAAA,IACA,YACKA,EAAA,GAAKQ,EAAIR,EAAA,GAAKQ,OAASC,KAAKC,cAErC,GAAKC,EAAI,EAAI,IAAIC,OACbX,EAAEY,cAKW,YAJbZ,EAAEa,qBAIW,UAJa,KAC5BC,MAAQ,IACRC,IAEyB,4CADzBC,WAAWC,aAAab,EAAGC,IAC9B3B,OAAQ3B,iBACJmE,GAAG,SAAU,iBAAkB,eAC/BA,GAAG,OAAQ"}
\ No newline at end of file
+{"version":3,"file":"demo.js","sources":["demo/src/js/demo.js"],"sourcesContent":["// ==========================================================================\n// Plyr.io demo\n// This code is purely for the https://plyr.io website\n// Please see readme.md in the root or github.com/sampotts/plyr\n// ==========================================================================\n\ndocument.addEventListener('DOMContentLoaded', () => {\n    if (window.shr) {\n        window.shr.setup({\n            count: {\n                classname: 'button__count',\n            },\n        });\n    }\n\n    // Setup tab focus\n    const tabClassName = 'tab-focus';\n\n    // Remove class on blur\n    document.addEventListener('focusout', event => {\n        event.target.classList.remove(tabClassName);\n    });\n\n    // Add classname to tabbed elements\n    document.addEventListener('keydown', event => {\n        if (event.keyCode !== 9) {\n            return;\n        }\n\n        // Delay the adding of classname until the focus has changed\n        // This event fires before the focusin event\n        window.setTimeout(() => {\n            document.activeElement.classList.add(tabClassName);\n        }, 0);\n    });\n\n    // Setup the player\n    const player = new window.Plyr('#player', {\n        debug: true,\n        title: 'View From A Blue Moon',\n        iconUrl: '../dist/plyr.svg',\n        keyboard: {\n            global: true,\n        },\n        tooltips: {\n            controls: true,\n        },\n        captions: {\n            active: true,\n        },\n        controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'fullscreen', 'pip', 'airplay'],\n        keys: {\n            google: 'AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c',\n        },\n    });\n\n    // Expose for testing\n    window.player = player;\n\n    // Setup type toggle\n    const buttons = document.querySelectorAll('[data-source]');\n    const types = {\n        video: 'video',\n        audio: 'audio',\n        youtube: 'youtube',\n        vimeo: 'vimeo',\n    };\n    let currentType = window.location.hash.replace('#', '');\n    const historySupport = window.history && window.history.pushState;\n\n    // Toggle class on an element\n    function toggleClass(element, className, state) {\n        if (element) {\n            element.classList[state ? 'add' : 'remove'](className);\n        }\n    }\n\n    // Set a new source\n    function newSource(type, init) {\n        // Bail if new type isn't known, it's the current type, or current type is empty (video is default) and new type is video\n        if (!(type in types) || (!init && type === currentType) || (!currentType.length && type === types.video)) {\n            return;\n        }\n\n        switch (type) {\n            case types.video:\n                player.source = {\n                    type: 'video',\n                    title: 'View From A Blue Moon',\n                    sources: [\n                        {\n                            src: 'media/View_From_A_Blue_Moon_Trailer-HD.mp4',\n                            type: 'video/mp4',\n                        },\n                    ],\n                    poster: 'media/View_From_A_Blue_Moon_Trailer-HD.jpg',\n                    tracks: [\n                        {\n                            kind: 'captions',\n                            label: 'English',\n                            srclang: 'en',\n                            src: 'media/View_From_A_Blue_Moon_Trailer-HD.en.vtt',\n                            default: true,\n                        },\n                        {\n                            kind: 'captions',\n                            label: 'French',\n                            srclang: 'fr',\n                            src: 'media/View_From_A_Blue_Moon_Trailer-HD.fr.vtt',\n                        },\n                    ],\n                };\n\n                break;\n\n            case types.audio:\n                player.source = {\n                    type: 'audio',\n                    title: 'Kishi Bashi – “It All Began With A Burst”',\n                    sources: [\n                        {\n                            src: 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3',\n                            type: 'audio/mp3',\n                        },\n                        {\n                            src: 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg',\n                            type: 'audio/ogg',\n                        },\n                    ],\n                };\n\n                break;\n\n            case types.youtube:\n                player.source = {\n                    type: 'video',\n                    title: 'View From A Blue Moon',\n                    sources: [\n                        {\n                            src: 'https://youtube.com/watch?v=bTqVqk7FSmY',\n                            provider: 'youtube',\n                        },\n                    ],\n                };\n\n                break;\n\n            case types.vimeo:\n                player.source = {\n                    type: 'video',\n                    sources: [\n                        {\n                            src: 'https://vimeo.com/76979871',\n                            provider: 'vimeo',\n                        },\n                    ],\n                };\n\n                break;\n\n            default:\n                break;\n        }\n\n        // Set the current type for next time\n        currentType = type;\n\n        // Remove active classes\n        Array.from(buttons).forEach(button => toggleClass(button.parentElement, 'active', false));\n\n        // Set active on parent\n        toggleClass(document.querySelector(`[data-source=\"${type}\"]`), 'active', true);\n\n        // Show cite\n        Array.from(document.querySelectorAll('.plyr__cite')).forEach(cite => {\n            cite.setAttribute('hidden', '');\n        });\n        document.querySelector(`.plyr__cite--${type}`).removeAttribute('hidden');\n    }\n\n    // Bind to each button\n    Array.from(buttons).forEach(button => {\n        button.addEventListener('click', () => {\n            const type = button.getAttribute('data-source');\n\n            newSource(type);\n\n            if (historySupport) {\n                window.history.pushState({ type }, '', `#${type}`);\n            }\n        });\n    });\n\n    // List for backwards/forwards\n    window.addEventListener('popstate', event => {\n        if (event.state && 'type' in event.state) {\n            newSource(event.state.type);\n        }\n    });\n\n    // On load\n    if (historySupport) {\n        const video = !currentType.length;\n\n        // If there's no current type set, assume video\n        if (video) {\n            currentType = types.video;\n        }\n\n        // Replace current history state\n        if (currentType in types) {\n            window.history.replaceState(\n                {\n                    type: currentType,\n                },\n                '',\n                video ? '' : `#${currentType}`\n            );\n        }\n\n        // If it's not video, load the source\n        if (currentType !== types.video) {\n            newSource(currentType, true);\n        }\n    }\n});\n\n// Google analytics\n// For demo site (https://plyr.io) only\n/* eslint-disable */\nif (window.location.host === 'plyr.io') {\n    (function(i, s, o, g, r, a, m) {\n        i.GoogleAnalyticsObject = r;\n        i[r] =\n            i[r] ||\n            function() {\n                (i[r].q = i[r].q || []).push(arguments);\n            };\n        i[r].l = 1 * new Date();\n        a = s.createElement(o);\n        m = s.getElementsByTagName(o)[0];\n        a.async = 1;\n        a.src = g;\n        m.parentNode.insertBefore(a, m);\n    })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');\n    window.ga('create', 'UA-40881672-11', 'auto');\n    window.ga('send', 'pageview');\n}\n/* eslint-enable */\n"],"names":["document","addEventListener","toggleClass","element","className","state","classList","newSource","type","init","types","currentType","length","video","source","audio","youtube","vimeo","from","buttons","forEach","button","parentElement","querySelector","querySelectorAll","setAttribute","removeAttribute","window","shr","setup","tabClassName","target","remove","event","keyCode","setTimeout","activeElement","add","player","Plyr","location","hash","replace","historySupport","history","pushState","getAttribute","replaceState","host","i","s","o","g","r","a","m","GoogleAnalyticsObject","q","push","arguments","l","Date","createElement","getElementsByTagName","async","src","parentNode","insertBefore","ga"],"mappings":"AAMAA,SAASC,iBAAiB,mBAAoB,oBAiEjCC,EAAYC,EAASC,EAAWC,GACjCF,KACQG,UAAUD,EAAQ,MAAQ,UAAUD,YAK3CG,EAAUC,EAAMC,MAEfD,KAAQE,IAAYD,GAAQD,IAASG,KAAkBA,EAAYC,QAAUJ,IAASE,EAAMG,eAI1FL,QACCE,EAAMG,QACAC,aACG,cACC,sCAGM,kDACC,qBAGN,2DAGM,iBACC,kBACE,SACJ,yDACI,SAGH,iBACC,iBACE,SACJ,8DAOhBJ,EAAMK,QACAD,aACG,cACC,4EAGM,mFACC,kBAGD,mFACC,0BAOjBJ,EAAMM,UACAF,aACG,cACC,sCAGM,mDACK,wBAOrBJ,EAAMO,QACAH,aACG,sBAGO,sCACK,aAYhBN,QAGRU,KAAKC,GAASC,QAAQ,mBAAUlB,EAAYmB,EAAOC,cAAe,UAAU,OAGtEtB,SAASuB,+BAA+Bf,QAAW,UAAU,SAGnEU,KAAKlB,SAASwB,iBAAiB,gBAAgBJ,QAAQ,cACpDK,aAAa,SAAU,eAEvBF,8BAA8Bf,GAAQkB,gBAAgB,WA1K/DC,OAAOC,YACAA,IAAIC,wBAEQ,uBAMjBC,EAAe,qBAGZ7B,iBAAiB,WAAY,cAC5B8B,OAAOzB,UAAU0B,OAAOF,cAIzB7B,iBAAiB,UAAW,YACX,IAAlBgC,EAAMC,gBAMHC,WAAW,oBACLC,cAAc9B,UAAU+B,IAAIP,IACtC,SAIDQ,EAAS,IAAIX,OAAOY,KAAK,kBACpB,QACA,gCACE,qCAEG,uBAGE,qBAGF,aAED,aAAc,OAAQ,WAAY,eAAgB,OAAQ,SAAU,WAAY,WAAY,aAAc,MAAO,wBAEhH,oDAKTD,OAASA,MAGVnB,EAAUnB,SAASwB,iBAAiB,iBACpCd,SACK,cACA,gBACE,gBACF,SAEPC,EAAcgB,OAAOa,SAASC,KAAKC,QAAQ,IAAK,IAC9CC,EAAiBhB,OAAOiB,SAAWjB,OAAOiB,QAAQC,mBAiHlD3B,KAAKC,GAASC,QAAQ,cACjBnB,iBAAiB,QAAS,eACvBO,EAAOa,EAAOyB,aAAa,iBAEvBtC,GAENmC,UACOC,QAAQC,WAAYrC,QAAQ,OAAQA,cAMhDP,iBAAiB,WAAY,YAC5BgC,EAAM5B,OAAS,SAAU4B,EAAM5B,SACrB4B,EAAM5B,MAAMG,QAK1BmC,EAAgB,KACV9B,GAASF,EAAYC,OAGvBC,MACcH,EAAMG,OAIpBF,KAAeD,UACRkC,QAAQG,mBAEDpC,GAEV,GACAE,EAAQ,OAASF,GAKrBA,IAAgBD,EAAMG,SACZF,GAAa,MAQN,YAAzBgB,OAAOa,SAASQ,iBACNC,EAAGC,EAAGC,EAAGC,EAAGC,EAAGC,EAAGC,KACtBC,sBAYoE,OAXtE,GACIP,EAAA,IACA,YACKA,EAAA,GAAKQ,EAAIR,EAAA,GAAKQ,OAASC,KAAKC,cAErC,GAAKC,EAAI,EAAI,IAAIC,OACbX,EAAEY,cAKW,YAJbZ,EAAEa,qBAIW,UAJa,KAC5BC,MAAQ,IACRC,IAEyB,4CADzBC,WAAWC,aAAab,EAAGC,IAC9B5B,OAAQ3B,iBACJoE,GAAG,SAAU,iBAAkB,eAC/BA,GAAG,OAAQ"}
\ No newline at end of file
diff --git a/demo/dist/error.css b/demo/dist/error.css
deleted file mode 100644
index 529c9842..00000000
--- a/demo/dist/error.css
+++ /dev/null
@@ -1 +0,0 @@
-@charset 'UTF-8';@font-face{font-family:Gordita;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-weight:300;font-style:normal;font-display:swap}@font-face{font-family:Gordita;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-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Gordita;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-weight:500;font-style:normal;font-display:swap}@font-face{font-family:Gordita;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-weight:600;font-style:normal;font-display:swap}@font-face{font-family:Gordita;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');font-weight:900;font-style:normal;font-display:swap}/*! normalize.css v2.1.3 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a,button.faux-link{background:0 0}a:focus,button.faux-link:focus{outline:thin dotted}a:active,a:hover,button.faux-link:active,button.faux-link:hover{outline:0}h1{font-size:2em;margin:.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:'\201C' '\201D' '\2018' '\2019'}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}.error body,html.error{height:100%}html.error{background:linear-gradient(to left top,#4dc1ff,#0074b3);background-attachment:fixed}.error body{width:100%;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}.error main{width:100%;padding:20px;text-align:center}.error main p{font-size:18px;font-size:1.125rem}html{font-size:100%}body{font-family:Gordita,Avenir,'Helvetica Neue',sans-serif;line-height:1.75;color:#fff;font-weight:500;text-shadow:0 1px 1px rgba(0,0,0,.15);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-size:15px;font-size:.938rem}button,input,select,textarea{font:inherit}p,small{margin:0 0 20px}small{display:block;font-size:13px;font-size:.813rem}h1{margin:0 0 10px;font-weight:600;letter-spacing:-.025em;font-size:64px;font-size:4rem}.button,.button__count{position:relative;display:-webkit-inline-box;display:inline-flex;vertical-align:middle;-webkit-box-align:center;align-items:center;padding:15px;border-radius:4px;box-shadow:0 1px 1px rgba(0,0,0,.1);background:#fff;border:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-shadow:none;color:#55646b}.button{padding-left:20px;padding-right:20px;transition:all .2s ease;font-weight:600}.button:focus,.button:hover{color:#343f4a}.button:focus::after,.button:hover::after{display:none}.button:hover{-webkit-transform:translateY(-1px);transform:translateY(-1px);box-shadow:0 2px 2px rgba(0,0,0,.1)}.button:focus{outline:0}.button.tab-focus{outline:0;box-shadow:0 0 0 3px rgba(255,255,255,.35)}.button:active{-webkit-transform:translateY(1px);transform:translateY(1px)}.button--with-count{display:-webkit-inline-box;display:inline-flex}.button--with-count .button .icon{flex-shrink:0}.button__count{margin-left:10px;-webkit-animation:fadein .2s ease;animation:fadein .2s ease}.button__count::before{content:'';position:absolute;width:0;height:0;right:100%;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);border:5px solid transparent;border-right-color:#fff;border-left-width:0}button.faux-link{position:relative;margin:0;padding:0;width:auto;border:0;background:0 0;vertical-align:baseline;text-align:inherit;font:inherit;line-height:1.75;cursor:pointer;-moz-user-select:text;text-shadow:inherit;border-radius:0}a,button.faux-link{position:relative;border-bottom:1px dotted currentColor;transition:all .2s ease;text-decoration:none;color:#fff;font-weight:600}a::after,button.faux-link::after{content:'';position:absolute;top:100%;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);width:0;height:1px;transition:width .2s ease;background:currentColor}a:focus,a:hover,button.faux-link:focus,button.faux-link:hover{border-bottom-color:transparent;outline:0}a:focus::after,a:hover::after,button.faux-link:focus::after,button.faux-link:hover::after{width:100%}a.tab-focus,button.faux-link.tab-focus{outline:0;box-shadow:0 0 0 3px rgba(255,255,255,.35)}
\ No newline at end of file
diff --git a/demo/src/less/settings/breakpoints.less b/demo/src/less/settings/breakpoints.less
deleted file mode 100644
index ed078e21..00000000
--- a/demo/src/less/settings/breakpoints.less
+++ /dev/null
@@ -1,9 +0,0 @@
-// ==========================================================================
-// Breakpoints
-// ==========================================================================
-
-@screen-sm: 480px;
-@screen-md: 768px;
-
-@mq-sm: ~'only screen and (min-width: @{screen-sm}) ';
-@mq-md: ~'only screen and (min-width: @{screen-md}) ';
diff --git a/demo/src/less/settings/colors.less b/demo/src/less/settings/colors.less
deleted file mode 100644
index 2f77fb14..00000000
--- a/demo/src/less/settings/colors.less
+++ /dev/null
@@ -1,27 +0,0 @@
-// ==========================================================================
-// Colors
-// ==========================================================================
-
-// Greyscale
-@gray-dark: #343f4a;
-@gray: #55646b;
-@gray-light: #cbd0d3;
-@gray-lighter: #dbe3e8;
-@off-white: #f2f5f7;
-
-// Text
-@color-text: #fff;
-
-// Plyr
-@color-brand-primary: #1aafff;
-
-// Brands
-@color-twitter: #4baaf4;
-@color-youtube: #cc181e;
-@color-vimeo: #19b7ed;
-
-// Elements
-@color-link: #fff;
-
-// Focus
-@tab-focus-default-color: #fff;
diff --git a/demo/src/less/settings/plyr.less b/demo/src/less/settings/plyr.less
deleted file mode 100644
index c39fd44b..00000000
--- a/demo/src/less/settings/plyr.less
+++ /dev/null
@@ -1,18 +0,0 @@
-// ==========================================================================
-// Plyr Settings
-// ==========================================================================
-
-// Font
-@plyr-font-family: inherit;
-
-// Sizes
-@plyr-font-size-base: 13px;
-@plyr-font-size-small: 12px;
-@plyr-font-size-time: 11px;
-@plyr-font-size-badges: 9px;
-
-// Captions
-@plyr-font-size-captions-base: @plyr-font-size-base;
-@plyr-font-size-captions-small: @plyr-font-size-small;
-@plyr-font-size-captions-medium: 18px;
-@plyr-font-size-captions-large: 21px;
diff --git a/demo/src/less/settings/type.less b/demo/src/less/settings/type.less
deleted file mode 100644
index dc6dbce1..00000000
--- a/demo/src/less/settings/type.less
+++ /dev/null
@@ -1,20 +0,0 @@
-// ==========================================================================
-// Typography
-// ==========================================================================
-
-@font-sans-serif: 'Gordita', 'Avenir', 'Helvetica Neue', sans-serif;
-
-@font-size-base: 15;
-@font-size-small: 13;
-@font-size-large: 18;
-@font-size-h1: 64;
-
-@font-weight-light: 300;
-@font-weight-regular: 400;
-@font-weight-medium: 500;
-@font-weight-bold: 600;
-@font-weight-black: 900;
-
-@line-height-base: 1.75;
-
-@letter-spacing-headings: -0.025em;
diff --git a/demo/src/less/bundles/demo.less b/demo/src/sass/bundles/demo.scss
index 61bb3cd9..dcddfe2a 100644
--- a/demo/src/less/bundles/demo.less
+++ b/demo/src/sass/bundles/demo.scss
@@ -3,12 +3,6 @@
 // ==========================================================================
 @charset 'UTF-8';
 
-// Libs
-@import '../lib/fontface';
-@import '../lib/animation';
-@import '../lib/mixins';
-@import '../lib/normalize';
-
 // Settings
 @import '../settings/breakpoints';
 @import '../settings/colors';
@@ -19,6 +13,12 @@
 @import '../settings/spacing';
 @import '../settings/type';
 
+// Libs
+@import '../lib/fontface';
+@import '../lib/animation';
+@import '../lib/mixins';
+@import '../lib/normalize';
+
 // Layout
 @import '../layout/core';
 @import '../layout/grid';
@@ -37,5 +37,5 @@
 @import '../components/players';
 
 // Plyr
-@import '../../../../src/less/bundle';
 @import '../settings/plyr';
+@import '../../../../src/sass/bundle';
diff --git a/demo/src/less/bundles/error.less b/demo/src/sass/bundles/error.scss
index 67530689..67530689 100644
--- a/demo/src/less/bundles/error.less
+++ b/demo/src/sass/bundles/error.scss
diff --git a/demo/src/less/components/buttons.less b/demo/src/sass/components/buttons.scss
index a8a15682..db821ad3 100644
--- a/demo/src/less/components/buttons.less
+++ b/demo/src/sass/components/buttons.scss
@@ -5,30 +5,30 @@
 // Shared
 .button,
 .button__count {
-    position: relative;
-    display: inline-flex;
-    vertical-align: middle;
     align-items: center;
-    padding: (@spacing-base * 0.75);
-    border-radius: @border-radius-base;
-    box-shadow: 0 1px 1px fade(#000, 10%);
     background: #fff;
     border: 0;
-    user-select: none;
+    border-radius: $border-radius-base;
+    box-shadow: 0 1px 1px rgba(#000, 0.1);
+    color: $gray;
+    display: inline-flex;
+    padding: ($spacing-base * 0.75);
+    position: relative;
     text-shadow: none;
-    color: @gray;
+    user-select: none;
+    vertical-align: middle;
 }
 
 // Buttons
 .button {
-    padding-left: @spacing-base;
-    padding-right: @spacing-base;
+    font-weight: $font-weight-bold;
+    padding-left: $spacing-base;
+    padding-right: $spacing-base;
     transition: all 0.2s ease;
-    font-weight: @font-weight-bold;
 
     &:hover,
     &:focus {
-        color: @gray-dark;
+        color: $gray-dark;
 
         // Remove the underline/border
         &::after {
@@ -37,8 +37,8 @@
     }
 
     &:hover {
+        box-shadow: 0 2px 2px rgba(#000, 0.1);
         transform: translateY(-1px);
-        box-shadow: 0 2px 2px fade(#000, 10%);
     }
 
     &:focus {
@@ -46,7 +46,7 @@
     }
 
     &.tab-focus {
-        .tab-focus();
+        @include tab-focus();
     }
 
     &:active {
@@ -65,19 +65,19 @@
 
 // Count bubble
 .button__count {
-    margin-left: (@spacing-base / 2);
     animation: fadein 0.2s ease;
+    margin-left: ($spacing-base / 2);
 
     &::before {
+        border: $arrow-size solid transparent;
+        border-left-width: 0;
+        border-right-color: #fff;
         content: '';
-        position: absolute;
-        width: 0;
         height: 0;
+        position: absolute;
         right: 100%;
         top: 50%;
         transform: translateY(-50%);
-        border: @arrow-size solid transparent;
-        border-right-color: #fff;
-        border-left-width: 0;
+        width: 0;
     }
 }
diff --git a/demo/src/less/components/header.less b/demo/src/sass/components/header.scss
index fc7bf63a..eab2214e 100644
--- a/demo/src/less/components/header.less
+++ b/demo/src/sass/components/header.scss
@@ -3,17 +3,17 @@
 // ==========================================================================
 
 header {
-    padding-bottom: @spacing-base;
+    padding-bottom: $spacing-base;
     text-align: center;
 
     .call-to-action {
-        margin-top: (@spacing-base * 1.5);
+        margin-top: ($spacing-base * 1.5);
     }
 
-    @media @mq-md {
+    @media only screen and (min-width: $screen-md) {
+        margin-right: ($spacing-base * 3);
         max-width: 360px;
-        margin-right: (@spacing-base * 3);
-        padding-bottom: (@spacing-base * 2);
+        padding-bottom: ($spacing-base * 2);
         text-align: left;
     }
 }
diff --git a/demo/src/less/components/icons.less b/demo/src/sass/components/icons.scss
index 92b0567e..b2b353a6 100644
--- a/demo/src/less/components/icons.less
+++ b/demo/src/sass/components/icons.scss
@@ -5,9 +5,9 @@
 // Base size icon styles
 .icon {
     fill: currentColor;
-    width: @icon-size;
-    height: @icon-size;
+    height: $icon-size;
     vertical-align: -3px;
+    width: $icon-size;
 }
 
 // Within elements
@@ -19,5 +19,5 @@ label svg {
 
 a .icon,
 .btn .icon {
-    margin-right: floor(@spacing-base / 3);
+    margin-right: floor($spacing-base / 3);
 }
diff --git a/demo/src/less/components/links.less b/demo/src/sass/components/links.scss
index 7a62ab40..25780b41 100644
--- a/demo/src/less/components/links.less
+++ b/demo/src/sass/components/links.scss
@@ -4,30 +4,29 @@
 
 // Make a <button> look like an <a>
 button.faux-link {
-    .cancel-button-styles();
-
-    &:extend(a all);
+    @extend a; // stylelint-disable-line
+    @include cancel-button-styles();
 }
 
 // Links
 a {
-    position: relative;
     border-bottom: 1px dotted currentColor;
-    transition: all 0.2s ease;
+    color: $color-link;
+    font-weight: $font-weight-bold;
+    position: relative;
     text-decoration: none;
-    color: @color-link;
-    font-weight: @font-weight-bold;
+    transition: all 0.2s ease;
 
     &::after {
+        background: currentColor;
         content: '';
+        height: 1px;
+        left: 50%;
         position: absolute;
         top: 100%;
-        left: 50%;
         transform: translateX(-50%);
-        width: 0;
-        height: 1px;
         transition: width 0.2s ease;
-        background: currentColor;
+        width: 0;
     }
 
     &:hover,
@@ -41,6 +40,6 @@ a {
     }
 
     &.tab-focus {
-        .tab-focus();
+        @include tab-focus();
     }
 }
diff --git a/demo/src/less/components/lists.less b/demo/src/sass/components/lists.scss
index bae3d11d..bae3d11d 100644
--- a/demo/src/less/components/lists.less
+++ b/demo/src/sass/components/lists.scss
diff --git a/demo/src/less/components/navigation.less b/demo/src/sass/components/navigation.scss
index 0b80f7e8..fe14c000 100644
--- a/demo/src/less/components/navigation.less
+++ b/demo/src/sass/components/navigation.scss
@@ -5,5 +5,5 @@
 nav {
     display: flex;
     justify-content: center;
-    margin-bottom: @spacing-base;
+    margin-bottom: $spacing-base;
 }
diff --git a/demo/src/less/components/players.less b/demo/src/sass/components/players.scss
index 19ffd7df..90e2bc94 100644
--- a/demo/src/less/components/players.less
+++ b/demo/src/sass/components/players.scss
@@ -10,9 +10,9 @@ video {
 
 // Example players
 .plyr {
-    margin: @spacing-base auto;
-    border-radius: @border-radius-base;
-    box-shadow: 0 2px 5px fade(#000, 20%);
+    border-radius: $border-radius-base;
+    box-shadow: 0 2px 5px rgba(#000, 0.2);
+    margin: $spacing-base auto;
 
     &.plyr--audio {
         max-width: 480px;
@@ -20,24 +20,24 @@ video {
 }
 
 .plyr__video-wrapper::after {
+    border: 1px solid rgba(#000, 0.15);
+    border-radius: inherit;
+    bottom: 0;
     content: '';
+    left: 0;
     pointer-events: none;
     position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
     right: 0;
-    border: 1px solid fade(#000, 15%);
-    border-radius: inherit;
+    top: 0;
 }
 
 // Style full supported player
 .plyr__cite {
     display: none;
-    margin-top: @spacing-base;
+    margin-top: $spacing-base;
 
     .icon {
-        margin-right: ceil(@spacing-base / 6);
+        margin-right: ceil($spacing-base / 6);
     }
 }
 
diff --git a/demo/src/less/layout/core.less b/demo/src/sass/layout/core.scss
index 08352e3d..c4d9a445 100644
--- a/demo/src/less/layout/core.less
+++ b/demo/src/sass/layout/core.scss
@@ -2,12 +2,6 @@
 // Core
 // ==========================================================================
 
-*,
-*::after,
-*::before {
-    box-sizing: border-box;
-}
-
 html,
 body {
     display: flex;
@@ -15,16 +9,16 @@ body {
 }
 
 html {
-    background: @page-background;
+    background: $page-background;
     background-attachment: fixed;
     height: 100%;
 }
 
 body {
-    display: flex;
-    min-height: 100%;
     align-items: center;
+    display: flex;
     flex-direction: column;
+    min-height: 100%;
 }
 
 .grid {
@@ -38,21 +32,21 @@ main {
 }
 
 aside {
-    position: relative;
+    align-items: center;
+    background: #fff;
+    color: $gray;
     display: flex;
     flex-shrink: 0;
-    align-items: center;
     justify-content: center;
-    width: 100%;
-    padding: (@spacing-base * 0.75);
-    background: #fff;
+    padding: ($spacing-base * 0.75);
+    position: relative;
     text-align: center;
-    color: @gray;
     text-shadow: none;
+    width: 100%;
 
     .icon {
-        margin-right: (@spacing-base / 2);
-        fill: @color-twitter;
+        fill: $color-twitter;
+        margin-right: ($spacing-base / 2);
     }
 
     p {
@@ -60,10 +54,10 @@ aside {
     }
 
     a {
-        color: @color-twitter;
+        color: $color-twitter;
 
         &.tab-focus {
-            .tab-focus(@color-twitter);
+            @include tab-focus($color-twitter);
         }
     }
 }
diff --git a/demo/src/less/layout/error.less b/demo/src/sass/layout/error.scss
index aebe8dca..385ecbf3 100644
--- a/demo/src/less/layout/error.less
+++ b/demo/src/sass/layout/error.scss
@@ -9,22 +9,22 @@ html.error,
 }
 
 html.error {
-    background: @page-background;
+    background: $page-background;
     background-attachment: fixed;
 }
 
 .error body {
-    width: 100%;
-    display: flex;
     align-items: center;
+    display: flex;
+    width: 100%;
 }
 
 .error main {
-    width: 100%;
-    padding: @spacing-base;
+    padding: $spacing-base;
     text-align: center;
+    width: 100%;
 
     p {
-        .font-size(@font-size-large);
+        @include font-size($font-size-large);
     }
 }
diff --git a/demo/src/less/layout/grid.less b/demo/src/sass/layout/grid.scss
index 02ff28c8..40dd829e 100644
--- a/demo/src/less/layout/grid.less
+++ b/demo/src/sass/layout/grid.scss
@@ -4,13 +4,13 @@
 
 .grid {
     margin: 0 auto;
-    padding: @spacing-base;
+    padding: $spacing-base;
 
-    @media @mq-md {
-        display: flex;
+    @media only screen and (min-width: $screen-md) {
         align-items: center;
+        display: flex;
+        max-width: $container-max-width;
         width: 100%;
-        max-width: @container-max-width;
 
         > * {
             flex: 1;
diff --git a/demo/src/less/lib/animation.less b/demo/src/sass/lib/animation.scss
index c8c05548..3c14b0a7 100644
--- a/demo/src/less/lib/animation.less
+++ b/demo/src/sass/lib/animation.scss
@@ -7,7 +7,6 @@
     0% {
         opacity: 0;
     }
-
     100% {
         opacity: 1;
     }
diff --git a/demo/src/sass/lib/decimal.scss b/demo/src/sass/lib/decimal.scss
new file mode 100644
index 00000000..8cb41718
--- /dev/null
+++ b/demo/src/sass/lib/decimal.scss
@@ -0,0 +1,79 @@
+// _decimal.scss | MIT License | gist.github.com/terkel/4373420
+
+// Round a number to specified digits.
+//
+// @param  {Number} $number A number to round
+// @param  {Number} [$digits:0] Digits to output
+// @param  {String} [$mode:round] (round|ceil|floor) How to round a number
+// @return {Number} A rounded number
+// @example
+//     decimal-round(0.333)    => 0
+//     decimal-round(0.333, 1) => 0.3
+//     decimal-round(0.333, 2) => 0.33
+//     decimal-round(0.666)    => 1
+//     decimal-round(0.666, 1) => 0.7
+//     decimal-round(0.666, 2) => 0.67
+//
+@function decimal-round ($number, $digits: 0, $mode: round) {
+    $n: 1;
+    // $number must be a number
+    @if type-of($number) != number {
+        @warn '#{ $number } is not a number.';
+        @return $number;
+    }
+    // $digits must be a unitless number
+    @if type-of($digits) != number {
+        @warn '#{ $digits } is not a number.';
+        @return $number;
+    } @else if not unitless($digits) {
+        @warn '#{ $digits } has a unit.';
+        @return $number;
+    }
+    @for $i from 1 through $digits {
+        $n: $n * 10;
+    }
+    @if $mode == round {
+        @return round($number * $n) / $n;
+    } @else if $mode == ceil {
+        @return ceil($number * $n) / $n;
+    } @else if $mode == floor {
+        @return floor($number * $n) / $n;
+    } @else {
+        @warn '#{ $mode } is undefined keyword.';
+        @return $number;
+    }
+}
+
+// Ceil a number to specified digits.
+//
+// @param  {Number} $number A number to round
+// @param  {Number} [$digits:0] Digits to output
+// @return {Number} A ceiled number
+// @example
+//     decimal-ceil(0.333)    => 1
+//     decimal-ceil(0.333, 1) => 0.4
+//     decimal-ceil(0.333, 2) => 0.34
+//     decimal-ceil(0.666)    => 1
+//     decimal-ceil(0.666, 1) => 0.7
+//     decimal-ceil(0.666, 2) => 0.67
+//
+@function decimal-ceil ($number, $digits: 0) {
+    @return decimal-round($number, $digits, ceil);
+}
+
+// Floor a number to specified digits.
+//
+// @param  {Number} $number A number to round
+// @param  {Number} [$digits:0] Digits to output
+// @return {Number} A floored number
+// @example
+//     decimal-floor(0.333)    => 0
+//     decimal-floor(0.333, 1) => 0.3
+//     decimal-floor(0.333, 2) => 0.33
+//     decimal-floor(0.666)    => 0
+//     decimal-floor(0.666, 1) => 0.6
+//     decimal-floor(0.666, 2) => 0.66
+//
+@function decimal-floor ($number, $digits: 0) {
+    @return decimal-round($number, $digits, floor);
+}
diff --git a/demo/src/less/lib/fontface.less b/demo/src/sass/lib/fontface.scss
index 88ec49a5..e7e4edf8 100644
--- a/demo/src/less/lib/fontface.less
+++ b/demo/src/sass/lib/fontface.scss
@@ -3,43 +3,43 @@
 // ==========================================================================
 
 @font-face {
+    font-display: swap;
     font-family: 'Gordita';
-    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-weight: @font-weight-light;
     font-style: normal;
-    font-display: swap;
+    font-weight: $font-weight-light;
+    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: $font-weight-regular;
     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-weight: @font-weight-regular;
-    font-style: normal;
-    font-display: swap;
 }
 
 @font-face {
+    font-display: swap;
     font-family: 'Gordita';
+    font-style: normal;
+    font-weight: $font-weight-medium;
     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-weight: @font-weight-medium;
-    font-style: normal;
-    font-display: swap;
 }
 
 @font-face {
+    font-display: swap;
     font-family: 'Gordita';
-    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-weight: @font-weight-bold;
     font-style: normal;
-    font-display: swap;
+    font-weight: $font-weight-bold;
+    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';
-    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');
-    font-weight: @font-weight-black;
     font-style: normal;
-    font-display: swap;
+    font-weight: $font-weight-black;
+    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');
 }
diff --git a/demo/src/less/lib/mixins.less b/demo/src/sass/lib/mixins.scss
index 821d2b3e..ef155b46 100644
--- a/demo/src/less/lib/mixins.less
+++ b/demo/src/sass/lib/mixins.scss
@@ -4,47 +4,48 @@
 
 // Convert a <button> into an <a>
 // ---------------------------------------
-.cancel-button-styles() {
-    position: relative;
+@mixin cancel-button-styles() {
+    background: transparent;
+    border: 0;
+    border-radius: 0;
+    cursor: pointer;
+    font: inherit;
+    line-height: $line-height-base;
     margin: 0;
     padding: 0;
-    width: auto;
-    border: 0;
-    background: transparent;
-    vertical-align: baseline;
+    position: relative;
     text-align: inherit;
-    font: inherit;
-    line-height: @line-height-base;
-    cursor: pointer;
-    -moz-user-select: text;
     text-shadow: inherit;
-    border-radius: 0;
+    -moz-user-select: text; // stylelint-disable-line
+    vertical-align: baseline;
+    width: auto;
 }
 
 // Nicer focus styles
 // ---------------------------------------
-.tab-focus(@color: @tab-focus-default-color) {
+@mixin tab-focus($color: $tab-focus-default-color) {
+    box-shadow: 0 0 0 3px rgba($color, 0.35);
     outline: 0;
-    box-shadow: 0 0 0 3px fade(@color, 35%);
 }
 
 // Use rems for font sizing
 // Leave <body> at 100%/16px
 // ---------------------------------------
-.font-size(@font-size: 16) {
-    @rem: round((@font-size / 16), 3);
+@mixin font-size($font-size: 16) {
+    $rem: decimal-round(($font-size / 16), 3);
 
-    font-size: (@font-size * 1px);
-    font-size: ~'@{rem}rem';
+    font-size: ($font-size * 1px);
+    font-size: '#{$rem}rem';
 }
 
 // Font smoothing
 // ---------------------------------------
-.font-smoothing(@mode: on) when (@mode = on) {
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-font-smoothing: antialiased;
-}
-.font-smoothing(@mode: on) when (@mode = off) {
-    -moz-osx-font-smoothing: auto;
-    -webkit-font-smoothing: subpixel-antialiased;
+@mixin font-smoothing($enabled: true) {
+    @if $enabled {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+    } @else {
+        -moz-osx-font-smoothing: auto;
+        -webkit-font-smoothing: subpixel-antialiased;
+    }
 }
diff --git a/demo/src/less/lib/normalize.less b/demo/src/sass/lib/normalize.scss
index 34743e73..34743e73 100644
--- a/demo/src/less/lib/normalize.less
+++ b/demo/src/sass/lib/normalize.scss
diff --git a/demo/src/less/lib/reset.less b/demo/src/sass/lib/reset.scss
index 50798b10..50798b10 100644
--- a/demo/src/less/lib/reset.less
+++ b/demo/src/sass/lib/reset.scss
diff --git a/demo/src/sass/settings/breakpoints.scss b/demo/src/sass/settings/breakpoints.scss
new file mode 100644
index 00000000..65940ad6
--- /dev/null
+++ b/demo/src/sass/settings/breakpoints.scss
@@ -0,0 +1,6 @@
+// ==========================================================================
+// Breakpoints
+// ==========================================================================
+
+$screen-sm: 480px;
+$screen-md: 768px;
diff --git a/demo/src/sass/settings/colors.scss b/demo/src/sass/settings/colors.scss
new file mode 100644
index 00000000..aa1c96ee
--- /dev/null
+++ b/demo/src/sass/settings/colors.scss
@@ -0,0 +1,27 @@
+// ==========================================================================
+// Colors
+// ==========================================================================
+
+// Greyscale
+$gray-dark: #343f4a;
+$gray: #55646b;
+$gray-light: #cbd0d3;
+$gray-lighter: #dbe3e8;
+$off-white: #f2f5f7;
+
+// Text
+$color-text: #fff;
+
+// Plyr
+$color-brand-primary: #1aafff;
+
+// Brands
+$color-twitter: #4baaf4;
+$color-youtube: #cc181e;
+$color-vimeo: #19b7ed;
+
+// Elements
+$color-link: #fff;
+
+// Focus
+$tab-focus-default-color: #fff;
diff --git a/demo/src/less/settings/cosmetic.less b/demo/src/sass/settings/cosmetic.scss
index 0024a446..dee536e5 100644
--- a/demo/src/less/settings/cosmetic.less
+++ b/demo/src/sass/settings/cosmetic.scss
@@ -3,10 +3,10 @@
 // ==========================================================================
 
 // Button count arrow size
-@arrow-size: 5px;
+$arrow-size: 5px;
 
 // Radii
-@border-radius-base: 4px;
+$border-radius-base: 4px;
 
 // Background
-@page-background: linear-gradient(to left top, lighten(@color-brand-primary, 10%), darken(@color-brand-primary, 20%));
+$page-background: linear-gradient(to left top, lighten($color-brand-primary, 10%), darken($color-brand-primary, 20%));
diff --git a/demo/src/less/settings/icons.less b/demo/src/sass/settings/icons.scss
index 546607c7..ad16a645 100644
--- a/demo/src/less/settings/icons.less
+++ b/demo/src/sass/settings/icons.scss
@@ -2,4 +2,4 @@
 // Icons
 // ==========================================================================
 
-@icon-size: 16px;
+$icon-size: 16px;
diff --git a/demo/src/less/settings/layout.less b/demo/src/sass/settings/layout.scss
index 810edc03..8d1fbd28 100644
--- a/demo/src/less/settings/layout.less
+++ b/demo/src/sass/settings/layout.scss
@@ -2,4 +2,4 @@
 // Layout
 // ==========================================================================
 
-@container-max-width: 1280px;
+$container-max-width: 1280px;
diff --git a/demo/src/sass/settings/plyr.scss b/demo/src/sass/settings/plyr.scss
new file mode 100644
index 00000000..3d30ce71
--- /dev/null
+++ b/demo/src/sass/settings/plyr.scss
@@ -0,0 +1,18 @@
+// ==========================================================================
+// Plyr Settings
+// ==========================================================================
+
+// Font
+$plyr-font-family: inherit;
+
+// Sizes
+$plyr-font-size-base: 13px;
+$plyr-font-size-small: 12px;
+$plyr-font-size-time: 11px;
+$plyr-font-size-badges: 9px;
+
+// Captions
+$plyr-font-size-captions-base: $plyr-font-size-base;
+$plyr-font-size-captions-small: $plyr-font-size-small;
+$plyr-font-size-captions-medium: 18px;
+$plyr-font-size-captions-large: 21px;
diff --git a/demo/src/less/settings/spacing.less b/demo/src/sass/settings/spacing.scss
index 6bd14f58..a19b0a95 100644
--- a/demo/src/less/settings/spacing.less
+++ b/demo/src/sass/settings/spacing.scss
@@ -2,4 +2,4 @@
 // Colors
 // ==========================================================================
 
-@spacing-base: 20px;
+$spacing-base: 20px;
diff --git a/demo/src/sass/settings/type.scss b/demo/src/sass/settings/type.scss
new file mode 100644
index 00000000..e8f0b2c8
--- /dev/null
+++ b/demo/src/sass/settings/type.scss
@@ -0,0 +1,20 @@
+// ==========================================================================
+// Typography
+// ==========================================================================
+
+$font-sans-serif: 'Gordita', 'Avenir', 'Helvetica Neue', sans-serif;
+
+$font-size-base: 15;
+$font-size-small: 13;
+$font-size-large: 18;
+$font-size-h1: 64;
+
+$font-weight-light: 300;
+$font-weight-regular: 400;
+$font-weight-medium: 500;
+$font-weight-bold: 600;
+$font-weight-black: 900;
+
+$line-height-base: 1.75;
+
+$letter-spacing-headings: -0.025em;
diff --git a/demo/src/less/type/base.less b/demo/src/sass/type/base.scss
index 70eddcb4..452298bd 100644
--- a/demo/src/less/type/base.less
+++ b/demo/src/sass/type/base.scss
@@ -8,13 +8,13 @@ html {
 }
 
 body {
-    font-family: @font-sans-serif;
-    line-height: @line-height-base;
-    color: @color-text;
-    font-weight: @font-weight-medium;
-    text-shadow: 0 1px 1px fade(#000, 15%);
-    .font-smoothing();
-    .font-size(@font-size-base);
+    @include font-smoothing();
+    @include font-size($font-size-base);
+    color: $color-text;
+    font-family: $font-sans-serif;
+    font-weight: $font-weight-medium;
+    line-height: $line-height-base;
+    text-shadow: 0 1px 1px rgba(#000, 0.15);
 }
 
 button,
@@ -26,10 +26,10 @@ textarea {
 
 p,
 small {
-    margin: 0 0 @spacing-base;
+    margin: 0 0 $spacing-base;
 }
 
 small {
+    @include font-size($font-size-small);
     display: block;
-    .font-size(@font-size-small);
 }
diff --git a/demo/src/less/type/headings.less b/demo/src/sass/type/headings.scss
index 5e46bf34..c2abc97e 100644
--- a/demo/src/less/type/headings.less
+++ b/demo/src/sass/type/headings.scss
@@ -3,8 +3,8 @@
 // ==========================================================================
 
 h1 {
-    margin: 0 0 (@spacing-base / 2);
-    font-weight: @font-weight-bold;
-    letter-spacing: @letter-spacing-headings;
-    .font-size(@font-size-h1);
+    @include font-size($font-size-h1);
+    font-weight: $font-weight-bold;
+    letter-spacing: $letter-spacing-headings;
+    margin: 0 0 ($spacing-base / 2);
 }
diff --git a/demo/src/less/utilities/color.less b/demo/src/sass/utilities/color.scss
index 8d6b1c4f..786e6ccb 100644
--- a/demo/src/less/utilities/color.less
+++ b/demo/src/sass/utilities/color.scss
@@ -3,9 +3,9 @@
 // ==========================================================================
 
 .color--vimeo {
-    color: @color-vimeo;
+    color: $color-vimeo;
 }
 
 .color--youtube {
-    color: @color-youtube;
+    color: $color-youtube;
 }
diff --git a/demo/src/less/utilities/hidden.less b/demo/src/sass/utilities/hidden.scss
index a48b107a..a48b107a 100644
--- a/demo/src/less/utilities/hidden.less
+++ b/demo/src/sass/utilities/hidden.scss