


//-----------------------------------------------------------------
// Background image
//
.bg-img {
  position: relative;
  border-bottom: none;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 0;
}

.bg-fixed {
  background-attachment: fixed;
}

// iOS can't render a cover and fixed image
@media (max-width:640px) {
  .bg-fixed {
    background-attachment: initial;
  }
}

.bg-repeat {
  background-repeat: repeat;
  background-size: auto;
}

.bg-img-left {
  background-position: left center;
}

.bg-img-right {
  background-position: right center;
}




//----------------------------------------------------/
// Overlay
//----------------------------------------------------/

[data-overlay],
[data-overlay-light] {
  position: relative;
}
[data-overlay]::before,
[data-overlay-light]::before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #191919;
}

[data-overlay-light]::before {
  background: #fff;
}


[data-overlay-primary]::before {
  background: $color-primary;
}


// Default overlay
//
@for $i from 1 through 9 {
  [data-overlay="#{$i}"]::before {
    opacity: $i / 10;
  }
}


// Light overlay
//
@for $i from 1 through 9 {
  [data-overlay-light="#{$i}"]::before {
    opacity: $i / 10;
  }
}

