
.ajax-posts, .grid {
	.transition(height 0.7s ease);
	-webkit-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
	overflow:hidden; /* Overflow hidden is important to stop jerk on loading */
}
.ajax-post {
	padding:0;
	margin:0; 
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	
	.inner {
		
		[class^="entry-"] {
			margin:0 0 22px 0; /* Starting bottom margin for post formats */
		}
	
		&.intro-left {
			width:auto;
			h3.aga_heading {
				margin-top:0;
				padding-top:0;
			}
			
		}
		&.intro-center {
			.entry-image,
			div[class^="entry-"] {
				margin:0 auto;
			}
		}
		&.intro-right {
			h3.aga_heading {
				margin-top:0;
				padding-top:0;
			}
		}
	
		.intro-image {
			position:relative;
			display:block;
			margin:0 auto;
			-webkit-transform: translateZ(0) scale(1.0001);
			transform: translateZ(0) scale(1.0001);
			overflow:hidden;
			
			
			a {	
				img.post-img {
					.transition(.7s cubic-bezier(0.250,0,0.350,1.100) .1s);
					-webkit-transform: translateZ(0) scale(1);
					transform: translateZ(0) scale(1);
					width:100%;
					/* IMPORTANT HACK: blur changed from pixels to ems 0.01em, to prevent flickering on hover */
					-webkit-filter: blur(0.01em) grayscale(0%);
					filter: blur(0.01em) grayscale(0%);
				}
			}
		}
		
		&.overlay {
			
			.intro-image{
				overflow: hidden;
			
				a {	
					display:block;
					
					&:after {
						content:"";
						top:0;
						left:0;
						right:0;
						bottom: 0;
						text-align: center;
						color: #fff;
						.transition(background .5s ease);
						background:transparent;
						display:block;
						position:absolute;
						width:100%;
						height:100%;
					}
					.caption-content {
						position: absolute;
						font-weight: 500;
						font-size:100%;
						color:#fff;
						padding:0 10%;
						top: 53%;
						//margin:0 auto;
						width: 100%;
						text-align: center;
						.transition(.7s cubic-bezier(0.300,0,0.100,1.100) .1s);
						-webkit-transition-property: -webkit-transform, opacity;
						-moz-transition-property: -moz-transform, opacity;
						transition-property: transform, opacity;
						-ms-transform: translateY(-20%);
						-webkit-transform: translateY(-20%);
						transform: translateY(-20%);
						text-shadow:1px 1px 1px rgba(0,0,0,.2);
						opacity:0;
						z-index:2;
						
						small {
							font-size:12px;
							margin:0 4px;
							display:inline-block;
							>i {
								font-size:125%;
								vertical-align:middle;
								margin:-2px 3px 0;
							}
							&.ratings {
								font-size:11px;
								
							}
							.voting-symbol {
								font-size:10px;
							}
						}
						.caption-category {
							padding:2px 12px;
							display:table;
							width:auto;
							margin:8px auto 0;
							background:rgba(255,255,255,.25);
							border-radius:4px;
							box-shadow:0 1px 1px rgba(0,0,0,.1);
							font-weight: 500;
							font-size:12px;
							color:#fff;
							
							.posted-in {
								opacity:0.65;
							}
							
						}
					}
			
					&:hover{
		
						&:after {
							background:fade(@major_color, 65%);
						}
						.caption-content {
							opacity:1;	
							-ms-transform: translateY(-50%);
							-webkit-transform: translateY(-50%);
							transform: translateY(-50%);
						}
						
					}
				}
			}
		}
	}
}
.loader_footer, .grid_footer, #dc-load-more {
	position:relative;
	clear:both;
	overflow:hidden;
	opacity:1;
	display:block;/* fallback for older browsers, not supporting flexbox */
	.flexbox();
	.flex-align-items();
	.flex-justify-content(center);
	.transition(all .45s ease);	
	margin:15px auto 0;
	width:100%;
	height:44px;
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	
	.load-more-ajax {
		margin:0 auto;
		height:44px;
	}
	
	
	&.done {
		opacity:0;
		visibility:hidden;
		height:0;
		-webkit-transform: rotateX(-90deg);
		transform: rotateX(-90deg);
	}
}

