:root {
  --focus-color: #097efb;
  --focus-color-dark-bg: #3b99fc;
}
@media (prefers-color-scheme: dark) {
  :root {
    --focus-color: #3b99fc;
    --focus-color-dark-bg: #097efb;
  }
}
/*
 * This file contains CSS code specific to the demo.
 * For general code that pertains to the component 
 * itself, including general CSS code to pause CSS
 * transitions and animations as well as code to 
 * pause animated GIFs, so pause-animation-control.less
 */
.showcode_ui {
  top: 2.5rem;
}
@media only screen and (min-width: 720px) {
  .showcode_ui {
    top: 0;
  }
}
@media only screen and (min-width: 960px) {
  .offscreen-observer__is-header-offscreen #enable-pause-control .play-pause-anim__checkbox-container {
    top: 0;
    left: 0;
    right: initial;
    width: 100%;
    border: none;
    border-radius: 0;
  }
}
#svg-smil-demo svg,
#html5-video-example video {
  max-width: 100%;
  display: block;
  margin: 0 auto;
}
#anim-gif-demo .pause-anim-control__gif {
  text-align: center;
}
.offscreen-observer__is-header-offscreen .play-pause-anim {
  position: fixed;
  top: 0rem;
}
main:not(.with-full-bleed-hero) .play-pause-anim {
  margin: -1rem -1rem 0.625rem -1rem;
}
@media only screen and (min-width: 960px) {
  .offscreen-observer__is-header-offscreen .play-pause-anim {
    top: 0.625rem;
  }
  main:not(.with-full-bleed-hero) .play-pause-anim {
    margin: 0;
  }
}
.play-pause-anim__full-bleed-image-demo {
  position: relative;
}
.play-pause-anim__full-bleed-image-demo--image {
  background-image: url(https://www.useragentman.com/tests/html5ImageConverter/examples/saturn-alpha/space.jpg);
  background-size: 100vw auto;
  background-position: 0px 0px;
  background-repeat: repeat-x;
  background-size: auto;
  animation: animatedBackground 60s linear infinite;
  width: 100vw;
}
.play-pause-anim__full-bleed-image-demo--copy {
  position: absolute;
  top: 3vw;
  right: 80px;
  max-width: initial;
  width: calc(50% - 80px * 2);
  transform: none;
  background: rgba(0, 0, 0, 0.3);
  padding: 10px;
  text-align: center;
  color: white;
}
.text-zoom .play-pause-anim__full-bleed-image-demo--copy {
  position: static;
  width: 100%;
  background: #000;
}
.play-pause-anim__full-bleed-image-demo--copy h2 {
  border-bottom: none;
  font-size: 3.75rem;
}
.play-pause-anim__full-bleed-image-demo--copy p {
  font-size: 1.875rem;
}
.play-pause-anim__full-bleed-image-demo--copy strong {
  color: white;
}
@media only screen and (min-width: 1px) and (max-width: 959px) {
  .play-pause-anim__full-bleed-image-demo--copy {
    position: static;
    width: 100%;
    background: #000;
  }
  .play-pause-anim__full-bleed-image-demo--copy h2 {
    font-size: 1.5rem;
    display: inline;
  }
  .play-pause-anim__full-bleed-image-demo--copy p {
    font-size: 1.5rem;
    display: inline;
  }
}
main {
  min-height: 54vw;
}
@keyframes animatedBackground {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -1920px 0;
  }
}
/*# sourceMappingURL=pause-animations-demo.css.map */