/*	General styles */
* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);  
} 

html {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}

body, html {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
	
	font-family:Geneva, Arial, sans-serif;
	font-size:90%;
	height: 100%;
	color:#4d4e52;
}

#homebtn {
	display:block;
	width:130px;
	height:120px;
	text-decoration:none;
	position:absolute;
	z-index:500;
	top:10px;
	left:50px;
}

section {
	width:100%;
	clear:both;
}

.holder {
	width:960px;
	/*height:100%;*/
	margin: 0 auto;
	padding:0 20px;
	position:relative;
}

#closer {
	height:400px;
}

.bgpaars { background-color:#673bb8;}
.bgblauw { background-color:#0078c9;}
.bggroen { background-color:#2eb135 ;}
.bgroze { background-color:#e81e75 ;}
.bgoranje { background-color:#ff5113 ;}
.bggeel { background-color:#f5d312; color:#000;}


/* Type */
h1, h2, h3, h4, h5, h6 {
	font-family: 'pmn_caecilialight';
	font-weight:100;
}

h1 {
	font-size:4.5em;
	margin:0;
	padding-top:40px;
}

.extra {
	font-size:3.1em;
}

h2 {
	font-size:2.5em;
	margin:20px 0;
}

h3 {
	font-family: 'pmn_caeciliaheavy';
	font-size:1.3em;
	margin:0 0 -6px 0;
	
}

p {
	font-size:1em;
	line-height:1.5em;
}

a {
	color:inherit;
}

.bold {	font-family: 'pmn_caeciliaheavy';}
.bold2 { font-weight:bold; letter-spacing:0.5px;}
.blauw {color:#0078c9;}
.groen {color:#2eb135 ;}

.tussentekst {
	display:block;
	margin:40px 0 0 0;
	z-index:0;
	clear:both;
}

.hometekst {
	float:left;
	display:block;
	margin:40px 0 0 0;
	font-family: 'pmn_caecilialight';
	font-size:1.2em;
	line-height:1.5em;
	letter-spacing:0.3px;
	z-index:0;
}

.home_illustratie {
	width:740px;
}

.case_tussentekst {
	display:block;
	margin:40px 0 0 0;
	font-family: 'pmn_caecilialight';
	font-size:1.2em;
	line-height:1.7em;
	letter-spacing:0.3px;
	z-index:0;
	height:130px;
}

.hometekst a, .tussentekst a, .case_tussentekst a {
	color:inherit;
	color:#2eb135;
	text-decoration:none;
}

.hometekst a:hover, .tussentekst a:hover, .case_tussentekst a:hover {
	text-decoration:underline;
}

.verderlink {
	display:block;
	margin:0 auto 40px auto;
	z-index:50;
}

.column {
	width:45%;
	float:left;
	margin:0 20px 20px 0;
	font-size:1.03em;
	line-height:1.7em;
}


.illustratie {
	float:left;
	display:block;
	position:relative;
	width:220px;
	height:200px;
	z-index:20;
}

.illustratie img {
	position:absolute;
	left:-20px;
	top:-104px;
}

.succesvoor {
	font-size:2em;
}

/* header + nav */

.logo {
	z-index:3;
	position:fixed;
	top:10px;
	left:50px;
}


.header_spacer {
	height:148px;
}

.top_spacer {
	height:2px;
}

#navWrapper {
	background-color:rgba(254, 254, 254, 0.7);
	position:fixed;
	top:30px;
	right:50px;
	z-index:1000;
	-webkit-border-radius: 10px; 
  	-moz-border-radius: 10px; 
  	border-radius: 10px;
}

#navWrapper ul {
	margin:0;
}

#navWrapper .mainNav {
	float:right;
	background:#FFF;
	padding:10px;
	-webkit-border-radius: 10px; 
  	-moz-border-radius: 10px; 
  	border-radius: 10px;
	border-bottom:solid 1px #2EB135;
}

#navWrapper .mainNav li {
	display:inline;
	list-style:none;
	margin:10px;
}

#navWrapper .mainNav li a {
	text-decoration:none;
	font-family: 'pmn_caecilialight';
	color:#2eb135 ;
	font-size:20px;
	
}

#navWrapper .mainNav li .current {
	font-family: 'pmn_caeciliaheavy';
	position:relative;
}

.subNav {
	padding:7px 10px;
}

.subNav li {
	display:inline;
	list-style:none;
	margin:0 10px;
}

.subNav li a {
	text-decoration:none;
	font-size:1.2em;
	letter-spacing:1px;
	color:#312f32;
}

.subNav li a:hover {
	text-decoration:underline;
}

.subNav li a.current {
	font-weight:bold;
}

.subNav li a.current:hover {
	text-decoration:none;
}

#pijltje {
	position:absolute;
	top:46px;
}


/* color blokken */ 

.color_section_groen {
	background: #2eb135  url(../images/logo_diap2.png) 50px top no-repeat;
}

.color_section_blauw {
	background: #0078c9 url(../images/logo_diap2.png) 50px top no-repeat;
}

.color_section_paars {
	background: #673bb8 url(../images/logo_diap2.png) 50px top no-repeat;
}

.color_section_roze {
	background: #e81e75 url(../images/logo_diap2.png) 50px top no-repeat;
}

.color_section_oranje {
	background: #ff5113 url(../images/logo_diap2.png) 50px top no-repeat;
}

.color_section {
	display:block;
	position:relative;
	overflow:hidden;
	color:#FFF;
	height:400px;
	z-index:2;
	min-width:960px;
	background-attachment:fixed !important;
	background-size:auto !important;
}

.color_section a, .overlay a {
	color:#FFFFFF;
	text-decoration:none;
}

.overlay {
	color:#FFFFFF;
	position:relative;
	height:0;
	overflow:visible;
}


.color_title {
	margin:0 0 -5px 0;
	padding:0;
}

color_bijschrift {
	margin-top:20px;
}

.titel_holder {
	position:absolute;
	top:60px;
	z-index:25;
}

.titel_holder p{
	font-size:1.5em;
}

.titel_holder a {
	padding:5px 10px;
	margin:0 2px;
	border-radius:8px;
	color:#FFF;
	text-decoration:none;
}

.titel_holder a:hover {
	background:#b3b1b3;
}


/* case verwijzing */ 

#scroll_icon {
	background:#FFF;
	border: solid #EEE 2px;
	border-bottom:none;
	padding:12px 20px 10px 20px;
	position:absolute;
	bottom:0;
	margin-left:5px;
	width:124px;
	left:50%;
	z-index:100;
	-webkit-border-top-left-radius: 20px;
	-webkit-border-top-right-radius: 20px;
	-moz-border-radius-topleft: 20px;
	-moz-border-radius-topright: 20px;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	font-family: 'pmn_caecilialight';
	font-size:1.2em;
	cursor:pointer;
}

