/* ---------------- MERKEN OVERZICHT ---------------*/




/* FILTER  */

.content-block.filter-cnt{background:#c8c4c1; box-shadow:none; padding-bottom:0; margin:0;}
.filter-cnt > div{float: none; display: table-cell; vertical-align: middle;}	
.filter-cnt > div:first-child{padding-left:20px; padding-right:20px;}
.brands-opt{
	display: inline-block; zoom:1; 
	vertical-align: middle; 
	float: none; 
	border-left: 1px solid #DBD7D3;
	}
	.brands-opt .layout-block{padding-bottom:0; padding:0; margin:0;}
		
		.brands-opt a{
			width:100%; 
			float: none; 
			text-align: center; 
			font-size:22px; 
			font-family: 'L Serifa W01', 'L Serifa W01_n2', Georgia, serif;
			font-weight: 200; 
			line-height: 100%;
			color: #003545;
			-webkit-transition: color 0.3s ease-out;
			-moz-transition: color 0.3s ease-out;
			-ms-transition: color 0.3s ease-out;
			-o-transition: color 0.3s ease-out;
			transition: color 0.3s ease-out;
			}
			.brands-opt a::before{
				font-size:38px; 
				-webkit-transition: color 0.1s ease-out; 
				-moz-transition: color 0.1s ease-out; 
				-ms-transition: color 0.1s ease-out; 
				-o-transition: color 0.1s ease-out; 
				transition: color 0.1s ease-out; 
				-webkit-backface-visibility: hidden;
				-moz-backface-visibility: hidden;
				-ms-backface-visibility: hidden;
				-o-backface-visibility: hidden;
				backface-visibility: hidden;
				margin-top:0;
				}
		
			/*animatie markertje*/
			@-webkit-keyframes bungeltje {
				0%   { -webkit-transform: rotate(0deg); }
				33% { -webkit-transform: rotate(10deg); }
				66% { -webkit-transform: rotate(-10deg); }
				100% { -webkit-transform: rotate(0deg); }
			}
			
			@-moz-keyframes bungeltje {
				0%   { -moz-transform: rotate(0deg); }
				33% { -moz-transform: rotate(10deg); }
				66% { -moz-transform: rotate(-10deg); }
				100% { -moz-transform: rotate(0deg); }
			}
			
			@-ms-keyframes bungeltje {
				0%   { -ms-transform: rotate(0deg); }
				33% { -ms-transform: rotate(10deg); }
				66% { -ms-transform: rotate(-10deg); }
				100% { -ms-transform: rotate(0deg); }
			}
			
			@-o-keyframes bungeltje {
				0%   { -o-transform: rotate(0deg); }
				33% { -o-transform: rotate(10deg); }
				66% { -o-transform: rotate(-10deg); }
				100% { -o-transform: rotate(0deg); }
			}
			
			@keyframes bungeltje {
				0%   { transform: rotate(0deg); }
				33% { transform: rotate(10deg); }
				66% { transform: rotate(-10deg); }
				100% { transform: rotate(0deg); }
			}
/* 			.brands-opt a:hover{color: #fff;} */
			
			.brands-opt a:hover::before{
				-webkit-animation: bungeltje 1s 1 ease-out forwards; 
				-moz-animation: bungeltje 1s 1 ease-out forwards; 
				-ms-animation: bungeltje 1s 1 ease-out forwards; 
				-o-animation: bungeltje 1s 1 ease-out forwards; 
				animation: bungeltje 1s 1 ease-out forwards; 
/* 				color:#fff; */
				}

		.brands-opt a::before{
			font-size:32px;
			display: block;
			text-align: center;
			width:auto;
			margin-bottom:10px;
			}
		
		.brands-opt .layout-block{background: none;}
		
.filter-block .layout-block{margin-top:0; padding-left:0; padding-right:0;}
.filter-block input[type="checkbox"]{visibility: none; position: absolute; left:-9999px;}

.filter-title{
	display: block; 
	width:100%; 
	float: none; 
	font-size:28px; 
	border-bottom:1px solid #DBD7D3;
	padding-bottom:15px;
	line-height: 100%;
	}

.filter-block{
	display:inline-block; 
	zoom:1; 
	vertical-align: middle; 
	float: none; 
	padding-top:20px;
	padding-bottom:20px;
	}
	
	.filter-block label{
		padding:7px 10px 7px 30px; 
		margin: 0; 
		position: relative;
		-webkit-transition: background 0.3s ease-out;
		-moz-transition: background 0.3s ease-out;
		-ms-transition: background 0.3s ease-out;
		-o-transition: background 0.3s ease-out;
		transition: background 0.3s ease-out;
		width: 25%;
		float: left; 
		border-left: 1px solid #A7A1A1;
		}
		.filter-block label:hover{background: rgba(255,255,255,0.6);}
		.filter-block label.active{background: rgba(255,255,255,1);}
		
		.filter-block label::before{
			font-family: KeytoeIcons;
/* 			content:"\e82e"; */
			position: absolute;
			top:-10px;
			left:10px;
			color: rgba(255,255,255,0.4);
			font-size:14px;
			-webkit-transition: color 0.3s ease-out;
			-moz-transition: color 0.3s ease-out;
			-ms-transition: color 0.3s ease-out;
			-o-transition: color 0.3s ease-out;
			transition: color 0.3s ease-out;
			}
			.filter-block label:hover::before{color:rgba(255,255,255,0.6);}
			.filter-block label.active::before{color:rgba(255,255,255,1);}
			
		.filter-block label::after{
			font-family: KeytoeIcons;
			content:"\e80a";
			position: absolute;
			left:10px;
			top:7px;
			font-size:16px;
			color:#A7A1A1;
			-webkit-transition: all 0.6s ease-out;
			-moz-transition: all 0.6s ease-out;
			-ms-transition: all 0.6s ease-out;
			-o-transition: all 0.6s ease-out;
			transition: all 0.6s ease-out;
			}
		
		.filter-block label:hover::after{color: #c0c0c0; content:"\e84a";}
		
		.filter-block label.active::after{color:#003545; content:"\e84a";}
		.filter-block label.active:hover::after{color: #c0c0c0; content:"\e80a";}

.filter-cnt{display: table; border-bottom:1px solid #f5f5f5; }
		.filter-cnt .layout-block{background:none; padding-left:0;}

.ie8 .filter-block label{background:#e6e6e6;}
.ie8 .filter-block label.active{background:#fff;}
.ie8 .filter-block label:hover{background:#f5f5f5;}
		
/* MERKENLIJST */
#brandsList{background:none;}
#brandsList li{	
	float: left; 
	width:20%;
	text-align: center;
	padding: 0; 
	}
	li.logo-brand {
		position: relative;
	}
	#brandsList a{
		display: block; 
		position: relative; 
		-webkit-transform-style: preserve-3d; 
		-webkit-perspective: 900px;
		}
		#brandsList .details,
		li.logo-brand .details {
			display: block; 
			position: absolute;
			bottom:10px; 
			font-family: 'L Serifa W01';
			font-size:16px;
			font-weight: 400;
			text-align: center;
			padding:15px 0;
			color: #003545;
			width:100%;
			-webkit-transition: all 0.3s ease-out;
			-webkit-transform-style: preserve-3d;
			left: 0; 
			}
			
			
		#brandsList li .title{display: block;}
	
.brands-overview { min-height: 400px; }
.brand-list { margin: 0; }
.brands-list a img, .brand-list a img { opacity: 0.6; }
	.brands-list a:hover img, .brand-list a:hover img { opacity: 1; }
	
.single-brands hr {border: 1px dashed #eee;}
	
.single-brands .content-block > h2 {
	font-family: 'Wendy W01', 'Wendy W01_n5', Georgia, serif;
	margin: 10px 20px 0;
	font-size: 39px;
	}	
	
/* PLATTEGROND */
#brandsMap{/* overflow: hidden; */ position: relative; left:-9999px;}
.cnt-w-sidebar #brandsMap{left: auto;}
#brandsMap.sight{position: relative; left:auto;}
#plattegrondImage{max-width: none;}
.mark.item .text{display: none; position: absolute; left:-29px; top:-50px;}

.smooth_zoom_preloader {background-image: url(../images/preloader_smoothzoom.gif);}	
.smooth_zoom_icons {background-image: url(../images/icons_smoothzoom.png);}


#zoom_container .landmarks{
		position:absolute;
		z-index:2;	
		top:0px;
		left:0px;
		font-family: 'Neue Helvetica W01', 'Neue Helvetica W01_n3', Helvetica, Arial, sans-serif;
		font-weight: 300;
		font-size:12px;
		color: #ffffff;
		height:100%;
		width:100%;
	}	
	#zoom_container .landmarks .item {
		position:absolute;		
		display: none;	
		z-index: 2;
	}	
		#zoom_container .landmarks .item.active .text{display: block;}
		.plattegrond #zoom_container .landmarks .item{visibility: hidden;}
		
	#zoom_container .landmarks .lable div {
		width: 100px;
		padding: 4px;		
	}	
	#zoom_container .landmarks .mark .text{
		background-color:#000000;
		padding:2px 6px;
		-webkit-perspective: 1000px;
		-moz-perspective: 1000px;
		-ms-perspective: 1000px;
		-o-perspective: 1000px;
		perspective: 1000px;
	}	
	#zoom_container .item.mark{
		-webkit-perspective: 1500px; 
		-moz-perspective: 1500px; 
		-ms-perspective: 1500px; 
		-o-perspective: 1500px; 
		perspective: 1500px; 
		-webkit-transform-style: preserve-3d;
		-moz-transform-style: preserve-3d;
		-ms-transform-style: preserve-3d;
		-o-transform-style: preserve-3d;
		transform-style: preserve-3d;
		}
		#zoom_container .marker-link {
			border-top: 10px solid transparent; 
			-webkit-transition: -webkit-transform 0.2s ease-out;
			-moz-transition: -moz-transform 0.2s ease-out;
			-ms-transition: -ms-transform 0.2s ease-out;
			-o-transition: -o-transform 0.2s ease-out;
			transition: transform 0.2s ease-out;
			}
		#zoom_container .marker-link img{max-width: none;}
		#zoom_container div[class^="noSel"]{z-index: 2 !important;}
		#zoom_container .landmarks .item:hover{z-index: 3!important;}
		#zoom_container .marker-link:hover{
			-webkit-transform:scale(1.1) rotateX(-25deg) translateZ(10px);
			-moz-transform:scale(1.1) rotateX(-25deg) translateZ(10px);
			-ms-transform:scale(1.1) rotateX(-25deg) translateZ(10px);
			-o-transform:scale(1.1) rotateX(-25deg) translateZ(10px);
			transform:scale(1.1) rotateX(-25deg) translateZ(10px);
			}

