@import url("WebfontsKit.css");
@import url("text.css");
@import url("buttons.css");
@import url("menu.css");

#wpadminbar {
	display: none;
}

html, body {
	width: 100%;
	text-align: center;
	margin: 0px;
	padding: 0;
	background: #161616;
}

.embedcode {
	display: none;
}

#btn_top {
	font-family: PFDinTextCompPro-Light;
	float: left;
	text-transform: uppercase;
	font-size: 20px;
	border: 1px solid #f017bc;
	color: #f017bc;
	padding: 10px;
	margin: -3px 20px 0px 0px;
}

	#btn_top:hover, #btn_top:hover a {
		background: #f017bc;
		color: #fff;
	}

	#btn_top a {
		color: #f017bc;
	}

img, img a, a img {
	border: none;
}

#loader {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	background: rgba(0,0,0,0.8);
	z-index: 999999;
}

	#loader img {
		position: absolute;
		width: 30px;
		height: 30px;
		margin-left: -15px;
		margin-top: -15px;
		left: 50%;
		top: 50%;
	}

a, a:hover, a:active, a:visited {
	text-decoration: none !important;
}

#foto-share {
	position: absolute;
	top: 34px;
	right: 36px;
	width: 255px;
}

.navBtn {
	display: none;
	position: absolute;
	width: 46px;
	height: 89px;
	top: 50%;
	left: 10px;
	margin-top: -45px;
	cursor: pointer;
	z-index: 99999;
}

	.navBtn:hover {
		opacity: 0.6;
	}

	.navBtn.right {
		left: auto;
		right: 10px;
	}

	#foto-share .close {
		width: 65px;
		height: 64px;
		cursor: pointer;
		background: url(../img/main/btn_close.png) top left no-repeat;
	}

	#foto-share .share {
		background: #292929;
		height: 45px;
		text-align: left;
		padding: 20px 0px 0px 20px;
		margin-top: -25px;
		width: 185px;
	}

		#foto-share .share p {
			font-family: PFDinTextCompPro-Medium;
			font-size: 30px;
			text-transform: uppercase;
			font-weight: 200;
			color: #fff;
			margin: 4px 14px 0px 0px;
			float: left;
		}

		.addthis_toolbox {
			float: left;
			margin-top: -5px;
		}

			.addthis_toolbox img {
				float: left;
				margin-right: 12px !important;
			}

#foto-holder {
	background: #161616;
	width: 90%;
	height: auto;
	text-align: center;
	display: none;
	overflow: hidden;
}

	#foto-holder img {
		margin: 0 auto;
		height: auto;
		width: auto;
	}


#header {
	background: #fff;
	height: 108px !important;
	overflow: hidden;
}

	#logo {
		margin: 20px;
		max-width: 420px;
	    margin-top: 13px;
	}

.social-holder {
	position: absolute;
	right: 45px;
	top: 45px;
}

	.social-holder img {
		width: 35px;
		height: 35px;
		boder: none;
	}

	.social-holder img:hover {
		opacity: 0.6;
	}
#gridCanvas {
	overflow: auto;
	background: #161616;
	position: relative;
}

