.enclose {
	position:fixed;
	bottom:0px!important;
	width:100%;
	height:128px;
	background-color:#151B27;
	color:#FFF;
	text-align:center;
}
.enclosecell{
	float:left;
	border-right: 1px solid #535965;
	padding: 36px;
	padding-top: 50px;
    width: 50px;
    height: 50px;
}
.enclosecell img{
	width: 100%;
    height: auto;
}
.enclosecellspace{
	float:left;
	padding: 30px;
	padding-top: 35px;
    width: 80px;
    height: 63px;
}
.enclosecellspacehar{
	float:left;
	padding: 15px;
	padding-top: 48px;
    width: 200px;
}
.enclosecellspace img{
	width: 100%;
    height: auto;
}
.enclosecellspacehar img{
	width: 100%;
    height: auto;
}



.section {
  position: absolute;
  z-index: 0;
  width: 50%;
  height: 50%;


  -webkit-transform: scale(1);
          transform: scale(1);
  will-change: transform;
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 300ms;
          transition-duration: 300ms;
  -webkit-transition-timing-function: ease-in-out;
          transition-timing-function: ease-in-out;
}
.section:first-child {
  top: 0;
  left: 0;
  display: block!important;
  width: 100%!important;
}
.section:nth-child(3) {
  top: 50%;
  left: 0;
}
.section:nth-child(4) {
  top: 50%;
  left: 50%;
  background-position: center; 
  background-repeat: no-repeat; 
  background-size: cover;	

}
.section:nth-child(5) {

  width: 100%!important;
}
body > main > section.section.is-expanded > div.demo-box > div.titlename{
	display:none;
}

.section.is-expanded:first-child  {	
  background-image: url('../img/t.jpg');	
  background-position: center; 
  background-repeat: no-repeat; 
  background-size: cover;		
}.section:first-child  {	
  background-image: url('../img/tbutnl.jpg');
  background-position: center; 
  background-repeat: no-repeat; 
  background-size: cover;		
}.section:nth-child(3)  {	
  background-image: url('../img/lbbutnl.jpg');	
  background-position: center; 
  background-repeat: no-repeat; 
  background-size: cover;		
}
.section.is-expanded:nth-child(3)  {	
  background-image: url('../img/lb.jpg');	
  background-position: center; 
  background-repeat: no-repeat; 
  background-size: cover;		
}
.section:nth-child(4)  {	
background-image: url('../img/inspi/6.jpg');	
  background-position: center; 
  background-repeat: no-repeat; 
  background-size: cover;
}
.section.is-expanded:nth-child(4)  {	
	background-color: black;	
}
/*NO*/
.section:nth-child(2) {
  top: 0;
  left: 0;
  display:none;
}
/*NO*/



.section.is-expanded {
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 100%;
  
}
body > main > section.section.is-expanded > div.demo-box  > div.demo-content{
	display:block!important;
}
.has-expanded-item .section:not(.is-expanded) {
  -webkit-transform: scale(0);
          transform: scale(0);
  opacity: 0;
}
body > main > section.section.is-expanded > div.demo-box > span{
	display:none!important;
}
.close-section {
  position: absolute;
  top: 0;
  right: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  visibility: hidden;
  width: 6rem;
  height: 6rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  line-height: 1;
  font-size: 4rem;
  text-align: center;
  color: #43414C;
  opacity: 0;
  cursor: pointer;
  -webkit-transition: opacity 200ms linear;
  transition: opacity 200ms linear;
}
.section.is-expanded .close-section {
  visibility: visible;
  opacity: 1;
  -webkit-transition: opacity 200ms linear 300ms;
  transition: opacity 200ms linear 300ms;
}

body {
  margin: 0;
  font: 16px/1.5 'Roboto Slab', sans-serif;
  background: black;
}

.demo-box {

  color: #fff;
  font-size: 2rem;
  font-weight: 300;
}

