//  @kleuren

$primair: #000;
$primair-lichter: lighten($primair, 50%);
$contrast: #fff;
$huisstijl: #ee3032;
$huisstijl-bruin: #897979;
$huisstijl-lichtgrijs: #f3f2ed;
$cta: #ee3032;
$twitter: #00aced;
$facebook: #3b5998;
$gplus: #dd4b39;
$linkedin: #007bb6;
$youtube: #bb0000;

// @lettertype

@font-face {
  font-family: 'Nucleo Glyph';
  src: url('../fonts/nucleo-glyph.eot');
  src: url('../fonts/nucleo-glyph.eot') format('embedded-opentype'), url('../fonts/nucleo-glyph.woff2') format('woff2'), url('../fonts/nucleo-glyph.woff') format('woff'), url('../fonts/nucleo-glyph.ttf') format('truetype'), url('../fonts/nucleo-glyph.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

$sans-serif: 'Georgia', 'Times New Roman', serif;    
$serif: 'Open Sans', sans-serif;
$source: 'Source Sans Pro', sans-serif;

@mixin nucleo {
font-family: 'Nucleo Glyph';
display: inline-block;
font: normal normal normal 14px/1 'Nucleo Glyph';
font-size: inherit;
speak: none;
text-transform: none;
/* Better Font Rendering */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

// @media queries 
$tv: "(max-width: 1500px)";
$desktop-groot: "(max-width: 1250px)";
$desktop-klein: "(max-width: 1100px)";
$menu-breekpunt: "(max-width: 976px)";
$tablet-groot: "(max-width: 950px)";
$tablet: "(max-width: 768px)";
$tablet-klein: "(max-width: 670px)";
$mobiel: "(max-width: 480px)";

// @width @margin @padding

@mixin binnenkant {
max-width: 1140px;
margin: 0 auto;
text-align: left;
}

$standaard-ruimte: 20px;
$standaard-ruimte-helft: 10px;
$standaard-ruimte-dubbel: 40px;

$header-hoogte: 57px;
$header-alert-hoogte: 99px;
$header-hoogte-klein: 38px;
$header-alert-hoogte-klein: 81px;
$footer-hoogte: 124px;

// @cosmetisch

@mixin afgerond {
-webkit-border-radius: 5px;
border-radius: 5px;
}

@mixin box-shadow {
-webkit-box-shadow: 0px 5px 0px 0px rgba(146, 12, 13, 1);
-moz-box-shadow:    0px 5px 0px 0px rgba(146, 12, 13, 1);
box-shadow:         0px 5px 0px 0px rgba(146, 12, 13, 1);
}

// @animatie 
@mixin animeer {
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
-ms-transition: all 0.15s linear;
-o-transition: all 0.15s linear;
transition: all 0.15s linear;
}
   
// @standaard HTML elementen

@mixin titel-stijl {
margin: 0 0 10px 0;
font-family: $serif;
font-size: 30px;
text-transform: uppercase;
}

h1, h2, h3, h4, h5 {
@include titel-stijl;
}

h1 {
font-weight: normal;
letter-spacing: 0.1em;
color: $huisstijl-bruin;
font-size: 24px;
text-align: center;
border-bottom: 1px solid tint($huisstijl-bruin,75%);
padding-bottom: $standaard-ruimte;
margin-bottom: $standaard-ruimte;

	span {
	text-transform: lowercase;
	}

}

h2 {
font-size: 24px;

	aside & {
	font-size: 14px;
	font-weight: normal;
	color: $huisstijl-bruin;
	}

}

/* library overzicht v2 */

.library-v2.no-sidebars {
	#content {
	max-width: 100%;
	}
	.facet-filters-wrapper {
	padding: $standaard-ruimte;
	background: $huisstijl-lichtgrijs;
	font-size: 0.9em;
	}
	.pane-facetapi {
    float: left;
    width: 16%;
    margin-right: 0.66%;
    		@media #{$tablet} {
			width: 100%;
			margins-right: 0;
			margin-top: 20px;
			}
		
    }
    .reset-filters {
    float: right;
    width: 150px;
    clear: both;
	margin-right: 15px;
	margin-top: 10px;
	}
}


.blokken-overzicht h2,
.node-type-overzichtspagina h1 {
font-weight: normal;
letter-spacing: 0.1em;
padding: $standaard-ruimte;
margin: 0;
text-align: center;
color: $huisstijl-bruin;
background: tint($huisstijl-bruin,80%);

	aside & {
	background: none;
	text-align: left;
	padding: $standaard-ruimte-dubbel;
	padding-bottom: 0;
	
		@media #{$tablet} {
		padding: $standaard-ruimte;
		}
	
	}

}   

h3 {
font-size: 20px;
margin-bottom: 0;
text-transform: none;
}

h4 {
font-size: 16px;
text-transform: none;
}

h5 {
font-size: 16px;
text-transform: none;
}

ul, ol, blockquote, p {
 margin: 0 0 20px 0;
 padding: 0;
}

ul li {
list-style: square;
margin-left: 20px;
}

ul.checkmarks {

	li {
	list-style: none;
	margin-left: 0;
		
		&:before {
		@include nucleo;
		content: '\e66e';
		padding-right: 5px;
		color: $huisstijl;
		}
		
	}

}

ol li {
list-style: decimal;
margin-left: 20px;
}

a {
color: $huisstijl;
text-decoration: none;

	&:hover,
	&:focus{
	border-bottom: 2px solid $huisstijl;
	}

}

.cta {
background: $cta;
display: block;
padding: $standaard-ruimte-helft;
color: $contrast;
border: none;
text-align: center;
font-weight: bold;
font-family: $serif;
font-size: 14px;
line-height: 24px;

	&:before {
	@include nucleo;
	content: "\ea71";
	padding: 5px 0 0 10px;
	font-size: 18px;
	float: left;
	}
	
	&:hover,
	&:focus {
	background: lighten($cta, 10%);
	color: $contrast;
	border: none;	
	}

}

