html,body,h4{@include font-for-body(400);}

/*
 * Headings
 */	
h1,h2,h3,h4,h5,h6{@include font-for-header(700);color:$primary-color;}
h3{color:$secondary-color;}
h4{color:$secondary-color;}


p strong{color:$secondary-color;}

/*
 * Showcase 
 */
#video-intro,
.image-showcase{
	
	position:relative;height:0;padding-bottom:40%;overflow:hidden;z-index:0;
	
	> div{height:100%;position:absolute;top:0;left:0;right:0;bottom:0;}
	
	.case-foreground{
		
		height:100%;position:relative;position:relative;top:0;width:100%;z-index:100;height:100%;text-align:center;
		
		.grid-x{height:100%;align-items: center;}
		
		h1{color:$white;text-shadow: 1px 1px $black;}
		p{font-size:1.25em;line-height:1.5em;margin-bottom:1.5em;}
		.button{border-color:$white;color:$white;margin:0 0.75rem;text-transform:uppercase;@include font-for-header(400);font-size:1.5rem;}
		.button:hover{background: rgba($white,1);border-color:$white;}
		.case-image{position:absolute;top:0;right:3em !important;}
	}
	
	
	.case-background{
		
		position:absolute;height:100%;top:0;left:0;width:100%;
		img,
		video{ 
			min-height:100%;
			min-width:100%;
			position: absolute;
			left: 0%;
			top: 0%;
			max-width:none;
			transition: all 0.5s
		}
	
	}
	
}


/*
 * Panel with gradient 
 */
.panel-gradient{
	
	@include gradient-background();
	@include font-for-header(700);
	*{color:$white;}
	
	.form{margin-bottom:1.5rem;}
	.form .button{background: $white;color:$primary-color;}
}


/*
 * Text left XL image right 
 */
.xl-image{
	
	
	.grid-x div:nth-child(2){
		//height:500px;
	}
	
	.grid-x div:nth-child(2) > div{
		padding-right:0;
		height:100%;
		width:50%;
		position:absolute;
		right:0;
		top:0;
		overflow:hidden;
		
		// column wrapper
		& > p,
		& > div{
			display:block;margin:0;padding:0;position:absolute;top:0;left:-50%;width:200%;height:100%;z-index:90;margin-left:0.75rem;
		}
		
		
		img{ 
			position: absolute; 
			top: 0; 
			left: 0; 
			right: 0; 
			bottom: 0; 
			margin: auto; 
			min-width: 50%;
			min-height: 100%;
			max-width:none;
			z-index:-1000;
		}
		
		&::after{
			content:"";width:50%;height:100%;background: url(../images/large-e.svg) no-repeat 0 50%;background-size:100% auto; position:absolute;left:-25%;z-index:100;top:0%;bottom:0;
		}
		
	}
	
	
}


/*
 * Grey Callout
 */
.panel-gray{padding-bottom:3em;background-color: rgba($light-gray,0.5);}
.panel-gray{

	h1,h2,h3,h4{color:$black;}
	.button{margin-top:1.5rem !important;}
	
}


/*
 * Grey Callout
 */
.paginate-items{
	
	.overview-item{position:relative;margin-bottom:3em;}
	.overview-item p{margin:0;}
	.overview-item::after{content:"";display:block;position:absolute;bottom:-1.5em;width:100%;border-bottom:solid 1px $light-gray;}
	.overview-item:last-child::after{display:none;}
	.overview-item a{color:$secondary-color;}

	.date-published{font-weight:bold;font-style:italic;}

}




/*
 * Form 
 */
.form{
	
	label{position:relative;}	
	label span{
		padding-top:0.5em;
	}
	label > span:first-child, fieldset legend{display:inline-block;width:25%;text-align:right;padding-right:1.5em;font-weight:bold;float:left;}
	label > span + select,
	label > span + input,
	label > span + textarea{display:inline-block;width:50%;}
	label > span + textarea{height:6em;}

	legend{display:block;text-align:center;width:100%;font-size:0.875rem;}
	.element-options{width:50%;display:inline-block;float:left;padding:0;margin:0 0 1rem 0;}
	.element-options > div{position:relative;}
	.element-options input{float:left;margin:0.25rem 0 0 0;position:absolute;}
	.element-options label{margin:0 0 0 2em !important;position:relative;top:0;left:0;line-height:1.25rem;}
	.button{display:block;margin:auto;}

	label.group{text-align:center; @include font-for-header(900);color:$primary-color;font-size:1.25em;margin-bottom:0.75em;}

	input[disabled]{background:scale-color($white, $lightness: -3%);}
	.form-error{display:none !important;}

	.form-error{position:absolute;top:1.75em;right:0.75em;font-size:0.75em;}
	
	@media screen and #{breakpoint(medium down)}
	{	
		label > span:first-child, 
		fieldset legend{width:40%;}
		
		label > span + select, 
		label > span + input,
		label > span + textarea,
		.element-options{width:60%;}
		
		.element-options label{position:relative;margin-left:0 !important;display:block;}
		.element-options input{float:left;margin-right:0.25em;}
	}
	
}