// ===================================================================
// Variables
// ===================================================================
@blauw 		: #3cb2d0;
@wit 		: #e5e8e6;
@grijs 		: #bcbbc3;
@dark 		: #292929;



// ===================================================================
// Data-variable
// ===================================================================
*[data-bg="blauw"] 	{ background: @blauw; }
*[data-bg="wit"] 	{ background: @wit; }
*[data-bg="grijs"] 	{ background: @grijs; }
*[data-bg="dark"] 	{ background: @dark; }


// ===================================================================
// Mixins
// ===================================================================
.transition(@duration: .25s){
	transition: all @duration cubic-bezier(0.63, 0.64, 0.3, 1);
}

.transform-origin(@position){
	-webkit-transform-origin: @position;
	   -moz-transform-origin: @position;
		-ms-transform-origin: @position;
		 -o-transform-origin: @position;
			transform-origin: @position;
}

.transform(@value){
	-webkit-transform: @value;
	   -moz-transform: @value;
		-ms-transform: @value;
		 -o-transform: @value;
			transform: @value;
}

.colPadding(@value){
	padding: @value/3;
	&:first-child { padding-left: 0; padding-right: @value/3*2; }
	&:last-child { padding-right: 0; padding-left: @value/3*2; }
}

// ===================================================================
// Webfonts
// ===================================================================
@font-face {
	font-family: 'FontAwesome';
	src: url('fonts/fontawesome-webfont.eot?v=4.1.0');
	src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('fonts/fontawesome-webfont.woff?v=4.1.0') format('woff'), url('fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype'), url('fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
	font-weight: normal;
	font-style: normal;
}

.desktop:before 	{ content: "\f108"; }
.facebook:before 	{ content: "\f09a"; }
.linkedin:before	{ content: "\f0e1"; }
.twitter:before		{ content: "\f099"; }
.email:before		{ content: "\f0e0"; }
.phone:before		{ content: "\f095"; }
.maps:before 		{ content: "\f041"; }


// ===================================================================
// Reset
// ===================================================================
* 					{ margin: 0; padding: 0; font-family: 'Roboto Slab', serif; }
:focus 				{ outline: none; }
p, h0, h1, h2, h3, h4, 
blockquote, 		{ .transform(translateY(15px)); opacity: 0; .transition(.25s);
	&.appeared 			{ opacity: .99; .transform(translateY(0px)); }}

a 					{ color: @wit; font-weight: 400; .transition(.25s);
	&:hover  			{ color: @dark;	}

	&.btn 				{ padding: 8px 15px; display: inline-block; text-decoration: none; background: @blauw; color: @wit;
		&:hover 			{ .transform(scale(1.1)); background: @dark; }}}

.carrousel 			{ width: 100%; position: relative; margin-top: 20px;
	li 					{ float: left; list-style: none;
		img 				{ opacity: 1; position: relative; margin: 0 auto; }
		figcaption 			{ font-style: italic; font-size: 14px; }
	}

	.prev 			{ display: block; position: absolute; top: 50%; left: 10px; background: @blauw; width: 40px; height: 40px; .transform(translateY(-50%)); .transition(.25s); cursor: pointer;
		&:hover 		{ background: @dark; }
		&:before 		{ content: "\f104"; font-family: 'FontAwesome'; color: @wit; position: absolute; left: 0; top: 0; width: 100%; height: 100%; line-height: 40px; text-align: center; font-size: 30px; }}
	.next 			{ display: block; position: absolute; top: 50%; right: 10px; background: @blauw; width: 40px; height: 40px; .transform(translateY(-50%)); .transition(.25s); cursor: pointer;
		&:hover 		{ background: @dark; }
		&:before 		{ content: "\f105"; font-family: 'FontAwesome'; color: @wit; position: absolute; left: 0; top: 0; width: 100%; height: 100%; line-height: 40px; text-align: center; font-size: 30px; }}

	.pagination 	{ text-align: center; width: 100%; margin-top: 10px;
		a 				{ display: inline-block; width: 20px; height: 20px; text-indent: -9999px; background: @blauw; margin: 0 5px;
			&.selected 		{ background: @dark; }
		}
	}
}


// ===================================================================
// Minigrid
// ===================================================================
.column 			{ float: left; box-sizing: border-box; 
	&.column2 			{ width: 50%; padding: 0 25px; 
		&:first-child 		{ padding-left: 0; }
		&:last-child 		{ padding-right: 0; }}
	&.column3 			{ width: 33.33%; .colPadding(50px); }
	&.column4 			{ width: 25%; }
	&.column5 			{ width: 20%;}

	img 				{ width: 100%; margin: 20px 0; }}

// ===================================================================
// Typography
// ===================================================================
h1 					{ font-size: 72px; line-height: 1.0; margin: 0 auto; text-align: center; max-width: 650px; font-weight: 300; margin-bottom: 30px; -webkit-font-smoothing: antialiased; }
h2 					{ font-size: 48px; text-align: center; -webkit-font-smoothing: antialiased; }
h3 					{ font-size: 40px; color: @wit; text-align: center; margin-bottom: 18px; font-weight: 400; -webkit-font-smoothing: antialiased; }
h4 					{ font-size: 21px; line-height: 1.2; font-weight: 400; -webkit-font-smoothing: antialiased; }
h5 					{ font-size: 72px; color: @dark; line-height: 1.0; margin: 0 auto; text-align: center; max-width: 650px; font-weight: 100; -webkit-font-smoothing: antialiased; }
p 					{ font-size: 18px; color: @wit; line-height: 1.6; font-weight: 300; -webkit-font-smoothing: antialiased; }

// ===================================================================
// Pages
// ===================================================================
.block 				{ position: relative; width: 100%; float: left; padding: 30px 0;
	.frame 				{ position: relative; width: 960px; margin: 0 auto; height: inherit;
		> :last-child 		{ margin-bottom: 0 !important; }
		.row 				{ width: 100%; display: block; float: left; }}}

#big_logo 			{ position: absolute; z-index: 10; top: 95px; left: 50%; margin-left: -480px; }

.backToTop 			{ position: fixed; left: 50%; bottom: 25px; margin-left: 500px; display: block; width: 50px; height: 50px; background: fadeout(@dark, 80%); z-index: 1000; line-height: 50px; text-align: center; text-decoration: none; .transition(.25s); opacity: 0;
	&:after 			{ content: "\f106"; color: @wit; font-family: 'FontAwesome'; font-size: 30px; }}

// Menu
// ===================================================================
#nav 				{ background: @wit; margin: 0; position: fixed; top: 0; left: 0; height: 50px; z-index: 9999; padding: 0; .transition(.25s);
	ul 					{ list-style: none; position: absolute; right: 0; bottom: 0;
		li 					{ float: left; height: 50px;
			a 					{ color: @blauw; display: block; padding: 0 10px; position: relative; text-decoration: none; .transition(.25s);  line-height: 50px;
				&:hover 			{ color: @dark; }
				&.active 			{ background: @blauw; color: @wit; }
				&:before 			{ font-family: "FontAwesome"; }}
			span 				{ color: @wit; display: block; padding: 0 10px; position: relative; line-height: 50px;
				&.phone:before		{ margin-right: 5px; color: @blauw; font-family: 'FontAwesome'; }}}}

	& + .block 			{ padding-top: 125px; .transition(.25s); }}