// @basis   

html {
position: relative;
min-height: 100%;
}
   
body {
text-align: center;
color: $primair;
font-family: $serif;
margin: 0 0 $footer-hoogte;

	&.myravas {
	margin-bottom: 0;
	}
	
	@media #{$desktop-klein} {
	margin: 0;
	}

	&.one-sidebar {
	background-image: url(../img/one-sidebar-bg.gif);
	background-size: 100% 100%;
	}
	
	&.one-sidebar.sidebar-second {
	background-image: url(../img/one-sidebar-second-bg.gif);
	background-size: 100% 100%;
	}
	
	&.one-sidebar.sidebar-first {
	background-image: url(../img/one-sidebar-first-bg.gif);
	background-size: 100% 100%;
	}	

	&.two-sidebars {
	background-image: url(../img/two-sidebars-bg.gif);
	background-size: 100% 100%;
	
		@media #{$desktop-groot} {
		background-image: url(../img/two-sidebars-bg-klein.gif);
		}
		
		@media #{$desktop-klein} {
		background-image: none;
		}
	
	}

}

#main {
z-index: 40;
position: relative;

	.no-hero & {
	padding-top: $header-hoogte;
	
		@media #{$mobiel} {
		padding-top: $header-hoogte-klein;
		}
	
	}

	.alert & {
		padding-top: $header-alert-hoogte;

			@media #{$mobiel} {
				padding-top: $header-alert-hoogte-klein;
			}
	}
	
	.submenu & {
	padding-top: $header-hoogte+35px;
	
		@media #{$desktop-groot} {
		padding-top: $header-hoogte;
		}
		
		@media #{$mobiel} {
		padding-top: $header-hoogte-klein;
		}
	
	}

	.submenu.alert & {
		padding-top: $header-alert-hoogte+35px;
	
			@media #{$desktop-groot} {
			padding-top: $header-alert-hoogte;
			}
			
			@media #{$mobiel} {
			padding-top: $header-alert-hoogte-klein;
			}
	}
	
	.front & {
	background: $contrast;
	}
	
	.one-sidebar & {
	max-width: 1200px;
	margin: 0 auto;
	}

}

#content {
text-align: left;
padding: $standaard-ruimte-dubbel;
margin: 0 auto;

	@media #{$tablet} {
	padding: $standaard-ruimte;
	}

	@media #{$desktop-klein} {
	width: 100% !important;
	}

	.no-sidebars & {
	max-width: 60%;
		
		@media #{$desktop-groot} {
		max-width: none;
		}
	
	}

	.one-sidebar & {
	width: 68%;
	float: left;
	background: $contrast;	
	}

	.two-sidebars & {
	width: 60%;
	float: left;
	
		@media #{$desktop-groot} {
		width: 50%;
		}
	}
	
	.myravas & {
	
		min-height: 1000px;
	
		@media #{$desktop-klein} {
		min-height: none;
		}
	
	
	}
	
	.front &,
	.node-type-overzichtspagina & {
	padding: 0;
	max-width: none;
	}

}

aside {
width: 20%;
float: left;
text-align: left;
font-size: 14px;
line-height: 24px;
padding-bottom: $standaard-ruimte-dubbel;

	@media print {
	display: none;
	}

	@media #{$desktop-klein} {
	width: 100% !important;
	}

	@media #{$desktop-groot} {
	width: 25%;
	}

	.one-sidebar & {
	width: 32%;
	}

	.item-list {
	margin: $standaard-ruimte 0;
	}

	&.sidebar.first {
	background: tint($huisstijl-bruin,90%);
	}

	&.sidebar.second {
	background: tint($huisstijl-bruin,80%);
	}
	
	.block {
	padding: $standaard-ruimte-dubbel;	
	padding-bottom: 0;
	
		@media #{$tablet} {
		padding: $standaard-ruimte;
		}
	
	}
	
	.block.blokken-overzicht {
	padding: 0;
	}

}

.binnenkant {
@include binnenkant;
}

// @header

