:root {
	/* kleuren */
	--text: #000000;
	--title: #808184;
	--gray: #F4F4F4;
	--gray2: #E3E1E1;
	--orange: #fc7800;
	--red: #D73300;
	--blue: #335ba6;
	--white: #FFFFFF;
	--green: #81be61;
	--link-hover: #5C5C5C;
	--kruimelpad: #d5d5d6;
	/* afmetingen */
	--max-width: 1175px;
	
	/* fonts */
	--baloo2: "Baloo 2",sans-serif;
	--pt-sans: "PT Sans", sans-serif;
}

#basketDimPage {
	z-index: 1  !important;
}

#basket {
	z-index:9999 !important;
	margin-top: 11px;
}

.fa-shopping-basket {
	color:white !important;
}

#watermark_development {
	display:none;
}

#wizardUserFilterKeys {
	display:none;
}

.wizardBtn {
	display:none;
}

.disabled {
    display:none;
}

#wizardStep_stap1 .wizardContainer {
	display:none;
}

.wizardEntity {
	display:none;
}


#sectionToolbar {
    display: block;
}

.up {
	float:right;
	width:40px;
	height:40px;
	border:0px solid red;
	background-image:url("https://stores.utopis-platform.net/bg-hekwerk-nl/channels/wizard/images/up-logo.png");
	background-size:100%;
	margin:10px;
}

.page-title {
	display:none;
}

