@mixin apply_transition($transition-property, $transition-duration, $transition-timing) {
  -moz-transition-property:$transition-property;-moz-transition-duration: $transition-duration;-moz-transition-timing-function:$transition-timing;-webkit-transition-property:$transition-property;-webkit-transition-duration: $transition-duration;-webkit-transition-timing-function:$transition-timing;-o-transition-property:$transition-property;-o-transition-duration: $transition-duration;-o-transition-timing-function:$transition-timing;-ms-transition-property:$transition-property;
  -ms-transition-duration: $transition-duration;-ms-transition-timing-function:$transition-timing; transition-property: $transition-property;transition-duration: $transition-duration;transition-timing-function: $transition-timing;
}
@mixin boxsizing() {
  box-sizing:border-box;
  -moz-box-sizing:border-box; /* Firefox */
  -webkit-box-sizing:border-box; /* Safari */
}
@mixin animation_delay($transition-delay) {
  transition-delay: $transition-delay;
  -moz-transition-delay: $transition-delay;
  -webkit-transition-delay: $transition-delay;
  -o-transition-delay: $transition-delay;
}

$transition-property: height;
$transition-duration: 0.3s;
$transition-timing: ease-out;


.zfolio{

  position: relative;
  width: 100%;

  .grid-sizer{
    display: none;
  }

  > .items{


    $transition-property: height;
    $transition-duration: .1s;
    $transition-timing: ease-out;

    opacity:0;

    min-height: 120px;
    @include apply_transition($transition-property,$transition-duration,$transition-timing);
  }
  > .items:after{
    content: "";
    display: block;
    clear:both;
  }

  a.the-feature-con{
    display: block;
  }

  .zfolio-item{
    position: relative;

    margin-bottom: 30px;

    >.overlay-anchor-extra-html{
      display: none;
    }
    >.cover-image{
      display: none;
    }

    .zoombox > .overlay-anchor-extra-html{
      display: none;
    }
    .zoombox > .cover-image{
      display: none;
    }

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

      .the-feature-con {
        position: relative;
        height: 10px;

        $transition-property: height;
        $transition-duration: .10s;
        $transition-timing: ease-out;


        @include apply_transition($transition-property,$transition-duration,$transition-timing);
        .the-feature {

          position: absolute;
          top:0; left:0;
          width: 100%;
          height: 100%;

          background-size: cover;
          background-position: center center;


          background-repeat: no-repeat;
        }

        img.the-feature{
          position: relative;
          width: 100%;
          height: auto;
          display: block;
        }

        .the-overlay{
          position: absolute;
          top:0; left:0;
          width: 100%;
          height: 100%;
        }
      }
      .the-feature-con.auto-height{
        height: auto;
      }
    }


    a.zfolio-item--inner{
      text-decoration: none;
    }


    .content-opener{
      cursor: pointer;
    }

    .the-content{ display: none;
    }

  }



  .toexecute{
    display: none;
  }

}

.zfolio.dzszfl-ready{

  .items{
//    opacity: 1;
  }
  .zfolio-preloader-1-con {


    opacity: 0;
    visibility: hidden;
  }


}

