[v-cloak]{
display:none;
}

@keyframes fade-slide-in {
  0% {
    opacity: 0;
    /*transform: translateY(-15px);*/
  }
  100% {
    opacity: 1;
  }
}


/*.quiz-start {
  overflow: hidden;
}
*/
.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 / 3 / 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;
}

.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-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;
}



.delay-start .quiz-start-content-wrapper .question-wrapper {
  animation: fade-slide-in 0.5s ease 1s forwards;
}

.quiz-start-wrapper
  .quiz-start
  .quiz-start-content-and-image
  .quiz-start-content-wrapper
  .question-wrapper
  h1 {
  font-size: 2.1875rem;
    line-height: 1.4
}

.quiz-start-wrapper
  .quiz-start
  .quiz-start-content-and-image
  .quiz-start-content-wrapper
  .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
  .question-wrapper
  .intro-text-wrapper
  p {
  font-size: 1rem;
  line-height: 1.375rem;
}

.quiz-start-content-wrapper .quiz-teaser-message {
  /*opacity: 0;
  grid-area: content;
  */
}

.delay-teaser.quiz-teaser-message {
  animation: fade-slide-in 0.5s ease 1s forwards;
}

.quiz-teaser-message .teaser-message-title,
.quiz-teaser-message .teaser-message-text {
  font-size: 2.1875rem;
  line-height: 1.4;
}

.question-wrapper,
.quiz-teaser-message {
  transition: all 0.5s ease;
}
/*div#quizApp{min-height:90vh;}*/
@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-start-wrapper
    .quiz-start
    .quiz-start-content-and-image
    .quiz-start-content-bg {
    grid-area: 1 / 10 / 4 / 23;
  }
}

@media only screen and (min-width: 992px) {
  .quiz-teaser-message .teaser-message-title,
  .quiz-teaser-message .teaser-message-text {
    font-size: 2.375rem;
    line-height: 2.875rem;
  }
  .quiz-start-wrapper
  .quiz-start
  .quiz-start-content-and-image
  .quiz-start-content-wrapper
  .question-wrapper
  h1 {
  font-size: 2.375rem;
  line-height:2.875rem;
}
}

@media only screen and (min-width: 1160px) {
  .quiz-start-wrapper
    .quiz-start
    .quiz-start-content-and-image
    .quiz-start-content-wrapper {
    grid-area: 2 / 13 / 2 / 21;
  }
}