@charset "UTF-8";
html {
  height: auto !important;
}

#fenkarol-quiz {
  margin-bottom: 50px;
}

@font-face {
  font-family: "NotoSans";
  font-style: normal;
  font-weight: 400;
  src: local("NotoSans"), url("/wp-content/themes/wplms/content/na-puti-k-tochnomu-diagnozu/assets/fonts/NotoSans.woff2") format("woff2");
}
@font-face {
  font-family: "NotoSans";
  font-style: normal;
  font-weight: 700;
  src: local("NotoSans"), url("/wp-content/themes/wplms/content/na-puti-k-tochnomu-diagnozu/assets/fonts/NotoSans-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "FuturaPT";
  font-style: normal;
  font-weight: 400;
  src: local("FuturaPT"), url("/wp-content/themes/wplms/content/na-puti-k-tochnomu-diagnozu/assets/fonts/FuturaPT-Book.woff2") format("woff2");
}
@font-face {
  font-family: "FuturaPT";
  font-style: normal;
  font-weight: 450;
  src: local("FuturaPT"), url("/wp-content/themes/wplms/content/na-puti-k-tochnomu-diagnozu/assets/fonts/FuturaPT-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "FuturaPT";
  font-style: normal;
  font-weight: 700;
  src: local("FuturaPT"), url("/wp-content/themes/wplms/content/na-puti-k-tochnomu-diagnozu/assets/fonts/FuturaPT-Bold.woff2") format("woff2");
}
#fenkarol-quiz .views .view {
  display: none;
}
#fenkarol-quiz .views.v1 .view.v1 {
  display: block;
}
#fenkarol-quiz .views.v2 .view.v1 {
  display: none;
}
#fenkarol-quiz .views.v2 .view.v2 {
  display: block;
}
#fenkarol-quiz .views.v3 .view.v2 {
  display: none;
}
#fenkarol-quiz .views.v3 .view.v3 {
  display: block;
}
#fenkarol-quiz .views.v4 .view.v3 {
  display: none;
}
#fenkarol-quiz .views.v4 .view.v4 {
  display: block;
}
#fenkarol-quiz .views.v4 .view.v4 .monster.monster--molecule {
  bottom: auto;
  top: 65px;
  right: 25px;
}
#fenkarol-quiz .views.v5 .view.v4 {
  display: none;
}
#fenkarol-quiz .views.v5 .view.v5 {
  display: block;
}
#fenkarol-quiz .views.v5 .view.v5 .monster.monster--molecule {
  bottom: -31px;
  right: auto;
  left: -31px;
}
#fenkarol-quiz .views.v6 .view.v5 {
  display: none;
}
#fenkarol-quiz .views.v6 .view.v6 {
  display: block;
}
#fenkarol-quiz .views.v6 .view.v6 .monster.monster--molecule {
  bottom: auto;
  top: 60px;
  right: 25px;
}
#fenkarol-quiz .views.v7 .view.v6 {
  display: none;
}
#fenkarol-quiz .views.v7 .view.v7 {
  display: block;
}
#fenkarol-quiz .views.v7 .view.v7 .monster.monster--big {
  bottom: -20px;
}
#fenkarol-quiz .views.v7 .view.v7 .monster.monster--molecule {
  bottom: auto;
  top: -31px;
  left: -31px;
}
#fenkarol-quiz .views.v8 .view.v7 {
  display: none;
}
#fenkarol-quiz .views.v8 .view.v8 {
  display: block;
}
#fenkarol-quiz .section-title {
  margin: 0;
  color: #000000;
  font-family: "NotoSans", "Arial", "Helvetica Neue", sans-serif;
  font-size: 23px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
@media screen and (max-width: 576px) {
  #fenkarol-quiz .section-title {
    font-size: 18px;
  }
}
#fenkarol-quiz p {
  margin: 0;
  font-family: "FuturaPT", "Arial", "Helvetica Neue", sans-serif;
  font-size: 17px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
#fenkarol-quiz ul,
#fenkarol-quiz ol {
  margin: 5px 0 0 0;
  padding: 0 0 0 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#fenkarol-quiz ul li,
#fenkarol-quiz ol li {
  color: rgba(81, 79, 79, 0.9);
  font-family: "FuturaPT", "Arial", "Helvetica Neue", sans-serif;
  font-size: 17px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
