/* Demo specific css styles */

@font-face {
  font-family: Bungee;
  src: url(bungeeinline-regular-webfont.woff2);
}

#demoCanvas
{
  background: url('backdrop.png') !important;
  background-position-x: -1920px !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}
#demoCanvas.greets
{
  background-position: 0px !important;
}

img
{
  pointer-events: none;
  transition: opacity 3s;
}

img.hide
{
  opacity: 0;
}

img.show
{
  opacity: 1;
}


img.scroll-in
{
  transition: none !important;
  opacity: 1 !important;
  animation-name: scrollIn;
  animation-duration: 1.0s;
}

img.scroll-out
{
  transition: none !important;
  opacity: 1 !important;
  animation-name: scrollOut;
  animation-duration: 1.0s;
  animation-fill-mode: forwards;
}
img.scroll-in2
{
  transition: none !important;
  opacity: 1 !important;
  animation-name: scrollIn2;
  animation-duration: 1.0s;
}

img.scroll-out2
{
  transition: none !important;
  opacity: 1 !important;
  animation-name: scrollOut2;
  animation-duration: 1.0s;
  animation-fill-mode: forwards;
}

/* The animation code */
@keyframes scrollIn {
  from {transform: translateX(100vw);}
  to {transform: translateX(0px);}
}
@keyframes scrollOut {
  from {transform: translateX(0px);}
  to {transform: translateX(-100vw);}
}
/* The animation code */
@keyframes scrollIn2 {
  from {transform: translateX(-100vw);}
  to {transform: translateX(0px);}
}
@keyframes scrollOut2 {
  from {transform: translateX(0px);}
  to {transform: translateX(100vw);}
}