@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: local('Poppins Regular'), local('Poppins-Regular'), url(https://fonts.gstatic.com/s/poppins/v9/pxiEyp8kv8JHgFVrJJfedw.ttf) format('truetype');}
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: local('Poppins SemiBold'), local('Poppins-SemiBold'), url(https://fonts.gstatic.com/s/poppins/v9/pxiByp8kv8JHgFVrLEj6Z1xlEA.ttf) format('truetype');}

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

* { box-sizing: border-box; }

body { font-family: 'Poppins', sans-serif; }
.background {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 10px;
    filter: blur(10px);
    -webkit-filter: blur(10px);
    height: 320px; width: 100%;
}
.container { height:320px; width: 100%; position: absolute; top: 0; left: 0; background-image: linear-gradient(rgba(0,0,0,.8), rgba(0,51,64,.85)); padding: 30px; z-index: 2; }
.header { position: relative;  height: 77px; }
.header .hostAndEp .host { font-size: 14px; color: rgba(255, 255, 255, 0.5); line-height: 21px; }
.header .hostAndEp .episode { margin-bottom: 10px; font-size: 20px; font-weight: 600; color: white; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 28px; }
.header .hostAndEp .seeMore { color: #ccc; font-size: 16px; text-decoration:none; }
.header img.cover { border-radius: 5px; box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.75);  position: absolute; top: 0; right: 0; }
.controls { text-align: center; margin-top: 40px; height: 73px; }
.controls img { width: 70px; }
.controls img.play {  margin: 0 15px; }
.controls img.play.loading { -webkit-animation: rotation 1.25s infinite linear; }
.footer { margin-top: 20px; }
.footer .progress {   width: 100%; background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, white), color-stop(0%, #92a0a3)); }
.footer .numbersAndLogo { text-align: center;  margin-top: 15px; }
.footer .numbersAndLogo img { width: 80px; }
.footer .numbersAndLogo span { display: inline-block; color: rgba(255, 255, 255, 0.5); margin-top: 2px; font-size: 14px; }
.footer .numbersAndLogo span:first-child { float: left; width: 40px; }
.footer .numbersAndLogo span:last-child { float: right; }
input[type=range] { -webkit-appearance: none; -moz-apperance: none; border-radius: 10px; height: 8px; background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, white), color-stop(0%, rgb(146,160,163))); background-image: -moz-linear-gradient(left center, white 0%, white 0%, rgb(146,160,163) 0%, rgb(146,160,163) 100%);}
input[type="range"]::-moz-range-track { border: none; background: none; outline: none; }
input[type=range]:focus { outline: none; border: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none !important; background-color: white; height: 13px; width: 13px; border-radius: 50%; }
input[type=range]::-moz-range-thumb { -moz-appearance: none !important; background-color: white; border: none; height: 13px; width: 13px; border-radius: 50%; }

@media screen and (max-width: 400px) {
    .header .hostAndEp { width: calc(100% - 100px); }
    .header .hostAndEp .episode { font-size: 14px; line-height: 22px;  }
    .header img.cover {  width: 85px; height: 85px;}
}

@media screen and (max-width: 350px) {
    .controls img.play { margin: 0 10px; }
}

@-webkit-keyframes rotation {
    from {  -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(359deg); }
}