:root{
	--bluecolor:#6588B0;
	--purple:#A96E92;
}

#quiz-holder {}
body{background-color:#000;}
.quiz-inner{padding:150px 30px 30px 30px; background-color:#fff;border-radius:35px;position:relative;margin:100px auto;max-width:800px;min-height:300px;z-index:999;}
.quiz-title{position:absolute;transform:translate(-50%,-25%);top:0;left:50%;}
.quiz-title img{max-height:250px;} 
.quiz-kid{position:absolute;left:0;top:50%;transform:translate(-50%,-50%);}
.quiz-kid img{max-height:250px;}

.quiz-intro,.quiz-question{text-align:center;color:var(--purple);font-size:24px;max-width:600px;margin:auto;}
.blue-text{color:var(--bluecolor);font-weight:bold;}
.quiz-start {margin:50px 0 0 0;width:100%;text-align:center;}
.btn-quiz{padding:10px 30px;color:#fff;background-color:var(--purple);outline:none;border-radius:20px;text-decoration:none;display:inline-block;}
.btn-quiz:hover{color:#fff;}
.question-text{margin:0 0 50px 0;}
.question-answer a{display:inline-block;}
.quiz-failed{text-align:center;display:none;}
.quiz-fail-text{font-size:24px;margin:0 0 50px 0;}
.quiz-passed{text-align:center;display:none;}
.quiz-thankyou,.quiz-form{text-align:center;display:none;}
.quiz-form li{margin:0 0 20px 0;}
.question-answer li{margin:0 0 20px 0;}

.quiz-next{cursor:pointer;}
.EZ-container-q li{cursor:pointer;}
.EZ-text-p li.selected{background-color:#B36A94;color:#fff;}
.EZ-text-p li.selected::marker {color:#B36A94;}

#quiz-2024-chart{width:100%;height:400px;}


#treasure-hunt {overflow:hidden;height:calc(100vh - 100px);width:calc((1080 / 1920) * (100vh - 100px));margin-left:50%;transform:translate(-50%,0);position:relative;}
#treasure-hunt .game-logo{position:absolute;z-index:4;top:50%;left:50%;width:95%;transform:translate(-50%,-60%);transition: all 1s ease-in-out;}


#treasure-hunt .game-map{position:absolute;z-index:2;bottom:5%;left:50%;width:90%;transform:translate(-50%,0);}
#treasure-hunt .game-instruction{position:absolute;z-index:5;top:0;left:0;width:100%;height:100%;background-color:rgba(73,204,220,0.7);}
.game-instruction-inner {position:absolute;width:90%;left:50%;top:50%;transform:translate(-50%,-50%);}
.game-how-to-play{position:relative;}
.game-start-game{position:absolute;bottom:18%;left:50%;transform:translate(-50%,0);width:30%;text-align:center;}
.game-start-game img{width:80%;}
.check-points{cursor:pointer;width:100px;height:auto;transform:scale(0.5);position:absolute;display:none;animation: checkpoint 3s ease-in-out infinite;}

#check-point-1{bottom:17%;right:6%;animation-delay: 0s;}
#check-point-2{bottom:46%;right:27.5%;animation-delay: 0.5s;}
#check-point-3{bottom:74%;right:3.5%;animation-delay: 1s;}

.tbox{cursor:pointer;width:82px;height:auto;transform:scale(0.5);position:absolute;display:none;}
#tbox-1{bottom:5%;right:18%;}
#tbox-2{bottom:31%;right:50%;}
#tbox-3{bottom:40%;right:9%;}
#tbox-4{bottom:58%;right:0%;}
#tbox-5{bottom:61.5%;right:15%;}
#tbox-6{bottom:55%;right:30%;}
#tbox-7{bottom:68%;right:57%;}
#tbox-8{bottom:54%;right:77%;}

#treasure-hunt .game-holder{position:relative;height:100%;}
#treasure-hunt .game-background{position:absolute;top:0;left:0;height:calc(100vh - 100px);width:calc((1080 / 1920) * (100vh - 100px));}
#treasure-hunt .game-background img{height:100%;}


.correct-box{position:absolute;transform:translate(calc(-50% + 20px),calc(-50% + 15px));width:60px;}
.correct-box.after{width:50px;transform:translate(calc(-50% + 10px),calc(-50%) );}
.check-point-disabled{display:none;}
.game-question-items{display:none;}
#treasure-hunt .game-question{position:absolute;z-index:9;top:-100%;left:50%;width:70%;transform:translate(-50%,0);transition: all 1s ease-in-out;}

.wrong-box{position:absolute;transform:translate(calc(-50% - 10px),calc(-50%));width:30px;}
.wrong-box.after{width:50px;transform:translate(calc(-50% + 10px),calc(-50%));}
#treasure-hunt .game-found{display:none;position:absolute;z-index:5;top:0;left:0;width:100%;height:100%;background-color:rgba(73,204,220,0.7);}
.game-found-inner {position:absolute;width:80%;left:50%;top:50%;transform:translate(-50%,-50%);}
.game-found-image-items{display:none;cursor:pointer;}


#treasure-hunt .game-ingredient-holder{display:none;position:absolute;z-index:5;top:0;left:0;width:100%;height:100%;background-color:rgba(73,204,220,0.7);}
.game-ingredient-inner {position:absolute;width:90%;left:50%;top:50%;transform:translate(-50%,-50%);}
.game-how-to-play{position:relative;}
.game-next-game{position:absolute;bottom:23%;left:50%;transform:translate(-50%,0);width:25%;text-align:center;}
.game-next-game img{width:80%;}

#treasure-hunt .game-congratulations{display:none;position:absolute;width:80%;left:50%;bottom:5%;transform:translate(-50%,0);z-index:10;transition: all 1s ease-in-out;}
#treasure-hunt .game-form-footer{display:none;position:absolute;width:80%;left:50%;bottom:-2%;transform:translate(-50%,0);z-index:11;transition: all 1s ease-in-out;}
#treasure-hunt .game-form-content{display:none;position:absolute;width:80%;left:50%;top:50%;transform:translate(-50%,-60%);z-index:12;transition:all 1s ease-in-out;}

.game-form-fields{position:absolute;top:0;}
.game-form-fields input{padding:0;border:0;line-height:1;}
#field-name{top:33%;left:27%;width:65%;}
#field-phone{top:43%;left:38%;width:56%;}
#field-email{top:55%;left:30%;width:60%;}


.game-form-submit{display:none;position:absolute;bottom:10%;left:50%;transform:translate(-50%,0);width:30%;}
.game-form-share{position:absolute;bottom:10%;left:50%;transform:translate(-50%,0);width:40%;}

.game-complete{display:none;position:absolute;width:80%;left:50%;top:50%;transform:translate(-50%,-50%);z-index:13;transition:all 0.5s ease-in-out;display:none;}
.game-music{cursor:pointer;position:absolute;z-index:3;width:11%;top:35%;left:5%;display:none;}
.game-music-off{display:none;}

.custom-cursor {
    cursor: url('/minigame-treasure/images/game-cursor.png?r=123'), auto;
	
}

.game-icon{position:absolute;z-index:4;bottom:23%;width:20%;right:13%;display:none;transition:all .5s ease-in-out;transform-origin:center;}
.game-icon-items{display:none;}
.game-icon.game-icon-2{position:absolute;z-index:4;bottom:28%;width:17%;right:27%;}
.game-icon.game-icon-3{position:absolute;z-index:4;bottom:58%;width:17%;right:16%;}


@keyframes checkpoint {
	0% {
		transform:rotate(0deg) scale(0.5);
		
	}
	25% {
		transform:rotate(5deg) scale(0.55);
	}
	50% {
		transform:rotate(-5deg) scale(0.45);
	}
	100% {
		transform:rotate(0deg) scale(0.5);
	}
}

@keyframes bounce {
    0%, 20%, 50%, 80% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}