@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&display=swap');

	:root {
	/* kleuren */
	--black: #000000;
	--green:#078e1d;
	--orange: #E27311;
	--white: #ffffff;
	--black: #000000;
	--darkgrey: #363839;
	--grey: #E9EAEE; 
	--lightgrey: #F1F1F1;
	--orange: #C06926;
	
	/* afmetingen */
	--max-width: 1440px;
	--max-width-content: 1128px;
	}
	
	#watermark_development {
		display:none !important;
	}
	
	#-merk {
		display:none;
	}
	
	* {
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	font-size: 16px;
	line-height: 1.5;
	color: var(--black);
	}

	
	
	#wizard {
		margin:0px;
		margin-top:0px;
	}
	
	@media only screen and (min-width: 700px) {
		#wizard {
			margin:38px;
			margin-top:10px;
		}
	}
	
	h1, h2, h3 {
		font-family: 'Roboto Slab', sans-serif !important;
	}
	
	h1 {
		font-size: 2rem;
		font-weight:700;
	}
	
	/*
	.disabled {
		display: none;
	}
	*/
	
	#wizardStep_productkeuze .disabled {
		display: none;
	}
	
	#wizardStep_productkeuze .wizardFilter {
		width:100%; 
		border:0px solid blue;
		float:left;
	}
	
	#wizardStep_productkeuze .wizardConfiguration {
		width:100%;
		border:0px solid red;
		float:left;
	}
	
	@media only screen and (min-width: 700px) {
		#wizardStep_productkeuze .wizardFilter {
			width:50%; 
			border:0px solid blue;
			float:left;
		}
	
		#wizardStep_productkeuze .wizardConfiguration {
			width:50%;
			border:0px solid red;
			float:right;
			padding-top:50px;
		}
	}
	
	
	#sectionToolbar {
    position: absolute;
    width: 100% !important;
    margin-top: 0px;
}
	
	.saveToBasket {
		float:right;
		margin-top:17px;
	}
	
	.systemCounter {
		position: absolute;
		top:0;
		right:0;
		padding:10px;
		font-weight:bold;
	}
	
	.wizardBtnNext.hidden, .wizardBtnPrevious.hidden {
		display: block; 
	}
	
	
	
	.filterkey-block {
		border: 0px solid red;
		width:100%;
		margin-right:20px;
		margin-bottom:20px;
		text-align: center;
		position:relative;
		float: left;
		min-height:100px;
		box-shadow: 0 5px 8px 0 rgba(0,0,0,0.2),0 3px 10px 0 rgba(0,0,0,0.19) !important;
		
		}
	
	@media only screen and (min-width: 700px) {
		.filterkey-block {
			
			width:210px;
			margin-right:20px;
			text-align: center;
			position:relative;
			float: left;
			min-height:150px;
			background:white;
		}
	}
	
	@media only screen and (min-width: 700px) {
		.content-block {
			display:flex;
			/*justify-content: center;*/
		}
	}
	
	
	
	.filterkey-block .image {
		
		width:100%;
		height:213px;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		background-size: contain;
		background-repeat: no-repeat;
		background-position-x: center;
		margin-top: 10px;
		
	}
	
	@media only screen and (min-width: 700px) {
		.filterkey-block .image {
			width:100%;
			height:130px;
			
			background-repeat: no-repeat;
			background-position-x: center;
	
		}
	}
	
	.filterkey-block .title {
		width:100%;
		height:62px;
		background:white;
		padding:18px;
		/*box-shadow: 0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important;*/
	}
	
	@media only screen and (min-width: 700px) {
		.filterkey-block .title {
			width:100%;
			height:62px;
			background:white;
			padding:18px;
			/*box-shadow: 0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important;*/
		}
	}
	
	.filterkey-block .title .text {
		font-weight: bold;
		color:black;
		font-size: 14px;
	}
	
	@media only screen and (min-width: 700px) {
		.filterkey-block .title .text {
			font-weight: bold;
			color:black;
			font-size: 16px;
		}
	
	}
	
	
	.filterkey-block img {
		display:block;
		width:100%;
	}
	
	.filterkey-block:hover {
		
		box-shadow: 0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important;
	}
	
	.filterkey-block:hover .text {
		color: var(--orange);
	}
	
	.filterkey-block2 {
		bordeR:0px solid red;
		position:relative;
		float: left;
		min-height: 130px;
	}
	
	
	.filterkey-block2 {
				min-height: 155px;
				width:100%;
				
	}
	
	@media only screen and (min-width: 700px) {
		.filterkey-block2 {
				min-height: 155px;
				width:180px;
				text-align:center;
				margin-right:15px;
		}
	}
	
	@media only screen and (min-width: 700px) {
		.filterkey-block2 {
			min-height: 155px;
		}
	}
	
	.filterkey-block2 .text {
		font-size: 15px;
		
	}
	
	.filterkey-block-text {
		border: 0px solid red;
		width:100%;
		text-align: center;
		margin-top: 6px;
		min-height:85px;
		
		box-shadow: 0 5px 8px 0 rgba(0,0,0,0.2),0 3px 10px 0 rgba(0,0,0,0.19) !important;
	}
	
	
	
	.filterkey-block-text:hover {
		box-shadow: 0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important;
	}
		
	

	
	@media only screen and (min-width: 700px) {
		.filterkey-block-text {
			border: 0px solid red;
			width:180px;
			margin-right:15px;
			margin-bottom:20px;
			text-align: center;
			position:releative;
			float: left;
			min-height:126px;
		}
	}
	
	.filterkey-block-text .title {
		
		width:100%;
		
		height:60px;
		background:white;
		padding:30px;
		text-align:center;
		/*box-shadow: 0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important;*/
		
	}
	
	@media only screen and (min-width: 700px) {
		.filterkey-block-text .title {
			display: table-cell; vertical-align: middle;
			width:100%;
			width:180px;
			height:125px;
			background:white;
			padding:5px;
			/*box-shadow: 0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important;*/
		}
	}
	
	.filterkey-block-text .title .text {
		font-weight: bold;
		color:black;
	}
	
	.filterkey-block-text:hover .text {
		color: var(--orange);
	}
	

	
	.filter-text {
		padding-left:0;
		margin-top:10px;
	}
	
	@media only screen and (min-width: 700px) {
		.filter-text {
			
			margin-top:50px;
		}
	}
	
	.logo img {
		
	}
	
	@media only screen and (min-width: 700px) {
		.logo img {
	
		}
	}
	
	#footer .footercontent .copyright {
		padding-left:20px;
	}
	
	#footer .footercontent .up-logo a {
		color:#BEBEBE;
		text-decoration:none;
	}
	
	.spacer {
			position:relative;
			margin:auto;
			left:0;
			right:0;
			max-width: var(--max-width); 
			height:80px;
			background:white;
	}
	
	#about {
		width:100%;
		max-width:var(--max-width); 
		position:relative;
		margin:auto;
		left:0;
		right:0;
		border:0px solid red;
		background-color: var(--white);
		
	}
	
	#about .about-content {
		background-color: var(--white);
		border:0px solid blue;
		position: absolute;
		margin: auto;
		left:0;
		right:0;
		width:100%;
		max-width: var(--max-width-content); 
	}	

	#about .about-content .left {
		background: var(--white);
		position:absolute;
		left:0;
		top:0;
		width: 30%;
		display:none;
		
	}

	#about .about-content .left img {
		float:right;
	}	
	
	#about .about-content .right {
		
		position:absolute;
		left:0%;
		top:0;
		padding:20px;
		width: 100%;
		padding-bottom:20px;
	}	
	
	@media only screen and (min-width: 700px) {
		#about .about-content .left {
			width: 30%;
			display:block;
			
		}
		
		#about .about-content .right {
			width: 100%;
			max-width:var(--max-width-content);
		
			padding:0px;
		}
	}
	
	#about .about-content .right h2 {
		margin-bottom:20px;
		font-size:30px;
	}
	
	#contact-block {
		width:100%;
		max-width:var(--max-width); 
		position:relative;
		margin:auto;
		left:0;
		right:0;
		border:0px solid red;
		background-color: var(--white);
		
		height: 369px;
	}
	
	#contact-block  .contact-content {
		background-color: var(--white);
		border:0px solid blue;
		position: absolute;
		margin: auto;
		left:0;
		right:0;
		width:100%;
		max-width: var(--max-width-content); 
		min-height:300px;
		
	}	
	
	

	#contact-block  .contact-content .left {
		background: var(--green);
		color: var(--white);
		position:absolute;
		left:0;
		top:0;
		width: 100%;
		height:100%;
		
		padding: 30px;
		padding-left:20px;
	}	
	
	#contact-block  .contact-content .left h2 {
		margin-bottom:20px;
		font-size:30px;
	}
	
	#contact-block  .contact-content .left .btn-contact {
		border:0px solid red;
		width:max-content;
		text-align:center;
		padding: 10px;
		padding-left:15px;
		padding-right:15px;
		background:white;
		margin-top:10px;
		cursor:pointer;
		
	}
	
	#contact-block  .contact-content a {
		text-decoration:underline;
		color:var(--white);
	}
	
	#contact-block  .contact-content .left .btn-contact .fa-arrow-right {
		color: var(--green);
		margin-right:5px;
		
	}

	#contact-block  .contact-content .left h2{
		color: var(--white);
	}
	
	
	
	#contact-block  .contact-content .right {
		background-image: url(https://stores.utopis-platform.net/morssinkhof-nl/channels/channel-biobound/images/about-bgphoto.jpg);
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		background-position: center center;
		position:absolute;
		top:0;
		display:none;
	}	
	
	@media only screen and (min-width:700px) {
		#contact-block  .contact-content .left {
			width: 50%;
			padding-left:80px;
		}
		
		#contact-block  .contact-content .right {
			width: 50%;
			left:50%;
			display:block;
		}
	}	

	
	
	#navbottom .navbottomcontent {
		width: 100%;
	}
	
	#top {
		position: relative;
		margin:auto;
		left:0;
		right:0;
		width:100%;
			
		z-index:1000;
	
	    height: 84px;
		box-shadow: rgba(0, 0, 0, .117647) 0 1px 3px;
	}
	
	#top .logo {
		position:relative;
		width:100%;
		max-width: var(--max-width);
		height:84px;
		margin:auto;
		left:0;
		right:0;
		border:0px solid green;
		height:100%;
	}
	
	#top .logo img { 
	margin-top:8px;
	margin-left:35px;
	}
	
	
	

	
	#top .logo .sub-nav-menu {
		border:0px solid red;
		float:right;
		height:60px;
		padding-top:30px;
		margin-right: 138px;
		display:none;
	}
	
	@media only screen and (min-width: 700px) {
		#top .logo .sub-nav-menu {
			display:block;
		}
	}
	
	.wizardBtnCustomSub {
		color:var(--white);
		background: var(--green);
		font-size:14px;
		margin:0;
		margin-right:21px;
		padding: 10px;
		padding-left:10px;
		padding-right:10px;
		text-decoration:underline;
	}
	
	.wizardBtnCustomSub:hover {
		text-decoration:none;
	}
	
	.wizardBtnCustomSub.wizardBtnReset {
		color:var(--white);
		background: var(--green);
		font-size:14px;
		margin-right:21px;
		padding: 5px;
		padding-left:10px;
		padding-right:10px;
	}
	
	.sub-nav-menu div {
		float:right;
		cursor:pointer;
	}
	
	#top .top-menu {
		width:100%;
		height:40px;
		background:#63666A;
		
	}
	
	#wizardNavigation {
			width:100%;
			max-width:var(--max-width); 
			visibility: hidden;
			padding-left:9px;
	}
	
	@media only screen and (min-width: 900px) {
		#wizardNavigation {
	
			
		}
	}
	
	#banner {
		position: absolute;
		margin:auto;
		left:0;
		right:0;
		border:0px solid pink;
		width:100%;
		height:300px;
		
		background-image: url("https://files.utopis-platform.net/morssinkhof-nl/image/?file=files/public/images/banner/biobound.jpg");
		background-position: center center;
		background-size: cover;
		background-repeat: no-repeat;
		top:85px;
		z-index:9999;
	}
	
	
	
	#banner .banner-block {
		position:relative;
		margin:auto;
		left:0;
		right:0;
		width:100%;
		max-width:var(--max-width); 
		border:0px solid red;
		height:100%;
		display:none;
	}
	
	#banner .banner-block .banner-content  {
		position:absolute;
		
		width:100%;
		border:0px solid pink;
		height: 80%;
		top:15%;
		
	}
	
	@media only screen and (min-width: 900px) {
		#banner .banner-block .banner-content  {
			width:100%;
			position:relative;
			margin:auto;
			lefT:0;
			right:0;
			max-width:var(--max-width-content);
			height: 80%;
			text-align:center;
		}
	}
	
	#banner .background {
		position:absolute;
		width:100%;
		height:100%;
		background: var(--darkgrey);
		opacity:0.7;
	}
	
	#banner .banner-block .banner-content .text {
		position:absolute;
		padding-left:0px;
		padding-right:20px;
		padding-top:10px;
		color:white;
		font-size:16px;
		line-height:18px;
	}
	
	#banner .banner-block .banner-content .text h1, #banner .banner-block .banner-content .text h3   {
			margin:0;
			color:white;
			margin-bottom:5px;
			font-size: 1.2rem;
	}
	
	@media only screen and (min-width: 700px) {
		#banner .banner-block .banner-content .text {
			position:absolute;
			padding-left:5px;
			padding-right:40px;
			padding-top:10px;
			color:white;
			font-size:18px;
			line-height:22px;
		}
		
		#banner .banner-block .banner-content .text h1, #banner .banner-block .banner-content .text h3   {
				margin:0;
				color:white;
				margin-bottom:6px;
				font-size: 30px;
		}
	}
	
	#banner .banner-block .banner-content .text a:link  {
			
			color:white;
			text-decoration:underline;
			
			
	}
	
	#banner .banner-block .banner-content .text .btn-contact {
		border:0px solid red;
		width:max-content;
		text-align:center;
		padding: 10px;
		padding-left:15px;
		padding-right:15px;
		background: var(--green);
		margin-top:10px;
		cursor:pointer;
		color: var(--white);
		    position: relative;
    left: 0;
    right: 0;
	top:20px;
    margin: auto;
	text-decoration:none !important;
	}
	
	#banner .banner-block .banner-content .text a{
		text-decoration:underline;
		font-weight:bold;
	}
	
	
	
	#banner .banner-block .banner-content .text .btn-contact .fa-arrow-right {
		color: var(--white);
		margin-right:5px;
	}
	
	#banner .banner-block .banner-content .text a:hover  {
			
			color:white;
			text-decoration:none;
			
			
	}
	
	.wizardStep {
		/*margin-top: 333px;*/
	}
	
	@media only screen and (min-width: 700px) {
		.wizardStep {
		/*margin-top: 289px*/
		}
	}
	
	#content .sub-menu {
		width:100%;
		max-width:var(--max-width); 
		height:62px;
		background:#FFF;
		border-top:0px solid #DDDDDD;
		position:absolute;
		margin:auto;
		left:0;
		right:0;
	}

	#top .top-line {
	position:relative;
	width:100%;
	 
	}
	
	#top .top-line .banner {
		width:100%;
		height:210px;
		
	}


	#content {
	width:100%;
	max-width: var(--max-width);
	background-color: var(--white);
	border: 1px solid white;
	}
	
	
	
	.wizardFilter select
	{
	width:250px;
	height:40px;
	padding-left:10px;
	margin:0;
	margin-top:3px;
	}
	
	@media only screen and (min-width: 700px) {
			.wizardFilter select
	{
	width:300px;
	height:40px;
	padding-left:10px;
	margin:0;
	margin-top:3px;
	}
	}
	
	

	.saveContainer {
	width:100%;
	margin-top: 50px;
	border:none;
	}
	
	#html {
	padding:5px;
	width:98%;
	}

	.sectionContentView {
	padding-top:60px;
	}
	
	#navbottom {
		margin-bottom:60px;
	}
	
	.wizardEntity {
		display: block;
	}
	
	
	
	.wizardConfiguration .article-block {
		float:left;
		background:#003955; 
		padding:10px;
		
		line-height: 30px;
		
		width: 100%;
		display:none;
	}
	
	.product-block {
		float:left;
		position: relative;
	}
	
	.product-block .image {
		width:20%;
		float:left;
		border:0px solid green;
	}
	
	.product-block .text {
		width:80%;
		float:left;
		border:0px solid red;
	}
	
	.selectedSystem {
		float: right;
		width: 50%;
		border-bottom: 2px solid #009BC2;
		padding-bottom:20px;
	}
	
	
	.wizardEntity {
		width: 100%;
		float: left;
	}
	
	.wizardEntity div {
		
	}
	
	
	
	.wizardContainer .wizardContent {
		border:0px solid red;
		text-align:center;
	}
	
	#wizardStep_bestek .wizardContent {
		text-align:left;
	}
	
	.wizardContainer .wizardContent h2 {
		margin-top:45px;
		margin-bottom:30px;
		font-size:30px;
	}
	
	.wizardContainer .wizardContent banner {
		border:0px solid red;
		display:none;
		
	}
	
	.wizardContainer .wizardContent h3 {
		color:#000;
		font-weight:900;
		padding-left:10px;
	}
	
	
	
	.filterkey-item {
		border:0px solid red;
		width:100%;
	}
	
	.filterkey-item {
		
		width:100%%;
		float:left;
		text-align:center;
		
	}
	
	.filterkey-item h2 {
		margin:0;
		font-size:14px;
		font-family: 'Jura', sans-serif;
		text-transform: uppercase;
		font-weight:bold;
		color:black;
		margin-bottom:10px;
		
	}
	
	.filterkey-item h2:hover {
		color:#90D613;
	}
	
	#wizardStep_bestektekst .wizardContent {
		background:white;
	}
	
	#wizardStep_bestektekst .wizardContent h2 {
		color:black;
		font-size:17px;
		text-transform:uppercase;
		margin-bottom:15px;
	}
	
	.wizardContainer
	{
    
	position: relative;
	width:100%;
   
    margin: auto;
	padding-bottom:100px;
	}
	
	
	
	#wizardContainer_container-0 {
		 padding:0px;
  
		position: relative;
    width: 100%;
	 max-width: 100%;
    margin: auto;
	background:white;
	}
	
	#wizardContainer_container-0 .wizardContent {
			background:white;
	}
	
	#wizardContainer_container-0 .wizardContent .content {
		border:0px solid blue;
		width:100%;
		max-width:1440px;
		position:relative;
		margin:auto;
		padding-bottom:15px;
		
	}
	
	#wizardContainer_container-0 .wizardContent .content h1 {
		font-size: 1.25rem;
		font-weight: bold;
		margin-top: 1.5rem;
		margin-bottom: 0.75rem;
		position: relative;
		padding-bottom: .5rem;
		margin-bottom: 1.5rem;
	}
	
	
	#wizardContainer_container-0 .wizardContent .content h1::after {
		position: absolute;
		content: '';
		display: block;
		width: 1.25rem;
		height: 2px;
		left: 0;
		bottom: 0;
		background-color: #63666a;
	}
	
	#footer {
		width:100%;
		position:relative;
		margin:auto;
		left:0;
		right:0;
		background: var(--darkgrey);
		border-top:10px solid var(--grey);
	}
	
	.wizardStep {
		position: relative;
		
	}
	
	.wizardStep .stepBackground {
		border:0px solid red;
		position: absolute;
		top:0;
		width: var(--max-width);
		max-width:var(--max-width); 
		height:100%;
		margin:auto;
		left: -38px;
		right:0;
		z-index:-1;
		display:none;
		
	}
	
	@media only screen and (min-width: 900px) {
		.wizardStep .stepBackground {
			width: var(--max-width-content);
			left:0px;
			display:block;
		}
	}
	
	.wizardEntity {
		display:none;
	}
	
	
	
	
	.article-block div {
	float: left;
    padding-left: 10px;
	
	border-radius:3px;
	color:white;
	}
	
	.article-block div:first-child {
    width: 6%;
	}

	.article-block div:last-child {
		width: 90%;
	}

	.filterkey-wrapper {
	border:0px solid red;
	width:100%;
	float:left;
	}


	
	
	

	div[class^="slider"] {
		
		width:100% !important;
		height:100% !important;
	}

	

	#wizardStep_configuratie .wizardContainer .wizardContent {
		background:white;
	}
	
	.wizardContent h3 {
		font-size: 1.25rem;
		font-weight: bold;
		padding-bottom: .5rem;
	}

	.filterkey-name h2 {
		float: left;
	}
	
	.filterkey-name xmlvalue {
		display:none;
	}

	.info {
		border:0px solid blue;
		width:20px;
		float: left;
		margin-top: 35px;
		margin-left:20px;
		
	}

	.info .fa-info-circle {
		font-size:23px;
		cursor:pointer;
	}

	#wizardContainer_container-3 .info {
		display:none;
	}
	
	.bg-infoblock {
		position: fixed;
		left:0;
		top:0;
		width: 100%;
		height:100%;
		background:black;
		z-index:9998;
		opacity:0.6;
		display:none;
	}
	
	.infoblock {
		position:fixed;
		margin:auto;
		left:0;
		right:0;
		top:30%;
		height:50%;
		width:70%;
		background:white;
		z-index:9999;
		padding:30px;
		border:1px solid gray;
		display:none;
		box-shadow:
		  0 2.8px 2.2px rgba(0, 0, 0, 0.034),
		  0 6.7px 5.3px rgba(0, 0, 0, 0.048),
		  0 12.5px 10px rgba(0, 0, 0, 0.06),
		  0 22.3px 17.9px rgba(0, 0, 0, 0.072),
		  0 41.8px 33.4px rgba(0, 0, 0, 0.086),
		  0 100px 80px rgba(0, 0, 0, 0.12)
		
	}
	
	.closeInfo {
		position: absolute;
		right:20px;
		top:20px;
	}
	
	.closeInfo .fa-window-close {
		font-size:25px;
		cursor: pointer;
	}
	
	
	
	#wizardContainer_selectie .wizardContent, #wizardContainer_basissysteem-paneel  .wizardContent, #wizardContainer_verlichtingspaneel  .wizardContent {
	
	background-image: url(https://stores.utopis-platform.net/ecophon-nl/channels/wizard/images/container-header-bg.png);
	background-repeat: no-repeat;
	height:39px;
	}
	
	
	.text-block {
		border: 0px solid red;
    position: absolute;
    bottom: 37px;
    width: 100%;
    padding: 31px;
    text-align: left;
    font-size: 1.25rem;
    line-height: 1.5em;
    font-weight: 600;
    color: #fff;
    z-index: 99999;
  
	}
	
	
	.wizardContainer .filterkey-wrapper {
		width:100%;
		border:0px solid red;
		position: relative;
		
	}
	
	@media only screen and (min-width: 700px) {
		.wizardContainer .filterkey-wrapper {
		
		}
	}

	#wizardContainer_product h3, #wizardContainer_paneelkleur h3{
		margin-top:20px;
	}

	.SelectboxEmpty {
		
		/*
		border-bottom:2px solid red !important;
		background:#FFC9C9;
		*/
	}

	.logo a img {
		
	}
	
	.wizardBtn {
		display:none !important;
	}

	.menu .info-text {
		border: 0px solid red;
		width:250px;
		float:left;
		position:absolute;
		right:0;
		top:40px;
		color:red;
		padding:3px;
		text-align:center;
		display:none;
	}
	

	 
	  .reset-hoofdgroep {
		
		float:left;
		 text-align:left;
		 padding-left:20px;
		color:red;
		cursor:pointer;
		display:none;
	 }
	 
	 .reset-system {
		position:absolute;
		bottom:-16px;
		width:100%;
		text-align:center;
		color:red;
		display:none;
		cursor:pointer;
	 }
	 
	 .banner .reset-system  {
		 
		 display:none !important;
	 }
	 
	 
	
	 
		
	 
	 
	 	 #bottom .wizardBtnPrevious {
		position:fixed;
		left:0;
		bottom:40px;
		margin:0;
		border:0px solid red;
		float:left;
		width:100px;
		background-color: var(--black);
		color: var(--white);
		text-align: center;
		padding: 12px 0px 12px 0px;
		font-weight: 500;
		margin:25px;
		z-index: 999;
		
		
	}
	

	#bottom .wizardBtnNext {
		position:fixed;
		right:0;
		bottom:40px;
		margin:0;
		border:0px solid red;
		float:right;
		margin:25px;
		width:100px;
		background-color: var(--black);
		color: var(--white);
		text-align: center;
		padding: 12px 0px 12px 0px;
		font-weight: 500;
		z-index: 999;
	}
	
	#bottom .wizardBtnReset {
		position:fixed;
		right:0;
		left:0;
		bottom:65PX;
		margin:auto !IMPORTANT;
		border:0px solid red;
		
		margin:25px;
		width:100px;
		background-color: var(--green);
		color: var(--white);
		text-align: center;
		padding: 12px 0px 12px 0px;
		font-weight: 500;
		z-index: 999;
		cursor:pointer;
	}
	 
	 @media only screen and (min-width: 700px) {
	 #bottom .wizardBtnPrevious {
		position:fixed;
		left:0;
		bottom:55px;
		margin:0;
		border:0px solid red;
		float:left;
		width:90px;
		background-color: var(--black);
		color: var(--white);
		border-radius:0;
		text-align: center;
		padding: 12px 0px 12px 0px;
		font-weight: 500;
		margin:14px;
		z-index: 999;
		cursor:pointer;
		display:none !important;
	}
	

	#bottom .wizardBtnNext {
		position:fixed;
		right:0;
		bottom:55px;
		margin:0;
		border:0px solid red;
		float:right;
		margin:14px;
		width:90px;
		background-color: #000;
		color: #fff;
		border-radius:0;
		text-align: center;
		padding: 12px 0px 12px 0px;
		font-weight: 500;
		z-index: 999;
		cursor:pointer;
		
		display:none !important;
	}
	
	#bottom .wizardBtnReset {
		display:none;
		position:fixed;
		right:0;
		left:0;
		bottom:25PX;
		margin:auto !IMPORTANT;
		border:0px solid red;
		
		margin:25px;
		width:150px;
		background-color: #58b884;
		color: #fff;
		
		text-align: center;
		padding: 12px 0px 12px 0px;
		font-weight: 500;
		z-index: 999;
		cursor:pointer;
		
		display:none !important;
	}
	
	}
	
	
	div[class^="slider"] ul li {
	  position: relative;
	  display: block;
	  float: left;
	  margin: 0;
	  padding: 0;
	width: 350px;
	  height: 252px;
	  background: #ccc;
	  text-align: center;
	  line-height: 300px;

	  background-position:center;
	}
	
	.layer {
    content: '';
    position: absolute;
    width: 100%;
    height: 80%;
    left: 0;
    bottom: 0;
    background: linear-gradient(0deg,rgba(0,0,0,.8),rgba(0,0,0,0));
	border-radius: 5px;
	
	}
	
	.control_next0, .control_prev0 {
		display:none !important;
	}
	
	#top .top-line .gray-line {
		position:absolute;
		right:0;
		width: 50%;
		height:39px;
		
	}
	
	#top .top-line .gray-line .phone-block, #top .top-line .gray-line .email-block, #top .top-line .gray-line .website-block {
		float: right;
		margin-right:20px;
		font-weight:bold;
		
		font-size:14px;
		margin-top:8px;
	}
	
	
	
	#top .top-line .gray-line .phone-block a:link, #top .top-line .gray-line .email-block a:link, #top .top-line .gray-line .website-block a:link {
		color:black;
		font-size:12px;
		text-decoration: none;
		font-weight:bold;
	}
	
	#top .top-line .gray-line .phone-block a:link {
		font-size:16px;
	}
	
	#top .top-line .gray-line .email-block, #top .top-line .gray-line .website-block  {
		display:none;
	}
	
	@media only screen and (min-width: 700px) {
		#top .top-line .gray-line .phone-block a:link, #top .top-line .gray-line .email-block a:link, #top .top-line .gray-line .website-block a:link {
		color:black;
		font-size:14px;
		text-decoration: none;
		font-weight:bold;
		}
		
			
		#top .top-line .gray-line .email-block, #top .top-line .gray-line .website-block  {
			display:block;
		}
		
		
		
	}
	
	
	#top .top-line .gray-line .phone-block .fas {
	-moz-transform: scale(-1, 1);
	-webkit-transform: scale(-1, 1);
	-o-transform: scale(-1, 1);
	-ms-transform: scale(-1, 1);
	transform: scale(-1, 1);
	}
		
	#top .top-line .gray-line .phone-block .fas, #top .top-line .gray-line .email-block .fas, #top .top-line .gray-line .website-block .fas {
		color:#00699A;
		margin-right:5px;
		font-size:20px;
	
	}
	
	.filter-wrapper {
		padding:10px;
	}
		
	@media only screen and (min-width: 700px) {
		.filter-wrapper {
			padding:0;
		}
	}
	
	.filter-wrapper h2 { 
	margin-top:15px;
	margin-bottom:15px;
	text-align:left;
	color:var(--green);
	font-weight: normal;

	}
	
	.filterkey-name h2 {
			margin:0;
			margin-top:10px;
			margin-bottom:5px;
			color:var(--green);
			font-weight:normal;
			font-size:24px;
	}
	
	.menu .wizardBtnCustom {
		margin-top: 5px; 
	}
	
	
		#wizardStep_opties .wizardConfiguration {
		    margin-right: 20px;
		background: white;
		border-radius: 5px;
		text-align: center;
		padding:10px;
		margin-bottom:10px;
		margin-top:10px;
		float:left;
		width:100%;
		text-align:left;
	}
	
	#wizardStep_opties .wizardConfiguration h3 {
		font-weight: bold;
	
	}
	
	#sectionToolbar ul li a {

		padding:10px;
		margin-right:3px;
	}
	
	.config-block {
		margin-top: 10px;
		margin-bottom: 10px;
	}
	
	.article, .article-header {
		border: 0px solid red;
		height: 80px;
	}
	
	.article-header {
		display:none;
	}

	@media only screen and (min-width: 700px) {
		.article, .article-header {
			border: 0px solid red;
			height: 42px;
		}
		
		
	}

	.config-formelement {
			float: left;
			margin-right:15px;
	}
	
	.article {
		cursor: default;
		padding: 10px;
	}
	
	@media only screen and (min-width: 700px) {
		.article {
			padding: 0px;
		}
	}
	
	.config-formelement img {
		cursor:pointer;
	}
	
	div.viewContent td {
		vertical-align: top;
		font-size: 13px;
	}
	
	.save-btn {
		border: 0px solid red;
		width: 180px;
		margin-right: 15px;
		margin-bottom: 20px;
		text-align: center;
		position: releative;
		float: left;
		min-height: 126px;
	}
	
	.save-btn:hover {
		margin-top:-6px;
		border-bottom:6px solid #006999;
	}
	
	.save-btn .title {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    width: 180px;
    height: 125px;
    background: white;
    padding: 5px;
    box-shadow: 0 10px 16px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%) !important; 
}

