/*-------------------------------- find styles --------------------------------*/

@-webkit-keyframes findCardActiveLinkRemove {
  0% {
    transform: translate(-50%, 50%) rotate(0);
  }

  10% {
    transform: translate(-50%, 50%) rotate(45deg);
  }

  50% {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  100% {
    transform: translate(-50%, 110%) rotate(45deg);
  }
}

@keyframes findCardActiveLinkRemove {
  0% {
    transform: translate(-50%, 50%) rotate(0);
  }

  10% {
    transform: translate(-50%, 50%) rotate(45deg);
  }

  50% {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  100% {
    transform: translate(-50%, 110%) rotate(45deg);
  }
}

@-webkit-keyframes findCardActiveLink {
  0% {
    transform: translate(-50%, 110%) rotate(45deg);
  }

  50% {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  90% {
    transform: translate(-50%, 50%) rotate(45deg);
  }

  100% {
    transform: translate(-50%, 50%) rotate(0);
  }
}

@keyframes findCardActiveLink {
  0% {
    transform: translate(-50%, 110%) rotate(45deg);
  }

  50% {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  90% {
    transform: translate(-50%, 50%) rotate(45deg);
  }

  100% {
    transform: translate(-50%, 50%) rotate(0);
  }
}

@-webkit-keyframes findCardActive {
  0% {
    overflow: hidden;
  }

  50% {
    overflow: visible;
  }
}

@keyframes findCardActive {
  0% {
    overflow: hidden;
  }

  50% {
    overflow: visible;
  }
}

/*-------------------------------- question section styles --------------------------------*/

@-webkit-keyframes shouldArrowAnimateShow {
  0% {
    transform: none;
  }

  50% {
    transform: rotate(-90deg);
  }

  100% {
    transform: rotate(-90deg) translateY(10rem);
  }
}

@keyframes shouldArrowAnimateShow {
  0% {
    transform: none;
  }

  50% {
    transform: rotate(-90deg);
  }

  100% {
    transform: rotate(-90deg) translateY(10rem);
  }
}

@-webkit-keyframes shouldArrowAnimateHide {

  0% {
    transform: rotate(-90deg) translateY(10rem);
  }

  50% {
    transform: rotate(-90deg) translateY(0);
  }

  100% {
    transform: rotate(0) translateY(0);
  }
}

@keyframes shouldArrowAnimateHide {

  0% {
    transform: rotate(-90deg) translateY(10rem);
  }

  50% {
    transform: rotate(-90deg) translateY(0);
  }

  100% {
    transform: rotate(0) translateY(0);
  }
}

/*-------------------------------- question section styles --------------------------------*/

@-webkit-keyframes questionPart5Focus {
  0% {
    transform: translateY(0) rotateY(0);
  }

  50% {
    transform: translateY(-20rem) rotateY(180deg);
  }

  100% {
    transform: translateY(0rem) rotateY(360deg);
  }
}

@keyframes questionPart5Focus {
  0% {
    transform: translateY(0) rotateY(0);
  }

  50% {
    transform: translateY(-20rem) rotateY(180deg);
  }

  100% {
    transform: translateY(0rem) rotateY(360deg);
  }
}

@-webkit-keyframes questionPart5Blur {
  0% {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
  }

  100% {
    opacity: 0;
    transform: translateY(40rem);
    pointer-events: none;
  }
}

@keyframes questionPart5Blur {
  0% {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
  }

  100% {
    opacity: 0;
    transform: translateY(40rem);
    pointer-events: none;
  }
}

@-webkit-keyframes questionPart5BlurShow {
  0% {
    opacity: 0;
    transform: translateY(40rem);
    pointer-events: none;
  }

  100% {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
  }
}

@keyframes questionPart5BlurShow {
  0% {
    opacity: 0;
    transform: translateY(40rem);
    pointer-events: none;
  }

  100% {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
  }
}


@-webkit-keyframes questionPart5FocusTest {
  0% {
    transform-origin: 50% 90%;
    transform: rotate(0);
  }

  25% {
    transform-origin: 50% 90%;
    transform: rotate(-30deg);
  }

  50% {
    transform-origin: 50% 90%;
    transform: rotate(0);
  }

  75% {
    transform-origin: 50% 90%;
    transform: rotate(30deg);
  }

  100% {
    transform-origin: 50% 90%;
    transform: rotate(0);
  }
}

@keyframes questionPart5FocusTest {
  0% {
    transform-origin: 50% 90%;
    transform: rotate(0);
  }

  25% {
    transform-origin: 50% 90%;
    transform: rotate(-30deg);
  }

  50% {
    transform-origin: 50% 90%;
    transform: rotate(0);
  }

  75% {
    transform-origin: 50% 90%;
    transform: rotate(30deg);
  }

  100% {
    transform-origin: 50% 90%;
    transform: rotate(0);
  }
}