/*Fonts*/
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900');/* font-family: "Roboto", sans-serif; */
@import url('https://fonts.googleapis.com/css2?family=Saira:ital,wght@0,100..900;1,100..900&display=swap'); /* font-family: "Saira", sans-serif; */

:root{
	/* Font root */
	--font-base:"Saira", sans-serif;	
	--font-pre:"Roboto", sans-serif;	

	--body-bg:repeating-conic-gradient(from 0deg,#d45a1a 0deg 10deg,#c24e14 10deg 20deg);
	--clr-base:#000000;
	--clr-action:#af3900;

	--scrollBar-bg:#ffffff;
	--scrollBar-clr:#af3900;
	
	/* Loader Root */
	--loader-bg:#f0f0f0;
	--loader-clr:#af3900;
	
	--home-bg:url(../images/nba-quiz/splash-bg.webp);
	--gameplay-bg:url(../images/nba-quiz/gameplay-bg.webp);
}

*{margin:0;padding:0;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-touch-callout:none;}
:focus{outline:none;}
html{-webkit-text-size-adjust:none;}
body{font-size:12px;color:var(--clr-base);background:var(--body-bg);font-family:var(--font-base);font-weight:normal;}
a{text-decoration:none;outline:none;color:var(--clr-action);outline:none;cursor:pointer;}
a:hover, a:focus{text-decoration:none;outline:none;}
.btn:hover, .btn:focus, .btn.focus,.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:normal;font-size:13px;color:var(--clr-base);font-weight:normal;margin:0;padding:0;display:block;}
*{box-sizing:border-box;-webkit-box-sizing:border-box;}

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

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

