/*
Theme Name: Hexspoor E-fulfillment
Author:  Lawless & Lotski
*/

a:hover {
	color:#009BA7;
}

.wysiwyg a {
	color:#009BA7;
	font-weight: bold;
}
.wysiwyg a:hover {
	color:#b15480;
}
ul
h1.normal {
		font-weight: 400;
	}
	

@font-face {
	font-family: 'Baskerville-Italic';
	src:	url('../fonts/Baskerville-Italic.eot');
	src:	url('../fonts/Baskerville-Italic.eot?#iefix') format('embedded-opentype'),
		url('../fonts/Baskerville-Italic.woff') format('woff'),
		url('../fonts/Baskerville-Italic.woff2') format('woff2'),
		url('../fonts/Baskerville-Italic.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Baskerville-SemiBoldItalic';
	src:	url('../fonts/Baskerville-SemiBoldItalic.eot');
	src:	url('../fonts/Baskerville-SemiBoldItalic.eot?#iefix') format('embedded-opentype'),
		url('../fonts/Baskerville-SemiBoldItalic.woff') format('woff'),
		url('../fonts/Baskerville-SemiBoldItalic.woff2') format('woff2'),
		url('../fonts/Baskerville-SemiBoldItalic.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}



* {
	outline: none;
	border: none;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

html, body	{
	margin: 0;
	padding: 0;
	color: #000;
}
body {
	height: 100%;
	font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
	color: #585857;
	/* http://www.cssfontstack.com/trebuchet-ms */
}

.blok {
	border: 3px solid #585857!important;
	float:left;
	line-height: 35px;
	font-size: 35px;
	text-transform: uppercase;
	padding: 10px;
	cursor:pointer;
	height: 250px;
	width: 250px;
	margin: 2%;
	box-sizing: border-box;
	color: #585857;
	text-align: center;
	font-size: 35px;
		line-height:35px;
		align-items: center;
    	display: flex;
    	justify-content: center;
		position:relative;
		z-index:100;
}

.blok:hover {
	color:#009BA7;
}

.blok img {
position:absolute;
left:-17px;
margin-left:50%;
bottom:15px;
}

.bloks {
	height: 450px;
	margin-top: 30px;
}

.HomeVakken {
	width: 100%;
    height: 500px;
    background-color: #e5eeea;
    margin: 50px 0px 100px 0px;
}

.text ul, .wysiwyg.challenges ul {
list-style-type:none;
}

.text ul li {
	list-style-type:none;
}

.text ul li:before, .wysiwyg.challenges ul li:before {
	list-style-type:none;
    content: '';
    position: absolute;
    left: 15px;
    width: 22px/*55px*/;
    height: 28px/*48px*/;
    background-image: url(../img/icon-arrow.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 12px;
}


.only-large, .no-small {
	display: none;
}
.row, .column, .columns {
	position: relative;
}
.row {
	/*max-width: 320px;*/
}
.row.xl {
	max-width: 100%;
}
.row .row {
	margin-left: auto;
	margin-right: auto;
}
/* Column padding fix for mobile */
.column, .columns {
	padding-left: 1.875rem;
	padding-right: 1.875rem;
}

body.dna column, body.dna .columns {
	padding-left: .7rem;
	padding-right: .7rem;
}


ul, ol, ul li, ol li, h1, h2, h3, h4, h5, h6, figure {
	margin: 0;
	padding: 0;
}
ul, ol {
	list-style: none;
}

a:active, a:hover, a:link, a:focus {
	outline: 0;
	text-decoration: none;
}
a, button {
	-webkit-transition: all 300ms ease-out;
	-moz-transition: all 300ms ease-out;
	-ms-transition: all 300ms ease-out;
	-o-transition: all 300ms ease-out;
	transition: all 300ms ease-out;
}
nav a {
	-webkit-transition: none;
	-moz-transition: none;
	-ms-transition: none;
	-o-transition: none;
	transition: none;
}
nav ul.main-nav {
	-webkit-transition: right 300ms ease-out;
	-moz-transition: right 300ms ease-out;
	-ms-transition: right 300ms ease-out;
	-o-transition: right 300ms ease-out;
	transition: right 300ms ease-out;
}

.vormpjes {
    display: none;
}

/*Utility classes*/
.center {text-align: center;}
.no-pad-left {padding-left:0 !important;}
.no-pad-right {padding-right:0 !important;}
.no-pad-round {padding:0 !important;}
.row.home-row {padding:0 !important;}
/* ==================================================================
	3.0 Text+ colors
================================================================== */
/*	3.1 Colors
	-------------------------------------------------------------- */
	.beige {
		background-color: #7fa698;
	}
	p.beige, a:not(.button).beige	{
		color: #7fa698;
	}
	.lime {
		background-color: #bbca4a;
	}
	p.lime, a:not(.button).lime	{
		color: #bbca4a;
	}
	.blue,
	.wysiwyg .knop {
		background-color: #34a2ab;
	}
	p.blue, a:not(.button).blue	{
		color: #34a2ab;
	}
	.grass {
		background-color: #72a45d;
	}
	p.grass, a:not(.button).grass	{
		color: #72a45d;
	}
	.light_green {
		background-color: #e5eeea;
	}
	p.light_green, a:not(.button).light_green	{
		color: #e5eeea;
	}
	.wine {
		background-color: #b15480;
	}
	p.wine, a:not(.button).wine	{
		color: #b15480;
	}
	.wine_red {
		background-color: #8b5261;
	}
	p.wine_red, a:not(.button).wine_red	{
		color: #8b5261;
	}

	/* hotfix the background for paragraph & anchor tags that are not buttons */
	p.beige, a:not(.button):not(.block).beige, p.lime, a:not(.button):not(.block).lime, p.blue, a:not(.button):not(.block).blue, p.grass, a:not(.button):not(.block).grass, p.light_green, a:not(.button):not(.block).light_green, p.wine, 
	a:not(.button):not(.block).wine, p.wine_red, a:not(.button):not(.block).wine_red {
		background-color: transparent;
	}

	/* hotfix the colors for .button & button tags that have background colors except for white */
	.button.beige, button.beige, .button.lime, button.lime, .button.blue, button.blue, .button.grass, button.grass, .button.wine, button.wine, .button.wine_red, button.wine_red {
		color: #fff;
	}

/*	3.2 Headings
	-------------------------------------------------------------- */
	h1, h2, .h2, .fakeTitle {
		font-weight: 700;
	}
	.fakeTitle {display: block;}
	h1,
	.fakeTitle {
		font-size: 28px;
		line-height: 43px;
		padding: 5px 0;
		text-transform: uppercase;
		margin: 30px 0 20px 0;
	}
	
	.homeTtl {font-size:24px;margin-bottom: 0;}
	h1.white {
		color: #fff;
	}
	h1 img.icon {
		width: 20px;
		margin-top: -5px;
	}
	.h2 {
		font-size: 22px;
		line-height: 28px;
		color: #289ca7;
		display: block;
		margin-bottom: 5px;
	}
	h3 {
		font-size: 16px;
		line-height: 25px;
	}

/*	3.3 Texts & lists
	-------------------------------------------------------------- */
	p, ul li {
		font-size: 14px;
		line-height: 22px;
		margin: 0;
		margin-bottom: 22px;
	}/* De kracht van de org: */
	ul li {
		margin-bottom: 0;
	}
	p.intro {
		margin-bottom: 35px;
	}
	p.medium {
		font-size: 18px;
	}
	p.no-margin {
		margin-bottom: 0;
	}
	p.services {
		font-size: 14px;
		position: relative;  /* put thhis on relative, otherwise it won't work */
	}
	
	.wysiwyg ul {
		list-style: disc;
		padding-left: 2.5rem;
		margin-bottom: 22px;
	}
	.wysiwyg ol {
		list-style: decimal;
		padding-left: 2.5rem;
		margin-bottom: 22px;
	}

	.wysiwyg img[align="left"]:not(.plus), .wysiwyg img[align="right"]:not(.plus) {
		width: 100%;
		margin: 0 20px 0 0;
	}
	
	p.store {
		font-size: 18px;
		line-height: 40px;
		font-weight: 700;
		text-align: center;
	}
	p.store img {
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 5px;
		display: block;
	}

	p span.heading, p span.heading-wysiwyg {
		font-size: 22px;
		display: block;
		margin-bottom: 22px;
	}
	time {
		font-size: 36px;
		color: #585857;
		display: block;
		line-height: 40px;
		margin-bottom: 20px;
		position: relative;
		text-align: center;
	}
	time img {
		display: block;
		margin: 20px auto 5px auto;
	}

	p span.heading.large img, p span.heading-wysiwyg img {
		margin-right: 20px;
		margin-top: 6px;
	}
	p span.heading-wysiwyg img {
		margin-top: 17px;
		margin-bottom: 5px;
	}
	
	footer .show-for-small-only p {
		line-height: 50px;
		padding: 45px 0;
		margin: 0;
		font-size: 24px;
	}

	/* Hotfix on font families, since those tags use both fonts */
	p span.heading, .testimonial-holder figcaption, .cases figcaption, time {
		font-family: 'Baskerville-Italic', serif;
	}
	.card .content .cardBack span {
		 font-family: 'Baskerville-SemiBoldItalic', serif;
	}
	
	.testimonial-holder figcaption span, .cases figcaption span, section.diensten .box {
		font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
	}

	/* text alignments */
	.text-left {
		text-align: left;
	}
	.text-center {
		text-align: center;
	}
	.text-right {
		text-align: right;
	}
	.text-justify {
		text-align: justify;
	}

/*	3.4 Blockquotes
	-------------------------------------------------------------- */

/*	3.5 Anchors
	-------------------------------------------------------------- */
	a, footer a {
		color: #585857;
	}
	footer .show-for-small-only a {
		margin: 0 22px;
	}

/*	3.6 Buttons
	-------------------------------------------------------------- */
	.button, button, .knop {
		width: auto;
		min-height: 50px;
		line-height: 32px;
		padding: 9px 20px;
		text-align: center;
		font-size: 14px;
		display: inline-block;
		text-transform: uppercase;
	}

	.button.bordered, button.bordered {
		border: 2px solid #979797;
		color: #55565a;
		min-height: 46px;
		padding-top: 7px;
		padding-bottom: 7px;
		font-weight: 700;
		font-size: 16px;
	}
	.button.b_white, button.b_white {
		color: #fff;
		border-color: #fff;
		padding-left: 20px;
		padding-right: 20px;
		margin: 0 auto;
		display: block;
		margin-bottom: 20px;
	}
	.button.small {
		min-height: 32px;
		line-height: 16px;
		padding: 8px 10px;
		font-size: 14px;
		text-transform: none;
		margin: 5px 0 0 10px;
	}
	.button.large, .button.full {
		font-weight: 700;
		font-size: 22px;
		min-height: 60px;
		padding-top: 14px;
		padding-bottom: 14px;
	}
	.button.full, button.full {
		width: 100%;
	}
	.button.no-margin, button.no-margin {
		margin: 0 !important;
	}

	.icons .button {
		width: 25%;
		height: 80px;
		line-height: 80px;
		padding: 0;
		float: left;
	}

	.icons.home .button {
			width:100%;
		float: none;
		height: 65px;
		line-height: 65px;
}

	footer .button {
		position: absolute;
		right: 1.125rem;
		top: 0;
		max-width: 200px;
	}
	footer .button.large {
		font-size: 16px;
		min-height: 50px;
		padding: 9px 20px;
	}

/* ==================================================================
	4.0 Sections + Panels + Footer
================================================================== */
	#container, nav, .sub-nav, .inner, section, .color-holder, .testimonial-content, .spanner, .blog .spacer, footer {
		position: relative;
		width: 100%;
		height: auto;
		margin: 0;
		padding: 0;
	}
	#container {
		min-height: 480px;
		overflow: hidden;
		display: none;
		padding-top: 80px;
	}

	
	body.contact {
		background-image: url(../../images/bg_contacht-mobilexl.jpg);
		background-position: center top;
		background-repeat: no-repeat;
		background-size: auto;
		background-attachment: fixed;
	}

	section.cases-view:before, section.cases-view:after, section.intro-blog:before, section.intro-blog:after, p.services:before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: -2;
		background-color: #e5eeea;
	}


	section.cases-view:before, section.intro-blog:before {
		height: 330px;
		background-color: #fff;
		z-index: -1;
	}
	section.intro-blog:before {
		height: 195px;
	}
	p.services:before {
		left: 50%;
		margin-left: -500%;
		width: 1000%;
		z-index: -1;
	}

	/* spanners & spacer to fill out white spaces */
	.spanner.floated {
		float: left;
	}
	.spanner._s15 {
		height: 15px;
	}
	.spanner._20 {
		height: 20px;
	}
	.spanner._25 {
		height: 25px;
	}
	.spanner._30 {
		height: 30px;
	}
	.spanner._35 {
		height: 35px;
	}
	.spanner._40 {
		height: 40px;
	}
	.spanner._45 {
		height: 45px;
	}
	.spanner._50 {
		height: 50px;
	}
	.spanner._55 {
		height: 55px;
	}
	.spanner._60 {
		height: 60px;
	}
	.spanner._75 {
		height: 75px;
	}
	.spanner._120 {
		height: 120px;
	}

	.spanner._s15 {
		height: 15px;
	}
	.spanner._s20 {
		height: 20px;
	}
	.spanner._s30 {
		height: 30px;
	}

	.diensten:not(.home) .spacer, .highlights .spacer, .duurzaam .spacer, .blog .spacer {
		min-height: 100px;
		float: left;
		width: 100%;
		max-width: 30px;
	}
	.diensten:not(.home) .spacer {
		float: none;
	}


/* ==================================================================
	5.0 Navigatie
================================================================== */
	nav {
		position: fixed; 
		width: 100%; 
		height: auto; 
		min-height: 80px; 
		left: 0; 
		top: 0; 
		z-index: 9998; 
		background-color: #fff;
	}
	nav .inner {
		height: 80px; 
		margin: 0 auto;
	}
	nav .logo-link {
		max-width: 160px; 
		position: relative; 
		display: inline-block;
		margin: 14px 0 0 16px;
	}
	nav .toggler-link {
		position: absolute; 
		width: 20px; 
		height: 20px; 
		top: 25px; 
		right: 20px; 
		z-index: 1;
	}
	nav .logo-link img, nav .toggler-link img {
		width: 100%:
	}
	nav ul.main-nav {
		position: fixed; 
		top: 0; 
		right: -225px; 
		width: 100%; 
		height: 100%; 
		max-width: 225px; 
		padding: 82px 35px;
	}
	nav.opened ul.main-nav {
		right: 0;
	}

	nav .languages {
		position: absolute; 
		right: 65px; 
		top: 25px; 
		width: 60px; 
		height: 25px; 
		z-index: 1;
	}
	nav .languages a {
		display: inline-block; 
		float: left; 
		width: 30px; 
		height: 25px; 
		line-height: 25px; 
		text-align: center; 
		color: #55565a; 
		border-bottom: 2px solid transparent;
	}
	nav.opened .languages a {
		color: #fff;
	}
	nav .languages a.active {
		border-color: #34a2ab;
	}
	nav.opened .languages a.active {
		border-color: #fff;
	}
	nav .languages a span.mob {
		display: block;
	}
	nav .languages a span.desktop {
		display: none;
	}

	nav ul li {
		width: 100%; 
		display: block; 
		min-height: 30px;
	}
	nav ul li a {
		color: #fff; 
		font-weight: 700; 
		font-size: 16px; 
		line-height: 30px; 
		text-transform: uppercase;
	}
	nav ul li > ul {
		padding-top: 12px; 
		padding-bottom: 12px;
	}
	nav ul li > ul li {
		min-height: 22px;
	}
	nav ul li > ul li a {
		font-weight: 400; 
		text-transform: none; 
		font-size: 14px; 
		line-height: 22px;
	}

	/* Subnav - desktop only and only on DNA page so far */
	.sub-nav li {
		min-height: 50px; 
		line-height: 35px; 
		color: #289ca7; 
		font-size: 20px; 
		padding-left: 50px;
	}
	.sub-nav.home {padding:10px 30px;}
	.sub-nav.home li {padding-left:0;width:50%;float:left;}
	.sub-nav a {
		display: inline-block;
	}
.sub-nav a.here {border-bottom:3px solid #34a2ab;}
	.sub-nav img {
		max-width: 11px; 
		margin-right: 5px;
	}

/* ==================================================================
	6.0 Sliders
================================================================== */
	.testimonial-holder {
		position: relative; 
		z-index: 1;
	}
    #swiper-bg {
        background: none;
    }
	.testimonial-holder img.plus {
		position: absolute; 
		z-index: 10; 
		display: none;
	}
	.cases figcaption, .testimonial-holder figcaption {
		position: absolute; 
		left: 0; 
		bottom: 0; 
		width: 100%; 
		color: #fff; 
		font-size: 36px; 
		line-height: 36px; 
		padding: 0 20px 20px 20px; 
		text-shadow: 0 5px 4px rgba(0,0,0,0.5);
        box-sizing: border-box;
	}
	.cases figcaption span, .testimonial-holder figcaption span {
		font-size: 18px; 
		margin-top: 20px; 
		text-transform: uppercase; 
		font-weight: 700; 
		display: block; 
		text-shadow: 1px 1px #000;
}

	}

	.testimonial-content {
		padding: 10px 0 50px 0; 
		margin-top: 30px;
	}

	.testimonial-content:before, .testimonial-content:after {
		/*content: ''; 
		position: absolute; 
		top: 0; 
		height: 100%;
		background-color: #e5eeea;*/
	}

	.testimonial-content:before {
		width: 200px; 
		right: 100%;
	}

	.testimonial-content:after {
		left: 100%; 
		width: 1920px;
	}

	.swipe-tag {
		position: absolute;
		left: 0;
		top: 0; 
		width: 100%; 
		height: 100%; 
		background: transparent; 
		z-index: 999;
        pointer-events: none;
	}
	.swipe-tag	img
	{
		position: absolute; 
		left: 50%; 
		top: 50px;
        margin-left: -26px;
		width: 52px; 
		height: 66px;
	}

/* ==================================================================
	7.0 Images
================================================================== */
	figure {
		position: relative;
		width: 100%;
	}
	figure a {
		display: block;
	}
	figure img:not(.icon) {
		width: 100%;
	}
	figure img.icon {
		margin-top: -4px;
	}

	.cases figure {
		position: relative;
		display: inline-block;
		max-width: 100%;
		margin: 0 0 30px 0;
	}
	.slick-slide img.icon {
		display: inline-block;
	}

/* ==================================================================
	8.0 Content + blocks
================================================================== */
	.diensten img {
		width: 100%;
	}
	.diensten .button img {
		width:auto;
	}
	.box {
		position: absolute;
		top: 50%;
		left: 0;
		width: 100%;
		-webkit-transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);
	}

	.banner {
		position: absolute;
		width: 10px;
		height: 192px;
		top: 30px; /* 30px om uit te lijnen met de top van de afbeeldingen, video */
		right: 0;
		display: none;
	}
	.banner.video {
		top: 55px;
	}
	footer .banner {
		top: auto;
		bottom: 0;
		width: 100%;
		max-width: 160px;
		height: 12px;
		display: block;
	}
	/* Grote border vlakken. Komen terug op de home en Case detail pagina */
	.fulfilment:mot(.content) {
		position: absolute;
		right: 0;
		top: 100%;
		margin-top: -40px;
		width: 100%;
		max-width: 240px;
		border: 3px solid #585857;
		padding: 15px 25px 25px 25px;
		display: none;
		z-index: 1;
	}
	.fulfilment:not(.content) p:not(.medium) {
		font-size: 22px;
		line-height: 28px;
		text-transform: uppercase;
		color: #585857;
		text-align: center;
		margin: 0;
	}
	.fulfilment .button {
		font-size: 18px;
		padding: 9px 0;
		min-height: 50px;
		border-color: #585857;
	}
	.fulfilment.cView {
		position: relative;
		width: 100%;
		max-width: 100%;
		margin: 0;
		right: auto;
		top: auto;
		display: block;
		float: left;
	}
	.fulfilment.cView .button {
		padding-left: 20px;
		padding-right: 20px;
	}	
	
	.diensten.row {
		max-width: 320px;
	}
	.diensten.home p {
		font-size: 36px;
		line-height: 42px;
		padding-left: 30px;
		padding-right: 30px;
		text-transform: uppercase;
	}
	.diensten .column {
		padding:  0 10px 3px 10px;
	}
	.diensten .column.mL {
		padding-left: 15px;
		padding-right: 5px;
		text-align: right;
	}
	.diensten .column.mR {		
		padding-right: 15px;
		padding-left: 5px;
		text-align: left;
	}
	.diensten .column a {
		position: relative;
		display: inline-block;
		width: 140px;
		height: 140px;
	}
	.diensten .box {
		font-size: 17px;
		line-height: 20px;
		font-weight: 700;
		color: #fff;
	}
	.blog .plus {
		position: absolute;
		top: -28px;
		left: -28px;
		max-width: 40px;
	}
	.color-holder.intro, .blog.extra .color-holder:nth-child(2n+2), .blog.extra .color-holder:nth-child(2n+2):before, .blog.extra .color-holder:nth-child(2n+2):after {
		background-color: #e5eeea;
	}
	.color-holder.intro:before, .blog.extra .color-holder:nth-child(2n+2):before, .blog.extra .color-holder:nth-child(2n+2):after {
		content: '';
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
		display: block;
	}
	.color-holder.intro:before {
		height: 65px;
		background-color: #fff;
		left: 0;
	}
	.blog.extra .color-holder:nth-child(2n+2):before {
		right: 100%;
	}
	.blog.extra .color-holder:nth-child(2n+2):after {
		left: 100%;
	}

	/* dna services stuff - on dna page */
	.small-up-2 > .column:nth-of-type(2n+1), .small-up-2 > .columns:nth-of-type(2n+1) {
		clear: none;
	}

	/*.medewerkers .secret-row {
		position: absolute; 
		left: 50%; 
		height: auto; 
		margin-left: -790px; 
		width:  1580px;
	}*/
	.row.people {
		max-width:320px;
		left:3%;
	}
	#employees-grid figure {
		width: 140px;
	}
	#employees-grid .gutter-sizer {
		width: 20px;
	}
	#employees-grid .stamp {
		position: absolute; 
		border: 2px solid #585857; 
		color: #585857; 
		text-align: center; 
		text-transform: uppercase; 
		font-size: 32px; 
		width: 300px; 
		height: 140px; 
		line-height: 50px; 
		top: 160px; 
		left: 0px;
		padding:20px;
	}
	a.stamp {cursor:pointer;}
	.duurzaam .column {
		height: 250px; 
		text-align: center; 
		padding: 25px 22px 35px 22px; 
		margin-bottom: 30px;
	}
	.duurzaam	.mens {
		background: rgba(187,202,74,0.20); 
		color: #bbca4a;
	}
	.duurzaam .mens a {color:#bbca4a;}
	.duurzaam .milieu {
		background: rgba(114,164,93,0.20); 
		color: #72a45d;
	}
	.duurzaam .milieu a {color:#72a45d;}
	.duurzaam	.maatschappij {
		background: rgba(127,166,152,0.20); 
		color: #7fa698;
	}
	.duurzaam .maatschappij a {color:#7fa698;}
	.duurzaam p {
		margin-bottom: 0;
		padding: 0 5px;
	}
	.duurzaam .fa, .duurzaam .ion-heart {
		font-size: 72px; 
		display: block; 
		margin-bottom: 20px;
	}
	.duurzaam span {
		display: block; 
		font-size: 26px; 
		text-transform: uppercase; 
		font-weight: 700; 
		margin-bottom: 15px;
	}
	.duurzaam	.plus {
		position: absolute; 
		width: 44px; 
		height: 44px; 
		top: 50%; 
		margin-top: -22px; 
		left: 50%; 
		margin-left: -22px; 
		display: block;
	}
	.duurzaam	.plus.left {
		margin-top: -178px;
	}
	.duurzaam	.plus.right {
		margin-top: 102px;
	}

	.cases.highlights .column {
		padding: 0;
	}
	.cases.highlights .spacer:last-of-type {
		display: none !important;
	}
	
	.contactPerson {
    position: relative;
    width: 100%;
    height: auto;
    /*min-height: 145px;*/
    margin-bottom: 140px;
}

.contactPerson.large {
    margin-top: 100px;
}

.contactPerson .box {
    position: relative;
    top: auto;
    left: auto;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    /*
		position: absolute;
		top: 50%;
		left: 0;
		width: 100%;
		-webkit-transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);
		*/
}

.contactPerson h3 {
    font-weight: normal;
}

.contactPerson .inner {
    position: relative;
    width: 100%;
    height: auto;
    border: 2px solid #585857;
    padding: 27px;    
}

.contactPerson figure {
    position: absolute;
    top: -95px;
    overflow: hidden;
    width: 88px;
    height: 88px;
    -webkit-transform: rotate(45deg);
    -webkit-transform-origin: 50% 50%;
    -ms-transform: rotate(45deg);
    -ms-transform-origin: 50% 50%;
    transform: rotate(45deg);
    transform-origin: 50% 50%;
}

.contactPerson figure img {
    position: absolute;
    z-index: -1;
    width: 130px;
    max-width: 130px;
    height: 130px;
    left: 50%;
    top: 50%;
    margin: -65px 0 0 -65px;
    -webkit-transform: rotate(-45deg);
    -webkit-transform-origin: 50% 50%;
    -ms-transform: rotate(-45deg);
    -ms-transform-origin: 50% 50%;
    transform: rotate(-45deg);
    transform-origin: 50% 50%;
}

.contactPerson h3 {
    font-size: 22px;
    line-height: 26px;
    margin-bottom: 8px;
}

.contactPerson p {
    font-size: 13px;
    color: #585857;
    line-height: 24px;
    margin: 0;
}

.contactPerson.large p {
    font-size: 12px;
    line-height: 20px;
    margin: 10px 0;
}

.contactPerson.large .button {
    font-size: 14px;
    padding: 0 12px;
    min-height: 28px;
    line-height: 28px;
    border-width: 1px;
    width: auto;
}

.contactPerson .fa {
    font-size: 12px;
    color: #B15480;
    margin-right: 5px;
}

.contactPerson .fa.big {
    font-size: 18px;
    vertical-align: middle;
}

.contactPerson:nth-child(even):not(.large) figure {
    left: 25px;
}

.contactPerson:nth-child(odd):not(.large) figure {
    right: 25px;
}

.contactPerson:last-of-type {
    margin-bottom: 0;
}

	
	footer {
		background-color: #fff;
	}


/* ==================================================================
	9.0 Forms
================================================================== */	
    .form-list, .form-list li {
		position: relative;
		width: 100%;
		min-height: 50px;
		color: #fff;
		font-size: 20px;
		line-height: 30px;
		z-index: 1;
	}
    .form-list.overlay {
        padding: 0 5px;
    }
    .form-list.marginBtm {
        margin-bottom: 20px !important;
    }
    .form-list.big li {
		margin-bottom: 20px;
    }
    .form-extra,
    .form-extra li {
        position: relative;
        display: block;
        float: left;
        width: 100%;
    }
    .form-extra button {
        margin-top: 0 !important;
    }
    .freeform-row {
        margin: 0;
		margin-bottom: 20px !important;
    }
    .freeform-row .freeform-column {
        margin-left: 10px !important;
        margin-right: 10px !important;
    }
    .freeform-row .freeform-column .freeform-label {
        display: none;
    }
    .freeform-row .freeform-column {
        padding: 0 !important;
    }
    .form-list li:last-of-type {
		margin-bottom: 0;
	}
	.form-list input:not([type=checkbox]), .form-list textarea, .form-list button {
		display: block;
		position: relative;
		width: 100%;
		height: 48px;
		line-height: 28px;
		border: 1px solid #55565a;
		color: #55565a;
		padding: 10px 20px;
		border-radius: 0;
		-webkit-appearance: none;
	}
	.form-list input.error {
		border:1px solid #ff0000;
	}
	.form-list textarea {
		resize: none;
		height: 190px;/* 260,356*/
	}
	.form-list button {
		text-align: center;
		text-transform: uppercase;
        background-color: #b15480;
		color: #fff;
		border-color: transparent;
		font-size: 22px;
        margin-top: 20px;
	}

	.styledRadio, .form-list li.text span, .form-list li.text label	{
		display: inline-block;
		width: auto;
		float: left;
	}
	.styledRadio {
		background-size: cover;
		z-index: 99;
		margin-right: 10px;
		margin-top: 4px;
	}
	.form-list li.text span:not(.big) {
		margin: 0 10px 0 0;
	}
	.form-list li.text span.big {
		display: block;
		float: none;
	}
	.form-list label.error, label.error {
		position: absolute; 
		left: 5%; 
		top: 100%;
		margin-top: -10px; 
		background-color: #f00; 
		color: #fff; 
		border-radius: 0px; 
		font-size: 14px; 
		width: 90%; 
		min-height: 25px; 
		line-height: 15px; 
		padding: 5px 20px;
		z-index: 10;
		display: block;
	}

/* ==================================================================
	10.0 Misc.
================================================================== */
	.flex-video {
		margin-bottom: 0;
	}

	.special {
		background-color: #fff;
		margin-top: 30px;
	}
	.special .block {
		position: relative;
		width: 100%;
		margin: 0 auto;
		padding: 30px 1.875rem;
	}
	.special .block::before, .special .block::after, .form-list li.text::before, .form-list li.text::after {
		content: ' ';
		display: table;
	}
	.special .block::after, .form-list li.text::after {
		clear: both;
	}
	.special .block p {
		width: 100%;
		float: left;
		display: inline-block;
	}


	.cardToggler {
		cursor: pointer;
	}
	.card {
		position: relative; 
		display: block; 
		margin: 0; 
		width: 100%; 
		height: 140px;
		perspective: 1000px; 
		-webkit-perspective: 1000px; 
		-moz-perspective: 1000px; 
		-o-perspective: 1000px; 
		-ms-perspective: 1000px;
	}

	.card .content {
		transition: 0.5s ease-out; 
		-webkit-transition: 0.5s ease-out; 
		-moz-transition: 0.5s ease-out;
		-o-transition: 0.5s ease-out; 
		-ms-transition: 0.5s ease-out; 
		transform-style: preserve-3d; 
		-webkit-transform-style: preserve-3d; 
		-moz-transform-style: preserve-3d; 
		-o-transform-style: preserve-3d; 
		-ms-transform-style: preserve-3d; 
		backface-visibility: visible; 
		-webkit-backface-visibility: visible; 
		-moz-backface-visibility: visible; 
		-o-backface-visibility: visible; 
		-ms-backface-visibility: visible; 
		position: relative; 
		width: 100%; 
		height: 100%;
	}
	.card .content span {
		font-size: 16px; 
		line-height: 20px; 
		text-transform: none;
	}
	.card.applyflip .content {
		transform: rotateY(180deg); 
		-webkit-transform: rotateY(180deg); 
		-moz-transform: rotateY(180deg); 
		-o-transform: rotateY(180deg); 
		-ms-transform: rotateY(180deg);
	}
	.card .content .cardFront {
		background-color: #fff; 
		z-index: 1; 
		position: relative;
	}
	.card .content .cardFront .plus {
		position: absolute; 
		width: 66px; 
		height: 66px; 
		left: 75%; 
		top: 75%; 
		margin-top: -33px; 
		margin-left: -33px; 
		z-index: 1; 
		opacity: 0;
		transition: opacity 300ms ease-out; 
		-webkit-transition: opacity 300ms ease-out; 
		-moz-transition: opacity 300ms ease-out; 
		-o-transition: opacity 300ms ease-out; 
		-ms-transition: opacity 300ms ease-out;
	}
	
	.card .content .cardBack {
		color: #fff; 
		padding: 20px;
	}
	.card .content .cardBack .box {
		padding: 8px;
	}
	.card .content .cardBack span {
		font-size: 16px;
		display: block;
		margin-top: 10px;
		line-height: normal;
	}
	
	.card .content .cardBack .email {
		font-size: 12px;
		display: block;
		margin-top: 10px;
		line-height: normal;
	}
	
	.card .content .cardFront, 	.card .content .cardBack{
		backface-visibility: hidden; 
		-webkit-backface-visibility: hidden; 
		-moz-backface-visibility: hidden; 
		-o-backface-visibility: hidden; 
		-ms-backface-visibility: visible; 
		position: absolute; 
		top: 0; 
		left: 0; 
		height: 100%; 
		width: 100%; 
		text-align: center;
	}
	.card .content .cardFront, .card.applyflip .content .cardFront{
		transform: rotateY(0deg); 
		-webkit-transform: rotateY(0deg); 
		-moz-transform: rotateY(0deg); 
		-o-transform: rotateY(0deg); 
		-ms-transform: rotateY(0deg);
	}
	.card .content .cardBack, .card.applyflip .content .cardBack {
		transform: rotateY(-180deg); 
		-webkit-transform: rotateY(-180deg); 
		-moz-transform: rotateY(-180deg); 
		-o-transform: rotateY(-180deg); 
		-ms-transform: rotateY(-180deg);
	}
	.card .content .cardFront, .card.applyflip .content .cardBack {
		animation: stayvisible 0.5s both; 
		-webkit-animation: stayvisible 0.5s both; 
		-moz-animation: stayvisible 0.5s both; 
		-o-animation: stayvisible 0.5s both; 
		-ms-animation: donothing 0.5s; 
		-ms-transition: visibility 0s linear 0.17s; 
		visibility: visible;
	}
	.card.applyflip .content .cardFront, .card .content .cardBack {
		animation: stayvisible 0.5s both; 
		-webkit-animation: stayvisible 0.5s both; 
		-moz-animation: stayvisible 0.5s both; 
		-o-animation: stayvisible 0.5s both; 
		-ms-animation: donothing 0.5s;
		-ms-transition: visibility 0s linear 0.17s; 
		visibility: hidden;
	}
	@keyframes stayvisible { 
		from, to {
			visibility: visible;
		}
	}
	@-webkit-keyframes stayvisible {
		from, to {
			visibility: visible;
		}
	}
	@-moz-keyframes stayvisible {
		from, to {
			visibility: visible;
		}
	}
	@-o-keyframes stayvisible {
		from, to {
			visibility: visible;
		}
	}
	@-ms-keyframes donothing {
		0%														{}
		100%													{}
	}

@media only screen and (max-width: 47.250em) and (orientation:landscape) {
	.row/*, nav .inner*/ {
		max-width: 320px;
	}
}

/*CMS added*/
h2.subtitle {    position: absolute;
    right: 65px;
    bottom: 40px;
    z-index: 999;
	color:#fff;
	text-shadow: 1px 1px #000;
	font-family: 'Baskerville-Italic', serif;
	font-size: 3rem;
}
#headerSlider h2.subtitle {    position: relative;
    right: 20px;
    bottom: 60px;
    z-index: 999;
	width:100%;
	text-align: right;
	/*padding-bottom: 10px;
	padding-right:20px;*/
}
.wysiwyg .knop a {color:#fff;}
.casesRow:nth-of-type(even) {text-align: left;}
.casesRow:nth-of-type(odd) {text-align: right;}

.successMSG {
	color:#fff;
	background:#BBCA4A;
	padding:20px;
	line-height: 1.5rem !important;
}

#employees-grid figure.extra {display: none;}
.showAllStaff {margin-top:35px;}
.videoTrigger {
		display: block;
		min-width:200px;
		position: absolute;
		left:50%;
		top:50%;
		color:#fff;
		font-size: 30px;
		-ms-transform: translate(-50%,-50%); /* IE 9 */
		-webkit-transform: translate(-50%,-50%); /* Chrome, Safari, Opera */
		transform: translate(-50%,-50%);
		text-shadow: 2px 2px #000;
	}
.vidwrap {background:#000;position: relative;margin-bottom:30px;}
.vidwrap.focus-me {
	position: relative;
    z-index: 9;
}
.back2overview {margin-left:2rem !important;margin-top:2rem !important;}

/*back 2 top*/
.back2Top {
	position: fixed;
	bottom:0;
	right:0;
	background: #BBCA4A;
	color:#fff; padding:30px 34px;
	z-index:99999;
	-ms-transform: rotate(45deg) translate(65px,4px); /* IE 9 */
    -webkit-transform: rotate(45deg) translate(65px,4px); /* Chrome, Safari, Opera */
    transform: rotate(45deg) translate(65px,4px);
	font-size:25px;
	opacity:0;
}
.back2Top i {-ms-transform: rotate(-45deg) translate(-18px,-18px); /* IE 9 */
    -webkit-transform: rotate(-45deg) translate(-18px,-18px); /* Chrome, Safari, Opera */
    transform: rotate(-45deg) translate(-18px,-18px);}

.back2Top.visible {
	opacity:1;
	transition: opacity 300ms ease-out; 
		-webkit-transition: opacity 300ms ease-out; 
		-moz-transition: opacity 300ms ease-out; 
		-o-transition: opacity 300ms ease-out; 
		-ms-transition: opacity 300ms ease-out;
}
/********************************
Scroll animaties 
*********************************/
@media only screen and (min-width: 80.000em) {
.scroll-anim {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: all .6s cubic-bezier(.8, .16, .34, 1.14);
    transition: all .6s cubic-bezier(.8, .16, .34, 1.14);
}

.scroll-anim.before-anim {
    opacity: 0;
    /*-webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);*/
    -webkit-transition: all .6s cubic-bezier(.8, .16, .34, 1.14);
    transition: all .6s cubic-bezier(.8, .16, .34, 1.14);
}
.scroll-anim.before-anim.fadeInLeft {
    opacity: 0;
    -webkit-transform: translate3d(-15px, 0px, 0);
    transform: translate3d(-15px, 0px, 0);
}
.scroll-anim.before-anim.fadeInRight {
    opacity: 0;
    -webkit-transform: translate3d(15px, 0px, 0);
    transform: translate3d(15px, 0px, 0);
}
.scroll-anim.before-anim.fadeInBot {
    opacity: 0;
    -webkit-transform: translate3d(0px, 15px, 0);
    transform: translate3d(0px, 15px, 0);
}
.scroll-anim.before-anim.fadeInTop {
    opacity: 0;
    -webkit-transform: translate3d(0px, -15px, 0);
    transform: translate3d(0px, -15px, 0);
}
}

.staff-photo {
	margin:50px 0 0px 0;
}
.staff-name {
	margin-bottom:0px;
}
.staffDetail .intro .plus {margin-top:-5px;}
.staffDetail .quote {color:#fff;width:100%;display: block;padding:10px 0;}
.nwsOverviewImg {margin-bottom:22px;}
.share a {
    font-size: 30px;
    margin: 0 5px;
}
.breads a {color:#009BA7;}
/*Mijn Hexspoor pagina*/
.myhex {
}

.width50 {width:100%;margin-bottom:20px;}
.width20 {}
.width10 {}
li.label {color:#000;}

.shareTrigger {float:left;z-index:2;position: relative;}
.shareTrigger i {-webkit-transition: all .3s linear;transition: all .3s linear;}
.shareTrigger i.activeArrow {-ms-transform: rotate(180deg);-webkit-transform:rotate(180deg);transform:rotate(180deg);}
.shareWrap {z-index:1;position: relative;display: block;float:left;height: 50px;border:1px solid #af4d7c;padding:0 7px;-ms-transform: translateX(-100%);-webkit-transform: translateX(-100%);transform:translateX(-100%);opacity:0;-webkit-transition: all .6s cubic-bezier(.8, .16, .34, 1.14);
    transition: all .6s cubic-bezier(.8, .16, .34, 1.14);}
.shareWrap.visible {-ms-transform: translateX(0%);-webkit-transform: translateX(0%);transform:translateX(0%);opacity:1;}
.shareWrap a{font-size:22px;padding:0px 7px;display:inline-block;line-height: 50px;}
span.chevron {font-size: 65px !important;}

/*Referenties slider (home)*/
#refPrev:hover,#refNext:hover{
	color:#009BA7;
}
/*.brandSlider {margin-bottom:40px;}*/
.brandSlide {
  padding: 0 16px;
}
.brandSlide:hover img {
  opacity: 0.7;
}
.brandSlider .slick-list {
  width: 70%;
  margin: 0 15%;
}
#refPrev,
#refNext {
  font-size: 40px;
  position: absolute;
  z-index: 100;
  top: 50%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
#refPrev {
  left: 15px;
}
#refNext {
  right: 15px;
}
/*cardflip home (added later)*/
.cardWrap {
  width: 285px;
  height: 285px;
  position: relative;
  -webkit-perspective: 600px;
  perspective: 600px;
}
.cardWrap .card {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: -webkit-transform 600ms;
          transition: transform 600ms;
}
.cardWrap .card figure {
  margin: 0;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.cardWrap .card .back {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.cardWrap:hover .card {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.cardWrap:hover .card .front span{
	opacity:0;
	 -webkit-transition: opacity 400ms;
          transition: opacity 400ms;
}
.cardWrap .card span {
  color: #fff;
  font-size: 15px;
  line-height: 20px;
  font-weight: 700;
  font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 50%;
  margin-left: -70px;
  position: absolute;
  top: 50%;
  max-width: 140px;
  width: 140px;
}
.cardWrap .card .back span {
  font-family: 'Baskerville-SemiBoldItalic', serif;
}
/*Extra SEO tekst*/
	h2.seoIntro,
	p.seoIntro{
		display: block;
		max-width:100%;
		font-size: 22px !important;
    	line-height: 24px !important;
		font-family: 'Baskerville-Italic', serif;
		font-weight: normal;
		margin-bottom:50px;
		margin-left:0px;
		text-transform:none !important;
	}
	h2.seoIntro img,
	p.seoIntro img{    
		margin-right: 10px;
    	margin-top: 6px;
		width:30px;
	}

/* My hexspoor */
.myHexBtn {display: block;padding:20px 10px 10px 10px;margin:0 .7rem;min-height: 140px;}
.myHexBtn i {
	font-size:40px;
}
.myHexBtn span {
	font-size:16px;
	margin-top:10px;
}
.myhexspoorCol {
	height: auto !important;
	padding:0px !important;
}
.myhex .prodRow {
	padding-bottom:10px;
	border-bottom:5px solid #009BA7;
	margin-bottom:30px;
}
.myhex .prodRow input {
	margin-bottom:20px;
	border:1px solid;
}
/*Iframes*/
.wysiwyg iframe {max-width:100% !important;}
.diensten .dna-services .column figure.back span {text-align: center;}

/*extra fixes*/
body.contact #contacts {background:#fff;}
body.deliveries ul.sub-nav li{padding-left:0px;}
.contactRightCol a > em {margin:0 10px 0 0px;font-size:18px;}
.contactH1 {margin-bottom:25px;}

/*--------------- Partner page -------------*/
body.partners #tops > .row {padding:0;}
body.partners #tops .vidFix {height:33vh;}
body.partners #tops iframe {width: 100%;min-height:33vh;}

#PartnerProgram h6 {font-size:16px;line-height: 25px;margin-bottom: 25px;}
#PartnerProgram .heart {width:100%;padding:70px 0;text-align: center;background:rgba(187,202,74,0.2);color:#BBCA4A;font-size:140px;margin-bottom:25px;}
body.partners .dateTxt {font-family: 'Baskerville-Italic', serif;margin-bottom:100px;}
body.partners .dateTxt p{font-size:20px;line-height: 22px;}

body.partners .blockRow {text-align: center;}
body.partners .block {color:#fff;display: inline-block;padding-top:60px;width:145px;height:145px;text-align: center;margin-bottom: 30px;text-transform: uppercase;}
body.partners .block.green {background:#71A45D;}
body.partners .block.grey {background:#7FA698;}
body.partners .opt > img {margin-right:7px;margin-bottom:120px;}
body.partners .opt2 > img {margin-right:7px;margin-bottom:24px;}
body.partners .opt2.large > img {margin-right:7px;margin-bottom:46px;}
body.partners p.intro.one-line {line-height: 44px;}
body.partners .top20 {margin-top:20px;}

.diensten.home .homeIntro > p {
	font-size: 14px;
    line-height: 22px;
	text-transform: none;
}

.testimonial-holder figcaption span {
	font-size:30px;
}

.testimonial-holder figcaption {
	bottom:calc(50% - 100px);
}
.smallCenterTxt {text-align: center;}
/*fix 9-3-2018*/
.case__quote {right:98% !important;}
#home__vid {max-width:100%;}
.myHexBtn img {max-height: 40px;}