@-webkit-keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@-moz-keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@-ms-keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@-o-keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

.loader{
	left: 50%;
	position: absolute;
	top: 100px;
	z-index: 10;
	}
	
.storefront{position: relative;}
.storefront > li {
	visibility: hidden; 
	display: none;
	}
	.storefront > li ul{clear: both;}
		.brands-pages .storefront > li li{
			width: 50%;
			}	
		.storefront > li li{
			float: left; 
			opacity:0; 
			}
			.storefront > li li a{display: block; text-align: center;}
	
	.storefront li.active{visibility: visible;}
		
		.storefront li.active li:nth-child(1){
			-webkit-animation-delay: 0.3s;
			-moz-animation-delay: 0.3s;
			-ms-animation-delay: 0.3s;
			-o-animation-delay: 0.3s;
			animation-delay: 0.3s;
			}
		.storefront li.active li:nth-child(2){	
			-webkit-animation-delay: 0.1s;
			-moz-animation-delay: 0.1s;
			-ms-animation-delay: 0.1s;
			-o-animation-delay: 0.1s;
			animation-delay: 0.1s;
			}
		.storefront li.active li:nth-child(3){
			-webkit-animation-delay: 0.6s;
			-moz-animation-delay: 0.6s;
			-ms-animation-delay: 0.6s;
			-o-animation-delay: 0.6s;
			animation-delay: 0.6s;
			}
		.storefront li.active li:nth-child(4){
			-webkit-animation-delay: 0.4s;
			-moz-animation-delay: 0.4s;
			-o-animation-delay: 0.4s;
			-ms-animation-delay: 0.4s;
			animation-delay: 0.4s;
			}
		.storefront li.active li:nth-child(5){
			-webkit-animation-delay: 0.5s;
			-moz-animation-delay: 0.5s;
			-ms-animation-delay: 0.5s;
			-o-animation-delay: 0.5s;
			animation-delay: 0.5s;
			}
		.storefront li.active li:nth-child(6){
			-webkit-animation-delay: 0.7s;
			-moz-animation-delay: 0.7s;
			-ms-animation-delay: 0.7s;
			-o-animation-delay: 0.7s;
			animation-delay: 0.7s;
			}
		.storefront li.active li:nth-child(7){
			-webkit-animation-delay: 0.6s;
			-moz-animation-delay: 0.6s;
			-ms-animation-delay: 0.6s;
			-o-animation-delay: 0.6s;
			animation-delay: 0.6s;
			}
		.storefront li.active li:nth-child(8){
			-webkit-animation-delay: 0.8s;
			-moz-animation-delay: 0.8s;
			-ms-animation-delay: 0.8s;
			-o-animation-delay: 0.8s;
			animation-delay: 0.8s;
			}
		
		.storefront > li.active li{	
			-webkit-animation-name: fadeIn; 
			-webkit-animation-fill-mode: forwards; 
			-webkit-animation-iteration-count: 1;
			-webkit-animation-duration: 0.3s;
			
			-moz-animation-name: fadeIn; 
			-moz-animation-fill-mode: forwards; 
			-moz-animation-iteration-count: 1;
			-moz-animation-duration: 0.3s;
			
			-ms-animation-name: fadeIn; 
			-ms-animation-fill-mode: forwards; 
			-ms-animation-iteration-count: 1;
			-ms-animation-duration: 0.3s;
			
			-o-animation-name: fadeIn; 
			-o-animation-fill-mode: forwards; 
			-o-animation-iteration-count: 1;
			-o-animation-duration: 0.3s;
			
			animation-name: fadeIn; 
			animation-fill-mode: forwards; 
			animation-iteration-count: 1;
			animation-duration: 0.3s;
			}