/*----------------------------
Small
--------------------------*/
	* {
		font-family: var(--pt-sans);
		font-weight: 300;
		font-size: 17px;
		color: var(--text);
		line-height: 25px;
	}

	body {
		padding:0;
		margin:0;
	}
	
	h1, h2, h3, h4 {
		font-family: var(--baloo2);
		color:var(--title);
		text-transform: uppercase;
		font-weight: 600;
	}
	
	h1 {	
		font-size: 2rem;
	}
	
	@media only screen and (min-width: 860px) {
		h1 {
			font-size: 2rem;
		}
	}
	
	a:hover {
		color:var(--link-hover);
	}
	
	.fa.fa-times {
		cursor:pointer;
		color: var(--red);
		font-size:22px;
		margin-left:10px;
	}
	
	#top {
		border:0px solid red;
		position:fixed;
		top:0;
		width:100%;
		height: 142px;
		background: var(--white);
		z-index:9999;
	}
	
	#top .top-line {
		border:0px solid green;
		position: relative;
		left:0;
		right:0;
		margin:auto;
		max-width: var(--max-width);
		height: 142px;
	}
	
	#top .top-line .logo img {
		margin-top:30px;  
		width:216px;		
	}
	
	
	#top .wizardBtnCustom {
		position:absolute;
		right:100px;
		top:18px;
		background: var(--orange);
		color:var(--white);
		cursor: pointer;
		width: fit-content;
		font-size:15px;
		padding: 12px 24px;
		font-weight: bold;
		
		border-style: none;
		border-width: 0;
		background-clip: border-box;
		border-radius: 5px;
		
		float:right;
	}
	
	@media only screen and (min-width: 1370px) {
		#top .wizardBtnCustom {
			position:absolute;
			right:100px;
			top:18px;
			cursor: pointer;
			width: fit-content;
			
			padding: 12px 24px;
		
			border-style: none;
			border-width: 0;
			background-clip: border-box;
	
			float:right;
		}
	}
	
	#top .wizardBtnCustom:hover {
		background: var(--red);
		color:white;
		cursor: pointer;
		width: fit-content;
		
		padding: 12px 24px;
		
	
		border-style: none;
		border-width: 0;
		background-clip: border-box;
		border-radius: 5px;
	
	}
	
	#title {
		position:relative;
		width:100%;
		top:142px;
		min-height:76px;
		background: var(--gray);
		border:0px solid green;
	}
	
	#title .content {
		position:relative;
		margin:auto;
		left:0;
		right:0;
		width: 100%;
		max-width:var(--max-width);
		padding-top: 6px;
	}
	
	#title .content h1 {
		margin-top:20px;
	}
	
	.xmlvalue_description-sys-productgroep, .xmlvalue_description-sys-hoofdgroep {
		display:none;
	}
	
	#banner {
		position:relative;
		margin-top:218px;
		width:100%;
		min-height:340px;
		border:0px solid blue;
		
		background:var(--gray);
	}
	
	@media only screen and (min-width: 860px) {
		#banner {
			position:relative;
			margin-top:218px;
			width:100%;
			min-height:340px;
			
		}
	}
	
	#banner .content {
		position:relative;
		margin:auto;
		left:0;
		right:0;
		width: 100%;
		height:311px;
		max-width:var(--max-width);
		border:0px solid red;
	}
	
	@media only screen and (min-width: 860px) {
		#banner .content {
			position:relative;
			margin:auto;
			left:0;
			right:0;
			width: 100%;
			
			max-width:var(--max-width);
		}
	}
	
	#banner .content .text {
		    font-family: "MyriadProRegular";
		position:absolute;
		top:0;
		left:0;
		float:left;
		width: 100%;
		height:calc(100%-2.5%);
		border:0px solid blue;
		margin-top: 2.5%;
		margin-right: 2.5%;
		padding-right:20px;
	}
	
	@media only screen and (min-width: 860px) {
		#banner .content .text {
			width: 50%;
		}
	}
	
	#banner .content .text h2 {
		font-family: "MyriadProRegular";
		font-size: 23px;
		color: var(--black);
		font-weight: bold;
		margin-bottom:20px;
	}
	
	#banner .content .image {
		position:absolute;
		top:0;
		right:0;
		float:left;
		width: 100%;
		height:100%;
		border:0px solid green;
	}
	
	@media only screen and (min-width: 860px) {
		#banner .content .image {
			width: 50%;
		}
	}
	
	#banner .content .image .bg-image {
		position:absolute;
		margin:auto;
		border-radius:10px;
		width:100%;
		height:80%;
		margin-top:5%;
		background-repeat:no-repeat;
		background-position: center center;
		background-size: cover;
	}
	
	#content {
		border:0px solid purple;
		position:relative;
		left:0;
		right:0;
		margin:auto;
		width:100%;
		max-width:var(--max-width);
		/*min-height:500px;*/
		
	}
	
	#wizard {
		margin:10px;
	}
	
	@media only screen and (min-width: 860px) {
		#wizard {
			margin:0px;
		}
	}
	
	#navigation {
		position:relative;
		float: left;
		width: 100%;
		border:0px solid red;
	}
	
	#navigation .content {
		position:relative;
		left:0;
		right:0;
		margin:auto;
		width:100%;
		max-width:var(--max-width);
		padding:10px;
		border: 0px solid blue;
		
	}
	
	@media only screen and (min-width: 860px) {
		#navigation .content {
			position:relative;
		
			left:0;
			right:0;
			margin:auto;
			width:100%;
			max-width:var(--max-width);
			padding:0px;

		}
	}
	
	#navigation .content .wizardBtnCustom {
		background: var(--black);
		color:white;
		width:150px;
		padding: 10px 24px;
		text-align:center;
		cursor:pointer;
		
		margin-top:20px;
		margin-bottom:20px;
		font-size: 15px;
		font-weight: bold;
	}
	
	#navigation .content .wizardBtnCustom:hover {
		background: var(--link-hover);
	}
	
	#navigation .content .wizardBtnCustom.wizardBtnPrevious {
		float:left;
		background: var(--orange);
		position: fixed;
		float: right;
		z-index: 99999;
	  
		top: 59%;
		left: 0;
		
		border-top-right-radius: 5px;
		border-bottom-right-radius: 5px;
	}
	
	#navigation .content .wizardBtnCustom.wizardBtnNext {
		float:right;
		background: var(--orange);
		position: fixed;
		float: right;
		z-index: 99999;
	  
		top: 59%;
		right: 0;
	
		border-top-left-radius: 5px;
		border-bottom-left-radius: 5px;
		
		
	}
	
	.icon-docx, .icon-osf, .icon-pdf, .icon-rsx, .icon-suf, .icon-txt {
		width:67px;
	}
	
	.wizardContent * {
		font-size:18px;
	}
	
	.wizardContent h2 {
		font-weight:700;
		margin-top:20px;
		margin-bottom:15px;
	}
	
	.wizardContent h3 {
		font-weight:700;
		margin-top:20px;
		margin-bottom:15px;
	}
	
	.filterkey-wrapper {
		border:0px solid red;
		position:relative;
		float:left;
		width:100%;
		margin:0;
		margin-bottom:25px;
	}
	
	@media only screen and (min-width: 860px) {
		.filterkey-wrapper {
			border:0px solid red;
			position:relative;
			float:left;
			width:calc(100% / 3);
			margin:0;
			margin-bottom:25px;
		}
	}
	
	.filterkey-wrapper .filterkey-name li {
		font-size: 18px;
		margin-bottom:10px;
	}
	
	.filterkey-wrapper .filterkey-name h3 {
		color: var(--black);
		font-weight: bold;
		font-size: 19px;
		margin-bottom:10px;
	}
	
	.filterkey-wrapper .filterkey-formelement select {
		position: relative;
		width: calc(100% - 40px);
		height:40px;
		padding:5px;
	}
	
	.wizardStep {
		/*min-height:524px;*/
		width: 100%;
		margin-top:32px;
	}
	
	#wizardStep_systeem2, #wizardStep_artikel {
		width: 100%;
	}
	
	
	
	.button.next, .button.previous {
		float:right;
		cursor:pointer;
		width:fit-content;
		font-size: 16px;
		padding: 12px 24px;
		color:white;
		background: var(--blue); 
		font-weight: 700;
		border: 1px solid #274f9a;
		border-style: none;
		border-width: 0;
		background-clip: border-box;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
	}
	
	.button.previous {
		float:left;
	}
	
	.button.next i, .button.previous i {
		color:white;
		margin-right:5px;
	}		
	
	
	
	
	.button.next:hover {
		background: var(--green);
	}
	
	#bottom {
		border:0px solid red;
		position:relative;
		background-color: var(--gray);
		float: left;
		width: 100%;
		min-height:369px;
	}
	
	#bottom .content {
		border:0px solid blue;
		position:relative;
		left:0;
		right:0;
		margin:auto;
		width:100%;
		max-width:var(--max-width);
		padding:10px;
		min-height: 369px;
		
	}
	
	@media only screen and (min-width: 860px) {
		#bottom .content {
			border:0px solid blue;
			position:relative;
			left:0;
			right:0;
			margin:auto;
			width:100%;
			max-width:var(--max-width);
			padding:0px;
			padding-top:30px;
		}
	}
	
	#bottom .content .image {
		float:left;
		width:117px;
	}
	
	#bottom .content .text {
		margin-left:30px;
		float:left;
	}
	
	#bottom .content .text h2 {
		font-size: 23px;
		color: var(--black);
		font-weight: bold;
		margin-bottom: 10px;
	}
	
	#bottom .content .text h3 {
		text-transform:uppercase;
		margin-top:20px;
		
		
	}
	
	#bottom .content .text .btn-contact {
		background: var(--orange);
		color:white;
		text-decoration:none;
		padding:10px;
		border-radius:4px;
	
	}
	
	#zb {
		position:absolute;
		bottom:5px;
		width:100%;
		text-align:center;
	}
	
	#zb a {
		text-decoration:none;
	}
	
	#wizardStep_bestek {
		width:100%;
	}
	
	#bottom .content .fl-heading-text {
		position:absolute;
		right:0;
		top: -31px;
		font-weight: 600;
		font-size: 22px;
		text-align: right;
		color: #335ba6;
		text-transform: none;
		font-style: normal;
	}
	
	#bottom .content .fl-button {
		position:absolute;
		left:0;
		top:-25px;
		font-weight: 700;
		font-size: 30px;
		border: 1px solid #274f9a;
		border-style: none;
		border-width: 0;
		background-clip: border-box;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
		padding-top: 4px;
		padding-right: 22px;
		padding-bottom: 4px;
		padding-left: 22px;
		color: #ffffff;
		background: #335ba6;
	    display: inline-block;
		text-decoration:none;
	}
	
	#bottom .content .fl-button .fl-button-text {
		font-weight: 700;
		font-size: 30px;
		color:white;
	}
	
	#bottom .content .block {
		position:relative;
		width:100%;
		text-align:center;
	}
	
	@media only screen and (min-width: 860px) {
		#bottom .content .block {
			position:relative;
			width:50%;
			float:left;
			text-align:left;
			margin-top:30px;
		}
	}
	
	
	
	#bottom .content .block h4 {
		color: var(--black);
		font-size: 1.125rem;
		line-height: 30px;
		margin-bottom: 20px;
		margin-top: 50px;
		font-weight: bold;
	}
	
	#bottom .content .block .title::after {
	    width: 100%;
		height: 0px;
		position: absolute;
		content: "";
		background-color: #e5e5e5;
		margin-right:5px;
		
	}
	
	@media only screen and (min-width: 860px) {
		#bottom .content .block .title::after {
			width: 100%;
			height: 2px;
			position: absolute;
			content: "";
			background-color: #e5e5e5;
			margin-right:5px;
		}
	}
	
	#bottom .content .block .text {
		padding-top:24px;
		padding-bottom:54px;
		
		
	}
	
	#bottom .content .block .text a {
		text-decoration:none;
		color: #81be61;
	}
	
	#bottom .content .block .text p {
		text-align:center;
	}
	
	@media only screen and (min-width: 860px) {
		#bottom .content .block .text p {
			text-align:right;
		}
	}
	
	 /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Wizard.Navigation
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
	#wizardNavigation {
		position:absolute;
		top:-421px;
		width: 100%;
		padding: 0px;
		margin: 0px;
		white-space: nowrap;
		overflow: hidden;
	}
	
	#wizardNavigation .txt-navigation {
		float: left;
		margin-right: 22px;
		font-family: var(--pt-sans);
		font-size: 16px;
	}

	 #wizardNavigation a
	{
		line-height: 17px;
		padding: 5px 0px 8px 0px;
		text-align: left;
		position: relative;
		cursor: pointer;
		white-space: nowrap;
		color: var(--kruimelpad);
		font-size: 16px;
		font-family: var(--pt-sans);
		padding: 0;
		margin-right:20px;
		text-decoration:none;
	
		
	}

	#wizardNavigation a:hover {
	text-decoration:underline;
	}

