/* Kleuren:
	Lichtblauw: 56beee
	Bruin: 7a6958
	Geel: f9b233
	Paars: a2195b
	Groen: b4cc03
	Cyaan: 00a09a
	Blauw: 1d70b7
*/


/*default */
.padding{padding:50px;}
.paddingRightHalf{padding-right:10px;}
.paddingLeftHalf{padding-left:10px;}
.paddingTopDouble {padding-top: 80px;}
h1.pageTitle {font-size: 45pt;line-height: 1.1;}
.text-large {font-size: 60pt;}
.centered-half {width:600px;max-width: 100%;}
.tilt-right {
	-ms-transform: rotate(-3deg); /* IE 9 */
    -webkit-transform: rotate(-3deg); /* Chrome, Safari, Opera */
    transform: rotate(-3deg);
    
    -ms-transform-origin: 0% 50%; /* IE 9 */
    -webkit-transform-origin: 0% 50%; /* Chrome, Safari, Opera */
    transform-origin: 0% 50%;
    
   
}
.marginLeftMin {
	margin-left:-20px;
}
.marginTop {margin-top:20px;}
.marginBottom {margin-bottom: 20px;}
.marginLeft {margin-left:20px;}
.fdownload {float:left;text-align: center;}
.fdownload > .fa {
	margin:0 0 20px 0;
	font-size: 60px;
}
.w14 {width:14%;}
.page .btn {background: none;-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;font-size: 13pt;text-shadow: none;line-height: 38px;font-family:'Notes','Lato','Helvetica',sans-serif;font-weight: 400;
	
	
    padding: 0 2rem;
    vertical-align: middle;
    -webkit-tap-highlight-color: transparent;
    
    color: #a2195b;
    background: none;
    
    border:1px solid #a2195b;
    text-align: center;
    letter-spacing: .5px;
    
    font-size: .9rem;
	
	-webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.3);-moz-box-shadow: 0 5px 10px rgba(0,0,0,0.3);box-shadow: 0 0px 10px rgba(0,0,0,0.3);
}
.page .btn:hover, .btn:focus, .btn:active, .btn.active {background-color:#a2195b;color:#fff;}

.btn.btn-icon, a.btn.btn-icon {text-align: left;position: relative;padding-right:60px;}
.btn-icon:after {position: absolute;right:0;top:0;bottom:0;width:40px;content: "\f061";/* arrow */font: normal normal normal 14px/1 FontAwesome;line-height: 38px;text-align: center;border-left:1px solid #a2195b;background:#a2195b;color:#fff;font-size: 17px;}
.btn-icon.btn-icon-calendar:after {content:"\f133";/* calendar */}
.btn-icon.btn-icon-file:after {content:"\f0f6";/* file */}
.btn-icon.btn-icon-download:after {content:"\f019";/* download */}
.btn-icon.btn-icon-external:after {content:"\f08e";/* external */}
.btn-icon.btn-icon-phone:after {content:"\f095";/* phone */}
.btn.btn-icon:hover:after {background: rgba(255,255,255,0.1);}

.page .btn.btn-cyaan {color:#009ee3;border-color:#009ee3;background: #fff;}
.btn-icon.btn-cyaan:after {background: #009ee3;border-left:1px solid #009ee3;}
.page .btn.btn-cyaan:hover {background: #009ee3;color:#fff;}

.farrow {
	position: relative;
}
.farrow:before {
	content:"";
	position: absolute;
	width:180px;
	height: 100px;
	
	left:-140px;
	top:-20px;
	
	background-position: top left;
	background-repeat: no-repeat;
	
	pointer-events: none;
}
.farrow-left-geel:before {
	background-image: url("../images/pijl-geel.png");
	
	left:-140px;
	top:-20px;
}
.farrow-right-geel:before {
	left:auto;
	right:-170px;
	top:0;
	background-image: url("../images/pijl-geel-rechts.png");
	background-size: contain;
	
	width:220px;
	height: 120px;
	
}
.farrow-blauw-rechts:before {
	left:auto;
	right:0px;
	bottom:-130px;
	top:auto;
	background-image: url("../images/pijl-blauw-rechts.png");
	background-size: contain;
	
	width:220px;
	height: 120px;
	
}
.farrow-blauw-links:before {
	left:-80px;
	right:auto;
	bottom:-50px;
	top:auto;
	background-image: url("../images/pijl-blauw-links.png");
	background-size: contain;
	
	width:140px;
	height: 50px;
	
}
.farrow-blauw-rechts2:before {
	left:auto;
	right:0px;
	bottom:-30px;
	top:auto;
	background-image: url("../images/pijl-blauw-rechts2.png");
	background-size: contain;
	
	width:140px;
	height: 55px;
	
}
.farrow-blauw-boven:before {
	left:auto;
	right:-40px;
	bottom:0px;
	top:auto;
	background-image: url("../images/pijl-blauw-boven.png");
	background-size: contain;
	
	width:80px;
	height: 114px;
	
}



/* fonts */
.text-georgia {font-family: "Georgia Light","Georgia", serif;font-size: 100;}
.text-jennasue {font-family: 'Caveat', cursive;font-weight: 300;font-size: 18pt;}
.italic {font-style: italic;}


/* kleuren classes */
.bg-wit {background-color: #fff;}
.bg-lichtblauw {background-color: #009ee3;}
.bg-bruin {background-color: #7a6958;}
.bg-geel {background-color: #f9b233;}
.bg-paars {background-color: #a2195b;}
.bg-groen {background-color: #b4cc03;}
.bg-cyaan {background-color: #00a09a;}
.bg-blauw {background-color: #1d70b7;}

.text-wit {color:#fff;}
.text-lichtblauw {color: #009ee3;}
.text-bruin {color: #7a6958;}
.text-geel {color: #f9b233;}
.text-paars {color: #a2195b;}
.text-groen {color: #b4cc03;}
.text-cyaan {color: #00a09a;}
.text-blauw {color: #1d70b7;}

.bg-paars-gradient {
	background: -moz-linear-gradient(left, rgba(162,25,91,0.6) 0%, rgba(162,25,91,0) 100%);
background: -webkit-linear-gradient(left, rgba(162,25,91,0.6) 0%,rgba(162,25,91,0) 100%);
background: linear-gradient(to right, rgba(162,25,91,0.6) 0%,rgba(162,25,91,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99a2195b', endColorstr='#00a2195b',GradientType=1 );
}
.bg-cyaan-gradient {
	background: -moz-linear-gradient(left, rgba(0,160,154,0.75) 0%, rgba(0,160,154,0) 100%);
	background: -webkit-linear-gradient(left, rgba(0,160,154,0.75) 0%,rgba(0,160,154,0) 100%);
	background: linear-gradient(to right, rgba(0,160,154,0.75) 0%,rgba(0,160,154,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf00a09a', endColorstr='#0000a09a',GradientType=1 );
	
}
/* NAVIGATIE IN KLEUREN */
#footer {

}
#navigation .nav .navInner {
	color:#fff;
}
#navigation .nav.count1 .navInner {
	background-color: #56beee;
}
#navigation .nav.count2 .navInner {
	background-color: #7a6958;
}
#navigation .nav.count3 .navInner {
	background-color: #f9b233;
}
#navigation .nav.count4 .navInner {
	background-color: #a2195b;
}
#navigation .nav.count5 .navInner {
	background-color: #b4cc03;
}
#navigation .nav.count6 .navInner {
	background-color: #00a09a;
}
#navigation .nav.count7 .navInner {
	background-color: #1d70b7;
}



/* PAGINAS */

/* standaard */
.pageRef {
	/*
position: absolute;
	top:50px;
	left:50px;
	width:20%;
*/
	width:250px;
	height: 150px;
	margin-bottom:40px;
	
	font-size: 30pt;
	line-height: 1.2;
	color:#fff;
	background: bottom right no-repeat;
	background-size: contain;
	
	z-index: 5;
}
.pageHead {
	background-image: url('../images/gradient.png');
	background-position:  top left;
	background-repeat: no-repeat;
}
.page.count5 .pageHead, .page.count7 .pageHead {
	background-image: url('../images/gradient-tr.png');
	background-position:  top right;
}
.scrollDown {cursor:pointer;}
.scrollDown .fa {font-size: 26pt;}



/* pagina 0 */
#pages .page.count1 .pageContent {
	background-color: #bbe3fa;
	background-image: url('../images/gradient.png');
	background-position:  top left;
	background-repeat: no-repeat;
	
	max-height: 100% !important;
	overflow:hidden;
}
#logoHome {
	position: absolute;
	top:40px;
	left:40px;
	
}

@keyframes bounce {
	0%   {transform: scale(1);}
	30%   {transform: scale(1);}
	40%  {transform: scale(1.2);}
	55%  {transform: scale(0.9);}
	65%  {transform: scale(1.1);}
	75%  {transform: scale(0.95);}
	80% {transform: scale(1);}
}


.bounce {
	animation: bounce 2s linear;
}
@keyframes lightup {
	0%   {opacity:0.3;}
	50%  {opacity:0.5;}
	100% {opacity:0.3;}
}


.lightup {
	animation: lightup 0.7s linear;
}
.lightup:hover {
	animation: none;
}



#huis {
	position: absolute;
	bottom:0;
	left:0;
	right:0;
	background: bottom right no-repeat;
	background-size: contain;
	padding-top: 65%;
	margin-bottom: -50px;
}
#huis:before {
	position: absolute;
	z-index: 1;
	content:"";
	top:0;
	left:0;
	bottom:0;
	width:30%;
	background-position: bottom left;
	background-repeat: repeat-x;
	background-size: contain;
	background-image: url("../pages/0-huis/images/grond.png");
}



/* rook */

#huis #rook {
	position: absolute;
	bottom:78%;
	left:65%;
}

#huis .vlak3:hover ~ #rook .rooklijn {
  
  animation: rook 5s linear;
  stroke-dashoffset: 0;
}

.rooklijn {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear forwards;
  
}
.rooklijn.rookstippel {
	stroke-dasharray: 15;
}
@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes rook {
	0%   {stroke-dashoffset: 1000;}
	100% {stroke-dashoffset: 0;}
}
/* --- */






#huis .vlak {
	position: absolute;
	bottom: 9%;
	left:29%;
	width:22%;
	height: 26%;
	
	cursor: pointer;
}
#huis .vlak .plus {
	-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;
	
	width: 30px;
	height: 30px;
	line-height: 31px;
	text-align: center;
	background: #fff;
	color:#ccc;
	position: absolute;
	top:10%;
	left:10%;
	font-weight: bold;
	font-size: 30px;
	font-family: arial;
}
#huis .vlak:hover .plus {
	transform: scale(1.1);
	
	-webkit-transition: all 400ms ease;
	-moz-transition: all 400ms ease;
	-o-transition: all 400ms ease;
	-ms-transition: all 400ms ease;
	transition: all 400ms ease;
}

#huis .vlak .infoPopup {
	position: absolute;
	left:-10%;
	bottom:110%;
	background: rgba(255,255,255,0.8);
	color:#1d70b7;
	padding: 20px;
	-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;
	z-index: 5;
	
	opacity:0;
	
	font-size: 14pt;
	font-weight: normal;
	line-height: 1;
	font-family: 'Caveat', cursive;
	
	min-width:250px;
	text-align: left;
	
	-webkit-transition: all 400ms ease;
	-moz-transition: all 400ms ease;
	-o-transition: all 400ms ease;
	-ms-transition: all 400ms ease;
	transition: all 400ms ease;
	
	pointer-events: none;
}

@keyframes fadeindelay {
	0%   {opacity:0;}
	50%  {opacity:0;}
	100% {opacity:1;}
}
#huis .vlak:hover .infoPopup {
	opacity: 1;
	
	animation: fadeindelay 1s linear;
	
}
#huis .vlak .infoPopup:after {
	content:"";
	position: absolute;
	bottom:-123px;
	left:30%;
	width:63px;
	height: 119px;
	background-image: url("../pages/0-huis/images/pijl.png");
}
#huis .vlak.vlak2 .infoPopup:after,#huis .vlak.vlak3 .infoPopup:after, #huis .vlak.vlak5 .infoPopup:after {
	background-image: url("../pages/0-huis/images/pijl2.png");
}
#huis .vlak.vlak2 .infoPopup {
	left:5%;
}
#huis .vlak.vlak2 .infoPopup:after {
	left:50%;
}
#huis .vlak.vlak3 .infoPopup {
	bottom:41%;
	left:28%;
}
#huis .vlak.vlak3 .infoPopup:after {
	left:50%;
}
#huis .vlak.vlak4 .infoPopup {
	left:-30%;
}
#huis .vlak.vlak5 .infoPopup {
	left:9%;
}
#huis .vlak.vlak6 .infoPopup {
	left:-14%;
	bottom:81%;
}
#huis .vlak .bg {
	opacity:0.3;
	-webkit-transition: all 400ms ease;
	-moz-transition: all 400ms ease;
	-o-transition: all 400ms ease;
	-ms-transition: all 400ms ease;
	transition: all 400ms ease;
	
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	
	position: absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
}
#huis .vlak:hover .bg {
	opacity:1;
}

