/*
** Dark Section background and Dark Muted background sections - .ds and .ds.ms
*/
/* dark grey background section - .ds */
.ds {
  background-color: $darkgreyColor;
  color: $darkFontColor;
  & * & {
    background-color: darken($darkgreyColor, 5%);
  }
  .list-unstyled{
    color: $darkFontColor;
  }
}

/* dark background section - .ds.ms */
.ds.ms {
  background-color: $darkColor;
  & & {
    background-color: lighten($darkColor, 2%);
  }
}

/* dark section blue - .ds.bs */
.ds.bs {
  background-color: $darkBlueColorLighter;
}

.ds {
  a:not(.btn) {
      color: $lightColor;
    &:hover {
      color: $colorMain;
    }
    &.color-main{
      color: $colorMain;
    &:hover{
      color: $lightColor;
    }
    }
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: $lightColor;
    a {
      color: $lightColor;
      &:hover {

      }
    }
  }



  //light section in dark section - .ds .ls
  .ls {
    background-color: $lightColor;
    color: $fontColor;

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      color: $darkgreyColor;
      a {
        color: inherit;
        &:hover {
          color: $colorMain;
        }
      }
    }
    a:not(.btn) {
      color: $darkgreyColor;
      &:hover {
        color: $colorMain;
      }
    }
    .btn-maincolor:hover{
      color: $colorMain;
    }
    .btn-maincolor2:hover{
      color: $colorMain2;
    }
    .btn-maincolor3:hover{
      color: $colorMain3;
    }
    .btn-darkgrey:hover{
      color: $darkgreyColor;
    }
  }
  //end of .ls inside .ds

  label {
    color: $lightColor;
  }

  hr {
    border-color: $darkBorderColor;
    background-color: $darkBorderColor;
  }
  blockquote, .blockquote {
    color: $darkFontColor;
  }

  pre {
    color: $darkFontColor;
  }

  .muted-bg,
  .hero-bg {
    background-color: $darkBackgroundColor;
  }

  .bordered {
    border-color: $darkBorderColor;
  }
  .color-main {
    color: $colorMain;
  }
  .color-main2 {
    color: $colorMain2;
  }
  .color-dark,
  .color-darkgrey {
    color: $darkgreyColor;
    border-color: $darkgreyColor;
  }

  .links-maincolor a {
    color: $colorMain;
    &:hover {
      color: $lightColor;
    }
  }
  .links-maincolor2 a {
    color: $colorMain2;
    &:hover {
      color: $lightColor;
    }
  }
  .links-maincolor3 a {
    color: $colorMain3;
    &:hover {
      color: $lightColor;
    }
  }

  .links-grey a {
    color: $darkFontColor;
    &:hover {
      color: $lightColor;
    }
  }

  .links-darkgrey a {
    color: $lightColor;
    &:hover {
      color: $colorMain;
    }
  }
  //sections with borders
  &.s-bordertop:before,
  &.s-borderbottom:after,
  &.s-bordertop-container .container:before,
  &.s-borderbottom-container .container:after {
    background-color: $darkBorderColor;

  }
  &.s-bordered-columns {
    [class*='col-'] + [class*='col-']:before {
      background-color: $darkBorderColor;
    }
  }

  //buttons

  .btn-square{
    color: $lightColor;
    border-color: $lightColor;
    &:hover{
      background-color: $lightColor;
      color: $darkgreyColor;
    }
  }

  .btn-maincolor,
  .btn-maincolor2,
  .btn-maincolor4,
  .btn-maincolor3{
    &:hover{
      color: $lightColor;
      background: transparent;
    }
  }

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

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

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

  .btn-outline-maincolor2:hover{
    background-color: $colorMain2;
  }

  .btn-outline-maincolor3:hover{
    background-color: $colorMain3;
  }

  .btn-outline-maincolor4:hover{
    background-color: $colorMain4;
  }

  .btn-outline-darkgrey{
    color: $lightColor;
    border-color: $lightColor;
    &:hover{
      background-color: $lightColor;
      color: $darkgreyColor;
    }
  }

  //social icons
  a.fa {
    color: $darkFontColor;
    border-color: $darkFontColor;
  }
  a.bg-icon {
    background-color: $darkBackgroundColor;
  }

  .fa.color-icon:hover {
    color: $lightColor;
  }

  .color-icon.bg-icon {
    background-color: $darkBackgroundColor;
  }
  .color-icon.bg-icon:hover {
    color: $lightColor;
  }

  .color-bg-icon:hover {
    background-color: $colorMain;
  }
}