#fenkarol-quiz ul li::before,
#fenkarol-quiz ol li::before {
  content: "•";
}
#fenkarol-quiz ol {
  margin: 10px 0 0 0;
  padding: 0 0 0 25px;
  list-style: decimal;
}
#fenkarol-quiz ol li::before {
  content: "";
}
#fenkarol-quiz .pink-bg {
  padding: 28px 20px;
  border-radius: 10px;
  background: #FBF3F7;
}
#fenkarol-quiz .choosing-answer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
#fenkarol-quiz .text-center {
  text-align: center;
}
#fenkarol-quiz .monster {
  position: absolute;
}
#fenkarol-quiz .monster.monster--big {
  width: 121px;
}
#fenkarol-quiz .monster.monster--molecule, #fenkarol-quiz .monster.monster--small {
  width: 62px;
}
#fenkarol-quiz .next-page-block {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 17px;
}
#fenkarol-quiz .next-page-block::before {
  content: "";
  display: block;
  height: 4px;
  width: 100%;
  background: #F5F5F5;
}
#fenkarol-quiz .next-page-block .btn {
  width: 411px;
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 576px) {
  #fenkarol-quiz .next-page-block .btn {
    width: 100%;
  }
}
#fenkarol-quiz .next-page-block .monster.monster--big {
  width: 45px;
  left: calc(50% - 175px);
  top: 17px;
  animation: showBlueMonsterFromButton 10s ease infinite;
}
#fenkarol-quiz .next-page-block .monster.monster--small {
  right: -62px;
  z-index: 2;
  animation: puff-in-tl 1.5s ease-in-out both, flySmallMonster 8s linear infinite;
}
@media screen and (max-width: 576px) {
  #fenkarol-quiz .next-page-block .monster.monster--big {
    left: calc(50% - 145px);
  }
  #fenkarol-quiz .next-page-block .monster.monster--small {
    right: -62px;
  }
}
#fenkarol-quiz .library {
  display: none;
}
#fenkarol-quiz .library.visible {
  display: block;
}
#fenkarol-quiz .w-medium {
  font-weight: 450;
}
#fenkarol-quiz .w-bold {
  font-weight: 700;
}
#fenkarol-quiz .color-gray {
  color: rgba(81, 79, 79, 0.9);
}
#fenkarol-quiz .color-black {
  color: #000000;
}
#fenkarol-quiz .color-pink {
  color: #BC1E6A;
}
#fenkarol-quiz .color-red {
  color: #A33737;
}
#fenkarol-quiz .color-turquoise {
  color: #00938B;
}
#fenkarol-quiz .mt-10 {
  margin-top: 10px;
}
#fenkarol-quiz .mt-14 {
  margin-top: 14px;
}
#fenkarol-quiz .mt-20 {
  margin-top: 20px;
}
#fenkarol-quiz .mt-24 {
  margin-top: 24px;
}
#fenkarol-quiz .mt-26 {
  margin-top: 26px;
}
#fenkarol-quiz .mt-30 {
  margin-top: 30px;
}
#fenkarol-quiz .mt-42 {
  margin-top: 42px;
}
#fenkarol-quiz .mt-50 {
  margin-top: 50px;
}
#fenkarol-quiz .mt-57 {
  margin-top: 57px;
}
#fenkarol-quiz .pl-16 {
  padding-left: 16px;
}
@keyframes showBlueMonsterFromButton {
  0% {
    transition-delay: 2s;
  }
  25% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-30px);
    transition-delay: 4s;
  }
  51% {
    transform: translateY(-30px) scale(-1, 1);
    transition-delay: 1s;
  }
  75% {
    transform: translateY(-30px) scale(-1, 1);
  }
  100% {
    transform: translateY(0) scale(-1, 1);
  }
}
@keyframes flySmallMonster {
  0% {
    transform: translate(0, 0) scale(-1, 1) rotate(0);
  }
  50% {
    transform: translate(-5px, 15px) scale(-1, 1) rotate(-15deg);
  }
  100% {
    transform: translate(0, 0) scale(-1, 1) rotate(0);
  }
}
@keyframes puff-in-tl {
  0% {
    -webkit-transform: scale(2);
    transform: scale(2);
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-filter: blur(4px);
    filter: blur(4px);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
  }
}
#fenkarol-quiz .main-layout .main-layout__wrapper {
  display: flex;
  align-items: flex-start;
  gap: 93px;
}
@media screen and (max-width: 1400px) {
  #fenkarol-quiz .main-layout .main-layout__wrapper {
    flex-direction: column-reverse;
    gap: 50px;
  }
}
#fenkarol-quiz .main-content {
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 1400px) {
  #fenkarol-quiz .main-content {
    width: 100%;
  }
}
#fenkarol-quiz .quiz-bnr {
  width: 358px;
  height: 589px;
  flex-shrink: 0;
  border-radius: 10px;
  background: #F5F5F5;
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.17);
}
@media screen and (max-width: 1400px) {
  #fenkarol-quiz .quiz-bnr {
    margin: 0 auto;
  }
}
@media screen and (max-width: 576px) {
  #fenkarol-quiz .quiz-bnr {
    width: 100%;
  }
}
#fenkarol-quiz .quiz-layout .quiz-breadcrumbs {
  margin: 14px 0 20px 0;
}
#fenkarol-quiz .quiz-layout .quiz-breadcrumbs span {
  color: rgba(81, 79, 79, 0.9);
  font-family: "FuturaPT", "Arial", "Helvetica Neue", sans-serif;
  font-size: 17px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