/*INPUT CSS*/
.form-group{float:left;width:100%;margin-top:18px;position:relative;}
.input-group{float:left;width:100%;position:relative;}
select, select option{width:100%;box-sizing:border-box;-moz-appearance:none;-ms-appearance:none;-webkit-appearance:none;border-radius:0;}
.form-control{float:left;width:100%;font-size:16px;outline:medium none;height:46px;color:#011a2b;border:2px solid #616163;background:#ffffff;line-height:42px;padding:0 10px;transition:all 0.4s ease 0s;border-radius:2px;font-family:var(--font-base);}
.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;}
.addon{display:flex;align-items:center;}
.input-label{float:left;width:100%;color:#111;font-size:14px;  margin-bottom:2px;}
.form-control::-ms-clear{display:none;}
.form-control::-ms-expand{display:none;}
.form-control::-ms-clear, .form-control::-ms-reveal{display:none;}
.custom-select select:focus::-ms-value{color:transparent;font-size:0;background:transparent;}
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button{ -webkit-appearance:none;margin:0;}
input[type='number']{-moz-appearance:textfield;}


/*NORMAL CSS*/
::selection{background:#0067ab;color:#fff;}
::-moz-selection{background:#0067ab;color:#fff;}
.container{margin:0 auto;width:100%;max-width:960px;padding:0px 8px;position:relative;overflow:hidden;}
.pull-left{float:left;}
.pull-right{float:right;}
.clearfix{clear:both;}
.event-none{pointer-events:none;}
.wcard{float:left;width:100%;padding:0px 6px;background:none;border-radius:4px;}
.disabled{pointer-events:none;opacity:0.4;}
.block{float:left;width:100%;}
.hidden{display:none;}

.btn {display:flex;align-items:center;justify-content:center;grid-gap:4px;width: 100%;padding: 0 12px;text-align: center;color: var(--clr-base);font-size: 14px;font-weight: 500;background: #f9f9f9;-webkit-transition: all 0.5s ease 0s;transition: all 0.5s ease 0s;border: 0;box-shadow: none;text-transform: uppercase;cursor: pointer; }

.btn-img{float:left;width:100%;transition: all 0.5s ease 0s;}
.btn-img img{float:left;width:100%;}
.btn-img:hover{transform:scale(0.98);}

/*COLs CSS*/
.icon{display:inline-block;font-size:20px;vertical-align:middle;}

/* Loader Start */
.loading-wrapper{position:fixed;float:left;width:100%;top:0;left:0;right:0;bottom:0;z-index:12;text-align:center;background:var(--loader-bg);}
.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;}
.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:5px solid var(--loader-clr);border-color:var(--loader-clr) transparent var(--loader-clr) var(--loader-clr);animation:loader-ring 650ms linear infinite;border-radius:50%;}
@keyframes loader-ring{
0%{
   transform:rotate(0deg);
}
100%{
   transform:rotate(360deg);
}
}
/* Loader End */
/*Perfect ScrollBar*/
*{scrollbar-color:var(--scrollBar-clr) auto;}
*::-webkit-scrollbar{width:5px;border-radius:20px;height:5px;}
*::-webkit-scrollbar-track{background:var(--scrollBar-bg);}
*::-webkit-scrollbar-thumb{background-color:var(--scrollBar-clr);border-radius:20px;width:5px;height:5px;}
/*Perfect ScrollBar*/

/* Button Bar */
.button-bar{float:left;width:100%;padding:8px 0px;}
.button-bar-outer{float:left;width:100%;display:flex;grid-gap:8px;}
.button-bar-outer .col{flex:1;}
/*======= BUTTON CSS End =======*/


.main-section{float:left;width:100%;min-height:100dvh;position:relative; }
.page-container{float:left;width:100%;}
.mid-wrapper{float:left;width:100%;position:relative;z-index:1;}

/*========Splash Screen CSS========*/
.home-widget{float:left;width:100%;}
.home-info{float:left;width:100%;min-height:100dvh;display:flex;justify-content:center;align-items:center;background:var(--home-bg);background-position:center center;
background-size:cover;}

.home-content{float:left;width:100%;}
.home-content .container{max-width:1600px;}
.home-content .container .game-question-block{padding-top:2vmin;}
.home-content .figure-logo{float:left;width:100%;max-width:84.022vmin;}

.game-logo{float:left;width:100%;display:flex;align-items:center;justify-content:center;}
.figure-logo{float:left;width:100%;}
.figure-logo img{float:left;width:100%;}

.game-question-card{float:left;width:100%;margin-bottom:6vmin;}
.game-question-block{float:left;width:100%;display:flex;justify-content:center;padding:0px 2vmin;}
.game-question{float:left;width:auto;background:#441905;transform:skewX(-14deg);border-radius:0.5vmin;position:relative;}
.game-question-label{float:left;width:100%;transform:skewX(14deg);font-family:var(--font-base);font-weight:bold;font-size:7vmin;text-align:center;text-transform:uppercase;color:#ffffff;font-style:italic;padding:1vmin 3vmin;line-height:1.2em;}

.question-before,.question-after{transform:skewX(14deg);position:absolute;}
.question-before img,.question-after img{float:left;width:100%;}
.question-before{right:calc(100% + 1vmin);bottom:2vmin;width:6.5vmin;}
.question-after{left:100%;bottom:2.5vmin;width:5.4vmin;}

.game-button-bar{display:flex;justify-content:center;margin:0px;padding:0px;}
.game-button-bar .button-bar-outer{max-width:46vmin;}

/*========Game Play Screen CSS========*/
.gameplay-widget{float:left;width:100%;}
.gameplay-info{float:left;width:100%;min-height:100dvh;display:flex;justify-content:center;background:var(--gameplay-bg);background-position:top center;background-size:cover;}

.gameplay-content{float:left;width:100%;}
.gameplay-content .figure-logo{float:left;width:100%;max-width:280px;}
.gameplay-content .game-question-card{margin:0px;}
.gameplay-content .game-question-label{font-size:36px;padding:10px 20px;}


.question-score-card{float:left;width:100%;}
.question-score-outer{float:left;width:100%;}
.question-score-block{float:left;width:100%;margin:20px 0px 12px;}
.question-score-inner{float:left;width:100%;display:flex;gap:10px;align-items:center;}
.question-box{float:left;flex:1;}
.question-box-in{float:left;width:100%;display:flex;align-items:center;gap:10px;}
.question-box-in .form-label{font-size:20px;font-weight:700;font-style:italic;line-height:1.1em;color:#ffffff;max-width:102px;text-transform:uppercase;text-align:right;}
.question-box-in .form-group{margin:0px;}
.question-box-in .form-group .form-control{margin:0px;border-radius:4px;border:2px solid rgb(68, 25, 5);background-color: rgb(255, 255, 255);}
.question-box-in .form-btn{float:left;min-width:100px;width:100px;}

.score-box{float:left;width:33.33%;display:flex;justify-content:center;}
.score-box-inner{float:left;width:100%;display:inline-flex;gap:6px;}
.score-box-in{float:left;width:calc(50% - 3px);}
.score-bx{float:left;width:100%;position:relative;padding-left:32px;display:flex;align-items:center;}
.bx-item{float:left;width:64px;min-width:64px;position:absolute;left:0px;top:auto;bottom:auto;}
.bx-item img{float:left;width:100%;}
.bx-input{float:left;flex:1;width:100%;}
.bx-label{float:left;width:100%;border:2px solid rgb(251, 185, 71);background-color:rgba(68, 25, 5, 0.9);height:24px;color:#ffffff;font-size:12px;font-style:italic;padding-left:32px;text-transform:uppercase;max-width:100px;border-radius:0px 20px 0px 0px;padding-top:0px;margin-bottom:-4px;font-weight:700;}

.bx-input-label{float:left;width:100%;border-radius:10px;background-color:#441905;padding:1px;}
.bx-input-label-inner{float:left;width:100%;border-radius:10px;background-color:#822e05;border:1px solid #fcbf48;height:34px;display:flex;align-items:center;padding-left:32px;color:#fbc42e;font-size:18px;font-style:italic;font-weight:700;}

.answer-aria-card{float:left;width:100%;}
.answer-aria-outer{float:left;width:100%;margin-bottom:24px;padding:8px 0px;}
.answer-wcard{float:left;width:100%;background:#fff;border:1px solid rgba(17, 17, 17, 0.2);border-radius:10px;box-shadow:0px 0px 12px 0px rgba(0, 0, 0, 0.22);padding:8px;}
.answer-wcard-inner{float:left;width:100%;}
.answer-header{float:left;width:100%;}
.answer-header .answer-list{display:flex;gap:10px;}
.answer-header .answer-list .answer-item{float:left;flex:1;}
.answer-body{float:left;width:100%;}
.answer-listing{float:left;width:100%;}
.answer-list{float:left;width:100%;column-count:3;column-gap:10px;line-height:1;}
.answer-item{break-inside:avoid-column;-webkit-column-break-inside:avoid;width:100%;display:inline-block;}

.answer-item-inner{float:left;width:100%;display:flex;justify-content:space-between;align-items:center;gap:2px;border-radius:0px;line-height:normal;}
.answer-cbox{float:left;padding:4px 10px;background:#faf3f0;height:28px;color:#af3900;}

/* Year Box */
.answer-year{float:left;min-width:62px;font-weight:600;text-align:center;}
.answer-year-label{font-size:13px;}
.answer-year-text{color:#441905;text-transform:uppercase;font-size:12px;padding-bottom:4px;font-weight:500;}

/* Suggested Box */
.answer-suggested{float:left;flex:1;font-weight:500;font-size:12px;text-align:left;color:#441905;padding-left:20px;transition:all 0.6s ease 0s;}
.answer-suggested-label{font-size:13px;}
.answer-suggested-text{color:#441905;text-transform:uppercase;font-size:12px;padding-left:4px;padding-bottom:4px;font-weight:500;}

.game-control-block{float:left;width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;}

.quizze-button-col{float:left;/* width:360px; */}
.status-card{float:left;width:100%;background:#ffffff;border-radius:4px;transform: skewX(-12deg);}
.status-card-skew{float:left;width:100%;transform:skewX(12deg);padding:0px 16px;}
.status-card-inner{display:flex;gap:8px;align-items:center;justify-content:center;float:left;width:100%;min-height:48px;}
.status-icon{float:left;width:26px;}
.status-icon img{float:left;width:100%;}
.status-text{float:left;font-size:21px;font-weight:bold;line-height:1em;text-transform:uppercase;}

.game-status-col{float:left;flex:1;}
.play-quizze-block{float:left;display:flex;justify-content:center;align-items:center;gap:12px;}
.play-col{float:left;width:188px;min-width:188px;}
.quizze-col{float:left;}
.quizze-btn{border-radius:16px;background-color:rgb(130, 46, 5);width:100%;height:48px;border:2px solid #fcbf48;display:inline-flex;align-items:center;justify-content:center;float:left;min-width:160px;}
.quizze-btn .btn-text{color:#fbc42e;font-size:20px;font-weight:500;}
.win-item .answer-cbox{background:#009e51;color:#ffffff;-webkit-animation-name:answered;animation-name:answered;animation-delay:0s;animation-duration:1s;-webkit-animation-fill-mode:both; animation-fill-mode:both;}
.loss-item .answer-cbox .answer-suggested-label{color:#f20000;}
@keyframes answered{
	  0%{background:#faf3f0;}
     25%{background:#009e51;}
     50%{background:#faf3f0;}
     100%{background:#009e51;}
}
.back-btn-block{float:left;position:absolute;left:8px;top:48px;z-index:1;}
.back-btn{float:left;display:flex;gap:4px;align-items:center;}
.back-icon{float:left;width:16px;}
.back-icon img{float:left;width:100%;}
.back-text{float:left;font-weight:500;font-size:16px;color:#ffffff;text-decoration:underline;}

.perfect-status{color:#8000FF;}
.excellent-status{color:#006400;}
.impressive-status{color:#008000;}
.good-status{color:#32CD32;}
.ok-status{color:#fcbf48;}
.pass-status{color:#FF8C00;}
.yikes-status{color:#FF0000;}

/* Animation */
.score-submitted .question-box{-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;}
}

.score-submitted .score-box-in{-webkit-animation-name:bounceInRight; animation-name:bounceInRight;animation-duration:1s; animation-fill-mode:both;}
.score-submitted .score-box-in:nth-child(2){animation-delay:0.2s;}
 @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;}
}

.score-submitted .status-card-inner{
	animation-delay:2s;
  animation: bounce-in 2s ease;
}
@keyframes bounce-in {
  0% {
    opacity: 0;
    transform: scale(.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
  70% { transform: scale(.9); }
  100% { transform: scale(1); }
}

/*Two Columns List CSS*/
.two-columns .answer-header .answer-list .answer-item:nth-child(3){display:none;}
.two-columns .answer-list{column-count:2;}
.two-columns .answer-list .answer-suggested, .two-columns .answer-list .answer-meta{width:calc(50% - 34px); max-width:calc(50% - 34px); flex:1; display:flex; align-items:center;}
.two-columns .answer-list .answer-suggested .answer-meta-label, .two-columns .answer-list .answer-meta .answer-meta-label{line-height:1em; width:100%; float:left;}

@media (orientation:landscape){
	.gameplay-content .question-before{right:calc(100% - 0.6vmin);bottom:2.6vmin;width:2.6vmin;}
	.gameplay-content .question-after{left:calc(100% - 0.8vmin);bottom:2.5vmin;width:3vmin;}
}

/* Mobile Landscape CSS */
@media (min-width:993px) and (max-width:1024px) and (orientation:landscape){
	/* Splash Screen CSS Start*/
	.home-content .figure-logo{max-width:560px;}
	.game-question-card{margin:2vmax 0px 4vmax;}
	.game-question-block{padding:0px 80px;}
	.game-question-label{font-size:36px;padding:10px 20px;}
	.question-before{width:36px;bottom:8px;}
	.question-after{width:30px;bottom:16px;}
	.game-button-bar .button-bar-outer{max-width:340px;margin:6vmax 0px 0px;}
	/* Splash Screen CSS End*/	
}
	
/* Tab Portrait CSS */
@media (max-width: 992px) and (orientation:portrait){
	/* Splash Screen CSS Start*/
	.home-content .figure-logo{max-width:560px;}
	.game-question-card{margin:2vmax 0px 4vmax;}
	.game-question-block{padding:0px 80px;}
	.game-question-label{font-size:36px;padding:10px 20px;}
	.question-before{width:54px;bottom:8px;}
	.question-after{width:50px;bottom:16px;}
	.game-button-bar .button-bar-outer{max-width:340px;margin:6vmax 0px 0px;}
	/* Splash Screen CSS End*/	
	
	/*========Game Play Screen CSS Start========*/
	.question-score-block{margin:12px 0px;}
	.gameplay-content .figure-logo{max-width:184px;}
	.gameplay-content .game-question-label{font-size:24px;padding:6px 14px;}
	.question-box-in .form-label{font-size:16px;}
	.question-box-in .form-btn{min-width:84px;width:84px;}
	.question-score-inner{flex-direction:column;}
	.score-box{width:100%;order:-1;}
	.score-box-inner{max-width:306px;}
	
	.score-box{width:46%;}
	.bx-item{width:54px;min-width:54px;}
	.bx-label{height:21px;font-size:11px;padding-left:26px;max-width:88px;margin-bottom:-4px;}
	.bx-input-label-inner{height:28px;padding-left:26px;font-size:16px;}
	
	.answer-header .answer-list .answer-item:nth-child(3){display:none;}
    .answer-list{column-count:2;}
	/*======== Game Play Screen CSS End ========*/
	
}
	
/* Mobile Landscape CSS */
@media (max-width: 992px) and (orientation:landscape){
	/*========Game Play Screen CSS Start========*/
	
	.question-score-inner{flex-direction:column;}
	.score-box{width:100%;order:-1;}
	.score-box-inner{max-width:306px;}
	
	.question-score-block{margin:12px 0px 6px;}
	.gameplay-content .figure-logo{max-width:184px;}
	.gameplay-content .game-question-label{font-size:24px;padding:6px 14px;}
	.question-box-in .form-label{font-size:16px;}
	.question-box-in .form-btn{min-width:84px;width:84px;}
	
	.score-box{width:46%;}
	.bx-item{width:54px;min-width:54px;}
	.bx-label{height:21px;font-size:11px;padding-left:26px;max-width:88px;margin-bottom:-4px;}
	.bx-input-label-inner{height:28px;padding-left:26px;font-size:16px;}
	
	.answer-header .answer-list .answer-item:nth-child(3){display:none;}
    .answer-list{column-count:2;}
	/*======== Game Play Screen CSS End ========*/
	/*======== Game Review Screen CSS Start ========*/
	.play-col{width:160px;min-width:160px;}
	.quizze-btn{border-radius:12px;min-width:136px;height:36px;}
	.quizze-btn .btn-text{font-size:15px;}
	.quizze-button-col{width:auto;}
	.status-card-inner{gap:6px;min-height:40px;}
	.status-icon{width:18px;}
	.status-text{font-size:18px;}
	/*======== Game Review Screen CSS End ========*/
	.gameplay-content .question-before{right:calc(100% - 6px);bottom:6px;width:20px;}
	.gameplay-content .question-after{left:calc(100% - 8px);bottom:10px;width:22px;}
	
}

/* Mobile Portrait CSS */
@media (max-width:767px) and (orientation:portrait){
	:root{
		--home-bg:url(../images/nba-quiz/splash-mobile.webp);
	}
	
	/*======== Splash Screen CSS Start ========*/
	.home-content .figure-logo{max-width:460px;}
	.game-question-card{margin:2vmax 0px 4vmax;}
	.game-question-block{padding:0px 48px;}
	.game-question-label{font-size:24px;padding:6px 14px;}
	.question-before{width:34px;bottom:16px;}
	.question-after{width:30px;bottom:26px;}
	.game-button-bar .button-bar-outer{max-width:224px;}
	/*======== Splash Screen CSS End ========*/	
	
	/*======== Game Play Screen CSS Start ========*/
	.gameplay-info{background-size:160%;background-color:#f0f0f0;background-repeat:no-repeat;background-attachment:fixed;}
	.gameplay-content .figure-logo{max-width:184px;}
	.gameplay-content .game-question-label{font-size:24px;padding:6px 14px;}
	.question-box{width:100%;}
	.question-box-in .form-label{font-size:16px;}
	.question-box-in .form-btn{min-width:84px;width:84px;}
	.question-score-inner{flex-direction:column;}
	.score-box{width:100%;order:-1;}
	.score-box-inner{max-width:306px;}
	
	.bx-item{width:54px;min-width:54px;}
	.bx-label{height:21px;font-size:11px;padding-left:26px;max-width:88px;margin-bottom:-4px;}
	.bx-input-label-inner{height:28px;padding-left:26px;font-size:16px;}
	
	.answer-header .answer-list .answer-item:nth-child(2),
	.answer-header .answer-list .answer-item:nth-child(3){display:none;}
	.answer-list{column-count:1;}
	/*======== Game Play Screen CSS End ========*/
	
	/*======== Game Review Screen CSS Start ========*/
	.back-btn-block{top:46px;}
	.back-icon{width:12px;}
	.back-text{font-size:12px;}
	.play-col{width:160px;min-width:160px;}
	.quizze-btn{border-radius:12px;min-width:136px;height:36px;}
	.quizze-btn .btn-text{font-size:15px;}
	.quizze-button-col{width:auto;}
	.game-control-block{flex-direction:column;}
	.status-card-inner{gap:6px;min-height:40px;}
	.status-icon{width:18px;}
	.status-text{font-size:18px;}
	/*======== Game Review Screen CSS End ========*/

	.gameplay-content .question-before{right:calc(100% - 6px);bottom:12px;width:24px;}
	.gameplay-content .question-after{left:calc(100% - 8px);bottom:18px;width:30px;}
    
    .two-columns .answer-list{column-count:1;}

}