#scroll_icon_home {
	background:#FFF;
	border: solid #EEE 2px;
	border-bottom:none;
	padding:12px 20px 10px 20px;
	position:absolute;
	bottom:0;
	margin-left:-62px;
	width:124px;
	left:50%;
	z-index:100;
	-webkit-border-top-left-radius: 20px;
	-webkit-border-top-right-radius: 20px;
	-moz-border-radius-topleft: 20px;
	-moz-border-radius-topright: 20px;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	font-family: 'pmn_caecilialight';
	font-size:1.2em;
	cursor:pointer;
}

#back_icon {
	background:#FFF;
	border: solid #EEE 2px;
	border-bottom:none;
	padding:12px 15px 10px 15px;
	position:absolute;
	bottom:0;
	margin-left:-169px;
	width:124px;
	left:50%;
	z-index:100;
	-webkit-border-top-left-radius: 20px;
	-webkit-border-top-right-radius: 20px;
	-moz-border-radius-topleft: 20px;
	-moz-border-radius-topright: 20px;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	font-family: 'pmn_caecilialight';
	font-size:1.2em;
	text-decoration:none;
}

#scroll_icon {
	color:#4d4e52;
}

#scroll_icon img, #back_icon img, #scroll_icon_home img {
	position:absolute;
	right:15px;
	top:12px;
}




