/*FONTS CSS*/
@import url('font-icons.css');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
@font-face {
    font-family:'cubanoregular';
    src: url('../fonts/cubano-webfont.woff2') format('woff2'),
         url('../fonts/cubano-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

:root {
/*Colors*/
--clr-base:#fff;
--clr-dark:#4d045d;
--clr-white:#fff;
--clr-black:#000;
--clr-light:rgba(82,88,101,0.8);
	
/*Background Colors*/
--bg-body:url(../images/splash-bg.jpg);
--bg-dark:#4d045d;
--bg-white:#fff;
--bg-difficulty:url(../images/difficulty-bg.jpg);
--bg-play:url(../images/play-bg.jpg);
--bg-img:rgba(255,255,255,0.2);

/*Btn Backgrounds*/
--clr-btn:#fff;
--shadaw-text:0 0.2vmin 0.4vmin rgba(0,0,0,0.3);
--drop-shadow:drop-shadow(0px 0.6vmin 0.6vmin rgba(0,0,0, 0.60));
--bg-btn:linear-gradient(to top, #ffbef9 0%, #fff0ff 100%);
--bdr-btn:#b03ad5;
--clr-btn2:#5b247f;
--shadow-btn:0 0.5vmin 0.5vmin rgba(0,0,0,0.4), 0 -0.3vmin 0.2vmin #fef4fd inset;
--shadow-btn-active:0 0.5vmin 0.5vmin rgba(0,0,0,0.4), 0 -0.3vmin 0.2vmin #300f63 inset;
--clr-btn-active:#fff;
--bg-btn-win:linear-gradient(to top, #1a897c 0%, #02c199 100%);	
--shadow-btn-win:0 0.5vmin 0.5vmin rgba(0,0,0,0.4), 0 -0.3vmin 0.2vmin #a5d0cb inset;
--bdr-btn-win:#085d51;
--bg-btn-tip:linear-gradient(to top, #3f206e 0%, #89439f 100%);	
--bg-btn-loss:linear-gradient(to top, #f00 0%, #fc6a6a 100%);		
--shadow-btn-loss:0 0.5vmin 0.5vmin rgba(0,0,0,0.4), 0 -0.3vmin 0.2vmin #fdb5b5 inset;
--bdr-btn-loss:#af0404;
	
/*Text Shadaw*/
--text-shadaw:0 0.2vmin 0.4vmin rgba(0,0,0,0.3);
	
/*Loader Color*/
--clr-loader:#fff;
	
/*Border Colors*/
--bdr1:#db64ff;
--bdr2:#9406a0;
		
/*Fonts*/
--font-base:'cubanoregular', sans-serif;
--font-head:'cubanoregular', sans-serif;
--font-pre:'Poppins', sans-serif;
	
}

*{margin:0; padding:0; box-sizing:border-box; -webkit-box-sizing:border-box; -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-touch-callout:none; line-height:1.3em; letter-spacing:0.1vmin;}
:focus{outline:none;}
html{height:100%; -webkit-text-size-adjust:none;}
body{height:100%; font-size:13px; font-family:var(--font-base); color:var(--clr-base); background:var(--bg-body) no-repeat 0 0; background-size:cover; line-height:1.3em; font-weight:normal;}
a{text-decoration:none; outline:none; color:var(--clr-base); outline:none; cursor:pointer;}
a:hover, a:focus{text-decoration:none; outline:none;}
.btn:hover, .btn:focus, .btn.focus{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; margin:0; padding:0; font-size:13px; color:var(--clr-dark); font-weight:normal;}

/*HEADING CSS*/
h1, h2, h3, h4, h5, h6{font-weight:normal; margin:0; padding:0; display:block; color:var(--clr-base); font-family:var(--font-head);}
h2{font-size:13px;}

/*LIST CSS*/
ul, ul li, ol, ol li{padding:0; margin:0; list-style:none;}

/*INPUT CSS*/
.form-group{float:left; width:100%; margin-bottom:15px; position:relative;}
.input-group{float:left; width:100%; position:relative;}
select, select option{width:100%; box-sizing:border-box; -moz-appearance:none; -webkit-appearance:none; border-radius:0;}
.form-control{float:left; width:100%; font-size:18px; outline:medium none; height:36px; color:#fff; border:0; border-bottom:1px solid #666; background:transparent; line-height:34px; padding:0; transition:all 0.4s ease 0s; font-family:var(--font-pre); font-weight:600;}
.form-control:focus{outline:none; transition:all 0.3s ease 0s;}
.form-control:disabled{background:#f2f2f2; color:#C7C6C6;}
input[type="submit"], input[type="text"], input[type="password"], textarea{-webkit-appearance:none;}
input[type="submit"], button{cursor:pointer; border:0;}
textarea.form-control{resize:vertical; height:100px;}

/*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;}
.block{float:left; width:100%;}
.event-none{pointer-events:none;}
.disabled{pointer-events:none; opacity:0.5;}

/*BUTTON CSS*/
.btn{float:left; width:100%; padding:0 2vmin; text-align:center; color:var(--clr-btn2); font-size:3.5vmin; font-family:var(--font-head); height:8vmin;  border:0.3vmin solid var(--bdr-btn); border-width:0.3vmin 0.3vmin 0.6vmin; text-transform:uppercase; display:flex; align-items:center; justify-content:center; background:var(--bg-btn); border-radius:1.6vmin; box-shadow:var(--shadow-btn); transition:all 0.3s ease 0s;}
.btn:hover{box-shadow:none !important;}
.disable-btn{pointer-events:none; background:#e6e4e4;}
.icon{display:inline-block; font-size:20px; vertical-align:middle;}
.base-btn{float:left; width:100%; text-align:center; display:flex; align-items:center; justify-content:center; position:relative;}
.btn-text{width:100%; height:100%; float:left; color:var(--clr-btn); font-size:5.3vmin; font-family:var(--font-head); text-transform:uppercase; position:absolute; top:0; left:0; z-index:1; text-align:center; display:flex; align-items:center; justify-content:center; padding-bottom:2vmin; text-shadow:var(--shadaw-text);}
.btn-bg{float:left; width:100%;}
.btn-bg img{float:left; width:100%;}


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

.splash-card{float:left; width:100%; padding:1vmin; margin-top:10vmin;}
.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;}
.brand-logo{float:left; width:100%; max-width:73vmin;}
.brand-logo img{float:left; width:100%;}

.game-actions{float:left; width:100%;}
.btn-col{float:left; width:100%; display:flex; justify-content:center; align-items:center;}
.game-actions .base-btn{margin-bottom:1.6vmin; max-width:52.3vmin;}


.difficulty-card{float:left; width:100%; height:100%; position:fixed; top:0; left:0; display:flex; justify-content:center; align-items:center; padding:1vmin; background:var(--bg-difficulty) no-repeat 0 0; background-size:cover;}
.difficulty-card .container{max-width:100%;}
.diff-card-inner{float:left; width:100%; text-align:center;}
.diff-title{float:left; width:100%; margin-bottom:3.2vmin;}
.diff-title-label{float:left; width:100%; font-size:8.6vmin; text-shadow:var(--shadaw-text);}
.diff-title-pre{float:left; width:100%; font-size:4.6vmin; color:var(--clr-base); margin-top:1vmin;}
.diff-actions{float:left; width:100%;}
.diff-actions .base-btn{margin-bottom:1.6vmin; max-width:52.3vmin;}
.game-type-top{float:left; width:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:0 2vmin;}


.main-section.play-wrap{background:var(--bg-play) no-repeat center bottom; background-size:cover;}
.play-card{float:left; width:100%;}
.score-bar{float:left; width:100%;}
.score-bar-outer{float:left; width:100%; background:linear-gradient(to top, #ffbef9 0%, #fff0ff 100%); border-bottom:0.6vmin solid var(--bdr1); height:10vmin; border-radius:0 0 1.6vmin 1.6vmin;}
.score-bar-inner{float:left; width:100%; display:flex; justify-content:space-between; overflow: hidden; padding:0 1vmin; padding-bottom:2vmin;}
.score-bar-outer .container{max-width:146vmin;}

.score-box{float:left; width:100%; max-width:23.4vmin; padding-top:0.6vmin;}
.score-box-in{float:left; width:100%;}
.score-bx-label{float:left; width:100%; font-size:2.1vmin; color:var(--clr-dark); text-transform:uppercase; padding-left:5vmin;}
.score-bx{float:left; width:100%; position:relative; padding-left:2.5vmin;}
.bx-item{position:absolute; top:0; left:0; bottom:0; width:5.7vmin; display:flex; justify-content:center; align-items:center; z-index:1;}
.bx-item img{float:left; width:100%; filter:var(--drop-shadow);}
.bx-input{float:left; width:100%; background:var(--bg-dark); border:0.2px solid var(--bdr2); height:4.4vmin; display:flex; justify-content:center; align-items:center; border-radius:1.5vmin 1vmin 1vmin 1.5vmin; box-shadow:0 0px 0.6vmin #b830c0 inset; -webkit-box-shadow:0 0px 0.6vmin #b830c0 inset; transform:skewX(14deg); -webkit-transform:skewX(14deg);}
.bx-input-label{float:left; width:100%; font-size:3.2vmin; transform:skewX(-14deg); -webkit-transform:skewX(-14deg); padding:0 4vmin;}

.total-score-card .score-bx-label{padding-left:0; padding-right:5vmin; text-align:right;}
.total-score-card .bx-item{left:auto; right:0;}
.total-score-card .bx-input-label{text-align:right;}
.total-score-card .score-bx{padding-left:0; padding-right:2.5vmin;}
.total-score-card .bx-input{transform:skewX(-14deg); -webkit-transform:skewX(-14deg); border-radius:1vmin 1.5vmin 1.5vmin 1vmin;}
.total-score-card .bx-input-label{transform:skewX(14deg); -webkit-transform:skewX(14deg);}

.total-point-card{float:left; width:100%; max-width:63.06vmin; margin:0 1.4vmin;}
.total-point-inner{float:left; width:100%; position:relative;}
.point-bg{float:left; width:100%;}
.point-bg img{float:left; width:100%; filter:var(--drop-shadow);}


.point-info{position:absolute; top:0; left:0; z-index:1; display:flex; justify-content:center; align-items:center; height:100%; width:100%; padding-bottom:3vmin;}
.point-info-in{float:left; width:100%; display:flex; justify-content:center; align-items:center;}
.point-icon{float:left; width:5vmin; margin-right:1.6vmin;}
.point-icon img{float:left; width:100%; filter:var(--drop-shadow);}

.available-points{float:left; margin-right:1.2vmin;}
.total-pt{float:left; font-size:5.5vmin; text-shadow:var(--shadaw-text)}
.pt-label{float:left; font-size:2.7vmin; padding-top:1.5vmin;}


.play-card-inner{float:left; width:100%; display:flex; justify-content:center; align-items:center; padding:2vmin 1vmin;}
.play-card-start{float:left; width:100%; display:flex; align-items:center;}
.play-card-inner .container{max-width:148vmin;}

.verify-box{float:left; width:50%; max-width:50%;}
.verify-box-inner{float:left; width:100%; border-radius:2.4vmin; padding:1vmin; border:0.3vmin solid #ddd; background:var(--bg-img); height:60vmin; justify-content:center; align-items:center; display:flex; margin-top:4vmin;}
.verify-figure{float:left; width:80vmin; height:70vmin; pointer-events:none;}
.verify-canvas{float:left; width:100%; height:100%;}
.verify-figure img{float:left; width:100%;}
.blur-image .verify-figure img{filter:blur(5vmin)}
.blur-image .verify-figure canvas.blurlevel20{filter:blur(20px)}
.blur-image .verify-figure canvas.blurlevel19{filter:blur(19px)}
.blur-image .verify-figure canvas.blurlevel18{filter:blur(18px)}
.blur-image .verify-figure canvas.blurlevel17{filter:blur(17px)}
.blur-image .verify-figure canvas.blurlevel16{filter:blur(16px)}
.blur-image .verify-figure canvas.blurlevel15{filter:blur(15px)}
.blur-image .verify-figure canvas.blurlevel14{filter:blur(14px)}
.blur-image .verify-figure canvas.blurlevel13{filter:blur(13px)}
.blur-image .verify-figure canvas.blurlevel12{filter:blur(12px)}
.blur-image .verify-figure canvas.blurlevel11{filter:blur(11px)}
.blur-image .verify-figure canvas.blurlevel10{filter:blur(10px)}
.blur-image .verify-figure canvas.blurlevel9{filter:blur(9px)}
.blur-image .verify-figure canvas.blurlevel8{filter:blur(8px)}
.blur-image .verify-figure canvas.blurlevel7{filter:blur(7px)}
.blur-image .verify-figure canvas.blurlevel6{filter:blur(6px)}
.blur-image .verify-figure canvas.blurlevel5{filter:blur(5px)}
.blur-image .verify-figure canvas.blurlevel4{filter:blur(4px)}
.blur-image .verify-figure canvas.blurlevel3{filter:blur(3px)}
.blur-image .verify-figure canvas.blurlevel2{filter:blur(2px)}
.blur-image .verify-figure canvas.blurlevel1{filter:blur(1px)}

.ansver-aria{float:left; width:50%; max-width:50%;}
.ansver-aria-inner{float:left; width:100%; padding-left:13.3vmin;}
.play-boosts{float:left; width:100%; position:relative;}
.play-boost-in{float:left; width:100%; display:flex; justify-content:center; grid-gap:3.4vmin; gap:3.4vmin; padding:2vmin 6vmin; position:relative; z-index:1; align-items:flex-end;}
.boost-col{float:left; width:33.33%; position:relative;}
.boost-col:not(.freeze-boost):hover .boost-label, .boost-col:not(.freeze-boost):hover .boost-figure img{transform:translateY(-1vmin)}

.play-boosts:before, .play-boosts:after{float:left; width:60%; position:absolute; bottom:-0.2vmin; left:1.4vmin; z-index:0; height:4.6vmin; content:''; border-radius:0.7vmin 0 0 0; transform:skewX(-30deg); background:linear-gradient(to top, #fff 0%, #e289bd 50%, #be2ccd 100%);}
.play-boosts:after{transform:skewX(30deg); left:auto; right:1.4vmin; border-radius:0 0.7vmin 0 0;}
.boost-figure{float:left; width:100%; position:relative;}
.boost-figure img{float:left; width:100%; filter:drop-shadow(0 0 0.5vmin rgba(255,44,213)); position:relative; z-index:1; transition:all 0.3s ease 0s;}
.boost-figure:before{position:absolute; bottom:-0.5vmin; margin:0 auto; left:0; right:0; width:100%; height:2vmin; border-radius:100%; content:''; background:#6a0680; filter:blur(0.2vmin); opacity:0.7;}

.ansver-box{float:left; width:100%; position:relative;}
.ansver-box:before{position:absolute; top:0; left:0; height:100%; width:11.8vmin; background:url("../images/arrow-img.png") no-repeat 0 0; background-size:100%; content:''; left:-11.7vmin; background-position:center center;}
.ansver-box-in{float:left; width:100%; background:var(--bg-white); padding:3vmin 4vmin; border-radius:0.4vmin 0.4vmin 2.4vmin 2.4vmin;}
.boost-label{float:left; width:100%; font-size:2.1vmin; text-transform:uppercase; text-align:center; line-height:1em; margin-bottom:0.8vmin; transition:all 0.3s ease 0s;}
.ans-btn-block{float:left; width:100%; margin-bottom:0.8vmin;}
.ans-btn-block:last-child{margin-bottom:0;}
.ans-btn-block .btn.add-tip{background:var(--bg-btn-tip); color:var(--clr-btn-active); box-shadow:var(--shadow-btn-active);}
.ans-btn-block .btn.win-tip{background:var(--bg-btn-win); color:var(--clr-btn-active); box-shadow:var(--shadow-btn-win); border-color:var(--bdr-btn-win);}
.ans-btn-block .btn.loss-tip{background:var(--bg-btn-loss); color:var(--clr-btn-active); box-shadow:var(--shadow-btn-loss); border-color:var(--bdr-btn-loss);}


/*===modal Popup Css===*/
body.show-modal{position:fixed; top:0; height:100%; width:100%; overflow:hidden;}
body.in-iframe.show-modal .main-section{overflow:hidden !important;}
.modal{float:left; width:100%; height:100%; position:fixed; top:0; left:0; z-index:13; background:rgba(0,0,0,0.8); display: none; overflow:hidden; padding:0 10px;}
.modal-contenier{float:left; width:100%; position:relative; min-height:100%; display:flex; align-items:center; justify-content:center; padding:1.4vmin 0;}
.modal-outer{float:left; width:100%; max-width:750px; position:relative; z-index:2;}
.modal-body{float:left; width:100%; position:relative; filter:drop-shadow(0 0 1vmin rgba(255,44,213));}
.modal-cover{float:left; width:100%; position:absolute; top:0; left:0; z-index:1; padding:1.5vmin;}
.popup-info{z-index:1; position:relative; display:block; width:100%; float:left;}
.modal-head{float:left; width:100%; position:relative;}
.modal-head-title{color:#fff; font-size:16px; text-transform:uppercase; padding-top:3px;  }
.modal-overlay{position:fixed; top:0; left:0; z-index:1; float:left; height:100vh; width:100%; cursor:pointer;}
.close-btn{position:absolute; bottom:-46px; left:0; right:0; margin:40px auto 10px; display:flex; justify-content:center;}
.close-btn .icon{font-size:24px; color:#fff;}
.modal-cancle{float:left; width:100%; padding:18px 0 0; text-align:center;}
.modal-cancle a{font-size:14px;   color:#fff;}
.popup-close{position:absolute; bottom:-6vmin; right:0; left:0; margin:0 auto; z-index:2; height:4.996vmin; width:4.996vmin; border-radius:50%; filter:drop-shadow(0 0 1vmin rgba(255,44,213));}
.modal-head .popup-close{position:absolute; bottom:auto; top:-7.5vmin; right:0; left:auto; z-index:2; height:4.996vmin; width:4.996vmin; border-radius:50%;}
.popup-close img{float:left; width:100%; filter:drop-shadow(2px 4px 6px #000);}


.button-bar{float:left; width:100%; padding:0.8vmin 0;}
.button-container{margin:0 -4px;}
.button-bar-outer{float:left; width:100%; display:flex; grid-gap:1.2vmin; gap:1.2vmin;}
.full-btn-bar .button-bar-outer{flex-wrap:wrap;}
.full-btn-bar .button-bar-outer .col{width:100%; flex:inherit; margin-bottom:0.8vmin;}
.full-btn-bar .button-bar-outer .col:last-child{margin-bottom:0;}
.button-bar-outer .col{flex:1;}
.button-bar-outer .btn{white-space:nowrap;}

/*Summary Modal CSS*/
.modal-ribbon{float:left; width:100%; display:flex; justify-content:center; align-items:center;}
.ribbon-fig{float:left; width:100%; max-width:27.4vmin;}
.ribbon-fig img{float:left; width:100%;}
.modal-bg-wrap{float:left; width:100%;}
.modal-bg{float:left; width:100%;}
.modal-bg img{float:left; width:100%;}
.summary-modal .modal-outer{max-width:71.8vmin;}
.head-bg-weap{float:left; width:100%; display:flex; justify-content:center; align-items:center;}
.head-bg{float:left; width:100%; max-width:36.60vmin;}
.head-bg img{float:left; width:100%; filter:var(--drop-shadow);}
.modal-head-bar{position:absolute; top:0; left:0; width:100%; float:left; height:100%; display:flex; justify-content:center; align-items:center;     padding-bottom:2vmin;}
.head-bar-label{font-size:4.5vmin; text-transform:uppercase; text-shadow:var(--text-shadaw);}
.summary-content{float:left; width:100%; padding:3.8vmin 5vmin;}
.score-summary{float:left;width:100%; margin-bottom:3vmin;}
.summary-list {float: left;width:100%;}
.summary-item{float: left;width:100%; margin-bottom:1.2vmin;}
.summary-item:last-child{margin-bottom:0px;}
.summary-bar{float:left; width:100%; display:flex; grid-gap:1.2vmin; gap:1.2vmin;}
.score-name{float:left; flex:1; color:var(--clr-black); display:flex; align-items:center; background:var(--bg-white); border-radius:1.6vmin; height:7.6vmin; box-shadow:0px 0px 2.4vmin rgba(53, 18, 102, 0.70) inset; text-transform:uppercase; padding:0 3vmin; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(to bottom, #2e0f61, #82379a) border-box; border:0.4vmin solid transparent;}
.score-text{font-size:2.8vmin;}
.summary-rank{float:left; width:18.2vmin; min-width:18.2vmin; color:var(--clr-black); display:flex; align-items:center; background:var(--bg-white); border-radius:1.6vmin; height:7.6vmin; box-shadow:0px 0px 2.4vmin rgba(53, 18, 102, 0.70) inset; text-transform:uppercase; padding:0 3vmin; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(to bottom, #2e0f61, #82379a) border-box; border:0.4vmin solid transparent;}
.summary-point{font-size:2.8vmin; text-align:center; width:100%; font-size:4vmin; color:var(--clr-dark);}
.play-agian-btn .btn-text{font-size:4.5vmin;}


.how-to-modal .modal-outer{max-width:99vmin;}
.how-to-content{float:left; width:100%; padding:3.8vmin 5vmin;}
.how-to-top{float:left; width:100%; text-align:center;}
.how-to-pre{float:left; width:100%; font-size:2.4vmin; font-weight:600; color:var(--clr-white); font-family:var(--font-pre); font-weight:600;}
.how-to-pick-wrap{float:left; width:100%;}
.how-to-pick-block{float:left; width:100%; display:flex; justify-content:center; align-items:center; margin:1.5vmin 0;}
.how-to-pick{float:left; width:100%; max-width:27.6vmin;}
.how-to-pick img{float:left; width:100%;}
.how-to-one .how-to-pick-block{margin-top:8vmin;}
.modal-actions .button-bar-outer{display:flex; justify-content:center; align-items:center; margin-top:2.8vmin; grid-gap:4vmin; gap:4vmin;}
.modal-actions .col{flex:inherit; width:25.1vmin;}
.modal-actions .col .btn{width:auto;}
.modal-actions .btn-text{font-size:4.5vmin;}
.modal-actions .play-btn{width:32.05vmin;}
.how-to-modal .head-bg{max-width:44.85vmin;}

.how-to-info{float:left; width:100%; margin-top:1.5vmin;}
.how-to-list{float:left; width:100%;}
.how-to-item{float:left; width:100%; margin-bottom:1vmin; background:var(--bg-white); border-radius:1.6vmin;  box-shadow:0px 0px 2.4vmin rgba(53, 18, 102, 0.70) inset; text-transform:uppercase; padding:0.8vmin 2.2vmin; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(to bottom, #2e0f61, #82379a) border-box; border:0.4vmin solid transparent;}
.how-to-item:last-child{margin-bottom:0;}
.how-to-card{float:left; width:100%; display:flex; align-items:center;}
.how-to-fig{float:left; width:9.5vmin; min-width:9.5vmin; position:relative; margin-right:2.6vmin;}
.how-to-fig:before{position:absolute; bottom:-0.5vmin; margin:0 auto; left:0; right:0; width:100%; height:2vmin; border-radius:100%; content:''; background:#6a0680; filter:blur(0.2vmin); opacity:0.5;}
.how-to-fig img{float:left; width:100%; position:relative; z-index:1;}
.how-to-detail{float:left; flex:1; overflow:hidden;}
.how-to-title{float:left; width:100%; font-size:2.4vmin; text-transform:uppercase; color:var(--clr-black); font-family:var(--font-pre); font-weight:800;}
.how-to-pre-label{float:left; width:100%; font-size:1.7vmin; color:var(--clr-black); font-family:var(--font-pre); font-weight:500; text-transform:none;}

.how-to-three .how-to-content{padding:3.8vmin 7vmin;}
.points-figure{margin-bottom:0;}
.points-figure .how-to-pick{max-width:44vmin;}

/*=======LOADER CSS=====*/
#ajax_data{width:100%} 
.loading-wrapper{position:fixed; float:left; width:100%; top:0; left:0; right:0; bottom:0; z-index:12; text-align:center; background:var(--bg-body);}
.loading-wrapper.dark-loader{--clr-loader:#5b247f;}
.page-overlay{float:left; width:100%; height:100%; display:flex; align-items:center; justify-content:center; flex-wrap:wrap;}
.loading-wrapper.content-loader{position:absolute; height:100%;}	
.loading-wrapper.content-relative{position:relative; height:200px; background:none; z-index:1;}
.loading-wrapper.content-relative .page-overlay{height:100%; display:flex; align-items:center; justify-content:center;}
.loader-ring{display:inline-block; position:relative; width:42px; height:42px; border:3px solid var(--clr-loader); border-color:var(--clr-loader) transparent var(--clr-loader) var(--clr-loader); animation:lds-ring 650ms linear infinite; border-radius:50%;}
@keyframes lds-ring{
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/*Button Hover CSS*/
.base-btn{position:relative; overflow:hidden;}
.base-btn:before{content:''; position:absolute; top:1vmin; bottom:1vmin; left:1vmin; right:1vmin; float:left; background-image:url("../images/button_bg.png"), url("../images/button_bg.png"); opacity:0; transition:background-position 3s; background-position:bottom left, top right, 0 0, 0 0; background-clip:border-box; pointer-events:none; filter:blur(3px);}
.base-btn:hover:before {animation-name:shine; animation-delay:0.02s; animation-duration:3s; animation-fill-mode:both; animation-iteration-count: infinite;}
@keyframes shine{
	0%{opacity:1; background-position:top left, bottom right, 0 0, 0 0;}
	100%{opacity:1; background-position:bottom right, top left, 0 0, 0 0;}
}


/*================Animation CSS Strat==================*/
.btn-col, .verify-box, .ansver-aria{-webkit-animation-name:fadeIn; animation-name:fadeIn; animation-delay:0.6s; -webkit-animation-uration:0.5s;  animation-duration:0.5s; -webkit-animation-fill-mode:both; animation-fill-mode:both;}
 @keyframes fadeIn {
     0% {opacity:0;}
     100%{opacity:1;}
}
 .diff-title-label, .diff-title-pre{-webkit-animation-name:zoomInDown; animation-name:zoomInDown; -webkit-animation-duration:0.8s; animation-duration:0.8s; -webkit-animation-fill-mode:both; animation-fill-mode:both;}
 @keyframes zoomInDown{
     0% {opacity:0; -webkit-transform:scale3d(.1, .1, .1) translate3d(0, -1000px, 0); transform:scale3d(.1, .1, .1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function:cubic-bezier(0.550, 0.055, 0.675, 0.190);}
     60% {opacity:1; -webkit-transform:scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform:scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function:cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function:cubic-bezier(0.175, 0.885, 0.320, 1);}
}
 .score-bar-outer{-webkit-animation-name:slideInDown; animation-name:slideInDown; -webkit-animation-duration:1s; animation-duration:1s; -webkit-animation-fill-mode:both; animation-fill-mode:both;}
 @keyframes slideInDown {
     0% {-webkit-transform:translateY(-100%); transform:translateY(-100%); visibility:visible;}
     100% {-webkit-transform:translateY(0); transform: translateY(0);}
}
 .total-point-card, .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;}
}
 .score-card{-webkit-animation-name:bounceInLeft; animation-name:bounceInLeft; -webkit-animation-duration:1s; animation-duration:1s; -webkit-animation-fill-mode:both; animation-fill-mode:both;}
 @keyframes bounceInLeft{
	 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(-3000px, 0, 0); transform:translate3d(-3000px, 0, 0);}
     60% {opacity:1; -webkit-transform:translate3d(25px, 0, 0); transform:translate3d(25px, 0, 0);
    }
     75% {-webkit-transform: translate3d(-10px, 0, 0); transform:translate3d(-10px, 0, 0);}
     90% {-webkit-transform:translate3d(5px, 0, 0); transform:translate3d(5px, 0, 0);}
     100% {-webkit-transform:none; transform:none;}
}
 .total-score-card{-webkit-animation-name:bounceInRight; animation-name:bounceInRight; -webkit-animation-duration:1s; animation-duration:1s; -webkit-animation-fill-mode:both; animation-fill-mode:both;}
 @keyframes bounceInRight{
	 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(3000px, 0, 0); transform:translate3d(3000px, 0, 0);}
     60% {opacity:1; -webkit-transform:translate3d(-25px, 0, 0); transform:translate3d(-25px, 0, 0);}
     75% {-webkit-transform:translate3d(10px, 0, 0); transform:translate3d(10px, 0, 0);}
     90% {-webkit-transform:translate3d(-5px, 0, 0); transform:translate3d(-5px, 0, 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);}
}

.score-card{animation-delay:1s;}
.total-score-card{animation-delay:1s;}
.btn-col:nth-child(2){animation-delay:0.9s;}
.btn-col:nth-child(3){animation-delay:1.2s;}
.score-bar-outer{animation-delay:0.5s;  -webkit-animation-duration:0.5s;  animation-duration:0.5s;}
.total-point-card{animation-delay:0.5s; -webkit-animation-duration:1.5s; animation-duration:1.5s;}
.verify-box{animation-delay:0.9s;}
.ansver-aria{animation-delay:1.2s;}
/*================Animation CSS End==================*/


.pause-btn{float:left; width:7vmin; position:fixed; top:12vmin; right:3vmin; -webkit-animation-name:fadeIn; animation-name:fadeIn; animation-delay:1s; -webkit-animation-uration:0.5s;  animation-duration:0.5s; -webkit-animation-fill-mode:both; animation-fill-mode:both;}
.pause{float:left; width:100%;}
.pause img{float:left; width:100%;}

.pause-modal .modal-outer{max-width:71.8vmin;}
.pause-actions .button-bar-outer{flex-wrap:wrap;}
.pause-actions .col{max-width:100%; width:100%; min-width:100%;}
.pause-modal .summary-content{padding:3.4vmin 15vmin 0;}
.pause-modal .summary-content .btn-text{font-size:4.2vmin;padding-bottom:1.6vmin;}

.chart-outer{float:left; width:100%; height:100%; justify-content:center; align-items:center; position:absolute; top:0; left:0; z-index:2; padding-bottom:0.8vmin; display:none;}
.chart-fill{float:left; height:7.2vmin; width:7.2vmin; position:relative; z-index:1;}
.chart-fill canvas{float:left; height:100% !important; width:100% !important; filter:drop-shadow(2px 3px 4px rgba(0,0,0,0.3));}
.chart-liner{position:absolute; font-size:3.4vmin; top:0; left:0; height:100%; width:100%; float:left; display:flex; justify-content:center; align-items:center; color:#fff; font-weight:normal; padding-bottom:0.8vmin; filter:drop-shadow(0.1vmin 0.4vmin 0.1vmin #4c2677);}
.time-freeze-img, .freeze-boost .time-default-img{display:none;}
.freeze-boost .time-freeze-img{display:block;}
.freeze-boost .chart-outer{display:flex;}

.quickplay .score-box.score-card{display:none;}
.quickplay .score-bar-inner{justify-content:center;}
.quickplay .score-box{max-width:22.5vmin;}
.quickplay .total-score-card .bx-item{left:0; right:auto;}
.quickplay .total-score-card .score-bx{padding:0 0 0 2.8vmin;}
.quickplay .total-score-card .bx-input{transform:none; border-radius:0.6vmin;}
.quickplay .total-score-card .bx-input-label{transform:none; text-align:center; padding:0 3vmin;}
.quickplay .total-score-card .score-bx-label{text-align:center; padding:0 0 0 3vmin;}

/*scoring How To CSS Start*/
.scoring-info{float:left; width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;margin-top:2vmin;}
.scoring-card{float:left; width:100%; display:flex; justify-content:center; align-items:center;}
.scoring-inner{float:left; width:100%; max-width:74%; margin-bottom:2vmin;}
.scoring-list{float:left;width:100%;padding-top:1vmin;background:var(--bg-white);border-radius:1.6vmin;box-shadow: 0px 0px 2.4vmin rgba(53, 18, 102, 0.70) inset;text-transform: uppercase;padding: 0.8vmin 1.2vmin;background: linear-gradient(#fff, #fff) padding-box, linear-gradient(to bottom, #2e0f61, #82379a) border-box;border: 0.4vmin solid transparent;}
.scoring-item{float:left; width:100%; border-bottom:0.3vmin solid #2e0f61;}
.scoring-item:last-child{border-bottom:0;margin-bottom:0;}
.scoring-bx{float:left; width:100%; padding:1.4vmin 2vmin; display:flex; align-items:center; justify-content:space-between;font-size:3vmin;color: var(--clr-black);font-family: var(--font-pre);font-weight:700;}
.score-type{float:left; display:flex; align-items:center;}
.type-figure{float:left; width:6vmin; min-width:6vmin; margin-right:2vmin;}
.type-figure img{float:left; width:100%;}
.type-label{float:left; width:100%;}
.scoring-points-col{float:left; margin-left:1vmin; display:flex; align-items:center; min-width:49%;}
.scoring-point{float:right; min-width:10vmin; text-align:right; color:#b03ad5; flex:1; text-align:right;}
.scoring-info .begin-point{justify-content:space-between;}
.scoring-info .ht-heading-text p img{top:2px;}
.arrow-point{position:relative; min-width:1px; min-width:10vmin;}
.arrow-point img{position:static !important;}
.begin-point{display:flex; align-items:center; align-items:flex-start; width:20px;}
.scoring-equel{float:left; min-width:4vmin;}
.scoring-title{float:left; width:100%; display:flex; justify-content:center; align-items:center; margin-bottom:-1.8vmin; position:relative; z-index:1; margin-top:1vmin;}
.scoring-title-label { float: left; width: 100%; max-width:22vmin; text-align: center; font-size:2vmin; font-weight: 600; font-family: var(--font-pre); text-transform: uppercase; letter-spacing: 0px; background: var(--bg-dark); border: 0.2px solid #2e0f61; border-radius: 0.8vmin; padding: 0.5vmin; }
.how-to-scoring .how-to-prelabel{float:left;width:100%;font-weight:600;color:var(--clr-white);font-family:var(--font-pre);font-weight:600;font-size:2.8vmin;text-align:center;}


.mob-item{display:none !important;}
.desk-item{display:block !important;}
@media only screen and (max-width:992px) and (orientation : portrait) {
.verify-figure{width:80vmin; height:50vmin;}	
}

@media only screen and (max-width:768px) and (orientation : portrait) {
	
	:root {
	--bg-body:url(../images/splash-mob-bg.jpg);
	--bg-difficulty:url(../images/difficulty-mob-bg.jpg);
	--bg-play:url(../images/play-mob-bg.jpg);	
	}
	
	.diff-actions .base-btn{max-width:38vmax;}  
	.diff-actions .btn-text{font-size:4.2vmax;}
	.diff-title-label{font-size:5.2vmax;}
	.diff-title{margin-bottom:7.2vmin;}
	
	.game-actions .base-btn{max-width:38vmax;}  
	.game-actions .btn-text{font-size:4.2vmax;}
	.brand-logo{max-width:55vmax;}
	.splash-card{margin-top:15vmax;}
	
	.main-section.play-wrap{background-position:center top;}
	.play-card-start{flex-direction:column;}
	.verify-box-inner{border:0; background:none; margin-top:0; min-height:inherit; padding:0 0 3.5vmax;}
	.verify-box{width:40vmax; max-width:100%;}
	.boost-col{width:12vmax;}
	.boost-label{font-size:2.2vmax;}
	.play-boosts{overflow:hidden;}
	.play-boosts:before, .play-boosts:after{height:4vmax;}
	.ansver-box:before{display:none;}
	.ansver-aria-inner{padding:0 2.3vmin;}
	.ansver-aria{width:100%; max-width:100%;}
	.ansver-box-in .btn{height:6.7vmax; border-width:0.3vmax 0.3vmax 0.5vmax; font-size:5.7vmin; border-radius:1.4vmax;}
	.ans-btn-block{margin-bottom:0.8vmax;}
	
	.score-bar-outer{height:7vmax; border-radius:0 0 2.6vmin 2.6vmin; border-bottom-width:0.4vmax;}
	.score-box{max-width:19.5vmin;}
	.score-bx-label{font-size:1.6vmax;}
	.bx-input{height:3.1vmax;}
	.bx-item{width:4vmax;}
	.bx-input-label{padding-left:6vmin; padding-right:1vmin; font-size:4vmin;}
	.total-score-card .bx-input-label{padding-right:6vmin; padding-left:1vmin;}
	.play-boosts:before, .play-boosts:after{left:2.3vmax; transform:skewX(-52deg);}
	.play-boosts:after{transform:skewX(52deg); left:auto; right:2.3vmax;}
	
	.verify-box-inner{height:30vmax;}
	.diff-title-pre br{display:none;}
}

@media only screen and (max-width:767px) and (orientation : portrait) {
:root {
	--shadaw-text:0 0.5vmin 0.8vmin rgba(0,0,0,0.3);
}
	.desk-item{display:none !important;}
	.mob-item{display:block !important;}
	.score-bar-outer{padding:0 2vmin;}
	.score-bx-label{padding-left:7vmin;}
	.total-score-card .score-bx-label{padding-right:7vmin;}
	.summary-modal .modal-outer{max-width:88vmin;}
	.pause-modal .modal-outer{max-width:88vmin;}
	.head-bg{max-width:57.6vmin;}
	.head-bar-label{font-size:7.2vmin;}
	.modal-head-bar{padding-bottom:3.3vmin;}
	.ribbon-fig{max-width:46vmin;}
	.score-name{height:12.8vmin; border-radius:3.4vmin; border-width:0.6vmin;}
	.score-text{font-size:4.27vmin;}
	.summary-rank{height:12.8vmin; width:27.2vmin; border-radius:3.4vmin; border-width:0.6vmin;}
	.summary-point{font-size:6.4vmin;}
	.summary-content{padding:5.5vmin 3vmin;}
	.play-agian-btn .btn-text{font-size:7.7vmin;}
	
	.how-to-content{padding:3.8vmin 2vmin;}
	.how-to-modal .modal-outer{max-width:84vmin;}
	.how-to-modal .head-bg{max-width:57.6vmin;}
	.how-to-modal .modal-cover{padding:2.6vmin 4vmin;}
	.how-to-pre{font-size:3.5vmin;}
	.how-to-pick{max-width:44.6vmin;}
	.popup-close{height:9vmin; width:9vmin; bottom:-11vmin;}
	.modal-head .popup-close{top:-12.5vmin; right:-2vmin; bottom:auto;}
	.modal-actions .col{width:38vmin;}
	.modal-actions .play-btn{width:43vmin;}
	.modal-actions .btn-text{font-size:6.6vmin;}
	.points-figure .how-to-pick{max-width:100%;}
	.how-to-three .how-to-content{padding:3vmin 1.6vmin;}
	.how-to-fig{width:19vmin; min-width:19vmin;}
	.how-to-title{font-size:4vmin;}
	.how-to-pre-label{font-size:2.93332vmin;}
	.how-to-item{padding:1.2vmin 2vmin; border-width:0.6vmin; border-radius:2.6vmin;}
	.how-to-item *{letter-spacing:normal;}
	.how-to-one .how-to-pick-block{margin-top:18vmin;}
	
	.total-point-card{max-width:54vmin;}
	.point-icon{width:7vmin;}
	.total-pt{font-size:7.4vmin;}
	.pt-label{font-size:3.7vmin;}
	
	.pause-btn{top:8.3vmax; bottom:auto;}
	.chart-fill{width:12vmin; height:12vmin;}
	.chart-liner{font-size:6vmin;}
	
	.pause-modal .summary-content{padding-top:4vmin;}
	.pause-modal .summary-content .btn-text{font-size:6.1vmin;}
	.pause-actions .col{margin:1vmin 0;}
	.verify-figure{width:74vw; height:74vw;}	
	.bx-input-label{font-size:3vmin;}
}

@media only screen and (min-device-width: 428px) and (max-device-width: 926px) and (orientation: landscape) {
	.how-to-pre-label{font-size:2vmin;}		
	.how-to-title{font-size:2.7vmin;}	
}


@media (max-width :480px) and (orientation : portrait) {
	.scoring-inner{margin:0px; max-width:100%;}
	.scoring-item{margin-bottom:0.8vmin;}
	.type-figure{width:9vmin; min-width:9vmin; margin-right:1.8vmin;}
	.scoring-bx{font-size:4.5vmin;}
	.scoring-point{min-width:20vmin;}
	.scoring-title-label{max-width:34.33vmin;font-size: 3.2vmin;}
	.scoring-title{margin-bottom:-2.8vmin;}
	.scoring-card{padding:0 1vmin;}
	.scoring-list{padding:2vmin 1.2vmin 1.2vmin;border: 0.6vmin solid transparent;}
	.how-to-scoring .popup-info{padding-top:4vmin;}
	.scoring-info{margin-top:5vmin;}
	.how-to-scoring .how-to-prelabel{font-size:4vmin;margin-bottom:1vmin;}
}

@media only screen and (min-width:280px) and (max-width:1023px) and (orientation: landscape){
	.modal-parent .how-to-modal.modal-landscape .modal-body{max-width:570px;}
}