// Intro
// ===================================================================
#intro 				{ background: @blauw; color: @wit; text-align: center; }

// About Us
// ===================================================================
#about-us 			{ background: @blauw; }

// Images
// ===================================================================
#inside 			{ background-image: url('img/9938303513_14cc13ac42_h.jpg'); background-attachment: fixed; background-position: center; background-size: cover; height: 240px; } // ©2013, Chantal Nederstigt - https://www.flickr.com/photos/channed/
#outside 			{ background-image: url('img/9496627916_fab9a75001_h.jpg'); background-attachment: fixed; background-position: center; background-size: cover; height: 240px; } // ©2013, NLDAZUUfotografeert - https://www.flickr.com/photos/nldazuu/


// Body
// ===================================================================
.body 				{
						-webkit-font-smoothing: antialiased;
	p 					{ color: @wit; margin-bottom: 20px; }
	ul, ol 				{ margin-left: 20px; margin-bottom: 20px; 
		&.horizontal 		{ display: table; width: 100%; margin-left: 0;
			li 					{ display: table-cell; }
		}
	}

	blockquote 			{ font-size: 200%; width: 100%; display: inline-block; text-align: center; }
}

.line-separator{
	height:1px;
	border-bottom:1px dotted #e5e8e6;

}
// Contact
// ===================================================================
#contact 			{ background: @blauw; }

