/* #Masonry
================================================== */
.iso-item,
.iso-grid .wf-cell,
.blog.layout-grid .wf-container.description-under-image .wf-cell,
.grid-masonry .wf-cell,
.shortcode-blog-posts .wf-cell,
.blog-shortcode > div:not(.dt-css-grid) .wf-cell,
.portfolio-shortcode .wf-cell {
	opacity: 0;
}

.no-cssanimations .iso-item,
.no-cssanimations .iso-grid .wf-cell,
.no-cssanimations .blog.layout-grid .wf-container.description-under-image .wf-cell,
.no-cssanimations .grid-masonry .wf-cell,
.no-cssanimations .shortcode-blog-posts.iso-grid .wf-cell,
.no-cssanimations #main .jg-container .wf-cell {
	opacity: 1;
}
.iso-grid .wf-cell,
.iso-container .wf-cell {
	.mobile-false & {
		float: left;
	}
}

article {
	.mode-grid &,
	.iso-grid.iso-item-ready & {
		height: 100%;
	}
}
.iso-item {
	width: 100%;
}
.dt-isotope .wf-cell {
	will-change: top, left;
}
.dt-isotope .wf-cell.animate-position
 {
	transition: top 0.65s ease-out, left 0.65s ease-out;
	opacity: 1;
}
.layzr-bg,
.footer .layzr-bg  {
	background-position: center center;
	background-repeat: no-repeat;
}
.layzr-bg {
	&.post-rollover,
	&.rollover-small {
		background-size: auto 30%;
	}
}
	.layzr-loading-on .iso-lazy-load {
		opacity: 0;
		transition: opacity 0.35s ease-out;
		&.is-loaded {
			opacity: 1;
		}
	}

	.layzr-loading-on .iso-layzr-loaded {
		opacity: 1;
	}

/* None Effect: opacity */

.loading-effect-none .wf-cell.shown:not(.isotope-hidden):not(.hidden),
.mobile-true .dt-isotope .wf-cell.shown:not(.isotope-hidden),
.mobile-true .wf-cell.shown:not(.isotope-hidden):not(.hidden) {
	animation: dt_fadeIn 0.4s ease forwards;
}

/* Effect 1: opacity */
.mobile-false .loading-effect-fade-in .wf-cell.start-animation,
.mobile-false .loading-effect-fade-in .wf-cell.shown:not(.isotope-hidden):not(.hidden) {
	animation: dt_fadeIn 0.7s ease forwards;
}
@keyframes dt_fadeIn {
	to { opacity: 1; }
}

/* Effect 2: Move Up */
.mobile-false .loading-effect-move-up .wf-cell.start-animation,
.mobile-false .loading-effect-move-up .wf-cell.shown:not(.isotope-hidden):not(.hidden) {
	transform: translateY(200px);
	animation: dt_moveUp 0.55s ease-in-out forwards;
}
.mobile-false .loading-effect-move-up .wf-cell {

	& .project-list-content {
	    -moz-osx-font-smoothing: grayscale;
	}
}
@keyframes dt_moveUp {
	to {  transform: translateY(0); opacity: 1; }
}
/* Effect 3: Scale up */
.mobile-false .loading-effect-scale-up .wf-cell.start-animation,
.mobile-false .loading-effect-scale-up .wf-cell.shown:not(.isotope-hidden) {
	transform: scale(0.6);
	animation: dt_scaleUp 0.57s ease-in-out forwards;
}

@keyframes dt_scaleUp {
	to { transform: scale(1); opacity: 1; }
}

.mobile-false .loading-effect-fall-perspective,
.mobile-false .loading-effect-flip,
.mobile-false .loading-effect-helix,
.mobile-false .loading-effect-scale {
	-webkit-perspective: 1300px;
	perspective: 1300px;
}
.mobile-false .loading-effect-fall-perspective {
	-webkit-backface-visibility: hidden;
}

.mobile-false .loading-effect-fall-perspective .wf-cell.start-animation,
.mobile-false .loading-effect-fall-perspective .wf-cell.shown:not(.isotope-hidden) {
	-webkit-transform-style: preserve-3d;
	transform: translateZ(400px) translateY(300px) rotateX(-65deg);
	animation: dt_fallPerspective .75s ease-in-out forwards;
}

@keyframes dt_fallPerspective {
	100% { transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; }
}

/* Effect 5: fly (based on http://lab.hakim.se/scroll-effects/ by @hakimel) */

