@mixin apply_transition($transition-property, $transition-duration, $transition-timing) {

  transition-property: $transition-property;
  transition-duration: $transition-duration;
  transition-timing-function: $transition-timing;
}

@mixin boxsizing() {
  box-sizing: border-box;
}

@mixin animation_delay($transition-delay) {
  transition-delay: $transition-delay;
}

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

div[class^="feed-zfolio-"] {
  display: none;
}

.zfolio {

  position: relative;
  width: 100%;


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

  *{

    @include boxsizing();
  }

  &.dzszfl-ready{
    opacity: 1;
  }
  > .items {


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

    opacity: 0;

    min-height: 120px;
    @include apply_transition($transition-property, $transition-duration, $transition-timing);
  }

  &.dzszfl-ready{
    > .items{

    opacity: 1;
    }
  }

  figure {
    margin: 0;
  }

  &.set-height-when-final {
    > .items {
      height: 200px !important;
    }
  }

  .grid-sizer {
    display: none;
  }


  .item-meta {
    font-size: 13px;
  }

  > .items:after {
    content: "";
    display: block;
    clear: both;
  }

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

  .zfolio-item {
    position: relative;


    > .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;
  }

  &.wait-until-item-loaded-then-visible:not(.skin-custom) {
    .zfolio-item {

      .zfolio-item--inner {

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


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

      &.loaded {
        .zfolio-item--inner {
          opacity: 1;
        }
      }
    }
  }

  &.items-depend-on-thumb-height {
    .zfolio-item {
      .zfolio-item--inner .the-feature-con {
        height: auto !important;;

        .the-feature {
          position: relative;
          height: 200px;
        }
      }
    }
  }
}


@import "css-inc/view-states";

@import "css-inc/skins/skin-qcre";
@import "css-inc/skins/skin-silver";

@import "css-inc/mode-scroller";

@import "css-inc/skins/skin-alba";

@import "item_skin_blog";
@import "forwall";


@import "overlay";
/* --- skin-overlay END */


/* -- just selector con
*/




@import "css-inc/skins/skin-melbourne";


@import "css-inc/skins/skin-woo";


$color_highlight: #ac8b5a;


$color_highlight: #b8bac1;


$color_highlight: #b8bac1;


@import "css-inc/skins/skin-gazelia";


$color_highlight: #e74c3c;


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




@import "css-inc/preloader";
@import "css-inc/layout";




@import "css-inc/excerpt-content";

.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;
}


@import "css-inc/selector-con";
.flex-select-search {
  display: flex;
  align-items: center;

  > .search-con {
    flex: 0 0 auto;
  }

}


.input-field-zfolio {
  background-color: #ffffff;
  color: #444;

  font-size: 12px;

  border-radius: 5px;
  border: 0;

  padding: 10px;

  line-height: 1;

  outline: 0;
}