#geek-scrolling-bg-1028.geek-scrolling-background-wrapper {
  background-color: #000000;
}

#geek-scrolling-bg-1028 .geek-background-overlay {
  background: linear-gradient(to bottom, rgba(597, 0, 0, 0) 0%, rgba(597, 0, 0, 0.50) 50%, rgba(597, 0, 0, 0.80) 95%, #ff0000 100%);
}

#geek-scrolling-bg-1028 .geek-background-fadeout {
  background: linear-gradient(to right, #000000 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0) 80%, #000000 100%);
}

@keyframes geekScrollUp1028 {
  from {
    transform: scale(1.25) rotateX(30deg) translateX(-370px) translateY(-120px);
  }
  to {
    transform: scale(1.25) rotateX(35deg) translateX(-370px) translateY(-2800px);
  }
}

@keyframes geekScrollDown1028 {
  from {
    transform: scale(1.25) rotateX(35deg) translateX(-370px) translateY(-2800px);
  }
  to {
    transform: scale(1.25) rotateX(30deg) translateX(-370px) translateY(-120px);
  }
}

#geek-scrolling-bg-1028 .geek-background-grid .image-grid.scroll-up {
  animation-duration: 90s;
  animation-name: geekScrollUp1028;
}
#geek-scrolling-bg-1028 .geek-background-grid .image-grid.scroll-down {
  animation-duration: 90s;
  animation-name: geekScrollDown1028;
}


#geek-scrolling-bg-1028 .geek-background-grid .image-grid > li {
  width: 320px;
  height: 200px;
}

#geek-scrolling-bg-1028 .geek-background-grid .image-grid > li > img {
  opacity: 1;
}

#geek-scrolling-bg-1028 .geek-background-grid .image-grid.filter-blur > li > img {
  -webkit-filter: blur(5px);
  filter: blur(5px);
}
#geek-scrolling-bg-1028 .geek-background-grid .image-grid.filter-brightness > li > img {
  -webkit-filter:brightness(200%);
  filter:brightness(200%);
}
#geek-scrolling-bg-1028 .geek-background-grid .image-grid.filter-contrast > li > img {
  -webkit-filter:contrast(200%);
  filter:contrast(200%);
}
#geek-scrolling-bg-1028 .geek-background-grid .image-grid.filter-grayscale > li > img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}
#geek-scrolling-bg-1028 .geek-background-grid .image-grid.filter-hue_rotate > li > img {
  -webkit-filter:hue-rotate(90deg);
  filter:hue-rotate(90deg);
}
#geek-scrolling-bg-1028 .geek-background-grid .image-grid.filter-invert > li > img {
  -webkit-filter:invert(100%);
  filter:invert(100%);
}
#geek-scrolling-bg-1028 .geek-background-grid .image-grid.filter-saturate > li > img {
  -webkit-filter:saturate(8);
  filter:saturate(8);
}
#geek-scrolling-bg-1028 .geek-background-grid .image-grid.filter-sepia > li > img {
  -webkit-filter:sepia(100%);
  filter:sepia(100%);
}

#geek-scrolling-bg-1028 .geek-foreground-container > .inner {
  color: #ffffff;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.85);
}

@media only screen and (min-width : 1200px) {
  #geek-scrolling-bg-1028 .geek-scrolling-background-inner,
  #geek-scrolling-bg-1028 .geek-background-container
  {
    height: 800px;
  }

  #geek-scrolling-bg-1028 .geek-background-grid {
    perspective: 700px;
  }
}

/*tablet landscape*/
@media only screen and (min-width : 992px) and (max-width: 1199px) {
  #geek-scrolling-bg-1028 .geek-scrolling-background-inner,
  #geek-scrolling-bg-1028 .geek-background-container {
    height: 600px;
  }
  #geek-scrolling-bg-1028 .geek-background-grid {
    perspective: 600px;
  }

  @keyframes geekScrollUp1028 {
    from {
      transform: scale(1) rotateX(30deg) translateX(-925px) translateY(-200px);
    }
    to {
      transform: scale(1) rotateX(35deg) translateX(-925px) translateY(-2800px);
    }
  }

  @keyframes geekScrollDown1028 {
    from {
      transform: scale(1) rotateX(35deg) translateX(-925px) translateY(-2800px);
    }
    to {
      transform: scale(1) rotateX(30deg) translateX(-925px) translateY(-200px);
    }
  }
}

/*tablet portrait*/
@media only screen and (min-width : 768px) and (max-width: 991px) {
  #geek-scrolling-bg-1028 .geek-scrolling-background-inner,
  #geek-scrolling-bg-1028 .geek-background-container {
    height: 600px;
  }
  #geek-scrolling-bg-1028 .geek-background-grid {
    perspective: 600px;
  }

  @keyframes geekScrollUp1028 {
    from {
      transform: scale(0.75) rotateX(30deg) translateX(-1425px) translateY(-450px);
    }
    to {
      transform: scale(0.75) rotateX(35deg) translateX(-1425px) translateY(-2800px);
    }
  }

  @keyframes geekScrollDown1028 {
    from {
      transform: scale(0.75) rotateX(35deg) translateX(-1425px) translateY(-2800px);
    }
    to {
      transform: scale(0.75) rotateX(30deg) translateX(-1425px) translateY(-450px);
    }
  }
}

/*mobile landscape*/
@media only screen and (min-width : 480px) and (max-width: 767px) {
  #geek-scrolling-bg-1028 .geek-scrolling-background-inner,
  #geek-scrolling-bg-1028 .geek-background-container {
    height: 550px;
  }
  #geek-scrolling-bg-1028 .geek-background-grid {
    perspective: 500px;
  }

  @keyframes geekScrollUp1028 {
    from {
      transform: scale(0.75) rotateX(30deg) translateX(-1400px) translateY(-250px);
    }
    to {
      transform: scale(0.75) rotateX(35deg) translateX(-1400px) translateY(-2800px);
    }
  }

  @keyframes geekScrollDown1028 {
    from {
      transform: scale(0.75) rotateX(35deg) translateX(-1400px) translateY(-2800px);
    }
    to {
      transform: scale(0.75) rotateX(30deg) translateX(-1400px) translateY(-250px);
    }
  }
}

/*mobile portrait*/
@media only screen and (min-width : 320px) and (max-width: 479px){
  #geek-scrolling-bg-1028 .geek-scrolling-background-inner,
  #geek-scrolling-bg-1028 .geek-background-container {
    height: 640px;
  }
  #geek-scrolling-bg-1028 .geek-background-grid {
    perspective: 500px;
  }

  @keyframes geekScrollUp1028 {
    from {
      transform: scale(0.5) rotateX(30deg) translateX(-2600px) translateY(-660px);
    }
    to {
      transform: scale(0.5) rotateX(35deg) translateX(-2600px) translateY(-2800px);
    }
  }

  @keyframes geekScrollDown1028 {
    from {
      transform: scale(0.5) rotateX(35deg) translateX(-2600px) translateY(-2800px);
    }
    to {
      transform: scale(0.5) rotateX(30deg) translateX(-2600px) translateY(-660px);
    }
  }
}

