/*
 * Showcase 
 */
.image-showcase{
	
	position:relative;
	height:620px;
	padding-bottom:0;
	overflow:hidden;
	z-index:10;
	margin-bottom:0;
	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;
		text-align:center;
		
		.cell{position:relative;width:100%;}
		.cell::before{
			content:"";
			position:absolute;
			top:50%;
			left:0;
			height:0%;
			padding-bottom:100%;
			width:100%;
			transform:translateY(-50%);
			
		}
		.column-wrapper{position:relative;height:auto;@include vertical-center(50%);}// @include vertical-center(100%);
		
		h1,h2,h3,h4,h5,p,ul,ol,div,.button{color:$white;}	
		
		h1{font-size:2.5rem;}
		
		.button{border-color:$white;}
		.button:hover{background:$white;color:$black;}
		
	}

	.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;
		}
		
	}
	
	
		
	/* 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%;}
 	}*/
	
	@media screen and #{breakpoint(medium down)}
	{	
		padding:0;height:36em;
		.case-background img{left:-25%;}
		
		.case-foreground::after{content:"";background:rgba($white,0.5);position:absolute;top:0;left:0;right:0;bottom:0;}
		
	}


}


.liez-form{
	
	position:absolute;
	top:0;
	z-index:90;
	width:100%;
	height:700px;
	margin:0;
	padding:4.5rem 0 0 0;
	overflow:hidden;
	
	.grid-container,
	.grid-x{height:100%;}
	
	h1{background: url(../images/dit-is-liez.svg) no-repeat 0 0;text-indent:-5000px;background-size:auto 100%;margin-bottom:1.5rem;}
	h1 + p{font-size:1.125rem;font-weight:400;margin-bottom:2rem;}
	
	
	.input-form{
		
		margin-bottom:$global-margin;
		
		label{position:relative;padding-right:1.5em;}
		input{border:none;box-shadow:none;border-bottom:solid 2px $light-gray;padding:0.75em 0.75em 0.75em 1.5em;height:3rem;}
		input:focus{position:relative;box-shadow:none;border:none;z-index:10;border-bottom:solid 2px $medium-gray;}
		
		span{position:absolute;top:0.55em;left:1.5em;color:$dark-gray;z-index:0;width:100%;font-size:1rem;}
		span::after{content:"";width:2px;position:absolute;display:block;height:50%;left:-0.5em;top:25%;background:$primary-color;}
		
		input:not([value=""]) + span{display:none;}
		input:not([value=""]) + span.eur{display:block;color:transparent;}
		
		input:not([value=""]) + span.eur::before{content:"€";position:absolute;left:-0.75em;color:$medium-gray;}
		input:not([value=""]) + span.eur::after{display:none;}
		
		
		select{  -webkit-appearance: none;-moz-appearance: none;appearance: none;border:none;height:3em;border-bottom:solid 2px $light-gray;padding-left:6em;}
		select + span{width:auto;}
					
		i.fa{position:absolute;z-index:100;top:1em;right:0;color:$black;border:none !important;}
		.error{border-bottom-color:$primary-color;}
		
		.button{background-color:$black;}
		
		@media screen and #{breakpoint(medium down)}
		{
			.button{width:100%;}
		}
	}
	
}