#header {
background: $primair;
overflow: hidden;
position: fixed;
width: 100%;
z-index: 998;

	@media #{$desktop-groot} {
	overflow: visible;
	position: absolute;
	}

	.submenu & {
	height: 92px;
		
		@media #{$desktop-groot} {
		overflow: visible;
		height: auto;
		}
	
	}

	.submenu.alert & {
		height: 130px;

		@media #{$desktop-groot} {
		overflow: visible;
		height: auto;
		}
	}

	.block {
	position: relative;
	z-index: 20;
	
		@media print {
		display: none;
		}
	
	}

	.binnenkant {
	max-width: none;
	}

	.block.logo {
	float: left;
	margin-right: $standaard-ruimte-helft;
	padding: $standaard-ruimte-helft;
	padding-right: 0;
		
		&.print {
		display: none;
		
			img {
			width: 150px !important;
			height: auto !important;
			}
		
			@media print {
			display: block;
			width: 100%;
			text-align: center;
			float: none;
			padding-bottom: $standaard-ruimte;
			}
		
		}
	
		@media #{$mobiel} {
		margin-right: 0;
		padding: 8px;
		}
	
		a#logo {
		border: none;
		background: url(../logo-white.svg) no-repeat;
		background-size: 100%;
		text-indent: -9999px;
		display: block;
		width: 100px;
		height: 37px;
		
			@media print {
			background: url(../logo.svg) no-repeat;
			}
		
			@media #{$mobiel} {
			width: 50px;
			height: 19px;
			}
		
		}
		
	}
	
	.block-menu,
	.block-menu-block {
	padding: $standaard-ruimte-helft 0;
	
		&.hoofdmenu,
		&.submenu {
		position: absolute;
		top: 0;
		left: 222px;
		right: 222px;
		text-align: center;
		z-index: 10;
		
		&.hoofdmenu {
		
			@media #{$tv} {
			left: 110px;
			right: auto;
			}
			
			.logged-in & {
			
				@media #{$tv} {
				left: 222px;
				right: 222px;
				}
			
			}
		}
		
		&.submenu {
		top: $header-hoogte;
		left: auto;
		right: auto;
		padding: 0;
		width: 100%;
		background: $huisstijl-bruin;
		}
		
			@media #{$desktop-groot} {
			display: none;
			}
		
			.block-inner {
			display: inline-block;
			margin: 0 auto;
			z-index: 10;
			}
		
		}
	
		ul {
		font-size: 0;
		text-align: center;
		margin: 0;
			
			ul {
			display: none;
			}
	
			li {
			display: inline-block;
			
				a {
				display: block;
				font-size: 14px;
				margin: 8px $standaard-ruimte-helft;
				border: none;
				color: $primair;
				font-family: $serif;
				text-transform: uppercase;
				letter-spacing: 0.05em;
				color: $contrast;
				
					&:hover,
					&:focus {
					border-bottom: 2px solid $huisstijl;
					}
				
				}
				
				.active,
				&.active-trail a {
				border-bottom: 2px solid $huisstijl;
				font-weight: bold;
				}
				
			}
		}
	
	}
	
	.block-search {
	float: right;
	padding: 8px;
	
		.form-item,
		.form-actions {
		float: left;
		margin: 0;
		}
		
		input[type="text"],
		input[type="submit"] {
		//background: $huisstijl-bruin;
		//color: $contrast;
		///border: none;
		
			&:focus {
			//background: shade($huisstijl-bruin,25%);
			}		
		
		}
				
		input[type="submit"] {
		background: $huisstijl;
		
			&:hover,
			&:focus {
			background: tint($huisstijl,25%);
			}	
		
		}
		
	}
	
	.block-lang-dropdown {
	float: right;
	padding-left: 0;
	border: 1px solid rgba(255,255,255,0.5);
	margin: 9px $standaard-ruimte-helft;
	
		@media #{$mobiel} {
		margin: 0;
		border: none;
		border-left: 1px solid rgba(255,255,255,0.5);
		}
		
		&:before {
		content: "\ea35";
		@include nucleo;
		float: left;
		color: $huisstijl;
		padding: $standaard-ruimte-helft;
		padding-right: 0;
		padding-top: 12px;
		}
		
		.block-inner {
		float: left;
		}
	
		select {
		background: $primair;
		color: $contrast;
		font-weight: bold;
		width: auto !important;
		text-align: center;
		border: none;
		padding-left: 5px;
		
			@media #{$mobiel} {
			font-size: 12px;
			}
		
		}
	
	}
	
	.block.myravas,
	.block.profile-link {
	float: right;
	padding: 0;
	
		.views-field {
		float: left;
		
			&.views-field-nothing {
			
				a {
				background: $huisstijl-bruin;
					
					&:before {
					content: "\ea8e";	
					}
					
					&:hover,
					&:focus {
					background: tint($huisstijl-bruin,25%);
					}
				
				}
			
			}
		
		}
	
		a {
		color: $contrast;
		border: none;
		display: block;
		padding: $standaard-ruimte;
		background: $huisstijl;
		margin: 0;
		
			@media #{$mobiel} {
			padding: $standaard-ruimte-helft;
			font-size: 12px;
			padding: $standaard-ruimte-helft 5px;
			}
		
			&:before {
			content: "\e63b";
			font-size: 24px;
			margin-right: 5px;
			@include nucleo;
			}
			
			&:hover,
			&:focus {
			border: none;
			background: tint($huisstijl,25%);
			}
		
		}
	
	}
}

// @hero

.region-hero {
padding-top: $header-hoogte;

	.alert & {
		padding-top: $header-alert-hoogte;

		@media #{$mobiel} {
		padding-top: $header-alert-hoogte-klein;
		}
	}

		@media #{$mobiel} {
		padding-top: $header-hoogte-klein;
		}

}

.hero {

	.front & {
	background: url(../../../../default/files/videos/video-still.jpg);
	background-size: cover;
	}

	h1 {
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	border-bottom: 1px solid rgba(255,255,255,0.5);
	display: inline-block;
	margin: 0 auto $standaard-ruimte-helft auto;
	padding-bottom: $standaard-ruimte;
	color: $contrast;
	
		.node-type-cases & {
		color: $huisstijl-bruin;
		border-color: tint($huisstijl-bruin,80%);
		}
	
	}

	.views-row {
	margin-bottom: 0;
	}

	.views-field-field-video {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	overflow: hidden;
	
		.video-js {
		position: static;
		}
		
		@media #{$desktop-groot} {
		display: none;
		}
	
	}
	
	.views-field-title {
	width: 100%;
	z-index: 10;
	position: relative;
	padding: 120px $standaard-ruimte;
	background: rgba(0,0,0,0.5);
	
		@media #{$desktop-groot} {
		padding: $standaard-ruimte-dubbel $standaard-ruimte;
		}
	
		.node-type-cases & {
		background: tint($huisstijl-bruin, 90%);
		padding: $standaard-ruimte-dubbel;
		}
	
		.field-content {
		display: block;
		color: $contrast;
		text-align: center;
		}
		
		ul {
		margin: $standaard-ruimte auto;
		font-size: 18px;
		
			li {
			list-style: none;
			margin-bottom: $standaard-ruimte;
			clear: both;
			
				/*&:before {
				@include nucleo;
				margin-right: 10px;
				}
			
				&:first-child:before {
				content: "\e71a";
				}
				
				&+li:before {
				content: "\ebdd";				
				}
				
				&+li+li:before {
				content: "\ea4c";
				}
				
				&+li+li+li:before {
				content: "";
				}*/
			
				.cta {
				margin-top: $standaard-ruimte;
				padding: $standaard-ruimte-helft $standaard-ruimte;
				padding-left: $standaard-ruimte+20px;
				//@include afgerond;
				//@include box-shadow;
				display: inline-block;
				font-size: 14px;
				position: relative;
				background: none;
				border: 1px solid $contrast;
				@include animeer;
				letter-spacing: 1px;
				text-transform: uppercase;
				
				
					&:before {
					//background: shade($huisstijl,25%);
					@include nucleo;
					content: "\ea71";
					position: absolute;
					top: 1px;
					left: 0;
					padding: $standaard-ruimte-helft;
					-webkit-border-radius: 5px 0 0 5px;
					border-radius: 5px 0 0 5px;
					font-size: 18px;
					}
					
					&:hover,
					&:focus {
					background: rgba(255,255,255,0.25);
					}
				
				}
			
			}
		
		}
	
	}

	video {
	height: auto !important;		
	}

	.vjs-loading-spinner {
	display: none !important;
	}	

}

