/*
** Light Background Section - .ls
*/
.ls {
  background-color: $lightColor;
  color: $fontColor;
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: $darkgreyColor;
    a {
      color: inherit;
      &:hover {
        opacity: 0.8;
      }
    }
  }

  //buttons
  .btn-maincolor:hover,
  .btn-maincolor2:hover,
  .btn-maincolor3:hover,
  .btn-darkgrey:hover,
  .btn-grey:hover {
    color: $darkColor;
  }

  .btn-darkgrey:hover {
    border-color: $darkColor;
  }


  .btn-outline-maincolor:hover,
  .btn-outline-maincolor2:hover,
  .btn-outline-maincolor3:hover,
  .btn-outline-darkgrey:hover,
  .btn-outline-grey:hover {
    color: $lightColor;
  }

  .btn-outline-darkgrey:hover {
    background-color: $darkColor;
  }

  .btn-outline-grey:hover {
    background-color: $greyColor;
    color: $colorMain;
  }

  .links-maincolor a:hover {
    opacity: 0.7;
  }
}

/*
** Grey Background Section - light section, muted section - .ls.ms
*/
.ls.ms {
  background-color: $greyColor;

  .hero-bg {
    background-color: $lightColor;
    hr {
      background-color: $borderColor;
    }
  }

  hr {
    background-color: $lightColor;
  }


  .btn-secondary {
    border-color: $lightColor;
    &:hover {
      border-color: darken($greyColor, 6%);
      background-color: darken($greyColor, 6%);
    }
  }

  .btn-grey {
    background-color: $lightColor;
    &:hover {
      background-color: transparent;
      border-color: $lightColor;
    }
  }

  .btn-outline-grey {
    background-color: transparent;
    border-color: $lightColor;
    &:hover {
      background-color: $lightColor;
    }
  }
}