#fenkarol-quiz .quiz-layout .quiz-picture {
  margin-bottom: 10px;
}
@media screen and (max-width: 576px) {
  #fenkarol-quiz .quiz-layout .quiz-picture {
    max-width: 100% !important;
  }
}
#fenkarol-quiz .quiz-layout .quiz-layout__hidden {
  width: 100%;
  margin-top: 57px;
  display: none;
  justify-content: center;
}
#fenkarol-quiz .quiz-layout .hint {
  padding: 8px 24px;
  width: 600px;
  height: 41px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  border: 1px solid #00938B;
  background: #FFFFFF;
}
#fenkarol-quiz .quiz-layout .hint span {
  color: #00938B;
  font-family: "FuturaPT", "Arial", "Helvetica Neue", sans-serif;
  font-size: 17px;
  font-style: normal;
  font-weight: 450;
  line-height: 17px;
}
@media screen and (max-width: 768px) {
  #fenkarol-quiz .quiz-layout .hint {
    width: 100%;
  }
}
#fenkarol-quiz .btn {
  padding: 8px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
}
#fenkarol-quiz .btn span {
  color: #FFFFFF;
  font-family: "FuturaPT", "Arial", "Helvetica Neue", sans-serif;
  font-size: 17px;
  font-style: normal;
  font-weight: 450;
  line-height: normal;
}
#fenkarol-quiz .btn:hover {
  cursor: pointer;
}
#fenkarol-quiz .btn.btn--fill {
  background: #00938B;
}
#fenkarol-quiz .btn.btn--fill:focus {
  outline: none;
  border: none;
}
#fenkarol-quiz .btn[disabled] {
  background: #7FC9C5;
}
#fenkarol-quiz .btn[disabled]:hover {
  cursor: initial;
}
#fenkarol-quiz .input-control {
  width: 600px;
  max-width: 600px;
  min-height: 41px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  border: 1px solid #E3D4DC;
  background: #FFFFFF;
}
#fenkarol-quiz .input-control input, #fenkarol-quiz .input-control label {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 8px;
}
#fenkarol-quiz .input-control input {
  opacity: 0;
  z-index: 2;
}
#fenkarol-quiz .input-control input:hover {
  cursor: pointer;
}
#fenkarol-quiz .input-control input:checked + label {
  border: 1px solid #00938B;
  color: #00938B;
  font-weight: 450;
}
#fenkarol-quiz .input-control input[data-right-answer=false]:checked + label {
  border: 1px solid #E9A8A8;
  color: #E9A8A8;
  font-weight: 450;
}
#fenkarol-quiz .input-control input.check-result[data-correct-answer=true] + label {
  border: 1px solid #00938B;
  color: #00938B;
  font-weight: 450;
}
#fenkarol-quiz .input-control input.check-result[data-correct-answer=false] + label {
  border: 1px solid #E9A8A8;
  color: #E9A8A8;
  font-weight: 450;
}
#fenkarol-quiz .input-control label {
  padding: 8px 24px;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #636161;
  font-family: "FuturaPT", "Arial", "Helvetica Neue", sans-serif;
  font-size: 17px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