// @blokken-overzicht

.blokken-overzicht {

	.region-content-bottom & {
	padding-top: 0;	
	}
	
	.content {
	text-align: left;
	}

	.block-inner {
	@include binnenkant;
	max-width: 1920px;
	text-align: center;
	}

	.view-content {
	padding: $standaard-ruimte;
	
		aside & {
		padding-top: 0;
		}
	
	}
	
	//@FIND RAVAS NEAR YOU overzicht
	&#block-views-medewerkers-block_4 {
		.views-row {
		height: 200px; 
		}
		
	}
	
	&.medewerkers {
	
		.views-row {
		
			&:after {
			display: none;
			}
		
			@media #{$mobiel} {
			margin-bottom: $standaard-ruimte;
			}
		
			.views-field-title {
			
				@media #{$desktop-klein} {
				padding-top: 0;
				}
				
				h3 {
					@media #{$desktop-klein} {  
					margin-top: 0;
					}
				}
			
			}
			
			.views-field-field-e-mail,
			.views-field-field-telephone-number {
			
				@media #{$desktop-klein} {
				float: right;
				width: 50%;
				padding-left: $standaard-ruimte;
				}
				
				@media #{$tablet} {
				padding-left: $standaard-ruimte-helft;
				}
				
				@media #{$mobiel} {
				float: none;
				width: auto;
				padding-left: 0;
				padding-top: $standaard-ruimte-helft;
				clear: both;
				}
			
			}
			
			.views-field-field-thumbnail-afbeelding {
			
				@media #{$tablet} {
				height: 300px;
				}
				
				@media #{$mobiel} {
				height: auto;
				padding-bottom: $standaard-ruimte-helft;
				}
			
			}
		
		}
	
	}
	
	.views-row {
	width: 20%;
	float: left;
	font-size: 14px;
	padding: $standaard-ruimte;
	line-height: 24px;
	color: tint($primair,25%);
	margin-bottom: 0;
	position: relative;
	height: 400px;
	overflow: hidden;
	
		@media #{$desktop-klein} {
		height: auto;
		}
		
		aside & {
		height: auto;
		}
		
		&:after {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100px;
		content: "";
		display: block;
		background: url(../img/fade.png);
		background-position: bottom left;
			
			@media #{$desktop-klein} {
			background: none;
			}
			
			aside & {
			background: none;
			}
			
		}	
		
		@media #{$desktop-klein} {
		width: 100%;
		}
		
		@media #{$tablet} {
		padding: 0;
		}
	
		aside & {
		width: 100%;
		
			@media #{$tablet} {
			margin-bottom: $standaard-ruimte-dubbel;
			}
		
		}
	
		.views-field-title {
				
			@media #{$desktop-klein} {
			width: 50%;
			float: right;
			padding-left: $standaard-ruimte;
			padding-top: $standaard-ruimte;
			}
			
			@media #{$tablet} {
			padding-left: $standaard-ruimte-helft;
			padding-top: $standaard-ruimte-helft;
			}
			
			@media #{$mobiel} {
			width: 100%;
			padding-left: 0;
			}
			
			aside & {
			
				@media #{$desktop-klein} {
				padding-top: 0;
				}
				
				@media #{$mobiel} {
				padding-top: $standaard-ruimte-helft;
				}
				
				h3 {
			
				@media #{$tablet} {
				margin-top: 0;
				}
				
				}
			
			}
			
		}
	
		.views-field-field-samenvatting {
				
			@media #{$desktop-klein} {
			width: 50%;
			float: right;
			padding-left: $standaard-ruimte;
			}
			
			@media #{$tablet} {
			padding-left: $standaard-ruimte-helft;
			}
			
			@media #{$mobiel} {
			width: 100%;
			padding-left: 0;
			}
		
		}
		
		.views-field-type {
		font-size: 10px;
		letter-spacing: 1px;
		text-transform: uppercase;
		border-bottom: $huisstijl-bruin 2px solid;
		display: inline-block;		
		
			@media #{$desktop-klein} {
			clear: both;
			display: block;
			border-bottom-width: 1px;
			border-color: tint($huisstijl-bruin,50%);
			}
		
		}
		
		.views-field-field-thumbnail-afbeelding {
		//border-top: 1px solid tint($huisstijl-bruin,50%);
		margin-top: -2px;
		overflow: hidden;		
			
			@media #{$desktop-klein} {
			margin-top: 0;
			width: 50%;
			float: left;
			padding-right: $standaard-ruimte;			
			}
			
			@media #{$tablet} {
			padding-right: $standaard-ruimte-helft;
			}			
			
			@media #{$mobiel} {
			width: 100%;
			padding-right: 0;
			}
		
		}

		h3 {
		font-size: 16px;
		margin: $standaard-ruimte-helft 0 2px 0;
			
			a {
			color: $primair;
			letter-spacing: 0.05em;
			font-weight: bold;
			text-transform: uppercase;
			font-size: 14px;
			
				span {
				text-transform: lowercase;
				}
			
			}
		
		}		
	
	}

}

/* @quotes */ 

.quotes {

	.views-row {
		margin-bottom: $standaard-ruimte-dubbel;
	}
}

/* @views-filter @filter */

