@charset "utf-8";
/* CSS Document */

	/* Testing */
	@import url("/style/css/development-notes.css");

	/* Settings */
	@import url("/style/css/browser-reset.css");
	@import url("/style/css/settings.css");
	@import url("/style/css/fonts.css");
	@import url("/style/css/variables.css");
	@import url("/style/css/display-items.css");

	/* Menu's & Header */
	@import url("/style/css/header-top.css");
	@import url("/style/css/header.css");
	@import url("/style/css/mobile-menu.css");
	@import url("/style/css/sidebar.css");

	/* Modules & Content */
	@import url("/style/css/breadcrumbs.css");
	@import url("/style/css/categories.css");
	@import url("/style/css/category-blocks.css");
	@import url("/style/css/category-list.css");
	@import url("/style/css/content.css");
	@import url("/style/css/content.cta.css");
	@import url("/style/css/content.product_page.css");
	@import url("/style/css/dynamic-columns.css");
	@import url("/style/css/faq.css");
	@import url("/style/css/footer.css");
	@import url("/style/css/forms.css");
	@import url("/style/css/hero.css");
	@import url("/style/css/horizontal-slider.css");
	@import url("/style/css/lightbox.css");
	@import url("/style/css/meta-checker.css");
	@import url("/style/css/news.css");
	@import url("/style/css/notification.css");
	@import url("/style/css/offerease__categories.css");
	@import url("/style/css/offerease__products.css");
	@import url("/style/css/products-featured.css");
	@import url("/style/css/products.css");
	@import url("/style/css/views.css");

	/* @import url("/style/css/textfolder.css"); 			*/
	/* @import url("/style/css/special-note.css"); 			*/
	/* @import url("/style/css/header-search.css"); 		*/
	/* @import url("/style/css/filters.css"); 				*/
	/* @import url("/style/css/login.css"); 				*/
	/* @import url("/style/css/my-account.css"); 			*/
	/* @import url("/style/css/block_links.css"); 			*/
	/* @import url("/style/css/background_image.css"); 		*/
	/* @import url("/style/css/shop.css"); 					*/
	/* @import url("/style/css/intake-popup.css"); 			*/
	/* @import url("/style/css/checkout-steps.css"); 		*/
	/* @import url("/style/css/checkout-products.css"); 	*/ 
	/* @import url("/style/css/opening_hours.css"); 		*/ 


	/* Framework */
		
	.mother{
		width:100%;
		}	
		
	.child{
		position:		relative;
		width:			var(--section_inner_width);
		padding-left: 	var(--section_padding_left);
		padding-right: 	var(--section_padding_right);
		}	
		
	
	/* Overlay */

	.overlay,
	.suboverlay{
		background-color:rgba(0,0,0,0.0);
		position: absolute;
		top:0;
		left:0;
		right:0;
		bottom:0;
		height:100%;
		width:100%;
		pointer-events: none;
		z-index: 8;
		transition: background 500ms;
		-webkit-transition: background 500ms;
		-moz-transition: background 500ms;
		-ms-transition: background 500ms;
		-o-transition: background 500ms;
		}
	.suboverlay{
		background-color:rgba(255,255,255,0.0);
		-webkit-transition: background 1000ms;
		-moz-transition: background 1000ms;
		-ms-transition: background 1000ms;
		-o-transition: background 1000ms;
		z-index: 9000;
		}
		.overlay.active,
		.suboverlay.active{
			background-color:rgba(0,0,0,0.4);pointer-events: all;
			cursor: 		pointer;
			}

		.suboverlay.active{
			background-color:rgba(255,255,255,1);
			}

	#wrapper,
	#wrapper main{
		position: 			relative;
		transition: 		margin-left 500ms;
		-webkit-transition: margin-left 500ms;
		-moz-transition: 	margin-left 500ms;
		-ms-transition: 	margin-left 500ms;
		-o-transition: 		margin-left 500ms;
		}
	
	
		





	header#page-header{
		width:100%;
		min-height:300px;
		display: block;
		background-color:#f1f1f1;
		}

		/*header#page-header.margin-negatief{
			margin-bottom:-75px;
			}*/

	header#page-header nav{
		width:100%;
		height:140px;
		position: absolute;
		top:0;
		left:0;
		right:0;
		z-index: 10;
		}

	header#page-header nav .inner{
		height:100%;
		padding-left:35px;
		padding-right:35px;
		margin:0 auto;
		max-width:1200px;
		}
		
	header#page-header .left{
		display: block;
		width:28%;
		height:100%;
		float:left;
		}
		

	header#page-header .logo{
		display: block;
		width:44%;
		height:100%;
		float:left;
		position: relative;
		}

	header#page-header .logo a{
		background-image:url(/style/img/logo-cfc-yp-gold.png);
		background-repeat: no-repeat;
		background-size: 80%;
		background-position: 50%;
		width:100%;
		height:100%;
		display: block;
		-webkit-transition: background-size 300ms;
		-moz-transition: background-size 300ms;
		-ms-transition: background-size 300ms;
		-o-transition: background-size 300ms;
		transition: background-size 300ms;
		}

		
		header#page-header .logo a:hover{
			background-size: 140px;
			}

		header#page-header .logo.zwart a{ 	background-image:url(/style/img/logo-cfc-yp-black.png); }
		header#page-header .logo.wit a{ 	background-image:url(/style/img/logo-cfc-yp-white.png); }
		header#page-header .logo.kleur a{ 	background-image:url(/style/img/logo-cfc-yp-gold.png); }

		/*body.dark header#page-header .logo a{
			background-image:url(/style/img/logo-cfc-white.png);
			}*/

	header#page-header .quick-menu{
		display: block;
		width:28%;
		height:100%;
		float:right;
		text-align: right;
		
		/*display: none;*/
		}
		
	header#page-header .quick-menu ul{
		display: table;
		height:100%;
		float:right;
		display: flex;
		align-items: center;
		justify-content: center;
		}

	header#page-header .quick-menu ul li{
		height:100%;
		font-weight: 600;
		color:#000;
		/*padding-left:30px;*/
		line-height: 0.8em;
		text-align: left;
		display: flex;
		align-items: center;
		justify-content: center;
		}

		/*body.dark header#page-header .quick-menu ul li{
			color:#FFF;
			}*/

		header#page-header .quick-menu.wit ul li{
			color:#FFF;
			}

		header#page-header .quick-menu.zwart ul li{
			color:#000;
			}
			
	 header#page-header .quick-menu ul li a{
		position:relative;
		display: flex;
		align-items: center;
		justify-content: center;
		height:100%;
		letter-spacing:0px;
		-webkit-transition: color 300ms, letter-spacing 300ms;
		-moz-transition: color 300ms, letter-spacing 300ms;
		-ms-transition: color 300ms, letter-spacing 300ms;
		-o-transition: color 300ms, letter-spacing 300ms;
		transition: color 300ms, letter-spacing 300ms;
		}

	 .quick-menu ul li a span{
		padding:7px 12px;
		/*border-radius:30px;*/
		-webkit-transition: color 300ms, background-color 300ms, border 300ms, outline-offset 300ms;
		-moz-transition: color 300ms, background-color 300ms, border 300ms, outline-offset 300ms;
		-ms-transition: color 300ms, background-color 300ms, border 300ms, outline-offset 300ms;
		-o-transition: color 300ms, background-color 300ms, border 300ms, outline-offset 300ms;
		transition: color 300ms, background-color 300ms, border 300ms, outline-offset 300ms;
		text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.1);
		 text-align: center;

		/*border: 1px solid #000;*/
		background-color:#000;
		color:#FFF;
		position: relative;
		text-transform: uppercase;
		font-size: 0.7em;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-ms-box-sizing: border-box;
		-o-box-sizing: border-box;
		box-sizing: border-box;
		 
		 -moz-transform: skew(-10deg, 0deg);
		-webkit-transform: skew(-10deg, 0deg);
		-o-transform: skew(-10deg, 0deg);
		-ms-transform: skew(-10deg, 0deg);
		transform: skew(-10deg, 0deg);
		 
		outline: 2px solid;
		outline-offset: -2px;
		outline-color: rgba(0, 0, 0, 1);
		 font-weight: 100;
		 
		}
	 .quick-menu ul li a span:before{
		/*border: 2px solid #000;*/
		width: calc(100% + 10px);
		height: calc(100% + 10px);
		top:50%;
		left:50%;
		transform: translate(-50%,-50%);
		position: absolute;
		display: block;
		content:"";
		border-radius:0px;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-ms-box-sizing: border-box;
		-o-box-sizing: border-box;
		-webkit-transition: width 300ms, height 300ms;
		-moz-transition: width 300ms, height 300ms;
		-ms-transition: width 300ms, height 300ms;
		-o-transition: width 300ms, height 300ms;
		transition: width 300ms, height 300ms;
		}


	 .quick-menu.wit ul li a span{
		border: none;
		background: transparent;
		color:#FFF;
		border-radius:0px;
		outline: 2px solid;
		outline-offset: -2px;
		outline-color: rgba(255, 255, 255, 1);
		}

	 .quick-menu.kleur ul li a span{
		border: none;
		background: transparent;
		color:#FFF;
		border-radius:0px;
		outline: 2px solid;
		outline-offset: -2px;
		outline-color: rgba(241, 214, 121, 1);
		 
		/*background: #F1D679;
		background: -webkit-linear-gradient(to bottom, #f1d87b 23%, #CA9B25 57%, #E4C05D 63%);
		background: -moz-linear-gradient(to bottom, #f1d87b 23%, #CA9B25 57%, #E4C05D 63%);
		background: linear-gradient(to bottom, #f1d87b 23%, #CA9B25 57%, #E4C05D 63%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;*/
		}

	 .quick-menu ul li a:hover span{
		/*border: 1px solid #000;*/
		text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.0);
		outline-offset: 3px;
		}

	.quick-menu ul li a:hover span:before{
		width: 100%;
		height: 100%;
		}


	.quick-menu ul li:first-child{
		padding-left:0;
		}
		
	.main-menu  .quick-menu {
		margin-top:30px;
		}

	.main-menu  .quick-menu ul li a{
		margin-top:0px !important;
		}

	.main-menu  .quick-menu ul li a span{
		/*border: 1px solid #FFF;*/
		background-color:transparent;
		font-weight: 500;
		color: #FFF;
		border:none;
		outline: 1px solid;
		outline-offset: 0px;
		outline-color:#F1D679;

/*background: #F1D679;
background: -webkit-linear-gradient(to bottom, #f1d87b 23%, #CA9B25 57%, #E4C05D 63%);
background: -moz-linear-gradient(to bottom, #f1d87b 23%, #CA9B25 57%, #E4C05D 63%);
background: linear-gradient(to bottom, #f1d87b 23%, #CA9B25 57%, #E4C05D 63%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;*/
		
		 -moz-transform: skew(-10deg, 0deg);
		-webkit-transform: skew(-10deg, 0deg);
		-o-transform: skew(-10deg, 0deg);
		-ms-transform: skew(-10deg, 0deg); 
		transform: skew(-10deg, 0deg);
		display:inline-block;
		
		}
	.main-menu  .quick-menu ul li a:hover span{
		outline-offset: 4px;
		}

	 .main-menu .quick-menu ul li a span:before{
		/*border: 2px solid #FFF;*/
		 display:none;
		}

	 .main-menu .quick-menu ul li a span:before{
		/*border: 2px solid #FFF;*/
		}
	
	/* Page Header -> Page Title */
		
	

	#hms_inf__header .page-title{
		height:100%;
		width:100%;
		}

		body.dark header#page-header .page-title{
			background-color:#000;
			color:#FFF;
			text-align:center;
			}

	#hms_inf__header .page-title .child{
		margin:0 auto;
		padding-top:calc(100px + var(--header_navigation_height));
		padding-bottom:60px;
		padding-bottom:var(--header_navigation_height);
		width:100%;
		padding-left:35px;
		padding-right:35px;
		max-width: 800px;
		display:flex;
		align-items: center;
		justify-content: center;
		min-height: 300px;

		}