@media screen and (min-width:768px) and (max-width:1024px){
	.storefront > li li{width:100%;}
	}

/*------------------MAIN PAGE-----------------------------*/
.content-block{position: relative;}

.main-page .header{height:auto;}
	.main-page .looknfeel{height:400px;}
	
.main-page .content-block{margin-top:10px;}
.main-page .layout-block{
	background-color: none; 
	padding:0; 
	overflow: visible; 
	position: relative;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
	}
	.main-page .movie-block a{display: block; text-align: center; position: relative; }
	.main-page .movie-block a::before{
		display: block;
		position: absolute;
		left:50%;
		margin-left:-25px;
		top:50%;
		margin-top:-50px;
		height: 50px;
		width:50px;
		line-height: 50px;
		border-radius: 100%;
		border:5px solid #fff;
		content: "\25B6";
		color: #fff;
		padding:5px 0 0 5px;
		font-size:22px;
		background:rgba(0,0,0,0.5);
		-webkit-box-shadow: 1px 1px 2px #000;
		-moz-box-shadow: 1px 1px 2px #000;
		-webkit-transition:-webkit-transform 0.3s ease-out;
		-moz-transition:-moz-transform 0.3s ease-out;
		}
		.main-page .movie-block a:hover::before{-webkit-transform:scale(1.1);}
		
	.main-page .movie-block figcaption{
		position: absolute;
		bottom:0;
		left:0; 
		background:rgba(255,255,255,0.9); 
		font-family:'L Serifa W01', 'L Serifa W01_n2', Georgia, serif; 
		font-weight: 200;
		padding:15px;
		width:100%;
		text-align: left;
		}
		.movie-block p{margin: 5px 0 0 0; line-height: 100%;}
		
		
