html																{}
body																{color:#000; background-color: #fff; font-size:18px; font-weight: 300; font-family: 'Poppins', sans-serif; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}

:root {
	--yellow: #cec4ae;
	--yellow-rgb: 206, 196, 174;
	--yellow-light: #F7F6F3;
	--black: #000;
	--white: #fff;

	--boxShadow: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05);
	--boxShadow-hover: 0 -1px 1px 0 rgba(0,0,0,.05), 0 1px 4px 0 rgba(0,0,0,.4);
}

/* headings */
h1, h2, h3, h4, .h1, .h2, .h3, .h4									{word-wrap:break-word; line-height: 1.2em; margin-bottom: 15px; font-family: 'Poppins', serif;}
h1, .h1																{font-size: 40px; font-weight: 400; color: var(--black);}
h2, .h2																{font-size: 30px; font-weight: 600; color: var(--black);}
h3, .h3																{font-size: 26px; font-weight: 600; color: var(--black);}
h4, .h4																{font-size: 20px; font-weight: 600; color: var(--black);}

/* bold & italic */
strong                                	                            {font-weight: 600; font-style: inherit;}
em                                    	                            {font-style: italic; font-weight: inherit;}

/* sup- & subscript */
sup, sub 															{vertical-align: baseline; position: relative; font-size: 75%; line-height: 0;} /* preventing from affecting line-height */
sup																	{top: -.5em; vertical-align: sub}
sub																	{bottom: -.25em; vertical-align: sub}

.basicContainer 													{max-width: 1600px; padding: 60px 120px 45px 120px; margin:0px auto;}
.basicContainer.basicContainerSmall 								{max-width: 1340px;}
		
		.stickyScroll  				{position: fixed; top:0; left:0; width: 100%; height: 112px; z-index: 1001; -webkit-transform: translateZ(0); transform: translateZ(0); will-change: transform; -webkit-transition: -webkit-transform .5s; transition: -webkit-transform .5s; transition: transform .5s; transition: transform .5s, -webkit-transform .5s; }
		.stickyScroll::after 		{clear: both; content: ""; display: block; }
		.stickyScroll.is-hidden 	{-webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); } 
		.stickyScrollSub 			{position: relative; z-index: 1; clear: both; width: 100%; -webkit-transform: translateZ(0); transform: translateZ(0); will-change: transform; -webkit-transition: -webkit-transform .5s; transition: -webkit-transform .5s; transition: transform .5s; transition: transform .5s, -webkit-transform .5s; }
		.stickyScrollGhost 			{height: 150px;}

			#smallTopContainer 			{background-color: #000; color: #fff;}
			#smallTopContainer .basicContainer 	{padding-top: 0; padding-bottom: 0;}
				
				.uspList 					{display: flex; flex-wrap: wrap; justify-content: center; align-items: center; line-height: 1.3em; height: 32px; font-size: 12px; width: calc(100% + 30px); margin-left: -15px; margin-right: -15px;}
					.uspList li 				{background-repeat: no-repeat; background-position: left center; background-size: contain; margin:0 15px; background-size: 16px 16px; padding-left: 20px; line-height: 1.3em; height: 16px; display: flex; align-items: center; font-weight: 700;}
					.uspList li.usp1 			{background-image: url('/images/style/icon-package.svg');}
					.uspList li.usp2 			{background-image: url('/images/style/icon-truck.svg');}
					.uspList li.usp3 			{background-image: url('/images/style/icon-tag.svg');}
					.uspList li.usp4 			{background-image: url('/images/style/icon-exclusive.svg');}

					/* footer USP's */
					#uspContainer				{color: #fff; background-color: var(--black); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='12' viewBox='0 0 20 12'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='charlie-brown' fill='%23ffffff' fill-opacity='0.125'%3E%3Cpath d='M9.8 12L0 2.2V.8l10 10 10-10v1.4L10.2 12h-.4zm-4 0L0 6.2V4.8L7.2 12H5.8zm8.4 0L20 6.2V4.8L12.8 12h1.4zM9.8 0l.2.2.2-.2h-.4zm-4 0L10 4.2 14.2 0h-1.4L10 2.8 7.2 0H5.8z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");}
					#uspContainer .basicContainer 		{display: flex; justify-content: center; padding-top: 20px; padding-bottom: 20px;}
						#uspContainer .uspList	    		{justify-content: space-between; height: auto;}
							#uspContainer .uspList li   		{background-size:26px 26px; height: auto; padding:20px 0px 20px 36px; font-size: 18px; font-weight: 700; text-shadow: none; filter: drop-shadow( 0px 2px 2px rgba(0, 0, 0, .4));}
					/* end footer USP's */

				#smallMenu 					{float: right;}
				#smallMenu li 				{display: inline-block; vertical-align: middle; margin-left: 20px;}
				#smallMenu li a 			{display: block; color: #fff; text-decoration: none; line-height: 32px;}
				#smallMenu li a:hover 		{text-decoration: underline;}
				#smallMenu li:first-child a	{background: url('/images/style/icon-phone.svg') no-repeat center left; background-size: 15px 15px; padding-left: 22px; font-weight: 400;}

			#mainNavigation 						{background-color: #fff; position: relative; z-index: 2;}
				#mainNavigation .basicContainer 		{height: 80px; display: flex; align-items: center; padding-top: 0; padding-bottom: 0;}

				#logo 						{display: block; width: 246px; position: relative; flex: 0 0 auto; margin-right: 20px;}
					#logo:before 				{content: ''; display: block; padding-bottom: 16.2866449511%; transition: padding-bottom ease 0.3s;}
					#logo img 					{position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain;}
		
				#mainNavigation .partNavigation-h 						{font-size: 14px; margin-left: auto;}

				#mainNavigation .partSearchBar.partSearchBar1				{flex: 1 1 auto;}

				#mainNavigation .partButton.naked  						{margin-left: 20px; flex: 0 0 auto;}
				#mainNavigation .partButton.naked svg 					{fill: var(--black); height: 32px; max-width: 32px;}

					/* hover */
					@media (hover: hover) {
						#mainNavigation .partButton.naked:hover svg, #mainNavigation .partButton.naked:focus svg {
							fill: var(--yellow);
						}
					}

			#productNavigation 													{height: 40px; text-align: left; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); background-color: var(--yellow);
				background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='12' viewBox='0 0 20 12'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='charlie-brown' fill='%23000000' fill-opacity='0.06'%3E%3Cpath d='M9.8 12L0 2.2V.8l10 10 10-10v1.4L10.2 12h-.4zm-4 0L0 6.2V4.8L7.2 12H5.8zm8.4 0L20 6.2V4.8L12.8 12h1.4zM9.8 0l.2.2.2-.2h-.4zm-4 0L10 4.2 14.2 0h-1.4L10 2.8 7.2 0H5.8z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");}
			#productNavigation .basicContainer 									{display: flex; justify-content: space-between; align-items: center; height: 100%; padding-top: 0; padding-bottom: 0;}