/*
	#hms_inf__header .page-title h1{
		color:#FFF;
		margin-bottom:0;
		text-shadow: 1px 1px 0px rgba(0,0,0,0.4);
		font-weight: 600;
		display:inline;
		line-height:1.2em;
		-webkit-border-radius: 1px; 
		-moz-border-radius: 1px; 
		-ms-border-radius: 1px; 
		-o-border-radius: 1px; 
		border-radius: 1px;
		display:block;
		text-align:center;
		}*/
		



	/*body.dark .page-title,
	body.dark .page-title h1, body.dark .page-title .h1-simulation,
	body.dark .page-title h2, body.dark .page-title .h2-simulation,
	body.dark .page-title h3, body.dark .page-title .h3-simulation,
	body.dark .page-title h4, body.dark .page-title .h4-simulation,
	body.dark .page-title h5, body.dark .page-title .h5-simulation{ color:#FFF; }*/


	.page-top-menu{
		width:30%;
		width:calc(450px * 1);
		/*height:100%;*/
		/*float:right;*/
		padding-top:70px;
		padding-bottom: 60px;
		display:none;
		}

	.page-top-menu ul li{
		display: block;
		}

	.page-top-menu ul li a.menu-0{
		padding: 8px 20px 8px 60px;
		text-transform: uppercase;
		display: block;
		font-size: 16px;
		line-height: 1.5em;
		color:#303030;
		border-left:4px solid rgba(0,97,161, 0);
		letter-spacing: 1px;
		-webkit-transition: border-color 300ms, color 300ms, font-weight 300ms;
		-moz-transition: border-color 300ms, color 300ms, font-weight 300ms;
		-ms-transition: border-color 300ms, color 300ms, font-weight 300ms;
		-o-transition: border-color 300ms, color 300ms, font-weight 300ms;
		transition: border-color 300ms, color 300ms, font-weight 300ms;
		}

	.page-top-menu ul li a.menu-0:hover{
		/*background-color: rgba(0,0,0,0.02);*/
		color:#0061a1;
		}

	.page-top-menu ul li a.menu-0.menu-current{
		font-weight: 800;
		}

	.page-top-menu ul li a.menu-0:hover{
		border-left-color: rgba(0,97,161, 0.3);
		}

	.page-top-menu ul li a.menu-0.menu-current{
		border-left-color: rgba(0,97,161, 1);
		}

	.page-top-menu .secundair{
		padding:30px 20px 10px 60px;
		color:#0061a1;
		}



	

@media only screen and (min-width: 490px) {
	
	header#page-header .left,
	header#page-header .quick-menu{
		width:calc((100% - 180px) / 2);
		}

	header#page-header .logo{
		width:180px;
		}
	
	 .quick-menu ul li a span{
		padding:10px 15px;
		font-size: 0.8em;
		}

}
	
@media only screen and (min-width: 768px) {
	
	.child{
		margin:0 auto;
		padding-left:0;
		padding-right:0;
		/*max-width:1200px;*/
		/*width: calc((100% / 12) * 10);*/
		width: 80%;
		}	
	
	
}
	
@media only screen and (max-width: 949px) {


}
	
@media only screen and (min-width: 950px){

}		

@media only screen and (min-width: 1200px){
	

}

@media only screen and (min-width: 1350px){
	

	
}

@media only screen and (min-width: 1500px){
		.child{
		max-width:1400px;
		}	

	
	
}
@media only screen and (min-width: 2000px){
	
		.child{
		max-width:1500px;
		}	

}