body {

  font-family: "fira-sans",sans-serif;
  -webkit-font-smoothing: antialiased;
}
.controlpannel{
	margin-top:20%;
}
.start_
{
	width: 80%;
    margin: 0 auto;
    padding: 20px;
	text-align:center;
}
.paddingcenter{
	width: 80%;
    height: 35%;
}
.start_onder{
	width: 80%;
    margin: 0 auto;
    padding: 20px;
    background: #f0e68c;
    overflow: hidden;
}
.start_onder_links{
    width: 50%;
    float:left; 
	text-align:center;
}
.start_onder_rechts{
    overflow: hidden;
	text-align:center;
}
a.link-knop {

    box-sizing: border-box;
    display: inline-block;
    border-radius: 30px;
    text-decoration: none;
    padding: 0 20px;
	color:rgb(255, 255, 255);
	cursor:pointer;
	font-family:fira-sans, sans-serif;
	font-size:13.5px;
	font-weight:700;
	height:44px;
	letter-spacing:1px;
	line-height:44px;
	margin-bottom:0px;
	margin-left:0px;
	margin-right:20px;
	margin-top:10px;
	padding-bottom:0px;
	padding-left:20px;
	padding-right:20px;
	padding-top:0px;
	text-transform:uppercase;
	transition-duration:0.15s;	
}
.hoofd-titel a.link-knop {
    color: #fff;
    border: 2px solid #71be44;
    background-color: #71be44;
    text-decoration: none;
    transition-duration: 150ms;
}
img{
	margin-top:-3px!important;
}
#pagina-kader .harol-form .js-form-type-checkbox input[type=checkbox] + label {
    background: #f7f7f7 url(/themes/harol/images/forms/checkbox.png) no-repeat right 18px center;
    background-size: 19px 19px;
    display: block;
    padding: 18px 30px;
    color: #7a7a7a;
    font-size: 1.33rem;
    margin-bottom: 10px;
}
fieldset {

}
#pagina-kader .harol-form fieldset {
    border: none;
    margin: 0px;
    padding: 0px;
}
#pagina-kader .harol-form section#forms-step-1 fieldset .form-item, #pagina-kader .harol-form section#forms-step-4 .form-item {
    float: left;
    width: 100%;
    margin-right: 0px;
}
#pagina-kader .harol-form .js-form-type-checkbox input[type=checkbox], #pagina-kader .harol-form .js-form-type-radio input[type=radio] {
    display: none;
}
input {
    -webkit-text-size-adjust: 100%;
    -webkit-appearance: none;
}

input {
	    -webkit-text-size-adjust: 100%;
    -webkit-appearance: none;
    -webkit-writing-mode: horizontal-tb !important;
    text-rendering: auto;
    color: -internal-light-dark-color(black, white);
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    -webkit-appearance: textfield;
    background-color: -internal-light-dark-color(white, black);
    -webkit-rtl-ordering: logical;
    cursor: text;
    margin: 0em;
    font: 400 13.3333px Arial;
    padding: 1px 0px;
    border-width: 2px;
    border-style: inset;
    border-color: initial;
    border-image: initial;
}
.js-form-type-radio input[type=radio] {
    display: none;
}
.js-form-type-checkbox input[type=checkbox] + label {
    background: #f7f7f7 url(/themes/harol/images/forms/checkbox.png) no-repeat right 18px center;
    background-size: 19px 19px;
    display: block;
    padding: 18px 30px;
    color: #7a7a7a;
    font-size: 1.33rem;
    margin-bottom: 10px;
}

.js-form-type-textfield{
	color:rgb(63, 63, 64);
display:block;
float:left;
font-family:fira-sans, sans-serif;
font-size:12px;
height:88px;
margin-right:10px;
width:400px;
-webkit-font-smoothing:antialiased;
	
}
label{
	color:rgb(122, 122, 122);
cursor:default;
display:none!!important;
font-family:fira-sans, sans-serif;
font-size:12px;
height:auto;
margin-left:15px;
visibility:hidden;
width:auto;
-webkit-font-smoothing:antialiased;
}
input{
	background-color:rgb(243, 241, 239);
border-bottom-color:rgb(0, 0, 0);
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
border-bottom-style:none;
border-bottom-width:0px;
border-image-outset:0px;
border-image-repeat:stretch;
border-image-slice:100%;
border-image-source:none;
border-image-width:1;
border-left-color:rgb(0, 0, 0);
border-left-style:none;
border-left-width:0px;
border-right-color:rgb(0, 0, 0);
border-right-style:none;
border-right-width:0px;
border-top-color:rgb(0, 0, 0);
border-top-left-radius:5px;
border-top-right-radius:5px;
border-top-style:none;
border-top-width:0px;
box-shadow:rgb(243, 241, 239) 0px 0px 0px 1000px inset;
box-sizing:border-box;
color:rgb(0, 0, 0);
cursor:text;
display:inline-block;
font-family:fira-sans, sans-serif;
font-size:14.04px;
font-stretch:100%;
font-style:normal;
font-variant-caps:normal;
font-variant-east-asian:normal;
font-variant-ligatures:normal;
font-variant-numeric:normal;
font-weight:400;
height:46px;
letter-spacing:normal;
line-height:normal;
margin-bottom:15px;
margin-left:0px;
margin-right:0px;
margin-top:10px;
padding-bottom:13px;
padding-left:17px;
padding-right:17px;
padding-top:13px;
text-align:start;
text-indent:0px;
text-rendering:auto;
text-shadow:none;
text-size-adjust:100%;
text-transform:none;
width:400px;
word-spacing:0px;
writing-mode:horizontal-tb;
-webkit-appearance:none;
-webkit-font-smoothing:antialiased;
-webkit-rtl-ordering:logical;
-webkit-text-fill-color:rgb(61, 61, 61);
-webkit-border-image:none;
-webkit-border-image:none;
}