.case_img {
	position:absolute;
	right:-11px;
	z-index:10;
}

.casebijschrift {
	position:absolute;
	z-index:11;
}

.casetekst1 {
	padding:6px 12px 0 12px;
	border-radius:8px 8px 0 0;
	font-family: 'pmn_caecilialight';
	font-size:1.6em;
}

.casetekst2 {
	padding:0 12px 6px 12px;
	border-radius:0 0 8px 8px;
	font-family: 'pmn_caecilialight';
	font-size:1.6em;
}

.casetekst3 {
	padding:6px 12px 6px 12px;
	border-radius:8px;
	font-family: 'pmn_caecilialight';
	font-size:1.6em;
}

.caselink {
	padding:0 10px;
	font-size:1.1em;
}

.casebijschrift:hover div {
	text-decoration:underline;
}

#casebijschrift1 {top:50px; right:20px;}
#casebijschrift2 {top:20px; right:40px;}
#casebijschrift3 {top:40px; right:0px;}
#casebijschrift4 {top:50px; right:280px;}
#casebijschrift5 {top:250px; right:5px;}
#casebijschrift6 {top:205px; right:10px;}
#casebijschrift7 {top:20px; right:40px;}
#casebijschrift8 {top:20px; right:40px;}
#casebijschrift9 {top:20px; right:20px;}

#case_img1 {top:50px;}
#case_img2 {top:0px;}
#case_img3 {right:60px; top:-20px;}
#case_img4 {right:60px; top:-30px;}
#case_img5 {right:80px; top:-50px;}
#case_img6 {right:0px; top:100px;}
#case_img7 {top:55px;}
#case_img8 {left:300px; top:90px;}
#case_img9 {right:100px;}
#watwedoen {right:60px;}

/*	touch wrapper  */

#content-wrapper, #example-wrapper {
	height: 100%;
}
.scrollContainer {
	overflow-y: scroll;
	overflow-x: hidden;
	width: 100%;
}
.scrollContainer {
	height: 100%;
	margin: auto;
}
#example-wrapper .scrollContent {
	height: 100%;
}

#example-wrapper.scrollContainer .scrollContent {
	width: 100%;
	height: auto;
}
#example-wrapper.scrollContainer.horizontal .scrollContent {
	width: auto;
	height: 100%;
}

#winkelwagen {
	position:absolute;
	top:-268px;
	right:186px;
}

/* structuur */

.spacer.s0 {
	min-height: 1px;
}
.spacer.s1 {
	min-height: 100px;
}
.spacer.s2 {
	min-height: 200px;
}
.spacer.s3 {
	min-height: 300px;
}
.spacer.s4 {
	min-height: 400px;
}
.spacer.s5 {
	min-height: 500px;
}
.spacer.s6 {
	min-height: 600px;
}
.spacer.s7 {
	min-height: 700px;
}
.spacer.s8 {
	min-height: 800px;
}
.spacer.s9 {
	min-height: 900px;
}
.spacer.s10 {
	min-height: 1000px;
}

/* fonts */

@font-face {
    font-family: 'pmn_caeciliaheavy';
    src: url('../fonts/caecihea-webfont.eot');
    src: url('../fonts/caecihea-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/caecihea-webfont.woff') format('woff'),
         url('../fonts/caecihea-webfont.ttf') format('truetype'),
         url('../fonts/caecihea-webfont.svg#pmn_caeciliaheavy') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'pmn_caecilialight';
    src: url('../fonts/caecilig-webfont.eot');
    src: url('../fonts/caecilig-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/caecilig-webfont.woff') format('woff'),
         url('../fonts/caecilig-webfont.ttf') format('truetype'),
         url('../fonts/caecilig-webfont.svg#pmn_caecilialight') format('svg');
    font-weight: normal;
    font-style: normal;

}


@media all and (max-width: 1300px) {
	.logo_diap {
		background:url(../images/logo_diap2.png) fixed 50px top no-repeat;
	}
}