// Maps
// ===================================================================
#maps 				{ padding: 0; height: 500px; }

// Mailchimp
// ===================================================================
#mailchimp 			{ background: @blauw; padding: 25px 0; 
	h4 					{ color: @wit; margin-bottom: 10px; }
	ul 					{ list-style: none; position: relative; float: left; clear: left;
		li 					{ float: left;
			a 					{ color: @wit; display: block; padding: 10px; position: relative; text-decoration: none; .transition(.25s); 
				&:hover 			{ color: @dark; }
				&:before 			{ font-family: 'FontAwesome'; }
				&.phone:before		{ margin-right: 5px; }}
			span 				{ color: @wit; display: block; padding: 10px; position: relative;
				&:before 			{ font-family: 'FontAwesome'; }
				&.phone:before		{ margin-right: 5px; }}}}}

#mce-FNAME,
#mce-EMAIL 							{ border: none; background: @wit; color: @dark; font-size: 15px; line-height: 1px; padding: 7px; border-radius: 0px; .transition(.25s);
	&:focus 							{ background: @grijs; .transform(scale(1.1)); }}
.mc-field-group 					{ float: left; }
#mce-FNAME 							{ width: 106px; margin-right: 15px; }
#mce-EMAIL							{ width: 186px; 
	&:focus 							{ margin-right: 10px; }}
#mc-embedded-subscribe 				{ border: none; color: @wit; background: @dark; padding: 7px; font-size: 15px; border-radius: 0px; .transition(.25s);
	&:hover 							{ color: @grijs; .transform(scale(1.1)); }}


// ===================================================================
// Mobile - BUGGING 
// ===================================================================
.mobile 			{ padding: 25px; background: @blauw;
	.logo 				{ float: left; width: 75%; 
	}


	.contact 			{ float: right; width: 25%;
		ul 					{ list-style: none; width: 100%;
			li 					{ display: block; width: 100%; margin-top: -160px;
				a 					{ color: @wit; text-decoration: none; font-size: 32px; display: block; width: 50px; height: 50px; line-height: 30px; text-align: center; float: right;
					&:before 			{ font-family: 'FontAwesome'; }}
			}
		}
	}


	.overview 			{ float: left; width: 100%; box-sizing: border-box; margin: 15px 0 15px; padding: 0 0 20px; font-size: 20px; color: @wit; border-bottom: 1px solid fadeout(@wit, 75%);

	}

	.footer 			{ float: left; padding-bottom: 25px; font-size: 20px;
		ul 					{ list-style: none; position: relative; float: left; clear: left;
			li 					{ float: left;
				a 					{ color: @wit; display: block; padding: 10px; position: relative; text-decoration: none; .transition(.25s); 
					&:before 			{ font-family: 'FontAwesome'; display: inline-block; width: 30px; }
				}
			}
		}
	}
}

.tablet *,
.mobile * 			{ background-attachment: scroll !important; }