#grid {
	width: 99%;
	height: 99%;
	margin: 0.5%;
	position: relative;
	background: #161616;
}

	#grid .obj {
		transform-style: preserve-3d;
		perspective: 1000;
		opacity: 0;
		float: left;
		margin: 0.5%;
		width: 24%;
		height: 24%;
		overflow: hidden;
		position: relative;

		transition: background-size 0.4s ease 0s, opacity 0.4s ease 0s;
		    -moz-transition: background-size 0.4s ease 0s, opacity 0.4s ease 0s;
		    -webkit-transition: background-size 0.4s ease 0s, opacity 0.4s ease 0s;
		    -o-transition: background-size 0.4s ease 0s, opacity 0.4s ease 0s;
	}

	#grid .obj.active {
		opacity: 1;
		transition: background-size 0.4s ease 0s, opacity 0.4s ease 0s;
		    -moz-transition: background-size 0.4s ease 0s, opacity 0.4s ease 0s;
		    -webkit-transition: background-size 0.4s ease 0s, opacity 0.4s ease 0s;
		    -o-transition: background-size 0.4s ease 0s, opacity 0.4s ease 0s;
	}

	#grid .obj.foto {
		float: left;
	}

	#grid .obj.thumb {
		cursor: pointer;
	}

		#grid .obj.foto.small {

			width: 11.5%;
			float: left;
		}

		#grid .obj.thumb:hover {
			opacity: 0.5;

			transition: background-size 0.4s ease 0s, opacity 0.4s ease 0s;
		    -moz-transition: background-size 0.4s ease 0s, opacity 0.4s ease 0s;
		    -webkit-transition: background-size 0.4s ease 0s, opacity 0.4s ease 0s;
		    -o-transition: background-size 0.4s ease 0s, opacity 0.4s ease 0s;
		}

	#grid .obj img {
		width: 100%;
	}

		#grid .obj:hover {
			background-size: 120% !important;
			background-position: center center;

			transition: background-size 0.4s ease 0s, opacity 0.4s ease 0s;
		    -moz-transition: background-size 0.4s ease 0s, opacity 0.4s ease 0s;
		    -webkit-transition: background-size 0.4s ease 0s, opacity 0.4s ease 0s;
		    -o-transition: background-size 0.4s ease 0s, opacity 0.4s ease 0s;
		}

	#grid .obj.double {
		width: 49%;
		height: 24%;
		background: #026373;
	}

	#grid .obj.small {
		width: 11.5%;
		height: 11.5%;
	}

	#grid .obj.square {
		width: 49%;
		height: 49%;
	}

		#grid .obj .title {
			font-family: PFDinTextCompPro-Light;
			position: absolute;
			top: 27px;
			right: 27px;
			background: rgba(0,0,0,0.8);
			padding: 0.8vw 0.9vw 0.8vw 0.9vw;
			color: #fff;
			font-size: 1.8vw;
			line-height: 1.8vw;
			text-transform: uppercase;
			text-align: right;
			z-index: 20;
		}

	#grid .obj.agenda {
		background: #fff;
	}

	/* obj fonts */

	#grid .obj h1 {
		color: #161616;
		text-transform: uppercase;
		font-size: 3.7vw;
		clear: both;
		display: block;
	}

	#grid .obj.counter.festival {
		background-image: url(../img/main/11694112_936777549715251_8921547326424546440_n.jpg) !important;
		background-size: cover !important;
	}

	#grid .obj.counter.festival h1 {
		color: #fff;
	}

	#grid .obj.counter.festival h2 {
		color: #fff !important;
	}

	#grid .obj.counter h1 {
		/*color: #b39c7e;*/
		color: #000;
		font-size: 1.7vw;
		margin-top: 1.8vw;
	}

	#grid .obj.counter h2 {
		font-family: PFDinTextCompPro-Light;
		color: #161616;
		font-size: 10vw;
		margin: 0vw;
		clear: both;
		display: block;
		margin-top: 0vw;
		line-height: 10vw;
	}

	#grid .obj.counter a.btn {
		position: absolute;
		bottom: 1.5vw;
	}

	#grid .obj.intro {
		text-align: left;
	}

	#grid .obj.intro h1 {
		color: #fff;
		font-size: 2.2vw;
		line-height: 2.2vw;
		font-weight: 200;
		padding: 1vw 2vw;
		margin-top: 1.4vw;
	}

	#grid .obj.intro h2 {
		font-size: 1.8vw;
		color: #fff;
		font-weight: 200;
		background: #157b8c;
		position: absolute;
		width: 100%;
		bottom: 0px;
		padding: 2vw 2vw;
		text-transform: uppercase;
		z-index: 1;
		left: 0px;
		margin: 0px;
	}

	#grid .obj.agenda h1 {
		font-family: PFDinTextCompPro-Light;
		margin-top: 2.5vw;
		margin-bottom: 1vw;
	}

	#grid .obj.newsletter h2 {
		font-size: 1.8vw;
		color: #fff;
		margin: 1.3vw 0vw 0vw 0vw;
	}

	#grid .obj.newsletter input {
		background: #fff;
		border: none;
		color: #161616;
		text-transform: uppercase;
		font-weight: 200;
		width: 70%;
		font-size: 1.3vw;
		border-radius: 0px;
		padding: 0.6vw;
		margin: 1vw auto 0vw auto;
		display: block;
		font-family: PFDinTextCompPro-Light;
	}

		#grid .obj.newsletter input.error {
			color: red;
		}

	#grid .obj.newsletter a.btn {
		font-size: 1.4vw;
		margin-top: 0vw;
		padding: 0.5vw 0.5vw 0.3vw 0.5vw;
	}

	#grid .obj.hit-me img {
	    -moz-transition: all 1s ease 0s;
	    -webkit-transition: all 1s ease 0s;
	    -o-transition: all 1s ease 0s;
	    transition: all 1s ease 0s;
	}

	#grid .obj.hit-me {
		cursor: pointer;
		background: #262624;
	}

	#grid .obj.hit-me:hover > img {
		opacity: 0.8;
		margin: 0 auto;

	    -moz-transition: all 1s ease 0s;
	    -webkit-transition: all 1s ease 0s;
	    -o-transition: all 1s ease 0s;
	    transition: all 1s ease 0s;

	    -moz-transform: rotateY(180deg);
	    -ms-transform: rotateY(180deg); /* IE 9 */
	    -webkit-transform: rotateY(180deg); /* Chrome, Safari, Opera */
	    transform: rotateY(180deg);
	}

	#grid .obj.icon {
		-webkit-perspective: 1000;
		perspective: 1000;
	}


	#grid .obj.icon.rotate .flipper {
		-moz-transform: rotateY(180deg);
	    -ms-transform: rotateY(180deg); /* IE 9 */
	    -webkit-transform: rotateY(180deg); /* Chrome, Safari, Opera */
	    transform: rotateY(180deg);
	}

	#grid .obj.icon.rotateX .flipper {

		-moz-transform-origin: 100% 50%;
		ms-transform-origin: 100% 50%;
		-webkit-transform-origin: 100% 50%;
		transform-origin: 100% 50%;

		-moz-transform: rotateX(-180deg);
	    -ms-transform: rotateX(-180deg); /* IE 9 */
	    -webkit-transform: rotateX(-180deg); /* Chrome, Safari, Opera */
	    transform: rotateX(-180deg);
	}

	.flipper {
		-moz-transform-style: preserve-3d;
		-webkit-transform-style: preserve-3d;
		-o-transform-style: preserve-3d;
		transform-style: preserve-3d;

		-moz-transition: all 0.6s ease-in-out;
		-webkit-transition: all 0.6s ease-in-out;
		-o-transition: all 0.6s ease-in-out;
  		transition: all 0.6s ease-in-out;

  		position: relative;
	}

	.front, .back {
		position: absolute;
		width: 100%;
		height: 100%;
		backface-visibility:hidden;
	}

	.back {
		-moz-transform: rotateY(180deg);
	    -ms-transform: rotateY(180deg); /* IE 9 */
	    -webkit-transform: rotateY(180deg); /* Chrome, Safari, Opera */
	    transform: rotateY(180deg);
	}

	#grid .obj.icon.rotateX .back {
		-moz-transform: rotateX(180deg);
	    -ms-transform: rotateX(180deg); /* IE 9 */
	    -webkit-transform: rotateX(180deg); /* Chrome, Safari, Opera */
		transform: rotateX(180deg);
	}

	#grid .obj.icon.rotateX .front {
		-moz-transform: rotateX(0deg);
	    -ms-transform: rotateX(0deg); /* IE 9 */
	    -webkit-transform: rotateX(0deg); /* Chrome, Safari, Opera */
		transform: rotateX(0deg);
	}

	.front {
	  z-index: 2;
	  -moz-transform: rotateY(0deg);
    	-ms-transform: rotateY(0deg); /* IE 9 */
    	-webkit-transform: rotateY(0deg); /* Chrome, Safari, Opera */
	  transform: rotateY(0deg);
	}

	.agenda-holder {
		width: 90%;
		overflow: hidden;
		position: relative;
		margin: 0 auto;
	}

		.agenda-obj {
			text-align: center;
			background: #b39c7e;
			margin: 0px 0px -1px 0px;
			color: #fff;
			text-transform: uppercase;
			font-weight: 200;
			width: 50%;
			padding-top: 1.8vw;
			padding-bottom: 1.8vw;
			float: left;
			font-size: 2vw;
			cursor: pointer;
			font-family: PFDinTextCompPro-Light;
		}

			.agenda-obj.dark {
				background: #99856b;
			}

			.agenda-obj.reserveren, a .agenda-obj.reserveren, .agenda-obj.reserveren:hover {
				background: #37322b;
				font-weight: 600;
				text-transform: uppercase;
				color: #fff;
			}

		#grid.contact .obj {
			height: 48%;
		}


		#grid .obj.contact {
			background: #fff;
			text-align: left;
		}

			#grid .obj.contact h1 {
				color: #ac9572;
				font-size: 2vw;
				margin-bottom: 1vw;
				margin-left: 1vw;
				margin-top: 1vw;
			}

			#grid .obj.contact p {
				margin-left: 1vw;
			}

			#grid .obj.contact img {
				width: 35px;
				margin: 0 auto;
			}

			#grid .obj.contact .facebook {
				position: absolute;
				bottom: 1vw;
				border-top: 1px solid #ac9572;
				padding-top: 1vw;
				text-align: center;
				width: 90%;
				margin: 0 1vw 0 1vw;
			}

		#grid .obj.map, #grid .obj.large-image, #grid .obj.large-image-holder {
			width: 74%;
			height: 98%;
			background: #fff;
		}

		#grid .obj.large-image-holder {
			background: none;
		}

			#grid .obj.large-image-holder .left {
				float: left;
				height: 100%;
				width: 49.5%;
			}

			#grid .obj.large-image-holder .right {
				float: right;
				height: 100%;
				/*width: 49.5%;*/
				width: 48%;
			}

			#grid .obj.large-image-holder .large {
				float: right;
				height: 100%;
				width: 100%;
			}

		#grid .obj.half-image {
			width: 36.5%;
			height: 98%;
			background: #fff;
		}

		#grid .obj.omschrijving {
			background: #fff;
			text-align: left;
			height: 73%;
			overflow: hidden;
		}

			#grid .obj.omschrijving .inner {
				margin: 1.5vw;
			}

			#grid .obj.omschrijving h1 {
				color: #ac9572;
				font-size: 3vw;
				line-height: 3vw;
				margin-bottom: 1vw;
			}

			#grid .obj.omschrijving p {
				font-size: 15px;
				line-height: 22px;
			}

			#grid .obj.omschrijving .facebook {
				border-top: 1px solid #ac9572;
				margin-top: 2vw;
				padding-top: 0.5vw;
			}

			#grid .obj.omschrijving .facebook {
				font-family: PFDinTextCompPro-Light;
				font-size: 18px;
				text-transform: uppercase;
			}

			#grid .obj.omschrijving img {
				width: 35px;
				margin-left: 10px;
			}

			#grid .obj.reserveren {
				background: #2a2a29;
				height: 23%;
			}

				#grid .obj.reserveren p {
					font-family: PFDinTextCompPro-Light;
					color: #fff;
					text-transform: uppercase;
					font-size: 1.4vw;
					margin-top: 1vw;
					line-height: 1.4vw;
				}

				#grid .obj.reserveren a.btn {
					font-family: PFDinTextCompPro-Medium;
					background: #b39c7e;
					margin-top: 1vw;
					font-size: 3vw;
					color: #2a2a29;
					padding: 2vw 1vw 1.5vw;
				}

				#grid .obj.reserveren a.btn:hover {
					color: #fff;
					border: none;
				}