.save-btn .title .text {
    font-weight: bold;
    color: black;
}

#wizardStep_productkeuze .wizardContent {
	
	text-align:left;
}

@media only screen and (min-width: 700px) {
	#wizardStep_productkeuze .wizardContent {
		padding-left:50%;
		text-align:left;
	}
}

#wizardStep_productkeuze .wizardContainer .wizardContent h3 {
	padding-left:0;
	font-weight:normal;
	font-size:24px;
}

#wizardStep_productkeuze .wizardContainer {
	padding-bottom: 0;
}

#wizardContainer_hulpstukken .wizardConfiguration {
	padding-top:25px;
}

.checkElement {
	display:none;
}

#wizardContainer_laag1-hoofdproduct .wizardContent:first-of-type {
	border:0px solid red;
	margin-left:0;
	padding-left:0px;
	margin-bottom:20px;
}

@media only screen and (min-width: 700px) {
	#wizardContainer_laag1-hoofdproduct .wizardContent:first-of-type {
	border:0px solid red;
	margin-left:0;
	
	margin-bottom:30px;
	}

}


#wizardNavigation a {
	width: inherit;
	text-align: left;
	border:0px solid red;
	position: relative;

	cursor: pointer;

	transition: background-color .5s;
	margin-right:3px;
	
	 font-size: 18px;
	 padding-right:23px;
	background-image: url("https://stores.utopis-platform.net/morssinkhof-nl/channels/wizard/images/tab-nav.png");
	background-repeat: no-repeat;
	background-position: right center;
}