.mobile-false .loading-effect-fly .wf-cell.start-animation,
.mobile-false .loading-effect-fly .wf-cell.shown:not(.isotope-hidden) {
	-webkit-transform-style: preserve-3d;
	transform-origin: 50% 50% -300px;
	transform: rotateX(-180deg);
	animation: dt_fly .7s ease-in-out forwards;
}
.mobile-false .loading-effect-fly .wf-cell {
	&.animation-complete {
		opacity: 1;
	}
}

@keyframes dt_fly {
	100% { transform: rotateX(0deg); opacity: 1; }
}

/* Effect 6: flip (based on http://lab.hakim.se/scroll-effects/ by @hakimel) */

.mobile-false .loading-effect-flip .wf-cell.start-animation,
.mobile-false .loading-effect-flip .wf-cell.shown:not(.isotope-hidden) {
	-webkit-transform-style: preserve-3d;
	transform-origin: 0% 0%;
	transform: rotateX(-80deg);
	animation: dt_flip .7s ease-in-out forwards;
}
@keyframes dt_flip {
	100% { transform: rotateX(0deg); opacity: 1; }
}

/* Effect 7: helix (based on http://lab.hakim.se/scroll-effects/ by @hakimel) */
.mobile-false .loading-effect-helix .wf-cell.start-animation,
.mobile-false .loading-effect-helix .wf-cell.shown:not(.isotope-hidden) {
	-webkit-transform-style: preserve-3d;
	transform: rotateY(-180deg);
	animation: dt_helix .7s ease-in-out forwards;
}


@keyframes dt_helix {
	100% { transform: rotateY(0deg); opacity: 1; }
}

/* Effect 8: Scale */

.mobile-false .loading-effect-scale .wf-cell.start-animation,
.mobile-false .loading-effect-scale .wf-cell.shown:not(.isotope-hidden) {
	-webkit-transform-style: preserve-3d;
	transform: scale(0.4);
	animation: dt_popUp .9s ease-in forwards;
}

@keyframes dt_popUp {
	70% { transform: scale(1.05); opacity: .8; animation-timing-function: ease-in-out; }
	100% { transform: scale(1); opacity: 1; }
}

.dt-isotope.no-transition,
.dt-isotope.no-transition .wf-cell,
.dt-isotope .wf-cell.no-transition {
          transition-duration: 0s;
}

/* #JGrid
================================================== */
#main .jg-container .wf-cell {
	float: left;
	opacity: 0;
	padding: 0;
}
	#main .jg-container .wf-cell .post {
		margin: 0;
		padding: 0;
	}
		.layzr-loading-on .jgrid-lazy-load {
			opacity: 0;
			transition: opacity 0.33s;
		}
		.layzr-loading-on .jgrid-layzr-loaded {
			opacity: 1;
		}

		.jg-container .post .alignleft,
		.jg-container .post .alignnone {
			margin-bottom: 0;
		}

//Css grid layout 
.wf-container.dt-css-grid:before {
	display: none;
}
.dt-css-grid {
	display: -ms-grid;
	display: grid;
	transition: all 0.33s;
	.cssgridlegacy.no-cssgrid &,
	.no-cssgridlegacy.no-cssgrid & {
		display: block;
	}
}
.dt-css-grid {
  	& .wf-cell {
  		display: flex;
  		padding: 0;
  		opacity: 0;
  		& > article,
  		& > div,
  		& > a {
  			width: 100%;
  		}
  		.cssgridlegacy.no-cssgrid &,
	  	.no-cssgridlegacy.no-cssgrid & {
				&:not(.hidden) {
					display: inline-block;
				}
			}
  		.jquery-filter & {
  			
			&:not(.visible):not(.shown){
				display: none;
				opacity: 0;
			}
			&.hidden {
				display: none;
				opacity: 0;
			}
		}
  	}
  	& .no-img .overlay-placeholder img {
  		max-width: 100%;
  	}
}
.cssgridlegacy.no-cssgrid .wc-grid.resize-by-browser-width .dt-css-grid,
.no-cssgridlegacy.no-cssgrid .wc-grid.resize-by-browser-width .dt-css-grid {
	.flex-display(@display: flex);
	.flex-flow( row wrap);
 }
@keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        .flex-display(@display: flex);
        opacity: 0;
    }

    100% {
        .flex-display(@display: flex);
        opacity: 1;
    }
}