/* Quiz */
/* keyframes */
@keyframes shake {0%{transform:translateX(0);}20%{transform:translateX(-10px);}40%{transform:translateX(10px);}60%{transform:translateX(-10px);}80%{transform:translateX(10px);}100%{transform:translateX(0);}}
@keyframes down{0%{top: -10%;scale: 0;}100%{top: 90%;scale: 1;right: 15%;}}
/* keyframes animation: shake 0.5s ease-in-out 1*/

a{text-decoration: none;}
.quiz_min .question {display: none;margin: auto;width:800px;}
.quiz_min .active {display: block;}
.quiz_min .correct {background-color: green;color: #fff;}
.quiz_min .incorrect {background-color: red;color: #fff}
.quiz_min .disabled {pointer-events: none;}
.quiz_min .score {margin-top: 20px;}
.quiz_min{padding: 60px 0;text-align: center;color: #fff;}
.quiz_container{background-image: url(../images/activity-bg.png);background-repeat: no-repeat;background-size:contain;height: 748px;width: 1200px;margin: auto;color:#fff;text-align: center;}
.quiz_min button{cursor: pointer;}
.quiz_min .quiz{margin: auto;width: 75%;display: flex;gap: 60px;padding: 0 40px;height: 100%;position: relative;}
.quiz h4 {font-family: clattering; font-size: 28px; font-weight: normal; margin: 0;}
.quiz .heading_s2{margin-bottom: 30px;font-family: ultra;
font-weight: normal; color: #a2f1f3; font-size: 32px; text-shadow: none; margin-bottom: 0;}
.quiz .txt_white {margin-bottom: 10px;}
.quiz-start{width: 100%;margin: auto;}
.question-button{text-transform: uppercase;color: #058c8c;padding:12px 20px;border-radius: 100px;border: none;  font-family: 'gothamregular';font-size: 20px;background-color: #fff;  box-shadow: 0px -2px 3px #000 inset; transition: all 0.3s ease-in-out;}
.QbtnWrap{padding: 30px 0;}
.questionAns .QbtnWrap{position: absolute;bottom:80px;right: 0;left: 0;}
.QbtnWrap:empty{display: none;}
.question-option h2{margin-bottom: 20px;font-size: 20px;font-weight: normal;}
.optionWrap{display: grid;grid-template-columns: repeat(2, 1fr);gap: 40px;text-align: center;margin-top: 40px ;padding: 0;list-style-type: none;  align-items: center;}
.optionWrap a{display: block;width: 100%;text-transform: capitalize;color: #058c8c;padding:15px 20px;border-radius: 100px;border: none;  background: #fff;font-size: 12px;transition: all 0.3s ease-in-out;box-shadow: 0px -2px 3px #000 inset;}
.optionWrap a:hover, .question-button:hover{background: #058c8c; color: #fff;
box-shadow: 3px 3px 0px #037a7b, 2px 2px 2px #047373 inset}
.question-row{display: flex;margin: auto;width: 80%;gap: 30px;}
.question-col-text{width: 100%;text-align: left;}
.question-col-bg{width:400px;position: relative;display: none;left: 0;top:20px;overflow: hidden;margin: auto;}
.quizStart .question-col-bg{display: block;}
.question-col-bg img{width: 100%;display: block;}
.quiz-start{width: 70%;}
.btnIsShow .question-button{display: block!important;margin: auto;margin-top: 30px;
  position: absolute;
  bottom: 20%;
  left: 0;
  right: 0;
  width: fit-content;}
.questionAns .question-button{padding: 10px 24px;border-radius: 20px;text-transform: uppercase;color: #fff;background: #058c8c;cursor: pointer;transition: all 0.5s;border: none;box-shadow: 3px 3px 0px #037a7b, 2px 2px 2px #047373 inset;font-size: 15px;overflow: hidden;margin: auto 5px;}
.questionAns .question-button:hover{background: #fff;color: #058c8c;}
.question-img{position: relative;overflow: hidden;}
.question-img-overlay div{position: absolute;top:100%;left: 0;right: 0;width: 100%;transition: all 3.3s ease-in-out;rotate: 10deg; animation: wave 5s infinite ease-in-out;}
.question-img-overlay{position: absolute;bottom: 0;left: 0;right: 0;width: 100%;top: 0;height: 100%;overflow: hidden;display: block;}
.question-img-A{z-index: 5;  animation-delay: 0s;}
.question-img-B{z-index: 3;  animation-delay: 1.5s;}
.question-img-C{z-index: 1; animation-delay: 3s;}
.result-message a {color:#ffb900; text-decoration:underline; transition: all 0.5s;}
.result-message a:hover {color:#fff;}

.question-img-img{position: relative;z-index: 10;}
.wtrDt{width: 80px;position: absolute;top: -50%;right: 0;scale: 0; }
.quiz-1-wrong,.quiz-2-wrong,.quiz-3-wrong,.quiz-4-wrong,.quiz-5-wrong{animation: shake 0.5s ease-in-out 1; }
.quiz-1-right .wtrDtA,.quiz-2-right .wtrDtB,.quiz-3-right .wtrDtC,.quiz-4-right .wtrDtD,.quiz-5-right .wtrDtE{animation: down 3.5s ease-in-out 1;}
/* Method Quiz */

/* icons */
.quizIcon1{top: 10%;right: 18%;rotate: 100deg;scale: 0.8;}

.quiz {position: relative;}

.cg1,.cg2,.cg3,.cg4 {border-radius: 50%;}
.cg1 {width: 30px; height: 30px; background-color: #fff;left:10%;bottom: 0; animation: scaleUpDown 3s infinite ease-in-out;}
.cg2 {width: 10px; height: 10px; outline: 10px solid #48a9a9; left:0%;bottom: 50%;animation: bounce 4s ease infinite alternate;}
.cg3 {width: 40px; height: 40px; outline: 12px solid #a2f1f3;right: 0;bottom: 30%; animation: pulse 2s infinite ease-in-out;}
.cg4 {width: 16px; height: 16px; border: 5px solid #fff;right: 0;top: 0; background: #fff; animation: moveDiagonally 5s infinite ease-in-out;}



/* 
0 = 100%
1 = 50%
2 = 30%
3 = 10%
4 = 0%
5 = -10%
RRRRR = 12345 - Done
WWWWW = 00000 - Done
WRRRR = 01234 - Done
RWRRR = 10234
RRWRR = 12034
RRRWR = 12304
RRRRW = 12340
WWRRR = 00123
RWWRR = 10023
RRWWR = 12003
RRRWW = 12300
WWWRR = 00012
RWWWR = 10002
RRWWW = 12000
WWWWR = 00001
RWWWW = 10000
*/

/* 12345 */
.quiz-1-right .question-img-overlay div{top: 50%;}
.quiz-1-right.quiz-2-right .question-img-overlay div{top: 30%;}
.quiz-1-right.quiz-2-right.quiz-3-right .question-img-overlay div{top: 10%;}
.quiz-1-right.quiz-2-right.quiz-3-right.quiz-4-right .question-img-overlay div{top: 0%;}
.quiz-1-right.quiz-2-right.quiz-3-right.quiz-4-right.quiz-5-right .question-img-overlay div{top: -10%;}
/* 00000 */

.quiz-1-wrong .question-img-overlay div{top: 100%;}
.quiz-1-wrong.quiz-2-wrong .question-img-overlay div{top:100%;}
.quiz-1-wrong.quiz-2-wrong.quiz-3-wrong .question-img-overlay div{top:100%;}
.quiz-1-wrong.quiz-2-wrong.quiz-3-wrong.quiz-4-wrong .question-img-overlay div{top: 100%;}
.quiz-1-wrong.quiz-2-wrong.quiz-3-wrong.quiz-4-wrong.quiz-5-wrong .question-img-overlay div{top: 100%;}

/* 01234 */
.quiz-1-wrong .question-img-overlay div{top: 100%;}
.quiz-1-wrong.quiz-2-right .question-img-overlay div{top: 50%;}
.quiz-1-wrong.quiz-2-right.quiz-3-right .question-img-overlay div{top: 30%;}
.quiz-1-wrong.quiz-2-right.quiz-3-right.quiz-4-right .question-img-overlay div{top: 10%;}
.quiz-1-wrong.quiz-2-right.quiz-3-right.quiz-4-right.quiz-5-right .question-img-overlay div{top: 0%;}

/* 10234 */
.quiz-1-right .question-img-overlay div{top: 50%;}
.quiz-1-right.quiz-2-wrong .question-img-overlay div{top: 30%;}
.quiz-1-right.quiz-2-wrong.quiz-3-right .question-img-overlay div{top: 10%;}
.quiz-1-right.quiz-2-wrong.quiz-3-right.quiz-4-right .question-img-overlay div{top: 0%;}
.quiz-1-right.quiz-2-wrong.quiz-3-right.quiz-4-right.quiz-5-right .question-img-overlay div{top: -10%;}

/* 12034 */
.quiz-1-right .question-img-overlay div{top: 50%;}
.quiz-1-right.quiz-2-right .question-img-overlay div{top: 30%;}
.quiz-1-right.quiz-2-right.quiz-3-wrong .question-img-overlay div{top: 30%;}
.quiz-1-right.quiz-2-right.quiz-3-wrong.quiz-4-right .question-img-overlay div{top: 10%;}
.quiz-1-right.quiz-2-right.quiz-3-wrong.quiz-4-right.quiz-5-right .question-img-overlay div{top: 0%;}

/* 12304 */
.quiz-1-right .question-img-overlay div{top: 50%;}
.quiz-1-right.quiz-2-right .question-img-overlay div{top: 30%;}
.quiz-1-right.quiz-2-right.quiz-3-right .question-img-overlay div{top: 10%;}
.quiz-1-right.quiz-2-right.quiz-3-right.quiz-4-wrong .question-img-overlay div{top: 10%;}
.quiz-1-right.quiz-2-right.quiz-3-right.quiz-4-wrong.quiz-5-right .question-img-overlay div{top: 0%;}

/* 12340 */
.quiz-1-right .question-img-overlay div{top: 50%;}
.quiz-1-right.quiz-2-right .question-img-overlay div{top: 30%;}
.quiz-1-right.quiz-2-right.quiz-3-right .question-img-overlay div{top: 10%;}
.quiz-1-right.quiz-2-right.quiz-3-right.quiz-4-right .question-img-overlay div{top: 0%;}
.quiz-1-right.quiz-2-right.quiz-3-right.quiz-4-right.quiz-5-wrong .question-img-overlay div{top: 0%;}

/* 00123 */
.quiz-1-wrong .question-img-overlay div{top: 100%;}
.quiz-1-wrong.quiz-2-wrong .question-img-overlay div{top: 100%;}
.quiz-1-wrong.quiz-2-wrong.quiz-3-right .question-img-overlay div{top: 50%;}
.quiz-1-wrong.quiz-2-wrong.quiz-3-right.quiz-4-right .question-img-overlay div{top: 30%;}
.quiz-1-wrong.quiz-2-wrong.quiz-3-right.quiz-4-right.quiz-5-right .question-img-overlay div{top: 10%;}

/* 10023 */
.quiz-1-right .question-img-overlay div{top: 50%;}
.quiz-1-right.quiz-2-wrong .question-img-overlay div{top: 50%;}
.quiz-1-right.quiz-2-wrong.quiz-3-wrong .question-img-overlay div{top: 30%;}
.quiz-1-right.quiz-2-wrong.quiz-3-wrong.quiz-4-right .question-img-overlay div{top: 50%;}
.quiz-1-right.quiz-2-wrong.quiz-3-wrong.quiz-4-right.quiz-5-right .question-img-overlay div{top: 10%;}

/* 12003 */
.quiz-1-right .question-img-overlay div{top: 50%;}
.quiz-1-right.quiz-2-right .question-img-overlay div{top: 30%;}
.quiz-1-right.quiz-2-right.quiz-3-wrong .question-img-overlay div{top: 30%;}
.quiz-1-right.quiz-2-right.quiz-3-wrong.quiz-4-wrong .question-img-overlay div{top: 30%;}
.quiz-1-right.quiz-2-right.quiz-3-wrong.quiz-4-wrong.quiz-5-right .question-img-overlay div{top: 10%;}

/* 12300 */
.quiz-1-right .question-img-overlay div{top: 50%;}
.quiz-1-right.quiz-2-right .question-img-overlay div{top: 30%;}
.quiz-1-right.quiz-2-right.quiz-3-right .question-img-overlay div{top: 10%;}
.quiz-1-right.quiz-2-right.quiz-3-right.quiz-4-wrong .question-img-overlay div{top: 10%;}
.quiz-1-right.quiz-2-right.quiz-3-right.quiz-4-wrong.quiz-5-wrong .question-img-overlay div{top: 10%;}

/* 00012 */
.quiz-1-wrong .question-img-overlay div{top: 100%;}
.quiz-1-wrong.quiz-2-wrong .question-img-overlay div{top: 100%;}
.quiz-1-wrong.quiz-2-wrong.quiz-3-wrong .question-img-overlay div{top: 100%;}
.quiz-1-wrong.quiz-2-wrong.quiz-3-wrong.quiz-4-right .question-img-overlay div{top: 50%;}
.quiz-1-wrong.quiz-2-wrong.quiz-3-wrong.quiz-4-right.quiz-5-right .question-img-overlay div{top: 30%;}

/* 10002 */
.quiz-1-right .question-img-overlay div{top: 50%;}
.quiz-1-right.quiz-2-wrong .question-img-overlay div{top: 50%;}
.quiz-1-right.quiz-2-wrong.quiz-3-wrong .question-img-overlay div{top: 50%;}
.quiz-1-right.quiz-2-wrong.quiz-3-wrong.quiz-4-wrong .question-img-overlay div{top: 50%;}
.quiz-1-right.quiz-2-wrong.quiz-3-wrong.quiz-4-wrong.quiz-5-right .question-img-overlay div{top: 30%;}

/* 12000 */
.quiz-1-right .question-img-overlay div{top: 50%;}
.quiz-1-right.quiz-2-right .question-img-overlay div{top: 30%;}
.quiz-1-right.quiz-2-right.quiz-3-wrong .question-img-overlay div{top: 30%;}
.quiz-1-right.quiz-2-right.quiz-3-wrong.quiz-4-wrong .question-img-overlay div{top: 30%;}
.quiz-1-right.quiz-2-right.quiz-3-wrong.quiz-4-wrong.quiz-5-wrong .question-img-overlay div{top: 30%;}

/* 00001 */
.quiz-1-wrong .question-img-overlay div{top:100%;}
.quiz-1-wrong.quiz-2-wrong .question-img-overlay div{top: 100%;}
.quiz-1-wrong.quiz-2-wrong.quiz-3-wrong .question-img-overlay div{top: 100%;}
.quiz-1-wrong.quiz-2-wrong.quiz-3-wrong.quiz-4-wrong .question-img-overlay div{top: 100%;}
.quiz-1-wrong.quiz-2-wrong.quiz-3-wrong.quiz-4-wrong.quiz-5-right .question-img-overlay div{top: 50%;}

/* 10000 */
.quiz-1-right .question-img-overlay div{top: 50%;}
.quiz-1-right.quiz-2-wrong .question-img-overlay div{top: 50%;}
.quiz-1-right.quiz-2-wrong.quiz-3-wrong .question-img-overlay div{top: 50%;}
.quiz-1-right.quiz-2-wrong.quiz-3-wrong.quiz-4-wrong .question-img-overlay div{top: 50%;}
.quiz-1-right.quiz-2-wrong.quiz-3-wrong.quiz-4-wrong.quiz-5-wrong .question-img-overlay div{top: 50%;}
/* Method Quiz End*/



@media (max-width:767px){
.quiz_min{background: #058c8c;border-radius: 50px;}
.quiz_min .quiz{width: 95%;padding: 0;display: block;}
.quiz_container{background-image: none;width: 100%;height: auto;}
.quiz_min .question{width: 100%;}
.question-option h2{font-size: 14px;;}
.optionWrap{gap: 20px;  margin-top: 20px;}
.optionWrap a{padding: 10px 10px;}
.question-col-bg{width: 130px;margin: auto;position: absolute;left: 0;right: 0;bottom: 0;}
.questionAns {padding-top:155px;position: relative;z-index: 2;padding-bottom: 140px;}
.questionAns .QbtnWrap{bottom: 10px;padding: 0;}
.wtrDt {display: none;}
.quiz-result{padding-top: 150px;}
.score{padding-bottom: 20px;}
.question {position: relative;z-index: 2;}
.box{transform: translate(-0%, 0%);position: inherit;width: fit-content;}
.article-slider{padding-bottom: 80px;}
.quizIcon1 {top: -16%;left: 0; scale: 0.5;}
.btnIsShow .question-button {position: inherit;}
}

/* Quiz End */