/*!***************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/application/shared/animated_twelve_minutes.sass ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************/
.animated-twelve-minutes {
  margin-top: 64px;
  overflow: hidden;
}

.animated-twelve-minutes__headline {
  max-width: 647px;
  margin: 0 auto 32px;
}

.animated-twelve-minutes__headline span {
  padding: 0 5px;
  border-radius: 8px;
  background: #fcd733;
}

.animated-twelve-minutes__line {
  width: 0;
  height: 70%;
  margin-left: 30px;
  border-left: 3px dotted #333;
}

.animated-twelve-minutes__content {
  max-width: 960px;
  margin: 0 auto;
}

.animated-twelve-minutes__content .icon--video-duration-orange {
  padding: 16px 12px 6px;
  color: #fbcd00;
  font-size: 40px;
}

.animated-twelve-minutes__content li:not(:last-child) {
  margin-bottom: 16px;
}

.animated-twelve-minutes__content li:nth-of-type(2) .icon--video-duration-orange {
  animation: TimerPracticing 12s infinite;
}

.animated-twelve-minutes__content li:nth-of-type(3) .icon--video-duration-orange {
  animation: TimerAsking 12s infinite;
}

.animated-twelve-minutes__content li:nth-of-type(3) .animated-twelve-minutes__line {
  display: none;
}

.animated-twelve-minutes__cta {
  margin-top: 32px;
  font-weight: 700;
  text-align: center;
}

.animated-twelve-minutes__cta .h3 {
  margin-bottom: 24px;
}

.animated-twelve-minutes__text {
  max-width: 364px;
}

.animated-twelve-minutes__description {
  padding: 0;
}

@media only screen and (max-width: 959px) {
  body.is-responsive .animated-twelve-minutes {
    margin-top: 0;
  }
  body.is-responsive .animated-twelve-minutes__headline {
    max-width: 500px;
  }
  body.is-responsive .animated-twelve-minutes__headline .h3 {
    font-size: 22px;
  }
  body.is-responsive .animated-twelve-minutes__content {
    flex-direction: column;
  }
  body.is-responsive .animated-twelve-minutes__content li {
    justify-content: center;
  }
  body.is-responsive .animated-twelve-minutes__content li:not(:last-child) {
    margin-bottom: 16px;
  }
  body.is-responsive .animated-twelve-minutes__content li:last-child {
    margin-bottom: 40px;
  }
  body.is-responsive .animated-twelve-minutes__description {
    margin: 0;
    width: auto;
    width: initial;
    padding-bottom: 0;
  }
  body.is-responsive .animated-twelve-minutes__cta .h3 {
    font-size: 22px;
  }
}

@media only screen and (max-width: 639px) {
  body.is-responsive .animated-twelve-minutes__headline span {
    display: inline-block;
  }
  body.is-responsive .animated-twelve-minutes__content li:last-child {
    margin-bottom: 0;
  }
  body.is-responsive .animated-twelve-minutes__cta {
    max-width: 312px;
    margin: 40px auto;
  }
  body.is-responsive .animated-twelve-minutes__cta .h3 {
    margin-bottom: 24px;
    font-size: 22px;
  }
}

@keyframes CircleGraphYellow {
  0% {
    stroke-dashoffset: 460;
  }
  25% {
    stroke-dashoffset: 460;
  }
  35% {
    stroke-dashoffset: 417;
  }
  90% {
    stroke-dashoffset: 417;
  }
  100% {
    stroke-dashoffset: 460;
  }
}

@keyframes CircleGraphOrange {
  0% {
    transform: rotate(-90deg);
    stroke-dashoffset: 460;
  }
  25% {
    transform: rotate(-90deg);
    stroke-dashoffset: 460;
  }
  35% {
    transform: rotate(-60deg);
    stroke-dashoffset: 460;
  }
  55% {
    transform: rotate(-60deg);
    stroke-dashoffset: 460;
  }
  65% {
    transform: rotate(-30deg);
    stroke-dashoffset: 490;
  }
  90% {
    transform: rotate(-30deg);
    stroke-dashoffset: 490;
  }
  100% {
    transform: rotate(-90deg);
    stroke-dashoffset: 460;
  }
}

@keyframes RotateHand {
  0% {
    transform: rotate(30deg);
  }
  25% {
    transform: rotate(30deg);
  }
  35% {
    transform: rotate(60deg);
  }
  55% {
    transform: rotate(60deg);
  }
  65% {
    transform: rotate(68deg);
  }
  90% {
    transform: rotate(68deg);
  }
  100% {
    transform: rotate(30deg);
  }
}

@keyframes TimerPracticing {
  0% {
    color: #ccc;
  }
  25% {
    color: #ccc;
  }
  30% {
    color: #fbcd00;
  }
  90% {
    color: #fbcd00;
  }
  100% {
    color: #ccc;
  }
}

@keyframes TimerAsking {
  0% {
    color: #ccc;
  }
  55% {
    color: #ccc;
  }
  60% {
    color: #fbcd00;
  }
  90% {
    color: #fbcd00;
  }
  100% {
    color: #ccc;
  }
}

@keyframes FadeUnderstanding {
  29% {
    opacity: 1;
  }
  30% {
    opacity: 0;
  }
  94% {
    opacity: 0;
  }
  95% {
    opacity: 1;
  }
}

