@font-face {
    font-family: 'Aptos';
    src: url('../fonts/Aptos.eot');
    src: url('../fonts/Aptos.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Aptos.woff2') format('woff2'),
        url('../fonts/Aptos.woff') format('woff'),
        url('../fonts/Aptos.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}


body {
    font-family: 'Aptos', Arial, sans-serif;   
    display: flex;    justify-content: center;    align-items: center;    height: 100vh;
    margin: 0;	
	background: url("../images/bg.jpg") no-repeat center center;
	background-size: cover;
	overflow-x: hidden;
}

.clear{ clear: both;}



.logo-div-left{position: absolute; left:10px; top:10px; height:60px; width: 90px;}
		.logo-div-left img { max-height:35px;}

.container-mein {
    text-align: center;    color: white;	width: 100%;
}

.start-screen {
    text-align: center;    color: white;	width: 100%;
}

.jcss{padding:15px 0 10px 0;font-family: 'Aptos';font-size: 32px; font-weight: 800; width: 100%;}

.grand-finale{ width: 30%; float: left;}
.participant{ width: 100%; float: left; padding: 30px 0 10px 0;font-family: 'Aptos';font-size: 28px; font-weight: 800;}
.jurry-round{ width: 25%; float: left;padding: 30px 0 10px 0;}

.start-screen h2 {
    text-align: center;    margin-bottom: 20px;    color: #fff;font-family: 'Aptos'; font-size:46px; letter-spacing: 1px; font-weight:800;	
	margin: 0; padding: 20px 0 10px 0;	text-shadow: #666 1px 1px 0px;
}
.start-screen h3 {
    text-align: center;    margin:0 0  20px 0;    color: #fff;font-family: 'Aptos';letter-spacing: 1px;
	padding: 0;
	font-size: 36px;
}




.heading-sliding{
	background-color: #fff; padding:10px 0; text-align: center;color:#000; font-size:40px; 
	text-transform: uppercase; display: block;	
	opacity: 0;
	transition: opacity 2s ease-out, transform 4s ease-out;
	animation:moveRight 2s ease-out forwards;
}

.heading-sliding.animate {
    opacity: 1;
   /*transform: translateX(0);*/
}




.start-button{ 
	padding: 40px 0 10px 0; text-align: center;
	opacity: 0;   
	transform: translateY(100%);
    animation: slideInPulse 5s ease-out forwards;
	cursor: pointer;
	 
}

.start-button.animate {
    opacity: 1;    
	cursor: pointer;		
	
}
.start-button img:hover{
	opacity: 0.9;  
	cursor: pointer;
	 
}

.start-button1{ 
	padding: 40px 0 10px 0; text-align: center;
	opacity: 0;   
	transform: translateY(100%);
    animation: slideInPulse1 1s ease-out forwards;
	cursor: pointer;
	 
}

.start-button1.animate {
    opacity: 1;    
	cursor: pointer;		
	
}
.start-button1 img:hover{
	opacity: 0.9;  
	cursor: pointer;
	 
}


@keyframes slideInPulse1 {
    0% {
        opacity: 0;
        transform: translateY(50%) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(0%) scale(1.1);
    }
   
}




@keyframes slideInPulse {
    0% {
        opacity: 0;
        transform: translateY(100%) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(0%) scale(1.1);
    }
   
}





.input-group input:focus {
    border-color: #ff7e5f;    outline: none;
}

.input-group [type="submit"] {
    border: none; 
}




@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.start-screen {
    text-align: center;
    color: white;
    transform: translateX(-100%);
    animation: slideIn 1.5s ease-out forwards;
}

@keyframes slideIn {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}



 .canditate_div {
            
     max-width: 1280px;
	 justify-content: center;
	 margin: 0 auto;
	 overflow: auto;
            
        }


.box { width: 32%;      min-height: 50px;
            background-color: #ffffff;
            opacity: 0; /* Start hidden */
            animation: fadeIn 1s forwards;color:#000;
	line-height: 50px;
	margin: 20px 5px 20px 5px;
	border-radius:20px;
	box-shadow: #333 2px 2px 2px;
	font-size: 24px;
	font-weight: bold;
	float: left;cursor: pointer;
        }
.box_diable { width: 32%;      min-height: 50px;
            background-color: #a49999;
            opacity: 0; /* Start hidden */
            animation: fadeIn 1s forwards;color:#605858;
	line-height: 50px;
	margin: 20px 10px 20px 0;
	border-radius:20px;
	box-shadow: #333 2px 2px 2px;
	font-size: 24px;
	font-weight: bold;float: left;
        }



        /* Keyframes for the fade-in animation */
        @keyframes fadeIn {
            0% {
                opacity: 0;
                transform: translateY(20px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Adding delay to each box to show one by one */
        .box:nth-child(1),.box_diable:nth-child(1) {
            animation-delay: 1s;
        }

        .box:nth-child(2), .box_diable:nth-child(2){
            animation-delay: 2s;
        }

        .box:nth-child(3),.box_diable:nth-child(3) {
            animation-delay: 2.5s;
        }

        .box:nth-child(4),.box_diable:nth-child(4) {
            animation-delay: 3.5s;
        }

 .box:nth-child(5),.box_diable:nth-child(5) {
            animation-delay:4s;
        }






.question_div{
	background-color: #fff;	border:#a4834a 3px solid;	border-radius: 14px;padding: 10px;	width: 90%;
	margin: 0 auto;	box-shadow: #333 2px 2px 2px;
	animation:moveLeft 1s ease-out forwards;
}
.question_div span{ display:block;
	color:#000;font-size: 26px;	font-weight: bold;
	animation:moveRight 1s ease-out forwards;
	padding: 2px 20px;
	
}


.cards_all{
	padding: 0px;	
	float: left;
	width: 98%;
	margin:15px 0 0 5%;
	animation:moveLeft 1s ease-out forwards;
}
.card-box-common{
	background: #707070;	border-radius:22px;
	border:#000000 1px solid;	padding:15px 0;
	text-align: center;	height:230px;	width: 27%;	margin: 0 0 20px 2%;
	vertical-align: middle;	
	line-height: 220px;
	font-size: 48px;
	font-weight: 700;
	float: left;
}

.card-box-common_disable{
	background: #e1e1e1;	border-radius:22px;
	border:#000000 1px solid;	padding:15px 0;
	text-align: center;	height:230px;	width: 27%;	margin: 0 0 20px 2%;
	vertical-align: middle;	
	line-height: 220px;
	font-size: 48px;
	font-weight: 700;
	float: left;
}



.question_screen{
	padding: 0px;	
	float: left;
	width: 98%;
	margin:15px 0 15px 3%;
	animation:moveLeft 1s ease-out forwards;
}
.question_left{color: #000; text-align: left; }
.question_left{
	width:72%;
	padding:10px 2%;
	color: #000;
	float: left;
	margin: 0 3% 0 0;
	min-height:300px;
	background-color: #fff;
}
.question_left ul li{ line-height: 24px; font-size: 18px;}

.question_right{width:22%; float: left;}
.question_right h1{ background: #fff; padding: 10px; color: #000; border:#666 1px solid; width: 100%;}


.question_right [type="text"],.question_right [type="number"]{
    min-width: 100%;
    padding: 14px 0px 14px 8px;
    border: 2px solid #5e4540;
    border-radius: 0px;
	font-size: 25px;
font-weight:600;
	width: 100%;
	height: 80px;
    color: #333;
    text-align: center;
	margin: 0 0 12px 0;
}


@keyframes moveLeft {
            0% {
                right: 100%;
				 transform: translateX(100%);
            }
            100% {
                right: 0%;
				 transform: translateX(0%);
               
            }
        }



.answer_div{max-width:650px; margin: 18px auto 0 auto; }

	.bg1_color{ background: #3429dd;}
	.bg2_color{background: #026c07; }
	.bg3_color{background: #ff7f00; }
	.bg4_color{background: #f82327;}

	.answer_div label{ 
		width: 250px; float: left; text-align: center; font-size: 22px; font-weight:bold;padding:15px 0; cursor: pointer;
	border-radius:24px; border:#fff 10px solid; color:#fff;	
	}


	.answer_div .q1_div {	
          	animation-delay: 3s;	animation:moveRight1 3s ease-out forwards;	
        }

     .answer_div .q2_div {animation-delay: 10s;
	animation:moveLeft 3s ease-out forwards;
        }

      .answer_div .q3_div {
	animation-delay: 3s;
	animation:moveRight1 3s ease-out forwards;
		  
        }

 .answer_div .q4_div {  animation-delay: 3s;   
	animation:moveLeft 3s ease-out forwards;
        }



@keyframes moveRight1 {
            0% {
                left: 0%;
				 transform: translateX(-100%);
            }
            100% {
                left: 100%;
				 transform: translateX(0%);
               
            }
        }



.q1_div{  margin:0 20px 15px 0; float: left;}
.q2_div{  float: left;margin:0 0 15px 0;}
.q3_div{  margin:0 20px 15px 0; float: left;}
.q4_div{  float: left;margin:0 0 15px 0;}

.answer_div input[type="radio"] {
            display: none;
        }

.answer_div input[type="radio"]:checked+label {
  background-color: #bbb;
	display: block;
	border-radius:24px; border:#fff 10px solid; 
}




.next-button-div{ margin-right: 0%; width: 100%; text-align: center;animation:moveLeft 2s ease-out forwards;  margin: 10px 0 0 0;}
	.next-button {
    width: 171px; height:59px;background:url("../images/start.png")no-repeat;	
    color: white;	border:none;	text-indent: -9999px;	cursor: pointer;
	margin:0px auto;
    
}

	.next-button:hover {
  
    cursor: pointer;
	border:none;opacity: 0.8;
}


.submit-button-div{ margin-right: 0%; width: 100%; text-align: center;animation:moveLeft 3s ease-out forwards;  margin: 10px 0 0 0;}
	.submit-button {
    width: 171px; height:59px;background:url("../images/submit.png")no-repeat;	
    color: white;	border:none;	text-indent: -9999px;	cursor: pointer;
	margin:0px auto;
    
}

	.submit-button:hover {
  
    cursor: pointer;
	border:none;opacity: 0.8;
}







.leaderboard {
          	width: 90%;
	margin: 0 auto;	
	overflow: hidden;
	

        }

        .leaderboard-list {
            margin: 20px 0 0 0;            padding: 0;            list-style: none;            position: relative;
        }


        .leaderboard-list li {
            background-color: #fff;	border:#a4834a 3px solid;border-radius: 14px;padding: 10px;box-shadow: #333 2px 2px 2px; color: #000;
			font-size: 24px;
			text-align: left;
			position: relative;
        }

 .leaderboard-list li span {
            position: absolute;
	 right:20px;
			text-align: right;
        }

        .leaderboard-list li:nth-child(1) {
            background-color: #ffeb3b;
        }

        .leaderboard-list li:nth-child(2) {
             background-color: #fff;
        }

        .leaderboard-list li:nth-child(3) {
             background-color: #fff;
        }


@keyframes moveRight {
            0% {
                left: 100%;
				 transform: translateX(100%);
            }
            100% {
                left: 0%;
				 transform: translateX(0%);
               
            }
        }


.winner-div {
     width: 740px;
	margin: 30px auto 0 auto;	
	overflow: hidden;

        }


.margin-60{ margin-top:35px;}
.margin-70{ margin-top:45px;}
.height-200{height: 200px;}
.height-160{height: 154px;}
.height-165{height: 165px;}

.winner-div .winner-one{ width: 230px; float: left; margin-right:8px; animation:bounceInLeft 5s ease-out forwards;  }
.winner-div .winner-one h3{font-size: 24px; text-align: center; background-color: #d9d9d9; padding: 10px 0; border-radius:8px; color:#000; margin: 0 0 4px 0; }



.winner-div .winner-one1{ width: 230px; float: left; margin-right:8px; animation:bounceInDown 8s ease-out forwards; }
.winner-div .winner-one1 h3{font-size: 24px; text-align: center; background-color: #d9d9d9; padding: 10px 0; border-radius:8px; color:#000; margin: 0 0 4px 0; }

.winner-div .winner-one2{ width: 230px; float: left; margin-right:8px; animation:bounceInRight 3s ease-out forwards;  }
.winner-div .winner-one2 h3{font-size: 24px; text-align: center; background-color: #d9d9d9; padding: 10px 0; border-radius:8px; color:#000; margin: 0 0 4px 0; }


	.winner-box{ background-color: #002262; border-top-left-radius: 8px; border-top-right-radius: 8px; }
	.winner-box .winner-div1{ padding: 14px 0 10px 0; text-align: center;}

.winner-score{ font-size:22px; color:#fff; font-weight:bold;text-shadow: #666 1px 1px 0px;}




 .bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-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;
  }
  }
  
  @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;
  }
  } 



 .bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-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;
  }
  }
  @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;
  }
  } 


  .bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-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;
  }
  }
  @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;
  }
  }