/*@keyframes fadeInUp {
  0% {
    transform: translateY(-10%) !important;
    opacity: 0 !important;
  }
  100% {
    transform: translateY(0%) !important;
    opacity: 1 !important;
  }
}
.animate__fadeInUp{
animation: 0.5s fadeInUp !important;
}
*/
/*
.fade-in-top-enter-active,
.fade-in-top-leave-active,
.fade-in-top-appear-active {
  transition: all 0.5s ease;
}

.fade-in-top-appear-active {
  transition-delay: 3s;
}

.fade-in-top-enter,
.fade-in-top-leave-to,
.fade-in-top-appear {
  opacity: 0;
  transform: translateY(-30px);
}

.fade-in-top-enter-to,
.fade-in-top-leave,
.fade-in-top-appear-to {
  opacity: 1;
  transform: translateY(0);
}
*/


/*
.quiz, .quiz-answered{
	position:absolute;
        width: 100%;
    height: 100%;
}
*/

/*
.slide-fade-enter-active {
    transition: opacity 1s ease;
}

.slide-fade-enter {
    transition: opacity 1s ease;
     transition-delay:3s;
}

.slide-fade-leave-active {
    transition: opacity 1s ease;
    transition-delay:3s;
}

.slide-fade-leave-to, .slide-fade-enter-from {
    transform: translateY(10px);
    opacity: 0;
    transition-delay:3s;
}
.quiz{
	position:absolute;
        width: 100%;
    height: 100%;
}
*/
/*
.question.current{
position:absolute;
width: 100%;
max-width: 100vw;
}
.column-start-1.column-end-13{
position:absolute;
}
*/
/*
.fade-up-enter-active, .fade-up-leave-active {
transition: all 0.5s ease;
}

.fade-up-enter, .fade-up-leave-to {
opacity: 0;
transform: translateY(20px);
position:absolute;
}
*/

/*--------- Quiz question panel CSS starts here -----*/
.exit-popup-wrapper{
	display:none;
    background: #000b;
    width: 100%;
    height: 100%;
    content: "";
    position: fixed;
    top: 0;
    right:0;
        z-index: 99999;
}
.exit-popup{
    border-radius: 8px;
    border: none;
    padding: 4rem 4%;
    box-sizing: border-box;
    max-width: 31.25rem;
    transform: translateY(-10%);
    animation: exit-popup-fadein .3s ease both,exit-popup-slide-down .4s ease both;
    overlay: auto !important;
    opacity: 0;
    overflow:auto;
    position: fixed;
    inset-block-start: 0px;
    inset-block-end: 0px;
    max-height: calc(100% - 2em - 6px);
    margin:auto;
    left:0;
    right:0;
    width:fit-content;
    height:fit-content;
    background:canvas;
    
}
.exit-popup-content{
    flex-direction:column
}
.exit-popup-exit-button{
    text-decoration:none
}
.exit-popup-exit-button:hover{
    text-decoration:underline
}
.exit-popup-wrapper .exit-popup-content h2{font-size:33px;line-height:44px}
@keyframes exit-popup-fadein {
    to {
        opacity: 1
    }
}
.quiz__grid {
  grid-auto-columns: 1fr;
  grid-template-columns: repeat(24, 1fr);
  grid-template-rows: 0px auto auto 1fr;
  place-content: start space-between;
  grid-gap: 2.5rem 0;
  gap: 2.5rem 0;
  display: grid;
}
.quiz__backgroundBar {
  grid-area: 1 / 8 / 3 / 23;
  transition: all 1s ease;
}
.quiz_answered .quiz__backgroundBar {
  background-color: #0000 !important;
  position: relative;
  z-index: 1;
}
.quiz__question {
  position: relative;
  align-self: auto;
  margin: 0;
  margin-bottom: 2rem;
  grid-area: 2/1/2/25;
  align-self: flex-end;
  position: relative;
}
.quiz__questionWrapper {
  color: #fff;
  background-color: #2314a7;
  padding: 1.875rem;
}
.bg_teal {
  background-color: #67cebf;
}
.quiz__questionWrapper span {
  font-size: 1rem;
  line-height: 1.125rem;
  display: block;
}
.quiz__questionWrapper hr {
  width: 10%;
  display: inline-block;
  height: 0.5rem;
  border: none;
  background-color: #fff;
  margin: 1.25rem 0 0;
  opacity: 1;
}
.quiz__questionWrapper h1 {
  margin-top: 1.25rem;
  font-size: 2.125rem;
  line-height: 1.5;
  font-weight: bold;
}
.quiz__options {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
  grid-area: 3/1/3/25;
 /* z-index: 11; */
  transition: all 0.5s ease;
  /*padding: 0 0 0 0.5rem;*/
}
.quiz_answered .quiz__options {
  opacity: 0;
  transform: translateY(-30px);
  pointer-events: none;
  z-index: 11;
}
.quiz__optionsWrapper:not(:last-of-type) {
  margin-bottom: 1.25rem;
  position: relative;
  z-index: 2;
}
.quiz__optionsWrapper {
  grid-area: 3 / 1 / 3 / 25;
  padding: 0 0 0 0.5rem;
  transition: all 0.5s ease;
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
  font-family: __maldenSans_d90c0c, __maldenSans_Fallback_d90c0c;
}

