.backgroundCover {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.fadeout-with-navigation {
  -webkit-mask-image: linear-gradient(to bottom, black calc(70% - 200px), black calc(90% - 200px), transparent calc(100% - 200px));
  mask-image: linear-gradient(to bottom, black calc(70% - 200px), black calc(90% - 200px), transparent calc(100% - 200px));
}

.fadeout-without-navigation {
  -webkit-mask-image: linear-gradient(to bottom, black calc(70% - 30px), black calc(90% - 30px), transparent calc(100% - 30px));
  mask-image: linear-gradient(to bottom, black calc(70% - 30px), black calc(90% - 30px), transparent calc(100% - 30px));
}

body > .content.fadeout-without-navigation [class*="column-"] {
  padding-bottom: 100px;
}

body > .content.fadeout-with-navigation [class*="column-"] {
  padding-bottom: 280px;
}

body > .scroll-down-indicator {
  display: block;
  position: fixed;
  left: 50%;
  bottom: 10px;
  width: 30px;
  height: 30px;
  margin-left: -15px;
  background-position: center;
  background-repeat: no-repeat;
  background-size:  30px;
  overflow: hidden;
  z-index: 300;
}

.scroll-down-indicator.with-navigation {
  bottom: 177px;
}

@media (width:1280px) {
  .fadeout-with-navigation {
    all: initial;
    bottom: 140px;
  }

  .fadeout-without-navigation {
    all: initial;
    bottom: 40px;
  }

  body > .content.fadeout-without-navigation [class*="column-"] {
    padding-top: 40px;
    padding-bottom: 0px;
  }
  
  body > .content.fadeout-with-navigation [class*="column-"] {
    padding-top: 140px;
    padding-bottom: 0px;
  }

  body > .scroll-down-indicator {
    width: 20px;
    height: 20px;
    margin-left: -10px;
    background-size:  20px;
  }
  
  body > .scroll-down-indicator.with-navigation {
    bottom: 118px;
  }
}