@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap);.player-conteiner{max-width:100%;position:relative;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;flex-direction:row;-webkit-box-align:stretch;-webkit-align-items:stretch;align-items:stretch;-webkit-flex-wrap:wrap;flex-wrap:wrap;margin:auto;height:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.controls-conteiner{-webkit-box-ordinal-group:2;-webkit-order:1;order:1;width:25%;-webkit-box-align:center}.cassette-conteiner,.controls-conteiner{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center}.cassette-conteiner{-webkit-box-ordinal-group:3;-webkit-order:2;order:2;background-size:contain;background-repeat:no-repeat;width:50%;-webkit-box-align:center}.social-conteiner{-webkit-box-ordinal-group:4;-webkit-order:3;order:3;width:25%;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.box-conteiner .box-holder{position:relative;width:100%;z-index:1}.cassette-holder{position:absolute;margin-left:16.5%;width:68.1%;margin-top:9%;height:9%;-webkit-flex-direction:column;flex-direction:column;top:0;left:0}.cassette-holder,.cassette-holder>div{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal}.cassette-holder>div{-webkit-box-flex:1;-webkit-flex:1;flex:1;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-flex-direction:column;flex-direction:column}.cassette-conteiner .box-holder .wheel1{left:18%;width:22%}.cassette-conteiner .box-holder .wheel1,.cassette-conteiner .box-holder .wheel2{position:absolute;top:23%;-webkit-animation:spin 5s linear infinite;animation:spin 5s linear infinite;-webkit-animation-play-state:paused;animation-play-state:paused}.cassette-conteiner .box-holder .wheel2{left:60%;width:21.8%}.cassette-conteiner .box-holder .wheel1.playing,.cassette-conteiner .box-holder .wheel2.playing{-webkit-animation-play-state:running;animation-play-state:running}@-webkit-keyframes spin{to{-webkit-transform:rotate(-1turn)}}@keyframes spin{to{-webkit-transform:rotate(-1turn);transform:rotate(-1turn)}}.cassette-conteiner .box-holder .wheel1 img,.cassette-conteiner .box-holder .wheel2 img{display:block}#progressbar{-webkit-transition:width 1s;transition:width 1s;background-color:#40b280;height:2px}.progress-wrapper{position:relative;width:100%;border-style:solid;border-width:0;overflow:hidden;background-color:#e0e0e0;height:16%;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.progress-time{font-size:80%}.controls-holder{position:relative;text-align:center;width:40%;background:#fff;-webkit-box-sizing:content-box;box-sizing:content-box;border:2vw solid #fff;margin-left:10%;border-radius:100%}#play-button-conteiner{position:relative;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}#play-button-conteiner button{border-radius:100%;border:0;margin:auto;outline:none;background-color:transparent;background-repeat:no-repeat;background-size:contain;cursor:pointer;-webkit-transition:background-image .2s ease-in-out;transition:background-image .2s ease-in-out;padding:0;width:100%;height:auto;position:relative}#play-button-conteiner button img{display:block}#play-button-conteiner button.loading:after{content:" ";display:block;border-radius:50%;border:.9vw solid #000;position:absolute;top:0;left:0;right:0;bottom:0;border-color:#000 transparent #000 transparent;-webkit-animation:lds-dual-ring 1.2s linear infinite;animation:lds-dual-ring 1.2s linear infinite}@-webkit-keyframes lds-dual-ring{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes lds-dual-ring{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.cassette-holder{text-align:left;font-family:Lucida Console,Courier,Menlo}.track-holder{min-height:4.5%}#track-title-conteiner{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-size:1.5vw}.track-conteiner a{white-space:nowrap}.slider{border-width:0;border-style:solid;border-radius:0;margin-top:0;background:#fff;z-index:10;min-width:70px;position:absolute;left:-2vw;right:-2vw}.slider-horizontal .slider-wrapper{height:2px;top:23px;left:2vw;right:2vw}.slider-thumb{border-radius:0;width:8px;right:-5px}.slider-thumb,.slider-thumb-label,.slider-track-fill{background-color:#333}#chanels-conteiner li{list-style:none;display:inline-block;margin-right:10px}.social-links{background:#fff;-webkit-box-sizing:content-box;box-sizing:content-box;border:2vw solid #fff;padding-right:5%;float:right;position:relative}.social-links a{width:3.6vw;height:3.6vw;display:block;background-size:contain;background-repeat:no-repeat;margin:.5vw 0}.social-links a img{display:block;image-rendering:crisp-edges}#background{position:absolute;z-index:0;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;color:#e9e9e9;max-width:100%;max-height:100%;overflow:hidden;font-size:1.2vw;font-weight:600;font-family:Montserrat,sans-serif}#background span{display:inline-block;margin:.3vw .3vw;padding:.4vw;white-space:nowrap}@media screen and (max-width:700px){.player-conteiner{-webkit-box-align:center;-webkit-align-items:center;align-items:center}.cassette-conteiner{-webkit-box-ordinal-group:1;-webkit-order:0;order:0;width:100%}.controls-conteiner{width:100%}.controls-holder{padding:0;margin:auto;border:4vw solid #fff}#track-title-conteiner{font-size:3vw}.social-conteiner{width:100%}.social-links{margin:auto;float:none;padding:0;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center}.social-links a{display:inline-block;width:10%;height:auto;margin:.5%}.slider{display:none}#background{font-size:1.2vh}}#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;height:100%;padding:8px;-webkit-box-sizing:border-box;box-sizing:border-box}body{margin:0;height:100vh}