/* block eigenschappen */

	.intro {
		background: #026373;
	}

	.intro h1 {
		color: #fff;
		font-size: 42px;
		line-height: 52px;
		text-transform: uppercase;
	}

	.counter {

		background: url(../img/main/bg_volgende.png) center center no-repeat;
		background-size: 100%;

	}

	/*
	.counter {
		background: url(../img/main/bg_volgende_pink.png) center center no-repeat;
		background-size: 100%;
	}
	*/

	#grid .obj.newsletter {
		width: 24%;
		height: 11.5%;
		background: #b39c7e;
	}

	.agenda {

	}

.close {
	color: #000;
	font-size: 30px;
	text-align: center;
	position: absolute;
	right: -25px;
	top: -25px;
	cursor: pointer;
	font-family: PFDinTextCompPro-Light;
	opacity: 1;
}

	.close:hover {
		opacity: 0.5;
	}

/* agenda */

#header-agenda {
	width: 100%;
	height: 63px;
	background: #2a2a29;
	text-align: left;
	overflow: auto;
}

	#header-agenda h2 {
		float: left;
		margin: 18px 0px 0px 2.5%;
		font-size: 18px;
		color: #fff;
		text-transform: uppercase;
		font-family: PFDinTextCompPro-Light;
	}

	.drop-down.large {
		width: auto;
		padding-right: 50px;
	}

	.drop-down {
		float: left;
		width: 174px;
		border: 2px solid #b39c7e;
		margin: 12px 0px 0px 10px;
		height: 36px;
		background: url(../img/main/icon-down.png) top right no-repeat;
	}

	.drop-down p {
		font-family: PFDinTextCompPro-Light;
		color: #fff;
		text-transform: uppercase;
		font-size: 18px;
		margin: 10px;
	}

	.drop-down:hover > .drop-down-list {
		display: block;
	}

		.drop-down-list {
			display: none;
			position: absolute;
			z-index: 899;
			margin: -2px 0px 0px 0px;
			width: 161px;
			padding: 0px 0px 0px 0px;
			list-style-type: none;
		}


			.drop-down.large .drop-down-list {
				width: auto;
			}

			.drop-down-list li {
				font-family: PFDinTextCompPro-Light;
				color: #fff;
				font-size: 18px;
				background: #2a2a29;
				padding: 10px;
				text-transform: uppercase;
			}

				.drop-down-list li a {
					color: #fff;
					text-transform: uppercase;
					text-decoration: none;
				}

				.drop-down-list li:hover {
					background: #fff;
				}

				.drop-down-list a li:hover {
					color: #2a2a29;
				}

