/* Modern Header */
.modern-header {
  &.modern-header-theme-colored3 {
    .header-nav {
      .header-nav-wrapper {
        &:not(.scroll-to-fixed-fixed) {
          nav {
            background: @theme-color3;
          }
        }
        .menuzord-menu > li:not(.active):not(:hover) {
          > a {
            @media only screen and (min-width : 901px) {
            }
          }
        }
        &.scroll-to-fixed-fixed {
          background: @theme-color3;
        }
      }
    }
  }
}

/* -------- Text Theme Color ---------- */
.text-theme-colored3 {
  color: @theme-color3 !important;
}
.text-hover-theme-colored3 {
  &:hover {
    color: @theme-color3 !important;
  }
}
ul.list.theme-colored3 li:before,
ul.list.theme-colored3.angle-double-right li:before,
ul.list.theme-colored3.angle-right li:before,
ul.list.theme-colored3.check-circle li:before,
ul.list.theme-colored3.check li:before,
.list-icon.theme-colored3 li i {
  color: @theme-color3;
}

/* -------- border-theme-color ---------- */
.border-theme-colored3 {
  border-color: @theme-color3 !important;
}
.border-1px-theme-colored3 {
  border: 1px solid @theme-color3;
}

/* border-left-color */
blockquote.theme-colored3 {
    border-left: 3px solid @theme-color3;
}
blockquote.bg-theme-colored3 {
    border-left: 3px solid darken(@theme-color3, 10%);
    color: @white-base;

    footer {
      color: @gray-lighter;
    }
}
blockquote.gray.bg-theme-colored3 {
    background-color: @gray-lighter !important;
    border-left: 3px solid @theme-color3;
    color: @theme-color3;
    
    footer {
      color: @gray-light;
    }
}


/* -------- bg-theme-color ---------- */
.bg-theme-colored3 {
  background-color: @theme-color3 !important;
}
.bg-hover-theme-colored3 {
  &:hover {
    background: @theme-color3 !important;
    border-color: @theme-color3 !important;
    color: @white-base !important;
    
    h1,h2,h3,h4,h5,h6,p,a,i {
      color: @white-base !important;
    }
  }
}
.list-icon.theme-colored3.square li i,
.list-icon.theme-colored3.rounded li i {
  background: @theme-color3;
}

/* -------- Transparent bg Color ---------- */
.bg-theme-colored3-transparent-9 {
  background-color: fade(@theme-color3, 90%) !important;
}
.bg-theme-colored3-transparent-8 {
  background-color: fade(@theme-color3, 80%) !important;
}
.bg-theme-colored3-transparent-7 {
  background-color: fade(@theme-color3, 70%) !important;
}
.bg-theme-colored3-transparent-6 {
  background-color: fade(@theme-color3, 60%) !important;
}
.bg-theme-colored3-transparent-5 {
  background-color: fade(@theme-color3, 50%) !important;
}
.bg-theme-colored3-transparent-4 {
  background-color: fade(@theme-color3, 40%) !important;
}
.bg-theme-colored3-transparent-3 {
  background-color: fade(@theme-color3, 30%) !important;
}
.bg-theme-colored3-transparent-2 {
  background-color: fade(@theme-color3, 20%) !important;
}
.bg-theme-colored3-transparent-1 {
  background-color: fade(@theme-color3, 10%) !important;
}
.bg-theme-colored3-transparent {
  background-color: fade(@theme-color3, 50%) !important;
}



/* -------- layer overlay Color ---------- */
.layer-overlay {
  /* .overlay-theme-colored3 */
  &.overlay-theme-colored3 {
    &::before {
      background-color: fade(@theme-color3, 80%) !important;
    }
  }
  &.overlay-theme-colored3-1 {
    &::before {
      background-color: fade(@theme-color3, 10%);
    }
  }
  &.overlay-theme-colored3-2 {
    &::before {
      background-color: fade(@theme-color3, 20%);
    }
  }
  &.overlay-theme-colored3-3 {
    &::before {
      background-color: fade(@theme-color3, 30%);
    }
  }
  &.overlay-theme-colored3-4 {
    &::before {
      background-color: fade(@theme-color3, 40%);
    }
  }
  &.overlay-theme-colored3-5 {
    &::before {
      background-color: fade(@theme-color3, 50%);
    }
  }
  &.overlay-theme-colored3-6 {
    &::before {
      background-color: fade(@theme-color3, 60%);
    }
  }
  &.overlay-theme-colored3-7 {
    &::before {
      background-color: fade(@theme-color3, 70%);
    }
  }
  &.overlay-theme-colored3-8 {
    &::before {
      background-color: fade(@theme-color3, 80%);
    }
  }
  &.overlay-theme-colored3-9 {
    &::before {
      background-color: fade(@theme-color3, 90%);
    }
  }
}


/*
 * btn-default: theme-color
 * -----------------------------------------------
*/
.btn-default.btn-theme-colored3 {
  .button-variant(@theme-color3; @btn-default-bg; @theme-color3);
}
.btn-default.btn-theme-colored3:hover,
.btn-default.btn-theme-colored3:active,
.btn-default.btn-theme-colored3:focus {
  background-color: @theme-color3;
  border-color: @theme-color3;
  color: @white-base;
}


