#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;margin-top:60px;display:flex;align-content:center}#app,.warmer{justify-content:center;flex-wrap:wrap}.warmer{width:500px;height:300px;border-radius:60px;background:#d7c4b6;box-shadow:4px 4px 10px #805a4d;position:relative}.warmer-back{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:60px;-webkit-animation-timing-function:ease-in-out;-webkit-animation-name:breathe;-webkit-animation-duration:2.7s;-webkit-animation-iteration-count:infinite;-webkit-animation-direction:alternate}@-webkit-keyframes breathe{0%{opacity:.5;box-shadow:4px 4px 10px #805a4d}to{opacity:1;box-shadow:10px 8px 8px #f77d7d}}.warmer:before{border:100px solid #9e715e;border-radius:50%;box-shadow:0 0 4px #000}.warmer:after,.warmer:before{content:"";display:block;width:0;height:0;position:absolute;left:50%;top:50%;transform:translate3d(-50%,-50%,0)}.warmer:after{border:90px solid #fff;border-radius:50%}.warmer p{display:block;width:100%}.warmer-title{color:#67453b;padding-top:20px;font-size:12px}.btn-switch{width:50px;height:50px;border:1px solid #67453b;border-radius:50%;position:absolute;left:50%;top:50%;transform:translate3d(-50%,-50%,0);box-shadow:0 0 3px #000;cursor:pointer;z-index:10;background:#996e5b}.bg-img{position:absolute;right:20px;bottom:20px;width:80px}.warmer-level{width:20px;height:auto;position:absolute;left:50px;top:100px;display:flex;flex-wrap:wrap;flex-direction:column-reverse}.warmer-level li{width:100%;height:3px;margin-top:5px;background:#996e5b}li{list-style:none}.arrow{display:inline-block;width:15px;height:15px;border-top:2px solid #d7c4b6;top:50%;border-right:2px solid #d7c4b6;position:absolute;left:50%;z-index:20}.arrow-click{cursor:pointer}.arrow-click:hover{border-color:#67453b}.arrow-top{transform:rotate(-45deg);margin-top:-56px;margin-left:-8px}.arrow-right{transform:rotate(45deg)}.arrow-bottom{transform:rotate(135deg);margin-left:-8px;top:63%}.arrow-left{transform:rotate(-135deg)}.warmer-tips{text-align:left;margin-top:200px;font-size:12px;color:#67453b}.warmer-tips li{margin-top:5px}