.green { color: #50b748; }
.bg-green { background-color: #50b748; }
.orange { color: #ff6c00; }
.bg-orange { background-color: #ff6c00; }
.blue { color: #006fb5; }
.bg-blue { background-color: #c7e0ef; }
.bg-darkblue { background-color: #006fb5; }
.grey { color: #666666; }
.bg-grey { background-color: #dcdcdc; }
.bg-lightgrey { background-color: #dcdcdc; }
.b-grey { border: 1px solid #666666; }
.red { color: #e22019; }
.bg-red { background-color: #e22019; }


body {
	min-width:320px;
}
@font-face { 
font-family: 'Archer'; 
src: url('../eot/archweb-webfont-2.eot'); 
src: url('../eot/archweb-webfontd41d-2.eot#iefix') format('embedded-opentype'), 
url('../woff/archweb-webfont-2.woff') format('woff'), 
url('../ttf/archweb-webfont-2.ttf') format('truetype'), 
url('../svg/archweb-webfont-2.svg#ArchFontSemiBold') format('svg'); 
font-weight: normal; 
font-style: normal; 
}

@font-face { 
font-family: 'ArcherBold'; 
src: url('../eot/archer-bold-webfont-2.eot'); 
src: url('../eot/archer-bold-webfontd41d-2.eot#iefix') format('embedded-opentype'), 
url('../woff/archer-bold-webfont-2.woff') format('woff'), 
url('../ttf/archer-bold-webfont-2.ttf') format('truetype'), 
url('../svg/archer-bold-webfont-2.svg#webfontGpkWj3Da') format('svg'); 
font-weight: normal; 
font-style: normal; 
}
#tips .bg-orange span, .uitdagingknop .bg-grey span, .bb.bg-orange span {
	color: white;
}
.voedselafdrukUnsubscribeMessage {
	font-size: 13px;
	padding-bottom: 15px;
}
#zomaareendiv {
	width:100%;
	max-width:1024px;
	margin:0 auto;
}
#vacontainer {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: transparent !important;
    background-image: linear-gradient(to right, #F6FAFB, #ffffff) !important;
    overflow: hidden;
    font-size: 71.25%;
    line-height: 150%;
    -moz-box-shadow: inset -1px -1px 1px #f3f5f3;
    -webkit-box-shadow: inset -1px -1px 1px #f3f5f3;
    box-shadow: inset -1px -1px 1px #f3f5f3;
    border-radius: 14px;
    margin-top: 1px;
    padding-bottom: 1px;
    z-index: 50;
}
#vacontainer.mobiel {
	font-size: 100%;
    border-radius: 0;
}
#vacontainer #illu {
	position:absolute;
	width:100%;
	height:50%;
	background-color: transparent;
	box-shadow:0 2px 20px rgba(0,0,0,0.71);
	z-index:101;
}
#vacontainer #illu .illuobj {
	position:absolute;
	width:100%;
	height:100%;
	background-position:center bottom;
	background-repeat:no-repeat;
}
#vacontainer #illu #watertoren {
	z-index:290;
	background-image:url(../png/watertoren.png);
}
#vacontainer #illu #boerderij {
	z-index:295;
	background-image:url(../png/boerderij.png);
}
#vacontainer #illu #haven {
	z-index:292;
	background-image:url(../png/haven.png);
	background-position: left bottom;
}
#vacontainer #illu #grotehaven {
	z-index:292;
	background-image:url(../png/grotehaven.png);
	background-position: left bottom;
}
#vacontainer #illu #visser {
	z-index:292;
	background-image:url(../png/visser.png);
}
#vacontainer #illu #vrachtauto {
	z-index:293;
	background-image:url(../png/vrachtauto.png);
}
#vacontainer #illu #bestelauto {
	z-index:296;
	background-image:url(../png/bestelauto.png);
}
#vacontainer #illu #auto {
	z-index:296;
	background-image:url(../png/auto.png);
}
#vacontainer #illu #hek {
	z-index:297;
	background-image:url(../png/hek.png);
}
#vacontainer #illu #fiets {
	z-index:298;
	background-image:url(../png/fiets.png);
}
#vacontainer #illu #koe1 {
	z-index:297;
	background-image:url(../png/koe1.png);
}
#vacontainer #illu #koe2 {
	z-index:297;
	background-image:url(../png/koe2.png);
}
#vacontainer #illu #koe3 {
	z-index:297;
	background-image:url(../png/koe3.png);
}
#vacontainer #illu #fabriek1 {
	z-index:280;
	background-image:url(../png/fabriek1.png);
}
#vacontainer #illu #fabriek2 {
	z-index:295;
	background-image:url(../png/fabriek2.png);
}
#vacontainer #illu #fabriek3 {
	z-index:295;
	background-image:url(../png/fabriek3.png);
}
#vacontainer #illu #fabriek4 {
	z-index:295;
	background-image:url(../png/fabriek4.png);
}
#vacontainer #illu #fabriek5 {
	z-index:295;
	background-image:url(../png/fabriek5.png);
}
#vacontainer #illu #stal1 {
	z-index:295;
	background-image:url(../png/stal1.png);
}
#vacontainer #illu #stal2 {
	z-index:295;
	background-image:url(../png/stal2.png);
}
#vacontainer #illu #kas {
	z-index:294;
	background-image:url(../png/kas.png);
	background-position:right bottom;
}
#vacontainer #illu #plane {
	z-index:110;
	overflow: hidden;
	height:75px;
}
#vacontainer #illu #smoke1 {
	z-index:289;
	position:absolute;
	width:32px;
	height:32px;
	background-image:url(../png/smoke.png);
	background-repeat:no-repeat;
}
#vacontainer #illu #smoke2 {
	z-index:289;
	position:absolute;
	width:32px;
	height:32px;
	background-image:url(../png/smoke.png);
	background-repeat:no-repeat;
}
#vacontainer #illu #smoke3 {
	z-index:289;
	position:absolute;
	width:32px;
	height:32px;
	background-image:url(../png/smoke.png);
	background-repeat:no-repeat;
}
#vacontainer #illu #smoke4 {
	z-index:289;
	position:absolute;
	width:32px;
	height:32px;
	background-image:url(../png/smoke.png);
	background-repeat:no-repeat;
}
#vacontainer #illu #smoke5 {
	z-index:289;
	position:absolute;
	width:32px;
	height:32px;
	background-image:url(../png/smoke.png);
	background-repeat:no-repeat;
}
#vacontainer #illu #smoke6 {
	z-index:289;
	position:absolute;
	width:32px;
	height:32px;
	background-image:url(../png/smoke.png);
	background-repeat:no-repeat;
}
#vacontainer #illu #smoke7 {
	z-index:289;
	position:absolute;
	width:32px;
	height:32px;
	background-image:url(../png/smoke.png);
	background-repeat:no-repeat;
}
#vacontainer #illu #smoke8 {
	z-index:289;
	position:absolute;
	width:32px;
	height:32px;
	background-image:url(../png/smoke.png);
	background-repeat:no-repeat;
}
#vacontainer #illu #smoke9 {
	z-index:289;
	position:absolute;
	width:32px;
	height:32px;
	background-image:url(../png/smoke.png);
	background-repeat:no-repeat;
}
#vacontainer #illu #smoke10 {
	z-index:289;
	position:absolute;
	width:32px;
	height:32px;
	background-image:url(../png/smoke.png);
	background-repeat:no-repeat;
}
#vacontainer #illu #smoke11 {
	z-index:289;
	position:absolute;
	width:32px;
	height:32px;
	background-image:url(../png/smoke.png);
	background-repeat:no-repeat;
}
#vacontainer #illu #smoke12 {
	z-index:289;
	position:absolute;
	width:32px;
	height:32px;
	background-image:url(../png/smoke.png);
	background-repeat:no-repeat;
}
#vacontainer #illu #smoke13 {
	z-index:289;
	position:absolute;
	width:32px;
	height:32px;
	background-image:url(../png/smoke.png);
	background-repeat:no-repeat;
}
#vacontainer #illu #smoke14 {
	z-index:289;
	position:absolute;
	width:32px;
	height:32px;
	background-image:url(../png/smoke.png);
	background-repeat:no-repeat;
}
#vacontainer #illu #smoke15 {
	z-index:289;
	position:absolute;
	width:32px;
	height:32px;
	background-image:url(../png/smoke.png);
	background-repeat:no-repeat;
}
#vacontainer #illu #smoke16 {
	z-index:289;
	position:absolute;
	width:32px;
	height:32px;
	background-image:url(../png/smoke.png);
	background-repeat:no-repeat;
}
#vacontainer #illu #smoke17 {
	z-index:289;
	position:absolute;
	width:32px;
	height:32px;
	background-image:url(../png/smoke.png);
	background-repeat:no-repeat;
}
#vacontainer #illu #smoke18 {
	z-index:289;
	position:absolute;
	width:32px;
	height:32px;
	background-image:url(../png/smoke.png);
	background-repeat:no-repeat;
}
#vacontainer #illu #smoke19 {
	z-index:289;
	position:absolute;
	width:32px;
	height:32px;
	background-image:url(../png/smoke.png);
	background-repeat:no-repeat;
}
#vacontainer #illu #smoke20 {
	z-index:289;
	position:absolute;
	width:32px;
	height:32px;
	background-image:url(../png/smoke.png);
	background-repeat:no-repeat;
}
#vacontainer #illu #vliegtuig {
	position:absolute;
	width:100%;
	height:50%;
	background-image:url(../png/vliegtuig.png);
	background-repeat:no-repeat;
	width: 187px;
	height: 75px;
	margin-top:-75px;
}
#vacontainer #illu #bosachter {
	z-index:151;
	background-image:url(../png/bosachter.png);
	background-position:0 bottom;
}
#vacontainer #illu #clouds {
	z-index:103;
	background-image:url(../png/clouds.png);
	background-position:top bottom;
	background-size:cover;
}
#vacontainer #illu #cloudy {
	z-index:102;
	background-image:url(../png/cloudy.png);
	background-position:top bottom;
	background-size:cover;
}
#vacontainer #illu #sun {
	z-index:101;
	background-image:url(../png/sun.png);
	background-position:top bottom;
	background-size:cover;
}
#vacontainer #illu #bos {
	z-index:288;
	background-image:url(../png/bos.png);
	background-position:0 bottom;
}
#vacontainer #illu .bol {
	margin-left:100px;
	position: absolute;
	display: block;
	width: 80px;
	height: 80px;
	z-index:200;
	-ms-transform: translate(-50%, 0);
	-webkit-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
	opacity: 0;
}
#vacontainer #illu .bol.available {
}
#vacontainer #illu .bol.afdruk {
	z-index: 301;
}
#vacontainer #illu .bol.afdruk .ring span {
	color: white;
}
#vacontainer #illu .bol.water {
	z-index: 289;
}
#vacontainer .pointer {
	position: absolute;
	display: block;
	width: 28px;
	height: 28px;
	margin: 12px;
	-ms-transform: translate(0, 0) rotate(225deg);
	-webkit-transform: translate(0, 0) rotate(225deg);
	transform: translate(0, 0) rotate(225deg);
	-ms-transform-origin: 100% 100%;
	-webkit-transform-origin: 100%100%;
	transform-origin: 100% 100%;
}
#vacontainer #illu .bol.afdruk  .pointer {
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
#vacontainer #illu .bol .circle {
	position: absolute;
	display: block;
	width: 56px;
	height: 56px;
	margin: 12px;
	border-radius: 28px;
	box-shadow:inset 0 2px 5px rgba(0,0,0,0.5);
}
#vacontainer #illu .ring {
	position: absolute;
	display: block;
	width: 53px;
	height: 42px;
	margin: 11px;
	border-radius: 28px;
	background: transparent;
	border: 2px solid white;
	box-shadow:0 2px 5px rgba(0,0,0,0.5);
	text-align:center;
	color:white;
	font-family:arial;
	font-size:20px;
	line-height:16px;
	padding-top:11px;
}
#vacontainer #illu .water .circle {
	background-image: url('../png/water-2.png');
	background-repeat: no-repeat;
	background-position: -250px 20px;
}
#vacontainer #illu .water .ring {
	padding-top:16px;
	height: 40px;
	color:black;
	font-size:16px;
	line-height:16px;
	padding-top:13px;
}
#vacontainer #illu .ring div {
	color:white;
	font-family:arial;
	font-size:11px;
}
#vacontainer #illu .ring span {
}
#vacontainer .pages {
	position:absolute;
	width:100%;
	background-color: transparent;
	overflow: hidden;
	-webkit-overflow-scrolling: touch;
	z-index:100;
}
#vacontainer.mobiel .pages {
	border: 0;
}
    #vacontainer .pages .page {
        background-color: transparent;
        position: absolute;
        width: 100%;
        border: 0;
        /* margin-top: -2px; */
    }
