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

/*
 * Headings
 */	
h1{@include font-for-header(900);}
h2,h3,h4{@include font-for-header(900);color:$black;}
h3{color:$primary-color;}

h1{margin-bottom:1.5rem;}


.logo-liez{position:relative;background: url(../images/liez-no-payoff.svg) no-repeat 0 25%;color:transparent !important;padding:0 0.75em;margin-right:1rem;}
.logo-liez::after{content:"";height:1.25em;position:absolute;right:-0.375em;top:0;border-right:solid 1px $light-gray}

.button.primary{color:$white;}

/*
 * Blue Callout
 */
.panel-blue{background-color: $primary-color;padding:1.5em 0 0 0;}
.panel-blue{
	h1,h2,h3,h4,p{color:$white;}
	p{margin:0 0 1.5rem 0;}
	
	h3{margin-bottom:0;}
	
	blockquote{text-align:center;font-size:130%;border:none;}
	blockquote small{padding-top:1rem;display:block;}
}


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

	h1,h2,h3,h4{color:$black;}
	form{margin-left:-0.75rem;}
	//.button{margin-top:1.5rem !important;}
	
}
.panel-gray-outer{background-color: $light-gray;overflow:hidden;}


/*
 * Black Callout
 */
.panel-black{background-color: $black;padding:1.5em 0 0 0;}
.panel-black{
	h1,h2,h3,h4{color:$white;}
}




/*
 * Page details
 */
#page-details{
	img{border-radius:0.125rem;}
	
	
	ul li{list-style:none;position:relative}
	ul li::before{content:"•";color:$primary-color;position:absolute;left:-1rem}
}


/*
 * Pre-owned apparatuur
 */
.pre-owned{
	
	padding-top:0;
	.product{border-top:solid 1px $light-gray;margin-bottom:1.5em;padding-top:1.5em;}
	
	.img-wrapper{height:0;padding-bottom:100%;position:relative;border-radius: 50%;overflow:hidden;}
	.product img{
		width: 100%;
		height: auto;
		
		background-color:rgba($light-gray,0.25);
	}
	.product-details{margin-top:1.5em;padding-bottom: 1.5rem;}
	
	.text-wrapper{position:relative;}
	.bedrag-per-maand{position:absolute;top:0;right:0;color:$primary-color;font-weight:bold;}
	
}


/*
 * Form 
 */
.form{
	
	label{position:relative;}	
	label span{
		padding-top:0.5em;
	}
	label > span:first-child,
	fieldset legend{display:inline-block;width:35%;text-align:left;padding-right:1.5em;font-weight:bold;}
	label > span + select,
	label > span + input,
	label > span + textarea{display:inline-block;width:65%;}
	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 0.75rem 0;}
	.element-options > div{position:relative;}
	.element-options input{float:left;margin:0.25rem 0 0 0;}
	.element-options label{margin:0 0 0 2em !important;position:absolute;top:0;left:0;line-height:1.25rem;}
	select{background-position: right 0rem center;}

	label.group{@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;}
	
	.small-12:not(.medium-6){
		
		textarea{width:100%;margin-top:0.5rem;}
		.element-options{width:100%;float:none;}
	}
	
	fieldset label.upload{margin-top:0 !important;margin-bottom:1rem;background-color:$secondary-color !important;padding:0.75rem 1rem;}
	
	@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;}
	}
	
	
}