@mixin show {
	.hvrbox-show {
		opacity: 0;
		transition: opacity .2s ease-out;
		-moz-transition: opacity .2s ease-out;
		-webkit-transition: opacity .2s ease-out;
		-o-transition: opacity .2s ease-out;
	}
}

@mixin hide {
	.hvrbox-hide {
		opacity: 1;
		transition: opacity .2s ease-in;
		-moz-transition: opacity .2s ease-in;
		-webkit-transition: opacity .2s ease-in;
		-o-transition: opacity .2s ease-in;
	}
}

@mixin hvr-show {
	.hvrbox-show {
		opacity: 1;
		transition: opacity .2s ease-out;
		-moz-transition: opacity .2s ease-out;
		-webkit-transition: opacity .2s ease-out;
		-o-transition: opacity .2s ease-out;
	}
}

@mixin hvr-hide {
	.hvrbox-hide {
		opacity: 0;
		transition: opacity .2s ease-out;
		-moz-transition: opacity .2s ease-out;
		-webkit-transition: opacity .2s ease-out;
		-o-transition: opacity .2s ease-out;
	}
}


.has-hover-bg, .has-hover-image, .has-hover-color {
	&[class*=col-], &.bg-box {
		@include show;
		@include hide;
		&:hover {
			@include hvr-show;
			@include hvr-hide;
		}
	}
	&.row {
		> {
			@include show;
			@include hide;
		}
		&:hover {
			> {
				@include hvr-show;
				@include hvr-hide;
			}
		}
	}
	&.boldgrid-section {
		> div {
			> {
				@include show;
				@include hide;
			}
		}

		&:hover {
			> div {
				> {
					@include hvr-show;
					@include hvr-hide;
				}
			}
		}
	}
}

@media screen and ( max-width: 991px ) {
	.has-hover-bg, .has-hover-image, .has-hover-color {
		&[class*=col-], &.bg-box {
			.hvrbox-show {
				opacity: 1 !important;
			}
			.hvrbox-hide {
				opacity: 0 !important;
			}
		}
		&.row {
			> {
				.hvrbox-show {
					opacity: 1 !important;
				}
				.hvrbox-hide {
					opacity: 0 !important;
				}
			}
		}
		&.boldgrid-section {
			> div {
				> {
					.hvrbox-show {
						opacity: 1 !important;
					}
					.hvrbox-hide {
						opacity: 0 !important;
					}
				}
			}
		}
	}
}

@media screen and (min-width: 992px) {
	.has-hover-color:hover {
		background-color: var(--hover-background-color) !important;
		background-image: none !important;
	}
	
	.has-hover-image:hover {
		background-image: var(--hover-background-image) !important;
		background-size: var(--hover-background-size) !important;
		background-repeat: var(--hover-background-repeat) !important;
		background-position: var(--hover-background-position) !important;
	}
}
@media screen and (max-width: 991px) {
	.has-hover-color.hover-mobile-bg {
		background-color: var(--hover-background-color) !important;
		background-image: none !important;
	}
	
	.has-hover-image.hover-mobile-bg {
		background-image: var(--hover-background-image) !important;
		background-size: var(--hover-background-size) !important;
		background-repeat: var(--hover-background-repeat) !important;
		background-position: var(--hover-background-position) !important;
	}
}