/*
 * Showcase 
 */
.image-showcase{
	
	position:relative;
	height:0;
	padding-bottom:40%;
	overflow:hidden;
	z-index:10;
	top:-1.5rem;
	margin-bottom:0rem;
	border-bottom:solid 1px $light-gray;

	div{height:100%;position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;}
	
	.grid-x{position:relative;}
	
	.case-foreground{
		
		height:100%;
		position:relative;
		top:0;
		width:100%;
		z-index:50;
		
		.cell{position:relative;width:50%;}
		.column-wrapper{position:relative;height:auto;@include vertical-center(40%);}// @include vertical-center(100%);
		
		h1{color:$black;}	
		ul{margin-bottom:3rem;}
		.button{color:$white;margin:0;}
		.button + strong{margin-left:1.5rem;line-height:1.5rem;}
		.button + strong span{font-size:1.5rem;padding-left:0.25rem;}
		
	}

	.case-background{
		
		position:absolute;
		top: -50%; 
		left: -50%; 
		width: 200%; 
		height: 200%;
		z-index:0;
		
		img,
		video{ 
			position: absolute; 
			top: 0; 
			left: 0; 
			right: 0; 
			bottom: 0; 
			margin: auto; 
			min-width: 50%;
			min-height: 50%;
			transition: all 0.5s;
			z-index:100;
		}
		
	}
	
	
	/* Arrows */
	.slick-arrow{z-index:100;width:2.5rem;height:2.5rem;position: absolute;top: 50%;transform: translateY(-50%);font-size: 0;line-height: 0;cursor:pointer;}
	.slick-arrow:hover::before{color:$primary-color;}
	.slick-prev{left:1.5rem;}
	.slick-next{right:1.5rem;}
	
	.slick-arrow::before{height:100%;font-size:3rem;color:$white;font-family: "Font Awesome 5 Pro";content: "\f007";position:absolute;top:1rem; text-shadow: 1px 1px 1px #000;}
	.slick-prev::before{content: "\f053";left:0;}
	.slick-next::before{content: "\f054";right:0;}
	
	/* heights */
	&[data-height="auto"]{margin-bottom:1.5rem;}
	&[data-height="auto"] div{height:auto;position:relative;}
	&[data-height="auto"] img{min-width:100%;}
	
	
	 
 	@include breakpoint(medium down) {
		
 		padding:0;height:30em !important;text-align:center;
		
		.case-foreground .cell{width:100%;padding:0 0.75rem;}
 		.showcase-case::before{width:100%;}
		
		.case-background img{max-width:none;left:-25%;}
 	}


}