@media all and (max-width: 970px) {
h1 {
		font-size:4em;
}
	
	.logo {
	left:20px;
}

#homebtn {
	left:20px;
}

#navWrapper {
	right:20px;
}

.holder {
    width:720px;
}

.color_section_groen {
	min-width:760px;
	background:#2eb135  url(../images/logo_diap2.png) 20px top no-repeat;
}

.color_section_blauw {
	min-width:760px;
	background:#0078c9 url(../images/logo_diap2.png) 20px top no-repeat;
}

.color_section_paars {
	min-width:760px;
	background:#673bb8 url(../images/logo_diap2.png) 20px top no-repeat;
}

.color_section_roze {
	min-width:760px;
	background:#e81e75 url(../images/logo_diap2.png) 20px top no-repeat;
}

.color_section_oranje {
	min-width:760px;
	background:#ff5113 url(../images/logo_diap2.png) 20px top no-repeat;
}

#case_img3{right:-120px;}
#casebijschrift4{right:40px;top:30px;}

#case_img5 {
	right:-35px;
}

#casebijschrift7 {right:10px;}


#casebijschrift8 {top:220px; right:0px;}
#casebijschrift8 .caselink {background:#000000;}
#casebijschrift9 {top:170px; right:0px;}

#case_img7 {right:-80px;}
#case_img8 {left:220px;}
#watwedoen {right:-40px;}

.home_illustratie {
	width:500px;
}

#winkelwagen {
	right:20px;
}
}

form.feedback {
	text-align: right;
	width: 500px;
}

form.feedback textarea {
	width: 100%;
	height: 100px;
	
    box-sizing: border-box;
    display: block;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

form.feedback input[type=submit] {
	margin: 10px 0;
	
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	
    color: #fff;
    background-color: #28a745;
    border-color: #28a745;
}

form.feedback input[type=submit]:hover {
    color: #fff;
    background-color: #218838;
    border-color: #1e7e34;
}

.logos-collection {
	text-align: center;
	width: 860px;
}

.logos-collection img {
    margin: 1em;
	max-width: 300px;
	max-height: 100px;
	vertical-align: middle;
}


/* Werken bij - Vacatures */
.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  border-radius: 15px; /* 5px rounded corners */
  border: 3pt solid #2eb135;
  padding-left: 15px;
}

.card h3{
	margin: 0 0 20px 0;
	font-family: 'pmn_caecilialight';
}

/* On mouse-over, add a deeper shadow */
.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.card a:hover{
	text-decoration: none;
}

/* Add some padding inside the card container */
.container {
  padding: 2px 16px;
}

/* Add rounded corners to the top left and the top right corner of the image */
vacatures-image {
  border-radius: 5px 5px 0 0;
}

.header_spacer_vacature {
	height: 0px;
}

/* Werken bij - Vacaturepagina */

ul.vacaturelijst{
	list-style-image: url("../images/vinkje.png");
	line-height: 2;
	font-size: 1.03em;
}

#caseimgnieuwecollegas {
	top:103px;
	right:-19px;
}

#lampje3 {
	top:24px;
	right:6px;
}

#lampje4 {
	top:39px;
	right:144px;
}

#lampje5 {
	top:29px;
	right:333px;
}

#ogen {
	top:165px;
	right:73px;
}

.floatingContact{
	position: fixed;
	display: flex;
	justify-content: center;
	bottom: 0px;
	width: 100%;
	z-index: 999;
}

.contact-card-image {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 100px;
  background-color: white;
}

.contact-card-details {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 33%;
  background-color: white;
  padding-left: 5px;
  padding-right: 5px;
}

/* On mouse-over, add a deeper shadow */
.contact-card-image:hover, .contact-card-details:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

/* Add rounded corners to the top left and the top right corner of the image */
contact-image {
  border-radius: 5px 0 0 0;
}

/* Werken bij - Geweldige Collega's */

.collega-container{
	display: flex;
	justify-content: space-around;
}

.collega-card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  border-radius: 5px; /* 5px rounded corners */
  margin-top: 50px;
  display: inline-block;
  width: 350px;
}

/* On mouse-over, add a deeper shadow */
.collega-card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}