#vacontainer.desktop .pages .page {
	/* width: calc(100% - 4px); */
	/* border-left: 2px solid #50b748; */
	/* border-right: 2px solid #50b748; */
	/* border-bottom: 2px solid #50b748; */
}
#vacontainer .pages .page .stel {
	background-color: #265319;
	color: white;
	font-weight: bold;
	padding-left:10px;
	padding-right:10px;
}
#vacontainer.desktop .pages .page .stel {
	padding-left:20px;
	padding-right:20px;
}
    #vacontainer .pages .page .questionblock {
        background-color: #57ad49;
        color: white;
        padding-left: 10px;
        padding-right: 10px;
    }
#vacontainer.desktop .pages .page .questionblock {
	padding-left:20px;
	padding-right:20px;
}
#vacontainer .pages .page .questionblock .question {
	font-family: "Archer";
    font-weight: 400;
	font-size:1.3em;
	color: white;
}
#vacontainer .pages .page .progress {
	border-top:2px solid white;
	border-bottom:2px solid white;
	height:2px;
	background-color:#58ad4a;
	width:0;
	margin-top:0px;
	padding: 0;
}
#vacontainer .pages .page .questionblock .subquestion {
	color: black;
	font-style: italic;
}
#vacontainer .pages .page .answers {
	padding:10px 10px 8px 10px;
}
#vacontainer.desktop .pages .page .answers {
	padding:12px 20px 10px 20px;
}
#vacontainer .pages .page .answers .answer {
	padding-left:24px;
	cursor:hand;cursor:pointer;
}
#vacontainer .pages .page .answers .answer label {
	cursor:hand;cursor:pointer;
	display:block;
}
#vacontainer .pages .page .answers .answer input {
	cursor:hand;cursor:pointer;
	position:absolute;
	width:230px;
	margin-left:-24px;
}
#vacontainer .pages .page .answers .answer input[type=radio] {
	width:auto;
}
#vacontainer .pages .page .terug {
	text-align:center;
	margin-bottom: 12px;
	line-height: 32px;
	clear: both;
}
#vacontainer .pages .page .terug a {
	text-align:center;
}

