

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');
@import '../../amp-story/1.0/amp-story-shadow-reset.css';

/* Using https://www.industrialempathy.com/perfect-ish-font-fallback/?font=Open%20Sans */
@font-face {
  font-family: "Open Sans-fallback";
  size-adjust: 105.44%;
  src: local("Arial");
}

amp-story-education {
  position: fixed !important;
  height: 100% !important;
  width: 100% !important;
  pointer-events: none !important;
  z-index: 9999999 !important;
}

.i-amphtml-story-education, .i-amphtml-story-education * {
  box-sizing: border-box !important;
}

.i-amphtml-story-education {
  height: 100% !important;
  width: 100% !important;
  background: rgba(0, 0, 0, 0.8) !important;
  color: #FFF !important;
  font-family: 'Open Sans', 'Open Sans-fallback', sans-serif !important;
  line-height: 1.5em !important;
  font-weight: 400 !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  text-rendering: geometricPrecision !important;
  transition: opacity 225ms cubic-bezier(0.0, 0.0, 0.2, 1) !important;
}

.i-amphtml-story-education[hidden] {
  display: block !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.i-amphtml-story-education-navigation {
  display: flex !important;
  height: 100% !important;
  width: 100% !important;
  padding: 48px !important;
  align-items: center !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.i-amphtml-story-education-navigation-gesture {
  position: relative !important;
  display: flex !important;
  height: 60px !important;
  width: 60px !important;
  margin-bottom: 60px !important;
  align-items: center !important;
  justify-content: center !important;
}

[step="swipe"] .i-amphtml-story-education-navigation-gesture {
  width: 140px !important;
}

.i-amphtml-story-education-navigation-gesture-outer {
  position: absolute !important;
  height: 60px !important;
  border-radius: 60px !important;
  border: 4px solid #FFF !important;
  animation: i-amphtml-tap-outer 1.6s cubic-bezier(0.4,0,0.2,1) 0.5s infinite backwards !important;
  will-change: left, opacity !important;
}

[step="tap"] .i-amphtml-story-education-navigation-gesture-outer {
  width: 100% !important;
}

[step="swipe"] .i-amphtml-story-education-navigation-gesture-outer {
  animation: i-amphtml-swipe-outer 1.6s cubic-bezier(0.4,0,0.2,1) 0.5s infinite backwards !important;
}

[dir="rtl"] [step="swipe"] .i-amphtml-story-education-navigation-gesture-outer {
  animation: i-amphtml-swipe-outer-rtl 1.6s cubic-bezier(0.4,0,0.2,1) 0.5s infinite backwards !important;
}

.i-amphtml-story-education-navigation-gesture-inner {
  position: absolute !important;
  height: 30px !important;
  width: 30px !important;
  background: #FFF;
  border-radius: 50% !important;
  animation: i-amphtml-tap-inner 1.6s cubic-bezier(0.4,0,0.2,1) 0.5s infinite backwards !important;
  will-change: opacity !important;
}

[step="swipe"] .i-amphtml-story-education-navigation-gesture-inner {
  animation: i-amphtml-swipe-inner 1.6s cubic-bezier(0.4,0,0.2,1) 0.5s infinite backwards !important;
}

[dir="rtl"] [step="swipe"] .i-amphtml-story-education-navigation-gesture-inner {
  animation: i-amphtml-swipe-inner-rtl 1.6s cubic-bezier(0.4,0,0.2,1) 0.5s infinite backwards !important;
}

.i-amphtml-story-education-navigation-progress {
  height: 24px !important;
  padding: 5px 15px !important;
  margin-bottom: 16px !important;
  background: rgba(255, 255, 255, 0.25) !important;
  border-radius: 24px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 14px !important;
}

.i-amphtml-story-education-navigation-instructions {
  max-width: 300px !important;
  font-size: 20px !important;
}

.i-amphtml-story-education-navigation-button {
  position: absolute !important;
  bottom: 48px !important;
  height: 48px !important;
  min-width: 120px !important;
  background: none !important;
  border: 2px solid #FFF !important;
  border-radius: 48px !important;
  color: #FFF !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 43px !important;
}

@keyframes i-amphtml-tap-outer {
  0% {
    transform: scale(1);
  }

  24%, 26% {
    transform: scale(0.8);
  }

  40% {
    transform: scale(1.1);
  }

  55%, 100% {
    transform: scale(1);
  }
}

@keyframes i-amphtml-tap-inner {
  0% {
    opacity: 0;
    transform: scale(1);
  }

  24%, 26% {
    opacity: 0.5;
    transform: scale(1);
  }

  40% {
    opacity: 0.5;
    transform: scale(2.2);
  }

  55%, 100% {
    opacity: 0.0;
    transform: scale(2.6);
  }
}

@keyframes i-amphtml-swipe-outer {
  0%, 4% {
    width: 60px;
    opacity: 0;
    left: 80px;
  }

  40% {
    width: 100%;
    opacity: 1;
    left: 0;
  }

  62% {
    width: 60px;
    left: 0;
  }

  80%, 100% {
    width: 60px;
    opacity: 0;
    left: 0;
  }
}

@keyframes i-amphtml-swipe-outer-rtl {
  0%, 4% {
    width: 60px;
    opacity: 0;
    right: 80px;
  }

  40% {
    width: 100%;
    opacity: 1;
    right: 0;
  }

  62% {
    width: 60px;
    right: 0;
  }

  80%, 100% {
    width: 60px;
    opacity: 0;
    right: 0;
  }
}

@keyframes i-amphtml-swipe-inner {
  0% {
    opacity: 0;
    left: 95px;
  }

  4% {
    opacity: 0.3;
    left: 95px;
  }

  40% {
    opacity: 0.5;
    left: 15px;
  }

  80%, 90% {
    opacity: 0;
    left: 15px;
  }

  100% {
    opacity: 0;
    left: 95px;
  }
}

@keyframes i-amphtml-swipe-inner-rtl {
  0% {
    opacity: 0;
    right: 95px;
  }

  4% {
    opacity: 0.3;
    right: 95px;
  }

  40% {
    opacity: 0.5;
    right: 15px;
  }

  80%, 90% {
    opacity: 0;
    right: 15px;
  }

  100% {
    opacity: 0;
    right: 95px;
  }
}