/******************************************
Home
******************************************/		

/* intro */
#homeIntro 	{}
	#homeIntro .basicContainer {max-width: 1140px; font-size: 24px; padding-top: 120px;}
		#homeIntro h1 	{margin-bottom: 10px;}

/* colors */
#homeProductColors {border-top: solid 1px rgba(0,0,0,0.1);}
	#homeProductColors .basicContainer {text-align: center;}
		#homeProductColors h2 {margin-bottom: 30px;}
				
			.flexcontainerColors 	{width: calc(100% + 20px); margin-left: -10px; margin-right: -10px; margin-bottom: 10px;}
			.flexcontainerColors .flexItem 					{margin:0px 10px 20px 10px; text-decoration: none; text-align: center;}
			.flexcontainerColors .flexItem .flexItemImage  			{opacity: 1; transition: opacity 0.3s ease;}
			.flexcontainerColors .flexItem:hover .flexItemImage 	{opacity: 0.8;}
				.flexcontainerColors .flexItem .partContentFileImageGallery {
					background-color: var(--black);
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='12' viewBox='0 0 20 12'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='charlie-brown' fill='%23ffffff' fill-opacity='0.125'%3E%3Cpath d='M9.8 12L0 2.2V.8l10 10 10-10v1.4L10.2 12h-.4zm-4 0L0 6.2V4.8L7.2 12H5.8zm8.4 0L20 6.2V4.8L12.8 12h1.4zM9.8 0l.2.2.2-.2h-.4zm-4 0L10 4.2 14.2 0h-1.4L10 2.8 7.2 0H5.8z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
				}
	
			.flexcontainerColors .flexItem .flexItemText 		{}
			.flexcontainerColors .flexItem .flexItemText h3 	{margin-bottom: 0; margin-top: 5px; color: #000; font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 14px;}

/* images */
#sectionImage 	{}
	#sectionImage .basicContainer {}


/******************************************
Basics
******************************************/		

#basicContent {}
	#basicContent .basicContainer {max-width: 1340px;}
		#basicContainercontent  		{}


/******************************************
Flex containers 
******************************************/		

.flexContainer 				{display: flex; flex-wrap: wrap; justify-content: center;}
.flexContainerProducts 		{width: calc(100% + 20px); margin-left: -10px; margin-right: -10px; margin-bottom: 10px;}

		/* product overview */
		.flexItemLeft 						{width: 260px; padding-right: 60px;}
		.flexItemRight 						{width: calc(100% - 260px);}

		.flexItemLeft.search .partContentText {text-wrap: balance;}

		/* used for content right and menu left */ 
		.flexItemRightContent h2.h4 		{color: var(--yellow); margin-bottom: 2px;}

.productListTopBar 						{margin-bottom: 30px; display: flex; justify-content: flex-end;}
	.productListTopBarItem				 	{margin-left: 20px;}
		.productListTopBarItem span 			{margin-right: 10px;}
		.productListTopBarItem .partDropDown 	{}
		.productListTopBarItem.productListTopBarItemSorting .dropDownButtonValue span {background: url('/images/style/icon-sorting.svg') no-repeat left center; background-size: 24px 20px; padding-left: 37px;}

/******************************************
Products 
******************************************/		

#productDetail 	{}
	#productDetail .basicContainer {}

#highLightProductSection {border-top:solid 1px rgba(255,255,255,0.1);}
	#highLightProductSection .basicContainer {text-align: center;}
		#highLightProductSection h2 {margin-bottom: 20px;}

#relatedProductSection {border-top:solid 1px rgba(var(--yellow-rgb),0.25);}
	#relatedProductSection .basicContainer {text-align: center;}
		#relatedProductSection h2 {margin-bottom: 20px;}

		#relatedProductSection .flexContainerProducts {justify-content: center;}

/******************************************
Top intro
******************************************/		

#introContainer  						{text-align: center; border-bottom: solid 1px rgba(var(--yellow-rgb),0.25);}
	#introContainer .basicContainer 			{}
		#introContainer h1 							{}
		#introContainer .partBreadcrumb 			{justify-content: center;}
		#introContainer .partContentText 			{max-width: 900px; margin-left: auto; margin-right: auto;}

		#introContainer #searchTerm {display: inline-block; color: var(--yellow); line-height: 1.3em; margin-bottom: 15px;}

/******************************************
Products
******************************************/		
.flexContainerProducts .flexItem 					{margin:0px 10px 20px 10px; background-color: rgba(var(--yellow-rgb),0.15); text-decoration: none; text-align: center; transform: scale(1); transition: transform 0.3s ease, box-shadow .5s ease; padding:30px 20px 30px 20px; display: flex; flex-direction: column; justify-content: flex-start; align-items: center;}
.flexContainerProducts .flexItem:hover 				{background-color: rgba(var(--yellow-rgb),0.5); box-shadow: var(--boxShadow-hover); transform: scale(1.02);}	

.flexContainerColumns2 		{}
	.flexContainerColumns2 .flexItem, .flexContainerColumns1 .flexItem	{width: calc(50% - 20px);}

.flexContainerColumns3 		{}
	.flexContainerColumns3 .flexItem	{width: calc(33.33% - 20px);}

.flexContainerColumns4 		{}
	.flexContainerColumns4 .flexItem	{width: calc(25% - 20px);}	

/* for showing colors */
.flexContainerColumns10 		{}
	.flexContainerColumns10 .flexItem	{width: calc(10% - 20px);}	

/******************************************
Products overview
******************************************/	
.flexContainerProducts .flexItem h2 				{width: 100%; /* IE hack */}
.flexContainerProducts .flexItem h2 a 				{color: inherit; text-decoration: none; transition: border-color 0.3s ease;}
.flexContainerProducts .flexItem h2 a:hover 		{text-decoration: underline;}

.flexContainerProducts .partContentFileImageGallery.single								{margin-bottom: 15px; width: 100%; position: relative;}
.flexContainerProducts .partContentFileImageGallery:has(img[alt="default"]) {
	background-color: rgba(var(--yellow-rgb),0.3);
}
	.flexContainerProducts .partContentFileImageGallery.single:before 						{content: ''; display: block; padding-top: 100%; /* initial ratio of 1:1*/ }
	.flexContainerProducts .partContentFileImageGallery.single .contentFileImage  		  	{position:absolute; top:0; left:0; width:100%; height:100%;}
	.flexContainerProducts .partContentFileImageGallery.single .imagePlaceholder 				{padding-bottom: 100%!important;}

.flexContainerProducts #noResults {text-align: center; font-size: 30px; font-weight: 700; color: #000; font-family: 'Poppins', serif; width: 100%;}

.stockStatus								{font-weight: 600; margin-bottom: 20px; font-size: 14px;}
.stockStatusopVoorraad  					{color: #999; background: url('/images/style/icon-check-green.svg') no-repeat left center; background-size: 14px 14px; padding-left: 20px;}
.stockStatusWeinigOpVoorraad  				{color: var(--yellow);}
.stockStatusNietOpVoorraad  				{color: #000;}

.labelContainer						{font-size: 18px; display: flex; justify-content: center; align-items: center; margin-bottom: 10px; margin-top: auto;}
	.labelContainer span   			{margin:0px 5px 10px 5px; white-space: nowrap;}
	span.labelPrice 					{font-weight: 500; color: var(--black);}
	span.labelPriceStrikeThrough 		{text-decoration: line-through; color: #999;}
	span.labelPriceAddition 			{font-size: 16px; color: var(--black); margin-left: 0;}

/******************************************
Productgroups
******************************************/	

/* overview */
#productgroups 		{}
	#productgroups .basicContainer {}

		.flexContainerProductGroups 	{width: calc(100% + 20px); margin-left: -10px; margin-right: -10px; margin-bottom: 10px;}
		.flexContainerProductGroups .flexItem 					{margin:0px 10px 20px 10px; text-decoration: none; text-align: center; transition: box-shadow .5s ease; overflow: hidden; position: relative; background-color: var(--black); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='12' viewBox='0 0 20 12'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='charlie-brown' fill='%23ffffff' fill-opacity='0.125'%3E%3Cpath d='M9.8 12L0 2.2V.8l10 10 10-10v1.4L10.2 12h-.4zm-4 0L0 6.2V4.8L7.2 12H5.8zm8.4 0L20 6.2V4.8L12.8 12h1.4zM9.8 0l.2.2.2-.2h-.4zm-4 0L10 4.2 14.2 0h-1.4L10 2.8 7.2 0H5.8z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");}
		.flexContainerProductGroups .flexItem .flexItemImage  	{transform: scale(1); transition:transform 0.3s ease;}
		.flexContainerProductGroups .flexItem .flexItemImage .partContentFileImageGallery {
			margin-bottom: 0;
		}
		.flexContainerProductGroups .flexItem:hover .flexItemImage 	{transform: scale(1.15);}

		.flexContainerProductGroups .flexItem .flexItemText 		{position: absolute; width: 100%; height: 100%; padding:30px; top:0; left: 0; display: flex; justify-content: center; align-items: flex-end;}
		.flexContainerProductGroups .flexItem .flexItemText h3 	{margin-bottom: 0; color: #fff; text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4);}


/******************************************
Collecties
******************************************/	

/* overview */
#collecties 		{}
	#collecties .basicContainer {}

		.flexContainerCollecties 	{width: calc(100% + 20px); margin-left: -10px; margin-right: -10px; margin-bottom: 10px;}
		.flexContainerCollecties .flexItem 					{margin:0px 10px 20px 10px; text-decoration: none; text-align: center; transition: box-shadow .5s ease; overflow: hidden; position: relative; background-color: var(--black); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='12' viewBox='0 0 20 12'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='charlie-brown' fill='%23ffffff' fill-opacity='0.125'%3E%3Cpath d='M9.8 12L0 2.2V.8l10 10 10-10v1.4L10.2 12h-.4zm-4 0L0 6.2V4.8L7.2 12H5.8zm8.4 0L20 6.2V4.8L12.8 12h1.4zM9.8 0l.2.2.2-.2h-.4zm-4 0L10 4.2 14.2 0h-1.4L10 2.8 7.2 0H5.8z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");}
		.flexContainerCollecties .flexItem .flexItemImage  	{transform: scale(1); transition:transform 0.3s ease;}
		.flexContainerCollecties .flexItem .flexItemImage .partContentFileImageGallery{
			margin-bottom: 0;
		}

			.flexContainerCollecties .flexItem .flexItemImage,
			.flexContainerCollecties .flexItem .flexItemImage .partContentFileImageGallery,
			.flexContainerCollecties .flexItem .flexItemImage .partContentFileImageGallery * {
				height: 100%;
			}

		.flexContainerCollecties .flexItem:hover .flexItemImage 	{transform: scale(1.15);}

		.flexContainerCollecties .flexItem .flexItemText 		{position: absolute; width: 100%; height: 100%; padding:30px; top:0; left: 0; display: flex; justify-content: center; align-items: flex-end; }
		.flexContainerCollecties .flexItem .flexItemText h3 	{margin-bottom: 0; color: #fff; text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4);}

/******************************************
Dessins
******************************************/	

/* overview */
#dessins {padding-bottom: 30px; text-align: center;}
#dessins h2 {margin-bottom: 30px;}

.flexContainerDessins 	{width: calc(100% + 20px); margin-left: -10px; margin-right: -10px; margin-bottom: 10px;}
.flexContainerDessins .flexItem 					{margin:0px 10px 20px 10px; text-decoration: none; text-align: center; transition: box-shadow .5s ease; overflow: hidden; position: relative;}

.flexContainerDessins .flexItem .flexItemImage  	{transform: scale(1); transition:transform 0.3s ease;}
.flexContainerDessins .flexItem:hover .flexItemImage 	{transform: scale(1.15);}
	.flexContainerDessins .flexItem .flexItemImage .partContentFileImageGallery {
		margin-bottom: 0;
	}


.flexContainerDessins .flexItem .flexItemText 		{position: absolute; width: 100%; height: 100%; top:0; left: 0; padding:30px; background-color: rgba(var(--yellow-rgb), 0.15); display: flex; justify-content: center; align-items: flex-end;}
.flexContainerDessins .flexItem .flexItemText h3 	{margin-bottom: 0; color: #fff; text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);}

/* header */
#headerDessinContainer  						{}
 
#headerDessinContainer .partSlider  			{position: relative;}
#headerDessinContainer .slideContainer {padding-bottom:20.8%;}
#headerDessinContainer .slidePagination {position: absolute; bottom: 15px; z-index: 10; width: 100%;}
#headerDessinContainer .sliderButton {padding:20px;}

/******************************************
Colors
******************************************/	

#colors  {padding-bottom: 30px; text-align: center;}
#colors h2 {margin-bottom: 30px;}

/***********************************************
Inspiration
***********************************************/  

#sideBySideSection                      {}
    #sideBySideSection .basicContainer      {}

        #sideBySideContentList  				{}

			.sideBySideContentItem 					{display: flex; margin-bottom: 60px;}

                .sideBySideContentContainer             {}
                .sideBySideContentContainer.text        {width: 50%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; z-index: 10; background-color: rgba(var(--yellow-rgb),0.9); backdrop-filter: blur(10px); padding:40px 60px 40px 60px; margin-bottom: 60px;}
				.sideBySideContentContainer.image       {width: calc(50% + 60px); margin-left: -60px; margin-top: 60px;}

                    .sideBySideContentContainer.text h2        		 	{color: #000; font-weight: 700;}
						.sideBySideContentContainer.text h2 a 				{color: inherit; text-decoration: none; display: inline; background-image: linear-gradient(var(--black), var(--black)); background-repeat: no-repeat; background-position: bottom 0% left; background-size: 0% 3px; transition: background-size 500ms ease-in-out;}
						.sideBySideContentContainer.text h2 a:hover 		{background-size: 100% 3px;}
                    .sideBySideContentContainer.text .partContentText 	{}
                    .sideBySideContentContainer.text .partButton 		{}

			/* even */
			.sideBySideContentItem:nth-child(even) .sideBySideContentContainer.text 		{order:2;}
			.sideBySideContentItem:nth-child(even) .sideBySideContentContainer.image 		{order:1; margin:60px -60px 0 0;}

            /* responsive */
            @media screen and (max-width: 1280px){
                .sideBySideContentContainer.text        {width: 60%;}
				.sideBySideContentContainer.image       {width: calc(40% + 60px);}
            }
            
            @media screen and (max-width: 900px){
                .sideBySideContentItem                                                          {flex-direction: column;}
                    .sideBySideContentContainer                                                         {width: 100%!important; margin:0!important; /* used important to override nth-child selector */}
                    .sideBySideContentItem:nth-child(odd) .sideBySideContentContainer.text 	            {order:2;}
                    .sideBySideContentItem:nth-child(odd) .sideBySideContentContainer.image 	        {order:1;}
			}

            @media screen and (max-width: 667px){
                .sideBySideContentItem                                                          {margin-bottom: 20px;;}
                    .sideBySideContentContainer.text                                                {padding:25px;}
			}

/******************************************
Products detail
******************************************/	
.flexContainerDetail 				{text-align: left;}
	.flexItemProductDetailLeft 			{width: 60%; padding-right: 60px;}
	.flexItemProductDetailLeft #partSlickSliderSyncNavigation {margin-bottom:60px;}
	.flexItemProductDetailRight 		{width: 40%;}

	.flexItemProductDetailRight .labelContainer {justify-content: flex-start; font-size: 24px;}
	.flexItemProductDetailRight .labelContainer span {margin-left: 0px; margin-right: 10px; margin-bottom: 20px;}

	.flexItemProductDetailRight .stockStatus  	{font-size: 18px; display: inline-block;}

	.flexItemProductDetailRight .buyButton  	{display: block; width: auto; text-indent: 0px; color: #fff; font-size: 20px; line-height: 50px; font-weight: 400; padding-left: 56px; max-width: 300px; margin-bottom: 60px; background-position: left 20px center;}

#calculatorContainer 		{padding:25px; padding-bottom: 1px; background-color: rgba(var(--yellow-rgb),0.1);}

#calculatorWallContainer {}
	#calculatorWallContainer .formControlCombinedContainer {display: flex; align-items: flex-end;}
	.calculatorWallSingleSurface 	{margin-bottom: 0.8em ; min-height: var(--form-input-minwidth-height); font-weight: 700; display: flex; align-items: center; justify-content: flex-end; width: 70px; list-style: none; line-height: 1.3em; flex: 0 0 auto; color: #fff;}

	#calculatorWallResult {margin-top: 25px;} 
	#calculatorWallResult h4 {margin-bottom: 5px;}

	.calculatorRowList {line-height: 1.4em;}
				.calculatorResultRow {display: flex;}
					.calculatorResultColumn:first-child {margin-right: 4px;}
					.calculatorResultColumn:last-child 	{color: var(--black); font-weight: 500;}

		#calculatorDisclaimer {font-size: 14px; display: inline-block; margin-bottom: 25px; font-style: italic; color: var(--black);}

	.flexItemProductDetailRight .partShoppingCart1.buttonPopupProductAddAndAmount {background-color: rgba(var(--yellow-rgb),0.2); padding: 30px 20px 15px 20px; margin-bottom: 25px;}

/******************************************
Filters
******************************************/	

.flexItemFilter {font-size: 16px;}

	#resultAndSortContainer {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;}
		#labelAmountResult 		{margin-bottom: 20px; line-height: 36px;}
		#sortContainer 			{margin-bottom: 20px;}

/******************************************
Shopping cart popup
******************************************/	
#shoppingCartPopup 				{width: 800px; margin: 0px auto; background: #fff; padding: 40px;}
	#shoppingCartPopupTitle 		{padding: 8px 80px 8px 20px; background-color: #f7f7f7; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);}
	
	#shoppingCartPopupContentContainer 	{display: flex; margin-top: 20px; flex-wrap: wrap;}

		#shoppingCartPopupLeft 											{width: 60%; display: flex;}
		#shoppingCartPopupLeft .partContentFileImageGallery.single 		{max-width: 200px; margin-right: 20px;}
		#shoppingCartPopupLeft #shoppingCartPopupLeftText 				{}
		#shoppingCartPopupLeft #shoppingCartPopupLeftText .labelContainer span {margin-left: 0px; margin-right: 10px;}


		#shoppingCartPopupRight  										{width: 40%;}
		#shoppingCartPopupRight table                                   {width: 100%; margin-bottom: 20px;}
		#shoppingCartPopupRight table tr                                {}
		#shoppingCartPopupRight table td               					{padding: 10px 0px;}
		#shoppingCartPopupRight table td:last-child 					{font-weight: 600; color: #000;}

		#shoppingCartPopupRight .buyButton  	{display: block; width: auto; text-indent: 0px; color: #fff; font-size: 20px; line-height: 50px; font-weight: 400; padding-left: 56px; max-width: 300px; margin-bottom: 20px; background-position: left 20px center;}

		.shoppingCartPopupButton 				{color: #444; text-decoration: none;}
		.shoppingCartPopupButton:hover 			{text-decoration: underline;}

/********************************************** 
ShoppingCart custom code
**********************************************/

#shoppingCart   {display: flex; flex-direction: column;}
	
	#shoppingCartFooterContainer 	{display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: flex-start;}

		/* coupon code */
		#shoppingCartCouponCodeContainer 	{margin-right: auto; padding-right: 25px; padding-top: 25px; padding-bottom: 15px;}
			#shoppingCartCouponCodeContainer .partButton.couponCodeButtonShow {text-decoration: underline;}
			#shoppingCartCouponCodeContainer .partButton.couponCodeButtonShow:hover {color: #fff;}
			
			#shoppingCartCouponCodeControl 			{display: none; margin-bottom: 10px;}
			#shoppingCartCouponCodeControl.active 	{display: flex;}
				#shoppingCartCouponCodeControl .inputCouponCode 	{height: 36px; border:solid 1px #999; border-radius: 3px; margin-right: 5px; padding:0 8px; flex: 1 1 auto;}
				#shoppingCartCouponCodeControl .inputCouponCode.error {border-color: #eb0400;}
				#shoppingCartCouponCodeControl .partButton {height: 36px; width: 36px; justify-content: center; border-radius: 3px; background-color: #00b900; flex: 0 0 auto;}

		/* cost overview */
		#shoppingCartPriceContainer 		{line-height: 1.3em; background-color: rgba(var(--yellow-rgb),0.15); width: 100%; max-width: 600px; margin-bottom: 25px; padding:15px 25px; align-self: flex-end;}

		#shoppingCartPriceContainer table 				{width: 100%;}	
			#shoppingCartPriceContainer tr 					{}
			#shoppingCartPriceContainer tr td								{padding:10px 0; vertical-align: top;}
			#shoppingCartPriceContainer tr.priceTotal td 					{font-weight: 700; color: var(--black);}
			#shoppingCartPriceContainer tr.priceTotal.large td:last-child 	{font-size: 1.5em;}
			#shoppingCartPriceContainer tr td:last-child 					{text-align: right; white-space: nowrap;}

		/* shopping cart button container */		
		.shoppingCartOverviewButtonContainer	 						{display: flex; justify-content: space-between; flex-wrap: wrap; padding-bottom: 10px;}
			.shoppingCartOverviewButtonContainer .partButton 				{margin-left: 15px; margin-bottom: 15px;}
			.shoppingCartOverviewButtonContainer .partButton:first-child 	{margin-left: 0;}

		/* responsive */	
		@media screen and (max-width: 667px){
			/* coupon code */
			#shoppingCartCouponCodeContainer {padding-right: 0;}

			/* cost overview */
			#shoppingCartPriceContainer 	{align-self: auto; padding:15px; padding-top: 0;}
				#shoppingCartPriceContainer .shoppingCartPriceLine .value {width: auto;}
				#shoppingCartPriceContainer .shoppingCartPriceLine#priceInclusiveVat .value {font-size: 1.25em;}

			/* shopping cart button container */		
			.shoppingCartOverviewButtonContainer {flex-direction: column;}
			.shoppingCartOverviewButtonContainer .partButton {margin-left: 0; justify-content: center;}

			.shoppingCartOverviewButtonContainer .buttonToOrderProcess	{order:1;}
			.shoppingCartOverviewButtonContainer .buttonToShop 			{order:2;}
		}

/********************************************** 
Order custom code
**********************************************/   

#customOrder 							{}
	#customOrder .basicContainer 			{}
		#customOrderContainer 					{}
			#customOrderProcessAndCartContainer 	{display: flex; flex-wrap: wrap;}
				#customOrderProcessContainer 			{margin-right: 25px; width: calc(75% - 25px);}
				#customOrderCartContainer 				{width: 25%;}

/* responsive */
@media screen and (max-width: 1023px){
	#customOrderProcessContainer 					{order: 2; margin-right: 0; width: 100%;}
	#customOrderCartContainer 						{order: 1; width: 100%; margin-bottom: 20px;}
}

/***********************************************
Mobile menu 
***********************************************/
/* scroll to top */
#scrollToTop 			{transition: all 0.3s; background-color:var(--yellow); box-shadow: 0px 15px 40px rgb(26 30 43 / 13%); text-align: center; padding:0; border: none; cursor: pointer; width: 40px; height:40px; outline: 0; position: fixed; bottom: 15px; right: 10px; /* keep it at the top of everything else */ z-index: 100; /* hide with opacity */ opacity: 0; /* also add a translate effect */ transform: translateY(100px); /* and a transition */ transition: all .5s ease;}
#scrollToTop.visible 	{opacity: 1; transform: translateY(0) }
#scrollToTop svg 		{fill: #000; height: 16px; max-width: 16px;}

#scrollToTop:hover {background-color: var(--black);}
#scrollToTop:hover svg {fill: var(--white);}

/* mobile toggle menu */
body.mobileMenuToggleActive                              	{position: fixed; width:100%; /* prevents scrolling bug at the bottom of the screen  */ }

#mobileMenuToggle                                         	{position:relative; z-index: 3000; display:none; align-items:center;}      

#mobileMenuToggle .mobileMenuButtonLabel                         {margin-left:5px; color: #000; font-weight: 700;}
#mobileMenuToggle .mobileMenuButtonHamburger 					{width: 21px; height:21px; display:flex; flex-direction:column; justify-content:center;}
#mobileMenuToggle .mobileMenuButtonHamburger span 				{width: 21px; height: 3px; background-color: #000; margin: 2px 0px; transition: all 0.3s ease-in-out;}
#mobileMenuToggle .mobileMenuButtonHamburger span:nth-child(2) 	{width: 15px;}

#mobileMenuToggle.active .mobileMenuButtonHamburger span 				      {background-color: #000;}
#mobileMenuToggle.active .mobileMenuButtonHamburger span:nth-child(1) {transform: translateY(7px) rotate(45deg);}
#mobileMenuToggle.active .mobileMenuButtonHamburger span:nth-child(2) {opacity: 0;}
#mobileMenuToggle.active .mobileMenuButtonHamburger span:nth-child(3) {transform: translateY(-7px) rotate(-45deg);}

/* Menu overlay */
#mobileMenuToggleContainer 			{left: 0%; top: 152px; width: 100%; height: 100%; display:none; position: fixed; background-color: #fff; z-index: 1002;}
body.mobileMenuToggleActive #mobileMenuToggleContainer 	{display:block;} 

#mobileMenuToggleContainerScroll                      {overflow-y: auto; height: calc(100% - 152px);}

@media screen and (min-width: 1279px){
    body.mobileMenuToggleActive #mobileMenuToggleContainer {display: none;}
}

@media (max-width: 1279px){
  #mobileMenuToggleContainerScroll {overflow-y:scroll; -webkit-overflow-scrolling: touch;}
}

/***********************************************
Mobile fullscreen container
***********************************************/

body.mobileFullScreenContainerActive {
	position: fixed; /* prevents scrolling bug at the bottom of the screen  */
}

body.mobileFullScreenContainerActive nav {z-index: 1;}

/* Menu overlay */
.mobileFullScreenContainer {

}

.mobileFullScreenContainer.active {
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	position: fixed;
	background-color: #fff;
	z-index: 1004;
	height: calc(100% - 56px);
}

.mobileFullScreenContainer.active .mobileFullScreenContainerScroll {
	overflow-y: auto;
	padding: 25px;
	padding-bottom: 5px;
	height: 100%;
}

/* menu's */
#mobileFullScreenButtonContainer {
	padding: 0px 25px;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: #fff;
	display: none;
	align-items: center;
	z-index: 1004;
	height: 56px;
	box-shadow: 0 5px 30px 0 rgba(0,0,0,0.20);
	border-top:solid 1px #000;
}

.mobileFullScreenButtonOpen {
	background-color: transparent;
	text-decoration: none;
	cursor: pointer;
	outline: 0;
	-webkit-appearance: none;
	padding: 0px 15px;
	font-weight: 600;
	font-size: inherit;
	font-size: 16px;
	height: 36px;
	line-height: 36px;
	border:none;
	border-radius: 0;
	font-weight: 600;
	color: #000;  
	background-color: var(--yellow); 
	/*  background: #009F92 url('/images/style/icon-filter-white.svg') no-repeat left 15px center; background-size: 15px 15px;*/
	width: 100%;
}

/* close menu */
.mobileFullScreenContainer.active .mobileFullScreenContainerFooter {
display: block;
}

.mobileFullScreenContainer .mobileFullScreenContainerFooter {
	display: none;
	padding: 10px 20px;
	background-color: #fff;
	position: fixed;
	height: 56px;
	left: 0;
	bottom: 0;
	right: 0;
	box-shadow: 0 5px 30px 0 rgba(0,0,0,0.20);
	border-top: solid 1px #000;
}

.mobileFullScreenButtonClose {
	background-color: var(--yellow);
	text-decoration: none;
	cursor: pointer;
	outline: 0;
	-webkit-appearance: none;
	padding: 0px 15px 0px 15px;
	font-weight: 600;
	font-size: inherit;
	font-size: 16px;
	height: 36px;
	line-height: 36px;
	border:none;
	font-weight: 600;
	color: #000;   
	width: 100%;
	text-align: center;
}

@media (max-width: 667px) {
	.mobileFullScreenContainer.active .mobileFullScreenContainerScroll {
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
	}
}
/******************************************
Footer menu
******************************************/
footer 						{background-color: var(--yellow);}

footer .basicContainer 		{}

	footer .flexContainer 		{justify-content: space-between;}
	footer .flexContainer .flexItem 	{padding-right: 60px;}
	footer .flexContainer .flexItem:last-child {padding-right: 0px;}
	footer .flexContainer .flexItem .h3 {color: var(--black); display: block; margin-bottom: 10px;}

	#socialIcons 				{display: flex; margin-bottom: 30px;}
		#socialIcons li 			{margin-left: 15px;}
		#socialIcons li:first-child {margin-left: 0px;}
			#socialIcons li a 			{background-color: var(--white); height: 50px; width: 50px; display: flex; justify-content: center; align-items: center; transition: background-color 0.3s ease;}
			#socialIcons li a svg 		{height: 24px; max-width: 30px; fill: var(--black); transition: fill 0.3s ease;}

			#socialIcons li a:hover 	{background-color: var(--black);}
			#socialIcons li a:hover svg	{fill: var(--white);}


/******************************************
Footer with logo's
******************************************/
.logoFooter 				{background-color: #fff;}
	.logoFooter .basicContainer  {padding-top: 40px; padding-bottom: 0;}
		.logoFooter ul 				{display: flex; justify-content: center; flex-wrap: wrap; border-bottom:solid 1px rgba(0, 0, 0, 0.1); padding-bottom: 20px;}
		.logoFooter ul li 			{margin:0px 40px 20px 40px;}
		.logoFooter ul li:first-child 	{margin-left: 0;}
		.logoFooter ul li:last-child {margin-right: 0;}
		.logoFooter ul li a 		{display: block;}
		.logoFooter ul li a img 	{height: 40px; display: block; max-width: 80px;}

/******************************************
Bottom menu
******************************************/
.bottomFooter 				{font-size: 14px; background-color: #fff;}
	.bottomFooter .basicContainer {padding-top: 20px; padding-bottom: 0;}
		.bottomFooter ul 			{display: flex; justify-content: center; flex-wrap: wrap;}
		.bottomFooter ul li 		{margin: 0px 20px 20px 20px;}
		.bottomFooter ul li a 		{display: block; color: #666; text-decoration: none;}
		.bottomFooter ul li a:hover {color: #000; text-decoration: underline;}