/* popup */

#overlay {
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: rgba(0,0,0,0.8);
	position: fixed;
	top: 0px;
	left: 0px;
	display: none;
}

	#overlay #popup {
		position: absolute;
		width: 500px;
		height: 600px;
		margin-left: -250px;
		margin-top: -300px;
		left: 50%;
		top: 50%;
		height: auto;
		background: #fff;
	}

		#overlay #popup .inner {
			margin: 40px;
			text-align: center;
			position: relative;
		}

		#popup h1 {
			color: #b39c7e;
			text-transform: uppercase;
			font-size: 40px;
			display: block;
			margin: 0 auto 1.5vw auto;
		}

		#popup h2 {
			font-size: 60px;
			text-transform: uppercase;
			color: #161616;
			display: block;
			margin: 0 auto 1.5vw auto;
		}

		#popup p {
			width: 90%;
			margin: 0 auto;
			font-size: 16px;
		}

		#reserverenFrame {
			width: 100%;
			height: 360px;
			border: none;
			margin: 0 auto;
			display: block;
			overflow: hidden;
		}



/* footer */

#footer {
	background: #fff;
	position: relative;
	width: 100%;
	height: 74px;
	overflow: hidden;
	padding-top: 20px;
}

	#footer img {
		float: left;
		width: 125px;
		margin-right: 30px;
		 transition: all 0.4s ease 0s;
	    -moz-transition: all 0.4s ease 0s;
	    -webkit-transition: all 0.4s ease 0s;
	    -o-transition: all 0.4s ease 0s;
	}

		#footer img:hover {
			opacity: 0.6;
			 transition: all 0.4s ease 0s;
		    -moz-transition: all 0.4s ease 0s;
		    -webkit-transition: all 0.4s ease 0s;
		    -o-transition: all 0.4s ease 0s;
		}


		#footer img.kornuit-footer {
			width: 80px;
			margin-left: 16px;
			margin-right: 0px;
		}

	#footer .left {
		position: absolute;
		left: 50px;
	}

	#footer .right {
		position: absolute;
		right: 50px;
	}

	.edel-footer {
		margin-top: 8px;
	}

	.footer-text {
		font-family: PFDinTextCompPro-Light;
		font-size: 18px;
		line-height: 23px;
		float: left;
		width: 211px;
		margin-right: 20px;
		margin-top: 2px;
		text-align: left;
		color: #000;
		text-transform: uppercase;
	}

	.footer-text a {
		color: #000;
		text-decoration: none;
	}