button.quiz__option {
  display: block;
  box-sizing: border-box;
  position: relative;
  width: 100%;
  min-height: 4.9375rem;
  max-height: 5.9375rem;
  padding: 0.625rem 0.9375rem 0.625rem 5.9375rem;
  border: 2px solid #f3f3f3;
  border-radius: 5px;
  background-color: #eeedf8;
  cursor: pointer;
  transition: all .5s ease;
}
button.no-image.quiz__option {
  padding: 1.5625rem;
}
button.quiz__option:hover {
  border-color: #2314a7;
}
button.quiz__option.no_image {
  padding-left: 1.5625rem;
}
.quiz__optionImage {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: -0.625rem;
  top: -0.625rem;
  background-color: #eff3ee;
  width: 5.625rem;
  height: 4.625rem;
  z-index: 10;
  box-shadow: 5px 5px 10px #0001;
  overflow: hidden;
}

.quiz__optionImage img {
  position: absolute;
  height: 100%;
  width: 100%;
  inset: 0px;
  color: transparent;
  object-fit: contain;
  object-position: center center;
}
.quiz__optionText p {
  display: flex;
  align-items: center;
  height: 100%;
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.15;
  text-align: left;
  margin-bottom: 0;
  margin-top: 0;
  font-family: 'maldenSans-regular', Arial;
  letter-spacing:0.5px
}
.quiz__navigation {
  grid-area: 6 / 1 / 1 / 25;
  display: flex;
  align-items: flex-end;
  width: 100%;
 /* z-index: 10; */
  padding-bottom: 1.25rem;
  min-height:200px
}
.quiz__navigation .audit-exit-btn{font-weight:400}
button.exit_cta {
  color: #2314a7;
  background: none;
  cursor: pointer;
  border: none;
  border-radius: 0;
  padding: 0;
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
  display: flex;
  justify-content: flex-end;
}
/* .quiz_answered .quiz__answerExplanation {
transition-delay: 0.5s;
opacity: 1;
transform: translateY(0);
pointer-events: all;
margin-top: 0;
} */
.quiz_loaded .quiz__answerExplanation {
  grid-area: 2 / 18 / 4 / 25;
  justify-self: flex-end;
  transition: all 0.5s ease;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  display: flex;
}
.quiz_answered .quiz__answerExplanation {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
  margin-top: 0;
  grid-area: 3 / 2 / 3 / 24;
  justify-self: flex-end;
  transform: translateY(0);
  padding-top: 0;
  transition: all 0.5s ease;
  z-index: 11;
}

.quiz__answerExplanationWrapper {
  transition: all 0.5s ease;
}
.quiz__answerExplanation-title {
  color: #2314a7;
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
  font-weight: 800;
}
.quiz__answerExplanation-desc {
  font-size: 1.125rem;
  line-height: 1.875rem;
}
.quiz__answerExplanation-next {
  margin-top: 2.5rem;
  gap: 1.25rem;
  display: flex;
  align-items: center;
}

