/*FONTS CSS*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@font-face {
    font-family:'Hi Jack';
    src:url('../fonts/HiJack.eot');
    src:url('../fonts/HiJack.eot?#iefix') format('embedded-opentype'),
   url('../fonts/HiJack.woff2') format('woff2'),
   url('../fonts/HiJack.woff') format('woff'),
   url('../fonts/HiJack.ttf') format('truetype'),
   url('../fonts/HiJack.svg#HiJack') format('svg');
    font-weight:normal;
    font-style:normal;
    font-display:swap;
}

:root{
	--bg-body:url(../images/main-bg.jpg);
	--bg-splash:url(../images/main-bg.jpg);
	--bg-overlay:rgba(0, 0, 0, 0.6);
	
	--font-base:'Poppins', sans-serif;
	--font-head:'Poppins', sans-serif;
	
	/*Colors*/
	--clr-base:#ffffff;
	--clr-btn:#ffffff;
	--clr-dark:#000000;
	
	--scrollbar-color:#fdc940;
	--scrollbar-bg:rgba(255, 255, 255, 0);
	--scroll-size:6px;
	
	/*btn roots*/
	--font-btn:'Poppins', sans-serif;
	--clr-btn:#ffffff;
	--btn-shadow:drop-shadow(0vmin 0.8vmin 0vmin rgba(40, 0, 5, 0.45));
		
	--pri-stroke:#125c2d;
	--sec-stroke:#5c4312;
	--dan-stroke:#6c140c;

}

*{margin:0;padding:0;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-touch-callout:none;box-sizing:border-box;-webkit-box-sizing:border-box;}
:focus{outline:none;}
html{-webkit-text-size-adjust:none;}
body{font-size:1.4vmin;font-family:var(--font-base);height:100%;color:var(--clr-base);background:var(--bg-body) no-repeat 0 0;background-size:cover;background-position:center;font-weight:normal;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;min-height:100vh;}
a{text-decoration:none;outline:none;color:var(--clr-dark);outline:none;cursor:pointer;}
a:hover, a:focus{text-decoration:none;outline:none;}
.btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn.focus:active, .btn.active.focus{outline:none;box-shadow:none;}
img{padding:0;margin:0;max-width:100%;border:none;}
p{line-height:1.3em;font-size:1.4vmin;color:var(--clr-dark);font-weight:normal;}
*{box-sizing:border-box;-webkit-box-sizing:border-box;}

/*HEADING CSS*/
h1, h2, h3, h4, h5, h6{font-weight:900;margin:0;padding:0;display:block;color:var(--clr-base);font-family:var(--font-head);}
/*LIST CSS*/
ul, ul li, ol, ol li{padding:0;margin:0;list-style:none;}