.inforing {
	position: absolute;
	display: block;
	width: 54px;
	height: 54px;
	border-radius: 27px;
	z-index:400;
	cursor:hand;cursor:pointer;
	-ms-transform: translate(-50%, 13px);
	-webkit-transform: translate(-50%, 13px);
	transform: translate(-50%, 13px);color: white;
}

#vacontainer .alert {
	z-index: 400;
	display: block;
	position:absolute;
	width:90%;
	min-height:12px;
	margin-left:5%;
}
#vacontainer.desktop .alert {
	position: absolute;
	width:80%;
	margin-left:10%;
	margin-top:10%;
}
#vacontainer .alert .box {
	margin-left:0;
	margin-right:0;
	position: relative;
	display:block;
	padding: 12px;
	border-radius: 6px;
	box-shadow: 0px 5px 10px rgba(0,0,0,0.5);
}
#vacontainer.desktop .alert .box {
	/* width:80%; */
}
#vacontainer .alert .pointer {
	position: absolute;
	display: block;
	width: 16px;
	height: 16px;
	margin-left:22px;
	margin-top:2px;
	-ms-transform: translate(-50%, -50%) rotate(225deg);
	-webkit-transform: translate(-50%, -50%) rotate(225deg);
	transform: translate(-50%, -50%) rotate(225deg);
	-ms-transform-origin: 50% 50%;
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	border:1px solid #333333;
}
#vacontainer .alert .box .pointer {
	width: 16px;
	height: 16px;
	margin-left:9px;
	margin-top:-11px;
	border: 0;
}

