.stm_gallery_wr {
  position: relative;
  .stm_gallery_nav_wr {
    position: relative;
    margin-bottom: 50px;
    .stm_gallery_nav {
      ul {
        list-style: none;
        margin: 0;
        padding: 0;
        @include cleaner();
        li {
          position: relative;
          float: left;
          font-size: 16px;
          color: $stm_base_color;
          font-weight: 700;
          margin: 15px 60px 0 0;
          padding-bottom: 24px;
          &.active {
            &:after {
              content: '';
              position: absolute;
              left: 0;
              bottom: 0;
              width: 100%;
              height: 4px;
              background: $stm_secondary_color;
            }
          }
          a {
            color: $stm_base_color;
            text-decoration: none !important;
            @include transition();
            &:hover {
              color: $stm_secondary_color;
            }
          }
        }
      }
    }
    .stm_gallery_switcher {
      position: relative;
      display: block;
      width: 40px;
      height: 40px;
      border: 2px solid $stm_secondary_color;
      font-size: 8px;
      color: $stm_secondary_color !important;
      .left {
        position: absolute;
        left: 9px;
        bottom: 7px;
        @include transition();
      }
      .right {
        position: absolute;
        right: 8px;
        top: 10px;
        @include transition();
      }
      &.active {
        .left {
          left: 20px;
          bottom: 18px;
        }
        .right {
          right: 19px;
          top: 21px;
        }
      }
    }
  }
  .stm_gallery {
    position: relative;
    &.container {
      .row {
        margin-left: -15px;
        margin-right: -15px;
        .item {
          padding: 0 15px;
          margin: 0 0 30px;
        }
      }
    }
    .row {
      margin: 0;
      .item {
        width: 25%;
        a {
          position: relative;
          display: block;
          &:before {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background: rgba($stm_base_color, .75);
            @include transition( all, .5s );
            opacity: 0;
          }
          &:after {
            content: "\e954";
            @include theme_icons();
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            @include transition( all, .5s );
            color: #fff;
            font-size: 28px;
            opacity: 0;
          }
          img {
            display: block;
            max-width: 100%;
            height: auto;
          }
          &:hover {
            &:before, &:after {
              opacity: 1;
            }
          }
        }
      }
    }
  }
  &.cols_3{
    .stm_gallery{
      .row{
        .item{
          width: 33%;
        }
      }
    }
  }
  &.cols_2{
    .stm_gallery{
      .row{
        .item{
          width: 50%;
        }
      }
    }
  }
  &.cols_1{
    .stm_gallery{
      .row{
        .item{
          width: 100%;
        }
      }
    }
  }
}