/* Imports
---------------------------------------- */
@import "framework.less";
@import url("../cookies/_cookie-notice.less");

/* Extend grid
---------------------------------------- */
.grid			{ .relative; width: 100%; max-width: 1080px;
	.col-left	{ padding: 0 40px 0 10px; float: left; }
	.col-right	{ padding: 0 10px 0 0; float: right; }
	.col-full	{ .fl; padding: 0 10px; }
}
.sprite			{ background-image: url("../images/sprite.png"); background-position: 0 0; background-repeat: no-repeat; background-color: transparent; }

/* General
---------------------------------------- */
html		{ }
body		{ .helvetica; line-height: 22px; font-size: 13px; color: @grey; -webkit-text-size-adjust: none; /* -webkit-font-smoothing: antialiased !important;  */ }
input		{ .helvetica; line-height: 22px; font-size: 13px; color: @grey; border-radius: 0; }
textarea,
button		{ .helvetica; line-height: 22px; font-size: 13px; color: @grey; -webkit-appearance: none; border-radius: 0; }

	/* Base colors
	------------------------------------ */
	@white:		#ffffff;
	@black:		#000000;
	@grey:		#444444;
	@red:		#f5291f;

	/* Theme colors
	------------------------------------ */
	@blue:		#043e85;
	@softblue:	#519fff;
	@darkblue:	#021e40;
	@yellow:	#ffcd47;

	/* Buttons
	------------------------------------ */
	.button			{ .transition(background 0.1s); .fl; display: inline-block; padding: 4px 10px; background: @softblue; color: @white; font-size: 14px; color: @white; text-decoration: none; font-weight: bold; -webkit-font-smoothing: antialiased !important; cursor: pointer; border: none; margin: 0;
		&:hover		{ background: lighten(@softblue,5%); }
		&.grey		{ background: tint(@grey,30%); }
		&.yellow	{ background: @yellow;
			&:hover	{ background: lighten(@yellow,10%); }
		}
	}

	/* Headings
	------------------------------------ */
	.heading			{ font-size: 18px; -webkit-font-smoothing: antialiased !important; color: @darkblue;
		&.underlined	{ border-bottom: 1px solid shade(@white,10%); padding-bottom: 10px; margin-bottom: 10px; }
	}
	.page-heading		{ .heading; font-size: 28px; line-height: 36px; margin: 0 0 20px 0; }

	/* Columns
	------------------------------------ */
	.columns	{ margin: 0;
		> div	{ padding: 0 10px; }
	}

