body{
  overflow-x: hidden; 
}

.quiz{
  /*   background: #fff;
  position: relative;
  padding-bottom: clamp(20px, 2.5vw, 40px);
  /*   overflow-x: hidden; */
  /* width: min(1000px, 100%); 
  margin: auto;
  border-radius: 1.25rem;
  box-shadow: 0px 2px 12px #00000029; */
  /*   overflow: hidden; */
}

.quiz form{
  background: transparent;
  background-color: transparent;
  padding: 0px;
}

.quiz .swiper-container{
  position: relative; 
}

.quiz .quiz__question-counter{
  background: #001A35;
  /*   background-image: linear-gradient(to right, #2bc5ca, #003571); */
  box-shadow: 0 0 10px #00000029;
  padding: 10px;
  width: fit-content;
  margin-left: clamp(5px, 2.5vw, 40px);
  color: #fff;
  text-transform: uppercase;
  font-weight: 700;
  display: none;
}

.quiz__navigation{
  display: none;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 20px;
  z-index: 9;
  left: 35%;
  transform: translateX(-50%);
  /*   margin-top: 40px; */
  /*   margin-top: clamp(20px, 5vw, 80px); */
}

.quiz__navigation [class*='quiz-button']{
  margin: 10px 20px;
  display: inline-block;
  outline: 0px;
  border: 0px;
}

.quiz__navigation [class*='swiper-button-disabled']{
  color: grey !important;
  background-color: lightgrey !important;
  cursor: not-allowed;
}

.quiz__navigation [class*='quiz-button'].hidden{
  display: none; 
}

#quizContainer{
  margin: auto;
  display: flex !important;
}

#quizContainer .question{
  display: flex;
  align-items: stretch;
  width: 100%;
  justify-content: space-between;
  background: #fff;
  border-radius: 1.25rem;
  box-shadow: 0 2px 12px #00000029;
  margin: auto;
  /*   padding-bottom: clamp(20px,2.5vw,40px); */
  position: relative;
  /*     width: min(1000px,100%); */
}

#quizContainer .question .question-content{
  padding: clamp(20px, 5vw, 80px);
  width: calc(95% - 200px);
  padding-bottom: 100px;
}


#quizContainer .question .question-img{
  width: 300px;
  min-width: 300px;
  max-width: 300px;
  height: auto;

}

#quizContainer .question .question-img img{
  width: 100%;
  height: 100%;
  border-radius: 0px 1.25rem 1.25rem 0px;
  object-fit: cover;
}

/* #quizContainer .question .question-img:before{
content: '';
z-index: -1;
display: block;
position: absolute;
left: 20px;
bottom: -25px;
width: 200px;
height: 200px;
object-fit: contain;
background-repeat: no-repeat;
background-size: contain;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='362.751' height='313.766' viewBox='0 0 362.751 313.766'%3E%3Cg id='MAPJ-icon' transform='translate(-878.328 -964.462)'%3E%3Cpath id='kroc-home-programs-masi' d='M272.063,0l90.688,156.883L272.063,313.766H90.688L0,156.883,90.688,0Z' transform='translate(878.328 964.462)' fill='%23E2F1FB'/%3E%3C/g%3E%3C/svg%3E%0A");
} */


#quizContainer .question.swiper-slide{
  opacity: 0;
  transition: 0.2s ease opacity;
}
#quizContainer .question.swiper-slide-visible{
  opacity: 1;
}

#quizContainer .question h2{
  width: calc(100% - min(350px, 25%)); 
  margin-bottom: 40px;
  color: #383838;
  font-weight: 400;
  position: relative;
  /*   margin-left: 60px; */
  font-size: clamp(24px, 2.5vw, 40px);
  line-height: 1.2;
  letter-spacing: unset;
}

#quizContainer .question h3{
  color: #383838;
  font-weight: 400;
  position: relative;
  font-size: clamp(24px, 2.5vw, 40px);
  line-height: 1.2;
  letter-spacing: unset;
  margin-bottom: 20px;
}

#quizContainer .question input[type="radio"]{
  display: none; 
}

#quizContainer .question ul{
  margin-left: -40px; 
}

#quizContainer .question ul li{
  list-style-type: none;
  counter-increment: section;
  position: relative;
}

#quizContainer .question:not(.question-submit) label{
  font-weight: 100;
  text-align: left;
  font-size: clamp(18px,1.25vw,20px);
  margin: auto;
  display: block;
  cursor: pointer;
  padding: 10px;
  background: #FAFAFA;
  background-color: #FAFAFA;
  color: #001A35;
  margin-bottom: 10px;
  padding-left: 50px;
}

#quizContainer .question .question-content li label:before{
  content: counter(section, upper-alpha);
  position: absolute;
  line-height: 1;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  margin-right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #01AEC6;
  background-color: #01AEC6;
  color: #fff;
}

#quizContainer .question label:hover,
#quizContainer .question input:checked + label{
  background: #001A35;
  background-color: #001A35;
  color: #fff;
}



#quizContainer .question.question-submit h2{
  margin: 0px;
  margin-bottom: 20px;
  width: fit-content;
}

#quizContainer .question h2 .question-num{
  color: #75BEE9;
  display: flex;
  font-weight: 100;
  right: calc(100% + 20px);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text-underline-offset: 10px;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-decoration-color: #003B70;
  font-size: clamp(64px, 5.625vw, 90px);
  /* width: 30px; */
  height: fit-content;
  background: #75BEE929;
  align-items: center;
  justify-content: center;
  padding: 10px clamp(10px, 1.25vw, 20px);
  line-height: 1;
}