.quiz__answerExplanation-next a.cta {
  display: inline-flex;
  text-decoration: none;
  border: 1px solid #2314a7;
  border-radius: 6.25rem;
  padding: 0.75rem 1.75rem;
  line-height: 140%;
  font-weight: 600;
  background-color: #2314a7;
  cursor: pointer;
  transition: background-color, border-color, color, opacity;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
.quiz_loaded .quiz__carousel {
  grid-area: 1 / 4 / 3 / 23;
  transition: all 1s ease;
  opacity: 0;
  pointer-events: none;
  transform: translateY(30px);
}
.quiz_answered .quiz__carousel {
  opacity: 1;
  transform: translateY(0);
  z-index: 0;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  grid-area: 1 / 4 / 3 / 23;
  transition: all 1s ease;
}
.quiz_answered .quiz__carousel:before {
  content: "";
  opacity: 0.7;
  mix-blend-mode: multiply;
  min-width: 0;
  display: block;
  position: absolute;
  width: 100px;
  height: 40px;
  bottom: -15px;
  left: -16%;
  z-index: 100;
  background-color: #67cebf;
}

.quiz_answered .quiz__carousel:after {
  content: "";
  position: absolute;
  mix-blend-mode: multiply;
  min-width: 0;
  display: block;
  width: 190px;
  height: 70px;
  right: -60px;
  top: 100px;
  z-index: 100;
  left: auto;
  background-color: #67cebf;
}

.quiz__navigationItems {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-left:10px;
}
a.quiz__navigation_button {
  display: inline-flex;
  align-items: center;
  border: none;
  padding: 0;
  color: #2314a7;
  background-color: #0000;
  text-decoration: none;
  
}
a.quiz__navigation_button span {
  padding-left: 0.625rem;
}
a.quiz__navigation_button span:before{
  content:"";
  position:absolute;
  background-image:url(~/media/Images/D/drinkiq/Universal/icons/quiz-prev-btn);
  height:31px;
  width:31px;
  left:-25px;
  top:-5px}

dialog#exitModalBox {
  border-radius: 8px;
  border: none;
  padding: 4rem 4%;
  box-sizing: border-box;
  max-width: 31.25rem;
  transform: translateY(-10%);
  animation: ExitModal_fade-in____7eC 0.3s ease both,
    ExitModal_slide-down__EdoZW 0.4s ease both;
}

.exitModalBox__content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1#modalMessage {
  margin-bottom: 1.875rem;
  font-size: 2.125rem;
  line-height: 2.75rem;
  text-align: center;
}
p.ExitModal_modalDialog__bodyText__Q5AD6 {
  margin-bottom: 2.5rem;
  text-align: center;
}

button.exitModalBox__button {
  margin-bottom: 2.5rem;
  border: 1px solid #2314a7;
  border-radius: 6.25rem;
  padding: 0.75rem 1.75rem;
  line-height: 140%;
  font-weight: 600;
  background-color: #2314a7;
  cursor: pointer;
  transition: background-color, border-color, color, opacity;
  transition-duration: 0.3s;
  transition-timing-function: ease;
  text-decoration: none;
  color: #fff;
}

