@import url("https://fonts.googleapis.com/css?family=Raleway:600,900");@keyframes from-top{0%{transform:translate(-300px, -100%) scale(0.5) rotate(-15deg)}100%{transform:translate(0, 0) scale(1) rotate(0deg)}}@keyframes from-bottom{0%{transform:translate(-300px, 100%) scale(0.5) rotate(15deg)}100%{transform:translate(0, 0) scale(1) rotate(0deg)}}@keyframes rotatePentagon {}@keyframes rotateTriangle{from{transform:rotate(0deg) translate(20%, 20%)}to{transform:rotate(360deg) translate(-20%, -20%)}}@keyframes background{0%{background-position:0% 0%}100%{background-position:100% 100%}}#pentagon{position:absolute;background-image:radial-gradient(#ffffff 0%,transparent 100%);width:1000px;height:1000px;-webkit-clip-path:polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);clip-path:polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);opacity:.05;top:0;left:0;transform:rotate(170deg)}@media (min-width: 1280px){#pentagon{animation:rotatePentagon 120s linear infinite alternate;will-change:transform}}#triangle{position:absolute;background-image:radial-gradient(#ffffff 0%,transparent 100%);width:1000px;height:1000px;-webkit-clip-path:polygon(50% 0%, 0% 100%, 100% 100%);clip-path:polygon(50% 0%, 0% 100%, 100% 100%);opacity:.05;right:0;bottom:0;transform:rotate(40deg)}@media (min-width: 1280px){#triangle{animation:rotateTriangle 180s linear infinite alternate;will-change:transform}}#circles{display:flex;align-items:center;justify-content:center;position:absolute;top:0;bottom:0;left:0;right:0}#circles>span{position:absolute;width:1200px;height:1200px;top:calc(50% - 600px);left:calc(50% - 600px);border-radius:100%;box-shadow:0 0 20px rgba(255,255,255,0.02),0 0 2px rgba(255,255,255,0.2),inset 0 0 10px rgba(0,0,0,0.1),inset 0 0 2px rgba(0,0,0,0.1);will-change:transform}#circles>span>span{position:absolute;width:80%;height:80%;top:calc(50% - 40%);left:calc(50% - 40%);border-radius:100%;box-shadow:0 0 20px rgba(255,255,255,0.02),0 0 2px rgba(255,255,255,0.2),inset 0 0 10px rgba(0,0,0,0.1),inset 0 0 2px rgba(0,0,0,0.1);will-change:transform}#circles>span>span>span{position:absolute;width:60%;height:60%;top:calc(50% - 30%);left:calc(50% - 30%);border-radius:100%;box-shadow:0 0 20px rgba(255,255,255,0.02),0 0 2px rgba(255,255,255,0.2),inset 0 0 10px rgba(0,0,0,0.1),inset 0 0 2px rgba(0,0,0,0.1);will-change:transform}#circles>span>span>span>span{position:absolute;width:80%;height:80%;top:calc(50% - 40%);left:calc(50% - 40%);border-radius:100%;box-shadow:0 0 20px rgba(255,255,255,0.02),0 0 2px rgba(255,255,255,0.2),inset 0 0 10px rgba(0,0,0,0.1),inset 0 0 2px rgba(0,0,0,0.1);will-change:transform;background:rgba(255,255,255,0.02)}#stripes{position:absolute;top:0;bottom:0;left:0;right:0;min-width:2000px;opacity:.03;transform:rotate(-45deg) translate(0%, -40%);background-image:repeating-linear-gradient(transparent, transparent 20px, #fff 20px, #fff 40px, transparent 40px, transparent 50px, #fff 50px, #fff 60px, transparent 60px, transparent 90px, #fff 90px, #fff 110px)}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;position:relative;overflow:hidden}body{font:normal 600 14px/1.2em 'Raleway', sans-serif;text-transform:uppercase;color:#fff;background-image:linear-gradient(120deg, #262242,#64252f)}@media (min-width: 768px){body{font-size:16px;line-height:1.4em}}@media (min-width: 1280px){body{background-size:200% 200%;animation:background 60s ease infinite alternate;will-change:background}}button{text-transform:uppercase;font-family:'Raleway', sans-serif;font-weight:600;outline:0}.stage{position:absolute;top:0;bottom:0;left:0;right:0;transform:translate(0, -100%);animation-duration:.5s;animation-timing-function:ease-out;padding:30px 20px 130px;will-change:transform}@media (min-width: 768px){.stage{display:flex;align-items:center;justify-content:center}}.stage .safe{position:relative;will-change:transform}@media (min-width: 768px){.stage .safe{width:60%;height:70%}}.stage .safe .artist,.stage .safe .info{display:block}.stage .safe .artist{margin-bottom:40px;opacity:.2;font-size:14px}@media (min-width: 1280px){.stage .safe .artist{margin-bottom:90px}}.stage .safe .title{font-size:40px;line-height:1.2em;margin:0 0 20px;font-weight:900;position:relative;z-index:2}@media (min-width: 768px){.stage .safe .title{max-width:90%;font-size:60px;line-height:1.3em}}@media (min-width: 1280px){.stage .safe .title{max-width:60%;font-size:70px;line-height:1.4em}}.stage .safe .title.copy{position:absolute;top:60px;left:2px;color:#000;z-index:1;opacity:.8;will-change:transform}@media (min-width: 768px){.stage .safe .title.copy{top:65px;left:5px}}@media (min-width: 1280px){.stage .safe .title.copy{top:120px;left:5px}}.stage .safe .info{position:relative;padding-left:50px;opacity:.6}.stage .safe .info:before{content:'';display:inline-block;border-top:2px solid rgba(255,255,255,0.4);width:40px;position:absolute;top:10px;left:0}.stage .safe .play{border:2px solid rgba(255,255,255,0.6);background:none;padding:4px 10px;color:#fff;margin-top:40px;opacity:.6;cursor:pointer;font-size:15px;transition:all .1s}.stage .safe .play:hover{opacity:1;background:#fff;color:#262242}.stage.active{transform:translate(0, 0)}.stage.from-top{animation-name:from-top}.stage.to-top{animation-name:from-top;animation-direction:reverse}.stage.from-bottom{animation-name:from-bottom}.stage.to-bottom{animation-name:from-bottom;animation-direction:reverse}#nav-toggle{display:block;position:absolute;top:20px;right:15px;color:#fff;background:none;border:0;outline:0;padding:5px 10px;font-size:20px;z-index:60}#nav-toggle .fa-close{display:none}#nav-toggle .fa-bars{display:block}#nav-toggle.open .fa-close{display:block}#nav-toggle.open .fa-bars{display:none}@media (min-width: 1280px){#nav-toggle{display:none}}#nav{width:100%;padding:20px;top:0;bottom:0;right:0;background:#000;position:absolute;z-index:50;overflow-y:scroll;transform:translate(100%, 0);transition:transform .4s ease-in-out;will-change:transform}#nav.open{transform:translate(0, 0)}@media (min-width: 1280px){#nav{overflow:hidden;width:360px;max-width:20%;background:rgba(0,0,0,0);box-shadow:none;bottom:125px;transform:translate(0, 0);transition:box-shadow .3s, background .3s}#nav:hover{background:rgba(0,0,0,0.1);box-shadow:0 0 20px rgba(0,0,0,0.14),0 0 5px rgba(0,0,0,0.2)}#nav:hover #nav-track button{opacity:.4}#nav:hover #nav-track button.active{opacity:1}}#nav #nav-track{display:flex;align-items:center;justify-content:center;flex-direction:column;top:20px;left:20px;right:20px;transition:transform .2s}@media (min-width: 1280px){#nav #nav-track{position:absolute}}#nav #nav-track button{flex:1 0 auto;background:none;border:0;padding:10px;color:#fff;font-size:15px;line-height:21px;opacity:.6;cursor:pointer;transition:all .3s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80%}@media (min-width: 1280px){#nav #nav-track button{opacity:.1}}#nav #nav-track button:hover{opacity:1}#nav #nav-track button.active{opacity:1;font-size:18px}@media (min-width: 1280px){#nav #nav-track button.active{opacity:.3}}#waveform-container{position:absolute;bottom:0;left:0;right:0;padding:0 20px 20px;background:rgba(0,0,0,0.2);background:rgba(0,0,0,0.7);background:#000;box-shadow:0 0 20px rgba(0,0,0,0.14),0 0 5px rgba(0,0,0,0.2);min-height:100px;opacity:1;z-index:20}#waveform-container .flex{display:flex;flex-wrap:wrap}#waveform-container #now-playing{flex:0 0 100%;font-size:14px;line-height:25px;height:25px;color:rgba(255,255,255,0.2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:#000;margin:0 -20px 20px;padding:0 20px;border-bottom:1px solid rgba(255,255,255,0.1)}#waveform-container #now-playing span{color:rgba(255,255,255,0.6)}#waveform-container #waveform{flex:1 0 auto;height:60px}#waveform-container .controls{display:flex;align-items:center;justify-content:center;padding-right:20px}#waveform-container .controls button{cursor:pointer;background:none;outline:0;color:#fff;font-size:22px;width:50px;height:50px;display:none;border:1px solid rgba(255,255,255,0.3);border-radius:100%;text-align:center;opacity:.6;transition:opacity .2s}#waveform-container .controls button.play{padding-left:4px}#waveform-container .controls button:hover{opacity:1}#waveform-container .controls span.loading{display:none;color:#fff;font-size:40px;line-height:50px;width:50px;height:50px;text-align:center;opacity:.6}#waveform-container.loading .controls span.loading{display:block}#waveform-container.loaded .controls .play{display:block}#waveform-container.playing .controls .pause{display:block}#waveform-container.playing .controls .play{display:none}