@media screen and (max-width: 768px) {
  #fenkarol-quiz .input-control {
    width: 100%;
    height: auto;
  }
  #fenkarol-quiz .input-control label {
    position: relative;
  }
}
#fenkarol-quiz .explanation-answer {
  display: none;
  width: 100%;
  text-align: left;
  position: relative;
}
#fenkarol-quiz .explanation-answer .explanation-answer__wrapper {
  margin: 42px 0 30px 0;
  padding: 20px;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  background: #C26098;
  border-radius: 10px;
}
#fenkarol-quiz .explanation-answer .explanation-answer__right-answer {
  width: 100%;
  padding: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  background: #FFFFFF;
  text-align: center;
}
#fenkarol-quiz .explanation-answer .explanation-answer__result {
  margin-top: 26px;
  font-family: "FuturaPT", "Arial", "Helvetica Neue", sans-serif;
  font-size: 29px;
  font-style: normal;
  font-weight: 450;
  line-height: 29px;
  color: #FFFFFF;
}
#fenkarol-quiz .explanation-answer .explanation-answer__instruction {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: rgba(255, 255, 255, 0.9);
}
#fenkarol-quiz .explanation-answer .monster.monster--big {
  bottom: 0;
  left: 30px;
  z-index: 1;
  transform: rotate(180deg);
  animation: translateMonsterFromBottom 10s ease infinite;
}
#fenkarol-quiz .explanation-answer .monster.monster--big.pos-bottom-right {
  left: auto;
  right: 30px;
}
#fenkarol-quiz .explanation-answer .monster.monster--big.pos-right {
  bottom: 0;
  left: auto;
  right: 0;
  transform: rotate(90deg);
  animation: translateMonsterFromRight 10s ease infinite;
}
#fenkarol-quiz .explanation-answer .monster.monster--molecule {
  bottom: -28px;
  right: 15px;
  z-index: 3;
  animation: flyMonsterInMolecule 5s linear infinite;
}
#fenkarol-quiz .explanation-answer.visible {
  display: block;
}
@media screen and (max-width: 1400px) {
  #fenkarol-quiz .explanation-answer .explanation-answer__instruction br {
    display: none;
  }
}
@media screen and (max-width: 576px) {
  #fenkarol-quiz .explanation-answer .monster.monster--big {
    width: 100px;
    animation: translateMonsterFromBottomMobile 10s ease infinite;
  }
  #fenkarol-quiz .explanation-answer .monster.monster--big.pos-right {
    display: none;
  }
}
@keyframes translateMonsterFromBottom {
  0% {
    transition-delay: 2s;
  }
  25% {
    transform: translateY(0) rotate(180deg);
  }
  50% {
    transform: translateY(84px) rotate(180deg);
    transition-delay: 4s;
  }
  75% {
    transform: translateY(84px) rotate(180deg);
  }
  100% {
    transform: translateY(0) rotate(180deg);
  }
}
@keyframes translateMonsterFromBottomMobile {
  0% {
    transition-delay: 2s;
  }
  25% {
    transform: translateY(0) rotate(180deg);
  }
  50% {
    transform: translateY(70px) rotate(180deg);
    transition-delay: 4s;
  }
  75% {
    transform: translateY(70px) rotate(180deg);
  }
  100% {
    transform: translateY(0) rotate(180deg);
  }
}
@keyframes translateMonsterFromRight {
  0% {
    transform: translate(0, -50%) rotate(90deg);
    transition-delay: 2s;
  }
  25% {
    transform: translate(0, -50%) rotate(90deg);
  }
  50% {
    transform: translate(94px, -50%) rotate(90deg);
    transition-delay: 4s;
  }
  75% {
    transform: translate(94px, -50%) rotate(90deg);
  }
  100% {
    transform: translate(0, -50%) rotate(90deg);
  }
}
@keyframes flyMonsterInMolecule {
  0% {
    transform: translate(0, 0) rotate(0) scale(1);
  }
  33% {
    transform: translate(5px, 10px) rotate(-15deg) scale(0.9);
  }
  66% {
    transform: translate(10px, 0) rotate(15deg) scale(1.1);
  }
  100% {
    transform: translate(0, 0) rotate(0) scale(1);
  }
}
#fenkarol-quiz .chart-block {
  position: relative;
  overflow: hidden;
}
#fenkarol-quiz .chart-block .chart-block__wrapper {
  padding: 20px;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 53px;
  background: #FBF3F7;
}
#fenkarol-quiz .chart-block ul {
  gap: 2px;
}
#fenkarol-quiz .chart-block .chart-block__picture {
  display: flex;
  align-items: center;
  gap: 6px;
}
#fenkarol-quiz .chart-block .chart-block__picture img {
  width: 110px;
}
#fenkarol-quiz .chart-block .chart-block__picture .chart-block__percent {
  display: block;
  margin-top: 10px;
  color: #BC1E6A;
  font-family: "FuturaPT", "Arial", "Helvetica Neue", sans-serif;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
