.title{text-align:center;display:flex;align-self:center;margin-top:48px;background-color:621fe0;border-radius:12px;padding:8px;font-size:48px}.hero-div{display:flex;margin:auto}.hero-div,.wheel{position:relative}.wheel{width:400px;height:400px;border-radius:50%;overflow:hidden;border:4px solid white;color:white}#inner-wheel{width:100%;height:100%;-webkit-transition:all 6s cubic-bezier(0,.99,.4,.99);-moz-transition:all 6 cubic-bezier(0,.99,.4,.99);-o-transition:all 6s cubic-bezier(0,.99,.4,.99);-ms-transition:all 6s cubic-bezier(0,.99,.4,.99);transition:all 6s cubic-bezier(0,.99,.4,.99)}.wheel div.sec{overflow:hidden;position:absolute;top:0;right:0;width:50%;height:50%;transform-origin:0 100%}.wheel div.sec:first-child{transform:rotate(0deg) skewY(-30deg);-webkit-transform:rotate(0deg) skewY(-30deg);-moz-transform:rotate(0deg) skewY(-30deg);-o-transform:rotate(0deg) skewY(-30deg);-ms-transform:rotate(0deg) skewY(-30deg);background:#621fe0}.wheel div.sec:nth-child(2){transform:rotate(60deg) skewY(-30deg);-webkit-transform:rotate(60deg) skewY(-30deg);-moz-transform:rotate(60deg) skewY(-30deg);-o-transform:rotate(60deg) skewY(-30deg);-ms-transform:rotate(60deg) skewY(-30deg);background:#ff6600}.wheel div.sec:nth-child(3){transform:rotate(120deg) skewY(-30deg);-webkit-transform:rotate(120deg) skewY(-30deg);-moz-transform:rotate(120deg) skewY(-30deg);-o-transform:rotate(120deg) skewY(-30deg);-ms-transform:rotate(120deg) skewY(-30deg);background:#621fe0}.wheel div.sec:nth-child(4){transform:rotate(180deg) skewY(-30deg);-webkit-transform:rotate(180deg) skewY(-30deg);-moz-transform:rotate(180deg) skewY(-30deg);-o-transform:rotate(180deg) skewY(-30deg);-ms-transform:rotate(180deg) skewY(-30deg);background:#ff6600}.wheel div.sec:nth-child(5){transform:rotate(240deg) skewY(-30deg);-webkit-transform:rotate(240deg) skewY(-30deg);-moz-transform:rotate(240deg) skewY(-30deg);-o-transform:rotate(240deg) skewY(-30deg);-ms-transform:rotate(240deg) skewY(-30deg);background:#621fe0}.wheel div.sec:nth-child(6){transform:rotate(300deg) skewY(-30deg);-webkit-transform:rotate(300deg) skewY(-30deg);-moz-transform:rotate(300deg) skewY(-30deg);-o-transform:rotate(300deg) skewY(-30deg);-ms-transform:rotate(300deg) skewY(-30deg);background:#ff6600}.wheel div.sec .fa{position:absolute;z-index:10000;font-size:22px;font-weight:900;text-align:center;width:100%;height:100%;top:56%;left:15%;-webkit-transform:skewY(30deg) rotate(-60deg);-ms-transform:skewY(30deg) rotate(-60deg);transform:skewY(30deg) rotate(-60deg)}.text{position:relative;top:-13px;left:30px;transform:rotate(90deg);display:block}#spin{position:absolute;top:50%;left:50%;margin:-50px 0 0 -50px;border-radius:50%;box-shadow:0 3px 0 rgba(255,255,255,.1);z-index:100;background:#fff;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}#spin,#spin:after{width:100px;height:100px}#spin:after{content:"SPIN";text-align:center;font-size:28px;letter-spacing:.1em;line-height:100px;color:white;position:relative;z-index:1000;display:block}#spin:before{content:"";position:absolute;width:0;height:0;border-color:transparent transparent #ffffff;border-style:solid;border-width:0 20px 28px;top:-20px;left:28.5px}#inner-spin{width:90px;height:90px;position:absolute;top:50%;left:50%;margin:-45px 0 0 -45px;border-radius:50%;background:black;z-index:9;box-shadow:inset 0 -2px 0 rgba(255,255,255,1),inset 0 2px 0 rgba(255,255,255,1),0 0 5px rgba(0,0,0,.4)}#spin:active #inner-spin{box-shadow:inset 0 0 5px rgba(255,255,255,.4)}@media (max-width:1023px){.title{font-size:28px;margin-left:16px;margin-right:16px}.wheel{width:320px;height:320px}.wheel:before{width:310px;height:310px}.wheel div.sec .fa{font-size:20px}#spin{margin:-30px 0 0 -30px}#spin,#spin:after{width:60px;height:60px}#spin:after{font-size:16px;line-height:60px}#spin:before{border-width:0 15px 20px;top:-11px;left:13.5px}#inner-spin{width:54px;height:54px;margin:-27px 0 0 -27px}}