/* --- skin-alba BEGIN */
.zfolio.skin-alba{
  $offset_for_border: 10px;
  .zfolio-item{

    .zfolio-item--inner--inner{
      position: relative;

      >figure{

        position: absolute;
        $transition-property: width,height;
        $transition-duration: .3s;
        $transition-timing: ease-out;

        background-color: rgba(255,255,255,0.5);

        @include apply_transition($transition-property,$transition-duration,$transition-timing);
      }
      > figure:nth-of-type(1){
        top:$offset_for_border;
        left:$offset_for_border;
        width: 1px;
        height: 0px;

        transition-delay: 0.04s;

      }
      > figure:nth-of-type(2){
        top:auto; bottom: $offset_for_border;
        left:$offset_for_border;
        width: 0px;
        height: 1px;

        transition-delay: 0.08s;
      }
      > figure:nth-of-type(3){
        top:$offset_for_border;
        left:auto; right:$offset_for_border;
        width: 1px;
        height: 0px;
        transition-delay: 0.12s;

      }
      > figure:nth-of-type(4){
        top: $offset_for_border;
        right:$offset_for_border;
        width: 0px;
        height: 1px;

        transition-delay: 0.15s;
      }
    }
    .the-feature-con:after{

      content: "";

      width: 100%;
      height: 70px;

      position: absolute;
      bottom:0;
      left:0;

      /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0+0,1+100;BG1 */
      background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%); /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,.8) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */

    }





    .the-overlay{
      background-color: rgba(0,0,0,0);


      $transition-property: background;
      $transition-duration: .3s;
      $transition-timing: ease-out;


      @include apply_transition($transition-property,$transition-duration,$transition-timing);
    }
    .item-meta{
      position: absolute;
      width: 100%;
      text-align: center;
      left:50%; top:auto; bottom: 10px;
      transform: translate3d(-50%,0%,0);
      -webkit-transform: translate3d(-50%,0%,0);


      color: #FFFFFF;
      //      color:transparent;
      //      text-shadow: 0 0 25px rgba(255,255,255,0.5);
      opacity:1;



      visibility: visible;

      pointer-events: none;

      $transition-property: all;
      $transition-duration: .3s;
      $transition-timing: ease-out;




      @include apply_transition($transition-property,$transition-duration,$transition-timing);

      .the-title{
        font-size: 16px;
        line-height: 1.4;

        text-transform: uppercase;

        font-weight: bold;

      }

      .the-title:after{

      }

      .the-desc{
        display: none;
      }

    }
  }
  .zfolio-item:hover{



    .zfolio-item--inner{

    }


    .zfolio-item--inner--inner{

      $offset_for_border: $offset_for_border*2;
      > figure:nth-of-type(1){
        height: calc(100% - #{$offset_for_border});

      }
      > figure:nth-of-type(2){
        width: calc(100% - #{$offset_for_border});
      }
      > figure:nth-of-type(3){
        height: calc(100% - #{$offset_for_border});

      }
      > figure:nth-of-type(4){
        width: calc(100% - #{$offset_for_border});
      }
    }


    .the-overlay{

      background-color: rgba(0,0,0,0.7);
    }
    .item-meta{

      color: #FFFFFF;
      text-shadow: 0 0 0px rgba(255,255,255,0.5);
      opacity:1;

      bottom: 20px;
    }

    .the-title:after{

    }
  }

  .zfolio-item.under-300{
    .the-title{

    }
  }



}

/* --- skin-alba END */