/*---------------- MERKEN INFORMATIE ---------------*/
.brand-info-page .header{height:auto;}
.brand-info-page .layout-block{overflow: visible;}

/*css3 loader*/
.loader {
text-align: center;
width:80px;
height:50px;
}

.loader span {
	display: inline-block;
	vertical-align: middle;
	width: 10px;
	height: 10px;
	margin: 25px auto;
	background: #000000;
	-moz-border-radius: 50px;
	-moz-animation: bubblingG 1.3s infinite alternate;
	-webkit-border-radius: 50px;
	-webkit-animation: bubblingG 1.3s infinite alternate;
	-ms-border-radius: 50px;
	-ms-animation: bubblingG 1.3s infinite alternate;
	-o-border-radius: 50px;
	-o-animation: bubblingG 1.3s infinite alternate;
	border-radius: 50px;
	animation: bubblingG 1.3s infinite alternate;
}

#bubblingG_1 {
	-moz-animation-delay: 0s;
	-webkit-animation-delay: 0s;
	-ms-animation-delay: 0s;
	-o-animation-delay: 0s;
	animation-delay: 0s;
}

#bubblingG_2 {
	-moz-animation-delay: 0.39s;
	-webkit-animation-delay: 0.39s;
	-ms-animation-delay: 0.39s;
	-o-animation-delay: 0.39s;
	animation-delay: 0.39s;
}