/*
 * btn-border
 * -----------------------------------------------
*/
.btn-border.btn-theme-colored3 {
  .button-variant(@theme-color3; @btn-border-bg; @theme-color3);
}
.btn-border.btn-theme-colored3:hover,
.btn-border.btn-theme-colored3:active,
.btn-border.btn-theme-colored3:focus {
  background-color: darken(@theme-color3, 10%);
  border-color: darken(@theme-color3, 10%);
  color: @white-base;
}


/*
 * btn-dark
 * -----------------------------------------------
*/
.btn-dark.btn-theme-colored3 {
  .button-variant(@btn-dark-color; @theme-color3; @theme-color3);
}


/*
 * btn-gray
 * -----------------------------------------------
*/
.btn-gray.btn-theme-colored3 {
  .button-variant(@theme-color3; lighten(@theme-color3, 10%); lighten(@theme-color3, 10%));
}

/*
 * btn-primary: theme-color
 * -----------------------------------------------
*/
.btn-theme-colored3 {
  .button-variant(@btn-primary-color; @theme-color3; @theme-color3)
}


.btn-hover-theme-colored3 {
  &:hover {
    background-color: @theme-color3;
    border-color: @theme-color3;
    color: @white-base;
  }
}

/*
 * Shortcode: styled-icons Theme Colored
 * -----------------------------------------------
*/
.icon-theme-colored3 {
  a {
    color: @theme-color3;
  }

  &.icon-bordered {
    a {
      border-color: @theme-color3;

      &:hover {
        background-color: @theme-color3;
        color: @white-base;
      }
    }
  }

  &.icon-dark {
    a {
      background-color: @theme-color3;
      color: @white-base;

      &:hover {
        background-color: darken(@theme-color3, 10%);
        color: @white-base;
      }
    }

    &.icon-bordered {
      a {
        border-color: @theme-color3;
        color: @theme-color3;

        &:hover {
          background-color: @theme-color3;
          border-color: @theme-color3;
          color: @white-base;
        }
      }
    }
  }

  &.icon-gray {
    a {
      color: @theme-color3;

      &:hover {
        color: darken(@theme-color3, 10%);
      }
    }

    &.icon-bordered {
      a {
        color: @theme-color3;

        &:hover {
          background-color: @gray-lighter;
          border-color: @gray-lighter;
          color: @theme-color3;
        }
      }
    }
  }
}

.icon-theme-colored3 {
  a {
    &:hover {
      color: darken(@theme-color3, 10%);
    }
  }  
}

.icon-hover-theme-colored3 {
  a {
    &:hover {
      background-color: @theme-color3;
      border-color: @theme-color3;
      color: @white-base;
    }
  }  
}

.styled-icons.icon-hover-theme-colored3 {
  a {
    &:hover {
      background-color: @theme-color3;
      border-color: @theme-color3;
      color: @white-base;
    }
  }  
}

/*
 * Shortcode: Icon Boxes Theme Colored
 * -----------------------------------------------
*/
.icon-box{
  &.iconbox-theme-colored3 {
    .icon {
      color: @theme-color3;

      &.icon-border-effect {
        &::after {
          box-shadow: 0 0 0 3px @theme-color3;
        }
      }

      &.icon-bordered {
        border-color: @theme-color3;

        &:hover {
          background-color: @theme-color3;
          color: @white-base;
        }
      }

      &.icon-gray {
        &:hover {
          background-color: @theme-color3;
          color: @white-base;
        }

        &.icon-bordered {
          border-color: @gray-lighter;

          &:hover {
            background-color: @theme-color3;
            border-color: @theme-color3;
            color: @white-base;
          }
        }
      }

      &.icon-dark {
        background-color: @theme-color3;
        color: @white-base;

        &:hover {
          color: @white-base;
        }

        &.icon-bordered {
          background-color: transparent;
          border-color: @theme-color3;
          color: @theme-color3;

          &:hover {
            background-color: @theme-color3;
            border-color: @theme-color3;
            color: @white-base;
          }
        }
      }



      &.icon-white {
        background-color: @white-base;
        color: @theme-color3;

        &:hover {
          background-color: @theme-color3;
          color: @white-base;
        }

        &.icon-bordered {
          background-color: transparent;
          border-color: @theme-color3;
          color: @white-base;

          &:hover {
            background-color: @theme-color3;
            border-color: @theme-color3;
            color: @white-base;
          }
        }
      }
    }

    &.iconbox-border {
      border-color: @theme-color3;
    }
  }
}



/*
 *  accordion.less
 * -----------------------------------------------
*/
.accordion-theme-colored3 {
  .panel-default > .panel-heading {
    background-color:@theme-color3;
    .panel-title > a,
    .panel-title > a:hover,
    .panel-title > a:focus {
      color: #fff;
    }
  }
}
.panel-group {
  &.accordion-icon-filled {
    &.accordion-icon-left {
      &.accordion-icon-filled-theme-colored3 {
        .panel-heading {
          .panel-title {
            a {
              &:before {
                background-color:@theme-color3;
              }
            }
          }
        }
      }
    }
    &.accordion-icon-right {
      &.accordion-icon-filled-theme-colored3 {
        .panel-heading {
          .panel-title {
            a {
              &:after {
                background-color:@theme-color3;
              }
            }
          }
        }
      }
    }
  }
}