.zfolio.add-loaded-on-images-animation{
  .zfolio-item{
    .the-feature{
      opacity:0;
    }
  }
  .zfolio-item.image-loaded{
    .the-feature{
      opacity:1;
    }
  }
}
.zfolio.dzszfl-ready-for-transitions{

  .the-feature-con {

    $transition-property: height;
    $transition-duration: .15s;
    $transition-timing: ease-out;

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



  $transition-property: height;
  $transition-duration: .5s;
  $transition-timing: ease-out;

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

$color_highlight: #e74c3c;
.zfolio.skin-qcre{

  .zfolio-item{


    .zfolio-item--inner{

      overflow: hidden;

    }

    .the-overlay{

      box-shadow: inset 0px 0px 0px 0px $color_highlight;


      $transition-property: all;
      $transition-duration: .3s;
      $transition-timing: ease-out;
      @include apply_transition($transition-property,$transition-duration,$transition-timing);

    }

    .the-feature{



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

      transform: scale(1);
      -webkit-transform: scale(1);
      @include apply_transition($transition-property,$transition-duration,$transition-timing);
    }


    .item-meta{
      position: absolute;

      text-align: center;

      width: 100%;

      padding:23px;
      line-height: 1;

      opacity: 0;
      visibility: hidden;


      $transition-property: top,bottom,opacity,visibility;
      $transition-duration: .5s;
      $transition-timing: ease-out;

      bottom: -50%;
      background-color: $color_highlight;

      pointer-events: none;

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

      .the-title{
        font-size: 14px;
        font-weight: 700;

        margin-bottom: 14px;

      }

      .the-desc{
        font-size: 12px;
        font-style: italic;
        font-weight: 700;
      }
    }
  }
  .zfolio-item:before{

    content: "";
    position: absolute;
    top: 100%;
    left:50%;
    width: 0;
    height: 0;
    border-left: 12px inset rgba(255, 255, 255, 0);
    border-right: 12px inset rgba(255, 255, 255, 0);

    border-top: 10px solid $color_highlight;
    border-bottom:0;

    margin-left: - 6px;

    visibility: hidden;
    opacity:0;


    $transition-property: visibility, opacity;
    $transition-duration: .5s;
    $transition-timing: ease-out;


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

  }

  .zfolio-item.active{

    .the-overlay{
      box-shadow:         inset 0px 0px 0px 5px $color_highlight;
    }
    .item-meta{
      top:auto!important;
      bottom:-50%!important;;
      opacity: 1;
      visibility: visible;
    }

  }
  .zfolio-item.active:before{


      visibility: visible;
      opacity: 1;


  }

  .zfolio-item:hover{

    .item-meta{
      top:auto;
      bottom:0;
      opacity: 1;
      visibility: visible;
    }

    .the-feature{
      transform: scale(1.2);
      -webkit-transform: scale(1.2);
    }
    .the-overlay{
      box-shadow:         inset 0px 0px 0px 5px $color_highlight;
    }
  }


}


/* --- skin-silver BEGIN */
.zfolio.skin-silver{
  .zfolio-item{

    .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:50%;
      transform: translate3d(-50%,-50%,0);
      -webkit-transform: translate3d(-50%,-50%,0);


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


      filter: blur(10px);
      -webkit-filter: blur(10px);

      visibility: hidden;

      pointer-events: none;

      $transition-property: all;
      $transition-duration: .5s;
      $transition-timing: ease-in;




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

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

      }

      .the-title:after{

        content:"";

        width:30px;
        height:2px;
        display: block;
        background-color: #FFFFFF;
        margin: 11px auto 17px;


        $transition-property: all;
        $transition-duration: .5s;
        $transition-timing: ease-in;



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

      .the-desc{
        font-size: 14px;
        font-weight: bold;
        font-style: italic;
      }
    }
  }
  .zfolio-item:hover{
    .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;


      filter: blur(0px);
      -webkit-filter: blur(0px);
      visibility: visible;
    }

    .the-title:after{

    }
  }

  .zfolio-item.under-300{
    .the-title{
      font-size:22px;

    }
  }



}