a.exitModalBox__leaveLink {
  text-decoration: none;
}
.quiz__optionImage.oneimage {
  top: 3.375rem;
}
.quiz__options .quiz__optionsWrapper:last-of-type .oneimage {
  display: none;
}
.question .quiz__navigation {
  display: flex;
  align-items: flex-end;
  width: 100%;
  /* z-index: 10; */
  height: 100%;
  grid-area: 4 / 3 / 5 / 23;
}
.agree-disagree-cta-wrapper{
  gap: 1.25rem;
}
.quiz__optionImage.true-false-option{top:50px}
.quizStartPanelScreen .optionImage{background-color:#fdeedc;}


@media only screen and (min-width: 740px) {
  .quiz__backgroundBar {
    grid-area: 1 / 3 / 6 / 11;
  }
  .quiz__question {
    align-self: auto;
    margin-bottom: 0;
    grid-area: 2 / 1 / 4 / 13;
  }
  .quiz__options {
    grid-area: 2 / 14 / 4 / 25;
  }
  .quiz_answered .quiz__answerExplanation {
    padding-top: 110px;
    grid-area: 2 / 15 / 4 / 25;
    display: flex;
  }
  .quiz__navigation {
    grid-area: 4 / 1 / 5 / 25;
    min-height:200px
  }
  .quiz_answered .quiz__carousel {
    grid-area: 1 / 5 / 6 / 14;
  }
  
  .quiz_answered .quiz__carousel:before {
    width: 100px;
    height: 60px;
    bottom: 15%;
    left: -10%;
  }
  .quiz_answered .quiz__carousel:after {
    width: 190px;
    height: 90px;
    right: -140px;
    top: 112px;
  }
  .quiz__questionWrapper {
    padding: 1.875rem 1.875rem 4.375rem 1.875rem;
  }
  .question .quiz__navigation {
    min-height: 12.5rem;
  }
}

@media only screen and (min-width: 1160px) {
  .quiz__navigation{
  min-height:200px;
  grid-area: 4 / 3 / 5 / 23
  }
  .quiz__backgroundBar {
    grid-area: 1 / 6 / 6 / 13;
  }
  /*.quiz__backgroundBar.bg-height {
    grid-area: 1 / 6 /10 / 13;
  }*/
   .quiz__backgroundBar.bg-height {
    grid-area: 1 / 6 /6 / 13;
  }
  .quiz__question {
    grid-area: 2 / 3 / 4 / 12;
    align-self: auto;
    margin-bottom: 0;
  }
  
  .quiz__questionWrapper h1 {
    margin-top: 4.375rem;
  }
  .quiz__options {
    grid-area: 2 / 14 / 4 / 23;
  }
  
  .quiz_answered .quiz__answerExplanation {
    grid-area: 2 / 18 / 4 / 25;
    padding-top: 170px;
  }
  
  .quiz_loaded .quiz__carousel {
    grid-area: 1 / 7 / 6 / 17;
  }
  .quiz_answered .quiz__carousel {
    grid-area: 1 / 7 / 6 / 17;
  }
  .quiz_answered .quiz__carousel:before {
    width: 100px;
    height: 60px;
    bottom: 15%;
    left: -10%;
    background-color: #67cebf;
    content: "";
    opacity: 0.7;
    mix-blend-mode: multiply;
    min-width: 0;
    display: block;
    position: absolute;
    z-index: 100;
    transition: all 0.5s ease;
  }
  
  .quiz_answered .quiz__carousel:after {
    width: 190px;
    height: 90px;
    right: -140px;
    top: 112px;
    background-color: #67cebf;
    content: "";
    position: absolute;
    mix-blend-mode: multiply;
    min-width: 0;
    display: block;
    z-index: 100;
    transition: all 0.5s ease;
  }
}

/*--------- Quiz question panel CSS ends here -----*/

/*--------- Quiz start panel CSS starts here -----*/

.quiz-start-wrapper .quiz-start .quiz-start-content-and-image {
  grid-auto-columns: 1fr;
  grid-template-columns: repeat(24, 1fr);
  grid-template-rows: 160px auto 160px;
  place-content: center space-between;
  grid-gap: 2.5rem 0;
  gap: 2.5rem 0;
  display: grid;
  width: 100%;
}
.quiz-start-wrapper
.quiz-start
.quiz-start-content-and-image
.quiz-start-content-bg {
  background-color: #e86bad33;
  position: relative;
  transition: all 1s ease;
  /* grid-area: 1 / 10 / 4 / 23; */
}
.quiz-start-wrapper
.quiz-start
.quiz-start-content-and-image
.quiz-start-content-bg:after {
  content: "";
  position: absolute;
  top: 80px;
  right: -45px;
  width: 115px;
  height: 60px;
  mix-blend-mode: multiply;
  background-color: #e86bad;
  overflow:visible;
}
.quiz-start-wrapper
.quiz-start
.quiz-start-content-and-image
.quiz-start-content-bg:before {
  background-color: #e86bad;
  content: "";
  position: absolute;
  bottom: 70px;
  left: -50px;
  width: 100px;
  height: 50px;
  mix-blend-mode: multiply;
}
.quiz-start-wrapper
.quiz-start
.quiz-start-content-and-image
.quiz-start-image-wrapper {
  display: none;
  position: relative;
  min-height: 25rem;
  mix-blend-mode: multiply;
  transition: all 1s ease;
}
.quiz-start-wrapper
.quiz-start
.quiz-start-content-and-image
.quiz-start-image-wrapper
img {
  position: absolute;
  height: 100%;
  width: 100%;
  inset: 0px;
  color: transparent;
  object-fit: cover;
}
/* .quiz-start-wrapper
.quiz-start
.quiz-start-content-and-image
.quiz-start-content-wrapper {
grid-area: 2 / 4 / 2 / 22;
display: grid;
grid-template: "content" 1fr/1fr;
justify-content: center;
align-items: center;
margin: 0;
text-align: center;
} */
.quiz-start-wrapper
.quiz-start
.quiz-start-content-and-image
.quiz-start-content-wrapper
.quiz-start-content
.question-wrapper
h1 {
  font-size: 2.375rem;
  line-height: 2.875rem;
}
.quiz-start-wrapper
.quiz-start
.quiz-start-content-and-image
.quiz-start-content-wrapper
.quiz-start-content
.question-wrapper
.cta-wrapper
a {
  margin-top: 1.25rem;
  margin-bottom: 1.875rem;
}
.quiz-start-wrapper
.quiz-start
.quiz-start-content-and-image
.quiz-start-content-wrapper
.quiz-start-content
.question-wrapper
.intro-text-wrapper
p {
  font-size: 1rem;
  line-height: 1.375rem;
}
.quizStartPanelScreen .quiz__navigation {
  grid-area: 4 / 3 / 5 / 23;
  min-height: auto;
}
@media only screen and (min-width: 740px) {
  .quiz-start-wrapper
  .quiz-start
  .quiz-start-content-and-image
  .quiz-start-image-wrapper {
    grid-area: 2 / 3 / 2 / 11;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* .quiz-start-wrapper
  .quiz-start
  .quiz-start-content-and-image
  .quiz-start-content-wrapper {
  grid-area: 2 / 12 / 2 / 22;
} */
  .quiz__optionImage {
    width: 7.8125rem;
    height: 5.875rem;
  }
  button.quiz__option {
    height: 5.9375rem;
    padding: 0.9375rem 1.5625rem 0.9375rem 8.75rem;
  }
}
/*--------- Quiz start panel CSS ends here -----*/

.quiz-articles__title{grid-column-start: 1;grid-column-end: 13;text-align: center;}
.quiz-articles__wrapper{display: flex;justify-content: space-between;grid-column-start: 1;grid-column-end: 13; gap: 30px;}
.quiz-articles__article{display: block; width: 100%;}
.quiz-articles__anchor-content{text-align: center; margin-right: 20px;}
.quiz-articles__anchor-image{width: 100%; height: 220px; overflow: hidden;}
.quiz-articles__anchor-image .quiz-articles__img{height: 100%; width: 100%; object-position: center center; transition: all .3s ease-in-out;}
.quiz-articles__article:hover .quiz-articles__img{transform: scale(1.1);}
.quiz-articles__anchor-title{color: var(--color-grey-text);}
.quiz-articles__anchor-intro{color: var(--color-light-black);}
.quiz-articles__title{max-width: 65%; margin: 0 auto;}
.quiz-articles__link{text-align: center; grid-column-start: 1; grid-column-end: 13;}
.quiz-audit__wrapper{background-color: #f9f9f9;grid-column-start: 4;grid-column-end: 10;display: flex;gap: 48px;}
.quiz-audit__content{padding: 20px 20px 20px 0;display: flex;flex-direction: column;justify-content: space-between;}
.quiz-audit__content .quiz-audit__link-text{margin-right:20px;}
.quiz-audit__anchor{display: flex; width: 100%; align-items: center; justify-content: space-between;}
.quiz__carousel.quiz__carousel-orange:after,.quiz__carousel.quiz__carousel-orange:before {
    background-color: #f7bb72
}

.quiz__carousel.quiz__carousel-green:after,.quiz__carousel.quiz__carousel-green:before {
    background-color: #67cebf
}

.quiz__carousel.quiz__carousel-pink:after,.quiz__carousel.quiz__carousel-pink:before {
    background-color: #e86bad
}
@media all and (max-width: 991.98px){
.quiz_answered .quiz__carousel{
	max-height:400px;
}
.header--language-regional .close-icon{
	    position: relative;
    right: 0;
}
/* .quiz__options{
	z-index:11;
} */
 .quiz-articles__title{max-width: 80%;}
 .quiz-articles__article{flex-basis: calc(50% - 15px);}
 .quiz-audit__wrapper{grid-column-start: 2;grid-column-end: 11;}
 .quiz-articles__wrapper{flex-wrap: wrap;}
}

@media all and (max-width: 767.98px){
  .quiz-articles__article{flex-basis: 100%;}
  .quiz-audit__wrapper{flex-direction: column;}
  .quiz-audit__wrapper{grid-column-start: 1;grid-column-end: 13;}
  .quiz-audit__content{padding: 0 20px 20px 20px;}
}

.quizResultpanelScreen.quiz-result-page{padding-top: 80px;}

@media only screen and (min-width: 768px) {
.quiz-audit__image{
max-width: 50%;
height: 100%;
}
}