@media only screen and (min-width: 700px) {
	#wizardNavigation a {
	width: inherit;
	text-align: left;
	border:0px solid red;
	position: relative;

	cursor: pointer;

	transition: background-color .5s;
	margin-right:41px;
	
	 font-size: 18px;
	 padding-right:23px;
	background-image: url("https://stores.utopis-platform.net/morssinkhof-nl/channels/wizard/images/tab-nav.png");
	background-repeat: no-repeat;
	background-position: right center;
}
}

#wizardContainer_bestek .wizardContent h3 {
padding-left:0;	
}

#sectionToolbar {
	margin-bottom:20px;
}

#sectionToolbar ul {
    width: 100%;
    list-style: none outside none;
    float: left;
}

.wizardContainer .disabled {
	display:none;
}

.up-logo {
	position: absolute;
	right:20px;
	bottom:25px;
	float:right;
}

.up-logo img {
	width:30px;
}



#sectionToolbar ul li a.selected {
	background: var(--green) ;
}

#sectionToolbar ul li a.raw.selected {
	background: var(--green) ;
}

#sectionToolbar ul li a:hover {
	background: var(--black);
}

#sectionToolbar ul li a.raw:hover {
	background: var(--black);
}

.saveContainer table table {
	border: 0px solid red;
	position:relative;
    float: left;
    height: 126px;
	width:180px;
	margin-right:15px;
	background:white;
	text-align: center;
	box-shadow: 0 5px 8px 0 rgb(0 0 0 / 20%), 0 3px 10px 0 rgb(0 0 0 / 19%) !important;
	display: table-cell;
    vertical-align: middle;
}

.saveContainer table table:hover {
		box-shadow: 0 10px 16px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%) !important;
	}
	
	.saveContainer table table:hover .downloadLabel  {
		color: var(--green);
	}

.downloadLabel {
	display:none !important;
}

.icon-suf, .icon-osf, .icon-txt, .icon-pdf, .icon-rsx {
	position:absolute;
	margin:auto;
	left:0;
	right:0;
	    top: 38%;
	background:white;
	    font-weight: bold;
		color: black;
		font-size: 16px;
		line-height: 1.5;
}

.bestekbutton {
	
	
	float:right;
	margin-bottom: 17px;
	right:0;
	z-index: 9999;
	border:0px solid red;
	background: var(--green);
	padding: 10px;
	text-align: center;
	cursor: pointer;
	width: max-content;
	color:white;
	box-shadow: 0 10px 16px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%) !important;
	
}

.bestekbutton .fas {
	color:white;
	margin-right: 5px;
}

#wizardContainer_bestekbutton1 .wizardContent {
	background: #F2F2F2;
	padding-left:0;
}