/* Page header
---------------------------------------- */
#page-header	{ background: #f2f5f9; padding: 22px 0;
	.logo		{ padding-left: 10px;
		img		{ .block; max-width: 100%; height: auto; }
	}
	.main-nav						{
		ul							{ margin: 10px -20px 0 20px;
			li						{ .block; .fl; font-size: 14px; color: #021e40; padding: 0 20px; font-weight: bold; -webkit-font-smoothing: antialiased !important;
				a					{ .block; color: #021e40; text-decoration: none;
					&:hover			{ color: @yellow; }
				}
				&.current-menu-item	{
					a				{ color: @yellow; border-bottom: 2px solid @yellow; padding: 0 0 2px 0; }
				}
			}
		}
	}
	.social-media				{ padding-right: 10px;
		ul						{ .fr; margin: 4px 0;
			li					{ .block; .fl; margin: 0 0 0 1px;
				a				{ .block; .sprite; .transition(background 0.1s); height: 34px; width: 34px; text-decoration: none; text-indent: -9999px;
					&.twitter	{ background-color: #4099FF; background-position: 0 0;
						&:hover	{ background-color: lighten(#4099FF,10%); }
					}
					&.facebook	{ background-color: #3B5998; background-position: -34px 0;
						&:hover	{ background-color: lighten(#3B5998,10%); }
					}
				}
			}
		}
	}
}

/* Trigger
---------------------------------------- */
.trigger									{ .none; .absolute; width: 30px; right: 10px; top: 1px; z-index: 1001; .transition(all .5s ease);
	div										{ height: 3px; background: #021e40; margin: 4px auto; backface-visibility: hidden; .transition(all .4s ease); }
	span									{ .fl; .relative; font-size: 24px; text-transform: uppercase; margin-top: 1px; right: 48px; color: #fff; }
	&.go									{
		.one 								{ opacity: .6; .transform(translate(0px,-3px)); }
		.two 								{ opacity: .6; /* .transform(rotate(180deg)); */ }
		.three 								{ opacity: .6; .transform(translate(0px,3px)); }
	}
}

/* Page footer
---------------------------------------- */
#page-footer	{ padding: 40px 0 20px; background: shade(@white,4%); font-size: 12px;
	.heading	{ font-size: 14px; font-weight: bold; margin: 0 0 10px 0;
		a		{ text-decoration: none; color: @grey; }
	}
	.nav						{ padding: 0 10px;
		ul						{
			li					{
				a				{ .transition(all 0.1s ease-in-out); color: tint(@grey,10%); text-decoration: none; line-height: 26px;
					&:before	{ .block; .fl; height: 0; width: 0; border: 4px solid transparent; border-left: 4px solid tint(@grey,50%); content: ''; margin: 8px 3px 0 0; }
					&:hover		{ color: @grey; text-decoration: underline; }
				}
			}
		}
	}
	.logos							{ margin-top : 20px;
		li							{ margin-right: 20px; }
	}
	.wysiwyg						{
		p							{ padding: 0;
			&:first-of-type			{ font-size: 13px; }
		}
	}
	.copyright					{ border-top: 1px solid shade(@white,10%); margin-top: 20px; padding-top: 20px; padding-left: 10px; font-size: 11px; color: tint(@grey,50%); -webkit-font-smoothing: antialiased !important;
		.footer-nav				{
			ul					{ .block; .fl; margin: 0 10px;
				li				{ .block; .fl; margin: 0 10px;
					a			{ color: tint(@grey,50%); text-decoration: none;
						&:hover	{ text-decoration: underline; color: tint(@grey,20%); }
					}
				}
			}
		}
	}
	.credits					{color: tint(@grey,50%);text-decoration:none;
		&:hover					{text-decoration: underline; color: tint(@grey,20%);}
	}
}

/* Page content
---------------------------------------- */
#page-content	{ padding: 60px 0;

	/* Breadcrumbs
	------------------------------------ */
	.breadcrumbs			{ .relative; top: -40px; margin: 0 -10px; padding: 0 10px; font-size: 12px;
		&:after				{ .cb; content: ""; display: table; }
		li					{ .block; .fl; margin: 0 0 0 8px;
			a				{ color: tint(@grey,10%); text-decoration: none;
				&:after		{ .block; .fr; height: 0; width: 0; border: 4px solid transparent; border-left: 4px solid @blue; content: ''; margin: 7px 0 0 10px; }
				&:hover		{ text-decoration: underline; color: @grey; }
			}
			strong			{ color: @blue; }
		}
	}

	/* USP's
	------------------------------------ */
	.usps					{
		ul					{ margin: 10px 0 20px 40px; border-top: 2px solid @softblue; padding: 15px 0 0 0;
			li				{ .block; .relative; padding: 5px 0 5px 20px; color: tint(@grey,10%);
				&:before	{ .block; .absolute; left: 0; top: 5px; content: '✓'; color: @softblue; font-size: 18px; }
			}
		}
	}

	/* Page image
	------------------------------------ */
	.page-image				{ .block; max-width: 100%; height: auto; margin-bottom: 20px; }

	/* Contactform
	------------------------------------ */
	.contactform			{ margin: 10px 0 20px 40px; background: tint(@blue,95%); padding: 20px;
		.heading			{ padding: 0 0 10px 0; }
		.textarea			{ height: 100px; }
		.callme-number		{ .none; }
		.button				{ .block; .border-radius(0); -webkit-appearance: none; width: 100%; margin: 10px 0 0 0; }
	}

}

/* Front page
------------------------------------ */
body.home	{

	/* Banner
	-------------------------------- */
	.banner					{ .relative; overflow: hidden;
		.grid				{ padding: 0 10px; }
		.caption			{ .relative; z-index: 100; padding: 10% 0 20% 0;
			h1				{ font-size: 36px; color: @blue; line-height: 36px; }
			p				{ font-size: 18px; color: tint(@grey,25%); line-height: 26px; padding: 20px 0; }
			a				{ .button; .block; margin: 20px 10px 0 0; }
		}
		.background			{ position: absolute; bottom: 0; left: 0; right: 0; top: 0; width: 100%; z-index: -1;
			img				{ .block; width: 100%; min-width: 1260px !important; height: auto; }
		}
		.video-wrapper		{ .absolute; top: 0; left: 0; right: 0; width: 100%; overflow: hidden;
			.video			{ .block; margin: 0; padding: 0; min-width: 125%; width: auto; height: auto; z-index: 0; margin-top: -5%;  }
			.overlay-video	{ .opacity(0.9); position: absolute; top: 0; right: 0; bottom: 0; height: 100%; width: 100%; z-index: 1; z-index: 2;
							background: rgba(255,255,255,0.9);
							background: -moz-linear-gradient(left,  rgba(255,255,255,0.95) 20%, rgba(167,206,254,0.85) 100%);
							background: -webkit-gradient(linear, left top, right top, color-stop(20%,rgba(255,255,255,0.95)), color-stop(100%,rgba(167,206,254,0.85)));
							background: -webkit-linear-gradient(left,  rgba(255,255,255,0.95) 20%,rgba(167,206,254,0.85) 100%);
							background: -o-linear-gradient(left,  rgba(255,255,255,0.95) 20%,rgba(167,206,254,0.85) 100%);
							background: -ms-linear-gradient(left,  rgba(255,255,255,0.95) 20%,rgba(167,206,254,0.85) 100%);
							background: linear-gradient(to right,  rgba(255,255,255,0.95) 20%,rgba(167,206,254,0.85) 100%);
							filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2ffffff',endColorstr='#d9a7cefe',GradientType=1 ); /* IE6-9 */
			}
		}
	}

	/* Widgets
	-------------------------------- */
	.widget	{

		/* Sub menu
		---------------------------- */
		&.sub-menu 				{ background: none;
			ul					{
				li				{
					a			{ background: none; padding: 5px 0;
						&:hover	{ text-decoration: none; background: none; }
					}
				}
			}
		}

		/* Headings
		---------------------------- */
		.heading			{ padding: 0; margin: 0;
			&.underlined	{ padding: 0 0 10px 0; }
		}

		/* Post list
		---------------------------- */
		&.post-list		{ background: none;
			.article	{ padding: 10px 0; }
		}

	}

}

/* WYSIWYG
------------------------------------ */
.wysiwyg						{
	p							{ color: tint(@grey,10%); padding: 10px 0;
		a						{ color: @blue; }
	}
	h1							{
		&:before				{ color: red;  content: "Don't use H1 tag"; background: red; color: @white; padding: 2px 6px; font-size: 14px; margin: 0 20px 0 0; }
	}
	h2, h3, h4, h5, h6			{ .heading; padding: 30px 0 10px 0; font-size: 22px; line-height: 26px; }
	h3							{ font-size: 19px; }
	h4							{ font-size: 17px; }
	h5							{ font-size: 15px; }
	h6							{ font-size: 13px; }
	ul							{ padding: 10px 0;
		li						{ .relative; color: tint(@grey,10%); padding: 0 0 0 10px; line-height: 33px;
			a					{ .block; color: @blue; text-decoration: none; font-size: 13px; font-weight: bold;
				&:hover			{ color: @softblue; text-decoration: underline; }
			}
			&:before			{ .block; .absolute; height: 0; width: 0; border: 4px solid transparent; border-left: 4px solid @grey; content: ''; left: 0; top: 12px; }

		}
	}
	.phone-number				{ color: @softblue; font-weight: bold; font-size: 18px; text-decoration: none; }
	blockquote 			    	{ .relative; font-family: Georgia, serif; font-size: 16px; font-style: italic; margin: 10px 0; padding: 16px 0 0 46px; line-height: 1.45; color: @softblue; }
	blockquote:before 	    	{ .block; position: absolute; content: "\201C"; font-size: 80px; left: 0; top: -1px; color: @softblue; }
	blockquote cite 	    	{ color: tint(@grey,10%); font-size: 14px; display: block; }
	blockquote cite:before 		{ content: "\2014 \2009"; }
}

/* Widgets
------------------------------------ */
.widget	{ margin-bottom: 40px; background: tint(@blue,95%); padding: 20px 0;

	/* Headings
	------------------------------------ */
	.heading			{ padding: 0 20px; margin: 0;
		&.underlined	{ padding: 0 20px 10px 20px; }
	}

	/* Why
	------------------------------------ */
	&.why			{ background: @blue url("../images/blue-bg-img.jpg") 0 0 no-repeat; padding: 20px; color: @white;
		.heading	{ color: @white; margin: 0 0 10px 0; padding: 0; }
		.button		{ margin: 20px 0 0 0; }
		p			{ .opacity(0.98); font-size: 14px; -webkit-font-smoothing: antialiased !important; }
	}

	/* Wysiwyg
	------------------------------------ */
	&.wysiwyg-block			{ padding: 20px !important;
		.wysiwyg			{
			h1, h2			{ padding: 0; margin: 0;  padding: 0 0 10px 0;}
		}
	}

	/* Sub menu
	------------------------------------ */
	&.sub-menu				{
		.wysiwyg			{ }
		ul					{ padding: 0;
			li				{ .block; border-bottom: 1px solid tint(@blue,86%); padding: 0; line-height: 23px;
				a			{ .block; background: tint(@blue,95%); margin: 0; padding: 5px 0 5px 20px;
					&:hover	{ text-decoration: none; background: tint(@blue,92%); }
				}
				&.current	{
					a		{ text-decoration: none; background: tint(@blue,92%); border-left: 2px solid @softblue;}
				}
				&:before	{ .none; }
			}
		}
	}

	/* Post list
	------------------------------------ */
	&.post-list				{
		ul					{
			.article		{ padding: 10px 20px; }
		}
	}

}


/* Post list
------------------------------------ */
.post-list				{
	.article			{ padding: 10px 0; border-bottom: 1px solid shade(@white,10%);
		.title			{ font-size: 14px; font-weight: bold; text-decoration: none;
			a			{ text-decoration: none; color: @blue;
				&:hover	{ color: @softblue; text-decoration: underline; }
			}
		}
		.date			{ color: tint(@grey,50%); -webkit-font-smoothing: antialiased !important; }
		.excerpt		{ color: tint(@grey,10%); }
		&:last-child	{ border: none; }
	}

}

/* Form elements
------------------------------------ */
.form				{ margin: 20px 0 10px 0;
	&:after			{ .cb; content: ""; display: table; }
	label			{ .block; margin-top: 10px; }
	.text-input		{ .block; border: 1px solid shade(@white,10%); width: 100%; padding: 4px 10px; color: tint(@grey,60%);
		&:focus		{ color: tint(@grey,10%); }
	}
	.textarea		{ border: 1px solid shade(@white,10%); width: 100%; height: 240px; resize: vertical; padding: 10px; color: tint(@grey,60%);
		&:focus		{ color: tint(@grey,10%); }
	}
	.wpcf7-checkbox	{ .block; padding: 10px 0 0 0; }
}


/* Nieuws Search form
------------------------------------ */
.box                      { border: 1px solid #575757; background-color: #e6e6e6; padding: 20px; margin-bottom: 20px;
  p                       { text-align: left; margin-bottom: 0.5em; }
  form                    { overflow: hidden;
    input                 { float: left; padding: 4px 10px; border: 0;}
    input[type="submit"]  { display: inline-block; background-color: #043e85; color: #fff; font-weight: bold; font-size: 14px; margin-left: 5px; }
  }
}


/* WPCF7 styles
------------------------------------ */
.screen-reader-response		{ .none; }
.wpcf7-form-control-wrap	{ .block; .relative; }
.wpcf7-not-valid-tip		{ .fl; .inlineblock; .relative; width: 100%; /* background: @red; */ color: @red; font-weight: bold; font-size: 11px; padding: 3px 0;
	&:before				{ .absolute; .georgia; content: "!"; top: -50px; right: 6px; background: @red; color: @white; font-weight: bold; font-size: 17px; padding: 3px 11px; .border-radius(100%); }
}
.wpcf7-not-valid			{ border: 1px solid @red !important; }
.wpcf7-response-output		{ .block; width: 100%; padding: 4px 10px;}
.wpcf7-validation-errors	{ .relative; border: 2px solid @yellow;
	&:before				{ .absolute; .georgia; content: "!"; top: -17px; right: 6px; background: @yellow; color: @white; font-weight: bold; font-size: 17px; padding: 3px 11px; .border-radius(100%); }

}
.wpcf7-mail-sent-ok			{ border: 2px solid @softblue; display:none !important; }

/* WP img align
------------------------------------ */
img.alignnone 		{ .block; max-width: 100%; height: auto; margin: 0 0 10px 0; }
img.aligncenter		{ .inlineblock; text-align: center; margin: 0 auto 10px auto; }
img.alignright 		{ .fr; .inlineblock; margin: 0 0 10px 20px; }
img.alignleft 		{ .fr; .inlineblock; margin: 0 20px 10px 0; }

/* < 1024
---------------------------------------- */
@media only screen and (max-width: 1024px) 	{

}

/* < 768
---------------------------------------- */
@media only screen and (max-width: 768px) 	{

	/* Page header
	---------------------------------------- */
	#page-header						{
		.main-nav						{
			ul							{
				li						{
					a					{
						&:hover			{  }
					}
					&.current-menu-item	{
						a				{ }
					}
				}
			}
		}
		.social-media					{
			ul							{
				li						{
					a					{
						&.twitter		{
							&:hover		{  }
						}
						&.facebook		{
							&:hover		{  }
						}
					}
				}
			}
		}
	}


}

@media only screen and (min-width: 769px) and (max-width: 800px) 	{

	/* Page header
	---------------------------------------- */
	#page-header						{
		.main-nav						{
			ul							{
				li						{ padding: 0 15px; }
			}
		}
	}

}

@media only screen and (min-width: 641px) and (max-width: 768px) 	{

	/* Home
	---------------------------------------- */
	.home								{
		.banner							{
			.background 				{
				img						{ .absolute; right: -80px; min-width: 870px !important; z-index: 0; }
				&:before				{ .absolute; .gradient; content: ""; width: 100%; height: 326px; top: 0; left: 0; right: 0; border: 0; z-index: 1; }
			}
		}
	}

	/* Page header
	---------------------------------------- */
	#page-header						{
		.main-nav						{
			ul							{
				li						{ padding: 0 10px; }
			}
		}
	}

}

/* < 640
---------------------------------------- */
@media only screen and (max-width: 640px)	{


	/* Grid
	---------------------------------------- */
	.grid 								{
		.col-left						{ width: 100%; padding: 15px 10px 0; border-top: 1px solid shade(@white,10%); }
		.col-right						{ width: 100%; padding: 0 10px; }
		.col-full						{ padding: 15px 10px 0; border-top: 1px solid shade(@white,10%); }
	}

	/* Home
	---------------------------------------- */
	.home								{
		.banner							{ padding: 40px 0;
			.caption 					{
				h1						{ font-size: 20px; line-height: 30px; }
			}
			.background 				{
				img						{ .absolute; right: -50px; min-width: 640px !important; z-index: 0; }
				&:before				{ .absolute; .gradient; content: ""; width: 100%; height: 240px; top: 0; left: 0; right: 0; border: 0; z-index: 1; }
			}
		}
	}
	.columns							{
		.col-1-3						{ width: 100%; margin: 0 0 20px; }
	}

	/* Page header
	---------------------------------------- */
	#page-header						{ padding: 20px 0 0;
		.main-nav						{ width: 100%; margin: 20px 0 0; max-height: 0; overflow: hidden; .transition(all .4s ease-in-out);
			ul							{ margin: 0;
				li						{ .fl; width: 100%; padding: 0;
					a					{ width: 100%; padding: 10px; border-bottom: 1px solid #0D4C99;
						&:hover			{  }
					}
					&.current-menu-item	{
						a				{ padding: 10px; border-bottom: 1px solid @yellow; }
					}
					&:first-child		{
						a				{ border-top: 1px solid #0D4C99; }
					}
				}
			}
			&.open						{ max-height: 1000px; margin: 20px 0 0; }
			.trigger					{ .block; }
		}
		.logo							{ .col-1-3; }
		.social-media					{ .absolute; .col-1-3; padding-right: 0; left: 120px; top: -7px;
			ul							{
				li						{
					a					{
						&.twitter		{
							&:hover		{  }
						}
						&.facebook		{
							&:hover		{  }
						}
					}
				}
			}
		}
	}

	/* Page content
	---------------------------------------- */
	#page-content						{ padding: 20px 0 10px;
		.breadcrumbs					{ top: 0; margin: 0 0 15px;
			li							{ margin: 0 8px 0 0; }
		}
		.sidebar 						{
			.widget						{ margin: 10px 0; }
		}
		.col-right						{ .col-1-1;
			.col-3-5					{ .col-1-2; }
			.col-2-5					{ .col-1-2; }
		}
		.col-left						{ .col-1-1; }
	}

	/* Footer
	---------------------------------------- */
	#page-footer				 		{ padding: 20px 0;
		.nav							{ width: 100%; padding: 10px; }
		.copyright						{ .al; padding: 20px 10px 0;
			p							{ width: 100%; margin-bottom: 10px; }
			.footer-nav 				{
				ul						{ margin: 0;
					li					{ margin: 0 20px 0 0; }
				}
			}
		}
	}

}