.views-exposed-form{
padding: $standaard-ruimte $standaard-ruimte-dubbel;
background: tint($huisstijl-bruin,90%);

	@media #{$tablet} {
	padding: $standaard-ruimte;
	}
	
	.views-exposed-widget {
	
		padding-right: $standaard-ruimte;
		
		.zes-filter-velden & {
		width: 14%;
		
			@media #{$tablet} {
			width: 100%;
			padding-right: 0;
			}
		
		}
		
		.vijf-filter-velden & {
		width: 17%;
		
			@media #{$tablet} {
			width: 100%;
			padding-right: 0;
			}
		
		}		
		
		.vier-filter-velden & {
		width: 21.25%;
		
			@media #{$tablet} {
			width: 100%;
			padding-right: 0;
			}
		
		}		
	
		.drie-filter-velden & {
		width: 28.33333333333333%;
		
			@media #{$tablet} {
			width: 100%;
			padding-right: 0;
			}
		
		}
		
		.twee-filter-velden & {
		width: 42.5%;
		
			@media #{$tablet} {
			width: 100%;
			padding-right: 0;
			}
		
		}
		
		&.views-submit-button {
		width: 15%;
		padding-right: 0;
		
			@media #{$tablet} {
			width: 100%;
			}
		
		}
	
		label {
		padding-bottom: $standaard-ruimte-helft;
		
			@media #{$tablet} {
			padding-top: $standaard-ruimte-helft;
			}
		
		}
		
		.form-submit  {
		margin-top: 27px;
		}
		
	}

}

.view-empty {
padding: $standaard-ruimte;
padding-bottom: 0;
text-align: center;
overflow: hidden;
}

// @formulieren

label,
.views-label {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: bold;
}

input[type="text"],
input[type="email"],
input[type="password"],
select,
textarea {
width: 100%;
padding: $standaard-ruimte-helft;
border: 1px solid $huisstijl-bruin;
color: $huisstijl-bruin;
font-size: 14px;
outline: none;
font-family: $serif;
}

input:read-only {
background-color: tint($primair,95%);
color: $huisstijl-bruin;
	
	&:focus {
	border: 1px solid tint($huisstijl-bruin,50%);
	}

}

select {
padding: 9px;
}

input[type="checkbox"] {
-webkit-appearance: checkbox;
}

input[type="radio"] {
-webkit-appearance: radio;
}

textarea  {
width: 100%;
float: none;
}

.webform-component-radios label,
.webform-component-checkboxes label {
width: 100%;
}

input:focus,
select:focus,
textarea:focus {
color: $primair;
border-color: $primair;
}

.form-item,
.form-actions {
overflow: hidden;
margin-bottom: 5px;
}

.form-item .description {
padding: 5px;
font-size: 12px;
clear: both;
text-align: center;
background: tint($huisstijl-bruin,75%);
margin-bottom: $standaard-ruimte-helft;
}

.form-checkboxes .form-item, 
.form-radios .form-item {
margin: 0;
}

.form-type-radio,
.form-type-checkbox {
clear: both;
}

.form-type-radio input,
.form-type-checkbox input {
float: left;
margin: 10px 0 0 0;
}

.form-type-radio label,
.form-type-checkbox label {
width: auto;
float: left;
padding-top: 5px;
padding-left: 5px;
}

.grippie,
.webform-component-textarea .grippie {
display: none;
}

input[type="submit"] {
@extend .cta;
color: 
border: none;
width: 100%;
float: none;
padding: $standaard-ruimte-helft+1px;

	&.webform-submit {
	margin-top: $standaard-ruimte-helft;
	}

}

// @zoeken 

.block-search input {
width: 100%;
float: none;
}

// @commentaar @reacties

ul li.comment-add {
display: none;
}

.comment {
overflow: hidden;
margin: $standaard-ruimte 0;
font-size: 14px;
}

.comment .user-picture {
float: left;
width: 10%;
}

.comment .user-picture img {
width: 100%;
height: auto;
}

.comment .content,
.comment div.links {
float: right;
width: 90%;
}

.comment div.links {
text-align: right;
padding: $standaard-ruimte-helft;
}

.comment .content {
background: tint($huisstijl-bruin, 90%);
padding: $standaard-ruimte;

	p {
	line-height: 24px;
	font-style: italic;
	}
	
}

.form-actions input[type="submit"]+input[type="submit"] {
background: none;
color: $huisstijl;
font-weight: normal;
display: inline-block;
width: auto;
float: right;
padding-right: 0;
}

.indented {
margin-left: 20px;
}

img {
max-width: 100%;
height: auto;

	&.kader {
	border: 10px solid tint($huisstijl-bruin,50%);
	}
	
	&.repsonsive {
	max-width: 100%;
	width: 100% !important;
	height: auto !important;
	}	
	
	&.links {
	float: left;
	margin-right: $standaard-ruimte;
	margin-bottom: $standaard-ruimte;
	}
	
	&.rechts {
	float: right;
	margin-left: $standaard-ruimte;
	margin-bottom: $standaard-ruimte;
	}

}

// @editor

.cke_editable {
max-width: 1140px;
background: $contrast;
text-align: left;
padding: 20px;
}

// @messages

div.messages {
border: none;
margin: 0 0 $standaard-ruimte 0;
padding: $standaard-ruimte-helft;
color: #fff;
background: #2ECC40;
}

div.messages a {
color: rgba(255,255,255,1);
text-decoration: none;
font-weight: bold;
}

div.messages a:hover,
div.messages a:focus {
color: rgba(255,255,255,0.75);
}

div.messages.warning {
background: #FF851B;
}

div.messages.error {
background: #FF4136;
}

// @social media icons
   
a.fa {
text-decoration: none;
font-size: 24px;
border: none;
	
	&.twitter {
	color: $twitter;
	}
	
	&.facebook {
	color: $facebook;
	} 
	
	&.gplus {
	color: $gplus;
	} 
	
	&.linkedin {
	color: $linkedin;
	} 	
	
	&.youtube {
	color: $youtube;
	}

	&:hover,
	&:focus	{
	color: $primair;
	}

}