#bubblingG_3 {
	-moz-animation-delay: 0.78s;
	-webkit-animation-delay: 0.78s;
	-ms-animation-delay: 0.78s;
	-o-animation-delay: 0.78s;
	animation-delay: 0.78s;
}

@-moz-keyframes bubblingG {
0% {
	width: 10px;
	height: 10px;
	background-color:#000000;
	-moz-transform: translateY(0);
	}

100% {
	width: 24px;
	height: 24px;
	background-color:#FFFFFF;
	-moz-transform: translateY(-21px);
	}

}

@-webkit-keyframes bubblingG {
0% {
	width: 10px;
	height: 10px;
	background-color:#000000;
	-webkit-transform: translateY(0);
}

100% {
width: 24px;
height: 24px;
background-color:#FFFFFF;
-webkit-transform: translateY(-21px);
}

}

@-ms-keyframes bubblingG {
0% {
width: 10px;
height: 10px;
background-color:#000000;
-ms-transform: translateY(0);
}

100% {
width: 24px;
height: 24px;
background-color:#FFFFFF;
-ms-transform: translateY(-21px);
}

}

@-o-keyframes bubblingG {
0% {
width: 10px;
height: 10px;
background-color:#000000;
-o-transform: translateY(0);
}

100% {
width: 24px;
height: 24px;
background-color:#FFFFFF;
-o-transform: translateY(-21px);
}

}

@keyframes bubblingG {
0% {
width: 10px;
height: 10px;
background-color:#000000;
transform: translateY(0);
}

100% {
width: 24px;
height: 24px;
background-color:#FFFFFF;
transform: translateY(-21px);
}

}