.spin-container{color:#eee;display:flex;align-items:center;justify-content:center;flex-direction:column}.spin-container .level{display:flex;margin-bottom:4.2rem}.spin-container .step{position:relative;display:flex;padding-left:3rem;min-width:10em;height:11em;line-height:1.56;align-items:start;font-weight:300}.spin-container .step .number{position:absolute;font-size:10em;margin:0;top:0;left:0;font-weight:bold;opacity:.098;line-height:.6}.spin-container .step-1{max-width:15em;margin-right:3rem;margin-top:1rem}.spin-container .step-2{max-width:15em;margin-left:3rem;margin-top:1rem}.spin-container .step-3{max-width:14em}@media screen and (max-width:767px){.spin-container .level{display:flex;margin-bottom:0;flex-direction:column;width:100%}.spin-container .step{position:relative;width:100% !important;max-width:100% !important;margin:0 0 1rem 0 !important;margin-bottom:1.25rem;align-items:center;background-color:rgba(0,0,0,.2);padding:1rem 1rem 1rem 3rem}.spin-container .step::before{content:"";transform:rotate(180deg);position:absolute;display:block;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iLTEuNTIgMCAyMCAyMCIgb3ZlcmZsb3c9InZpc2libGUiPjxwYXRoIGZpbGw9IiNmZmQ5MmYiIGQ9Ik03LjQ4IDMuODNMMS40IDkuOSAwIDguNDggOC40OCAwbDguNDggOC40OC0xLjQgMS40Mi02LjA4LTYuMDdWMjBoLTJWMy44M3oiLz48L3N2Zz4=);height:1.25em;width:1.25em;border-radius:4rem;background-color:#222;background-position:center top;background-repeat:no-repeat;background-size:contain;bottom:-1.1rem;left:50%;margin-left:-.5rem;box-shadow:0 0 0 1em #222;z-index:1}.spin-container .step .number{top:1.7rem}.spin-cluster{display:none !important}}.spin-cluster{position:relative;width:15em;height:15em}.spin-cluster .circle{position:absolute;width:15em;height:15em;border-radius:50em;border:2px #eee dashed;animation-name:spin-flow;animation-iteration-count:infinite;animation-timing-function:linear}.spin-cluster .circle::after,.spin-cluster .circle::before{content:"";background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIyMyIgdmlld0JveD0iMS4yIC0wLjMxIDE0IDIzIiBvdmVyZmxvdz0idmlzaWJsZSI+PHBhdGggZmlsbD0iI2Y1ZjVmNSIgZD0iTTkuMzYgMTAuOTdMLjI2IDEuNUMtLjA4IDEuMTctLjA4LjYuMjYuMjZBLjg3Ljg3IDAgMCAxIDEuNDkuMjVsMTAgMTAuMWMuMzQuMzQuMzQuOSAwIDEuMjVsLTEwIDEwLjA4YS44OC44OCAwIDAgMS0xLjIzLjAxYy0uMzUtLjM2LS4zNS0uOS0uMDEtMS4yNmw5LjEtOS40NXoiLz48L3N2Zz4=");background-size:contain;background-position:0 center;background-repeat:no-repeat;width:1.25em;height:1.3em;position:absolute;left:50%;margin-left:-.5em;background-color:#222}.spin-cluster .circle::after{top:-.7em}.spin-cluster .circle::before{bottom:-.7em;transform:rotate(180deg)}.spin-cluster .knobs{position:absolute;margin:0;padding:0;z-index:1;width:15em;height:15em}.spin-cluster .knobs li{display:flex;position:absolute;list-style:none;height:1.8em;width:1.8em;border-radius:5em;background-color:#ffd92f;justify-content:center;align-items:center;box-shadow:0 0 .5em .25em #222;margin:0;padding:0}.spin-cluster .knobs li::after{content:" ";display:block;background-color:#fff;border-radius:3em;height:.6em;width:.6em}.spin-cluster .knobs li::before{content:"";position:absolute;display:block;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iLTEuNTIgMCAyMCAyMCIgb3ZlcmZsb3c9InZpc2libGUiPjxwYXRoIGZpbGw9IiNmZmQ5MmYiIGQ9Ik03LjQ4IDMuODNMMS40IDkuOSAwIDguNDggOC40OCAwbDguNDggOC40OC0xLjQgMS40Mi02LjA4LTYuMDdWMjBoLTJWMy44M3oiLz48L3N2Zz4=);height:1.25em;width:1em;background-position:center top;background-repeat:no-repeat;background-size:contain}.spin-cluster .knobs li:nth-child(1){right:-.8em;top:32%}.spin-cluster .knobs li:nth-child(1)::before{transform:rotate(90deg);left:2.5em}.spin-cluster .knobs li:nth-child(2){left:-.75em;top:32%}.spin-cluster .knobs li:nth-child(2)::before{transform:rotate(270deg);right:2.5em}.spin-cluster .knobs li:nth-child(3){bottom:-.9em;margin-left:-1em;left:50%}.spin-cluster .knobs li:nth-child(3)::before{transform:rotate(180deg);top:2.5em}@-moz-keyframes spin-flow{from{-moz-transform:rotate(0)}to{-moz-transform:rotate(360deg)}}@-webkit-keyframes spin-flow{from{-webkit-transform:rotate(0)}to{-webkit-transform:rotate(360deg)}}@keyframes spin-flow{from{transform:rotate(0)}to{transform:rotate(360deg)}}