#wizardNavigation a.invalidStep, 
#wizardNavigation a.invalidEntityMode,
.invalidContainer
{
    display: none;
}



#wizardNavigation a.disabled
{
    color:#ccc;
    
}

#wizardNavigation a.disabled:after
{
    border-left: 20px solid #EAEAEA;
}

#wizardNavigation a:first-child,
#wizardNavigation a.firstStep
{
    margin-left:0px;
}

#wizardNavigation a:before
{
    width: 0;
    height: 0;
    border-top: 0px inset transparent;
    border-bottom: 0px inset transparent;
    border-left: 0px solid #fff;
    position: absolute;
    content: "  •  ";
    top: 0;
    left: -15px;
}

#wizardNavigation a:after
{
    width: 0;
    height: 0;
    border-top: 0px inset transparent;
    border-bottom: 0px inset transparent;
    border-left: 0px solid #EDEDED;
    position: absolute;
    content: "";
    top: 0;
    right: 0px;
    z-index: 2;
}

#wizardNavigation a:first-child:before,
#wizardNavigation a.firstStep:before,
#wizardNavigation a:last-child:after,
#wizardNavigation a.lastStep:after
{
    border: none;
}

#wizardNavigation .past
{

}

#wizardNavigation .past:after {
    border-left-color: #2B2B28;
}