/*NORMAL CSS*/
::selection{background:#0067ab;color:#fff;}
::-moz-selection{background:#0067ab;color:#fff;}
.container{margin:0 auto;width:100%;max-width:1510px;}
.pull-left{float:left;}
.pull-right{float:right;}
.event-none{pointer-events:none;}
.disabled{pointer-events:none;opacity:0.5;}
.block{float:left;width:100%;}
.center{text-align:center;}
.d-block{display:block!important;}
.hidden{display:none !important;}
.bg-overlay .modal-overlay,
.bg-clear .modal-overlay,
.bg-clear{background:none!important;}
.bg-overlay{background:var(--bg-overlay)!important;}

/*Perfect ScrollBar*/
*{scrollbar-width:thin;scrollbar-color:var(--scrollbar-color) auto;}
*::-webkit-scrollbar{width:var(--scroll-size);border-radius:20px;height:var(--scroll-size);}
*::-webkit-scrollbar-track{background:var(--scrollbar-bg);}
*::-webkit-scrollbar-thumb{background-color:var(--scrollbar-color);border-radius:20px;width:var(--scroll-size);height:var(--scroll-size);}
/*Perfect ScrollBar*/

/*BUTTON CSS*/
.base-btn{float:left;width:100%;text-align:center;display:flex;align-items:center;justify-content:center;position:relative;transition:transform 0.2s;}
.base-btn:hover{transform:scale(0.99);}
.btn-text{width:100%;height:100%;float:left;color:var(--clr-btn);font-size:3.6vmin;font-family:var(--font-btn);text-transform:uppercase;position:absolute;top:0;left:0;z-index:1;text-align:center;display:flex;align-items:center;justify-content:center;font-weight:900;font-style:italic;-webkit-text-fill-color:var(--clr-btn);-webkit-text-stroke-width:0.2vmin;}
.btn-col{float:left;width:100%;display:flex;justify-content:center;align-items:center;}
.btn-bg{float:left;width:100%;}
.btn-bg img{float:left;width:100%;}
.icon{display:inline-block;font-size:20px;vertical-align:middle;}

.primary-btn span{-webkit-text-stroke-color:var(--pri-stroke);}
.secondary-btn span{-webkit-text-stroke-color:var(--sec-stroke);}
.danger-btn span{-webkit-text-stroke-color:var(--dan-stroke);}

/*=======LOADER CSS=====*/
#ajax_data{width:100%}
.loading-wrapper{position:fixed;float:left;width:100%;top:0;left:0;right:0;bottom:0;z-index:99;text-align:center;background:#ffffff;}
.page-overlay{float:left;width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;}
.loader-ring{display:inline-block;position:relative;width:42px;height:42px;border:0.4vmin solid #ff9922;border-color:#ff9922 transparent #ff9922 #ff9922;animation:lds-ring 650ms linear infinite;border-radius:50%;}
@keyframes lds-ring{
  0%{transform:rotate(0deg);}
  100%{transform:rotate(360deg);}
}
.main-loader{background:var(--bg-splash) no-repeat 0 0;background-size:cover;background-position:center;}
.loader-outer{float:left;width:100%;} 
.loader-icon{float:left;width:100%;display:flex;align-items:center;justify-content:center;} 
.loader-text{float:left;width:100%;margin-top:6vmin;}
.loader-fig{max-width:30vmin;}
.loader-fig img{float:left;width:100%;} 
.loader-text p{float:left;width:100%;line-height:7vmin;font-size:3.4vmin;font-weight:900;text-shadow:0 0.2vmin 0.6vmin rgba(0,0,0,0.4);color:#ffffff;}

/* Modal Comman  */
.main-section{float:left;width:100%;min-height:100vh;position:relative;}
.modal{float:left;width:100%;height:100%;position:fixed;top:0;left:0;z-index:13;background:var(--bg-overlay);display:none;overflow:hidden;padding:0 1vmin;}
.modal-contenier{float:left;width:100%;position:relative;min-height:100%;display:flex;align-items:center;justify-content:center;padding:0px;overflow:hidden;}
.modal-contenier-outer{float:left;width:100%;display:flex;justify-content:center;padding:0px;}
.modal-overlay{position:fixed;top:0;left:0;z-index:-1;float:left;height:100vh;width:100%;cursor:pointer;background:var(--bg-overlay);}
.modal-info{z-index:1;position:relative;float:left;width:100%;overflow:inherit;}
.modal-body{display:inline-block;width:100%;max-width:62vmin;position:relative;z-index:2;}
.modal-head{float:left;width:100%;height:6vmin;text-align:center;display:flex;align-items:center;justify-content:center;}
.modal-head-title{color:#ffffff;font-size:4.2vmin;text-transform:uppercase;font-weight:700;line-height:1.2em;float:left;width:100%;text-align:center;padding:0px;text-shadow:0px 0.3vmin 0.5vmin rgba(0, 0, 0, 0.4);font-family:var(--font-base);}
.modal-head-figure{max-width:48vmin;margin:0px auto;position:absolute;left:0px;right:0px;top:-6vmin;}
.modal-head-figure img{width:100%;float:left;}
.modal-content{float:left;width:100%;display:flex;justify-content:center;flex:1;}
.popup-close{position:absolute;top:calc(100% + 6.5vmin);z-index:2;width:6vmin;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer;animation-name:fadeIn;animation-delay:0.8s;animation-duration:0.7s;animation-fill-mode:both;left:0;right:0;margin:auto;}
.popup-close img{width:100%;float:left;transition:transform 0.2s;filter:drop-shadow(0px 0px 0.6vmin #ffe25c);}
.popup-close:hover img{transform:scale(0.98);}
.popup-card-container{float:left;width:100%;position:relative;}
.popup-card-over{position:relative;top:0px;left:0px;right:0px;bottom:0px;display:flex;justify-content:center;float:left;width:100%;
background-image:linear-gradient(0deg, #dcfa00 0%, #0e9e00 100%);padding:0.8vmin;border-radius:3vmin;}
.popup-card-inner{display:flex;flex-direction:column;float:left;width:100%;background:rgb(255, 251, 233);border-radius:3vmin;padding:6vmin 2vmin;box-shadow:0px 0px 1vmin #000 inset;}



.button-bar{float:left;width:100%;display:flex;justify-content:center;gap:1.4vmin;grid-gap:1.4vmin}
.button-bar-outer{float:left;width:100%;display:flex;}
.button-bar .col{padding:0;flex:1;}
.modal-actions{float:left;width:100%;display:flex;justify-content:center;flex-direction:column;margin-top:1vmin;}
.modal-actions .base-btn{max-width:44vmin;margin-top:1.4vmin;}
.modal-actions .btn-text{font-size:4.4vmin;}

/*Page CSS*/
.iframe-container{width:100%;height:100%;position:relative;}
.screen-item{float:left;width:100%;display:none;}
.screen-item.show-item{display:block;}
.mid-wrapper{float:left;width:100%;position:relative;display:flex;flex-direction:column;align-items:center;}

/* Splash Screen Start*/
.splash-wrap .splash-card:before{background:url(../images/sparkle-bg.png);height:100%;width:100%;position:absolute;left:0px;right:0px;content:'';pointer-events:none;background-repeat:no-repeat;background-position:center 22%;background-size:50%;top:0;}
.splash-card{float:left;width:100%;height:100%;position:fixed;top:0;left:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center;padding:0;background:var(--bg-splash) no-repeat 0 0;background-size:cover;background-position:center;}
.splash-card .container{max-width:100%;}
.splash-card-inner{float:left;width:100%;}
.splash-logo{float:left;width:100%;display:flex;justify-content:center;align-items:center;margin-bottom:3vmin;margin-top:0;}
.brand-logo{float:left;width:100%;max-width:60vmin;filter:drop-shadow(0px 0px 4vmin #b21e1f);}
.brand-logo img{float:left;width:100%;}
.game-actions{float:left;width:100%;}
.game-actions .base-btn{max-width:37vmin;margin-top:3vmin;}
.game-actions .btn-col:first-child .base-btn{margin-top:0px;}
/* Splash Screen END */

/* Scrache Screen Start*/
.scratchie-selection-card{float:left;width:100%;min-height:100dvh;display:flex;justify-content:center;}

.scratchie-selection-card-inner{float:left;width:100%;}
.section-head{float:left;width:100%;background-image:url(../images/scratchie-bg.png);background-size:auto 100%;background-repeat:no-repeat;background-position:top center;padding:10vmin 0 8vmin;margin-bottom:2vmin}
.section-head-image{float:left;width:100%;display:flex;justify-content:center;}
.section-head-figure{float:left;width:100%;max-width:48vmin;}
.section-head-figure img{float:left;width:100%;}
.section-head-title{float:left;width:100%;}
.section-head-reward .reward-link{color:#08e4f3;}
.section-head-reward{float:left;width:100%;font-size:2.6vmin;font-weight:900;font-style:italic;transform:rotate(358deg);text-align:center;text-transform:uppercase;letter-spacing:0.2vmin;}
.scratchie-wcard{float:left;width:100%;display:flex;justify-content:center;}
.scratchie-wcard-inner{float:left;max-width:40vmin;width:100%;}
.scratch-box-inner{float:left;width:100%;}
.scratch-box{float:left;width:100%;position:relative;}
.scratch-border-box{float:left;width:100%;filter:drop-shadow(0px 0px 1vmin #fad238) drop-shadow(0px 0px 1vmin #fad238);}
.scratch-border-box img{float:left;width:100%;}

.scratch-front-box{float:left;width:100%;position:absolute;top:0px;bottom:0px;right:0px;left:0px;}
.scratch-canvas{float:left;width:100%;height:100%;}
.scratch-front-inner{float:left;width:100%;position:relative;height:100%;}
.scratch-front{float:left;width:100%;position:absolute;left:0px;right:0px;bottom:0px;top:0px;z-index:2;}

.scratch-price-over{float:left;width:100%;position:absolute;left:0px;right:0px;bottom:0px;top:0px;z-index:1;display:flex;align-items:center;justify-content:center;}

.scratchie-game-actions{float:left;width:100%;display:none;}
.scratchie-game-actions .base-btn{max-width:22vmin;margin-top:3vmin;}

.scratch-completed .section-head{display:none;}
.scratch-completed .scratchie-game-actions{display:block;}
.scratch-completed .scratchie-selection-card{align-items:center;}
.scratch-completed .scratch-border-box img{opacity:0;}
.scratch-completed .scratch-front-inner{filter: drop-shadow(0px 0px 0.5vmin #ee3333);}
.scratch-completed .scratchie-wcard{padding:5vmin 0px;background-image: url(../images/scratchie-bg-multi.png);background-size: auto 100%;background-repeat: no-repeat;background-position: top center;}
.scratch-completed .scratch-front{display:none;}

.scratch-price{float:left;width:100%;padding:0px 4vmin;}
.scratch-price-block{float:left;width:100%;display:flex;justify-content:center;}
.scratch-bounce-block{float:left;width:100%;margin-top:2vmin;}

.price-doller{float:left;position:relative;background:transparent;text-align:center;z-index:0;color:#f63e3e;font-size:6.5vmin;font-family: 'Hi Jack';text-transform: uppercase;line-height:1.1em;letter-spacing:0.5vmin;top:3vmin;right:2vmin;pointer-events:none;}
.price-doller:before{content:attr(title);position:absolute;-webkit-text-stroke:0.4vmin #ffe500;left:0;z-index:-1; }
.price-doller:after{content:attr(title);position:absolute;-webkit-text-stroke:1.5vmin #000000;left:0;z-index:-2;top:0.2vmin; }

.price-val{float:left;position:relative;background:transparent;text-align:center;z-index:0;color:#f63e3e;font-size:15vmin;font-family:'Hi Jack';text-transform:uppercase;line-height:1.1em;letter-spacing:0.5vmin;pointer-events:none;}
.price-val:before{content:attr(title);position:absolute;-webkit-text-stroke:0.4vmin #ffe500;left:0;z-index:-1; }
.price-val:after{content:attr(title);position:absolute;-webkit-text-stroke:1.5vmin #000000;left:0;z-index:-2;top:0.2vmin; }

.bounce-set-text{float:left;width:100%;text-align:center;font-size:4.5vmin;font-family:'Hi Jack';color:rgb(5, 6, 41);text-transform:uppercase;line-height:1em;text-align:center;text-shadow:0px 0.5vmin 0.4vmin rgba(0, 0, 0, 0.65);-webkit-text-stroke-color:#ffe300;-webkit-text-fill-color:rgb(5, 6, 41);-webkit-text-stroke-width:0.08vmin;letter-spacing:0.2vmin; background: -webkit-linear-gradient(#002f9e, #000000);-webkit-background-clip: text;-webkit-text-fill-color: transparent;
position:relative;pointer-events:none;}
.bounce-val-text{background:-webkit-linear-gradient(#002f9e, #000000);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.text-free{text-shadow:none!important;}
.bounce-val-text-free{background: -webkit-linear-gradient(#790504, #a50707, #4e0e22);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
.scratch-image-block{float:left;width:100%;display:flex;align-items:center;justify-content:center;}
.frozen-figure{float:left;width:100%;max-width:34%;filter: drop-shadow(0px 0px 2vmin #ffffff);}
.frozen-figure img{float:left;width:100%;}

/* Scrache Screen End*/

/* Rewards Screen Start*/
.reward-text{font-size:3.8vmin;text-align:center;float:left;width:100%;line-height:1.2em;font-weight:900;text-transform:uppercase;font-style:italic;color:#000000;}
/* Rewards Screen End*/
.val-text{background:-webkit-linear-gradient(#f6733e, #f63e3e);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}

/*================Animation CSS Strat==================*/
.btn-col{-webkit-animation-name:fadeIn;animation-name:fadeIn;animation-delay:0.6s;-webkit-animation-duration:0.5s;animation-duration:0.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both;}
@keyframes fadeIn{0%{opacity:0;} 100%{opacity:1;}}
.brand-logo{-webkit-animation-name:bounceInDown;animation-name:bounceInDown;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;}
@keyframes bounceInDown{
	 0%, 60%, 75%, 90%, 100%{-webkit-transition-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);transition-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);}
 0%{opacity:0;-webkit-transform:translate3d(0, -3000px, 0);transform:translate3d(0, -3000px, 0);}
 60%{opacity:1;-webkit-transform:translate3d(0, 25px, 0);transform:translate3d(0, 25px, 0);}
 75%{-webkit-transform:translate3d(0, -10px, 0);transform:translate3d(0, -10px, 0);}
 90%{-webkit-transform:translate3d(0, 5px, 0);transform:translate3d(0, 5px, 0);}
 100%{-webkit-transform:none;transform:none;}
}

.modal-contenier{-webkit-animation-name:bounceInUp;animation-name:bounceInUp;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;}
 @keyframes bounceInUp{ 0%, 60%, 75%, 90%, 100%{-webkit-transition-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);transition-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);}
0%{opacity:0;-webkit-transform:translate3d(0, 3000px, 0);transform:translate3d(0, 3000px, 0);}
60%{opacity:1;-webkit-transform:translate3d(0, -20px, 0);transform:translate3d(0, -20px, 0);}
75%{-webkit-transform:translate3d(0, 10px, 0);transform:translate3d(0, 10px, 0);}
90%{-webkit-transform:translate3d(0, -5px, 0);transform:translate3d(0, -5px, 0);}
100%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}
}
.btn-col:nth-child(2){animation-delay:0.9s;}
.btn-col:nth-child(3){animation-delay:1.2s;}
.btn-col:nth-child(4){animation-delay:1.5s;}

/*=============RESPONSIVE CSS START============*/

.mob-item{display:none !important;}
.desk-item{display:block !important;}

@media only screen and (max-width:992px) and (orientation :landscape){
	/*Splash*/
	.splash-logo{margin-top:-5vmax;}
	.modal-contenier-outer{margin-top:-10px;}
	.howto-button-bar ~ .howto-button-bar,
	.howto-button-bar{padding-top:1vmin;}
	.ht-content p{font-size:2.1vmin;}
	.howto-button-bar .col{max-width:27vmin;}
	.howto-button-bar .col .btn-text{font-size:3.4vmin;}
	.modal-body{transform:scale(0.9);}
}
@media only screen and (max-width:375px) and (orientation :portrait){
	.modal-body{transform:scale(0.9);max-width:96vmin;}
}

@media (min-width:481px) and (max-width:768px) and (orientation :portrait){
	.desk-item{display:none !important;}
	.mob-item{display:block !important;}
	
	/* Modal */
		.modal-head{height:5vmin;}
		.modal-head-figure{max-width:40vmin;top:-4.5vmin;}
		.modal-head-title{font-size:3.2vmin;}
		.popup-close{width:7vmin;}
		.modal-body{max-width:56vmin;}
		
	/*Splash Screen*/
		.splash-card{background-position:bottom center;}
		.brand-logo{max-width:60vmin;}
		.splash-logo{margin-bottom:7vmin;}
		.game-actions .base-btn{max-width:50vmin;margin-top:2.4vmin;}  
		.game-actions .btn-text{font-size:5vmin;}
		.btn-text{-webkit-text-stroke-width:0.3vmin;padding-bottom:0.5vmin;}
}

@media only screen and (max-width:480px) and (orientation :portrait){
	:root{
		--bg-body:url(../images/main-mob-bg.jpg);
		--bg-splash:url(../images/main-mob-bg.jpg);
		--scroll-size:4px;
	}
	.desk-item{display:none !important;}
	.mob-item{display:block !important;}
	
	/* Modal */
		.modal-head-figure{max-width:68vmin;top:-9vmin;}
		.modal-head{height:10vmin;}
		.modal-head-title{font-size:5.2vmin;}
		.summery-modal .modal-body,
		.modal-body{max-width:90vmin;}
		.popup-close{width:12vmin;}
		.modal-actions .base-btn{max-width:76vmin;}
		.modal-actions .btn-text{font-size:7.6vmin;}
	
	/*Splash*/	
		.splash-card .container{max-width:100%;display:flex;justify-content:center;align-items:center;height:100%;}
		.splash-card-inner{float:left;width:100%;display:flex;flex-direction:column;}
		/* .splash-logo{height:50%;} */
		.brand-logo{max-width:90vmin;width:90vmin;min-width:90vmin;}
		.game-actions{margin-top:8vmin;align-items:center;display:flex;flex-direction:column;justify-content:center;}
		.game-actions .base-btn{max-width:72vmin;margin-top:4vmin;}  
		.game-actions .btn-text{font-size:7vmin;}
		.btn-text{-webkit-text-stroke-width:0.5vmin;padding-bottom:0.5vmin;}
		.splash-wrap .splash-card:before{background-size:100%;}
	
	/* Scratchie */
		.section-head-figure{max-width:86vmin;}
		.section-head-reward{font-size:4.6vmin;letter-spacing:0.1vmin;}
		.scratchie-wcard-inner{max-width:80vmin;}
		.reward-text{font-size:5.8vmin;}
		.scratchie-game-actions .base-btn{max-width:34vmin;margin-top:4vmin;}
		.scratchie-game-actions .base-btn .btn-text{font-size:6vmin;}
		.scratch-completed .scratchie-wcard{padding:10vmin 0px;}
		
		.scratch-price{padding:0px 7.2vmin;}
		.price-val{font-size:24vmin;}
		.price-doller{font-size:12vmin;}
		.bounce-set-text{font-size:7.6vmin;}
}
/*=============RESPONSIVE CSS END============*/