/*
Bruin: 7a6958
	Geel: f9b233
	Paars: a2195b
	Groen: b4cc03
	Cyaan: 00a09a
	Blauw: 1d70b7
*/
#huis .vlak1 .plus {color:#7a6958;left:44%;top:30%;}
#huis .vlak2 .plus {color:#f9b233;left:70%;top:61%;}
#huis .vlak3 .plus {color:#1d70b7;left:42%;top:77%;}
#huis .vlak4 .plus {color:#b4cc03;left:19%;top:14%;}
#huis .vlak5 .plus {color:#00a09a;left:25%;top:53%;}
#huis .vlak6 .plus {color:#a2195b;left:30%;top:48%;}


#huis .vlak.vlak2 {
	left:51%;
	width:19%;
}
#huis .vlak.vlak3 {
	left:70%;
	width:26%;
	height: 71%;
	
}

#huis .vlak.vlak4 {
	bottom:35%;
	left:41%;
	width:29%;
	height:21%;
}
#huis .vlak.vlak5 {
	bottom:35%;
	left:70%;
	width:26%;
	height:21%;
}
#huis .vlak.vlak6 {
	bottom:56%;
	left:41%;
	width:41%;
	height:24%;
}





/* pagina 1 */
.page.count2 h1.pageTitle {
	
}
#pages .page.count2 .pageContent {background: #7a6958;}
.ptitle {font-size: 9pt;margin:5px 0 10px 0;}


