
.container {
  padding-top: 5vw;
  padding-bottom: 5vw;
  position: relative;

  .transition-before &, .transition-after & {
    z-index: 2;
    //padding-top: 10em;
    //padding-bottom: 10em;
  }

}


// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
$yiq-contrasted-threshold: 172;

// Customize the light and dark text colors for use in our YIQ color contrast function.
//$yiq-text-dark: red;
//$yiq-text-light: $white;

.section {
  position: relative;

  .background {
    @extend .hero-bg;
    position: absolute;

  }

  @each $color, $value in $colors {
    &.#{$color} {
      background-color: $value;
      color: color-yiq($value, $body-color, scale_color($value, $lightness: +90%));

      h1, h2, h3, h4, h5 {
        color: color-yiq($value, scale_color($value, $lightness: +90%), $primary);
      }
    }

  }

}