#vacontainer .pages .page .contentblock {
	color: black;
	padding-left:10px;
	padding-right:10px;
}
#vacontainer.desktop .pages .page .contentblock {
	padding-left:20px;
	padding-right:20px;
}
#vacontainer .pages .page .contentblock .resultheader {
	font-family: "Archer";
	font-size:1.5em;
	margin-bottom:0;
}
#vacontainer .formbox {
	display: block;
	margin: 16px auto;
	width: 300px;
	height: 44px;
	border: 0;
	-webkit-box-shadow: inset 0px 2px 5px 0px rgba(0,0,0,0.41);
	-moz-box-shadow: inset 0px 2px 5px 0px rgba(0,0,0,0.41);
	box-shadow: inset 0px 2px 5px 0px  rgba(0,0,0,0.41);
}
#vacontainer input[type=text], #vacontainer input[type=email] {
	display: block;
	font-family: 'trebuchet ms';
	font-size: 1.1em;
	padding: 0;
	width: 100%;
	margin: 0;
	border: 0;
	height: 40px;
	background: transparent;
	line-height: 44px;
	text-align: center;
}
#vacontainer A.mv, #vacontainer A.wh, #vacontainer A.tw, #vacontainer A.fb, #vacontainer A.bt, #vacontainer A.br, #vacontainer A.bb, #vacontainer A.bl, #vacontainer A.button {
	position: relative;
	margin: 16px auto;
	display: block;
	width: 300px;
	height: 44px;
	line-height: 44px;
	font-family: "ArcherBold";
	font-size: 19px !important;
	text-align: center;
	color: white;
	text-decoration: none;
	text-shadow:0 -1px rgba(0,0,0,0.2);
	box-shadow:0 3px 8px rgba(0,0,0,0.5);
}
#vacontainer #uitd200 b {
	display: block;
	margin-top: 16px;
	font-size:120%;
}
#vacontainer A.br {
	width: 300px;
}
#vacontainer A.br span {
	color: white;
}
#vacontainer A.bl {
	width: 290px;
	left: 5px;
}
#vacontainer A.button {
	padding: 0 32px;
	width: auto;
	display: inline-block;
}
#vacontainer .deel {
	margin: 0 auto;
	text-align: center;
}
#vacontainer A:after {
    content: none;
    display: none;
}
#vacontainer A.fb, #vacontainer A.tw, #vacontainer A.wh, #vacontainer A.mv {
    margin: 16px 8px;
    width: 44px;
    background-color: #3464a2;
    display: inline-block;
}
#vacontainer A.tw {
	background-color: #02a0ea;
}
#vacontainer.notmobile A.wh {
	display: none;
}
#vacontainer A.wh {
	background-color: #29b300;
}
#vacontainer A.mv {
	background-color: #e22019;
}
#vacontainer A .socials {
	margin:0 0 0 -50%;
	padding:0;
	position:absolute;
	z-index:400;
}
#vacontainer .button-arrow {
	display: none;
}
#vacontainer .button.bg-grey {
	margin-left: 0;
	height: auto;
	left: 0;
}
#vacontainer .bt.bg-orange { background-color: #F19222; }
#vacontainer .br.bg-orange { background-color: #F19222; }
#vacontainer .bb.bg-orange { background-color: #F19222; }
#vacontainer .bl.bg-orange { background-color: #F19222; }
#vacontainer .bg-grey {
	font-size:90%;
	line-height: 1.1em !important;
	width: calc(100% - 32px) !important;
	padding: 10px !important;
	background-color: #006fb5 !important;
}
#vacontainer .button.bg-orange { border-radius: 14px;background-color: #F19222; }
#vacontainer .bt.bg-darkblue {
    border-radius: 14px;
    background-color: #006fb5;
}
#vacontainer.mobiel .bt.bg-darkblue { width: auto; }
#vacontainer .br.bg-darkblue {
    border-radius: 14px;
    background-color: #006fb5;
}
#vacontainer .bb.bg-darkblue {
    border-radius: 14px;
    background-color: #006fb5;
}
#vacontainer .bl.bg-darkblue {
    border-radius: 14px;
    background-color: #006fb5;
}
#vacontainer .button.bg-darkblue {
    border-radius: 14px;
    background-color: #006fb5;
}
#vacontainer .bt:hover { background-color: #e52528; }
#vacontainer .br:hover { background-color: #e52528; }
#vacontainer .bg-grey:hover { background-color: #e52528 !important; }
#vacontainer .bb:hover { background-color: #e52528; }
#vacontainer .bl:hover { background-color: #e52528; }
#vacontainer .button:hover { background-color: #e52528; }
#vacontainer .fb:hover { background-color: #3464a2; }
#vacontainer .tw:hover { background-color: #02a0ea; }
#vacontainer .wh:hover { background-color: #29b300; }
#vacontainer .mv:hover { background-color: #e22019; }

