body { margin:0; } @font-face { font-family: 'Aero'; src:url('../fonts/Aero.ttf.woff') format('woff'), url('../fonts/Aero.ttf.svg#Aero') format('svg'), url('../fonts/Aero.ttf.eot'), url('../fonts/Aero.ttf.eot?#iefix') format('embedded-opentype'); font-weight: normal; font-style: normal; } @keyframes rouletteDecoShake { 0% { transform: rotate(5deg) } 33.33% { transform: rotate(-7.5deg) } 66.66% { transform: rotate(11.25deg) } to { transform: rotate(-16.875deg) } } @keyframes rouletteSpecialAward { 0% { box-shadow: 0 0 0 #f304ac, inset 0 0 1px #f304ac } to { box-shadow: 0 0 40px #f304ac, inset 0 0 1px #f304ac } } @keyframes rouletteNumberTimes { 0% { box-shadow: 0 0 0 0 rgba(252, 255, 0, .55), inset 0 0 1px rgba(252, 255, 0, .55) } to { box-shadow: 0 0 16px 2px rgba(252, 255, 0, .55), inset 0 0 1px rgba(252, 255, 0, .55) } } @keyframes rouletteTitles { 0% { text-shadow: 0px 0px 9px #d9a923; } to { text-shadow: 0px 0px 0px #d9a923; } } @keyframes rouletteNeonLight { 0% { background-position: 0 50% } to { background-position: 200% 50% } } @keyframes roulettePrizeNumber { 0% { box-shadow: 0 0 0 0 rgba(255, 234, 0, 0), 0 0 0 0 rgba(255, 234, 0, 0) } to { box-shadow: 0 0 1.6666666667vw .2083333333vw rgba(255, 234, 0, .5), 0 0 .6944444444vw .1388888889vw rgba(255, 234, 0, .9) } } @keyframes roulettePrizeNumber-pigSize { 0% { box-shadow: 0 0 0 0 rgba(255, 234, 0, 0), 0 0 0 0 rgba(255, 234, 0, 0) } to { box-shadow: 0 0 24px 3px rgba(255, 234, 0, .5), 0 0 10px 2px rgba(255, 234, 0, .9) } } @keyframes roulettePrizeNumberAward { 0% { text-shadow: 0 .0694444444vw 0 #e81fa1, 0 -.0694444444vw 0 #e81fa1, -.0694444444vw 0 0 #e81fa1, .0694444444vw 0 0 #e81fa1, .0694444444vw .0694444444vw 0 #e81fa1, .0694444444vw -.0694444444vw 0 #e81fa1, -.0694444444vw -.0694444444vw 0 #e81fa1, -.0694444444vw .0694444444vw 0 #e81fa1, -.0694444444vw -.1388888889vw 0 rgba(255, 234, 0, 0), 0 -.1388888889vw 0 rgba(255, 234, 0, 0), .0694444444vw -.1388888889vw 0 rgba(255, 234, 0, 0), .1388888889vw -.1388888889vw 0 rgba(255, 234, 0, 0), .1388888889vw -.0694444444vw 0 rgba(255, 234, 0, 0), .1388888889vw 0 0 rgba(255, 234, 0, 0), .1388888889vw .0694444444vw 0 rgba(255, 234, 0, 0), .1388888889vw .1388888889vw 0 rgba(255, 234, 0, 0), .0694444444vw .1388888889vw 0 rgba(255, 234, 0, 0), 0 .1388888889vw 0 rgba(255, 234, 0, 0), -.0694444444vw .1388888889vw 0 rgba(255, 234, 0, 0), -.1388888889vw .1388888889vw 0 rgba(255, 234, 0, 0), -.1388888889vw .0694444444vw 0 rgba(255, 234, 0, 0), -.1388888889vw 0 0 rgba(255, 234, 0, 0), -.1388888889vw -.0694444444vw 0 rgba(255, 234, 0, 0), -.1388888889vw -.1388888889vw 0 rgba(255, 234, 0, 0) } to { text-shadow: 0 .0694444444vw 0 #e81fa1, 0 -.0694444444vw 0 #e81fa1, -.0694444444vw 0 0 #e81fa1, .0694444444vw 0 0 #e81fa1, .0694444444vw .0694444444vw 0 #e81fa1, .0694444444vw -.0694444444vw 0 #e81fa1, -.0694444444vw -.0694444444vw 0 #e81fa1, -.0694444444vw .0694444444vw 0 #e81fa1, -.0694444444vw -.1388888889vw .2083333333vw rgba(255, 234, 0, .5), 0 -.1388888889vw .2083333333vw rgba(255, 234, 0, .5), .0694444444vw -.1388888889vw .2083333333vw rgba(255, 234, 0, .5), .1388888889vw -.1388888889vw .2083333333vw rgba(255, 234, 0, .5), .1388888889vw -.0694444444vw .2083333333vw rgba(255, 234, 0, .5), .1388888889vw 0 .2083333333vw rgba(255, 234, 0, .5), .1388888889vw .0694444444vw .2083333333vw rgba(255, 234, 0, .5), .1388888889vw .1388888889vw .2083333333vw rgba(255, 234, 0, .5), .0694444444vw .1388888889vw .2083333333vw rgba(255, 234, 0, .5), 0 .1388888889vw .2083333333vw rgba(255, 234, 0, .5), -.0694444444vw .1388888889vw .2083333333vw rgba(255, 234, 0, .5), -.1388888889vw .1388888889vw .2083333333vw rgba(255, 234, 0, .5), -.1388888889vw .0694444444vw .2083333333vw rgba(255, 234, 0, .5), -.1388888889vw 0 .2083333333vw rgba(255, 234, 0, .5), -.1388888889vw -.0694444444vw .2083333333vw rgba(255, 234, 0, .5), -.1388888889vw -.1388888889vw .2083333333vw rgba(255, 234, 0, .5) } } @keyframes roulettePrizeNumberAward-pigSize { 0% { text-shadow: 0 1px 0 #e81fa1, 0 -1px 0 #e81fa1, -1px 0 0 #e81fa1, 1px 0 0 #e81fa1, 1px 1px 0 #e81fa1, 1px -1px 0 #e81fa1, -1px -1px 0 #e81fa1, -1px 1px 0 #e81fa1, -1px -2px 0 rgba(255, 234, 0, 0), 0 -2px 0 rgba(255, 234, 0, 0), 1px -2px 0 rgba(255, 234, 0, 0), 2px -2px 0 rgba(255, 234, 0, 0), 2px -1px 0 rgba(255, 234, 0, 0), 2px 0 0 rgba(255, 234, 0, 0), 2px 1px 0 rgba(255, 234, 0, 0), 2px 2px 0 rgba(255, 234, 0, 0), 1px 2px 0 rgba(255, 234, 0, 0), 0 2px 0 rgba(255, 234, 0, 0), -1px 2px 0 rgba(255, 234, 0, 0), -2px 2px 0 rgba(255, 234, 0, 0), -2px 1px 0 rgba(255, 234, 0, 0), -2px 0 0 rgba(255, 234, 0, 0), -2px -1px 0 rgba(255, 234, 0, 0), -2px -2px 0 rgba(255, 234, 0, 0) } to { text-shadow: 0 1px 0 #e81fa1, 0 -1px 0 #e81fa1, -1px 0 0 #e81fa1, 1px 0 0 #e81fa1, 1px 1px 0 #e81fa1, 1px -1px 0 #e81fa1, -1px -1px 0 #e81fa1, -1px 1px 0 #e81fa1, -1px -2px 3px rgba(255, 234, 0, .5), 0 -2px 3px rgba(255, 234, 0, .5), 1px -2px 3px rgba(255, 234, 0, .5), 2px -2px 3px rgba(255, 234, 0, .5), 2px -1px 3px rgba(255, 234, 0, .5), 2px 0 3px rgba(255, 234, 0, .5), 2px 1px 3px rgba(255, 234, 0, .5), 2px 2px 3px rgba(255, 234, 0, .5), 1px 2px 3px rgba(255, 234, 0, .5), 0 2px 3px rgba(255, 234, 0, .5), -1px 2px 3px rgba(255, 234, 0, .5), -2px 2px 3px rgba(255, 234, 0, .5), -2px 1px 3px rgba(255, 234, 0, .5), -2px 0 3px rgba(255, 234, 0, .5), -2px -1px 3px rgba(255, 234, 0, .5), -2px -2px 3px rgba(255, 234, 0, .5) } } @keyframes roulettePrizeNumber0Shadow { 0% { text-shadow: -.2083333333vw -.2777777778vw 0 rgba(255, 234, 0, 0), -.1388888889vw -.2777777778vw 0 rgba(255, 234, 0, 0), -.0694444444vw -.2777777778vw 0 rgba(255, 234, 0, 0), 0 -.2777777778vw 0 rgba(255, 234, 0, 0), .0694444444vw -.2777777778vw 0 rgba(255, 234, 0, 0), .1388888889vw -.2777777778vw 0 rgba(255, 234, 0, 0), .2083333333vw -.2777777778vw 0 rgba(255, 234, 0, 0), .2777777778vw -.2777777778vw 0 rgba(255, 234, 0, 0), .2777777778vw -.2083333333vw 0 rgba(255, 234, 0, 0), .2777777778vw -.1388888889vw 0 rgba(255, 234, 0, 0), .2777777778vw -.0694444444vw 0 rgba(255, 234, 0, 0), .2777777778vw 0 0 rgba(255, 234, 0, 0), .2777777778vw .0694444444vw 0 rgba(255, 234, 0, 0), .2777777778vw .1388888889vw 0 rgba(255, 234, 0, 0), .2777777778vw .2083333333vw 0 rgba(255, 234, 0, 0), .2777777778vw .2777777778vw 0 rgba(255, 234, 0, 0), .2083333333vw .2777777778vw 0 rgba(255, 234, 0, 0), .1388888889vw .2777777778vw 0 rgba(255, 234, 0, 0), .0694444444vw .2777777778vw 0 rgba(255, 234, 0, 0), 0 .2777777778vw 0 rgba(255, 234, 0, 0), -.0694444444vw .2777777778vw 0 rgba(255, 234, 0, 0), -.1388888889vw .2777777778vw 0 rgba(255, 234, 0, 0), -.2083333333vw .2777777778vw 0 rgba(255, 234, 0, 0), -.2777777778vw .2777777778vw 0 rgba(255, 234, 0, 0), -.2777777778vw .2083333333vw 0 rgba(255, 234, 0, 0), -.2777777778vw .1388888889vw 0 rgba(255, 234, 0, 0), -.2777777778vw .0694444444vw 0 rgba(255, 234, 0, 0), -.2777777778vw 0 0 rgba(255, 234, 0, 0), -.2777777778vw -.0694444444vw 0 rgba(255, 234, 0, 0), -.2777777778vw -.1388888889vw 0 rgba(255, 234, 0, 0), -.2777777778vw -.2083333333vw 0 rgba(255, 234, 0, 0), -.2777777778vw -.2777777778vw 0 rgba(255, 234, 0, 0) } to { text-shadow: -.2083333333vw -.2777777778vw .5555555556vw rgba(255, 234, 0, .3), -.1388888889vw -.2777777778vw .5555555556vw rgba(255, 234, 0, .3), -.0694444444vw -.2777777778vw .5555555556vw rgba(255, 234, 0, .3), 0 -.2777777778vw .5555555556vw rgba(255, 234, 0, .3), .0694444444vw -.2777777778vw .5555555556vw rgba(255, 234, 0, .3), .1388888889vw -.2777777778vw .5555555556vw rgba(255, 234, 0, .3), .2083333333vw -.2777777778vw .5555555556vw rgba(255, 234, 0, .3), .2777777778vw -.2777777778vw .5555555556vw rgba(255, 234, 0, .3), .2777777778vw -.2083333333vw .5555555556vw rgba(255, 234, 0, .3), .2777777778vw -.1388888889vw .5555555556vw rgba(255, 234, 0, .3), .2777777778vw -.0694444444vw .5555555556vw rgba(255, 234, 0, .3), .2777777778vw 0 .5555555556vw rgba(255, 234, 0, .3), .2777777778vw .0694444444vw .5555555556vw rgba(255, 234, 0, .3), .2777777778vw .1388888889vw .5555555556vw rgba(255, 234, 0, .3), .2777777778vw .2083333333vw .5555555556vw rgba(255, 234, 0, .3), .2777777778vw .2777777778vw .5555555556vw rgba(255, 234, 0, .3), .2083333333vw .2777777778vw .5555555556vw rgba(255, 234, 0, .3), .1388888889vw .2777777778vw .5555555556vw rgba(255, 234, 0, .3), .0694444444vw .2777777778vw .5555555556vw rgba(255, 234, 0, .3), 0 .2777777778vw .5555555556vw rgba(255, 234, 0, .3), -.0694444444vw .2777777778vw .5555555556vw rgba(255, 234, 0, .3), -.1388888889vw .2777777778vw .5555555556vw rgba(255, 234, 0, .3), -.2083333333vw .2777777778vw .5555555556vw rgba(255, 234, 0, .3), -.2777777778vw .2777777778vw .5555555556vw rgba(255, 234, 0, .3), -.2777777778vw .2083333333vw .5555555556vw rgba(255, 234, 0, .3), -.2777777778vw .1388888889vw .5555555556vw rgba(255, 234, 0, .3), -.2777777778vw .0694444444vw .5555555556vw rgba(255, 234, 0, .3), -.2777777778vw 0 .5555555556vw rgba(255, 234, 0, .3), -.2777777778vw -.0694444444vw .5555555556vw rgba(255, 234, 0, .3), -.2777777778vw -.1388888889vw .5555555556vw rgba(255, 234, 0, .3), -.2777777778vw -.2083333333vw .5555555556vw rgba(255, 234, 0, .3), -.2777777778vw -.2777777778vw .5555555556vw rgba(255, 234, 0, .3) } } @keyframes roulettePrizeNumber0Shadow-pigSize { 0% { text-shadow: -3px -4px 0 rgba(255, 234, 0, 0), -2px -4px 0 rgba(255, 234, 0, 0), -1px -4px 0 rgba(255, 234, 0, 0), 0 -4px 0 rgba(255, 234, 0, 0), 1px -4px 0 rgba(255, 234, 0, 0), 2px -4px 0 rgba(255, 234, 0, 0), 3px -4px 0 rgba(255, 234, 0, 0), 4px -4px 0 rgba(255, 234, 0, 0), 4px -3px 0 rgba(255, 234, 0, 0), 4px -2px 0 rgba(255, 234, 0, 0), 4px -1px 0 rgba(255, 234, 0, 0), 4px 0 0 rgba(255, 234, 0, 0), 4px 1px 0 rgba(255, 234, 0, 0), 4px 2px 0 rgba(255, 234, 0, 0), 4px 3px 0 rgba(255, 234, 0, 0), 4px 4px 0 rgba(255, 234, 0, 0), 3px 4px 0 rgba(255, 234, 0, 0), 2px 4px 0 rgba(255, 234, 0, 0), 1px 4px 0 rgba(255, 234, 0, 0), 0 4px 0 rgba(255, 234, 0, 0), -1px 4px 0 rgba(255, 234, 0, 0), -2px 4px 0 rgba(255, 234, 0, 0), -3px 4px 0 rgba(255, 234, 0, 0), -4px 4px 0 rgba(255, 234, 0, 0), -4px 3px 0 rgba(255, 234, 0, 0), -4px 2px 0 rgba(255, 234, 0, 0), -4px 1px 0 rgba(255, 234, 0, 0), -4px 0 0 rgba(255, 234, 0, 0), -4px -1px 0 rgba(255, 234, 0, 0), -4px -2px 0 rgba(255, 234, 0, 0), -4px -3px 0 rgba(255, 234, 0, 0), -4px -4px 0 rgba(255, 234, 0, 0) } to { text-shadow: -3px -4px 8px rgba(255, 234, 0, .3), -2px -4px 8px rgba(255, 234, 0, .3), -1px -4px 8px rgba(255, 234, 0, .3), 0 -4px 8px rgba(255, 234, 0, .3), 1px -4px 8px rgba(255, 234, 0, .3), 2px -4px 8px rgba(255, 234, 0, .3), 3px -4px 8px rgba(255, 234, 0, .3), 4px -4px 8px rgba(255, 234, 0, .3), 4px -3px 8px rgba(255, 234, 0, .3), 4px -2px 8px rgba(255, 234, 0, .3), 4px -1px 8px rgba(255, 234, 0, .3), 4px 0 8px rgba(255, 234, 0, .3), 4px 1px 8px rgba(255, 234, 0, .3), 4px 2px 8px rgba(255, 234, 0, .3), 4px 3px 8px rgba(255, 234, 0, .3), 4px 4px 8px rgba(255, 234, 0, .3), 3px 4px 8px rgba(255, 234, 0, .3), 2px 4px 8px rgba(255, 234, 0, .3), 1px 4px 8px rgba(255, 234, 0, .3), 0 4px 8px rgba(255, 234, 0, .3), -1px 4px 8px rgba(255, 234, 0, .3), -2px 4px 8px rgba(255, 234, 0, .3), -3px 4px 8px rgba(255, 234, 0, .3), -4px 4px 8px rgba(255, 234, 0, .3), -4px 3px 8px rgba(255, 234, 0, .3), -4px 2px 8px rgba(255, 234, 0, .3), -4px 1px 8px rgba(255, 234, 0, .3), -4px 0 8px rgba(255, 234, 0, .3), -4px -1px 8px rgba(255, 234, 0, .3), -4px -2px 8px rgba(255, 234, 0, .3), -4px -3px 8px rgba(255, 234, 0, .3), -4px -4px 8px rgba(255, 234, 0, .3) } } @keyframes roulettePrizeNumberText { 0% { text-shadow: -.2083333333vw -.2777777778vw 0 #e81fa1, -.1388888889vw -.2777777778vw 0 #e81fa1, -.0694444444vw -.2777777778vw 0 #e81fa1, 0 -.2777777778vw 0 #e81fa1, .0694444444vw -.2777777778vw 0 #e81fa1, .1388888889vw -.2777777778vw 0 #e81fa1, .2083333333vw -.2777777778vw 0 #e81fa1, .2777777778vw -.2777777778vw 0 #e81fa1, .2777777778vw -.2083333333vw 0 #e81fa1, .2777777778vw -.1388888889vw 0 #e81fa1, .2777777778vw -.0694444444vw 0 #e81fa1, .2777777778vw 0 0 #e81fa1, .2777777778vw .0694444444vw 0 #e81fa1, .2777777778vw .1388888889vw 0 #e81fa1, .2777777778vw .2083333333vw 0 #e81fa1, .2777777778vw .2777777778vw 0 #e81fa1, .2083333333vw .2777777778vw 0 #e81fa1, .1388888889vw .2777777778vw 0 #e81fa1, .0694444444vw .2777777778vw 0 #e81fa1, 0 .2777777778vw 0 #e81fa1, -.0694444444vw .2777777778vw 0 #e81fa1, -.1388888889vw .2777777778vw 0 #e81fa1, -.2083333333vw .2777777778vw 0 #e81fa1, -.2777777778vw .2777777778vw 0 #e81fa1, -.2777777778vw .2083333333vw 0 #e81fa1, -.2777777778vw .1388888889vw 0 #e81fa1, -.2777777778vw .0694444444vw 0 #e81fa1, -.2777777778vw 0 0 #e81fa1, -.2777777778vw -.0694444444vw 0 #e81fa1, -.2777777778vw -.1388888889vw 0 #e81fa1, -.2777777778vw -.2083333333vw 0 #e81fa1, -.2777777778vw -.2777777778vw 0 #e81fa1, -.3472222222vw -.4166666667vw 0 rgba(255, 234, 0, 0), -.2777777778vw -.4166666667vw 0 rgba(255, 234, 0, 0), -.2083333333vw -.4166666667vw 0 rgba(255, 234, 0, 0), -.1388888889vw -.4166666667vw 0 rgba(255, 234, 0, 0), -.0694444444vw -.4166666667vw 0 rgba(255, 234, 0, 0), 0 -.4166666667vw 0 rgba(255, 234, 0, 0), .0694444444vw -.4166666667vw 0 rgba(255, 234, 0, 0), .1388888889vw -.4166666667vw 0 rgba(255, 234, 0, 0), .2083333333vw -.4166666667vw 0 rgba(255, 234, 0, 0), .2777777778vw -.4166666667vw 0 rgba(255, 234, 0, 0), .3472222222vw -.4166666667vw 0 rgba(255, 234, 0, 0), .4166666667vw -.4166666667vw 0 rgba(255, 234, 0, 0), .4166666667vw -.3472222222vw 0 rgba(255, 234, 0, 0), .4166666667vw -.2777777778vw 0 rgba(255, 234, 0, 0), .4166666667vw -.2083333333vw 0 rgba(255, 234, 0, 0), .4166666667vw -.1388888889vw 0 rgba(255, 234, 0, 0), .4166666667vw -.0694444444vw 0 rgba(255, 234, 0, 0), .4166666667vw 0 0 rgba(255, 234, 0, 0), .0694444444vw .4166666667vw 0 rgba(255, 234, 0, 0), .1388888889vw .4166666667vw 0 rgba(255, 234, 0, 0), .2083333333vw .4166666667vw 0 rgba(255, 234, 0, 0), .2777777778vw .4166666667vw 0 rgba(255, 234, 0, 0), .3472222222vw .4166666667vw 0 rgba(255, 234, 0, 0), .4166666667vw .4166666667vw 0 rgba(255, 234, 0, 0), .3472222222vw .4166666667vw 0 rgba(255, 234, 0, 0), .2777777778vw .4166666667vw 0 rgba(255, 234, 0, 0), .2083333333vw .4166666667vw 0 rgba(255, 234, 0, 0), .1388888889vw .4166666667vw 0 rgba(255, 234, 0, 0), .0694444444vw .4166666667vw 0 rgba(255, 234, 0, 0), 0 .4166666667vw 0 rgba(255, 234, 0, 0), -.0694444444vw .4166666667vw 0 rgba(255, 234, 0, 0), -.1388888889vw .4166666667vw 0 rgba(255, 234, 0, 0), -.2083333333vw .4166666667vw 0 rgba(255, 234, 0, 0), -.2777777778vw .4166666667vw 0 rgba(255, 234, 0, 0), -.3472222222vw .4166666667vw 0 rgba(255, 234, 0, 0), -.4166666667vw .4166666667vw 0 rgba(255, 234, 0, 0), -.4166666667vw .3472222222vw 0 rgba(255, 234, 0, 0), -.4166666667vw .2777777778vw 0 rgba(255, 234, 0, 0), -.4166666667vw .2083333333vw 0 rgba(255, 234, 0, 0), -.4166666667vw .1388888889vw 0 rgba(255, 234, 0, 0), -.4166666667vw .0694444444vw 0 rgba(255, 234, 0, 0), -.4166666667vw 0 0 rgba(255, 234, 0, 0), -.4166666667vw -.0694444444vw 0 rgba(255, 234, 0, 0), -.4166666667vw -.1388888889vw 0 rgba(255, 234, 0, 0), -.4166666667vw -.2083333333vw 0 rgba(255, 234, 0, 0), -.4166666667vw -.2777777778vw 0 rgba(255, 234, 0, 0), -.4166666667vw -.3472222222vw 0 rgba(255, 234, 0, 0), -.4166666667vw -.4166666667vw 0 rgba(255, 234, 0, 0) } to { text-shadow: -.2777777778vw -.2777777778vw 0 #e81fa1, -.2083333333vw -.2777777778vw 0 #e81fa1, -.1388888889vw -.2777777778vw 0 #e81fa1, -.0694444444vw -.2777777778vw 0 #e81fa1, 0 -.2777777778vw 0 #e81fa1, .0694444444vw -.2777777778vw 0 #e81fa1, .1388888889vw -.2777777778vw 0 #e81fa1, .2083333333vw -.2777777778vw 0 #e81fa1, .2777777778vw -.2777777778vw 0 #e81fa1, .2777777778vw -.2083333333vw 0 #e81fa1, .2777777778vw -.1388888889vw 0 #e81fa1, .2777777778vw -.0694444444vw 0 #e81fa1, .2777777778vw 0 0 #e81fa1, .2777777778vw .0694444444vw 0 #e81fa1, .2777777778vw .1388888889vw 0 #e81fa1, .2777777778vw .2083333333vw 0 #e81fa1, .2777777778vw .2777777778vw 0 #e81fa1, .2083333333vw .2777777778vw 0 #e81fa1, .1388888889vw .2777777778vw 0 #e81fa1, .0694444444vw .2777777778vw 0 #e81fa1, 0 .2777777778vw 0 #e81fa1, -.0694444444vw .2777777778vw 0 #e81fa1, -.1388888889vw .2777777778vw 0 #e81fa1, -.2083333333vw .2777777778vw 0 #e81fa1, -.2777777778vw .2777777778vw 0 #e81fa1, -.2777777778vw .2083333333vw 0 #e81fa1, -.2777777778vw .1388888889vw 0 #e81fa1, -.2777777778vw .0694444444vw 0 #e81fa1, -.2777777778vw 0 0 #e81fa1, -.2777777778vw -.0694444444vw 0 #e81fa1, -.2777777778vw -.1388888889vw 0 #e81fa1, -.2777777778vw -.2083333333vw 0 #e81fa1, -.2777777778vw -.2777777778vw 0 #e81fa1, -.3472222222vw -.4166666667vw .4166666667vw rgba(255, 234, 0, .25), -.2777777778vw -.4166666667vw .4166666667vw rgba(255, 234, 0, .25), -.2083333333vw -.4166666667vw .4166666667vw rgba(255, 234, 0, .25), -.1388888889vw -.4166666667vw .4166666667vw rgba(255, 234, 0, .25), -.0694444444vw -.4166666667vw .4166666667vw rgba(255, 234, 0, .25), 0 -.4166666667vw .4166666667vw rgba(255, 234, 0, .25), .0694444444vw -.4166666667vw .4166666667vw rgba(255, 234, 0, .25), .1388888889vw -.4166666667vw .4166666667vw rgba(255, 234, 0, .25), .2083333333vw -.4166666667vw .4166666667vw rgba(255, 234, 0, .25), .2777777778vw -.4166666667vw .4166666667vw rgba(255, 234, 0, .25), .3472222222vw -.4166666667vw .4166666667vw rgba(255, 234, 0, .25), .4166666667vw -.4166666667vw .4166666667vw rgba(255, 234, 0, .25), .4166666667vw -.3472222222vw .4166666667vw rgba(255, 234, 0, .25), .4166666667vw -.2777777778vw .4166666667vw rgba(255, 234, 0, .25), .4166666667vw -.2083333333vw .4166666667vw rgba(255, 234, 0, .25), .4166666667vw -.1388888889vw .4166666667vw rgba(255, 234, 0, .25), .4166666667vw -.0694444444vw .4166666667vw rgba(255, 234, 0, .25), .4166666667vw 0 .4166666667vw rgba(255, 234, 0, .25), .0694444444vw .4166666667vw .4166666667vw rgba(255, 234, 0, .25), .1388888889vw .4166666667vw .4166666667vw rgba(255, 234, 0, .25), .2083333333vw .4166666667vw .4166666667vw rgba(255, 234, 0, .25), .2777777778vw .4166666667vw .4166666667vw rgba(255, 234, 0, .25), .3472222222vw .4166666667vw .4166666667vw rgba(255, 234, 0, .25), .4166666667vw .4166666667vw .4166666667vw rgba(255, 234, 0, .25), .3472222222vw .4166666667vw .4166666667vw rgba(255, 234, 0, .25), .2777777778vw .4166666667vw .4166666667vw rgba(255, 234, 0, .25), .2083333333vw .4166666667vw .4166666667vw rgba(255, 234, 0, .25), .1388888889vw .4166666667vw .4166666667vw rgba(255, 234, 0, .25), .0694444444vw .4166666667vw .4166666667vw rgba(255, 234, 0, .25), 0 .4166666667vw .4166666667vw rgba(255, 234, 0, .25), -.0694444444vw .4166666667vw .4166666667vw rgba(255, 234, 0, .25), -.1388888889vw .4166666667vw .4166666667vw rgba(255, 234, 0, .25), -.2083333333vw .4166666667vw .4166666667vw rgba(255, 234, 0, .25), -.2777777778vw .4166666667vw .4166666667vw rgba(255, 234, 0, .25), -.3472222222vw .4166666667vw .4166666667vw rgba(255, 234, 0, .25), -.4166666667vw .4166666667vw .4166666667vw rgba(255, 234, 0, .25), -.4166666667vw .3472222222vw .4166666667vw rgba(255, 234, 0, .25), -.4166666667vw .2777777778vw .4166666667vw rgba(255, 234, 0, .25), -.4166666667vw .2083333333vw .4166666667vw rgba(255, 234, 0, .25), -.4166666667vw .1388888889vw .4166666667vw rgba(255, 234, 0, .25), -.4166666667vw .0694444444vw .4166666667vw rgba(255, 234, 0, .25), -.4166666667vw 0 .4166666667vw rgba(255, 234, 0, .25), -.4166666667vw -.0694444444vw .4166666667vw rgba(255, 234, 0, .25), -.4166666667vw -.1388888889vw .4166666667vw rgba(255, 234, 0, .25), -.4166666667vw -.2083333333vw .4166666667vw rgba(255, 234, 0, .25), -.4166666667vw -.2777777778vw .4166666667vw rgba(255, 234, 0, .25), -.4166666667vw -.3472222222vw .4166666667vw rgba(255, 234, 0, .25), -.4166666667vw -.4166666667vw .4166666667vw rgba(255, 234, 0, .25) } } @keyframes roulettePrizeNumberText-pigSize { 0% { text-shadow: -3px -4px 0 #e81fa1, -2px -4px 0 #e81fa1, -1px -4px 0 #e81fa1, 0 -4px 0 #e81fa1, 1px -4px 0 #e81fa1, 2px -4px 0 #e81fa1, 3px -4px 0 #e81fa1, 4px -4px 0 #e81fa1, 4px -3px 0 #e81fa1, 4px -2px 0 #e81fa1, 4px -1px 0 #e81fa1, 4px 0 0 #e81fa1, 4px 1px 0 #e81fa1, 4px 2px 0 #e81fa1, 4px 3px 0 #e81fa1, 4px 4px 0 #e81fa1, 3px 4px 0 #e81fa1, 2px 4px 0 #e81fa1, 1px 4px 0 #e81fa1, 0 4px 0 #e81fa1, -1px 4px 0 #e81fa1, -2px 4px 0 #e81fa1, -3px 4px 0 #e81fa1, -4px 4px 0 #e81fa1, -4px 3px 0 #e81fa1, -4px 2px 0 #e81fa1, -4px 1px 0 #e81fa1, -4px 0 0 #e81fa1, -4px -1px 0 #e81fa1, -4px -2px 0 #e81fa1, -4px -3px 0 #e81fa1, -4px -4px 0 #e81fa1, -5px -6px 0 rgba(255, 234, 0, 0), -4px -6px 0 rgba(255, 234, 0, 0), -3px -6px 0 rgba(255, 234, 0, 0), -2px -6px 0 rgba(255, 234, 0, 0), -1px -6px 0 rgba(255, 234, 0, 0), 0 -6px 0 rgba(255, 234, 0, 0), 1px -6px 0 rgba(255, 234, 0, 0), 2px -6px 0 rgba(255, 234, 0, 0), 3px -6px 0 rgba(255, 234, 0, 0), 4px -6px 0 rgba(255, 234, 0, 0), 5px -6px 0 rgba(255, 234, 0, 0), 6px -6px 0 rgba(255, 234, 0, 0), 6px -5px 0 rgba(255, 234, 0, 0), 6px -4px 0 rgba(255, 234, 0, 0), 6px -3px 0 rgba(255, 234, 0, 0), 6px -2px 0 rgba(255, 234, 0, 0), 6px -1px 0 rgba(255, 234, 0, 0), 6px 0 0 rgba(255, 234, 0, 0), 1px 6px 0 rgba(255, 234, 0, 0), 2px 6px 0 rgba(255, 234, 0, 0), 3px 6px 0 rgba(255, 234, 0, 0), 4px 6px 0 rgba(255, 234, 0, 0), 5px 6px 0 rgba(255, 234, 0, 0), 6px 6px 0 rgba(255, 234, 0, 0), 5px 6px 0 rgba(255, 234, 0, 0), 4px 6px 0 rgba(255, 234, 0, 0), 3px 6px 0 rgba(255, 234, 0, 0), 2px 6px 0 rgba(255, 234, 0, 0), 1px 6px 0 rgba(255, 234, 0, 0), 0 6px 0 rgba(255, 234, 0, 0), -1px 6px 0 rgba(255, 234, 0, 0), -2px 6px 0 rgba(255, 234, 0, 0), -3px 6px 0 rgba(255, 234, 0, 0), -4px 6px 0 rgba(255, 234, 0, 0), -5px 6px 0 rgba(255, 234, 0, 0), -6px 6px 0 rgba(255, 234, 0, 0), -6px 5px 0 rgba(255, 234, 0, 0), -6px 4px 0 rgba(255, 234, 0, 0), -6px 3px 0 rgba(255, 234, 0, 0), -6px 2px 0 rgba(255, 234, 0, 0), -6px 1px 0 rgba(255, 234, 0, 0), -6px 0 0 rgba(255, 234, 0, 0), -6px -1px 0 rgba(255, 234, 0, 0), -6px -2px 0 rgba(255, 234, 0, 0), -6px -3px 0 rgba(255, 234, 0, 0), -6px -4px 0 rgba(255, 234, 0, 0), -6px -5px 0 rgba(255, 234, 0, 0), -6px -6px 0 rgba(255, 234, 0, 0) } to { text-shadow: -4px -4px 0 #e81fa1, -3px -4px 0 #e81fa1, -2px -4px 0 #e81fa1, -1px -4px 0 #e81fa1, 0 -4px 0 #e81fa1, 1px -4px 0 #e81fa1, 2px -4px 0 #e81fa1, 3px -4px 0 #e81fa1, 4px -4px 0 #e81fa1, 4px -3px 0 #e81fa1, 4px -2px 0 #e81fa1, 4px -1px 0 #e81fa1, 4px 0 0 #e81fa1, 4px 1px 0 #e81fa1, 4px 2px 0 #e81fa1, 4px 3px 0 #e81fa1, 4px 4px 0 #e81fa1, 3px 4px 0 #e81fa1, 2px 4px 0 #e81fa1, 1px 4px 0 #e81fa1, 0 4px 0 #e81fa1, -1px 4px 0 #e81fa1, -2px 4px 0 #e81fa1, -3px 4px 0 #e81fa1, -4px 4px 0 #e81fa1, -4px 3px 0 #e81fa1, -4px 2px 0 #e81fa1, -4px 1px 0 #e81fa1, -4px 0 0 #e81fa1, -4px -1px 0 #e81fa1, -4px -2px 0 #e81fa1, -4px -3px 0 #e81fa1, -4px -4px 0 #e81fa1, -5px -6px 6px rgba(255, 234, 0, .25), -4px -6px 6px rgba(255, 234, 0, .25), -3px -6px 6px rgba(255, 234, 0, .25), -2px -6px 6px rgba(255, 234, 0, .25), -1px -6px 6px rgba(255, 234, 0, .25), 0 -6px 6px rgba(255, 234, 0, .25), 1px -6px 6px rgba(255, 234, 0, .25), 2px -6px 6px rgba(255, 234, 0, .25), 3px -6px 6px rgba(255, 234, 0, .25), 4px -6px 6px rgba(255, 234, 0, .25), 5px -6px 6px rgba(255, 234, 0, .25), 6px -6px 6px rgba(255, 234, 0, .25), 6px -5px 6px rgba(255, 234, 0, .25), 6px -4px 6px rgba(255, 234, 0, .25), 6px -3px 6px rgba(255, 234, 0, .25), 6px -2px 6px rgba(255, 234, 0, .25), 6px -1px 6px rgba(255, 234, 0, .25), 6px 0 6px rgba(255, 234, 0, .25), 1px 6px 6px rgba(255, 234, 0, .25), 2px 6px 6px rgba(255, 234, 0, .25), 3px 6px 6px rgba(255, 234, 0, .25), 4px 6px 6px rgba(255, 234, 0, .25), 5px 6px 6px rgba(255, 234, 0, .25), 6px 6px 6px rgba(255, 234, 0, .25), 5px 6px 6px rgba(255, 234, 0, .25), 4px 6px 6px rgba(255, 234, 0, .25), 3px 6px 6px rgba(255, 234, 0, .25), 2px 6px 6px rgba(255, 234, 0, .25), 1px 6px 6px rgba(255, 234, 0, .25), 0 6px 6px rgba(255, 234, 0, .25), -1px 6px 6px rgba(255, 234, 0, .25), -2px 6px 6px rgba(255, 234, 0, .25), -3px 6px 6px rgba(255, 234, 0, .25), -4px 6px 6px rgba(255, 234, 0, .25), -5px 6px 6px rgba(255, 234, 0, .25), -6px 6px 6px rgba(255, 234, 0, .25), -6px 5px 6px rgba(255, 234, 0, .25), -6px 4px 6px rgba(255, 234, 0, .25), -6px 3px 6px rgba(255, 234, 0, .25), -6px 2px 6px rgba(255, 234, 0, .25), -6px 1px 6px rgba(255, 234, 0, .25), -6px 0 6px rgba(255, 234, 0, .25), -6px -1px 6px rgba(255, 234, 0, .25), -6px -2px 6px rgba(255, 234, 0, .25), -6px -3px 6px rgba(255, 234, 0, .25), -6px -4px 6px rgba(255, 234, 0, .25), -6px -5px 6px rgba(255, 234, 0, .25), -6px -6px 6px rgba(255, 234, 0, .25) } } @keyframes rouletteMainBoxPart { 0% { transform: rotate(0deg) } 50% { transform: rotate(180deg) } to { transform: rotate(1turn) } } @keyframes rouletteMainBoxBtnShadow { 0% { box-shadow: 0 0 16px rgba(0, 0, 0, .3), 0 2px 3px 1px rgba(0, 0, 0, .35), inset -1px 0 1px rgba(0, 0, 0, .5), inset 1px 1px 1px #fff } to { box-shadow: 0 0 48px rgba(0, 0, 0, .9), 0 2px 3px 1px rgba(0, 0, 0, .35), inset -1px 0 1px rgba(0, 0, 0, .5), inset 1px 1px 1px #fff } } @keyframes rouletteMainBoxBtnLight { 0% { transform: translate3d(-60%, 0, 0) rotate(-45deg) } to { transform: translate3d(60%, 0, 0) rotate(-45deg) } } @keyframes rouletteBoxCoin { 0% { opacity: .5; transform: scale3d(.6, .6, 1) } 25% { opacity: .8; transform: scale3d(.8, .8, 1) } 50% { opacity: 1; transform: scaleX(1) } 75% { opacity: .6; transform: scale3d(1.15, 1.15, 1) } to { opacity: .1; transform: scale3d(1.3, 1.3, 1) } } @keyframes rouletteMain_P6789_N0 { 0% { transform: rotate(-2turn) } to { transform: rotate(0deg) } } @keyframes rouletteMain_P6_N1 { 0% { transform: rotate(-780deg) } to { transform: rotate(-60deg) } } @keyframes rouletteMain_P6_N2_P9_N3 { 0% { transform: rotate(-840deg) } to { transform: rotate(-120deg) } } @keyframes rouletteMain_P6_N3_P8_N4 { 0% { transform: rotate(-900deg) } to { transform: rotate(-180deg) } } @keyframes rouletteMain_P6_N4_P9_N6 { 0% { transform: rotate(-960deg) } to { transform: rotate(-240deg) } } @keyframes rouletteMain_P6_N5 { 0% { transform: rotate(-1020deg) } to { transform: rotate(-300deg) } } @keyframes rouletteMain_P7_N1 { 0% { transform: rotate(-771.4285714286deg) } to { transform: rotate(-51.4285714286deg) } } @keyframes rouletteMain_P7_N2 { 0% { transform: rotate(-822.8571428571deg) } to { transform: rotate(-102.8571428571deg) } } @keyframes rouletteMain_P7_N3 { 0% { transform: rotate(-874.2857142857deg) } to { transform: rotate(-154.2857142857deg) } } @keyframes rouletteMain_P7_N4 { 0% { transform: rotate(-925.7142857143deg) } to { transform: rotate(-205.7142857143deg) } } @keyframes rouletteMain_P7_N5 { 0% { transform: rotate(-977.1428571429deg) } to { transform: rotate(-257.1428571429deg) } } @keyframes rouletteMain_P7_N6 { 0% { transform: rotate(-1028.5714285714deg) } to { transform: rotate(-308.5714285714deg) } } @keyframes rouletteMain_P8_N1 { 0% { transform: rotate(-765deg) } to { transform: rotate(-45deg) } } @keyframes rouletteMain_P8_N2 { 0% { transform: rotate(-810deg) } to { transform: rotate(-90deg) } } @keyframes rouletteMain_P8_N3 { 0% { transform: rotate(-855deg) } to { transform: rotate(-135deg) } } @keyframes rouletteMain_P8_N5 { 0% { transform: rotate(-945deg) } to { transform: rotate(-225deg) } } @keyframes rouletteMain_P8_N6 { 0% { transform: rotate(-990deg) } to { transform: rotate(-270deg) } } @keyframes rouletteMain_P8_N7 { 0% { transform: rotate(-1035deg) } to { transform: rotate(-315deg) } } @keyframes rouletteMain_P9_N1 { 0% { transform: rotate(-760deg) } to { transform: rotate(-40deg) } } @keyframes rouletteMain_P9_N2 { 0% { transform: rotate(-800deg) } to { transform: rotate(-80deg) } } @keyframes rouletteMain_P9_N4 { 0% { transform: rotate(-880deg) } to { transform: rotate(-160deg) } } @keyframes rouletteMain_P9_N5 { 0% { transform: rotate(-920deg) } to { transform: rotate(-200deg) } } @keyframes rouletteMain_P9_N7 { 0% { transform: rotate(-1000deg) } to { transform: rotate(-280deg) } } @keyframes rouletteMain_P9_N8 { 0% { transform: rotate(-1040deg) } to { transform: rotate(-320deg) } } @font-face { font-family: rouletteStar; src: url(https://csi.20icipp.com/img/static/roulette/fonts/icomoon.eot?p6x2l0=); src: url(https://csi.20icipp.com/img/static/roulette/fonts/icomoon.ttf?p6x2l0=) format("truetype") } .rouletteMain, .rouletteMain:after, .rouletteMain:before, .rouletteMain_awards_item.special .rouletteMain_awards_medals, .rouletteMain_awards_item>div, .rouletteMain_box_wrap:before, .rouletteMain_wrap:after, .rouletteMain_wrap:before { background-size: 100% 100% } .rouletteMain, .rouletteMain_awards_item, .rouletteMain_box, .rouletteMain_winner { height: 0 } .rouletteMain:after, .rouletteMain:before, .rouletteMain_awards_item>div, .rouletteMain_box_coinWrap, .rouletteMain_box_numberTimes>div, .rouletteMain_box_numberTicket>div, .rouletteMain_box_wrap, .rouletteMain_box_wrap:after, .rouletteMain_box_wrap:before, .rouletteMain_winner_wrap, .rouletteMain_wrap { height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .roulette { font-family: Arial, Helvetica, Microsoft YaHei, Microsoft JhengHei, PingFangTC, sans-serif; overflow: hidden; width: 100% } .roulette * { box-sizing: border-box } .rouletteMain { background-image: url(../images/wheel/roulette_main.jpg?v={$version}); margin: 0 auto; max-width: 1440px; padding-bottom: 62.6388888889%; position: relative; width: 100% } .rouletteMain:after, .rouletteMain:before { animation: rouletteDecoShake 25s infinite; content: "" } .rouletteMain:before { animation-direction: alternate; animation-timing-function: linear; background-image: url(../images/wheel/roulette_balloon.png?v={$version}) } .rouletteMain:after { animation-direction: alternate-reverse; background-image: url(../images/wheel/roulette_ball.png?v={$version}) } .rouletteMain_wrap:after, .rouletteMain_wrap:before { background-image: url(../images/wheel/roulette_main.jpg?v={$version}); content: ""; height: 100%; position: absolute; top: 0; transform: rotateY(180deg); width: 100%; z-index: -1 } .rouletteMain_wrap { margin-top: 5%; } .rouletteMain_wrap:before { left: -100% } .rouletteMain_wrap:after { left: 100% } .rouletteMain_head { display: flex; justify-content: center; margin-bottom: 3.4722222222%; padding: 6px 0; position: relative; z-index: 1 } .rouletteMain_item+.rouletteMain_item { margin-left: 36px } .rouletteMain_item>a { color: #fff; display: block; font-size: 20px; line-height: 48px; padding: 0 3px; position: relative; text-decoration: none } .rouletteMain_item>a:after { background-color: #ffdb00; border-radius: 5px; bottom: 0; content: ""; height: 5px; left: 0; position: absolute; transition: width .3s; width: 0 } .rouletteMain_item>a.active:after, .rouletteMain_item>a:hover:after { width: 100% } .rouletteMain_body { display: flex; justify-content: space-evenly; } .rouletteMain_awards, .rouletteMain_winner { flex: 0 0 20.4861111111%; position: relative; z-index: 1 } .rouletteMain_awards { align-self: center; list-style-type: none; margin:0; } .rouletteMain_awards_item { padding-bottom: 21.6949152542%; position: relative; width: 100% } .rouletteMain_awards_item.special>div { animation: rouletteSpecialAward .6s infinite alternate both; border-radius: 30px } .rouletteMain_awards_item.special .rouletteMain_awards_medals { background-image: url(https://csi.20icipp.com/img/static/roulette/rouletteMain_awards_medals_0.png?v={$version}); height: 100%; margin-top: 2.8%; width: 18.91% } .rouletteMain_awards_item:first-of-type .rouletteMain_awards_medals { background-position: 0 0; color: #be5a18 } .rouletteMain_awards_item:nth-of-type(2) .rouletteMain_awards_medals { background-position: 33.3333% 0; color: #6f6f80 } .rouletteMain_awards_item:nth-of-type(3) .rouletteMain_awards_medals { background-position: 66.6666% 0; color: #7c5552 } .rouletteMain_awards_item:first-of-type .rouletteMain_awards_medals:before { content: "1" } .rouletteMain_awards_item:nth-of-type(2) .rouletteMain_awards_medals:before { content: "2" } .rouletteMain_awards_item:nth-of-type(3) .rouletteMain_awards_medals:before { content: "3" } .rouletteMain_awards_item:nth-of-type(4) .rouletteMain_awards_medals:before { content: "4" } .rouletteMain_awards_item:nth-of-type(5) .rouletteMain_awards_medals:before { content: "5" } .rouletteMain_awards_item:nth-of-type(6) .rouletteMain_awards_medals:before { content: "6" } .rouletteMain_awards_item:nth-of-type(7) .rouletteMain_awards_medals:before { content: "7" } .rouletteMain_awards_item:nth-of-type(8) .rouletteMain_awards_medals:before { content: "8" } .rouletteMain_awards_item:nth-of-type(9) .rouletteMain_awards_medals:before { content: "9" } .rouletteMain_awards_item>div { align-items: center; background-image: url(../images/wheel/rouletteMain_awards_item.png?v={$version}); display: flex; justify-content: space-between; padding: 0 3.39% } .rouletteMain_awards_item+.rouletteMain_awards_item { margin-top: 8.6% } .rouletteMain_awards_medals { align-items: center; background-image: url(https://csi.20icipp.com/img/static/roulette/rouletteMain_awards_medals.png?v={$version}); background-position: 100% 0; background-size: 400% 100%; color: #674170; display: flex; font-size: 1.3888888889vw; font-weight: 700; height: 68.75%; justify-content: center; width: 16% } .rouletteMain_awards_prize { align-items: center; display: flex; height: 100%; justify-content: center; position: relative; width: 30% } .rouletteMain_awards_prize>img { display: block; max-height: 90%; max-width: 100% } .rouletteMain_awards_text { color: #fff; font-size: 19px; line-height: 1.2; text-align: left; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); width: 78% } .rouletteMain_box { margin-top:6%; flex: 0 0 41.6666666667%; padding-bottom: 41.6666666667%; position: relative } .rouletteMain_box_wrap { padding: 5.5% } .rouletteMain_box_wrap:after, .rouletteMain_box_wrap:before { content: ""; z-index: 2 } .rouletteMain_box_wrap:before { background-image: url(../images/wheel/roulette_frame.png?v={$version}) } .rouletteMain_box_wrap:after { animation: rouletteNeonLight 1s steps(2) infinite; background-image: url(../images/wheel/roulette_neonLight.png?v={$version}); background-size: 200% 100% } .rouletteMain_box_part { border-radius: 50%; height: 100%; overflow: hidden; position: relative; transform: rotate3d(0, 0, 0, 0deg); background: radial-gradient(#000 0%, #ffffff 20%,#000 68%); transition: filter .4s; width: 100% } .rouletteMain_box_part-6 .rouletteMain_box_part_color:before { transform: rotate(60deg) skew(30deg) } .rouletteMain_box_part-7 .rouletteMain_box_part_color:before { transform: rotate(64.4deg) skew(38.8deg) } .rouletteMain_box_part-7 .rouletteMain_box_part_color:after { transform: rotate(-64.4deg) skew(-38.8deg) } .rouletteMain_box_part-9 .rouletteMain_box_part_color:before { transform: rotate(70deg) skew(50deg) } .rouletteMain_box_part-9 .rouletteMain_box_part_color:after { transform: rotate(-70deg) skew(-50deg) } .rouletteMain_box_part_color { height: 100%; left: 0; position: absolute; top: 0; width: 100% } .rouletteMain_box_part_color:after, .rouletteMain_box_part_color:before { content: ""; height: 100%; position: absolute; top: 0; width: 100% } .rouletteMain_box_part_color:before { left: -50%; transform-origin: 100% 100% } .rouletteMain_box_part_color:after { left: 50%; transform-origin: 0 100% } .rouletteMain_box_part_pic { display: none; max-height: 40%; max-width: 50%; position: relative } .rouletteMain_box_part_award { line-height: 1.2; padding-bottom: 1.25vw; position: relative; text-align: center; width: 70% } .rouletteMain_box_coin { height: 125%; left: -25%; pointer-events: none; position: absolute; top: -12.5%; width: 150%; z-index: 3 } .rouletteMain_box_coinWrap { animation-fill-mode: both; animation-iteration-count: infinite; animation-name: rouletteBoxCoin; animation-timing-function: linear } .rouletteMain_box_coinWrap:first-of-type { animation-delay: -1s; animation-duration: 5s } .rouletteMain_box_coinWrap:nth-of-type(2) { animation-delay: -2s; animation-duration: 7s } .rouletteMain_box_coinWrap:nth-of-type(3) { animation-delay: -1.5s; animation-duration: 6s } .rouletteMain_box_coinWrap:nth-of-type(4) { animation-delay: -.5s; animation-duration: 4s } .rouletteMain_box_coinWrap:nth-of-type(5) { animation-delay: -2.5s; animation-duration: 8s } .rouletteMain_box_coinWrap:nth-of-type(6) { animation-delay: -3s; animation-duration: 9s } .rouletteMain_box_coin_1, .rouletteMain_box_coin_2, .rouletteMain_box_coin_3, .rouletteMain_box_coin_4, .rouletteMain_box_coin_5, .rouletteMain_box_coin_6 { position: absolute } .rouletteMain_box_coin_1 { left: 76%; top: 47%; width: 12.7777777778% } .rouletteMain_box_coin_2 { left: 15%; top: 26%; width: 9.2222222222% } .rouletteMain_box_coin_3 { left: 68%; top: 71%; width: 15.4444444444% } .rouletteMain_box_coin_4 { left: 11%; top: 71%; width: 30.4444444444% } .rouletteMain_box_coin_5 { left: 73%; top: 17%; width: 17.1111111111% } .rouletteMain_box_coin_6 { left: 24%; top: 4%; width: 7.3333333333% } .rouletteMain_box_title { background-size:100% 100%; position:absolute; z-index:0; } .rouletteMain_box_btn, .rouletteMain_box_numberTimes, .rouletteMain_box_numberTicket { background-size: 100% 100%; position: absolute; z-index: 3 } .rouletteMain_box_btn { animation: rouletteMainBoxBtnShadow .5s infinite alternate both; background-image: url(../images/wheel/roulette_btn.png?v={$version}); background-position: 0 0; background-size: 200% 100%; border-radius: 50%; bottom: 0; box-shadow: 0 0 46px rgba(0, 0, 0, .75), 0 2px 3px 1px rgba(0, 0, 0, .35), inset -1px 0 1px rgba(0, 0, 0, .5), inset 1px 1px 1px #fff; cursor: pointer; display: flex; height: 18.3333333333%; left: 0; margin: auto; overflow: hidden; padding-bottom: 1.5%; right: 0; top: 0; width: 18.3333333333% } .rouletteMain_box_btn:after { animation: rouletteMainBoxBtnLight 2s infinite both; background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, .7) 60%, hsla(0, 0%, 100%, .4) 0, hsla(0, 0%, 100%, 0)); content: ""; height: 40%; left: -40%; position: absolute; top: 30%; transform: translate3d(80%, 0, 0) rotate(-45deg); width: 180% } .rouletteMain_box_logo { margin: auto; max-width: 78%; pointer-events: none } .rouletteMain_box_numberTimes { animation: rouletteNumberTimes .6s .6s infinite alternate both; background-image: url(../images/wheel/roulette_numberTimes.png?v={$version}); border-radius: 9%/18.75%; box-shadow: 0 0 16px 2px rgba(252, 255, 0, .5), inset 0 0 1px rgba(252, 255, 0, .5); height: 0; padding-bottom: 12%; right: 0; top: 0; width: 25% } .rouletteMain_box_title { background-image:url(../images/wheel/roulette_title.png?v={$version}); height: 36%; right: 7%; top: -28%; width: 84%; display: flex; justify-content: center; align-items: end; } .rouletteMain_box_numberTicket { animation: rouletteNumberTimes .6s .6s infinite alternate both; background-image: url(../images/wheel/roulette_numberTimes.png?v={$version}); border-radius: 9%/18.75%; box-shadow: 0 0 16px 2px rgba(252, 255, 0, .5), inset 0 0 1px rgba(252, 255, 0, .5); height: 0; padding-bottom: 12%; right: 29%; bottom: -3%; width: 41%; } .rouletteMain_box_numberTimes .point_rate, .rouletteMain_box_numberTicket .point_rate { align-items: center; background-color: rgba(95, 47, 245, .9); border-radius: 100px; box-shadow: inset 0 0 0 1px #d3c5fa, inset 0 0 10px #b670f7, 0 2px 6px rgba(0, 0, 0, .8); color: #fff; display: flex; font-size: 11px; font-style: normal; font-weight: 400; height: 25px; left: auto; padding: 0 15px; position: absolute; right: -10px; text-shadow: 0 0 0 #fff; text-shadow: 0 1px 1px #27095c; transform: skew(0deg) translateY(-8px); width: auto } .rouletteMain_box_numberTimes .point_rate b, .rouletteMain_box_numberTicket .point_rate b { color: #ffefbd; font-size: 16px; font-weight: 700; padding-right: 3px } .rouletteMain_box_numberTimes>div, .rouletteMain_box_numberTicket>div { align-content: center; align-items: center; color: #ff4100; display: flex; flex-wrap: wrap; line-height:19px; font-weight: 700; justify-content: center; padding-bottom: 1%; text-align: center; text-shadow: 2px 2px 0 #f3cb00; transform: skew(-6deg) } .rouletteMain_box_numberTimes>div>div, .rouletteMain_box_numberTicket>div>div { width: 100% } .rouletteMain_box_numberTimes span:first-of-type, .rouletteMain_box_numberTicket span:first-of-type { font-size: 1.8vw; color:#ff4100; } .rouletteMain_box_numberTimes span:nth-of-type(2), .rouletteMain_box_numberTicket span:nth-of-type(2) { font-size: 13px; letter-spacing: -1px; color:#ff4100; margin: 6% 0 0 1% } div.circTxt { /*allows for centering*/ display: inline-block; /*adjust as needed*/ margin-bottom: 52px; letter-spacing:2px; color: whitesmoke; text-shadow: 2px 2px 0 #0d0d40; font-size:18px; font-weight:bold; text-transform:uppercase; font-style: italic; font-family: 'Aero'; } .circTxt p { animation: rouletteTitles .6s .6s infinite alternate both; text-shadow: 6px 2px 9px #d9a923; color:#d90c10; } .rouletteMain_box_title>div{ right: 3%; position: relative; color: #FFF; display: flex; flex-wrap: wrap; font-weight: 700; text-align: center; text-shadow: 2px 2px 0 #0d0d40; transform: skew(-6deg) } .rouletteMain_box_title>div>div{ width: 100%; margin-bottom:-13px; } .rouletteMain_box_title span:first-of-type{ font-size: 1.3vw; color:#fff; } .rouletteMain_box_title span:nth-of-type(2){ font-size: 1.2vw; letter-spacing: -1px; color:#fff; margin: 6% 0 0 1% } .rouletteMain_winner_title { font-size: 15px; color: #fff; background: #884add; font-weight:bold; text-transform: uppercase; border-radius: 14px 14px 0 0px; } .rouletteMain_winner { background-image: url(../images/wheel/rouletteMain_winnerList.png?v={$version}); background-size: 100% 100%; padding-bottom: 46.6666666667% } .rouletteMain_winner_wrap { display: flex; flex-direction: column; padding: 5.0847457627%; } .winner_record_list .slick-list, .wallet_record_list .slick-list{ height:600px !important; } .wallet_record_list, .winner_record_list { opacity: 0; visibility: hidden; transition: opacity 1s ease; -webkit-transition: opacity 1s ease; } .wallet_record_list.slick-initialized, .winner_record_list.slick-initialized { visibility: visible; opacity: 1; } .left-column { width:50%; line-height: 22px; } .right-column { width:50%; line-height: 22px; text-align:right; } .rouletteMain_winner_date { color:#fff; font-size: 12px; white-space: nowrap } .rouletteMain_winner_wrap .nav-pills .nav-link.active, .nav-pills .show>.nav-link{ background-color:#ff8e00; } .rouletteMain_winner_wrap a:hover{ color:#fff; } .rouletteMain_winner_wrap a{ color:#ff8e00; } .rouletteMain_winner_head { background-color: rgba(255, 255, 255, .15); border-radius: 20px; display: flex; margin-bottom: 5.6603773585%; position: relative } .rouletteMain_winner_head_item { color: #c98dff; cursor: pointer; flex: 1 1 0; font-size: 1.25vw; line-height: 2.3611111111vw; position: relative; text-align: center; transition: color .4s, text-shadow .4s; z-index: 1 } .rouletteMain_winner_head_cursor { background-image: url(https://csi.20icipp.com/img/static/roulette/rouletteMain_winner_btn.png?v={$version}); background-size: 100% 100%; height: 0; margin: -2px 0 0 -4px; padding-bottom: 14.3396226415%; position: absolute; top: 0; transition: left .4s; width: 52.8301886792% } .rouletteMain_winner_head.winnerList>div:first-of-type { color: #fff; text-shadow: 0 1px 1px #5a29a7 } .rouletteMain_winner_head.winnerList+.rouletteMain_winner_slider>ul, .rouletteMain_winner_head.winnerList>.rouletteMain_winner_head_cursor { left: 0 } .rouletteMain_winner_head.winnerRecord>div:nth-of-type(2) { color: #fff; text-shadow: 0 1px 1px #5a29a7 } .rouletteMain_winner_head.winnerRecord>.rouletteMain_winner_head_cursor { left: 50% } .rouletteMain_winner_head.winnerRecord+.rouletteMain_winner_slider>ul:first-of-type { left: 100% } .rouletteMain_winner_head.winnerRecord+.rouletteMain_winner_slider>ul:nth-of-type(2) { left: -100% } .rouletteMain_winner_slider { display: flex; flex: 1 1 0; overflow: hidden } .rouletteMain_winner_list { flex: 0 0 100%; overflow-y: auto; position: relative; transition: left .4s } .rouletteMain_winner_item { color: #fff; display: flex; font-size: 16px; color:#fff; justify-content: space-between; line-height: 38px; padding: 2.2% 3.5%; border-bottom: 1px solid #eeeeee14; } } .rouletteMain_winner_prize { color: #ffdb00; text-align: center; width: 46% } .rouletteRule { /*background-image: linear-gradient(180deg, #f35800, #e67c00);*/ background: #f70203; } .rouletteRule_wrap { background-image:linear-gradient(95deg,#f0b03f,#eb6b3a); border-radius: 20px; box-shadow: inset 0 4px 7px rgb(255 255 255 / 35%), inset 0 -4px 7px rgb(0 0 0 / 25%), 0 0 45px rgb(177 65 65 / 70%); color: #fff; margin: 0 auto; max-width: 1000px; min-height: 350px; padding: 50px 45px; position: relative } .rouletteRule_title { background-image: url(../images/wheel/roulette_rule_title.png?v={$version}); font-size: 24px; height: 75px; color:#fff; left: 50%; line-height: 62px; position: absolute; text-align: center; text-shadow: 0 -3px 0 rgba(0, 0, 0, .5); top: 3%; transform: translate3d(-50%, -74%, 0); width: 366px } .rouletteRule_wrap span { font-size: 16px; color:#fff; line-height: 24px } .rouletteRule_text+.rouletteRule_text { margin-top: 24px } .rouletteRule_text a { color: inherit } .rouletteMain_box_btn.disabled { background-position: 100% 0; pointer-events: none } .rouletteMain_box_btn.disabled:after { animation-name: none } .rouletteMain_box_btn.disabled .rouletteMain_box_logo { -webkit-filter: grayscale(1); filter: grayscale(1) } .rouletteMain_box_wrap-rotate>.rouletteMain_box_part { animation-iteration-count: infinite; animation-name: rouletteMainBoxPart; animation-timing-function: linear } .rouletteMain_box_wrap-rotate>.rouletteMain_box_part-9 { animation-duration: .3s } .rouletteMain_box_wrap-rotate>.rouletteMain_box_part-8 { animation-duration: .275s } .rouletteMain_box_wrap-rotate>.rouletteMain_box_part-7 { animation-duration: .25s } .rouletteMain_box_wrap-rotate>.rouletteMain_box_part-6 { animation-duration: .225s } .rouletteMain_box_wrap-rotate .rouletteMain_box_btn { background-position: 100% 0; pointer-events: none } .rouletteMain_box_wrap-rotate .rouletteMain_box_btn:after { animation-name: none } .rouletteMain_box_wrap-rotate .rouletteMain_box_logo { -webkit-filter: grayscale(1); filter: grayscale(1) } .roulette .roulette-period { color: #ffefbd; font-size: 21px; bottom:3%; position: absolute; text-shadow: 0 1px 5px rgba(0, 0, 0, .8) } .roulette .unavailable { align-content: center; align-items: center; color: #fff; display: flex; flex-wrap: wrap; height: 100%; justify-content: center; left: 0; position: absolute; text-shadow: 0 2px 5px #000; top: 0; width: 100%; z-index: 1000 } .roulette .unavailable h2 { color: #ffefbd; font-size: 29px; margin-top: 10px; text-align: center; width: 100% } .roulette .unavailable i { font-size: 80px } .roulette .unavailable+div { filter: grayscale(.7) blur(2px) brightness(.3) }