#fenkarol-quiz .chart-block .chart-block__picture .chart-block__percent > span {
  font-size: 24px;
}
#fenkarol-quiz .chart-block .monster.monster--molecule {
  width: 85.5px;
  top: -80px;
  left: -90px;
  z-index: 3;
  transform: rotate(126deg);
  animation: flyBlueMonster1 10s ease-in-out infinite;
}
#fenkarol-quiz .chart-block .monster.monster--crazy-molecule {
  width: 90px;
  bottom: -85px;
  right: -86px;
  z-index: 3;
  rotate: rotate(126deg);
  animation: flyBlueMonster2 8s ease-in-out infinite;
  animation-delay: 1s;
}
@media screen and (max-width: 992px) {
  #fenkarol-quiz .chart-block .chart-block__wrapper {
    flex-direction: column;
    gap: 24px;
  }
  #fenkarol-quiz .chart-block .chart-block__info {
    text-align: center;
  }
}
@media screen and (max-width: 576px) {
  #fenkarol-quiz .chart-block br {
    display: none;
  }
  #fenkarol-quiz .chart-block .monster.monster--crazy-molecule {
    width: 70px;
  }
}
#fenkarol-quiz .count-cases .count-cases__wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  text-align: center;
}
@media screen and (max-width: 1400px) {
  #fenkarol-quiz .count-cases .count-cases__wrapper {
    justify-content: space-around;
  }
}
@media screen and (max-width: 768px) {
  #fenkarol-quiz .count-cases .count-cases__wrapper {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }
}
#fenkarol-quiz .count-cases .count-case {
  width: 330px;
}
#fenkarol-quiz .count-cases .count-case .count-case__number {
  display: block;
  color: #BC1E6A;
  font-family: "FuturaPT", "Arial", "Helvetica Neue", sans-serif;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
#fenkarol-quiz .info-block .info-block__wrapper {
  padding: 28px 20px;
  display: flex;
  align-items: center;
  gap: 18px;
  border-radius: 10px;
  background: #F471B8;
}
#fenkarol-quiz .info-block .info-block__icon {
  width: 60px;
}
#fenkarol-quiz .info-block .info-block__text {
  color: #FFFFFF;
  font-family: "FuturaPT", "Arial", "Helvetica Neue", sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 450;
  line-height: normal;
}
@media screen and (max-width: 576px) {
  #fenkarol-quiz .info-block .info-block__wrapper {
    flex-direction: column;
    text-align: center;
  }
}
#fenkarol-quiz .quiz-preview {
  max-width: 100%;
}
#fenkarol-quiz .start-quiz {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
#fenkarol-quiz .start-quiz .btn {
  width: 354px;
}
#fenkarol-quiz .start-quiz .monster.monster--small {
  right: 30px;
  transform: rotate(-45deg);
  animation: rotateMonster 5s ease-in-out infinite;
}
@media screen and (max-width: 768px) {
  #fenkarol-quiz .start-quiz .btn {
    width: 100%;
  }
  #fenkarol-quiz .start-quiz .monster.monster--small {
    bottom: 20px;
    right: 5px;
  }
}
@keyframes rotateMonster {
  0% {
    transform: scale(1) rotate(-45deg);
    transform-origin: center center;
    animation-timing-function: ease-out;
  }
  25% {
    transform: scale(0.7) rotate(-75deg);
    animation-timing-function: ease-in;
  }
  50% {
    transform: scale(1) rotate(-45deg);
    animation-timing-function: ease-out;
  }
  75% {
    transform: scale(0.7) rotate(-15deg);
    animation-timing-function: ease-in;
  }
  100% {
    transform: scale(1) rotate(-45deg);
    animation-timing-function: ease-out;
  }
}
@keyframes flyBlueMonster1 {
  0% {
    transform: translate(0, 0) rotate(126deg);
  }
  25% {
    transform: translate(58px, 52px) rotate(126deg);
  }
  50% {
    transform: translate(58px, 52px) rotate(126deg);
    transition-delay: 3s;
  }
  75% {
    transform: translate(0, 0) rotate(126deg);
  }
  100% {
    transform: translate(0, 0) rotate(126deg);
  }
}
@keyframes flyBlueMonster2 {
  0% {
    transform: translate(0, 0) rotate(-53deg);
  }
  25% {
    transform: translate(-65px, -66px) rotate(-53deg);
  }
  50% {
    transform: translate(-65px, -66px) rotate(-53deg);
    transition-delay: 3s;
  }
  75% {
    transform: translate(0, 0) rotate(-53deg);
  }
  100% {
    transform: translate(0, 0) rotate(-53deg);
  }
}
#fenkarol-quiz .finish-preview {
  margin-top: 70px;
}
@media screen and (max-width: 576px) {
  #fenkarol-quiz .finish-preview {
    margin-top: 30px;
  }
}

/*# sourceMappingURL=style.css.map */