/* < 480
---------------------------------------- */
@media only screen and (max-width: 480px)	{

	/* Home
	---------------------------------------- */
	body.home								{
		.banner							{ padding: 30px 0;
			.caption 					{ width: 100%;
				h1						{ font-size: 16px; line-height: 24px; }
				a						{ margin: 0 5px 0 0; font-size: 12px; }
			}
			.background 				{
				img						{ .absolute; right: -80px; min-width: 640px !important; z-index: 0; }
				&:before				{ .absolute; .gradient; content: ""; width: 100%; height: 240px; top: 0; left: 0; right: 0; border: 0; z-index: 1; }
			}
		}
		.video-wrapper					{ margin-top: -15%;
			.video						{  }
		}
	}

	/* Page content
	---------------------------------------- */
	#page-content						{
		.col-right						{
			.col-3-5					{ .col-1-1; }
			.col-2-5					{ .col-1-1; }
		}
		.col-left						{  }

		/* Contactform
		------------------------------------ */
		.contactform			{ margin: 10px 0 20px 0; }

		/* USP's
		------------------------------------ */
		.usps					{
			ul					{ margin: 10px 0 20px 0; }
		}

	}

	/* Widgets
	------------------------------------ */
	.widget	{ margin-bottom: 10px; padding: 10px 0; }

}

.gradient								{
	background-image: -moz-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    background-image: -ms-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    background-image: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(255, 255, 255, 1)), to(rgba(255, 255, 255, 0)));
    background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    background-image: -o-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    background-image: linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    background-repeat: repeat-x;
}

.ajax-loader 								{ display: none; margin: 15px; font-size: 10px; position: relative; text-indent: -9999em; border-top: 0.3em solid rgba(0, 0, 0, 0.2); border-right: 0.3em solid rgba(0, 0, 0, 0.2); border-bottom: 0.3em solid rgba(0, 0, 0, 0.2); border-left: 0.3em solid rgba(0, 0, 0, 0.55); -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-animation: ajax-loader 1.1s infinite linear; animation: ajax-loader 1.1s infinite linear; }
.ajax-loader.is-active 						{ display: inline-block; }
.ajax-loader,
.ajax-loader:after 							{ border-radius: 50%; width: 20px; height: 20px; }
@-webkit-keyframes ajax-loader 				{
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.grecaptcha-badge {
    visibility: hidden;
}