/* RESET */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body	{font-family: 'Open Sans', sans-serif;}

html, body, div, span, applet, object, iframe,
p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}

small		{font-size: 0.8em; color: #afafaf}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

p		{margin: 1.5em 0em; font-size: 14px; line-height: 150%;}


body.page	{margin-top: -17px;}

/* HEADER */

header a:hover	{color: #E2D200;}

.first-container		{margin-top: 150px;}
header		{padding: 10px 0px; border-bottom: 3px solid #f4f4f4; 
	position: relative; z-index: 900;
    background-color: rgba(0, 0, 0, 0.7);
    background: rgba(0, 0, 0, 0.7);
    color: rgba(0, 0, 0, 0.7);
    color: #fff;
    position: absolute;
    width: 100%;
    border-bottom: 4px solid #edd612;

}
h4			{font-size: 20px;}

/* NIEUWS */

.nieuws .intro p		{font-size: 1.15em; line-height: 160%;}

.btn-primary			{background-color: #E2D200; border-color: #c6b900; color: #333;}
.btn-primary:hover		{background-color: #333; color: #E2D200;}
/* REFERENTIE */
.referentie h4		{display: block; font-size: 16px; border-bottom: 1px dotted #ccc; padding: 0px 0px 10px; color: #666; margin: 0px; line-height: 160%;}
.referentie h3		{text-transform: uppercase; line-height: 140%; margin: 0px;}
.referentie h3.bedrijfsnaam		{color: #666; line-height: 140%; margin-top: 0px;}
.referentie				{margin-bottom: 20px; margin-top: 40px;}
.referentiehr			{border-color: #f4f4f4;}
.referentie img			{margin-top: 15px;}
/* PROFIEL */

.profiel		{margin-top: 30px;}
/* KLEUREN */

.groen,
.geel,
.paars		{padding: 40px 0px; }

.txtgroen		{color: #108a75;}
.txtgeel		{color: #dfb219;}
.txtpaars		{color: #2e0a50; color: #fff;}


.groen		{background-color: #108a75;}
.geel		{background-color: #dfb219;}
.paars		{background-color: #2e0a50; color: #fff;}

.main-title		{font-size: 40px; line-height: 120%; margin: 0px;}
.main-payoff	{font-size: 18px; line-height: 120%; margin: 0px;}


.paars .main-payoff	{color: #846a97;}

.blok-groen		{color: #108a75;}
.blok-geel		{color: #dfb219;}
.blok-paars		{color: #2e0a50;}

.white-txt 	{color: #fff; font-weight: bold; text-transform: uppercase;}
	
/* FONTS */



/* BUTTONS */
.btn-lg			{font-family: 'Bitter', serif; padding: 15px 20px; text-transform: uppercase;}
.btn-paars		{background-color: #2e0a50; color: #fff;}
.btn-paars:hover	{background-color: #3b1362; color: #fff; opacity: 0.8; transition: ease-in 0.5s;}


/* HOMEPAGINA */

.pattern		{border-top: 30px solid #666; padding: 30px 0px; background-image:  url('/images/pattern.png'); position: relative; z-index: 998;}
.pattern2		{padding: 30px 0px; background-image:  url('/images/pattern2.png'); position: relative; z-index: 998;}
.home .profiel	{margin-top: -470px; position: relative; z-index: 999;}
.page .profiel	{margin-top: 0px;}

.image-wrap		{padding: 55px 0px; background-position: center top; background-size: cover; background-repeat: no-repeat; }
.image-wrap h2	{color: #fff; display: inline-block; font-weight: 300; /* text-shadow: 0px 0px 9px black; */ text-align: left; font-size: 35px; margin: 0px; line-height: 150%; padding: 10px 15px; 
	
	

    background-color: rgba(0, 0, 0, 0.7);
    background: rgba(0, 0, 0, 0.7);
/*     color: rgba(0, 0, 0, 0.7); */


	
}
.image-wrap h3	{color: #dfb219; text-align: left; font-size: 35px; font-weight: bold; line-height: 100%;}

.image-wrap.home		{min-height: 550px; position: relative; background-position: center bottom;}

.image-wrap .price	{color: #2e0a50; display: inline-block; margin: 0 auto; margin-top: 45px;}
.image-wrap .price .main	{font-size: 90px; font-weight: bold;     /* Will override color (regardless of order) */
   -webkit-text-stroke-width: 2px;
   -webkit-text-stroke-color: white; text-shadow: 0px 0px 7px #333;}
.image-wrap .price .capt	{background-color: #2e0a50; color: #fff; padding: 10px; font-size: 26px; font-weight: 300; letter-spacing: 1px; display: inline-block;}


.image-wrap .titel-wrap 	{text-align: right; position: absolute; bottom: 40px; width: 100%; height: 100px;}



	/* STAPPEN */
	
	.steps	{margin: 30px 0px; border-left: 3px dotted #fff; margin-left: 35px;}
	.steps .step		{font-size: 24px; font-weight: 300; line-height: 320%;}
	.steps .step .number	{font-size: 30px; display: inline-block; text-align: center; padding: 0px; line-height: 180%; width: 60px; height: 60px; border-radius: 60px; border: 2px solid #fff; margin-right: 20px; margin-left: -33px; background-color: #2e0a50;}
	.stappenplan		{margin-bottom: -50px;}
	
	/* TEKST */
	
	.tekst .content	{padding: 20px; background-color: #40a190; color: #fff; border-radius: 20px; margin-top: 35px;}
	.tekst .main-title	{color: #fff;}
	.tekst .main-payoff	{color: #40a190;}
	.tekst-illustratie		{margin-top: 90px;}
	
	
	/* WAAROM */
	.waarom						{margin-bottom: 50px;}
	.waarom .blok .counter img	{position: relative;}
	.waarom .blok .counter .counter-amount	{position: relative; top: -80px; font-size: 40px; color: #fff;}
	.home-waarom .main-title		{text-align: center; padding: 45px 0px; color: #333;}
	.home-waarom .main-title .groentxt	{font-weight: bold; color: #108a75;}
	
	
	/* TIPS */
	
	.tips .number	{font-size: 30px; display: inline-block; text-align: center; padding: 0px; line-height: 180%; width: 60px; height: 60px; border-radius: 60px; border: 4px solid #fff; margin-right: 20px; margin-left: -33px; background-color: #dfb219; color: #fff; font-weight: bold;}
	.tips h2		{color: #fff; margin: 30px 0px;}
	.tips .tip		{margin: 15px 0px; font-size: 18px; color: #fff;}
	.tips .tip .tekst	{display: inline-block; line-height: 150%; font-weight: 300;}
	.tips-content	{padding: 20px; border-radius: 25px; background-color: #e3be42; }
	/* SIDEBAR */ 


.meerinfo		{padding: 30px; border: 10px solid #fff; box-shadow: 0px 0px 7px black; margin-top: -100px;}
.meerinfo .titel	{margin: 0px; font-weight: bold; font-size: 18px;}
.meerinfo p		{font-size: 0.8em; line-height: 160%;}

.facebook		{padding: 20px; border-radius: 20px; margin-bottom: -10px; position: relative; width: 100%; margin-top: 20px;}
.facebook iframe,
.facebook .fb-page	{width: 100%;}

/* TEKSTPAGINA */

.tekstpagina		{padding: 50px 0px;}


/* FORMULIEREN */

.aanvraag		{}
.aanvraag .content		{padding: 40px; background-color: #461A72; color: #fff; border-radius: 20px;}
.aanvraag  input[type="text"],
.aanvraag textarea					{background-color: #2e0a50; display: block; color: #fff; border: 2px solid #2e0a50; border-radius: 0px;}
.aanvraag h2		{font-size: 30px; line-height: 130%; text-align: center;}
.aanvraag h3		{font-size: 23px; line-height: 150%; margin-bottom: 30px;  text-align: center; }
.aanvraag .btn		{display: inline-block; border: 2px solid #fff; color: #fff; background-color: transparent;}

/* BLOG */

hr.blogline		{border-style: dotted; border-width: 4px 0 0;}
.blog .leesmeer	{font-weight: bold; color: #108a75;}
.blog h2		{font-size: 21px;}
.blog .content p	{color: #bfbfbf;}
.blog .content:not(:hover) p	{color: #bfbfbf;  transition:  linear 2s; }
.blog .content:hover p		{color: #333; transition:  linear 0.5s;}
/* FOOTER  */
	
	footer	{padding: 30px 0px; font-size: 0.8em; color: #666; background-color: #333; border-bottom: 30px solid #000;}	
	footer h3	{font-size: 25px; color: #ccc; display: block; padding-bottom: 15px; border-bottom: 3px dotted #666;}
	footer li	{margin: 15px 0px; color: #a5a5a5;}
	footer a	{color: #666;}
	footer a:hover	{color: #E7DB67;}
	.foot-end		{padding: 15px 0px; background-color: #f4f4f4; color: #aeaeae; font-size: 12px;}
	.foot-end p	{margin: 0px; font-size: 12px; }
	.foot-end a	{color: #666; text-decoration: underline;}


	
@media (max-width:768px){
	.image-wrap {max-height: 450px; min-height: 450px;}
	.image-wrap.home {max-height: 450px;  min-height: 450px;}
	.image-wrap h2 {font-size: 20px;}
}
	
	
@media (max-width: 480px){
	.home .profiel	{margin-top: 10px; position: relative; z-index: 999;}

}