#wizardNavigation .current
{

	color:var(--black);
}

#wizardNavigation .current:after {
    border-left-color: #313131;
}

.filter {
	margin-top:30px;
}

	.filter h2 {
		color:var(--black);
		font-weight:bold;
		font-size: 32px;
		line-height: 38px;
		margin-top: 24px;
		margin-bottom: 24px;
	}
	
	.prop-value {
		border:0px solid red;
		width:100%;
		max-width:150px;
		
		float:left;
		
		
		cursor:pointer;
		padding:15px;
	
	}
	
	@media only screen and (min-width: 860px) {
		.prop-value {
			width:calc(100% / 3);
			max-width:263px;
			position:relative;
			float:left;
			
			cursor:pointer;
		}
		
		#wizardContainer_systeem1 .prop-value.start {
			width:calc(100% / 2);
			max-width:363px;
			position:relative;
			float:left;
			
			cursor:pointer;
		}
		
		#wizardContainer_systeem1 .prop-value.start .filterkey-block .image {
			
			height: 230px;
		}
	}
	
	

	.filterkey-block {
		border:0px solid blue;
		position:relative;
		
	
		width:100%;
		height:100%;
		float:left;
		background: var(--gray2);
		border-radius:10px;
	}
	
	@media only screen and (min-width: 860px) {
		.filterkey-block {
		
			
		}
	}
	
	.filterkey-block:hover {
		transform: scale(1.01);
	}
	
	.filterkey-block .layer {
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		cursor:pointer;
		z-index:9999;
	}
	

	.filterkey-block .image {
		position:relative;
		width:calc(100%-15px);
		overflow: hidden;
		border:0px solid red;
		height:155px;
		text-align:center;
		padding:15px;
		border-radius: 10px;
		margin:15px;
		background-repeat: no-repeat;
		background-position:center center;
		background-size:cover;
	}
	
	.filterkey-block .checkbox {
		text-align:center;
		padding:5px;
	}
	
	.xmlvalue_img-name {
		display:none;
	}
	
	.filterkey-block .title {
		
		text-align:center;
		min-height: 42px;
	}
	
	.filterkey-block .title .text {
		font-size: 13px;
		min-height:50px;
	}
	
	.filterkey-block .title.big {
		min-height: 140px;
	}
	
	.filterkey-block .title .text h2 {
		 font-size: 20px;
		 line-height:24px;
	}
	
	.filterkey-block .title.small {
		min-height: 140px;
		padding:10px;
	}
	
	.filterkey-block .title.small .text h2{
		font-size: 15px;
		line-height:24px;
	}
	
	#basketHandle .fa-list {
    margin-top: 13px;
    color: var(--title);
    font-size: 30px;
	
}

		#basketAmountField, #basketAmountFieldDummy {
			background: var(--red);
			border:none;
			bottom: 20px;
			right: 12px;
			padding: 5px 6px;
		}
	
	.wizardBtnCustomLeft {
		display:none;
		position: relative;
		left: 1px;

		padding: 10px 30px;
		border-radius: 0px 10px 10px 0px;
		font-weight: bold;
		background-color: var(--orange);
		color: white;
		cursor: pointer;
	}
	
	.wizardBtnCustomRight {
		display:none; 
		position: relative;
		right: 1px;
		
		padding: 10px 30px;
		border-radius: 10px 0 0 10px;
		font-weight: bold;
		background-color: var(--orange);
		color: white;
		cursor: pointer;
	}
	
	.wizardBtnCustomLeft:hover, .wizardBtnCustomRight:hover {
		background:var(--red);
	}
	
	
	#navigation .wizardBtnCustomLeft, #navigation .wizardBtnCustomRight {
		display:block; 
	}
	
	/* kleuren */
	.filterkey-block-2 {
		width:calc((100% / 2) - 24px);
		position:relative;
		float:left;
		border: 0px solid #f0f0ee;
		margin-right:24px;
		margin-bottom:24px;
		cursor:pointer;
	}
	
	@media only screen and (min-width: 860px) {
		.filterkey-block-2 {
			width:calc((100% / 4) - 24px);
			position:relative;
			float:left;
			border: 0px solid #f0f0ee;
			margin-right:24px;
			margin-bottom:24px;
			cursor:pointer;
		}
	}

	.filterkey-block-2 .image {
		position:relative;
		width:100%;
		overflow: hidden;
		border:0px solid red;
		text-align:center;
	}

	.filterkey-block-2 .image img {
		width:70%;
		height:70%;
		margin-top:15%;
	}
	
	.filterkey-block-2 .title {
		padding:24px;
		border:0px solid red;
		min-height:120px;
	}
	
	.filterkey-block-2 .title .text {
		text-align:center;
	}
	
	.filterkey-block-2 .title .text h3 {
		color:var(--black);
		font-weight:bold;
		font-size:19px;
	}