.linetext {
	white-space: nowrap;overflow: hidden;max-width:1px;
}
.writetext {
max-width:600px;
-webkit-transition: all 2500ms ease;
-moz-transition: all 2500ms ease;
-o-transition: all 2500ms ease;
-ms-transition: all 2500ms ease;
transition: all 2500ms ease;
}

/*
.linetext {white-space: nowrap;overflow: hidden;width:1px;
-webkit-transition: all 500ms ease;-moz-transition: all 500ms ease;-o-transition: all 500ms ease;-ms-transition: all 500ms ease;transition: all 500ms ease;}
.writetext {width:auto;}
*/

/* pagina 2 */



/* pagina 3 */
.bg-lamp {
	background-position:  top right;
	background-repeat: no-repeat;
	background-size: contain;
}




/* pagina 5 */
.num {
	color:#1d70b7;
	border:1px solid #00a09a;
	-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;
	
	font-size: 100px;
	height: 120px;
	width:72px;
	
	
	font-weight: bold;
	padding:10px 7px;
	margin:0 1px;
	
	text-align:center;
	
	float: left;
	line-height: 1;
	
	display: block;
	
	
}
.num.num-sub {
	font-size: 60px;
	text-align:left;
	
	padding-top: 15px;
	
	position: relative;
}
.num.num-sub:after {
	position: absolute;
	left:10px;
	bottom:10px;
	content: ",";
}
.logo {margin-top: 20px;}





/* pagina 6 */
.bg-haard {
	background-position:  top left;
	background-repeat: no-repeat;
	background-size: contain;
}