/*
 *  box-hover-effect.scss
 * -----------------------------------------------
*/
.box-hover-effect {
  //display: inline-block;
  display: block;
  vertical-align: middle;
  .effect-wrapper {
    position: relative;
    overflow: hidden;
    margin: 0;
    width: 100%;

    .thumb {
      position: relative;
      overflow: hidden;
      backface-visibility: hidden;
      @include scale(1);
      @include transition(all .4s ease);

      &.gradient-effect:after {
        position: absolute;
        left: 0;
        bottom: 0;
        height: 50%;
        width: 100%;
        background: #181818;
        background: -moz-linear-gradient(top, #000000,rgba(0,0,0,0.55), transparent);
        background: -webkit-linear-gradient(top,#000000,rgba(0,0,0,0.55), transparent);
        background: linear-gradient(to top, #000000,rgba(0,0,0,0.55), transparent);
        content: "";
        z-index: 1;
      }
    }

    .hover-link {
      bottom: 0;
      display: block;
      left: 0;
      position: absolute;
      right: 0;
      top: 0;
      background: none!important;
      color: transparent!important;
      z-index: 9;
    }

    .overlay-shade {
      bottom: 0;
      display: block;
      left: 0;
      position: absolute;
      right: 0;
      top: 0;
      z-index: 10;
      background-color: #000;
      opacity: 0;
      filter: alpha(opacity=0);
      @include transition(all .5s ease);
    }

    .overlay-shade.shade-white {
      background-color: #fff;
    }
    
    /* Icons Holder */
    .icons-holder {
      display: inline-block;
      opacity: 0;
      position: absolute;
      z-index: 13;
      @include transition(all .4s ease);

      .icons-holder-inner {
        position: relative;
        margin: 0;

        a {
          @include transition(all .4s ease);
        }
      }
    }

    /* Icons Holder middle */
    .icons-holder-middle {
      left: 0;
      margin: 0 auto;
      right: 0;
      text-align: center;
      top: 40%;
      vertical-align: middle;
      width: 80%;

      .icons-holder-inner {
        display: inline-block;
        vertical-align: middle;

        a {
          @include transition(all .4s ease);
        }
      }
    }

    /* Icons Holder top left */
    .icons-holder-top-left {
      top: -20%;
      left: 0;
      padding: 15px;
      .icons-holder-inner {
        display: block;
      }
    }

    /* Icons Holder top right */
    .icons-holder-top-right {
      top: -20%;
      right: 0;
      padding: 15px;
      .icons-holder-inner {
        display: block;
      }
    }

    /* Icons Holder bottom left */
    .icons-holder-bottom-left {
      bottom: -20%;
      left: 0;
      padding: 5px 15px;
      .icons-holder-inner {
        display: block;
      }
    }

    /* Icons Holder bottom right */
    .icons-holder-bottom-right {
      bottom: -20%;
      right: 0;
      padding: 5px 15px;
      .icons-holder-inner {
        display: block;
      }
    }




    /* Text Holder */
    .text-holder {
      display: inline-block;
      opacity: 0;
      overflow: hidden;
      position: absolute;
      @include transition(all 0.3s ease 0s);
      z-index: 13;

      .title {
        color: #fff;
      }
      .text_holder_inner {
        display: table;
        height: 100%;
        position: relative;
        width: 100%;
      }
      .text_holder_inner2 {
        display: table-cell;
        height: 100%;
        position: relative;
        text-align: center;
        vertical-align: middle;
        width: 100%;
      }
    }

    .overlay-shade.shade-white + .text-holder .title {
      color: #333;
    }


    /* Text Holder middle */
    .text-holder-middle {
      display: block;
      left: 0;
      margin: 0 auto;
      right: 0;
      text-align: center;
      top: 30%;
      vertical-align: middle;
      width: 80%;
      @include transition(all 0.3s ease 0.1s);
    }

    /* Text Holder top */
    .text-holder-top {
      display: block;
      left: 0;
      margin: 0 auto;
      right: 0;
      text-align: center;
      top: -40px;
      vertical-align: middle;
      width: 80%;
      @include transition(all 0.3s ease 0.1s);
    }

    /* Text Holder bottom */
    .text-holder-bottom {
      display: block;
      left: 0;
      margin: 0 auto;
      right: 0;
      text-align: center;
      bottom: -40px;
      vertical-align: middle;
      width: 80%;
      @include transition(all 0.3s ease 0.1s);
    }


    //text holder top left
    .text-holder-top-left {
      left: -40px;
      padding: 5px 15px;
      top: 0;
      width: auto;
      @include transition(all 0.3s ease 0.2s);
    }
    //text holder top right
    .text-holder-top-right {
      right: -40px;
      padding: 5px 15px;
      top: 0;
      width: auto;
      @include transition(all 0.3s ease 0.2s);
    }
    //text holder bottom left
    .text-holder-bottom-left {
      left: 0;
      padding: 5px 15px;
      bottom: -40px;
      width: auto;
      @include transition(all 0.3s ease 0.2s);
    }
    //text holder bottom right
    .text-holder-bottom-right {
      right: 0;
      padding: 5px 15px;
      bottom: -40px;
      width: auto;
      @include transition(all 0.3s ease 0.2s);
    }
  }

  &:hover {
    .effect-wrapper {
      .thumb {
        @include scale(1.05);
      }
      .overlay-shade {
        opacity: 0.7;
        filter: alpha(opacity=90);
      }

      .icons-holder {
        opacity: 1;
        .icons-holder-inner {
          a {
          }
        }
      }
      .icons-holder-middle {
        top: 45%;
      }
      .icons-holder-top-left {
        left: 0;
      }
      .icons-holder-top-right {
        right: 0;
      }
      .icons-holder-bottom-left {
        bottom: 2%;
      }
      .icons-holder-bottom-right {
        bottom: 2%;
      }


      .text-holder {
        opacity: 1;
      }
      .text-holder-middle {
        top: 40%;
      }
      .text-holder-top {
        top: 20px;
      }
      .text-holder-bottom {
        bottom: 20px;
      }
      .text-holder-top-left {
        left: 0;
      }
      .text-holder-top-right {
        right: 0;
      }
      .text-holder-bottom-left {
        bottom: 2%;
      }
      .text-holder-bottom-right {
        bottom: 2%;
      }
    }
  }
}

.shadow-overlay {
  background-image: url("../images/shadow-overlay.png");
  background-position: center bottom;
  background-repeat: repeat-x;
  bottom: 0;
  color: $white-base;
  height: 100%;
  left: 0;
  position: absolute;
  width: 100%;
}

/* Individual effects */

/* Individual effect = image-zoom-in */
.box-hover-effect.image-zoom-in {
  .thumb {
    @include scale(1);
  }

  &:hover .thumb {
    @include scale(1.1);
  }
}

/* Individual effect = image-zoom-out */
.box-hover-effect.image-zoom-out {
  .thumb {
    @include scale(1.1);
  }

  &:hover .thumb {
    @include scale(1);
  }
}