.swiper-container
  margin: 100px 0px
  width: 100%
  height: 250px

.slide-content
  text-align: center
  width: $contentGrid*7
  margin: 0 auto

.swiper-button-prev
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E")

/** FOR THE HEADER **/

.header-image
  margin: 0px
  margin-top: -30px
  width: 100%
  z-index: -999
  position: relative
  overflow: hidden

.for-header
  height: 700px
  transition: height ease 1s

.header-shorten
  height: 200px
  background-blend-mode: darken(black, 0.10)

.header-shorten-instant
  height: 200px

+media-query(930px)
  .swiper-container
    height: 300px

  .slide-content
    width: $contentGrid*8.5

  .features-title
    font-size: 20pt

  .swiper-button-prev, .swiper-button-next
    top: 33%
    width: 30px
    height: 30px

+media-query(486px)
  .swiper-container
    height: 400px
  .for-header
    height: 400px
  .streamer-bg-image
    .streamer
      +transform(translateY(150px))