/*
 * Showcase 
 */
.image-showcase{
	
	position:relative;
	height:0;
	padding-bottom:35%;
	overflow:hidden;
	z-index:10;
	border:none;
	background:$white;

	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:200;

		
		.cell{position:relative;}
		
		.column-wrapper{position:relative;height:auto;@include vertical-center(40%);}
		
		h1,h2,h3,h4,h5,p,ul,ol,div,.button{}
		
		
		
		.button{border-color:$white;}
		.button:hover{background:$white;color:$black;}
		
		.button.primary{text-shadow:none;}
		
		.advantage-badge{
			
			&::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-color:$white;border-radius:50%;}			
			
			height:0;
			padding-bottom:100%;
			position:absolute;
			top:auto;right:0rem;bottom:-3rem;left:auto;
			text-align:center;
			background: url(../images/badge-blue.svg) no-repeat 50% 50%;

			.wrapper{
				position:relative;
				padding:1rem 2rem 2rem 2rem; 
				
				h3{color:$secondary-color;line-height:2rem;margin-bottom:1rem;}
				p{text-transform:uppercase;@include font-for-header(500);font-size:1.125rem;margin-bottom:1rem;}
				.agenda{color:$white;font-size:0.75rem;position:relative;}
				.agenda span{color:$secondary-color;font-weight:bold;font-size:1.25rem;line-height:0.75rem;vertical-align:middle;}
			}
			
			
		}
		
		.round-button {

			@include vertical-center;

			box-sizing: border-box;
			display:block;
			width:100px;
			height:100px;
			padding-top: 24px;
			padding-left: 8px;
			line-height: 20px;
			border: 6px solid #fff;
			border-radius: 50%;
			color:#f5f5f5;
			text-align:center;
			text-decoration:none;
			background-color: rgba(0,0,0,0.5);
			font-size:20px;
			font-weight:bold;
			transition: all 0.3s ease;
			margin:auto;
		}
		.round-button:hover {
			background-color: rgba(0,0,0,0.8);
			box-shadow: 0px 0px 1.5rem rgba($black,1);
			text-shadow: 0px 0px  1.5rem rgba($black,1);
		}
		
	}
	
	.shades{
		
		position:absolute;top:0;left:0;right:0;bottom:0;z-index:20;
		
		div.mask{
			position:absolute;top:0;left:0;height:100%;width:100%;z-index:200;background:url(../images/mask-bottom-round.svg) no-repeat 65% 101%;background-size: 100% auto;
			&::after{content:"";position:absolute;left:0;bottom:-1px;right:0;height:2px;width:100%;background:$white;z-index:100000;}
			
			@include breakpoint(small only){
					background-position: 100% 100%;
					background-size: 115% auto;
			}
			
		}
		.constantine img{float:right;height:100%;}
		
		div.top-menu{position:absolute;top:0;right:0;bottom:auto;left:auto;width:1000px;height:300px;transform:rotate(20deg) translateX(30px) translateY(-170px);@include linear-gradient();}
	
		
	}
	
	
	.case-background{
		
		position:absolute;
		top: -50%; 
		left: -50%; 
		width: 200%; 
		height: 200%;
		z-index:10;
		
		
		img,
		video{ 
			position: absolute; 
			top: 0; 
			left: 0; 
			right: 0; 
			bottom: 0; 
			margin: auto; 
			min-width: 50%;
			min-height: 50%;
			transition: all 0.5s;
			
		}
		img{animation: zoomImage 40s infinite;}
	
	}
	
	
	
	
	 
 	@include breakpoint(small only) {
		
 		padding:0;height:16em !important;text-align:center;margin-bottom:0;
		
		.case-foreground .cell{width:90%;margin:0 5%;padding:0 0.75rem;}
		.case-foreground .column-wrapper{top:50%;}
		
		.case-foreground .date{
			width:50%;margin:0;
			
			.wrapper{
				padding:0.5rem 1rem 1rem 1rem;  
			}
		}
		.case-foreground .trailer{
			width:40%;margin:0;			
			a{
				transform:scale(0.6);
				top:25%;
			}
		}
		
		
		.case-foreground .advantage-badge{
			bottom:-1.5rem;

		}

 	}


}