// @footer {

#footer {
position: absolute;
left: 0;
bottom: 0;
height: $footer-hoogte;
width: 100%;
background: $primair;
padding: $standaard-ruimte;
padding-bottom: 0;
color: $contrast;
letter-spacing: 1px;

	@media #{$desktop-klein} {
	position: static;
	height: auto;
	}

	.binnenkant {
	max-width: none;
	}

	@media print {
	display: none;
	}

	ul {
	margin: 0;
	font-size: 0;
	text-align: center;
	
		li {
		margin-bottom: 17px;
		display: inline-block;
		font-size: 12px;
		text-transform: uppercase;
		padding: 0 5px;
		line-height: 24px;
		
			a {
			border: none;
			color: $contrast;
			font-size: 12px;
			text-transform: uppercase;
			
				&.fa {
				color: $contrast;
				font-size: 20px;
					
					&:hover,
					&:focus {
					border: none;
					color: $huisstijl;
					}
				
				}
				
				&:hover,
				&:focus {
				border-bottom: 2px solid $huisstijl;
				}
			
			}
		
		}
	
	}

}
  
// @responsive menu
   
.responsive-menus.responsified span.toggler,
.responsive-menus.responsified .responsive-menus-simple {
border: none;
font-size: inherit;
-webkit-border-radius: 0;
border-radius: 0;
background: $primair;
color: $contrast
-webkit-box-shadow: none;
box-shadow: none;
padding: 10px;
}

.responsive-menus.responsified {
width: auto;
clear: none;
position: static;
float: left;
margin: 9px 10px;
font-size: 14px;
border: 1px solid rgba(255,255,255,0.5);
text-transform: uppercase;
font-weight: bold;

	@media #{$mobiel} {
	margin: 0;
	border: none;
	font-size: 12px;
	}

}

.responsive-menus.responsified .responsive-menus-simple li a {
color: $contrast;
border: 0;
border-top: 1px solid rgba(255,255,255,0.25);
text-align: center;

	&.active,
	&.active-trail {
	background: $huisstijl;
	
		&:hover,
		&:focus {
		background: tint($huisstijl,25%);
		}
	}
	
	&:hover,
	&:focus {
	background: rgba(255,255,255,0.15);
	}

}

.responsive-menus.responsified .responsive-menus-simple li ul li a {
padding: $standaard-ruimte-helft;
font-size: 12px;
background: $huisstijl-bruin;
font-weight: normal;

	&:hover,
	&:focus {
	background: tint($huisstijl-bruin,25%);
	}

}

.responsive-menus.responsified .responsive-menus-simple {
background: $primair;
}

.responsive-menus.responsified.responsive-toggled.absolute {
position: static;
}

.responsive-menus.responsified.responsive-toggled.absolute .responsive-menus-simple {
top: $header-hoogte;
left: 0;
width: 100%;

		@media #{$mobiel} {
		top: $header-hoogte-klein;
		}

}

.responsive-menus.responsified.responsive-toggled span.toggler {
border-bottom: 0;
}


// @print 

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

// @zoeken

.search-form {
overflow: hidden;

	.form-item-keys {
	float: left;
	width: 70%;
	padding-right: $standaard-ruimte;
	
		@media #{$tablet} {
		width: 100%;
		padding-right: 0;
		}
	
		label {
		width: 40%;
		float: left;
		padding: 11px 0;
		
			@media #{$tablet} {
			width: 100%;
			}
		
		}
		
		input {
		width: 60%;
		float: right;
		padding-left: $standaard-ruimte;
		
			@media #{$tablet} {
			width: 100%;
			}
		
		}
	
	}
	
	input.form-submit {
	width: 30%;
	float: left;
	
		@media #{$tablet} {
		width: 100%;
		}
	
	}

}

/* @article @single */

article,
#cke_edit-body-und-0-value {
line-height: 24px;

	p, ul, ol {
	overflow: hidden;
	}

	img {
	height: auto !important;
	}

}

.field-name-field-samenvatting,
.field-name-field-subtitel {
text-align: center;
font-size: 14px;
line-height: 30px;
//text-transform: uppercase;
color: tint($huisstijl-bruin,25%);
padding-bottom: $standaard-ruimte;
letter-spacing: 1px;
}

.field-name-field-hero-afbeelding {
padding-bottom: $standaard-ruimte;
}

blockquote {
background: tint($huisstijl-bruin,25%);
color: $contrast;
overflow: hidden;
padding: $standaard-ruimte-dubbel;
padding-bottom: 0;
font-style: italic;
font-size: 18px;
position: relative;
border-left: 20px solid $huisstijl-bruin;
	
	p {
	margin-bottom: $standaard-ruimte-dubbel;	
	}
	
	strong {
	font-style: normal;
	font-size: 12px;
	text-transform: uppercase;
	text-align: right;
	display: block;
	opacity: 0.75;
	letter-spacing: 1px;
	}
	
	&:before {
	@include nucleo;
	content: "\ed0e";
	color: $contrast;
	position: absolute;
	top: $standaard-ruimte;
	left: $standaard-ruimte;
	opacity: 0.25;
	font-size: 64px;
	}

}

.field-name-field-waardering {
	text-align: center;
	padding: $standaard-ruimte 0;

	.ajax-progress-throbber {
		display: none;
	}

	h2.field-label {
		font-size: 1em;
		font-weight: bold;
		margin-bottom: $standaard-ruimte-helft;
		text-transform: none;
	}

	form {
		margin: 0 auto;
		width: auto;

		.description {
			background: none;
			color: $huisstijl-bruin;
			font-size: 10px;
			padding-bottom: 0;
		}
	}

	.form-item-vote .star {
		background: url("../img/stars.png");
		background-repeat: no-repeat;
		background-size: 16px 48px;
		display: inline-block;
		float: none;

		a {
			background: url("../img/stars.png");
			background-repeat: no-repeat;
			background-size: 16px 48px;
			border: none;
		}

		&.hover {

			a {
				background-position: 0 -32px;
			}
		}
	}

	.form-item-vote .on {

		a {
			background-position: 0 -16px;
		}
	}
}

