/*
** Dark Section background and Dark Muted background sections - .ds and .ds.ms
*/
/* dark grey background section - .ds */
.ds {
  background-color: $darkgreyColor;
  color: $lightColor;

  .breadcrumb{
    background: $lightColor;
    .breadcrumb-item{
      color: $darkgreyColor;
      &:before{
        color: $darkgreyColor;
      }
      a{
        color: $darkgreyColor;
      }
    }
  }

  .filters{
    a{
      border-color: $lightColor;
      &:hover{
        color: $lightColor !important;
      }
    }
  }

  &.transparent_bg{
    background-color: transparent;
  }
  & * & {
    background-color: darken($darkgreyColor, 5%);

  }
  .special-heading{
    span.sub-title{
      color: $colorMain2;
      &:before{
        background: $colorMain2;
      }
    }
  }
  .ls{
    .special-heading{
      span.sub-title{
        color: $colorMain;
        &:before{
          background: $colorMain;
        }
      }
    }
  }
}

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

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

.ds {
      //buttons
  .text-divider{
    color: $lightColor;
  }
  .just-link{
    color: $lightColor;
    &:hover{
      color: $darkColor;
    }
  }
  .btn-maincolor2{
    background: $lightColor;
    color: $darkgreyColor;
  }
  .btn-outline-maincolor2{
    border-color: $lightColor;
  }
  .btn-darkgrey{
    background: $greyColor;
  }
  [class*="btn-outline-"]{
    color: $lightColor;
  }

  .btn-maincolor:hover {
    background-color: transparent;
    border-color: $colorMain;
    color: $lightColor;
  }

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

  .btn-maincolor3:hover {
    background-color: transparent;
    border-color: $colorMain3;
    color: $lightColor;
  }

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

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

  .btn-outline-maincolor2:hover {
    background-color: $lightColor;
    color: $darkgreyColor;

  }

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

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


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

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

  //light section in dark section - .ds .ls
  .ls {

    color: $fontColor;

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

  label {
    color: $lightColor;
  }

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

  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: $lightColor;
    border-color: $lightColor;
  }

  .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: $borderColor;

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



  //social icons
  a.fa {
    color: $lightColor;
    border-color: $darkBorderColor;
  }
  a.bg-icon {
    background-color: $lightColor;
    color: $darkColor;
  }

  .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;
  }
}