#vacontainer #story A {
	color: black;
	display: inline-block;
	white-space: pre-line;
	line-height: 2.3em;
	background-color: #D4E5F6;
	border-radius: 1.2em;
	text-decoration: none;
	padding-left:4px;
	padding-right:4px;
	margin-left:-2px;
	margin-right:-2px;
}
    #vacontainer #story A:hover {
        border-radius: 14px;
        background-color: #006fb5;
        color: white;
    }
#vacontainer .center {
	text-align: center;
}
#vacontainer #resulttext, #vacontainer #ok, #vacontainer #selectie {
	margin-bottom:16px;
}
#vacontainer .uitdagingknop {
	float:left;
	margin-bottom: 24px;
	width:136px;
	height:136px;
}
#vacontainer.mobiel .uitdagingknop {
	margin-bottom: 0px;
	width:100%;
	height:auto;
	margin-left: -10px;
}
#vacontainer .uitdagingknop A {
	width: 136px !important;
	height: 104px !important;
	display: table-cell;
	vertical-align: middle;
}
#vacontainer.mobiel .uitdagingknop A {
	width: calc(100% - 32px) !important;
	height: auto !important;
	display: inherit;
	vertical-align: middle;
}
#vacontainer.mobiel .uitdagingknop:last-child {
	margin-left: 0;
}
#vacontainer.mobiel .uitdagingknop:first-child {
	margin-right: 0;
}
#vacontainer .uitdagingknop:last-child {
	margin-left: 16px;
	clear: right;
}
#vacontainer.mobiel .uitdagingknop:last-child {
	margin-left: -10px;
	clear: right;
}
#vacontainer .uitdagingknop:first-child {
	margin-right: 16px;
}
#vacontainer .uitdagingbox {
	text-align:center;
}
#vacontainer.mobiel .uitdagingbox {
	text-align:left;
}
#vacontainer .uitdagingboxcentered {
	margin: 0 auto;
	width: auto;
	display: table;
}
#vacontainer .uitdagingtxt {
	clear:both;
	display: inline-block;
	margin: 0 auto;
}
#vacontainer .uitdagingbesparing {
	clear:both;
	font-family: 'Trebuchet MS';
	font-size:14px;
}
#vacontainer .tekst {
	margin-bottom:16px;
	font-weight: normal;
	font-size: 100%;
	max-width: none;
	line-height: inherit;
}

#vacontainer.desktop .alignleft .terug {
	text-align: left !important;
	clear: both;
}
#vacontainer.desktop .alignleft A, #vacontainer.desktop .alignleft .formbox {
	margin-left: 0 !important;
}
#vacontainer.desktop input[type=text], #vacontainer.desktop input[type=email] {
	text-align: left !important;
	padding-left: 10px;
	width: 290px;
}