.field-name-field-technical-specification,
.field-name-field-options {
border-top: 1px solid tint($huisstijl-bruin,75%);
margin-top: $standaard-ruimte-dubbel;
padding-top: $standaard-ruimte-dubbel;
}

h2.field-label {
margin-bottom: $standaard-ruimte;
}

.views-field-field-download-specificatie {

	img.file-icon {
	display: none;
	}
	
	a:before {
	content: "\e931";
	@include nucleo;
	padding-right: 10px;
	}
	
}

article .submitted {
text-align: center;
display: block;
padding-bottom: $standaard-ruimte-helft;
}

.field-name-field-delen {
text-align: center;
margin-bottom: $standaard-ruimte-dubbel;
	
	.field {
	display: inline-block;
	}

}

.field-name-field-datum,
.field-name-field-locatie {
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
text-align: center;
margin-bottom: $standaard-ruimte;
}

/* @tabel */

.view-library .view-content {
width: 100%;
overflow-y: auto;
_overflow: auto;
margin: 0 0 1em;
}

.view-library .view-content::-webkit-scrollbar{
-webkit-appearance: none;
width: 14px;
height: 14px;
}

.view-library .view-content::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 3px solid #fff;
background-color: rgba(0, 0, 0, .3);
}

table {
width: 100% !important;
margin: $standaard-ruimte-helft 0;
border: 1px solid tint($huisstijl-bruin,75%);

	td,
	th {
	padding: $standaard-ruimte-helft;
	vertical-align: top;
	border: 1px solid tint($huisstijl-bruin,75%);
	}
	
	th.active {
	background: $huisstijl-bruin;
	
		a {
		color: $contrast;
			
			img {
			display: inline-block;
			margin-left: 5px;
			}
		
		}
	
	}
	
	td.active {
	background: tint($huisstijl-bruin, 95%);
	}
	
	th {
	background: tint($huisstijl-bruin,90%);
	}

}

/* @info */

.info {


	.views-field {
	margin-bottom: $standaard-ruimte-helft;
	
		&.views-field-field-company-logo {
		margin-bottom: $standaard-ruimte;
		}
	
	}

}

.application-info {

	h3 {
	font-size: 14px;
	margin-bottom: 0;
	}

}

/* @max-width */
.max-width {
	margin: 0 auto;
    padding: 50px 20px;
    max-width: 900px;
}

/* @medewerkers */

.views-field-field-e-mail {

	a:before {
	@include nucleo;
	content: "\e686";
	padding-right: 5px;
	}

}

.views-field-field-telephone-number {

	a:before {
	@include nucleo;
	content: "\e749";
	padding-right: 5px;
	}

}

/* @artikelen */

.submitted {
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
color: tint($huisstijl-bruin,25%);
}

/* @pager */

.item-list .pager {
padding: $standaard-ruimte;
position: relative;

	li {
	
		&.pager-last,
		&.pager-first	{
		display: none;
		}
		
		&.pager-next {
		position: absolute;
		right: $standaard-ruimte;
		}
		
		&.pager-previous {
		position: absolute;
		left: $standaard-ruimte;
		}
		
		&.pager-item,
		&.pager-current {
		padding: 0 $standaard-ruimte-helft;
		}

	
	}

}

/* tabs */

ul.primary.tabs {
padding: $standaard-ruimte;
padding-top: 0;
border-bottom: 1px solid tint($huisstijl-bruin,75%);
margin-bottom: $standaard-ruimte;

	li {
	display: inline-block;
	margin-left: 0;
	margin-right: $standaard-ruimte-helft;
		
		@media #{$mobiel} {
		display: block;
		text-align: center;
		font-size: 14px;
		padding-bottom: $standaard-ruimte-helft;
		margin-right: 0;
		}
	
	}
}

/* user register */

#user-register-form,
#user-profile-form {

	.form-wrapper {
	margin-bottom: $standaard-ruimte;
	}
	
	#edit-comment-notify-settings {
	/* comment notify verbergen op profiel bewerken pagina */
	display: none;
	}
	
	#edit-picture {
	/* wijzigen van profiel afbeelding verbergen op profiel bewerken pagina */
	display: none;
	}
	
	#edit-locale {
	/* wijzigen van taal verbergen op profiel bewerken pagina */
	display: none;
	}
	
	.confirm-parent, 
	.password-parent {
	width: auto;
	}
	
	div.form-item div.password-suggestions {
	width: auto;
	border: none;
	margin: 0;
	padding: $standaard-ruimte;
	padding-bottom: 0;
	
		ul li {
		list-style: none;
		margin: 0;
		}
	
	}
	
	.password-strength,
	div.password-confirm {
	display: inline-block;
	float: right;
	padding-bottom: $standaard-ruimte;
	font-size: 14px;
	}	

}

/* client intro */

.client-intro {

	.views-field-field-company-logo {
	text-align: center;
		
		img {
		margin: 0 auto;
		max-width: 200px;
		padding-bottom: $standaard-ruimte-dubbel;
		}
	}

}

hr {
display: block;
width: 100%;
clear: both;
border: none;
height: 1px;
background: $huisstijl-lichtgrijs;
margin: $standaard-ruimte 0;
overflow: hidden;
}

/* secure regel op formulieren */

p.secure {
margin-bottom: 0;
margin-top: $standaard-ruimte-helft;
font-size: 12px;
text-transform: uppercase;
color: $huisstijl-bruin;
letter-spacing: 1px;
	
	&:before {
	@include nucleo;
	padding-right: 5px;
	content: "\e698";
	}

}

/* waarschuwingen alleen tonen aan gebruikers met de Administrator rol */

.messages.warning {
display: none;

	.role-administrator & {
	display: block;
	}

}

/* @alert */

