* {box-sizing:border-box;}
body {margin:0; min-height:100vh; text-align:center; font-family:'Roboto', sans-serif; color:#fff; display:-webkit-flex; display:flex;}
.hidden {display:none !important;}
.btn, .noselect {-webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; -webkit-tap-highlight-color: transparent;}

.btn {background:#B00400; color:#fff; font-size:20px; padding:13px; display:inline-block; border-radius:40px; margin:15px 0; cursor:pointer; font-weight:700; line-height:24px; border:0; min-width:300px; position:relative; overflow:hidden;}
.btn:hover {background:#9e0603;}
.btn:after {content:''; position:absolute; opacity:.2; width:0; height:100%; left:50%; border-radius:50px; background:#fff; top:0; -moz-transition:opacity .25s ease-in; -ms-transition:opacity .25s ease-in; -o-transition:opacity .25s ease-in; -webkit-transition:opacity .25s ease-in; transition:opacity .25s ease-in;}
.btn.clicked:after {width:100%; left:0; -moz-transition:.25s ease-in; -ms-transition:.25s ease-in; -o-transition:.25s ease-in; -webkit-transition:.25s ease-in; transition:.25s ease-in;}


#page-content {position:relative; margin:auto; width:100%;}
.img-fluid {max-width:100%; height:auto;}

#page-header {padding:24px 24px 0;}
#company-logo {max-width: 160px;}
#game-logo {margin: 20px 0px}


/* music-btns */
#music-btns {position:fixed; right:10px; top:0; z-index:10; padding:5px 20px; border-radius:40px; cursor:pointer; background:#B00400; min-width:auto;}
#music-btns img {max-width:30px;}
/* #music-btns .play-btn:after {content:''; position:absolute; border:8px solid transparent; border-left:12px solid #fff; left:14px; top:12px;}
#music-btns .pause-btn:after {content:''; position:absolute; border:8px solid #fff; border-width:0 4px; left:14px; top:13px; height:14px; width:4px;} */


/* screens */
#game-screens {position:relative; overflow:hidden; width:100%;}
#game-screens .screen.prev-screens, #game-screens .screen.next-screens {position:absolute; opacity:0; position:absolute; top:0;}
#game-screens .screen.active {z-index:2; position:relative;}
#game-screens .screen-intro {font-size:24px;}
#game-screens .screen-intro h1 {font-size:40px; font-weight:700; margin:0 0 12px;}


/* screen-0 */
#screen-0 .screen-intro h1 {margin:25px 0 0; color:#B00400;}

/* screen-1 */
#game-steps {width:840px; max-width:100%; margin:25px auto; font-size:20px;}
#game-steps .slick-track {display:-webkit-flex; display:flex; flex-wrap:wrap; justify-content:space-between;}
#game-steps .slick-dots {list-style:none; padding:0;}
#game-steps .slick-dots li {display:inline-block; margin:0 5px; opacity:.5;}
#game-steps .slick-dots li.slick-active {opacity:1;}
#game-steps .slick-dots li button {font-size:0; border:0; background:#fff; height:12px; width:12px; border-radius:6px;}
#game-steps .col {flex:0 0 auto;  width:auto;}
#game-steps .icon {display:inline-block; padding:30px; background:rgba(255,255,255,.7); border-radius:8px; width:180px;}
#game-steps .icon img {display:inline-block;width: 100%;}
#game-steps b {font-size:24px; margin-top:10px; display:block;}



/* slick slider */
.slick-slider{position:relative;display:block;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}.slick-list:focus{outline:0}.slick-list.dragging{cursor:pointer;cursor:hand}.slick-slider .slick-list,.slick-slider .slick-track{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.slick-track{position:relative;top:0;left:0;display:block;margin-left:auto;margin-right:auto}.slick-track:after,.slick-track:before{display:table;content:''}.slick-track:after{clear:both}.slick-loading .slick-track{visibility:hidden}.slick-slide{display:none;float:left;height:100%;min-height:1px}[dir=rtl] .slick-slide{float:right}.slick-slide img{display:block}.slick-slide.slick-loading img{display:none}.slick-slide.dragging img{pointer-events:none}.slick-initialized .slick-slide{display:block}.slick-loading .slick-slide{visibility:hidden}.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}.slick-arrow.slick-hidden{display:none}



/* screen-2 */
#screen-2 .sent-through {font-size: 18px;}
#screen-2 .passcode-msg {margin:  10px 0px;font-size: 20px;}
#screen-2 .passcode-field {border:0; display:inline-block; width:72px; height:72px; margin:12px; background:rgba(255,255,255,.6); border-radius:8px;
        color:#B00400; text-align:center; font-size:32px; font-weight:500; outline:none;}
#screen-2 .passcode-field:focus {background:rgba(255,255,255,.8);}
#screen-2 .passcode-field::-webkit-inner-spin-button, #screen-2 .passcode-field::-webkit-outer-spin-button{-webkit-appearance:none; appearance:none; margin:0;}
.psd-error {color:#B00400; font-weight:500;}
#verify-btn .loader, #verify-btn.verifing .default-txt {display:none;}
#verify-btn.verifing .loader {display:block; width:72.25px; margin:0 auto;}
#verify-btn .loader:before {content:''; display:block; width:18px; height:18px; border-radius:20px; border:2px solid #fff; border-top-color:transparent; -webkit-animation:loading .6s linear infinite; animation:loading .6s linear infinite; margin:1px auto;}
#game-logo {width: 252px;height: 100px;}

@-webkit-keyframes loading {
    from {transform:rotate(0);}
    to {transform:rotate(360deg);}
}
@keyframes loading {
    from {transform:rotate(0);}
    to {transform:rotate(360deg);}
}


/* screen-3 */
#screen-3 .wheel-inner {-moz-transition:.5s  ease-in; -ms-transition:.5s  ease-in; -o-transition:.5s  ease-in; -webkit-transition:.5s  ease-in; transition:.5s  ease-in; -moz-transform:rotateZ(0); -ms-transform:rotateZ(0); -o-transform:rotateZ(0); -webkit-transform:rotateZ(0); transform:rotateZ(0);}
#screen-3 .wheel-inner.spinFront {-moz-transform:rotateZ(25deg); -ms-transform:rotateZ(25deg); -o-transform:rotateZ(25deg); -webkit-transform:rotateZ(25deg); transform:rotateZ(25deg);}
#screen-3 .wheel-inner.spinBack {-moz-transform:rotateZ(-25deg); -ms-transform:rotateZ(-25deg); -o-transform:rotateZ(-25deg); -webkit-transform:rotateZ(-25deg); transform:rotateZ(-25deg);}
#screen-3 .spin-wheel-container {margin-top:30px;}
#screen-3 .stand-base {background: linear-gradient(180deg, #C77270 0%, #9C0400 36.98%, #300302 70.31%); border-radius: 24px 24px 0px 0px; height:21px; width:263px; margin:0 auto;}
#screen-3 .wheel-stand img {display:block; margin:-12px auto 0;}
#screen-3 .wheel-body {display:inline-block; padding:17px; position:relative;}
#screen-3 .wheel-outer-shell {background:#B00400; box-shadow:0 0 1.5px #000, 0px 2.66589px 5.33178px 2.66589px rgb(176 4 0 / 40%); position:absolute; width:100%; height:100%; left:0; top:0; border-radius:50%;}
#screen-3 .wheel-axle {cursor:pointer; width:50px; height:50px; margin:-25px; background:conic-gradient(from 180deg at 50% 50%, #954F09 0deg, #954F09 0.04deg, #FFFFFF 45deg, #954F09 90deg, #D1B049 133.12deg, #954F09 178.12deg, #FFFFFF 223.13deg, #954F09 270deg, #D1B049 316.87deg, #954F09 360deg); border-radius:50%; z-index:2; position:absolute; top:50%; left:50%; box-shadow: -1.33294px -1.33294px 2.66589px 2.66589px rgba(0, 0, 0, 0.25), 1.33294px 1.33294px 2.66589px 2.66589px rgba(0, 0, 0, 0.25);}
#screen-3 .wheel-tracker {position:absolute; left:50%; top:-12px; transform:translate(-50%); z-index:2;}
#screen-3 .tracker-bg {width:66px; height:66px; background:radial-gradient(50% 50% at 50% 50%, #4D1917 0%, #300302 0.01%, #300302 55.73%, #9C0400 78.12%, #C77270 100%); border-radius:66px 66px 0 0; position:absolute; top:-23px; left:50%; margin-left:-33px; z-index:-1;}
#screen-3 .wheel-lights {position:relative; top:6px;}
#screen-3 .wheel-inner {position:relative; width:267.86px; height:267.86px; margin:0 auto; overflow:hidden; z-index:1;}
#screen-3 .wheel-inner.spin {-moz-transition:5s ease; -ms-transition:5s ease; -o-transition:5s ease; -webkit-transition:5s ease; transition:5s ease; -moz-transform:rotate(3120deg); -ms-transform:rotate(3120deg); -o-transform:rotate(3120deg); -webkit-transform:rotate(3120deg); transform:rotate(3120deg);}
#screen-3 .wheel-section {position:absolute; width:100%; height:100%;}
/*#screen-3 .txt {position:absolute; width:50%; top:50%; left:50%; white-space:nowrap; text-align:left; padding-left:40px; font-size:13px; margin-top:-5.5px; -moz-transform-origin:center left; -ms-transform-origin:center left; -o-transform-origin:center left; -webkit-transform-origin:center left; transform-origin:center left; z-index:1; font-weight:700;}*/
#screen-3 .txt {
    position:absolute; 
    width:50%; 
    top:50%; 
    left:50%;
    text-align:center; 
    padding-left:40px;
    padding-right:8px; 
    font-size:12px;
    margin-top:-13.5px; 
    -moz-transform-origin:center left;
    -ms-transform-origin:center left;
    -o-transform-origin:center left;
    -webkit-transform-origin:center left;
    transform-origin:center left;
 z-index:1; font-weight:700;}/*white-space:nowrap;*/
#screen-3 .txt-1 {-moz-transform:rotate(22.5deg); -ms-transform:rotate(22.5deg); -o-transform:rotate(22.5deg); -webkit-transform:rotate(22.5deg); transform:rotate(22.5deg);}
#screen-3 .txt-2 {-moz-transform:rotate(67.5deg); -ms-transform:rotate(67.5deg); -o-transform:rotate(67.5deg); -webkit-transform:rotate(67.5deg); transform:rotate(67.5deg);}
#screen-3 .txt-3 {-moz-transform:rotate(112.5deg); -ms-transform:rotate(112.5deg); -o-transform:rotate(112.5deg); -webkit-transform:rotate(112.5deg); transform:rotate(112.5deg); color:#5E1440;}
#screen-3 .txt-4 {-moz-transform:rotate(157.5deg); -ms-transform:rotate(157.5deg); -o-transform:rotate(157.5deg); -webkit-transform:rotate(157.5deg); transform:rotate(157.5deg);}
#screen-3 .txt-5 {-moz-transform:rotate(-157.5deg); -ms-transform:rotate(-157.5deg); -o-transform:rotate(-157.5deg); -webkit-transform:rotate(-157.5deg); transform:rotate(-157.5deg);}
#screen-3 .txt-6 {-moz-transform:rotate(-112.5deg); -ms-transform:rotate(-112.5deg); -o-transform:rotate(-112.5deg); -webkit-transform:rotate(-112.5deg); transform:rotate(-112.5deg);}
#screen-3 .txt-7 {-moz-transform:rotate(-67.5deg); -ms-transform:rotate(-67.5deg); -o-transform:rotate(-67.5deg); -webkit-transform:rotate(-67.5deg); transform:rotate(-67.5deg); color:#5E1440;}
#screen-3 .txt-8 {-moz-transform:rotate(-22.5deg); -ms-transform:rotate(-22.5deg); -o-transform:rotate(-22.5deg); -webkit-transform:rotate(-22.5deg); transform:rotate(-22.5deg);}
#screen-3 .bg {position:absolute; bottom:49.5%; right:0;}
#screen-3 .bottom-section {top:49.5%;}
#screen-3 .bg-2 {left:50%;}
#screen-3 .bg-3 {right:50%;}
#screen-3 .bg-4 {left:0;}
#screen-3 .bg-5 {left:0;}
#screen-3 .bg-6 {right:50%;}
#screen-3 .bg-7 {left:50%;}
#screen-3 .bg-8 {right:0;}



#screen-4 .screen-flex-row {display:-webkit-flex; display:flex; flex-wrap:wrap; align-items:flex-start; align-content:flex-start; justify-content:center}
#screen-4 #confetti_area {position:fixed; left:0px; top:0px; background:transparent; z-index:-1; min-width:100%; min-height:100%;}
#screen-4 .congrats-message {background:#fff; opacity:0.7; border-radius:8px; display:inline-block; color:#4F4F4F; margin-top:15px; margin-bottom:15px; padding:73px 48px; max-width:90vw;}
#screen-4 .congrats-message h2 {color:#B00400; margin:0; font-size:32px; line-height:37.5px}
#screen-4 .congrats-message p {margin:26px 0 14px; font-weight:500; font-size:24px; line-height:28px;}
#screen-4 .congrats-message div {font-size:20px; line-height:1.5; width:380px; margin:0 auto; max-width:100%;}
#screen-4 .happy-user-wrapper {vertical-align:top; display:inline-block; width:0; align-self:flex-end}
#screen-4 .user-left img {margin-left:-200px;}
#screen-4 .user-right img {margin-left:-40px;}

/*Client specific*/
#screen-2 .passcode-field.dapto {color: #42526a}
.btn.dapto {background:#42526a}
.btn.dapto:hover {background:#4b6081;}
body #loading-wrapper .progress-bar {background:#42526a}
#loading-wrapper .progress-bar {background:#B00400}
#loading-wrapper.dapto .progress-bar {background:#42526a}
#music-btns.dapto {background:rgba(66, 82, 106, 1.0)}
#screen-0 .screen-intro.dapto h1 {margin:25px 0 0; color:#42526a}
#screen-2 .passcode-msg {color:#4a4542;}
#screen-3 .wheel-outer-shell.dapto {background: #4b6081;
    box-shadow:0 0 1.5px #000, 0px 2.66589px 5.33178px 2.66589px rgb(0 0 0 / 40%);
}
#screen-3 .tracker-bg.dapto {
    background:radial-gradient(50% 50% at 50% 50%, #242c35 0%, #282e38 0.01%, #303846 55.73%, #39455a 78.12%, #59677e 100%);}
#screen-3 .dapto .txt {color: #4a4542 !important}
#screen-3 .stand-base.dapto {
    background: linear-gradient(180deg, #4b6081 0%, #313e53 36.98%, #324056 70.31%);}
#screen-4 .congrats-message.dapto h2 {color:#42526a;}
#screen-4 .congrats-message {color:#4a4542;opacity:1;}
img.bg.bg-1,img.bg.bg-4,img.bg.bg-5,img.bg.bg-8{width: 134px;}
img.bg.bg-2,img.bg.bg-3,img.bg.bg-6,img.bg.bg-7{height: 134px;}

/* RESPONSIVE */
@media (max-width:920px) {
    #screen-4 .user-left img {width:106px; margin-left:-130px;}
    #screen-4 .user-right img {width:176px;}
}

@media (max-width:767px) {
    #background {filter:blur(4px);}
    #game-steps .col {width:100%;}
    #screen-2 .passcode-field {width:48px; height:48px; margin:12px 4px; border-radius:4px; font-size:20px;}
    
    #game-screens .screen-intro {font-size:16px;}
    #game-screens .screen-intro h1 {font-size:20px;}
    
    #game-steps b {font-size:16px;}
    #game-steps .step-info {font-size:14px;}

    #screen-4 .congrats-message {order:-1;}
    #screen-4 .happy-user-wrapper {width:50%; text-align:left; margin-top:-50px; position:relative; z-index:1;}
    #screen-4 .user-left img {margin:0 40px 0 auto; display:block;}
    #screen-4 .user-right img {margin-left:0;}
}

@media (max-width:575px) {
    #game-logo {width:230px;}
    /*#company-logo {width:54px;}*/
    #screen-4 .congrats-message {padding:33px 15px;}
    #screen-4 .congrats-message h2 {font-size:24px; line-height:28px;}
    #screen-4 .congrats-message p {font-size:18px; line-height:21px;}
    #screen-4 .congrats-message div {font-size:14px;}
}

@media (max-width:359px) {
    #screen-2 .passcode-field {width:38px; height:38px;}
    #verify-btn.btn {margin:15px auto;}
}