/* --- skin-silver END */


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

    .zfolio-item--inner{

      >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{

      $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 */






/* -- just selector con
*/
.zfolio.skin-silver,.zfolio.skin-melbourne,.zfolio.skin-gazelia,.zfolio.skin-qcre,.zfolio.skin-lazarus,.zfolio.skin-alba,.zfolio.skin-forwall{
  .selector-con{
    .categories{
      margin-top:20px;
      margin-bottom: 20px;
    }
    .a-category:first-child{
      margin-left: 20px;
    }
    .a-category{
      font-size: 14px;
      font-weight: bold;
      display: inline-block;
      margin-left: 0px;
      cursor: pointer;
      text-transform: uppercase;
      padding:9px;
      line-height: 1;
      position: relative;
      color: #FFFFFF;;
    }
    .a-category.active,.a-category:hover{
      background-color: #e74c3c;
    }
    .a-category.active:before,.a-category:hover:before{
      content: "";


      width: 0;
      height: 0;
      $size: 7px;
      border-left: $size solid transparent;
      border-right: $size solid transparent;

      border-top: $size solid #e74c3c;

      position: absolute;
      top:100%;
      left:50%;
      margin-left: -7px;

    }
  }
}

.zfolio.skin-silver,.zfolio.skin-melbourne{

}

.selector-con-for-skin-melbourne{
  .categories{
    margin-top:20px;
    margin-bottom: 20px;
  }
  .a-category:first-child{
    margin-left: 20px;
  }
  .a-category{
    font-size: 14px;
    font-weight: bold;
    display: inline-block;
    margin-left: 0px;
    cursor: pointer;
    text-transform: uppercase;
    padding:9px;
    line-height: 1;
    position: relative;
    color: #FFFFFF;;
  }
  .a-category.active,.a-category:hover{
    background-color: #e74c3c;
  }
  .a-category.active:before,.a-category:hover:before{
    content: "";


    width: 0;
    height: 0;
    $size: 7px;
    border-left: $size solid transparent;
    border-right: $size solid transparent;

    border-top: $size solid #e74c3c;

    position: absolute;
    top:100%;
    left:50%;
    margin-left: -7px;

  }
}

$color_highlight:#e74c3c;
.zfolio.skin-melbourne{
  .zfolio-item{
    .item-meta{
      position: relative;
      background-color: #FFFFFF;
      color: #212121;
      text-transform: uppercase;
      text-align: center;

      font-family: "Lato", "Open Sans", arial;

      padding: 25px 10px;


      $transition-property: color,background;
      $transition-duration: .25s;
      $transition-timing: ease-in;



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

      .the-title{
        font-size: 20px;
        font-weight: 900;
        line-height: 1.4;
        margin-top:5px;
      }

      .the-title:after{

        content:"";

        width:30px;
        height:2px;
        display: block;
        background-color: #aaaaaa;
        margin: 11px auto 11px;


        $transition-property: background;
        $transition-duration: .25s;
        $transition-timing: ease-in;



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

      .the-desc{

        font-family: "Open Sans", arial;

        font-size: 14px;

        font-style: italic;
        font-weight: bold;
        color: #777777;


        $transition-property: color;
        $transition-duration: .25s;
        $transition-timing: ease-in;



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

    .item-meta:before{
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;

      border-bottom: 10px solid #FFFFFF;

      content:"";
      position: absolute;
      bottom: 100%;
      left:50%;
      margin-left: -10px;




      $transition-property: all;
      $transition-duration: .25s;
      $transition-timing: ease-in;



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

    }


  }

  .zfolio-item:hover{

    .item-meta{
      background-color: $color_highlight;
      color: #FFFFFF;
      .the-title:after{

        background-color: #FFFFFF;
      }
      .the-desc{

        color:#FFFFFF;
      }
    }
    .item-meta:before{
      border-bottom-color: $color_highlight;
    }


  }
}
.zfolio.skin-melbourne.layout-4-cols-15-margin:not(.under-720),.zfolio.skin-melbourne.layout-5-cols-15-margin:not(.under-720){
  .zfolio-item{
    .the-title{
      font-size: 14px; font-weight: bold;
      margin-left: -10px;
      margin-right: -10px;

    }
    .item-meta{
      .the-desc{
        font-size: 13px;
      }
    }
  }
}
.zfolio.skin-melbourne.layout-5-cols-15-margin:not(.under-720){
  .zfolio-item{
    .the-title{
      font-size: 12px; font-weight: bold;

      margin-left: -10px;
      margin-right: -10px;
    }

    .item-meta{
      .the-desc{
        font-size: 11px;
      }
    }
  }
}
.selector-con-for-skin-forwall{
  .categories{
    margin-top:20px;
    margin-bottom: 20px;
  }
  .a-category:first-child{
    margin-left: 20px;
  }
  .a-category{
    font-size: 14px;
    font-weight: bold;
    display: inline-block;
    margin-left: 0px;
    cursor: pointer;
    text-transform: uppercase;
    padding:9px;
    line-height: 1;
    position: relative;
    color: #FFFFFF;;
  }
  .a-category.active,.a-category:hover{
    background-color: #e74c3c;
  }
  .a-category.active:before,.a-category:hover:before{
    content: "";


    width: 0;
    height: 0;
    $size: 7px;
    border-left: $size solid transparent;
    border-right: $size solid transparent;

    border-top: $size solid #e74c3c;

    position: absolute;
    top:100%;
    left:50%;
    margin-left: -7px;

  }
}

$color_highlight: #b8bac1;
.zfolio.skin-forwall{
  .zfolio-item{

    .the-feature-con{
      overflow: hidden;


      .the-feature{
      $transition-property: all;
      $transition-duration: .25s;
      $transition-timing: ease-in;


      @include apply_transition($transition-property,$transition-duration,$transition-timing);
      }
    }
    .item-meta{
      position: relative;
      background-color: #efefef;
      color: #212121;
      text-align: left;

      font-family: "Lato", "Open Sans", arial;

      padding: 17px 25px 20px;


      $transition-property: color,background;
      $transition-duration: .25s;
      $transition-timing: ease-in;



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

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

        margin-bottom: 10px;
      }


      .the-desc{

        font-family: "Open Sans", arial;

        font-size: 13px;

        font-style: italic;
        color: #777777;


        $transition-property: color;
        $transition-duration: .25s;
        $transition-timing: ease-in;

        line-height: 1.6;



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

    .item-meta:before{


    }


    .item-meta-secondary{
      background-color: #dfdfdf;
      padding: 17px 25px 12px;

      color: #555555;

      font-size:12px;

      .s-item-meta{

        margin-bottom: 5px;
        .strong{
          color: #222222;
          font-weight: bold;
        }
      }
    }

  }

  .zfolio-item:hover{

    .the-feature{
      transform: scale(1.1);
    }


  }
}
.zfolio.skin-forwall.layout-4-cols-15-margin:not(.under-720),.zfolio.skin-forwall.layout-5-cols-15-margin:not(.under-720){
  .zfolio-item{
    .the-title{
      font-size: 14px; font-weight: bold;
      margin-left: -10px;
      margin-right: -10px;

    }
    .item-meta{
      .the-desc{
        font-size: 13px;
      }
    }
  }
}
.zfolio.skin-forwall.layout-5-cols-15-margin:not(.under-720){
  .zfolio-item{
    .the-title{
      font-size: 12px; font-weight: bold;

      margin-left: -10px;
      margin-right: -10px;
    }

    .item-meta{
      .the-desc{
        font-size: 11px;
      }
    }
  }
}

$color_highlight:#e74c3c;
.zfolio.skin-gazelia{
  .zfolio-item{
    margin-bottom: 10px;


    .zfolio-item--inner{
      overflow: hidden;

      .the-overlay{
        background-color: rgba(0,0,0,0);
        $transition-property: background;
        $transition-duration: .25s;
        $transition-timing: ease-out;
        @include apply_transition($transition-property,$transition-duration,$transition-timing);

        position: absolute;

        .the-overlay-anchor{
          position: absolute;
          top: -28px;
          left:50%;
          transform: translate3d(-50%,-50%,0);
          -webkit-transform: translate3d(-50%,-50%,0);
          width: 56px;
          height: 56px;

          background-color: #FFFFFF;
          border-radius: 50%;



          $transition-property: top;
          $transition-duration: .25s;
          $transition-timing: ease-out;



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


        }
        .the-overlay-anchor:after{
          content: "\f067";
          font-family: "FontAwesome",arial, serif;

          color: #212121;

          position: absolute;
          top:50%;
          left:50%;
          transform: translate3d(-50%,-50%,0);
          -webkit-transform: translate3d(-50%,-50%,0);

          font-size: 21px;

        }
      }
    }
    .item-meta{
      position: absolute;
      width: 100%;
      top: calc(100% + 10px);
      background-color: #FFFFFF;
      color: #212121;
      text-transform: uppercase;
      text-align: center;

      font-family: "Lato", "Open Sans", arial;

      padding: 15px 10px;


      $transition-property: top;
      $transition-duration: .25s;
      $transition-timing: ease-out;



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

      .the-title{
        font-size: 14px;
        font-weight: bold;
        font-family: "Lato", arial;
      }

      .the-desc{

        font-family: "Open Sans", arial;

        font-size: 14px;

        font-style: italic;
        font-weight: bold;
        color: #777777;


        $transition-property: color;
        $transition-duration: .25s;
        $transition-timing: ease-in;



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

    .item-meta:before{
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;

      border-bottom: 10px solid #FFFFFF;

      content:"";
      position: absolute;
      bottom: 100%;
      left:50%;
      margin-left: -10px;




      $transition-property: all;
      $transition-duration: .25s;
      $transition-timing: ease-in;



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

    }


  }

  .zfolio-item:hover{

    .zfolio-item--inner {
      overflow: hidden;

      .the-overlay {

        .the-overlay-anchor {
          top: 50%;
        }
      }
    }
    .item-meta{
      color:#111111;
      bottom: auto;
      top: calc(100% - 55px);
      .the-desc{

        color:#111111;
      }
    }
    .the-overlay{
      background-color: rgba(0,0,0,.5);
    }
    .item-meta:before{
    }


  }
}


.zfolio.skin-gazelia.skin-gazelia--transparent{
  .zfolio-item{


    a.zfolio-item--inner{
      display: block;
    }
    .zfolio-item--inner{
      overflow: hidden;

      .the-overlay{

        .the-overlay-anchor{
          background-color: transparent;
          border: 2px solid #EEEEEE;

        }
        .the-overlay-anchor:after{
          content: "\f002";
          color: #ffffff;
          font-size: 18px;

        }
      }
    }

    .item-meta{
      background-color: transparent;

      color: #ffffff;
      font-weight: bold;
      font-size: 14px;

    }
    .item-meta:before{
      display: none;
    }
  }
}








/* -- START skin-lazarus */
$color_highlight:#e74c3c;
.zfolio.skin-lazarus{
  .zfolio-item{
    margin-bottom: 10px;



    a.zfolio-item--inner{
      display: block;
    }


    .zfolio-item--inner{
      overflow: hidden;

      .the-overlay{


        opacity:0;
        $transition-property: opacity;
        $transition-duration: .25s;
        $transition-timing: ease-out;
        @include apply_transition($transition-property,$transition-duration,$transition-timing);

        position: absolute;
        height: 55%;
        top: auto;
        bottom:0;


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





      }
    }
    .item-meta{
      position: absolute;
      width: 100%;

      top:auto;
      bottom: -65px;
      background-color: transparent;
      color: #ffffff;
      text-transform: uppercase;
      text-align: center;

      font-family: "Lato", "Open Sans", arial;

      padding: 15px 10px;


      $transition-property: bottom;
      $transition-duration: .25s;
      $transition-timing: ease-out;



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

      .the-title{
        font-size: 14px;
        font-weight: bold;
        font-family: "Lato", arial;
        color: #ffffff;
      }

      .the-desc{

        font-family: "Open Sans", arial;

        font-size: 12px;

        font-style: italic;
        font-weight: bold;
        color: #ffffff;
        text-transform: none;


        $transition-property: color;
        $transition-duration: .25s;
        $transition-timing: ease-in;



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

    .item-meta:before{

    }


  }

  .zfolio-item:hover{

    .zfolio-item--inner {
      overflow: hidden;

      .the-overlay {

        opacity: 1;
      }
    }
    .item-meta{
      bottom: 0;

      .the-desc{

      }
    }
    .item-meta:before{
    }


  }
}
/* -- end skin-lazarus */


hr.small-white{
  width:30px;
  height:2px;
  display: block;
  background-color: #FFFFFF;
  margin: 20px auto;
}


.zfolio-preloader-1{
  width:15px;
  height:15px;
  background:rgba(230,230,230,0.9);
  border-radius:25px;


  position:absolute;
  top:50%;
  left:50%;




  /*z-index: 5555;*/

  margin-left: -7px;
  margin-top: -7px;

  animation: zfolio-preloader-1-tween 1.4s infinite linear;
  -webkit-animation: zfolio-preloader-1-tween 1.4s infinite linear;
}
.zfolio-preloader-1-con{

  content:'';
  position:absolute;
  top:50%;
  left:50%;

  width:60px;
  height:60px;

  margin-left:-30px;
  margin-top: -30px;

  background-color: rgba(10,10,10,0.3);

  border-radius: 50%;


  opacity:1;
  visibility: visible;

  $transition-property: opacity,visibility;
  $transition-duration: 0.3s;
  $transition-timing: ease-out;

  @include apply_transition($transition-property,$transition-duration,$transition-timing);
}
.zfolio-preloader-1-con:before{
  content:'';
//  position:absolute;
//
//
//  width: 100%;
//  height: 100%;

}


.zfolio-preloader-1:after{
  position:absolute;
  width:25px;
  height:25px;
  border-top:5px solid rgba(200,200,200,0.5);
  border-bottom:5px solid rgba(200,200,200,0.5);
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-radius:25px;
  content:'';
  top:-10px;
  left:-10px;
  box-sizing: content-box!important;
}
@-webkit-keyframes zfolio-preloader-1-tween {
  0% {transform: rotate(0deg);-webkit-transform: rotate(0deg);}
  50% {transform: rotate(180deg);-webkit-transform: rotate(180deg);}
  100% {transform: rotate(360deg);-webkit-transform: rotate(360deg);}
}
@keyframes zfolio-preloader-1-tween {
  0% {transform: rotate(0deg);-webkit-transform: rotate(0deg);}
  50% {transform: rotate(180deg);-webkit-transform: rotate(180deg);}
  100% {transform: rotate(360deg);-webkit-transform: rotate(360deg);}
}


.zfolio.layout-2-cols-15-margin,.zfolio.layout-2-cols-10-margin{
//  width: calc(100% + 30px);
  position: relative;

  > .items{
    margin-left: -15px;
    margin-right: -15px;
  }
//  left: -15px;
  .zfolio-item{
    width: 50%;
    padding-left: 15px;
    padding-right: 15px;
  }
}

.zfolio.mode-cols.layout-2-cols-15-margin,.zfolio.mode-cols.layout-2-cols-10-margin{
  .dzs-col{
    float:left;
    width: 50%;
    padding-left: 15px;
    padding-right: 15px;

    .zfolio-item{
      width: 100%;
      padding-left: 0px;
      padding-right: 0px;
    }

  }
}





.zfolio.layout-3-cols-15-margin,.zfolio.layout-3-cols-10-margin{
//  width: calc(100% + 30px);
  position: relative;

  > .items{
    margin-left: -15px;
    margin-right: -15px;
  }
//  left: -15px;
  .zfolio-item{
    width: 33%;
    padding-left: 15px;
    padding-right: 15px;
  }
}

.zfolio.mode-cols.layout-3-cols-15-margin,.zfolio.mode-cols.layout-3-cols-10-margin{
  .dzs-col{
    float:left;
    width: 33.33%;
    padding-left: 15px;
    padding-right: 15px;

    .zfolio-item{
      width: 100%;
      padding-left: 0px;
      padding-right: 0px;
    }

  }
}


.zfolio.layout-4-cols-15-margin{
//  width: calc(100% + 30px);
  position: relative;

  > .items{
    margin-left: -15px;
    margin-right: -15px;
  }
//  left: -15px;
  .zfolio-item{
    width: 25%;
    padding-left: 15px;
    padding-right: 15px;
  }
}

.zfolio.mode-cols.layout-4-cols-15-margin,.zfolio.mode-cols.layout-4-cols-10-margin{
  .dzs-col{
    float:left;
    width: 25%;
    padding-left: 15px;
    padding-right: 15px;

    .zfolio-item{
      width: 100%;
      padding-left: 0px;
      padding-right: 0px;
    }

  }
}





.zfolio.layout-2-cols-10-margin,.zfolio.layout-3-cols-10-margin,.zfolio.layout-4-cols-10-margin{
  //  width: calc(100% + 30px);
  > .items{
    margin-left: -5px;
    margin-right: -5px;
  }
  //  left: -15px;
  .zfolio-item{
    padding-left: 5px;
    padding-right: 5px;
  }
}



.zfolio.mode-cols.layout-2-cols-10-margin,.zfolio.mode-cols.layout-3-cols-10-margin,.zfolio.mode-cols.layout-4-cols-10-margin{
  .items{
    margin-right: -0px;
  }
  .dzs-col{
    padding-left: 5px;
    padding-right: 5px;

    .zfolio-item{
    }

  }
}


.zfolio.mode-cols.layout-5-cols-10-margin{
  .items{
    margin-left: -5px;
    margin-right: -5px;
  }
  .dzs-col{
    float:left;
    width: 20%;
    padding-left: 5px;
    padding-right: 5px;

    .zfolio-item{
      width: 100%;
      padding-left: 0px;
      padding-right: 0px;
    }

  }
}



.zfolio.under-1000.layout-5-cols-10-margin{

  div.zfolio-item{
    width: 33.33%;
  }
}


.zfolio.under-1000.layout-4-cols-15-margin,.zfolio.under-1000.layout-4-cols-10-margin{
  .dzs-col{
    width: 33.33%;
  }
}

.zfolio.under-1000.mode-cols.layout-5-cols-10-margin{
  .dzs-col{
    width: 33.333%;
  }
}



.selector-con-for-skin-melbourne.under-720{
  z-index: 30;


}
.selector-con-for-skin-forwall.under-720{
  z-index: 30;


}

.zfolio.under-720.layout-2-cols-15-margin{

  div.zfolio-item{
    width: 100%;
  }
}
.zfolio.under-720.layout-3-cols-15-margin,.zfolio.under-720.layout-4-cols-15-margin{

  div.zfolio-item{
    width: 50%;
  }
}
.zfolio.under-720.layout-2-cols-15-margin,.zfolio.under-720.layout-2-cols-10-margin{
  .dzs-col{
    width: 100%;
  }
}
.zfolio.under-720.layout-3-cols-15-margin,.zfolio.under-720.layout-3-cols-10-margin,.zfolio.under-720.layout-4-cols-10-margin,.zfolio.under-720.layout-4-cols-15-margin{
  .dzs-col{
    width: 50%;
  }
}


.zfolio.under-520.layout-4-cols-15-margin,.zfolio.under-520.layout-4-cols-10-margin{
  .dzs-col{
    width: 100%;
  }
}

.zfolio.under-720.zfolio-portfolio-fullscreen.layout-2-cols-15-margin{

  div.zfolio-item{
    width: 50%;
  }
}


.zfolio.mode-cols.under-720.layout-2-cols-10-margin{

}

.zfolio.under-720, .selector-con-for-skin-melbourne.under-720 {
  .categories {
    height: 72px;
    padding-top: 64px;
  }
}
.zfolio.under-720 .selector-con, .selector-con-for-skin-melbourne.under-720{
    text-align: center;

    .a-category{
      position: relative;
      display: block;
      background-color: #222222;

      color: rgba(255,255,255,0.7);



      $transition-property: color, opacity, visibilty;
      $transition-duration: 0.3s;
      $transition-timing: ease-out;
      @include apply_transition($transition-property, $transition-duration, $transition-timing);
    }
    .a-category:hover{
      background-color: #222222;
      color: rgba(255,255,255,1);
    }
    //.a-category:first-child:not(.active){
    //  padding-top:34px;
    //}

    .a-category:not(.active) {
      margin-top:50px;
      padding-top:30px;
      padding-bottom: 30px;
      margin-left:0;

      opacity: 0;
      visibility: hidden;
    }
    .a-category:not(.active):before{
      display: none;
    }
    .a-category:not(.active) ~ .a-category {
      margin-top:0px;
      padding-top: 0px;
      padding-bottom: 30px;
    }



    div.a-category.active{
      position: absolute;

      top:20px;
      left:50%;
      transform: translate(-50%, 0);
      -webkit-transform: translate(-50%, 0);
      margin-left: 0;
      margin-top:0;

      padding-top: 9px!important;
      padding-bottom: 9px!important;;
      background-color: $color_highlight!important;
      color: #FFFFFF!important;
    }
  }
.zfolio.under-720 .selector-con.is-opened, .selector-con-for-skin-melbourne.under-720.is-opened{

    .a-category:not(.active) {
      opacity: 1;
      visibility: visible;
    }
  }



.selector-con-for-skin-melbourne.under-720{

  padding-left:0;
  padding-right:0;
  .categories{
    padding-top:0.1px;
    height: 51px;
    div.a-category.active{

      top:-1px;
    }


    .a-category{

      transition-property: color, opacity, visibility!important;


    }
  }

}

.zfolio.mode-cols.layout-5-cols-10-margin.under-720{
  .dzs-col{
    float:left;
    width: 50%;
    padding-left: 5px;
    padding-right: 5px;


  }
}


.zfolio.under-520.layout-2-cols-15-margin,.zfolio.under-520.layout-3-cols-15-margin,.zfolio.under-520.layout-4-cols-15-margin,.zfolio.under-520.layout-5-cols-15-margin{

  div.zfolio-item{
    width: 100%;
  }
}
.zfolio.layout-5-cols-15-margin{
//  width: calc(100% + 30px);
  overflow: hidden;
  position: relative;

  > .items{
    margin-left: -15px;
    margin-right: -15px;
    //width: calc(100% + 30px);
  }
//  left: -15px;
  .grid-sizer,.zfolio-item{
    width: 20%;
    padding-left: 15px;
    padding-right: 15px;
  }

  .zfolio-item.layout-wide,.zfolio-item.layout-big{
    width: 40%;
  }
}



.zfolio.layout-5-cols-10-margin{
  overflow: hidden;
  position: relative;
  .items{
    margin-left: -5px;
    margin-right: -5px;
    //width: calc(100% + 10px);
  }
  .grid-sizer,.zfolio-item{
    width: 20%;
    padding-left: 5px;
    padding-right: 5px;

    .zfolio-item.layout-wide,.zfolio-item.layout-big{
      width: 40%;
    }
  }
}


.zfolio[data-margin="0"]{
//  width: calc(100% + 30px);
  position: relative;

  > .items{
    margin-left: 0px;
    margin-right: 0px;
  }
  .grid-sizer,.zfolio-item{
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    margin-bottom: 0px;
  }
}
.zfolio[data-margin="1"]{
//  width: calc(100% + 30px);
  position: relative;

  > .items{
    margin-left: -1px;
    margin-right: -1px;
  }
  .grid-sizer,.zfolio-item{
    padding-left: 1px;
    padding-right: 0px;
    padding-bottom: 1px;
    margin-bottom: 0px;
  }
}
.zfolio[data-margin="10"]{
//  width: calc(100% + 30px);
  position: relative;

  > .items{
    margin-left: -10px;
    margin-right: -10px;
  }
  .grid-sizer,.zfolio-item{
    padding-left: 10px;
    padding-right: 0px;
    padding-bottom: 10px;
    margin-bottom: 0px;
  }
}

.zfolio {
  .dzs-colcontainer{
    margin-left: -15px;
    margin-right: -15px;
    @include boxsizing();
  }
  .dzs-colcontainer:after{
    display: block; content: ""; clear: both;
  }
  *[class*="dzs-col-"] {
    float: left;
    padding-left:15px;
    padding-right:15px;
  }
  .dzs-col-4{
    width: 33.3%;
    padding-left:15px;
    padding-right:15px;
  }
  .dzs-col-8{
    width: 66.6%;
    padding-left:15px;
    padding-right:15px;
  }
  .dzs-col-6{
    width: 50%;

    padding-left:15px;
    padding-right:15px;
  }
  .dzs-col-12{
    width: 100%;

    padding-left:15px;
    padding-right:15px;
  }
}

.zfolio.under-480 {
  .dzs-col-4,.dzs-col-8,.dzs-col-6{
    width: 100%;
    padding-left:15px;
    padding-right:15px;
    margin-top: 10px;
  }
}




$transition-property: all;
$transition-duration: 0.3s;
$transition-timing: ease-out;
$color_bg: #ebebeb;
$color_text: #8a8a8a;
$padding: 40px;
.excerpt-content-con{
  width:100%;

  opacity:0;
  visibility: hidden;
  margin-bottom: 30px;


  $transition-property: opacity,visibility;
  $transition-duration: 0.3s;
  $transition-timing: ease-out;
  @include apply_transition($transition-property, $transition-duration, $transition-timing);
}

.zfolio[data-margin="1"]{
  .excerpt-content-con{
    margin-bottom: 1px;
  }

  .items > .excerpt-content-con .excerpt-content{
    margin-left:1px;
    width: 100%;
  }

  .zfolio-item:before{
    display: none;
  }

  .excerpt-content{
    > .dzs-colcontainer{
      > .dzs-col-8{
        width: calc(66.6% + 11px);
      }
      > .dzs-col-4{
        width: calc(33.3% - 11px);
      }
    }
  }



}

.excerpt-content {

  width: 100%;
  height: auto;
  color: $color_text;
  background-color: $color_bg;

  padding: $padding;
  $transition-property: all;
  $transition-duration: 0.3s;
  $transition-timing: ease-out;
  @include apply_transition($transition-property, $transition-duration, $transition-timing);

  .advancedscroller .thumbsCon{

    $transition-property: height;
    $transition-duration: 0s;
    $transition-timing: ease-out;
    @include apply_transition($transition-property, $transition-duration, $transition-timing);
  }

  p{
    margin-bottom: 20px;
  }
  h4{
    margin-bottom: 20px;
  }
  .simple-hr-with-mb-20{
    height: 1px;
    width: 100%;
    background-color: rgba(200,200,200,0.20);
    margin-bottom: 20px;
  }
  a{
    color: #00a99d;
  }

  .meta-prop-label{
    font-weight: 800;
    margin-right: 15px;
  }


  .close-btn{
    font-size: 20px;
    font-weight: 500;
    font-family: "Raleway", Helvetica, Arial , sans-serif;

    position: absolute;
    top:$padding/2;
    right: ($padding/2);

    cursor: pointer;
  }
}

.excerpt-content-con.transition-zoom{

  .excerpt-content{

    -webkit-transform: translate3d(0, 0, 0) scale(0);
    transform: translate3d(0, 0, 0) scale(0);
  }


  .excerpt-content.placed{

    transform: translate3d(0, 0, 0) scale(1);
    -webkit-transform: translate3d(0, 0, 0) scale(1);
  }


}
.excerpt-content-con.transition-wipe {

  opacity: 0!important;
  visibility: hidden!important;;
  display: block;

  iframe{
    opacity: 0;
  }

  .excerpt-content{
    height: 0;
    overflow: hidden!important;


    $transition-property: none;
    $transition-duration: 0s;
    $transition-timing: ease-out;
    @include apply_transition($transition-property, $transition-duration, $transition-timing);
  }

}
.excerpt-content-con.transition-wipe[data-sort]{
  display: block;
}

.excerpt-content-con.placed.transition-wipe[data-sort]{
  opacity: 1!important;;
  visibility: visible!important;;


  iframe{
    opacity: 1;
  }
}

.excerpt-content:after{
  display: block;
  clear: both;
  content: "";
}

.excerpt-content:before{

  content: "";
  position: absolute;
  top: auto; bottom:100%;
  left:0;
  width: 0;
  height: 0;
  border-left: 12px inset rgba(255, 255, 255, 0);
  border-right: 12px inset rgba(255, 255, 255, 0);

  border-bottom: 10px solid $color_bg;
  border-top:0;
}



.excerpt-content.skin-qcre{
  padding:0;

  background-color: #FFFFFF;
  .close-btn{
    display: none;
  }

  h4{
    font-size: 20px;
    font-weight: 900;
    margin-top: 30px;
    margin-bottom: 15px;
    padding-bottom: 0;
    color: #212121;
    line-height: 1;
    text-transform: uppercase;
  }

  .subtitle{
    font-style: italic;
    font-size: 14px;
    color: #e64c3b;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: left;
  }

  p{
    line-height: 1.5;
  }
}
.excerpt-content:before{

  display: none;
}


.lazyloading-transition-fade{
  opacity: 0;



  $transition-property: opacity;
  $transition-duration: 0.5s;
  $transition-timing: ease-out;
  @include apply_transition($transition-property, $transition-duration, $transition-timing);
}

.lazyloading-transition-fade.loaded{
  opacity: 1;
}



.zfolio.mode-isotope.dzszfl-ready-for-transitions img.lazyloading-transition-fade{

  //transition-delay: .9s;
}