html {
  scroll-behavior: smooth;
}
		input{
			height: 70px;	
			width: 100%;	
			border: 1px solid #CFCFCF;	
			border-radius: 6px;	
			background-color: #FFFFFF;
			padding-left:10px;
			font-size:16px;
			font-family: "fira-sans",sans-serif;
		}
		.but_active{
			background: #E8FEDB;
			border: 2px solid #71BE44;
			border-radius: 6px;
		}

		.pannel{
						font-family: 'Bree',sans-serif;
			border-radius: 0px;	
			background-color: rgba(255,255,255,0.9	);
			margin:auto;
			padding:28px;
			color:#43414C!important;
			font-size: 18px;	
			font-weight: 700;	
			line-height: 27px;	
			padding-top:60px;
			padding-bottom:20px;
		}
		.title{
			height: 48px;		

			font-size: 36px;	
			font-weight: bold;	
			line-height: 48px;	
			text-align: center;
		}
		.text{
			padding-top:40px;
			height: 54px;	
			color: #3D3D3D;	
			font-family: "fira-sans",sans-serif;
			font-size: 18px;	
			line-height: 27px;
		}
		.label{

		}
		.categorie{
			padding-bottom:20px;
		}
		.button{
			cursor:pointer;
			height: 70px;	
			width: 97%;	
			background: #FFFFFF;
			border: 2px solid #CFCFCF;
			border-radius: 6px;
			font-weight:400;
			color: #CFCFCF;
			 background-position: 20px 15px ;
			 background-repeat: no-repeat; 
			 background-size: 60px;
		}
		@media only screen and (min-width: 900px)   {


		
		.catbuitenleven,.catbuitenlevenaanvraag{
			 background-image: url("https://www.harol.be/salesbooster/locator/img/icons/ic_product_buitenleven_disabled.png");
		}

		.catbuitenlevenactive{
			 background-image: url("https://www.harol.be/salesbooster/locator/img/icons/ic_product_buitenleven_active.png");
		}
		.catrolluiken,.catrolluikenaanvraag{
			 background-image: url("https://www.harol.be/salesbooster/locator/img/icons/ic_product_rolluiken_disabled.png");
		}

		.catrolluikenactive{
			 background-image: url("https://www.harol.be/salesbooster/locator/img/icons/ic_product_rolluiken_active.png");
		}
		.catgaragepoorten,.catgaragepoortenaanvraag{
			 background-image: url("https://www.harol.be/salesbooster/locator/img/icons/ic_product_garagepoorten_disabled.png");
		}

		.catgaragepoortenactive{
			 background-image: url("https://www.harol.be/salesbooster/locator/img/icons/ic_product_garagepoorten_active.png");
		}
		.catzonwering,.catzonweringaanvraag{
			 background-image: url("https://www.harol.be/salesbooster/locator/img/icons/ic_product_zonwering_disabled.png");
		}

		.catzonweringactive{
			 background-image: url("https://www.harol.be/salesbooster/locator/img/icons/ic_product_zonwering_active.png");
		}		

		.akkoordactive{
			
		}		


		
		
		
		.cat{
			overflow:hidden;
			padding:21px 100px;
			height: 27px;	
			font-family: "fira-sans",sans-serif;
			font-size: 18px;	
			line-height: 27px;
		}
		.toggleaanselect{

			font-weight:500;
		}
		.toggleaan{
			background-color: #E8FEDB;
			font-weight:500;
			color: #71BE44;
			border: 2px solid #71BE44;
		}
		.left{
			width:50%;
			float:left;
		}
		.right{
			width:50%;
			overflow:hidden;
			
		}
		.caticon{
			width:25%;
			float:left;
			
		}
		.icon{
			padding-top:10px;
			padding-left:24px;
			height:48px;
		}

		.but_toon{
			height: 45px;	
			width:40%;	
			border-radius: 6px;	
			background-color: #71BE44;
			margin:auto;
			margin-top:40px;
			margin-bottom:80px;
			text-align:center;
			
		}

		.but_toon_inner{
			cursor:pointer;
			height: 27px;	
			
			color: #FFFFFF;	
			font-family: "fira-sans",sans-serif;	
			font-size: 18px;	
			line-height: 27px;	
			margin:auto;
			padding-top:9px;
			}
			
		.dealers{
			font-family: "fira-sans",sans-serif;	
			margin-top:30px;
		}
			
		.dealer{
			height: 180px;	
			border-radius: 6px;	
			background-color: #FFFFFF;	
			box-shadow: 0 0 20px 0 rgba(0,0,0,0.1);
			margin-top:20px;
			border: 0px solid #CFCFCF !important;
		}
		.dealerleft{
			height: 180px;	
			width: 6px;	
			border-radius: 6px 0 0 6px;	
			background-color: #71BE44;	
			box-shadow: 0 0 20px 0 rgba(0,0,0,0.1);
			float:left;
		}
		.dealercenter{
			margin-left:20px;
			padding-top:20px;
			float: left;
			width:42%;
			
		}
		.dealerright{
			padding-top:22px;
			float:left;
			padding-left:20px;
		}

		.dealername{
			height: 27px;	
			width: 83px;	
			color: #3D3D3D;	
			font-family: "fira-sans",sans-serif;
			font-size: 22px;	
			line-height: 27px;
			font-weight:700;
		}
		.spec{
			height: 28px;	
			color: #71BE44;	
			font-size: 14px;	
			font-weight: 600;	
			line-height: 28px;
		}
		.dealercat{
			height: 28px;		
			color: #7A7A7A;	
			font-size: 14px;	
			line-height: 28px;
		}
		.dealeradres{
			color: #3D3D3D;	
			font-size: 16px;	
			line-height: 28px;
		}
		.dealerseparator{
			height: 70px;	
			width: 1px;	
			background-color: #CFCFCF;
			float: left;
			margin-top:30px;
		}
		.dealerbuttonright{
			overflow:hidden;
			padding-top:38px;
			float:right;
		}
		.offerbutton{
			line-height: 22px;
			text-decoration:none!important;
			margin-top:20px;
			height: 32px;	
			padding-left: 15px;	
			padding-right: 15px;	
			border: 1px solid #71BE44;	
			border-radius: 24px;	
			background-color: #71BE44;
			margin-right:30px;
			color: #FFFFFF;		
			font-size: 16px;	
			text-align:center;
			padding-top:11px;			
		}
		.offerbuttonnonprem{
			background-color: #FFF;
			color: #43414C!important;
			border: 1px solid #43414C;	
		}
		.afstand{
			color: #7A7A7A;	
			font-size: 13px;	
			font-style: italic;
		}
		.dealernonprem{
				border: 1px solid #CFCFCF!important;	
				border-radius: 6px;	
				background-color: #FFFFFF;	
				box-shadow: 0 0 0px 0 rgba(0,0,0,0.1);
		}
		
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* The actual popup */
.popup .popuptext {
  visibility: hidden;
  width: 800px;
  height: 800px;
  background-color: #FFF;
  color: #26292F;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -320px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}
.offerbutton > a{
	text-decoration:none!important;
	color: #FFFFFF!important;
	font-weight:400;
	padding-bottom:25px!important;
}
.offerbuttonnonprem > a{
	text-decoration:none!important;
	color: #43414C!important;
	font-weight:400;
	padding-bottom:25px!important;
}

.ui-front{
	/*display:block!important;*/
	z-index:11000;
	width:400px!important;
	background-color: #FFFFFF!important;
	list-style-type: none!important;	
	}


#brochureverzendenper .toggleaan{
	border:0;
}