@keyframes FadePracticing {
  0% {
    opacity: 0;
  }
  29% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  59% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes FadeAsking {
  0% {
    opacity: 0;
  }
  59% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  94% {
    opacity: 1;
  }
  95% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/application/shared/animated_twelve_minutes_images.sass ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************/
.animated-twelve-minutes__images-wrapper {
  height: 412px;
}

.animated-twelve-minutes__images-wrapper--clock {
  position: relative;
  bottom: 206px;
  height: 208px;
}

.animated-twelve-minutes__images-wrapper--lucy {
  position: relative;
  bottom: 506px;
  left: 80px;
  height: 423px;
}

.animated-twelve-minutes__images-wrapper--minutes {
  position: relative;
  bottom: 394px;
  left: 110px;
}

.animated-twelve-minutes__images-wrapper--circle-graph {
  position: relative;
  bottom: 53px;
  left: 40px;
}

.animated-twelve-minutes__images-wrapper--circle-graph .circle--yellow {
  stroke: #fdeb99;
  stroke-width: 160;
  stroke-dasharray: 503;
  stroke-dashoffset: 460;
  animation: CircleGraphYellow 12s infinite;
  transform: rotate(-90deg);
}

.animated-twelve-minutes__images-wrapper--circle-graph .circle--orange {
  stroke: #fcd733;
  stroke-width: 160;
  stroke-dasharray: 503;
  animation: CircleGraphOrange 12s infinite;
}

.animated-twelve-minutes__image {
  display: block;
}

.animated-twelve-minutes__image--5min {
  margin-left: 10px;
  animation: FadeUnderstanding 12s infinite;
}

.animated-twelve-minutes__image--10min {
  position: relative;
  top: -45px;
  animation: FadePracticing 12s infinite;
}

.animated-twelve-minutes__image--12min {
  position: relative;
  top: -90px;
  animation: FadeAsking 12s infinite;
}

.animated-twelve-minutes__image--background {
  position: relative;
  top: 48px;
  left: 40px;
}

.animated-twelve-minutes__image--clock-hand {
  position: relative;
  bottom: 239px;
  left: 142px;
  margin: 0;
  transform-origin: bottom center;
  animation: RotateHand 12s infinite;
}

.animated-twelve-minutes__image--clock {
  position: relative;
  bottom: 330px;
  left: 54px;
}

.animated-twelve-minutes__image--understanding {
  position: relative;
  left: 155px;
  animation: FadeUnderstanding 12s infinite;
}

.animated-twelve-minutes__image--practicing {
  position: relative;
  bottom: 414px;
  left: 82px;
  animation: FadePracticing 12s infinite;
}

.animated-twelve-minutes__image--asking {
  position: relative;
  bottom: 793px;
  left: 49px;
  animation: FadeAsking 12s infinite;
}

@media only screen and (max-width: 959px) {
  body.is-responsive .animated-twelve-minutes__images-wrapper {
    width: 576px;
    margin: 0 auto;
  }
  body.is-responsive .animated-twelve-minutes__images-wrapper--minutes, body.is-responsive .animated-twelve-minutes__images-wrapper--lucy {
    width: -moz-fit-content;
    width: fit-content;
  }
  body.is-responsive .animated-twelve-minutes__images-wrapper--lucy {
    scale: 0.8;
  }
  body.is-responsive .animated-twelve-minutes__image {
    width: auto;
    width: initial;
    margin: 0;
    margin: initial;
  }
  body.is-responsive .animated-twelve-minutes__image--understanding, body.is-responsive .animated-twelve-minutes__image--practicing, body.is-responsive .animated-twelve-minutes__image--asking {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
    scale: 0.8;
  }
  body.is-responsive .animated-twelve-minutes__image--asking {
    bottom: 830px;
  }
}

@media only screen and (max-width: 639px) {
  body.is-responsive .animated-twelve-minutes__images-wrapper {
    width: 298px;
    height: 232px;
    scale: 0.8;
  }
  body.is-responsive .animated-twelve-minutes__images-wrapper--clock {
    left: -76px;
    bottom: 210px;
  }
  body.is-responsive .animated-twelve-minutes__images-wrapper--minutes {
    scale: 0.65;
    top: -310px;
    left: 66px;
  }
  body.is-responsive .animated-twelve-minutes__images-wrapper--circle-graph {
    scale: 0.65;
    top: 25px;
    left: 22px;
  }
  body.is-responsive .animated-twelve-minutes__images-wrapper--lucy {
    height: 254px;
    bottom: 411px;
    left: -18px;
  }
  body.is-responsive .animated-twelve-minutes__image--5min {
    position: relative;
    top: -30px;
    left: 68px;
  }
  body.is-responsive .animated-twelve-minutes__image--10min {
    position: relative;
    top: -76px;
    left: 50px;
  }
  body.is-responsive .animated-twelve-minutes__image--12min {
    position: relative;
    top: -120px;
    left: 50px;
  }
  body.is-responsive .animated-twelve-minutes__image--background {
    width: 298px;
    height: 195px;
    left: 0px;
  }
  body.is-responsive .animated-twelve-minutes__image--clock {
    scale: 0.65;
    top: -221px;
    left: 52px;
  }
  body.is-responsive .animated-twelve-minutes__image--clock-hand {
    width: 4px;
    height: 48px;
    bottom: 130px;
    left: 138px;
  }
  body.is-responsive .animated-twelve-minutes__image--understanding {
    height: auto;
    left: 110px;
  }
  body.is-responsive .animated-twelve-minutes__image--practicing {
    height: auto;
    bottom: 290px;
    left: 90px;
  }
  body.is-responsive .animated-twelve-minutes__image--asking {
    height: auto;
    bottom: 584px;
    left: 54px;
  }
}

/*# sourceMappingURL=animated_twelve_minutes-df75055b.css.map*/