.region-alert {
	background-color: $huisstijl;
	clear: both;

	.submenu & {
		padding-top: 32px;

		@media #{$desktop-groot} {
			padding-top: 0;
		}
	}

	a {
		color: $contrast;
		font-weight: bold;
		opacity: 0.75;

		&:hover,
		&:focus {
			opacity: 1;
		}
	}

	p {
		margin: 0;
		padding: 10px;
		text-align: center;
	}
}

/* @EU cookie compliance */

#sliding-popup {
	padding: $standaard-ruimte-helft 0 0 0;
}

#sliding-popup .eu-cookie-compliance-default-button:hover, #sliding-popup .eu-cookie-compliance-hide-button:hover, #sliding-popup .eu-cookie-compliance-more-button-thank-you:hover, #sliding-popup .eu-cookie-withdraw-button:hover,
#sliding-popup .eu-cookie-compliance-default-button, #sliding-popup .eu-cookie-compliance-hide-button, #sliding-popup .eu-cookie-compliance-more-button-thank-you, #sliding-popup .eu-cookie-withdraw-button {
	background: none;
	border: 1px solid #fff;
	border-radius: 0;
	box-shadow: none;
	color: #fff;
	text-shadow: none;
}

/* RR201806291315: homepage redesign specific styles */

.front.two-sidebars {
	background-image: url('../img/home-bg.gif');
	font-weight: 300;

	@media #{$desktop-klein} {
		background: $contrast;
	}

	#content {
		width: 50%;
	}	

	#main {
		background: none;
	}

	aside {
		width: 25%;
	}
}

.block.featuring,
.block.cases {
	padding: 0;
}

.featuring--whighlights,
.cases--whighlights {

	.view {
		.attachment,
		.attachement + .view-content {

			@media #{$desktop-klein} {
				float: left;
				width: 50%;
			}

			@media #{$tablet-klein} {
				width: 100%;
			}
		}
	}
}

.highlight__link {
	color: $contrast;
	display: block;
	position: relative;
	overflow: hidden;

	.highlight__image img {
		//to make sure two highlights are the same height as the video
		max-width: 101.3%;
	}

	&:after {
		@include animeer;
		background: linear-gradient(236.91deg, rgba(238, 48, 50, 0.86) -1.52%, rgba(0, 0, 0, 0.56) 100%);
		bottom: auto;
		content: "";
		display: block;
		height: 100%;
		left: 0;
		position: absolute;
		top: 0;
		width: 100%;
	}

	.highlight__type {
		font-size: 12px;
		left: $standaard-ruimte-dubbel - $standaard-ruimte-helft;
		padding: 0 $standaard-ruimte-helft;
		position: absolute;
		text-transform: uppercase;
		top: $standaard-ruimte-dubbel - $standaard-ruimte-helft;
		z-index: 2;

		&:before {
			@include animeer;
			background-color: rgba(255,255,255,1);
			border-radius: 15px;
			content: "";
			display: block;
			height: 100%;
			left: 0;
			position: absolute;
			top: 0;
			width: 0px;
			z-index: -1;
		}
	}

	.highlight__text {
		bottom: $standaard-ruimte-dubbel - $standaard-ruimte-helft;
		left: $standaard-ruimte-dubbel - $standaard-ruimte-helft;
		padding: 0 $standaard-ruimte-helft;
		position: absolute;
		right: $standaard-ruimte-dubbel - $standaard-ruimte-helft;
		z-index: 2;
	}

	.highlight__title {
		display: block;
		font-weight: bold;
	}

	.highlight__intro {
		font-size: 14px;
		font-weight: 300;

		@media #{$tv} {
			font-size: 12px;
			line-height: 16px;
		}
	}

	&:hover,
	&:focus {
		border: none;

		&:after {
			background: $huisstijl;
			top: 50%;
		}

		.highlight__type {
			color: #000;

			&:before {
				width: 100%;
			}
		}
	}	
}

.featuringmore--item,
.casesmore--item {
	overflow: hidden;
	padding: 30px $standaard-ruimte-dubbel 0 $standaard-ruimte-dubbel;
	min-height: 230px;

	@media #{$tv} {
		min-height: 330px;
	}

	@media #{$desktop-klein} {
		min-height: auto;
	}

	.featuring__image,
	.cases__image {
		float: left;
		padding-top: $standaard-ruimte-helft;
		width: 50%;

		@media #{$tv} {
			width: 100%;
		}
	}

	.featuringmore__title,
	.casesmore__title {
		color: $primair;
		font-size: 14px;
		line-height: 16px;

		&:hover,
		&:focus {
			border: none;
			color: $huisstijl;
		}
	}

	.featuring__title-w-summary,
	.cases__title-w-summary {
		float: right;
		padding-left: $standaard-ruimte;
		width: 50%;

		h3 {
			font-weight: bold;
		}

		@media #{$tv} {
			padding-left: 0;
			padding-top: $standaard-ruimte-helft;
			width: 100%;
		}		
	}
}

.video {
	video {
		max-width: 100%;
	}
}

.home--image {
	p {
		margin-bottom: 0;
	}

	img {
		height: auto !important;
		max-width: 100% !important;
		width: 100% !important;
	}
}

.tagline {
	background-color: $primair;
	color: $contrast;
	letter-spacing: 2px;
	padding: $standaard-ruimte;
	text-align: center;
	text-transform: uppercase;

	p {
		margin: 0;
	}
}

.newsletter--footer {
	text-align: center;

	.cta {
		display: inline-block;

		&:before {
			margin-right: 10px;
		}
	}
}

//TDJ201810101103 Fix for lowercase titles as provided by Tim de Jong, for more info see: https://basecamp.com/1933139/projects/11488814/todos/357932740#comment_653634291

/* RR201811222018 Disabling uppercase as requested: https://basecamp.com/1933139/projects/11488814/todos/357932740#comment_662688656


highlight__link .highlight__title {
  text-transform: uppercase;
}*/

.highlight__link .highlight__title span {
  text-transform: lowercase;
}