@mixin cms-show-overlay(){
	visibility: visible;
	@include opacity(1);
}
.cms-overlay-wrap{
	position: relative;
	overflow: hidden;
	outline: none;
	img{
		@include transition();
	}
	.cms-overlay-content{
		position: absolute;
		top: 0;
		right: 0;
	    left: 0;
	    bottom: 0;
	    z-index: 1;
	    visibility: hidden;
	    @include opacity(0);
	    @include transition();
	}
	&:hover{
		img{
			@include transform(scale(1.1));
		}
		.cms-overlay-content{
			@include cms-show-overlay();
		}
	}
	@media (max-width: $screen-md-max){
		.cms-overlay-content{
			@include cms-show-overlay();
		}
	}
	&.cms-overlay-slideup{
		.cms-overlay-content{
			@include transform(translateY(105%));
		}
		&:hover{
			.cms-overlay-content{
				@include transform(translateY(0));
			}
		}
	}
	&.cms-overlay-slidedown{
		.cms-overlay-content{
			@include transform(translateY(-105%));
		}
		&:hover{
			.cms-overlay-content{
				@include transform(translateY(0));
			}
		}
	}
	&.cms-overlay-slideleft{
		.cms-overlay-content{
			@include transform(translateX(-105%));
		}
		&:hover{
			.cms-overlay-content{
				@include transform(translateX(0));
			}
		}
	}
	&.cms-overlay-slideright{
		.cms-overlay-content{
			@include transform(translateX(105%));
		}
		&:hover{
			.cms-overlay-content{
				@include transform(translateX(0));
			}
		}
	}
	&.cms-overlay-zoom-in{
		.cms-overlay-content{
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			@include transform(scale(1.2));
		}
	}
	&.cms-overlay-zoom-out{
		.cms-overlay-content{
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			@include transform(scale(0));
		}
	}
	&.cms-overlay-center-to-side{
		.cms-overlay-content{
			left: 50%;
			right: 50%;
		}
	}
	&:hover{
		&.cms-overlay-zoom-in,
		&.cms-overlay-zoom-out{
			.cms-overlay-content{
				@include transform(scale(1));
			}
		}
		&.cms-overlay-center-to-side{
			.cms-overlay-content{
				left: 0;
				right: 0;
			}
		}
	}
}
.cms-overlay{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.cms-overlay-readmore{
	.cms-readmore{
		width: 68px;
		height: 68px;
		line-height: 72px;
		display: inline-block;
		text-align: center;
	}
}