/* Animations */
@-webkit-keyframes simpleFade{
	0% {
		opacity: 0;
	  }
    100%{
        opacity:1;
    }
}
@keyframes simple-fade{
	0% {
		opacity: 0;
	  }
    100%{
        opacity:1;
    }
}
.simple-fade{
    -webkit-animation-name:simple-fade;
    animation-name:simple-fade;
	-webkit-backface-visibility: hidden;
	-webkit-animation-duration:1s;
    animation-duration:1s;
    -webkit-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
}
@-webkit-keyframes fade-in-up{
	0% {
		opacity: 0;
	    -webkit-transform:translate3d(0,50px,0);
        transform:translate3d(0,50px,0);
	  }
    100%{
        opacity:1;
        -webkit-transform:none;
        transform:none;
    }
}
@keyframes fade-in-up{
	0% {
		opacity: 0;
	    -webkit-transform:translate3d(0,50px,0);
        transform:translate3d(0,50px,0);
	  }
    100%{
        opacity:1;
        -webkit-transform:none;
        transform:none;
    }
}
.fade-in-up{
    -webkit-animation-name:fade-in-up;
    animation-name:fade-in-up;
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	-webkit-backface-visibility: hidden;
	-webkit-animation-duration:1s;
    animation-duration:1s;
    -webkit-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
}
@-webkit-keyframes fade-in-down{
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0,-50px,0);
		transform: translate3d(0,-50px,0);
	  }
    100%{
        opacity:1;
        -webkit-transform:none;
        transform:none;
    }
}
@keyframes fade-in-down{
	0% {
		opacity: 0;
	    -webkit-transform:translate3d(0,-50px,0);
        transform:translate3d(0,-50px,0);
	  }
    100%{
        opacity:1;
        -webkit-transform:none;
        transform:none;
    }
}
.fade-in-down{
    -webkit-animation-name:fade-in-down;
    animation-name:fade-in-down;
	-webkit-animation-duration:1s;
    animation-duration:1s;
    -webkit-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
}
@-webkit-keyframes appear-in{
    0%{
        opacity:0;
        -webkit-transform:translate3d(0,-10px,0) scale(0.7) perspective(1200px) rotateX(-60deg);
        transform:translate3d(0,-10px,0) scale(0.7) perspective(1200px) rotateX(-60deg);
    }
	45% {
		opacity: 0.4;
	    -webkit-transform:translate3d(0,20%,0) scale(1.05) perspective(600px) rotateX(-15deg);
        transform:translate3d(0,20%x,0) scale(1.05) perspective(600px) rotateX(-15deg);
	}
	100%{
        opacity:1;
        -webkit-transform:translate3d(0,0,0) scale(1) perspective(1000px) rotateX(0deg);
        transform:translate3d(0,0,0) scale(1) perspective(1000px) rotateX(0deg);
    }
}
@keyframes appear-in{
    0%{
        opacity:0;
        -webkit-transform:translate3d(0,-10px,0) scale(0.7) perspective(1200px) rotateX(-60deg);
        transform:translate3d(0,-10px,0) scale(0.5) perspective(1200px) rotateX(-60deg);
    }
	45% {
		opacity: 0.4;
	    -webkit-transform:translate3d(0,20%,0) scale(1.05) perspective(600px) rotateX(-15deg);
        transform:translate3d(0,20%,0) scale(1.05) perspective(600px) rotateX(-15deg);
	}
	100%{
        opacity:1;
        -webkit-transform:translate3d(0,0,0) scale(1) perspective(1000px) rotateX(0deg);
        transform:translate3d(0,0,0) scale(1) perspective(1000px) rotateX(0deg);
    }
}
.appear-in{
    -webkit-animation-name:appear-in;
    animation-name:appear-in;
	-webkit-backface-visibility: hidden;
	-webkit-transform-origin: 50% 0%;
	transform-origin: 50% 0%;
	-webkit-animation-duration:1.2s;
    animation-duration:1.2s;
    -webkit-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
}

.flippin-effect {
	margin:0 auto;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform-origin: 50% 0%;
	transform-origin: 50% 0%;
	-webkit-animation: flippin .85s cubic-bezier(0.400,0,0.350,1.100) forwards;
	-moz-animation: flippin .85s cubic-bezier(0.400,0,0.350,1.100) forwards;
	-ms-animation: flippin .85s cubic-bezier(0.400,0,0.350,1.100) forwards;
	-o-animation: flippin .85s cubic-bezier(0.400,0,0.350,1.100) forwards;
	animation: flippin .85s cubic-bezier(0.400,0,0.350,1.100) forwards;
}

@-webkit-keyframes flippin {
  from {
    opacity: 0;
	/*height:0;*/
	-webkit-transform: translate3d(0,20%,0) scale(0.9) perspective(1300px) rotateX(-70deg);
	-moz-transform: translate3d(0,20%,0) scale(0.9) perspective(1300px) rotateX(-70deg);
	-ms-transform: translate3d(0,20%,0) scale(0.9) perspective(1300px) rotateX(-70deg);
	-o-transform: translate3d(0,20%,0) scale(0.9) perspective(1300px) rotateX(-70deg);
	transform: translate3d(0,20%,0) scale(0.9) perspective(1300px) rotateX(-70deg);
  }
  to {
    opacity: 1;
	//visibility:visible;
	-webkit-transform: translate3d(0,0,0) scale(1) perspective(1000px) rotateX(0deg);
	-moz-transform: translate3d(0,0,0) scale(1) perspective(1000px) rotateX(0deg);
	-ms-transform: translate3d(0,0,0) scale(1) perspective(1000px) rotateX(0deg);
	-o-transform: translate3d(0,0,0) scale(1) perspective(1000px) rotateX(0deg);
	transform: translate3d(0,0,0) scale(1) perspective(1000px) rotateX(0deg);
	
  }
}

