/* global */
:root {
  --red:#d30023;
  --green:#00d34b;
  --black:#1b1b1b;
  --primaryfont: helvetica, arial, sans-serif;
  --secondaryfont: Garamond, serif;
  --correctGradient: linear-gradient(45deg, #17bb92, var(--green));
  --incorrectGradient: linear-gradient(45deg, #bb0856, var(--red));
}

.no-edge-margin > :first-child,
.no-first-margin > :first-child {
  margin-top:0 !important;
}

.no-edge-margin > :last-child,
.no-last-margin > :last-child {
  margin-bottom:0 !important;
}
/*----------------------------------------*/


/* main */
.quiz-builder {
  font-size:55%;
  width:100% !important;
  max-width:600px !important;
  margin:0 auto 80px !important;
  padding:0 16px;
  box-sizing:border-box;
  /*font-family:var(--primaryfont) !important;*/
}

.quiz-builder * {

  box-sizing:border-box;

}

.quiz-builder p {
  /*font-family:var(--primaryfont) !important;*/
}

.quiz-builder__progress-holder {
  margin-bottom:24px !important;
  display:flex;
  flex-wrap:wrap;
}

.quiz-builder__progress-info {
  display:flex;
  width:100%;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:8px !important;
  position:relative;
}

.quiz-builder__progress-numbers {
  font-size:12px;
  line-height:1;
}

.quiz-builder__progress-info-btn {
  width:28px;
  height:28px;
  border:2px solid #000;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  font-weight:700;
}

.quiz-builder__progress-info-btn:active + .quiz-builder__progress-tooltip,
.quiz-builder__progress-info-btn:hover + .quiz-builder__progress-tooltip {
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.quiz-builder__progress-tooltip {
  position:absolute;
  bottom:calc(100% + 10px);
  max-width:100%;
  text-align:right;
  background:#000;
  border-radius:4px;
  padding:8px 12px;
  right:-6px;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:transform .2s ease,
             opacity .2s ease,
             visibility .2s ease;
}

.quiz-builder__progress-tooltip::after {
  content:'';
  position:absolute;
  top:100%;
  right:12px;
  width:0;
  height:0;
  border-style:solid;
  border-width:6px 8px 0 8px;
  border-color:#000 transparent transparent transparent;
}

.quiz-builder__progress-tooltip-label {
  font-size:14px;
  color:#fff;
  margin:0 !important;
}

.quiz-builder__progress {
  width:100%;
  display:flex;
}

.quiz-builder__progress-notch {
  background:#ddd;
  height:8px;
  flex:1 1 auto;
  margin:0 1px !important;
}

.quiz-builder__progress-notch.correct-yes {
  background:var(--green);
}

.quiz-builder__progress-notch.correct-no {
  background:var(--red);
}

.quiz-builder__question-holder {
  margin:12px 0 !important;
  position:relative;
}

.quiz-builder__question-img {
  background:center no-repeat;
  background-size:cover;
  min-height:200px;
  padding-bottom:60%;
  width:100%;
}

.quiz-builder__question {
  font-size:1.9em;
  font-weight:700;
  margin:0 !important;
  display:block;
  width:100%;
  text-align:center;
  padding:12px 12px;
  color:#fff;
  background:rgba(0,0,0,1);
  bottom:0;
}

.quiz-builder__question-img + .quiz-builder__question {
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  max-width:90%;
  background:rgba(0,0,0,0.7);
}

.quiz-builder__button {
  width:100%;
  border-radius:6px;
  padding:16px 24px;
  font-size:1.5em;
  font-weight:600;
  background:var(--red);
  color:#fff;
  text-align:center;
  display:block;
  text-decoration:none;
  margin-top:20px !important;
}
/*----------------------------------------*/


/* simple text answer */
.quiz-builder__answers {
  margin:12px 0 !important;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
}

.quiz-builder__answer {
  font-size:1.6em;
  background:#fff;
  border:1px solid #ddd;
  width:100%;
  padding:10px 18px;
  display:block;
  margin:5px 0 !important;
  border-radius:6px;
  overflow:hidden;
  color:var(--black);
  text-decoration:none;
  position:relative;
}

.quiz-builder__answer-label {
  width:100%;
  display:block;
  margin:0 !important;
  padding-right:40px;
}

.quiz-builder__answer-box {
  width:24px;
  height:24px;
  position:absolute;
  top:calc(50% - 12px);
  right:18px;
  border:1px solid #ddd;
  border-radius:4px;
  display:block;
}
/*----------------------------------------*/


/* text and image version */
.quiz-builder__answers.no-edge-margin > .quiz-builder__answer--2col {
  margin:0 !important;
}

.quiz-builder__answer--2col {
  width:50%;
  padding:0;
  background:transparent;
  border:4px solid rgba(255,255,255,0);
  display:flex;
  flex-direction:column;
}

.quiz-builder__answer--2col .quiz-builder__answer-img {
  width:100%;
  height:0;
  padding-bottom:100%;
  background:center no-repeat;
  background-size:cover;
  border:1px solid #ddd;
  border-top-left-radius:4px;
  border-top-right-radius:4px;
}

.quiz-builder__answer--2col .quiz-builder__answer-label {
  background:#fff;
  border:1px solid #ddd;
  font-size:0.9em;
  line-height:1.3;
  padding:10px 12px;
  margin-top:-1px !important;
  flex:1 1 auto;
  border-bottom-left-radius:4px;
  border-bottom-right-radius:4px;
}

.quiz-builder__answer--2col .quiz-builder__answer-box {
  top:12px;
  right:12px;
  border:2px solid #fff;
}
/*----------------------------------------*/


/* icon answer */
.quiz-builder__answers--icons .quiz-builder__answer {
  overflow:visible;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:center;
  background:#fff;
  border:2px solid #ddd;
  width:calc(50% - 4px);
}

.quiz-builder__answers--icons .quiz-builder__answer .quiz-builder__answer-img {
  border:0;
}

.quiz-builder__answers--icons .quiz-builder__answer.correct-yes,
.quiz-builder__answers--icons .quiz-builder__answer.correct-no {
  border:4px solid transparent;
}

.quiz-builder__answers--icons .quiz-builder__answer.correct-yes {
  border:2px solid var(--green);
}

.quiz-builder__answers--icons .quiz-builder__answer.correct-no {
  border:2px solid var(--red);
}

.quiz-builder__answer-icon {
  width:80px;
  height:80px;
  margin-top:20px !important;
  overflow:visible;
}

.quiz-builder__icon {
  overflow:visible;
  width:80px;
  height:80px;
}

.quiz-builder__icon-label {
  width:100%;
  font-size:0.8em;
  font-weight:600;
  text-align:center;
  margin:16px 0 !important;
}
/*----------------------------------------*/


/* answer feedback */
.quiz-builder.correct-yes .quiz-builder__answer,
.quiz-builder.correct-no .quiz-builder__answer {
  opacity:0.4;
}

.quiz-builder.correct-yes .quiz-builder__answer.correct-yes,
.quiz-builder.correct-no .quiz-builder__answer.correct-no {
  opacity:1;
}

.quiz-builder__answer.correct-yes {
  border:2px solid var(--green);
  animation:correctAnswer 1.5s forwards cubic-bezier(0.280, 0.840, 0.420, 1);
}

.quiz-builder__answer--2col.correct-yes {
  border:4px solid var(--green);
}

.quiz-builder__answer.correct-yes .quiz-builder__answer-box {
  border:1px solid var(--green);
  background:var(--green) url('../svgs/tick.svg') center no-repeat;
  background-size:24px 24px;
}

.quiz-builder__answer.correct-no {
  border:2px solid var(--red);
  animation:incorrectAnswer 1.5s forwards cubic-bezier(0.280, 0.840, 0.420, 1);
}

.quiz-builder__answer--2col.correct-no {
  border:4px solid var(--red);
}

.quiz-builder__answer.correct-no .quiz-builder__answer-box {
  border:1px solid var(--red);
  background:var(--red) url('../svgs/cross.svg') center no-repeat;
  background-size:24px 24px;
}

@keyframes correctAnswer {
  0%, 25%, 45%, 65%, 100% {transform: translateY(0);}
  15% {transform: translateY(-10px);}
  35% {transform: translateY(-7px);}
  55% {transform: translateY(-2px);}
}

@keyframes incorrectAnswer {
  0%, 50%, 100% {transform: translateX(0);}
  10% {transform: translateX(-5px);}
  20% {transform: translateX(5px);}
  30% {transform: translateX(-3px);}
  40% {transform: translateX(3px);}
}
/*----------------------------------------*/


/* advert holder */
.quiz-builder__ad-holder {
  margin:8px auto !important;
}

.quiz-builder__ad-separator {
  width:100%;
  display:flex;
  align-items:center;
  margin:8px 0 !important;
  color:#aaa;
  font-size:10px;
  letter-spacing:0.1em;
}

.quiz-builder__ad-separator::before,
.quiz-builder__ad-separator::after {
  content:'';
  height:1px;
  display:block;
  background:#aaa;
  flex:1 1 auto;
  opacity:0.5;
}

.quiz-builder__ad-separator::before {
  margin-right:12px !important;
}

.quiz-builder__ad-separator::after {
  margin-left:12px !important;
}

.quiz-builder__ad {
  width:320px;
  height:320px;
  background:#F5F5F5;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto !important;
}

.quiz-builder__ad-title {
  margin:0 !important;
  text-align:center;
  font-size:20px;
}
/*----------------------------------------*/


/* results holder */
.quiz-builder__results {
  background:var(--correctGradient);
  border-radius:6px;
  width:100%;
  padding:16px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  overflow:hidden;
  text-align: center;
}

.quiz-builder__results--message {
  padding:20px;
  text-align:center;
}

.quiz-builder__results-icon {
  width:29px;
  height:40px;
  display:block;
  margin:0 auto 12px !important;
}

.quiz-builder__results-percentage {
  width:56px;
  height:56px;
  position:relative;
  margin:0 auto 5px;
}

.quiz-builder__results-percentage + .quiz-builder__results-title {
  width:calc(100% - 68px);
}

.quiz-builder__results-percent {
  position:absolute;
  color:#fff !important;
  letter-spacing: -0.05em;
  font-size:14px;
  font-weight:600;
  width:100%;
  text-align:center;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  margin:0 !important;
}

.quiz-builder__results-percentage-ring {
  width:54px;
  height:54px;
  border:3px solid rgba(255,255,255,0.3);
  border-radius:50%;
  display:block;
  position:absolute;
  z-index:1;
  top:1px;
  left:1px;
}

.quiz-builder__results-percentage-progress {
  position:relative;
  z-index:2;
}

.quiz-builder__results-img {
  width:calc(100% + 32px);
  margin:-16px -16px 16px !important;
  height:0;
  padding-bottom:60%;
  min-height:200px;
  background:center no-repeat;
  background-size:cover;
}

.quiz-builder__results-title {
  width:100%;
}

.quiz-builder__results-title,
.quiz-builder__results-title p {
  margin:0 !important;
  font-size:16px;
  text-transform:none;
  letter-spacing:normal;
  font-weight:400;
  color:#fff;
}

.quiz-builder__results-title span {
  font-weight:700;
}

.quiz-builder__results-title .quiz-builder__results-pretitle {
  font-size:0.85em !important;
  margin:0 0 2px !important;
}

.quiz-builder__results-title .quiz-builder__results-pretitle + p {
  font-weight:600;
}
/*----------------------------------------*/


/* recap holder */
.quiz-builder__recap {
  margin-top:48px !important;
}

.quiz-builder__recap-title {
  font-size:2em;
  margin:0 0 16px !important;
}

.quiz-builder__recap-question {
  border-radius:8px;
  overflow:hidden;
  border:1px solid #ddd;
}

.quiz-builder__recap-question--yes .quiz-builder__recap-info-item-box {
  border:1px solid var(--green);
  background:var(--green) url('../svgs/tick.svg') center no-repeat;
  background-size:32px 32px;
}

.quiz-builder__recap-question--no .quiz-builder__recap-info-item-box {
  border:1px solid var(--red);
  background:var(--red) url('../svgs/cross.svg') center no-repeat;
  background-size:32px 32px;
}

.quiz-builder__recap-question-holder {
  position:relative;
  display:flex;
}

.quiz-builder__recap-img {
  background:center no-repeat;
  background-size:cover;
  min-height:25vw;
  width:25vw;
  max-width:200px;
  max-height:200px;
}

.quiz-builder__recap-question-title {
  font-size:1.9em;
  font-weight:700;
  margin:0 !important;
  display:block;
  width:100%;
  text-align:center;
  padding:12px 12px;
  color:#fff;
  background:rgba(0,0,0,1);
  bottom:0;
}

.quiz-builder__recap-img + .quiz-builder__recap-question-title {
  display:flex;
  align-items:center;
  justify-content:center;
  width:calc(100% - 25vw);
  flex:1 1 auto;
  text-align:left;
  padding:20px;
}

.quiz-builder__recap-info-holder {
  padding:20px;
  background:#fff;
  border-top:1px solid #ddd;
}

.quiz-builder__recap-info-item {
  border-bottom:1px solid #ddd;
  padding:0 20px 20px;
  margin-bottom:20px !important;
  position:relative;
  width:calc(100% + 40px);
  margin-left:-20px !important;
}

.quiz-builder__recap-info-item:last-child {
  border-bottom:0;
  padding-bottom:0;
  margin-bottom:0 !important;
}

.quiz-builder__recap-info-item-label {
  font-size:1.2em;
  margin:0 !important;
  padding-right:64px;
}

.quiz-builder__recap-info-item-answer {
  font-size:1.6em;
  margin:6px 0 0 !important;
  font-weight:600;
  padding-right:64px;
  line-height:1.2 !important;
}

.quiz-builder__recap-info-item-box {
  width:40px;
  height:40px;
  position:absolute;
  top:0;
  right:20px;
  border:1px solid #ddd;
  border-radius:4px;
  display:block;
}

.quiz-builder__recap-feedback {
  display:flex;
  border:1px solid #ddd;
  border-radius:6px;
  overflow:hidden;
  position:relative;
  margin-top:16px !important;
}

.quiz-builder__recap-feedback--correct {
  border:2px solid var(--green);
}

.quiz-builder__recap-feedback + .quiz-builder__recap-feedback {
  margin-top:20px !important;
}

.quiz-builder__recap-feedback-img {
  width:100px;
  min-height:100px;
  background:center no-repeat;
  background-size:cover;
}

.quiz-builder__recap-feedback-img + .quiz-builder__recap-feedback-info {
  width:calc(100% - 100px);
}

.quiz-builder__recap-feedback-info {
  padding:20px;
  width:100%;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
}

.quiz-builder__recap-feedback-info-label {
  font-size:1.2em;
  margin:0 !important;
  padding-right:36px;
  width:100%;
}

.quiz-builder__recap-feedback-info-answer {
  font-size:1.6em;
  margin:6px 0 8px !important;
  font-weight:600;
  width:100%;
  padding-right:36px;
  line-height:1.2 !important;
}

.quiz-builder__recap-feedback-content p {
  margin:0 !important;
  font-size:1.4em;
}

.quiz-builder__recap-feedback-box {
  width:40px;
  height:40px;
  position:absolute;
  top:0;
  right:0;
  background:var(--green) url('../svgs/tick.svg') center no-repeat;
  background-size:24px 24px;
  border-bottom-left-radius:3px;
}

@media screen and (min-width:750px) {
  .quiz-builder__recap-img {
    min-height:200px;
  }
}

/*----------------------------------------*/


/* last question */
.quiz-builder__last-question-holder {
  border-radius:8px;
  background:#ddd;
  display:flex;
  flex-wrap:wrap;
  overflow:hidden;
  position:relative;
}

.quiz-builder__last-question-holder.correct-yes {
  background:var(--correctGradient);
  color:#fff;
}

.quiz-builder__last-question-holder.correct-no {
  background:var(--incorrectGradient);
  color:#fff;
}

.quiz-builder__last-question-toggle {
  padding:16px 20px;
  font-size:1.6em;
  margin:0 !important;
  width:100%;
  position:relative;
  z-index:2;
  cursor:pointer;
  /*font-family:var(--secondaryfont) !important;*/
}

.quiz-builder__last-question-caret {
  width:16px;
  height:10px;
  position:absolute;
  top:24px;
  right:20px;
  background:url('../svgs/interface/caret-down.svg') no-repeat;
  background-size:contain;
}

.quiz-builder__last-question-checkbox {
  display:none;
}

.quiz-builder__last-question-checkbox:checked + .quiz-builder__last-question-info,
.quiz-builder__last-question-checkbox:checked + .quiz-builder__last-question-info + .quiz-builder__last-question-answer {
  display:block;
}

.quiz-builder__last-question-checkbox:checked + .quiz-builder__last-question-info + .quiz-builder__last-question-answer + .quiz-builder__last-question-caret {
  background:url('../svgs/interface/caret-up.svg') no-repeat;
  background-size:contain;
}

.quiz-builder__last-question-info {
  padding:0 16px 0 20px;
  display:none;
  margin-top:-4px !important;
  width:55%;
  min-height:140px;
}

.quiz-builder__last-question-header {
  font-size:1.8em;
  line-height:1.2 !important;
  margin:0 !important;
  font-weight:600;
  max-width:90%;
}

.quiz-builder__last-question-correct {
  font-size:1.3em;
  line-height:1.2 !important;
  margin-top:20px !important;
}

.quiz-builder__last-question-correct span {
  text-transform:capitalize;
  display:block;
  font-size:1.2em;
  margin:4px 0 0 !important;
  font-weight:600;
}

.quiz-builder__last-question-answer {
  overflow:hidden;
  background:#fff;
  display:none;
  width:45%;
  margin-top:-59px !important;
}

.quiz-builder__last-question-img {
  width:100%;
  height:160px;
  background:center no-repeat;
  background-size:cover;
  display:block;
}

.quiz-builder__last-question-result p {
  color:var(--black);
  font-size:1.4em;
  line-height:1.3 !important;
  margin:0 !important;
  padding:16px 18px 14px;
}
/*----------------------------------------*/


/* emoji icons */
.quiz-builder__icon--thumbup .quiz-builder__icon-face {
  animation:thumbup 3.5s infinite;
  transform-origin:bottom left;
}

.quiz-builder__icon--thumbdown .quiz-builder__icon-face {
  animation:thumbdown 3.5s 1.5s infinite;
  transform-origin:bottom right;
}

.quiz-builder__icon--cool .quiz-builder__icon-face {animation:emoji1 6s infinite;}
.quiz-builder__icon--sad .quiz-builder__icon-face {animation:emoji2 8s infinite;}
.quiz-builder__icon--crying .quiz-builder__icon-face{animation:emoji3 5s infinite;}
.quiz-builder__icon--ghost .quiz-builder__icon-face {animation:emoji4 9s infinite;}
.quiz-builder__icon--poo .quiz-builder__icon-face {animation:emoji3 8s infinite;}
.quiz-builder__icon--yes .quiz-builder__icon-face {animation:emoji-yes 5s infinite;}
.quiz-builder__icon--no .quiz-builder__icon-face {animation:emoji-no 5s 2s infinite;}

@keyframes emoji1 {
  0%, 20%   {transform:translate(0, 0);}
  25%, 35%  {transform:translate(4px, 4px);}
  40%, 50%  {transform:translate(-4px, -4px);}
  55%, 70%  {transform:translate(0, 0);}
  75%, 80%  {transform:translate(4px, -4px);}
  85%, 100% {transform:translate(0, 0);}
}

@keyframes emoji2 {
  0%, 20%   {transform:translate(0, 0);}
  25%, 35%  {transform:translate(2px, -4px);}
  40%, 50%  {transform:translate(-4px, 4px);}
  55%, 70%  {transform:translate(0, 0);}
  75%, 80%  {transform:translate(-8px, 0);}
  85%, 100% {transform:translate(0, 0);}
}

@keyframes emoji3 {
  0%, 20%   {transform:translate(0, 0);}
  25%, 35%  {transform:translate(4px, 4px);}
  40%, 50%  {transform:translate(-4px, 4px);}
  55%, 70%  {transform:translate(0, 0);}
  75%, 80%  {transform:translate(-4px, 4px);}
  85%, 100% {transform:translate(0, 0);}
}

@keyframes emoji4 {
  0%, 20%   {transform:translate(0, 0);}
  25%, 35%  {transform:translate(-2px, 4px);}
  40%, 50%  {transform:translate(-4px, -4px);}
  55%, 70%  {transform:translate(3px, -2px);}
  75%, 80%  {transform:translate(8px, 3px);}
  85%, 100% {transform:translate(0, 0);}
}

@keyframes emoji-yes {
  0%, 20%, 40%, 100% {transform:translate(0, 0);}
  24%, 32% {transform:translate(0, -3px);}
  28%, 36%  {transform:translate(0, 3px);}
}

@keyframes emoji-no {
  0%, 20%, 40%, 100% {transform:translate(0, 0);}
  24%, 32% {transform:translate(-3px, 0);}
  28%, 36%  {transform:translate(3px, 0);}
}

@keyframes thumbup {
  0%, 20%, 55%, 100% {transform:translate(0, 0) rotate(0deg);}
  25%, 35%, 45% {transform:translate(0, -8px) rotate(-4deg);}
  30%, 40%, 50%  {transform:translate(0, 0) rotate(0deg);}
}

@keyframes thumbdown {
  0%, 20%, 55%, 100% {transform:translate(0, 0);}
  25%, 35%, 45% {transform:translate(0, 8px) rotate(-4deg);}
  30%, 40%, 50%  {transform:translate(0, 0);}
}
/*----------------------------------------*/


/* failed screen */
.failed-screen {
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  background:rgba(0,0,0,0);
  transition:background .3s ease;
  visibility:hidden;
}

.failed-screen__panel {
  background:#fff;
  width:calc(100% - 16px);
  position:absolute;
  top:50%;
  left:50%;
  text-align:center;
  padding:40px 24px;
  max-width:558px;
  opacity:0;
  visibility:hidden;
  transform:translate(-50%, calc(-50% + 30px));
  transition:opacity .3s ease,
             visibility .3s ease,
             transform .3s ease;
}

.failed-screen__close {
  position:absolute;
  top:0;
  right:0;
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.failed-screen__close span {
  width:16px;
  height:2px;
  background:var(--black);
  display:block;
  position:relative;
  transform:rotate(45deg);
}

.failed-screen__close span::after {
  content:'';
  background:var(--black);
  width:2px;
  height:16px;
  position:absolute;
  top:-7px;
  left:7px;
}

.failed-screen__header {
  margin:0 auto !important;
  font-size:3em;
}

.failed-screen__score {
  margin:4px auto 0 !important;
  font-size:1.7em;
}

.failed-screen__score span {
  font-weight:600;
}

.failed-screen__btn {
  border-radius:6px;
  padding:16px 40px;
  font-size:1.5em;
  font-weight:600;
  background:var(--red);
  color:#fff;
  text-align:center;
  display:inline-block;
  text-decoration:none;
  margin-top:20px !important;
}

.failed-screen__signs {
  width:100%;
  max-width:600px;
  height:0;
  padding-bottom:100%;
  position:relative;
  z-index:1;
  transition:opacity .5s 1.5s cubic-bezier(.53,.01,1,.76),
             transform .5s 1.5s cubic-bezier(.53,.01,1,.76);
}

.failed-screen__sign {
  position:absolute;
  display:block;
  z-index:1;
  opacity:0;
  transition:opacity .3s cubic-bezier(.53,.01,1,.76),
             transform .4s cubic-bezier(.53,.01,1,.76);
}

.failed-screen__sign--1 {
  width:110%;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%) rotate(-5deg) scale(0.7);
  z-index:3;
}

.failed-screen__sign--2 {
  width:25%;
  top:-20px;
  left:-20px;
  transform:rotate(5deg) scale(0.7);
  z-index:2;
  transition-delay:.1s;
}

.failed-screen__sign--3 {
  width:30%;
  top:-60px;
  right:-10px;
  transform:rotate(-10deg) scale(0.7);
  z-index:2;
  transition-delay:.2s;
}

.failed-screen__sign--4 {
  width:20%;
  top:-70px;
  right:22%;
  transform:rotate(3deg) scale(0.7);
  transition-delay:.3s;
}

.failed-screen__sign--5 {
  width:15%;
  top:-45px;
  left:13%;
  transform:rotate(-3deg) scale(0.7);
  transition-delay:.3s;
}

.failed-screen__sign--6 {
  width:25%;
  bottom:-10px;
  left:-20px;
  transform:rotate(5deg) scale(0.7);
  z-index:2;
  transition-delay:.1s;
}

.failed-screen__sign--7 {
  width:30%;
  bottom:-20px;
  right:-10px;
  transform:rotate(-10deg) scale(0.7);
  z-index:2;
  transition-delay:.2s;
}

.failed-screen__sign--8 {
  width:20%;
  bottom:-50px;
  right:15%;
  transform:rotate(3deg) scale(0.7);
  transition-delay:.3s;
}

.failed-screen__sign--9 {
  width:15%;
  bottom:-35px;
  left:13%;
  transform:rotate(-3deg) scale(0.7);
  transition-delay:.3s;
}


/* animation */
.failed-screen.reveal {
  pointer-events:auto;
  background:rgba(0,0,0,0.5);
  visibility:visible;
  transition:background .3s .3s ease;
}

.failed-screen.reveal .failed-screen__panel {
  opacity:1;
  visibility:visible;
  transform:translate(-50%, -50%);
  transition:opacity .3s .5s ease,
             visibility .3s .5s ease,
             transform .3s .5s ease;
}

.failed-screen.reveal .failed-screen__signs {
  transform:translateY(100vh) rotate(-10deg);
}

.failed-screen.reveal .failed-screen__sign--1 {
  opacity:1;
  transform:translate(-50%, -50%) rotate(-5deg) scale(1);
}

.failed-screen.reveal .failed-screen__sign--2,
.failed-screen.reveal .failed-screen__sign--6 {
  opacity:1;
  transform:rotate(5deg) scale(1);
}

.failed-screen.reveal .failed-screen__sign--3,
.failed-screen.reveal .failed-screen__sign--7 {
  opacity:1;
  transform:rotate(-10deg) scale(1);
}

.failed-screen.reveal .failed-screen__sign--4,
.failed-screen.reveal .failed-screen__sign--8 {
  opacity:1;
  transform:rotate(3deg) scale(1);
}

.failed-screen.reveal .failed-screen__sign--5,
.failed-screen.reveal .failed-screen__sign--9 {
  opacity:1;
  transform:rotate(-3deg) scale(1);
}

@media screen and (min-width:600px) {
  .failed-screen__signs {
    height:600px;
    padding-bottom:0;
  }
}