.input-final_score{
  display: none; 
}

[class*='input'].checkbox{
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  justify-content: flex-end;
}

[class*='input'].checkbox input{
  margin-right: 10px; 
  margin-top: 10px;
}

.quiz .input-sms_opt_in label{
  margin: 0px;
  padding: 0px;
}

.quiz .input-sms_opt_in label:hover{
  background-color: unset !important; 
  color: #00182B !important;
}

.quiz .input-sms_opt_in{
  margin-top: 10px;
}

.quiz input[type=submit]{
  text-transform: capitalize !important;
  font-weight: 900 !important;
  color: white !important;
  background-color: #871270 !important;
  box-shadow: 5px 5px 10px #00000029 !important;
  text-decoration: none !important;
  font-weight: bold;
  text-align: center !important;
  padding: 20px 40px !important;
  border-radius: 40px; !important;
  margin-top: 20px;
  transition: 0.2s all !important;
}

.quiz .question-submit label{
  letter-spacing: 1.2px;
}

.quiz input[type="text"],
.quiz input[type="email"]{
  font-size: 18px;
}

.quiz .video{
  display: block;
  position: relative;
  text-align: center;
  max-height: 400px;
  height: 400px;
  margin: auto;
  width: fit-content;
  cursor: pointer;
}

.quiz .video:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='1376' height='676' viewBox='0 0 1376 676'%3E%3Cdefs%3E%3CclipPath id='clip-path'%3E%3Crect id='Rectangle_62' data-name='Rectangle 62' width='109.261' height='109.246' fill='%23fff'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg id='Group_993' data-name='Group 993' transform='translate(-272 -993)'%3E%3Cg id='Rectangle_61' data-name='Rectangle 61' transform='translate(272 993)' fill='%23003b70' stroke='%23707070' stroke-width='1'%3E%3Crect width='1376' height='676' stroke='none'/%3E%3Crect x='0.5' y='0.5' width='1375' height='675' fill='none'/%3E%3C/g%3E%3Cg id='Group_962' data-name='Group 962' transform='translate(-1 51)'%3E%3Cg id='Ellipse_2' data-name='Ellipse 2' transform='translate(881 1151)' fill='%2375bee9' stroke='%23707070' stroke-width='1'%3E%3Ccircle cx='79.5' cy='79.5' r='79.5' stroke='none'/%3E%3Ccircle cx='79.5' cy='79.5' r='79' fill='none'/%3E%3C/g%3E%3Cg id='Group_961' data-name='Group 961' transform='translate(905.37 1175.877)'%3E%3Cg id='Group_960' data-name='Group 960' transform='translate(0 0)' clip-path='url(%23clip-path)'%3E%3Cpath id='Path_1544' data-name='Path 1544' d='M39.579,26.772,16.892,10.28a2.736,2.736,0,0,0-4.345,2.207V45.46a2.727,2.727,0,0,0,1.494,2.44,2.755,2.755,0,0,0,1.243.294,2.719,2.719,0,0,0,1.607-.531L39.579,31.186a2.714,2.714,0,0,0,0-4.414' transform='translate(33.072 25.715)' fill='%23fff'/%3E%3Cpath id='Path_1545' data-name='Path 1545' d='M54.632,0a54.623,54.623,0,1,0,54.629,54.632A54.626,54.626,0,0,0,54.632,0m0,100.131a45.506,45.506,0,1,1,45.5-45.5,45.5,45.5,0,0,1-45.5,45.5' transform='translate(0 0)' fill='%23fff'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 9;
}

.quiz .video.play:before,
.quiz .video.play:after{
  display: none; 
  z-index: -1;
}

.quiz .video video{
  width: 100%;
  max-height: 400px;
  height: 400px;
}

@media screen and (max-width: 800px){
  .quiz__navigation{
    z-index: 9;
    left: 50%;
    transform: translateX(-50%);
  }

  #quizContainer .question{
    padding: 40px 10px;
  }
  #quizContainer .question p{
    height: 50px;
    display: block;
  }

  #quizContainer .question h2{
    /*     margin-bottom: 100px; */
  }
  #quizContainer .question .question-img{
    display: none;
  } 
  #quizContainer .question .question-img:before{
    display: none;
  }

  #quizContainer .question .question-content{
    width: 100%; 
  }

  .quiz .swiper-container{
    overflow: hidden; 
  }

  /*   #quizContainer .question.swiper-slide{
  opacity: 0;
  display: none;
  transition: 0.2s ease opacity;
}
  #quizContainer .question.swiper-slide-active{
  opacity: 1;
  display: block;
} */

}

#quiz__errorSlide,
#quiz__finalSlide{
  display: none;
  background: #00000090;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
}

#quiz__errorSlide.active,
#quiz__finalSlide.active{
  display: block;
}

.quiz__errorSlide-inner,
.quiz__finalSlide-inner{
  position: fixed;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: min(1200px, 100%);
  height: 600px;
  background: #fff;
  padding: clamp(40px, 5vw, 80px);
  transition: 0.2s ease top;
}

#quiz__errorSlide.active .quiz__errorSlide-inner,
#quiz__finalSlide.active .quiz__finalSlide-inner{
  top: 10%;
  overflow: scroll;
}

.quiz-popup{

}

.quiz-popup .close{
  cursor: pointer;
  position: absolute;
  top: 5px;
  right: 10px;
  font-size: clamp(40px, 3.5vw, 56px);
  color: #0074C8;
  line-height: 1;
}