@keyframes flippin {
 from {
    opacity: 0;
	/*height:0;*/
	//visibility:hidden;
	-webkit-transform: translate3d(0,20%,0) scale(0.9) perspective(1300px) rotateX(-70deg);
	-moz-transform: translate3d(0,20%,0) scale(0.9) perspective(1300px) rotateX(-70deg);
	-ms-transform: translate3d(0,20%,0) scale(0.9) perspective(1300px) rotateX(-70deg);
	-o-transform: translate3d(0,20%,0) scale(0.9) perspective(1300px) rotateX(-70deg);
	transform: translate3d(0,20%,0) scale(0.9) perspective(1300px) rotateX(-70deg);

  }
  to {
    opacity: 1;
	//visibility:visible;
	-webkit-transform: translate3d(0,0,0) scale(1) perspective(1000px) rotateX(0deg);
	-moz-transform: translate3d(0,0,0) scale(1) perspective(1000px) rotateX(0deg);
	-ms-transform: translate3d(0,0,0) scale(1) perspective(1000px) rotateX(0deg);
	-o-transform: translate3d(0,0,0) scale(1) perspective(1000px) rotateX(0deg);
	transform: translate3d(0,0,0) scale(1) perspective(1000px) rotateX(0deg);
	
  }
}
// Zoom-In Effect
@-webkit-keyframes intro-zoom-in {
	0%{
		opacity:0;
		-webkit-transform:translateZ(0) scale(0.5);
		transform:translateZ(0) scale(0.5);
	}
	
	100%{
		opacity:1;
		-webkit-transform:translateZ(120px) scale(1);
		transform:translateZ(120px) scale(1);
	}
}

@keyframes intro-zoom-in {
  0%{
		opacity:0;
		-webkit-transform:translateZ(0) scale(0.5);
		transform:translateZ(0) scale(0.5);
	}
	
	100%{
		opacity:1;
		-webkit-transform:translateZ(120px) scale(1);
		transform:translateZ(120px) scale(1);
	}
}
.intro-zoom-in {
    -webkit-animation-name:intro-zoom-in;
    animation-name:intro-zoom-in;
	-webkit-backface-visibility: hidden;
	-webkit-animation-duration:0.8s;
    animation-duration:0.8s;
    -webkit-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
}

/* Ajax Loading */
.loader_footer {

	.load-more-ajax {
		outline:0;
		//color:inherit;
	
		&.focus,
		&:focus,
		&:active,
		&.active {
			-webkit-box-shadow:none!important;
			box-shadow:none!important;
			text-align:center;		
		}
		.btn-text {

		}
		.spinner {
			outline:0;
			//margin:0 0.01em!important;
			text-align:center;
			line-height:13px;
			
			> div {
				width: 14px;
				height: 14px;
				line-height:13px;
				text-align:center;
				margin:0 -2px 0 2px;
				vertical-align:middle;
				border-radius: 100%;
				display:inline-block;
				-webkit-animation: dc-load-more-bouncedelay 1.2s infinite ease-in-out both;
				animation: dc-load-more-bouncedelay 1.2s infinite ease-in-out both;
				
			}
			.bounce1 {
			  -webkit-animation-delay: -0.5s;
			  animation-delay: -0.5s;
			}
			.bounce2 {
			  -webkit-animation-delay: -0.25s;
			  animation-delay: -0.25s;
			}
		}
	}
	
}

@-webkit-keyframes dc-load-more-bouncedelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0.2);
	opacity:0;
  }
  40% {
    -webkit-transform: scale(1);
	opacity:1;
  }
}
@keyframes dc-load-more-bouncedelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0.2);
    transform: scale(0.2);
	opacity:0;
  }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
	opacity:1;
  }
}

@media (max-width: 480px) {
	.ajax-posts .ajax-post .intro-left, .ajax-posts .ajax-post .intro-right  {
		> div  {
			width: 100%!important;
			padding-left:0!important;
			padding-right:0!important;
			.aga_heading {
				margin-top:25px!important;
			}
		}
	}
}

.ajax-posts {
	.tags {
		padding-top:5px;
		margin:7px 0 0 0;
		
		> span > i {
			margin:0 2px;
		}
		
		a.label {
			color:#fff;
			padding:0 6px;
			margin:0 2px 0 0;
			display:inline-table;
			line-height:18px;
		}
	}
}

