/*General css start*/
html, body, *, *:after, *before { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: #FFF136;; font-family: 'Futura PT'; color: #000; }
img { max-width: 100%; }
ul { list-style-type: none; }
a { color: #000; }
a:hover, a:active, a:focus, button:focus, button:hover, button:active, .btn.focus, .btn:focus { opacity: 0.8; outline: none; box-shadow: none; text-decoration: none; color: #000; }
input:focus, input:active { outline: 0; }
.bold { font-family: 'Futura PT bold'; }
h1 {     text-shadow: 6px 10px black; }
/*General css End*/

/*Responsive css start*/
.large-screen .desktop { background-color: #faf074; position: relative; height: 100vh; width: 100%; overflow: hidden; padding: 60px; }
.large-screen .desktop:after { position: absolute; content: ""; top: 0; bottom: -20%; left: -30%; right: 0; -webkit-clip-path: polygon(84% 0, 0 0, 41% 100%); clip-path: polygon(84% 0, 0 0, 41% 100%); background-color: #78cfdd; }
.large-screen .desk-box { background-color: #000; position: relative; z-index: 1; display: inline-block; color: #fff; padding: 30px 40px; }
.large-screen .desk-box p { font-size: 40px; line-height: 50px; }
.large-screen .desk-box:after { position: absolute; content: ""; top: 10px; bottom: -10px; left: 10px; right: -10px; border: 3px solid #000; z-index: -1; }
.large-screen .desk-box span { font-size: 18px; line-height: 28px; }
.large-screen .img-wrapper { position: fixed; top: 60px; right: 50px; }

.large-screen .footer { position: fixed; right: 50px; bottom: 50px; text-align: right; }
.large-screen .footer img { max-width: 150px; margin-bottom: 30px; }
.large-screen .footer .cms-link { justify-content: flex-end !important; }
.large-screen .footer p { text-align: right; }
.mobile .footer { background: #EE3338;}
.mobile .footer img { display: none; }
@media only screen and (max-width:991px) {
	.large-screen .desktop{ padding: 50px 15px; }
	.large-screen .img-wrapper { top: 50px; right: 5px; }
}
@media only screen and (min-width:992px) {
	.large-screen .desk-box p { font-size: 60px; line-height: 75px; }
	.large-screen .desk-box span { font-size: 26px; line-height: 40px; margin-top: 20px !important; display: block; }
}
@media only screen and (max-width:575px) {
	.large-screen .footer { left: 15px; right: 15px; bottom: 20px; text-align: center; }
	.large-screen .footer img { max-width: 150px; margin-bottom: 30px; }
	.large-screen .footer .cms-link { justify-content: center !important; }
	.large-screen .footer p { text-align: center; }
	.large-screen .desk-box { padding: 30px 15px; }
	.large-screen .desktop:after { left: -100%; }
}
#load { width: 100vw; height: 100vh; position: fixed; z-index: 9999; background: url("../img/sugar-loaf.svg") no-repeat center center #fff;
-webkit-animation: fadein 2s infinite;
  -moz-animation:    fadein 2s infinite;
  -o-animation:      fadein 2s infinite;
  animation:         fadein 2s infinite; }
@-webkit-keyframes fadein {
  0%   { opacity: 1; }
  100% { opacity: 0.5; }
}
@-moz-keyframes fadein {
  0%   { opacity: 1; }
  100% { opacity: 0.5; }
}
@-o-keyframes fadein {
  0%   { opacity: 1; }
  100% { opacity: 0.5; }
}
@keyframes fadein {
  0%   { opacity: 1; }
  100% { opacity: 0.5; }
}

.mobile .logo { padding: 68px 0 90px; }
.mobile .scan-info { font-size: 29px; line-height: 45px; margin: 50px 0 55px; }
.mobile .scan-header { font-size: 29px; line-height: 45px; margin: 20px 0 25px; }
.mobile .success-text { font-size: 29px; line-height: 30px; margin: 10px 0 10px; }
.mobile .box { background-color: #000; color: #fff; padding: 34px 10px 45px; margin: 0 36px; position: relative; margin-bottom: 15px; z-index: 9; }
.mobile .box:after { position: absolute; content: ""; top: 12px; left: 14px; bottom: -12px; right: -14px; border: 5px solid #000; z-index: -1; }
.mobile .box p { font-size: 63px; line-height: 78px; margin-bottom: 33px; }
.mobile .btn { padding: 30px 44px; background-color: #F7B8D3; font-size: 38px; line-height: 47px; font-family: 'Futura PT bold'; border-radius: 0; border: 4px solid #000; }
.mobile .footer { padding: 35px 0; }
.mobile .footer { font-size: 19px; line-height: 27px; }
.mobile .footer p { margin-top: 10px; }
.mobile .scan-sec { position: relative; overflow: hidden; }
.mobile .scan-sec:after { -webkit-clip-path: polygon(100% 36%, 0 0, 12% 100%); clip-path: polygon(100% 36%, 0 0, 12% 100%); position: absolute; top: -150px; bottom: 0; left: 0; right: 0; background-color: #EE3338; content: ""; width: 914px; height: 1011px; transform: rotate(-31deg); z-index: -1; }

/*sign-up page css start*/
.mobile.sign-up { background-color: #F7B8D3; }
.mobile .free-play-box { border: 9px solid #000; background-color: #FFDE23; margin: auto; width: 495px; max-width: 100%; padding: 40px; }
.mobile .free-play-box h2 { font-size: 53px; line-height: 66px; margin-bottom: 14px; }
.mobile .free-play-box p { font-size: 25px; line-height: 42px; text-align: left; }
.mobile .form-sec { padding-bottom: 0px; }
.mobile .form-sec form { max-width: 375px; width: 100%; margin: 68px auto 0; }
.mobile .form-group { margin-bottom: 30px; }
.mobile .form-group.has-error > .error, .form-check.has-error > label{
    color: #FFDE23;
}
.mobile .control-label { font-size: 16px; line-height: 20px; margin-bottom: 5px; color: #FFFFFF}
.mobile .form-control { border: 0px solid #000; background-color: #fff; height: 52px; border-radius: 0; }
.mobile #myButton { background-color: #FFDE23; border: 0px solid #000; font-size: 16px; line-height: 20px; padding: 23px; margin-top: 28px; display: block; width: 100%; color: #000000}
.mobile #myButton span { font-size: 20px; line-height: 34px; font-weight: normal; font-family: 'Futura PT'; }
.mobile .form-sec { position: relative; }
.mobile .form-sec:after { position: absolute; content: ""; top: -80px; bottom: -150px; left: 0; right: 0; margin: auto; background-color: #EC1C24; z-index: -1; clip-path: polygon(100% 2%,100% 3%,100% 98%,100% 100%,0% 94%,0% 6%);}
.mobile .form-control { font-size: 24px; color: #000; line-height: 34px; }
.mobile .form-control:focus { box-shadow: none; border-color: #000; }
.mobile .form-control::-webkit-input-placeholder { font-size: 24px; line-height: 34px; color: #000; }
.mobile .form-control::-moz-placeholder { font-size: 24px; line-height: 34px; color: #000; }
.mobile .form-control:-ms-input-placeholder { font-size: 24px; line-height: 34px; color: #000; }
.mobile .form-control:-moz-placeholder { font-size: 24px; line-height: 34px; color: #000; }

/*confirmation page css start*/
.mobile.confirmation { background-color: #F7B8D3; }
.mobile.confirmation main { background-color: #78CFDD; }
.mobile .cnfrm-sec { padding-bottom: 125px; position: relative; }
.mobile .cnfrm-sec:after { position: absolute; content: ""; bottom: 0; left: 0; right: 0; margin: auto; background-color: #FAF074; height: 330px; -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 51%); clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 51%); }
.mobile .cnfrm-box { background-color: #F7B8D3; border: 10px solid #000; padding: 83px 50px 55px; display: block; width: 415px; max-width: 100%; margin: auto; position: relative; z-index: 2; }
.mobile .cnfrm-box p { font-size: 30px; line-height: 49px; margin-top: 50px; }
@media only screen and (max-width:414px) {
	.mobile .box { margin: 0 12px 15px 0; }
	.mobile .box p { font-size: 47px; line-height: 62px; }
	.mobile .btn { padding: 20px 10px; font-size: 28px; line-height: 37px; }
	.mobile .free-play-box { padding: 30px 10px; }
	.mobile .free-play-box h2 { font-size: 47px; line-height: 60px; }
	.mobile .control-label { font-size: 16px; line-height: 20px; margin-bottom: 5px; }
	.mobile #myButton { font-size: 16px; line-height: 20px; padding: 20px 10px; margin-top: 50px; width: 100% }
	.mobile .cnfrm-box { padding: 53px 10px 25px; }
	.mobile .cnfrm-box p { font-size: 24px; line-height: 43px; margin-top: 30px; }
	.mobile .cnfrm-sec { padding-bottom: 75px; }
	.mobile .cnfrm-sec:after { height: 250px; }
	.mobile .logo { padding: 50px 0; }
}