@CHARSET "UTF-8";

.hover_overlay {
	font-weight: 300;
	position: relative;
	display: block;			/* block stops misbehaviour of the <a> tag, if used as a clickable overlay */
}
.hover_overlay > img {
	display: block;
	object-fit:cover;
}

@media not all and (any-hover) {

	.hover_overlay {
		font-size: 16px;
	}
	.hover_overlay > .overlay {   
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100%;
		width: 100%;
		opacity: 1;
		display: flex;
		align-items: flex-start;
		justify-content: center;
	}
	.hover_overlay.round > .overlay {	
	  	display: none;
	}
	.hover_overlay > .overlay > div {	
	
		border-style: none;
		border-width: 1px;
		border-color: white;
		color: white;
		
		padding-top:10px;
		padding-bottom:10px;
		padding-left:20px;
		padding-right:20px;
		width: 100%;
		   
		text-align: center;
		background:rgba(0, 0, 0, 0.6);
	}
}

@media (any-hover) {

	.hover_overlay {
		font-size: 18px;
	}
	.hover_overlay > .overlay {
		position: absolute;
		overflow: hidden;
		
		background:rgba(0, 0, 0, 0.6);
		transition: .5s ease;		
	}	
	
	.hover_overlay.fade > .overlay {
		top: 0;
		left: 0;
		opacity: 0;	
		width: 100%;
		height: 100%;
	} 
	.hover_overlay.slide_right > .overlay {
		top: 0;
		left: 0;
		width: 0;
		height: 100%;
	} 
	.hover_overlay.slide_left > .overlay {
		top: 0;
		right: 0;
		width: 0;
		height: 100%;
	}
	.hover_overlay.slide_down > .overlay {
		top: 0;
		left: 0;
		height: 0;
		width: 100%;
	} 
	.hover_overlay.slide_up > .overlay {
		bottom: 0;
		left: 0;
		height: 0;
		width: 100%;
	}
	
	.hover_overlay > .overlay > div {	
		position: absolute;
		overflow: hidden;
		top: 50%;
		left: 50%;
		margin-right: -50%;
		transform: translate(-50%, -50%);
		 	
		color: white;
	    font-size: 1em;
	    text-align: center;
	    padding-left: 20px;
	    padding-right: 20px;
	}
	
	.hover_overlay.round > .overlay {	
	  	border-radius : 50% !important;
	}
	
	.hover_overlay.fade:hover > .overlay {
		opacity: 1;	
	}
	.hover_overlay.slide_right:hover > .overlay {
		width: 100%;	
	}
	.hover_overlay.slide_left:hover > .overlay {
		width: 100%;	
	}
	.hover_overlay.slide_up:hover > .overlay {
		height: 100%;	
	}
	.hover_overlay.slide_down:hover > .overlay {
		height: 100%;	
	}
	
}