@charset "utf-8";


@font-face {
  font-family: 'Linearicons-Free';
  src: url('fonts/Linearicons-Free.eot') format('embedded-opentype'), url('fonts/Linearicons-Free.woff2') format('woff2'), url('fonts/Linearicons-Free.woff') format('woff'), url('fonts/Linearicons-Free.ttf') format('truetype'), url('fonts/Linearicons-Free.svg#Linearicons-Free') format('svg');
  font-weight: normal;
  font-style: normal;
}

/* icoontjes */
.icoon {
  font-family: 'Linearicons-Free' !important;
}

.waarborg-icoon::before {
  content: '';
  background: url('../images/5jwaarborg.png') no-repeat left top;
  background-size: contain;
  width: 225px;
  height: 175px;
  display: block;
  margin: 0 auto 10px auto;
  cursor: default;
}

html[lang=fr] .waarborg-icoon::before,
html[lang=fr-fr] .waarborg-icoon::before {
  background: url('../images/5_ans_garantie-01.png') no-repeat left top;
  background-size: contain;
}

html[lang=de] .waarborg-icoon::before {
  background: url('../images/5_jahre-garantie-01.png') no-repeat left top;
  background-size: contain;
}

html[lang=en] .waarborg-icoon::before {
  background: url('../images/5_year_garantee-01.png') no-repeat left top;
  background-size: contain;
}

.zoek-een-verkooppunt-icoon::before {
  /*content: '\0e833';*/
  content: '';
  background: url('../images/locatie.svg') no-repeat left top;
  background-size: contain;
  width: 61px;
  height: 30px;
  display: block;
}

.kleuren-icoon::before {
  /*content: '\0e833';*/
  content: '';
  background: url('../images/verfborstel.svg') no-repeat left top;
  background-size: contain;
  width: 91px;
  height: 75px;
  display: block;
}

.location-icoon::before {
  content: '\0e835';
}

.vraag-documentatie-icoon::before {
  content: '\0e828';
}

.diamant-icoon::before {
  content: '\0e845';
}

.oog-icoon::before {
  content: '\0e81b';
}

.license-icoon::before {
  content: '\0e822';
}

.plus-icoon::before {
  content: '\0e881';
}

.vraag-offerte-icoon::before {
  content: '\0e82f';
}
.verkooppunt-detail{
	text-align: left;
}

.inhoud-blok .verkooppunt-detail h2 {
	margin-top: 73.5px;
    margin-bottom: 35px;
	font-size: 36px;
}
.inhoud-blok .verkooppunt-detail h3 {
	color: #71be44;
	font-size: 24px;
	position: relative;
}
.inhoud-blok .verkooppunt-detail h3:after {
	content: "";

	display: inline-block;
    background-image: url('/themes/harol/images/Icoontje_Specialist_groen.png');
    background-repeat: no-repeat;
    background-size: contain;
    width: 1.4em;
    height: 1.4em;
    vertical-align: bottom;
    margin-left: 8px;
}
.verkooppunt-detail .kleuren-producten:after{
	clear: both;
	display: table;
	content: "";
}
	.verkooppunt-detail ul.kleuren-producten {
		list-style: none;
		list-style-image: none;
		margin: 25px 0px;
		padding: 0px;
	}
	.verkooppunt-detail .kleuren-producten li{
		float: left;
		width: 25%;
		min-width: 165px;
	}
	.verkooppunt-detail .kleuren-producten li:before{
		content: "";
		display: inline-block;
		width: 20px;
		height: 20px;
		margin-right: 10px;
	}
	.verkooppunt-detail .kleuren-producten li.Zonwering:before{
		 background: #d55d05;
	}
	.verkooppunt-detail .kleuren-producten li.Garagepoorten:before{
		 background: #a71a17;
	}
	.verkooppunt-detail .kleuren-producten li.Buitenleven:before{
		 background: #004d87;
	}
	.verkooppunt-detail .kleuren-producten li.Rolluiken:before{
		 background: #862662;
	}
	.verkooppunt-detail .iframe_adres_details {
		width: 100%;
		height: 299px;
	}
		.verkooppunt-detail .iframe_adres_details iframe {
			width: 100%!important;
			height: 100%!important;
		}
	.verkooppunt-detail .contacteer_dealer_detail {
		font-size: 24px;
		margin-top: 5px;
	}
	.verkooppunt-detail .contacteer_dealer_detail {
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;

		-webkit-flex-direction: row;
		-ms-flex-direction: row;
		flex-direction: row;

		-ms-flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;

		-ms-justify-content: space-between;
		-webkit-justify-content: space-between;
		justify-content: space-between;
	}
		.verkooppunt-detail .contacteer_dealer_detail>div:nth-child(2) {
			width: 162px;
		}
		.verkooppunt-detail a.contacteer_dealer_detail_tel {
			display: inline-block;
			background-color: #71be44;
			color: #fff;
			font-family: "fira-sans", sans-serif;
			font-size: 20px;
			position: relative;
			padding-left: 20px;
			text-decoration: none;
			padding: 10px 10px 10px 40px;
		}
		.verkooppunt-detail a.contacteer_dealer_detail_tel:before {
			background: url('/themes/harol/css/images/icon-phone.png') no-repeat top left;
			width: 16px;
			height: 16px;
			content: "";
			position: absolute;
			top: 17px;
			left: 15px;

		}
	.verkooppunt-detail .openingsuren {
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;

		-webkit-flex-direction: row;
		-ms-flex-direction: row;
		flex-direction: row;

		-ms-flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;

		-ms-justify-content: space-between;
		-webkit-justify-content: space-between;
		justify-content: space-between;
	}
	.verkooppunt-detail .openingsuren>div {
		background-color: #f3f1ef;
		font-size: 14px;
		width: calc((100% / 7) - 1px);
		box-sizing: border-box;
		padding: 20px 0px 20px 20px;
		min-width: 104px;
	}
	.inhoud-blok .verkooppunt-detail .nota {
		font-size: 1.17rem;
		position: relative;
		padding-left: 1.8em;
	}
	.inhoud-blok .verkooppunt-detail .nota:before {
		content: "";

		display: inline-block;
		background-image: url('/themes/harol/images/Icoontje_Specialist_groen.png');
		background-repeat: no-repeat;
		background-size: contain;
		width: 1.4em;
		height: 1.4em;
		vertical-align: bottom;
		position: absolute;
		left: 0px;
		top: 0px;
	}
	.inhoud-blok .verkooppunt-detail hr {
		margin-top: 60px;
		margin-bottom: 60px;
		border: 1px solid #3f3f40;
		border-bottom: none;
	}

.zoek-icoon::before,
.zoek-knop::before {
  content: '';
  background: url('../images/icoon_zoeken_zwart.svg') no-repeat center center;
  background-size: auto 1em;
  width: 1.2em;
  height: 1em;
  display: block;
}

.zoek-icoon:hover::before,
.zoek-knop:hover::before {
  background-image: url('../images/icoon_zoeken_groen.svg');
}

.raket-icoon::before {
  content: '\0e84b';
}

.hangslot-icoon::before {
  content: '\0e80f';
}

.flatgebouw-icoon::before {
  content: '\0e801';
}

.tandwiel-icoon::before {
  content: '\0e810';
}

.potlood-icoon::before {
  content: '\0e802';
}

.grafiek-icoon::before {
  content: '\0e843';
}

.map-icoon::before {
  content: '\0e81d';
}

.vinkjes-icoon::before {
  content: '';
  background: url('../images/vinkjes.svg') no-repeat left top;
  background-size: contain;
  width: 61px;
  height: 36px;
  display: block;
}

.personen-icoon::before {
  content: '\0e82a';
  font-size: 75%;
  width: 1.45rem;
  padding: 3px 0 0 0;
  overflow-x: hidden;
  display: inline-block;
  vertical-align: baseline;
}

.personen-icoon::after {
  content: '\0e82a';
  position: relative;
  left: -.1em;
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}

html, body {
  margin: 0;
  padding: 0;
  font-size: 12px;
}

body {
  font-family: "fira-sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #3f3f40;
  background-color: #fdfbf9;
}

#pagina-kader {
  max-width: 1550px;
  margin: 0 auto;
  background-color: #fff;
  position: relative;
}

nav::after, header::after, section::after, footer::after {
  content: '';
  clear: both;
  display: block;
  height: 0px;
}

section {
  position: relative;
}

h1, h2, h4 {
  font-family: 'Bree', sans-serif;
  font-weight: normal;
}

h3 {
  font-family: "fira-sans", sans-serif;
  font-weight: 300; /* light */
}

h2 {
  font-size: 1.67rem;
}

h3 {
  font-size: 2.25vw;
}

h4 {
  font-size: 1.33rem;
}

h5 {
  font-size: 1rem;
  font-weight: normal;
}

input {
  -webkit-text-size-adjust: 100%;
  -webkit-appearance: none;
}

a {
  color: inherit;
  text-decoration: none;
}

  a:hover {
    text-decoration: underline;
  }

  a.tooltip {
    border-bottom: 1px solid #d1d1d1;
    display: inline;
    position: relative;
  }

    a.tooltip:hover {
      text-decoration: none;
    }

      a.tooltip::after {
        border: solid;
        border-color: #71be44 transparent;
        border-width: 7px 7px 0 7px;
        bottom: 23px;
        content: "";
        left: 90%;
        position: absolute;
        z-index: 99;
        opacity: 0;
        transition-duration: 150ms;
      }

      a.tooltip::before {
        background: #71be44;
        bottom: 30px;
        right: -65px;
        padding: 15px;
        position: absolute;
        z-index: 98;
        color: #fff;
        content: attr(title);
        font-size: 1rem;
        font-weight: normal;
        white-space: nowrap;
        opacity: 0;
        transition-duration: 150ms;
      }

      a.tooltip:hover::before,
      a.tooltip:hover::after {
        opacity: 1;
      }

a.link-knop {
  height: 44px;
  box-sizing: border-box;
  display: inline-block;
  border-radius: 21px;
  text-transform: uppercase;
  line-height: 44px;
  text-decoration: none;
  padding: 0 20px;
  font-size: 1.125rem;
  letter-spacing: 1px;
  font-weight: bold;
  transition-duration: 150ms;
}

/* link-buttons in promotion ball need white border and stuff */
section#intro-beeld div.promotie-verhaal a.link-knop {
  margin-top: 12px;
  border: 2px solid rgba(113, 190, 68, 1);
  color: #fff;
  background-color: rgba(113, 190, 68, 1);
}

section#intro-beeld div.promotie-verhaal a.link-knop:hover {
  border-color: #fff;
  background-color: rgba(113, 190, 68, 0);
}

.promotie-bol a.link-knop,
.promotie-banner div.inhoud-blok a.link-knop
{
  margin-top: 12px;
  border: 2px solid #fff;
  background-color: rgba(255,255,255,0);
  color: #fff;
  text-decoration: none;
}

.promotie-bol a.link-knop:hover,
.promotie-banner div.inhoud-blok a.link-knop:hover
{
  border-color: #3f3f40;
  color: #3f3f40;
  background-color: rgba(255,255,255,1);
}

.hide-on-mobile {
  display: none;
}

header {
  height: 71px;
  position: relative;
}

  header a#logo {
    display: block;
    width: 108px;
    height: 46px;
    margin: 10px 30px;
    background-image: url(../images/logo.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    float: left;
    transition-duration: 150ms;
  }

  header #mobiel-menu-blok {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 71px;
    height: 71px;
    z-index: 10;
  }

    header #mobiel-menu-blok div.mobiele-hamburger {
      border-left: 1px solid #f3f1ef;
      width: 71px;
      height: 71px;
      box-sizing: border-box;
      padding: 20px 15px;
      cursor: pointer;
    }

      header #mobiel-menu-blok div.mobiele-hamburger > div {
        width: 32px;
        height: 3px;
        margin: 6px auto;
        background-color: #000;
      }

      header #mobiel-menu-blok div.mobiele-hamburger.active + nav#mobiel-menu {
        display: block;
      }

    header #mobiel-menu-blok nav#mobiel-menu {
      display: none;
      position: fixed;
      width: 100vw;
      height: calc(100vh - 71px);
      overflow: auto;
      right: 0px;
      top: 71px;
      background: #fff;
      z-index: 10;
    }

      header #mobiel-menu-blok nav ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
      }

        header #mobiel-menu-blok nav ul li {
          border-top: 1px solid #f3f1ef;
          padding: 0;
          display: block;
        }

          header #mobiel-menu-blok nav ul li a {
            text-decoration: none;
            font-weight: bold;
            font-size: 20px;
            display: block;
            padding: 11px 40px;
          }

          header #mobiel-menu-blok nav ul li a.lang,
          header #mobiel-menu-blok nav ul li a.lang+ul li a {
						background-position: 40px center;
						padding-left: 70px;
						background-repeat: no-repeat;
						background-size: 20px 20px;
          }

          html[lang=nl] header #mobiel-menu-blok nav ul li a.lang,
          html[lang=fr] header #mobiel-menu-blok nav ul li a.lang,
					header #mobiel-menu-blok nav ul li a.nl-be,
					header #mobiel-menu-blok nav ul li a.fr-be {
						background-image: url(/themes/harol/images/icoon_belgie.png);
					}
          html[lang=nl-nl] header #mobiel-menu-blok nav ul li a.lang,
					header #mobiel-menu-blok nav ul li a.nl-nl {
						background-image: url(/themes/harol/images/icoon_nederland.png);
					}
          html[lang=fr-fr] header #mobiel-menu-blok nav ul li a.lang,
					header #mobiel-menu-blok nav ul li a.fr-fr {
						background-image: url(/themes/harol/images/icoon_frankrijk.png);
					}
          html[lang=en] header #mobiel-menu-blok nav ul li a.lang,
					header #mobiel-menu-blok nav ul li a.en {
						background-image: url(/themes/harol/images/icoon_english.png);
					}
          html[lang=de] header #mobiel-menu-blok nav ul li a.lang,
					header #mobiel-menu-blok nav ul li a.de {
						background-image: url(/themes/harol/images/icoon_duitsland.png);
					}

            header #mobiel-menu-blok nav ul li a.top-menu {
              color: #71be44;
              font-weight: normal;
            }

            header #mobiel-menu-blok nav ul li a.zoek-een-verkooppunt::before {
              font-family: 'Linearicons-Free' !important;
              content: '\0e833';
              font-size: 2rem;
            }

            header #mobiel-menu-blok nav ul li .taalkeuze {
              color: #c2c2c2;
            }

            header #mobiel-menu-blok nav ul li ul {
              display: none;
            }

            header #mobiel-menu-blok nav ul li.active ul {
              display: initial;
            }

#snelle-links {
  display: none;
}

nav#top-menu {
  display: none;
}

header > .taalkeuze,
header > .zoek-knop {
  display: none;
}

header nav#hoofd-menu {
  display: none;
}

section#intro-beeld {
  position: relative;
  padding-top: 0px;
  min-height: 70vh;
}

  section#intro-beeld.groen-kader {
    height: 70vh;
    background-size: cover;
    min-height: 1px;
  }

  section#intro-beeld div.intro-beeld {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 1;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
  }

  section#intro-beeld div.intro-beeld::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0) 65%, rgba(0,0,0,0.3));
  }

  section#intro-beeld>div,
  section#intro-beeld .slick-slide,
  section#intro-beeld .slick-slider,
  section#intro-beeld .slick-track,
  section#intro-beeld .slick-list {
    height: 100%;
  }

  section#intro-beeld .slick-slide div.intro-beeld {
    position: relative;
  }

section#inspiratie {
  background-image: url('../images/productdetail-inspiratie.jpg');
  height: calc(100vh - 71px - 37px);
  min-height: calc((1vh * 11) + 500px);
  background-size: cover;
  background-position: center center;
  padding: 0;
  position: relative;
}

  section#inspiratie span.beeld-counter {
    background-image: url(../images/counter.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    cursor: pointer;
    width: 66px;
    height: 21px;
    position: absolute;
    display: block;
    left: 50%;
    bottom: 40px;
    transform: translate(-50%, 0);
  }

section#kleuren {
  background-image: url('../images/kleuren.jpg');
  background-size: cover;
  background-position: center center;
  padding: 0;
  position: relative;
  color: #fff;
}

section.kleuren .inhoud-blok {
  padding-top: 131px;
  padding-bottom: 136px;
  font-size: 1.5rem;
}

  section.kleuren .inhoud-blok h2 {
    margin-bottom: 36px;
  }

  section.kleuren .inhoud-blok a.cta-knop {
    color: #fff;
    border-color: #fff;
  }

    section.kleuren .inhoud-blok a.cta-knop:hover {
      background-color: #71be44;
      border-color: #71be44;
      text-decoration: none;
      transition-duration: 150ms;
    }

section.technisch .inhoud-blok {
  padding-top: 97px;
  padding-bottom: calc(142px - 20px);
}

section.technisch .icoon {
  font-size: 45px;
}

section.technisch h2 {
  margin-bottom: 50px;
}

section.technisch .flexbox-rij > div:first-child table tr td:first-child {
  padding-right: 60px;
}

section.comfort {
  background-image: url('../images/comfort.jpg');
  background-size: cover;
  background-position: center center;
  padding: 0;
  position: relative;
  color: #fff;
}

  section.comfort .inhoud-blok {
    padding-top: calc(158px - 35px);
    padding-bottom: 140px;
  }

  section.comfort h2 {
    margin-bottom: 32px;
  }

  section.comfort a.cta-knop {
    color: #fff;
    border-color: #fff;
    transition-duration: 150ms;
    margin-top: 55px;
  }

    section.comfort a.cta-knop:hover {
      border-color: #71be44;
      transition-duration: 150ms;
    }

section#accessoires .inhoud-blok {
  padding-top: 0px;
  padding-bottom: 107px;
}

section.product-lijst .icoon {
  font-size: 45px;
}

section.product-lijst h2 {
  margin-bottom: 50px;
}

#producten:last-child .inhoud-blok {
  padding-bottom: 93px;
}

section.product-lijst .overzicht-accessoires {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;

  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;

  -ms-justify-content: center;
  -webkit-justify-content: center;
  justify-content: center;
}

  section.product-lijst .overzicht-accessoires a {
    background-size: contain;
    height: 285px;
    width: 285px;
    box-sizing: border-box;
    color: #fff;
    font-size: 1.17rem;
    margin-bottom: 15px;
    margin-right: 15px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    position: relative;
    -webkit-align-items: center;
    align-items: center;
    -ms-justify-content: center;
    -webkit-justify-content: center;
    justify-content: center;
		text-decoration: none;

    background-repeat: no-repeat;
    background-position: center center;
  }

    section.product-lijst .overzicht-accessoires > a:hover {
      text-decoration: none;
    }

  /* Show more button support */
  section#accessoires .overzicht-accessoires a {
      display: none;
  }

  section#accessoires .overzicht-accessoires a:nth-child(1),
  section#accessoires .overzicht-accessoires a:nth-child(2),
  section#accessoires .overzicht-accessoires a:nth-child(3),
  section#accessoires.show-all .overzicht-accessoires a:nth-child(n)
  {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
  }

.overzicht-accessoires {
  text-align: center;
}

  section.product-lijst .overzicht-accessoires a .titel {
    font-size: 1.67rem;
    font-weight: bold;
    display: block;
    position: relative;
    padding-left: 42px;
    padding-right: 42px;
    z-index: 2;
  }

    section.product-lijst .overzicht-accessoires a .beschrijving {
      margin-top: 30px;
      display: block;
      max-height: 0px;
      transition-duration: 300ms;
      overflow: hidden;
      position: relative;
      padding-left: 42px;
      padding-right: 42px;
      z-index: 2;
    }

    section.product-lijst .overzicht-accessoires a::before {
      content: '';
      position: absolute;
      display: block;
      width: 100%;
      height: 100%;
      left: 0px;
      top: 0px;
      background-color: rgba(0, 0, 0, 0.3);
      z-index: 1;
    }

    section.product-lijst .overzicht-accessoires a:hover::before {
      background-color: rgba(0, 0, 0, 0);
    }

    section.product-lijst .overzicht-accessoires a.stub {
      display: none;
    }

    section.product-lijst .overzicht-accessoires a.stub::before {
      display: none;
      cursor: default;
    }

    section.product-lijst .overzicht-accessoires a:hover .beschrijving {
      max-height: 250px;
    }

.meer-knop-centreer {
  margin-top: calc(64px - 15px);
  text-align: center;
}

/*productgroup */
section#intro-detail-beeld {
  background-size: cover;
  background-position: center center;
  position: relative;
  z-index: 1;
  height: calc(100vh - 71px - 37px);
  min-height: calc((1vh * 11) + 800px);
}
section#intro-detail-beeld .promo {
    background: #F9B000;
    position: absolute;
    right: 0;
    top: 60px;
    padding: 20px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    display: flex; align-items: center;
    box-shadow: -10px 0px 30px -5px darkgray;
}
section#intro-detail-beeld .promo > .promo-titles {
    font-family: 'Bree', sans-serif;
}
section#intro-detail-beeld .promo > .promo-titles > .promo-title {
    text-transform: uppercase;
    color: #fff;
    font-size: 2rem;
    line-height: 3rem;
}
section#intro-detail-beeld .promo > .promo-titles > div {
    font-size: 1.125rem;
    font-weight: bold;
}
section#intro-detail-beeld .promo > .promo-link .lnr {
    color: #fff;
    margin: 0 0 0 20px;
    padding: 10px;
    font-size: 40px;
}
section#intro-detail-beeld .inhoud-blok {
  padding-top: 85px;
}

section#intro-detail-beeld .kruimelpad {
  padding-top: 0px;
}

section#intro-detail-beeld .hoofd-titel {
  margin-top: 115px;
}

.promotie-banner div.inhoud-blok {
  padding-top: 0;
  padding-bottom: 0;
  position: relative;
}

.promotie-banner div.inhoud-blok h2,
.promotie-banner div.inhoud-blok p {
  margin: 0;
}

.promotie-banner {
  width: 100%;
  box-sizing: border-box;
  padding: 15px 30px;
  background-color: #71be44;
  color: #fff;
}

section.text-sfeerbeeld-klein .promotie-bol
{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 15px 30px;
  background-color: #71be44;
  color: #fff;
  z-index: 4;
}

section.text-sfeerbeeld-klein .promotie-bol img
{
  height: 118px;
  width: auto;
  position: absolute;
  right: 20px;
  top: 20px;
}

section#group-intro {
  background-color: #f3f1ef;
  box-sizing: border-box;
  padding: 120px 30px 120px 30px;
  font-size: 1.5rem;
  line-height: 1.5;
  text-align: center;
}

section#group-info-beeld {
  font-size: 3.83rem;
  background-image: url('../images/verhaal_preview.jpg');
  background-size: cover;
  background-position: center center;
}

  section#group-info-beeld h2 {
    margin-top: 47px;
    margin-bottom: 35px;
    width: 80%;
  }

  section#group-info-beeld .kolom-links {
    width: 50%;
  }

  section#group-info-beeld .cta-knop {
    margin-top: 45px;
  }

section#usp {
  background-color: #f3f1ef;
}

  section#usp .icoon {
    font-size: 80px;
  }

/* referenties */

/* referenties view - with grouped fields */
.harol-referenties h3 {
  display: none;
}

.harol-referenties div.views-field {
  width: 50%;
  padding: 10px;
  display: none;
  box-sizing: border-box;
}

.harol-referenties h3+div.views-field {
  float: left;
  display: block;
}

div.referentie {
  height: 275px;
  overflow: hidden;
}

div.referentie div.referentie-info {
  height: 140px;
  overflow: hidden;
}

div.referentie img.referentie-img {
  width: 90%;
  height: auto;
}

div.referentie .referentie-product {
	display: inline-block;
	min-height: 40px;
}

div.referentie .referentie-architect {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  font-style: italic;
}

/* over harol */
section#intro-over-harol {
  background-color: #f3f1ef;
}

  section#intro-over-harol .kruimelpad {
    color: #000;
    padding-top: 0px;
    text-shadow: none;
  }

    section#intro-over-harol .kruimelpad li,
    section#intro-over-harol .kruimelpad a {
      color: #000;
    }

  section#intro-over-harol .inhoud-blok {
    padding-top: 80px;
    padding-bottom: 14px;
  }

  section#intro-over-harol .intro-inhoud {
    padding-top: 110px;
    text-align: center;
    padding-left: calc((100% - 600px) / 2);
    padding-right: calc((100% - 600px) / 2);
  }

    section#intro-over-harol .intro-inhoud h1 {
      margin: 0px;
      padding: 0px;
    }

    section#intro-over-harol .intro-inhoud h2 {
      margin: 20px 0px 44px 0px;
      padding: 0px;
    }

    section#intro-over-harol .intro-inhoud p {
      margin: 44px 0px;
    }

/* blog */
section#blog-beeld {
  background-image: url('../images/blog.jpg');
  min-height: 10px;
  background-size: cover;
  position: relative;
  z-index: 1;
  height: calc(100vh - 71px - 37px);
  min-height: calc((1vh * 11) + 500px);
}

  section#blog-beeld .kruimelpad {
    padding-top: 0px;
  }

  section#blog-beeld .hoofd-titel {
    margin-top: 90px;
  }

  section#blog-beeld h2 {
    margin-top: 20px;
    margin-bottom: 30px;
    text-shadow: 0px 0px 15px rgba(121, 121, 121, 0.76);
  }

section#blog-intro {
  background-color: #f3f1ef;
}

  section#blog-intro .blog-inhoud-blok:after {
    clear: both;
    content: "";
    display: table;
  }

.vert-submenu {
  background-color: #71be44;
  box-sizing: border-box;
  float: none;
  margin: 10px 62px 0px 10px;
  width: 260px;
  padding: 15px 33px;
  position: relative;
  z-index: 50;
  color: #fff;
  font-family: 'Bree', sans-serif;
  font-size: 1.33rem;
}

  .vert-submenu ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
    list-style-image: none;
  }

    .vert-submenu ul li {
      border-top: 1px solid #4faa2f;
      padding: 20px 0px 20px 0px;
    }

      .vert-submenu ul li:first-child {
        border: none;
      }

section#blog-intro .blog-intro-text {
  float: none;
  width: 100%;
  padding-top: 55px;
  color: #3d3d3d;
  font-size: 1.5rem;
  line-height: 2;
  text-align: center;
}

  section#blog-intro .blog-intro-text p {
    margin: 20px 0px;
  }

section#blog-items {
  background-color: #f3f1ef;
}

  section#blog-items header {
    height: auto;
  }

  section#blog-items .inhoud-blok {
    padding-top: 40px;
    padding-bottom: calc(65px - 42px);
    margin-left: 10px;

    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-align-items: stretch;
    align-items: stretch;

    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;

    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;

    -ms-justify-content: space-between;
    -webkit-justify-content: space-between;
    justify-content: space-between;
  }

  section#blog-items a.nieuws-item {
    display: block;
    width: 100%;
    float: none;
    margin-bottom: 42px;
    background-color: #fff;
    text-decoration: none;
    transition-duration: 150ms;
  }

  section#blog-items header::after {
    content: none
  }

  section#blog-items header:empty {
    display: none;
  }

  section#blog-items a.nieuws-item:hover {
    background-color: #f3f1ef;
  }

    section#blog-items a.nieuws-item div.preview {
      width: 100%;
      height: 250px;
      background: #c7c8ca url(../images/blog_breed.jpg) no-repeat top left;
      background-size: cover;
    }

      section#blog-items a.nieuws-item div.preview.breed {
        display: none;
      }

      /* Toon meer support */
      section#blog-items a.nieuws-item {
        display: none;
      }

      section#blog-items a.nieuws-item:nth-of-type(1),
      section#blog-items a.nieuws-item:nth-of-type(2),
      section#blog-items a.nieuws-item:nth-of-type(3),
      section#blog-items a.nieuws-item:nth-of-type(4)
      {
        display: initial;
      }

      section#blog-items.show-all a.nieuws-item {
        display: initial;
      }

  section#blog-items .nieuws-tekst {
    color: #212227;
    font-weight: 300;
    font-size: 1.5rem;
    padding: 35px 32px 13px 32px;
  }

    section#blog-items .nieuws-tekst h3 {
      color: #212227;
      font-family: 'Bree', sans-serif;
      font-weight: 300;
      font-size: 1.33rem;
      line-height: 1.5;
      margin: 0px;
      padding: 0px;
    }

    section#blog-items .nieuws-tekst p {
      margin: 22px 0px;
      padding: 0px;
    }

section#blog-meer {
  text-align: center;
  background-color: #f3f1ef;
}

  section#blog-meer p {
    padding: 0px 0px 55px 0px;
    margin: 0px;
  }

  section#blog-meer a {
    color: #bfbfbf;
    border-color: #bfbfbf;
  }

    section#blog-meer a:hover {
      color: #fff;
      border-color: #71be44;
    }

/* a little wrapper to make tables scrollable on mobile  */
div.table-wrapper {
  width: 100%;
  height: auto;
  overflow: auto;
}

/* these tables just need to be serialized on mobile */
table.mobiel-seriele-tabel,
table.mobiel-seriele-tabel tbody,
table.mobiel-seriele-tabel thead,
table.mobiel-seriele-tabel tr,
table.mobiel-seriele-tabel td,
table.mobiel-seriele-tabel th {
  display: block;
}

/* these tables need to be serialized column by column on mobile - up to 6 columns for now */
table.mobiel-seriele-tabel-kolom
table.mobiel-seriele-tabel-kolom tbody,
table.mobiel-seriele-tabel-kolom thead{
  display: flex;
}
table.mobiel-seriele-tabel-kolom tr,
table.mobiel-seriele-tabel-kolom td,
table.mobiel-seriele-tabel-kolom th {
  display: block;
}




body.page-node-type-aanvraag-formulier #pagina-kader {
  background-color: #fdfbf9;
}

div.forms-wrapper {
  background-color:  #fff;
  margin: -60vh auto 0 auto;
  position:  relative;
  z-index: 3;
  min-height: 60vh;
}

/* actieformulieren staan onder sfeerbeeld */

.page-node-type-actieformulier div.forms-wrapper,
.page-node-type-actiepagina div.forms-wrapper
{
  margin-top: 0;
}

section#forms-beeld {
  background-image: url('../images/har-login-pros.jpg');
  height: calc(100vh - 71px - 37px);
  min-height: calc((1vh * 11) + 500px);
  background-size: cover;
}

  section#forms-beeld .kruimelpad {
    padding-top: 0px;
  }
.foutmelding{
	color: #f00;
	font-size: 1.5rem;
}

section#forms-step-1,
section#forms-step-2,
section#forms-step-3,
section#forms-step-4,
section#forms-step-6,
.harol-form div.form-wrapper{
  position: relative;
  z-index: 10;
  background-color: #ffffff;
  max-width: 970px;
  margin: 0 auto 0 auto;
  clear: both;
}

section#forms-step-1.less-form-step-spacing,
section#forms-step-2.less-form-step-spacing,
section#forms-step-3.less-form-step-spacing{
	margin-top: -100px;
}
section#forms-step-4.less-form-step-spacing{
	margin-top: -50px;
}

#forms-step-4 label {
  visibility: hidden;
  color: #7a7a7a;
  margin-left: 15px;
}
#forms-step-4 .js-form-type-checkbox label,
#forms-step-4 .js-form-type-radio label {
	margin-left: 0px;
}
#forms-step-4 .js-form-type-webform-document-file label {
	visibility: visible;
}

#pagina-kader .harol-form #forms-step-4  .js-form-type-webform-document-file input[type=submit] {
	margin: 5px 0px;
}

#forms-step-4 fieldset label {
  visibility: visible;
}

a.harol-field-openklap-info {
  cursor: pointer;
}

.harol-form {
  position: relative;
}

div.country-dealer-table table {
  min-width: 100%;
}

div.country-dealer-table table tbody {
  width: 100%;
}

div.country-dealer-table table td, div.country-dealer-table table th {
  border: none;
}

div.country-dealer-selector select {
  font-family: "fira-sans",sans-serif;
  font-size: 1.4rem;
  padding: 3px;
}

div.kies-dealer {
  position: absolute;
  width: 400px;
  height: 500px;
  left: 50px;
  top: 90px;
  background-color: #fff;
  padding: 20px;
  z-index: 100;
  border: 2px solid #252525;
}

div.kies-dealer div.kies-dealer-provincie-lijst {
  padding: 0 20px 0 0;
  border-right: 2px solid #252525;
  float: left;
  width: 100px;
  height: 100%;
}

div.kies-dealer div.kies-dealer-provincie-lijst>div {
  cursor: pointer;
  margin: 7px 0;
}

div.kies-dealer div.kies-dealer-provincie-lijst>div:hover {
  font-weight: bold;
}

div.kies-dealer div.kies-dealer-lijst {
  padding: 0 0 0 20px;
  margin-left: 120px;
  overflow: auto;
  height: 100%;
}

div.kies-dealer div.kies-dealer-lijst>div {
  cursor: pointer;
  margin: 7px 0;
  transition-duration: 150ms;
}

div.kies-dealer div.kies-dealer-lijst>div:hover {
  background-color: rgba(200,200,200);
}

a.dealerkiezen {
  cursor: pointer;
}

/* to show label if input has value - class is set on parent using js */
#forms-step-4 .has-value label,
.always-show-label label,
#forms-step-4 .always-show-label label
{
  visibility: visible;
}

section.formulier-stap {
  position: relative;
  z-index: 10;
  background-color: #ffffff;
  max-width: 970px;
  margin: 10px auto 0 auto;
  padding-top: 50px;
}

  div.forms-wrapper .forms-intro {
    color: #3d3d3d;
    font-size: 1.5rem;
    line-height: 1.5;
    text-align: center;
    margin-bottom: 50px;
  }
	.vacature, div.forms-wrapper .forms-intro .vacature {
		text-align: left;
		font-size: 1.16rem;
	}
  section#forms-step-1 .inhoud-blok, section.formulier-stap .inhoud-blok {
    padding-bottom: 75px;
  }

  div.deel-op-sociale-media {
    padding:0 0 15px 0;
  }

  div.deel-op-sociale-media::after {
    content: '';
    clear: both;
    display: block;
    height: 0px;
    visibility: hidden;
  }

  div.deel-op-sociale-media>a {
    float: left;
    display: block;
    width: 24px;
    height: 24px;
    margin: 0 3px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
  }

  div.deel-op-sociale-media>a.facebook {
    background-image: url(../images/facebook_icon.png);
  }
  div.deel-op-sociale-media>a.twitter {
    background-image: url(../images/twitter_icon.png);
  }
  div.deel-op-sociale-media>a.linkedin {
    background-image: url(../images/linkedin_icon.png);
  }

/* login pro */
section#login-pro-beeld {
  background-image: url('../images/har-login-pros.jpg');
  background-size: cover;
}

  section#login-pro-beeld h3 {
    margin-top: 0px;
    margin-bottom: 35px;
  }

  section#login-pro-beeld div.login {
    background-color: #ffffff;
    margin-top: 45px;
    padding: 57px 75px;
    box-sizing: border-box;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-justify-content: space-between;
    -webkit-justify-content: space-between;
    justify-content: space-between;
  }

    section#login-pro-beeld div.login > div {
      width: 100%;
      margin: 0px;
      padding: 0px;
    }

    /* this here to align buttons in both divs */
    section#login-pro-beeld div.login-info h3 {
      height: 27px;
    }
    section#login-pro-beeld div.login-info div.login-info-description {
      height: 138px;
    }

    section#login-pro-beeld div.login-buttons a.cta-knop {
      margin: 45px 0 88px 0;
    }

      section#login-pro-beeld div.login > div p:last-child {
        margin-bottom: 0px;
      }

    section#login-pro-beeld div.login > div {
      color: #7a7a7a;
      font-size: 1.33rem;
    }

    section#login-pro-beeld div.login .wachtwoord-vergeten {
      display: inline-block;
      float: right;
      margin-top: 30px;
      font-size: 0.8rem;
    }

    section#login-pro-beeld div.login .cta-knop {
      margin-top: 34px;
    }

  section#login-pro-beeld .kruimelpad {
    padding-top: 0px;
  }

  section#login-pro-beeld .inhoud-blok {
    padding-bottom: 95px;
  }


section.wit-blok .inhoud-blok {
  padding-top: 142px;
  padding-bottom: 137px;
}

section.wit-blok.no-padding .inhoud-blok {
  padding-top: 0;
}

  section.wit-blok  .inhoud-blok > .icoon {
    font-size: 50px;
  }

  section.wit-blok  .inhoud-blok > .diamant-icoon {
    font-size: 100px;
  }

  section.wit-blok .inhoud-blok h2 {
    margin-bottom: 0px;
  }

  section.wit-blok .flexbox-rij > div {
    font-size: 1.5rem;
    padding-top: 50px;
    box-sizing: border-box;
    color: #3d3d3d;
    line-height: 1.5;
    width: 100%;
  }

  section.wit-blok .flexbox-rij > div h2 {
    line-height: 1.2;
  }

section.wit-blok .flexbox-rij > div.grijze-kolom {
  color: #7a7a7a;
}

  section.wit-blok .flexbox-rij > div h3 {
    font-size: 1.5rem;
    margin-bottom: 20px;
  }

  section.wit-blok .flexbox-rij > div a.cta-knop {
    font-style: normal;
    margin-top: 20px;
  }

  section.text-sfeerbeeld,
  section.text-sfeerbeeld-klein {
    color: #fff;
    background-position: center center;
    background-size: cover;
    min-height: 32.2vw;
    box-sizing: border-box;
  }

  section.text-sfeerbeeld .inhoud-blok {
    padding-top: 121px;
    padding-bottom: 76px;
    font-size: 1.5rem;
  }

  section.text-sfeerbeeld-klein .inhoud-blok {
    padding-top: 0px;
    padding-bottom: 0px;
    font-size: 1.5rem;
  }

    section.text-sfeerbeeld .inhoud-blok p {
      margin: 15px 0px;
    }

    .text-sfeerbeeld .inhoud-blok a.cta-knop {
      border: 2px solid #fff;
      color: #fff;
      background: none;
      margin-top: 31px;
    }

    .text-sfeerbeeld .inhoud-blok a.cta-knop:hover {
			border-color: #71be44;
      background-color: #71be44;
      color: #fff;
    }

    section.text-sfeerbeeld h2,
    section.text-sfeerbeeld .inhoud-blok h2 {
      font-size: 6.42rem;
      margin-bottom: 22px;
      margin-top: 70px;
      line-height: 1;
    }

  #intro-beeld .inhoud-blok h2 {
    font-size: 4.42rem;
  }
  section.text-sfeerbeeld .inhoud-blok h2 {
    font-size: 3.33rem;
  }

  section.text-sfeerbeeld a.telefoon,
  section.text-sfeerbeeld a.e-mail {
    display: inline-block;
    max-width: 45px;
    height: 45px;
    background-size: contain;
    background-position: left center;
    background-repeat: no-repeat;
    margin: 3px 35px 3px 0px;
    font-size: 2rem;
    text-decoration: none;
    color: #fff;
    overflow: hidden;
    vertical-align: bottom;
    line-height: 45px;
    box-sizing: border-box;
    padding-left: 45px;
    transition-duration: 150ms;
  }

  section.text-sfeerbeeld a.telefoon {
    background-image: url(../images/icoon_tel_wit.svg);
  }

  section.text-sfeerbeeld a.telefoon:hover {
    background-image: url(../images/icoon_tel_groen.svg);
  }

  section.text-sfeerbeeld a.e-mail {
    background-image: url(../images/icoon_email_wit.svg);
  }

  section.text-sfeerbeeld a.e-mail:hover {
    background-image: url(../images/icoon_email_groen.svg);
  }

a.naar-beneden {
  display: none;
}

section#intro-beeld div.verhaal,
section#intro-beeld div.promotie-verhaal
{
  box-sizing: border-box;
  color: #fff;
  padding: 20px 20px 20px 20px;
  text-align: left;
  line-height: 1.2;
  font-size: 1.1rem;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba(0,0,0,0.1);
  z-index: 3;
}

section#intro-beeld div.promotie-verhaal {
  font-size: 1.6rem;
}

section#intro-beeld div.promotie-verhaal h2 {
  font-size: 3rem;
}

  section#intro-beeld div.verhaal > h2:first-child {
    position: absolute;
    bottom: 70px; /* leave some space for the slider bullets */
    font-size: 3rem;
    padding: 0px 37px; /* leave some space for the slider arrows */
  }

  section#intro-beeld div.verhaal > p {
    display: none;
  }

  section#intro-beeld div.verhaal a.lees-verhaal {
    white-space: nowrap;
    display: block;
    height: 46px;
    padding: 0 40px 0 30px;
    border-radius: 24px;
    background-color: #fff;
    border: 2px solid #fff;
    color: #71be44;
    background-repeat: no-repeat;
    background-image: url(../images/groenpijltje_rechts.png);
    background-position: right 10px center;
    background-size: auto 12px;
    font-family: 'Bree', sans-serif;
    text-align: center;
    font-size: 1.25rem;
    line-height: 46px;
    text-decoration: none;
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    transition-duration: 150ms;
    display: none;
  }

  section#intro-beeld div.verhaal span.lees-verhaal.mobiel {
    display: block;
    padding: 20px 0;
  }

  section#intro-beeld div.verhaal a.lees-verhaal.mobiel {
    display: inline-block;
    position: static;
    transform: none;
    border: 2px solid #fff;
    background-image: url(../images/witpijltje_rechts.png);
    background-color: rgba(0,0,0,0);
    color: #fff;
  }

  section#intro-beeld div.verhaal a.lees-verhaal:hover {
    background-color: #71be44;
    background-image: url(../images/witpijltje_rechts.png);
    color: #fff;
  }

section#intro-beeld ul.product-groepen {
  display: none;
  box-sizing: border-box;
}

  section#intro-beeld span.beeld-counter {
    background-image: url(../images/counter.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    cursor: pointer;
    width: 66px;
    height: 21px;
    position: absolute;
    display: block;
    left: 50%;
    top: calc(60vh - 50px);
    transform: translate(-50%, 0);
  }

  ul.esthetiek {
    list-style: none;
    list-style-image: none;
    margin: 0px;
    padding: 0px;
    position: relative;
  }

    ul.esthetiek > li {
      width: 94%;
      cursor: default;
      box-sizing: border-box;
      padding-top: 25px;
      padding-left: 25px;
      padding-right: 25px;
      transition-duration: 150ms;
    }

      ul.esthetiek > li::after {
        content: '';
        display: block;
        height: 0;
        padding: 26px 0px 0px 0;
        margin: 0 0 0 -25px;
        border-bottom: 1px solid #f2f2f2;
      }

      ul.esthetiek > li:last-child {
        padding-bottom: 25px;
      }

      ul.esthetiek > li:last-child::after {
        display: none;
      }

    ul.esthetiek li:hover,
    ul.esthetiek li:first-child,
    ul.esthetiek:hover li:first-child:hover,
    ul.esthetiek li.active {
      background: url('../images/pijltje_grijs.svg') no-repeat top left;
      background-size: 100% 100%;
      font-weight: bold;
    }

    ul.esthetiek:hover li:first-child {
      background: none;
      font-weight: normal;
    }
    ul.esthetiek > li img {
      display: none;
    }
    ul.esthetiek > li:hover img,
    ul.esthetiek > li:first-child img,
    ul.esthetiek:hover > li:first-child:hover img {
      display: block;
    }
    ul.esthetiek:hover > li:first-child img {
      display: none;
    }

    ul.esthetiek ul {
      display: none;
      list-style: none;
      list-style-image: none;
      width: 53%;
      margin: 0px;
      padding: 0px;
      background-color: #fff;
      min-height: 400px;
      position: absolute;
      right: 0px;
      top: 0px;
    }

      ul.esthetiek ul li,
      ul.esthetiek ul li:hover {
        background-image: none;
        background-color: transparent;
        box-sizing: border-box;
        padding-left: 75px;
        font-weight: normal;
      }

    ul.esthetiek li:hover ul,
    ul.esthetiek li.active ul,
    ul.esthetiek li:hover ul,
    ul.esthetiek li:first-child ul,
    ul.esthetiek:hover li:first-child:hover ul
    {
      display: block;
    }

    ul.esthetiek:hover li:first-child ul
    {
      display: none;
    }

  ul.veiligheid {
    list-style: none;
    list-style-image: none;
    margin: 0px;
    padding: 0px;
    color: #7a7a7a;
    font-size: 1.17rem;
  }

  ul.veiligheid li {
    padding: 25px 0 25px 0;
    border-top: 2px solid #e5e5e5;
    display: block;
  }

  ul.veiligheid li:first-child {
    border-top: none;
    padding-top: 0;
  }

  ul.veiligheid li h3 {
    color: #3d3d3d;
    padding: 0;
    margin: 0;
  }

ul.unieke-eigenschappen {
  padding: 0;
  margin: 0;
  list-style-type: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;

  -me-justify-content: space-between;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

  ul.unieke-eigenschappen li {
    display: block;
    width: 90%;
    box-sizing: border-box;
    padding: 22px 0;
    border-top: 1px solid #e5e5e5;
  }

  ul.unieke-eigenschappen li:first-child {
    border-top: none;
  }

.links-blok div.item-list > div {
  box-sizing: border-box;
  color: #71be44;
  padding: 43px 30px;
}

  .links-blok div.item-list > div a {
    text-decoration: none;
  }

    .links-blok > div a:hover {
      text-decoration: underline;
    }

    .links-blok > div a h2::after {
      content: ' ';
      background-image: url(../images/groenpijltje_rechts.png);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
      width: 12px;
      height: 12px;
      display: inline-block;
      margin: 0 0 0 10px;
    }

  .links-blok div.item-list > div h2 {
    letter-spacing: 0.02em;
  }

  .links-blok div.item-list > div h3 {
    font-size: 2.25rem;
    font-weight: 200;
    margin: 1rem 0 1rem 0;
    line-height: 1.2;
    letter-spacing: 0.02em;
  }

  .links-blok div.item-list > div > div.icoon {
    font-size: 30px;
    color: #000;
  }

  .links-blok div.item-list > div  form.zoek-verkooppunt {
    white-space: nowrap;
  }
    .links-blok div.item-list > div  form.zoek-verkooppunt input[type=text] {
      -webkit-box-shadow: none !important;
      background-image: url(../images/groenpijltje_rechts.png);
      background-position: right 10px center;
      background-repeat: no-repeat;
      background-size: auto 30%;
    }

    .links-blok div.item-list > div  form.zoek-verkooppunt input[type=submit] {
      border: none;
      background: rgba(0,0,0,0);
      color: rgba(0,0,0,0);
      height:  46px;
      width: 30px;
      margin-left: -30px;
      cursor: pointer;
    }

  .links-blok > div div.dichtstbijzijnde-verkooppunt {
    margin-top: 60px;
    color: #c2c2c2;
  }

#actie-banners {
  height: 350px;
}

#actie-banners div.slick-list,
#actie-banners div.slick-slider,
#actie-banners div.slick-track {
  height: 100%;
}

  #actie-banners div.actie-banner {
    position: static;
    background-size: cover;
    background-position: center center;
    overflow: hidden;
  }

    #actie-banners div.actie-banner > div.actie-banner-text {
      min-height: 350px;
      background-color: #f3f1ef;
      box-sizing: border-box;
      padding: 40px 50px 40px 50px;
      text-decoration: none;
    }

    #actie-banners div.actie-banner > div.actie-banner-text > .actie-banner-text-inner > h2 {
      color: #71be44;
      font-size: 3.2rem;
      margin: .5rem 0;
      font-family: 'fira-sans', sans-serif;
      font-weight: bold;
    }

    #actie-banners div.actie-banner > div.actie-banner-text > .actie-banner-text-inner > p {
      font-size: 1.67rem;
      font-family: 'Bree', sans-serif;
    }

    #actie-banners div.actie-banner > div.actie-banner-text > .actie-banner-text-inner a {
      border: 2px solid #000;

    }

      #actie-banners div.actie-banner > div.actie-banner-text > .actie-banner-text-inner a:hover {
        background-color: #71be44;
        color: #fff;
        border: 2px solid #71be44;
      }


#product-groepen div.item-list {
  background-color: #f3f1ef;
}

  #product-groepen div.item-list ul {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0;
    padding: 0 0 90px 0;
    list-style-type: none;
  }

    #product-groepen div.item-list ul li {
      flex-grow: 1;
      flex-basis: 100%;
      background-size: 100% auto;
      background-position: center 0px;
      padding: 127px 20px 0 20px;
      margin-top: 30px;
      margin-bottom: 0px;
      text-align: center;
      box-sizing: border-box;
      background-repeat: no-repeat;
    }

      #product-groepen div.item-list ul li.buitenleven {
        background-image: url(../images/product_buitenleven.png);
        background-size: 100px auto;
        background-position: center 40px;
      }

      #product-groepen div.item-list ul li.garagepoorten {
        background-image: url(../images/product_garagepoorten.png);
        background-size: 100px auto;
        background-position: center 36px;
      }

      #product-groepen div.item-list ul li.rolluiken {
        background-image: url(../images/product_rolluiken.png);
        background-size: 85px auto;
        background-position: center 30px;
      }

      #product-groepen div.item-list ul li.zonwering {
        background-image: url(../images/product_zonwering.png);
        background-size: 85px auto;
        background-position: center 30px;
      }

      #product-groepen div.item-list ul li h4 {
        color: #3f3f40;
      }

      #product-groepen div.item-list ul li p {
        display: none;
      }

      #product-groepen div.item-list ul li a {
        color: #3f3f40;
        text-decoration: none;
        font-size: 1.1rem;
        white-space: nowrap;
        text-transform: lowercase;
        display: inline-block; /* because otherwise the first-letter pseudo class does nothing */
      }

      #product-groepen div.item-list ul li a::first-letter {
        text-transform: uppercase !important;
      }

        #product-groepen div.item-list ul li a::after {
          content: ' ';
          background-image: url(../images/groenpijltje_rechts_producten.png);
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center center;
          width: 12px;
          height: 12px;
          display: inline-block;
          vertical-align: middle;
          margin: 0 0 0 4px;
        }

        #product-groepen div.item-list ul li a:hover {
          text-decoration: underline;
        }


#product-groepen-oplossingen div.item-list ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

#product-groepen-oplossingen div.item-list ul li {
  width: 100%;
  margin: 0;
  padding: 0;
  display: block;
  background-size: cover;
  background-position: center center;
}

#product-groepen-oplossingen div.item-list ul li a {
  color: #fff;
  display: block;
  font-size: 1.5rem;
  transition-duration: 150ms;
  background-color: rgba(0,0,0,0.3);
  text-align: center;
  padding-top: 30%;
  padding-bottom: 30%;
  text-transform: lowercase;
  background-color: rgba(0,0,0,0.10);
  font-family: 'Bree',sans-serif;
}

#product-groepen-oplossingen div.item-list ul li a:hover {
  background-color: rgba(0,0,0,0);
  text-decoration: none;
}

#product-groepen-oplossingen div.item-list ul li a::first-letter {
  text-transform: uppercase !important;
}

section#oplossingen-huis {
  color: #fff;
  background-color: #3d3d3d;
  padding: 30px;
}

section#oplossingen-huis .zoek-icoon {
  font-size: 3rem;
}

section#oplossingen-huis .zoek-icoon::before,
section#oplossingen-huis .zoek-icoon:hover::before {
  background-image: url('../images/icoon_zoeken_wit.svg');
}

section#oplossingen-huis h2,
section#oplossingen-huis h3,
section#oplossingen-huis h4 {
  color: #fff;
}

section#oplossingen-huis h2 {
  font-size: 3.33rem;
}

section#oplossingen-huis ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

section#oplossingen-huis ul li a {
  color: #9d9d9d;
  display: block;
  padding: 25px;
}

section#oplossingen-huis ul li a:hover,
section#oplossingen-huis ul li a.active{
  background-image: url(../images/pijltje_huis.svg);
  background-size: 100% 100%;
  text-decoration: none;
}

section#oplossingen-huis ul li a h3 {
  font-size: 1rem;
  color: #fff;
  margin: 0 0 10px 0;
}

section#oplossingen-huis ul li a h4 {
  font-size: 1rem;
  color: #c0bfbf;
  margin: 0;
  padding: 0;
}

section#oplossingen-huis ul li a p {
  margin: 0;
  padding: 0;
}

/* visible from 992 on */
section#oplossingen-huis #harol-oplossingen-huis {
  display: none;
}

#harol-links div.item-list {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

  #harol-links div.item-list > div.grote-foto,
  #harol-links div.item-list > div.kleur-vlak {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 100%;
    color: #fff;
    position: relative;
    min-height: 300px;
    box-sizing: border-box;
    overflow: hidden;
  }

    #harol-links div.item-list > div.grote-foto::before,
    #harol-links div.item-list > div.kleur-vlak::before {
      content: '';
      display: block;
      float: left;
      padding-top: 83%;
    }

    #harol-links > div.kleur-vlak a {
      padding: 0px 10px 20px 10px;
    }

    #harol-links > div h2 {
      font-size: 1.66rem;
      margin: 1rem 0 1rem 0;
    }

    #harol-links div.item-list > div h3 {
      margin: 1rem 0 1rem 0;
      font-weight: 200;
      font-size: 2.25rem;
    }

    #harol-links div.item-list > div.grote-foto > div.foto-achtergrond {
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
    }

      #harol-links div.item-list > div.grote-foto > div.harol-link-content {
        padding: 70px;
        position: relative;
        z-index: 2;
      }

      #harol-links div.item-list > div.grote-foto a {
        border: 2px solid #ffffff;
        color: #fff;
        background-color: transparent; /*#71be44;*/
      }

        #harol-links div.item-list > div.grote-foto a:hover {
          background: none;
          border-color: #71be44;
					background-color: #71be44;
        }

    #harol-links div.item-list > div.onder-het-harol-dak {
      background-image: url(../images/home_producten_1.png);
    }

    #harol-links div.item-list > div.beter-beleven {
      background-image: url(../images/home_producten_6.png);
    }

    #harol-links div.item-list > div.kleur-vlak {
      background-color: #fff;
    }

    #harol-links div.item-list > div.kleur-vlak > div.foto-achtergrond,
    #harol-links div.item-list > div.grote-foto > div.foto-achtergrond {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      z-index: 1;
      transition-duration: 150ms;
      transition-timing-function: ease-out;
    }

    #harol-links div.item-list > div.kleur-vlak:hover > div.foto-achtergrond,
    #harol-links div.item-list > div.grote-foto:hover > div.foto-achtergrond {
      transform: scale(1.05,1.05);
    }

    #harol-links div.item-list > div.kleur-vlak > div.foto-achtergrond {
      background-size: 100% auto;
      background-position: center bottom;
      background-repeat: no-repeat;
      display: none; /* not until 768px */
    }

      #harol-links div.item-list > div.kleur-vlak > div.harol-link-content {
        padding: 70px 0px 70px 0px;
        background-color: #fff;
        position: relative;
        z-index: 2;
      }

      #harol-links div.item-list > div.kleur-vlak a {
        background-color: #fff;
        text-decoration: none;
        color: #71be44;
        display: block;
        padding: 0px 70px 0px 70px;
      }

        #harol-links div.item-list > div.kleur-vlak a::before {
          content: '';
          float: left;
          padding-top: 25%;
        }

        #harol-links div.item-list > div.kleur-vlak a h2::after {
          content: ' ';
          background-image: url(../images/groenpijltje_rechts.png);
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center center;
          width: 12px;
          height: 12px;
          display: inline-block;
          margin: 0 0 0 10px;
        }

    #harol-links div.item-list > div.garantiekaart {
      background-image: url(../images/home_producten_2.png);
    }

    #harol-links div.item-list > div.harol-projects {
      background-image: url(../images/home_producten_4.png);
    }

    #harol-links div.item-list > div.epb {
      background-image: url(../images/EPB.png);
    }

    #harol-links div.item-list > div.downloads {
      background-image: url(../images/fiches.png);
    }

.inhoud-blok {
  padding-top: 93px;
  padding-bottom: 157px;
  font-size: 1.16rem;
}
	.inhoud-blok a, .webform-submission-form a {
		color: #71be44;
		text-decoration: underline;
	}
	#block-actieengiefooternl .inhoud-blok,
	#block-actieengiefooter .inhoud-blok {
		padding-top: 0px;
	}

.inhoud-blok .harol-highlight {
  font-size: 1.55rem;
}

/* Blog nieuw design */

.blog-artikel-nieuw-design .inhoud-blok {
  font-size: 1.5rem;
  color: #3d3d3d;
  line-height: 2;
}

.blog-artikel-nieuw-design .inhoud-blok .harol-highlight {
  font-size: inherit;
}

.blog-artikel-nieuw-design .inhoud-blok p {
  clear: both;
  width: 70%;
  margin: 0px auto;
}

.blog-artikel-nieuw-design .inhoud-blok p.contains-aligned-images,
.blog-artikel-nieuw-design .inhoud-blok p.knoppen {
  width: 100%;
}

.blog-artikel-nieuw-design .inhoud-blok p.contains-aligned-images {
  margin-top: 20px;
}

.blog-artikel-nieuw-design .inhoud-blok img.align-left {
  margin: 10px 10% 10px 0;
}

.blog-artikel-nieuw-design .inhoud-blok img.align-right {
  margin: 10px 0 10px 10%;
}

.blog-artikel-nieuw-design .inhoud-blok img.align-left ~ img.align-right {
  margin-left: 0;
}

.blog-artikel-nieuw-design .inhoud-blok img.full-width {
  width: 100%;
  max-width: none !important;
}

.blog-artikel-nieuw-design .inhoud-blok h3 {
  font-size: 3.83rem;
  font-weight: bold;
  font-family: 'Bree',sans-serif;
  line-height: 1.3;
}

/* formulier opmaak */

.page-node-type-aanvraag-formulier .inhoud-blok {
	padding-bottom: 23px;
}

.page-node-type-actieformulier .inhoud-blok,
.page-node-type-actiepagina .inhoud-blok
{
	padding-bottom: 0px;
}
.inhoud-blok,
.blog-inhoud-blok {
  padding-left: 30px;
  padding-right: 30px;
}

.inhoud-blok a {
  color: #71be44;
}

.inhoud-blok .license-icoon {
  font-size: 45px;
}

.inhoud-blok img.align-left {
  float: left;
  width: 45%;
  margin: 20px 5% 20px 0;
}

.inhoud-blok img.align-right {
  float: right;
  width: 45%;
  margin: 20px 0 20px 5%;
}

.inhoud-blok img.align-center {
  float: none;
  display: block;
  margin: 20px auto;
  max-width: 100% !important;
  height: auto !important;
}

.inhoud-blok img {
  max-width: 100% !important;
  height: auto;
}

.inhoud-blok table {
  border-collapse: collapse;
}

.inhoud-blok table td,
.inhoud-blok table th
{
  padding: 7px;
  font-size: 1.2rem;
  border: none;
}

.inhoud-blok table[border='1'] td,
.inhoud-blok table[border='1'] th
{
  border: 1px solid #71be44;
}

.inhoud-blok table th {
  font-weight: bold;
}

.flexrij-3-kol {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-justify-content: space-between;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

  .flexrij-3-kol > div {
    width: calc((100% - (45px * 2)) / 3);
    min-width: 200px;
  }

.location-icoon,
.inhoud-blok .hangslot-icoon {
  font-size: 45px;
}

#intro-beeld .inhoud-blok {
  padding-top: 0px;
  padding-bottom: 156px;
}

.inhoud-blok h2 {
  margin-top: 35px;
  margin-bottom: 73.5px;
  font-size: 3.83rem;
  font-weight: bold;
}

.inhoud-blok h3 {
  color: #3d3d3d;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.5;
  margin-top: 25px;
  margin-bottom: 19px;
}

.inhoud-blok table.info-groen {
  width: 100%;
  font-weight: bold;
  font-size: 1rem;
}

  .inhoud-blok table.info-groen td:first-child {
    border-left: 1px solid #71be44;
  }

  .inhoud-blok table.info-groen tr:first-child td,
  .inhoud-blok table.info-groen tr:first-child th {
    border-top: 1px solid #71be44;
  }

  .inhoud-blok table.info-groen td {
    border-bottom: 1px solid #71be44;
    border-right: 1px solid #71be44;
    padding: 2px;
  }

.inhoud-blok table.info-grijs {
  width: 100%;
  font-weight: bold;
  font-size: 1rem;
  border-collapse: collapse;
  border: none;
}
  .inhoud-blok div.responsive-by-column {
  display: grid;
  }

  .inhoud-blok div.responsive-by-column > div {
    padding: 10px;
    font-size: 1rem;
  }

  .inhoud-blok div.responsive-by-column > div.first-row{
    color: #3d3d3d;
    font-weight: bold;
  }

.inhoud-blok table.info-grijs tbody {
  width: 100%;
}

  .inhoud-blok table.info-grijs tr td,
  .inhoud-blok table.info-grijs tr th {
    border: none;
    border-left: 1px solid #cdd1d6;
  }

  .inhoud-blok table.info-grijs tr th {
    border-bottom: 1px solid #cdd1d6;
    text-align: left;
    font-weight: bold;
  }

  .inhoud-blok table.info-grijs tr td {
    text-align: left;
    font-weight: normal;
  }

  .inhoud-blok table.info-grijs tr td:first-child,
  .inhoud-blok table.info-grijs tr th:first-child {
    border-left: none;
  }

  .inhoud-blok table.info-grijs th {
    color: #3d3d3d;
    padding: 10px;
    font-weight: bold;
  }

  .inhoud-blok table.info-grijs td {
    color: #7a7a7a;
    padding: 10px;
  }

  .inhoud-blok .knoppen {
    text-align: center;
    padding-top: 58px;
    margin-top: calc(42px - 25px);
    border-top: 1px solid #e5e5e5;
  }

  .inhoud-blok .knoppen a.cta-knop {
    display: block;
    width: 80%;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
  }


/* FORM */
.uitklap-hoofd,
div.webform-confirmation {
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 30px;
}
.uitklap-hoofd.uitklap-hoofd-no-padding-bottom {
	padding-bottom: 0px;
}
.uitklap-hoofd::after,
div.webform-confirmation::after {
  content: '';
  display: block;
  clear: both;
  height: 0px;
  visibility: hidden;
}

div.webform-confirmation {
  font-size: 1.5rem;
  font-family: "Bree",sans-serif;
  color: #3d3d3d;
}

form.grijs {
  background-color: #f3f1ef;
}

.gegevens-2-kolom,
#pagina-kader .harol-form
.gegevens-2-kolom div.veld.multi {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-justify-content: space-between;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

#pagina-kader .harol-form div.veld {
  float: none;
  margin-right: 0px;
  width: auto;
  max-width: 330px;
}

.veld-submit {
  text-align: center;
  width: 100%;
  margin-top: 45px;
}

#pagina-kader .harol-form .gegevens-2-kolom div.veld {
  width: 100%;
  max-width: 999px;
  min-width: 200px;
}

  #pagina-kader .harol-form .gegevens-2-kolom div.veld.multi input {
    width: calc((100% / 2) - 15px);
    max-width: 999px;
  }

#pagina-kader .harol-form fieldset {
  border: none;
  margin: 0px;
  padding: 0px;
}

  #pagina-kader .harol-form fieldset legend,
  #pagina-kader .harol-form .form-item-schiftingsvraag label{
    color: #3d3d3d;
    font-size: 1.5rem;
    margin-bottom: 20px;
		padding-top: 20px;
    width: 100%;
  }
	#pagina-kader .harol-form fieldset.hide-legend legend{
		padding-top: 0px;
	}
  #pagina-kader .harol-form div.sectie-hoofding{
    color: #3d3d3d;
    font-size: 1.5rem;
    margin-bottom: 0px;
		padding-top: 20px;
    width: 100%;
  }
	#edit-klantnummer_counter,
	#edit-uniekecode_counter	{
		display: none;
	}
	#pagina-kader .harol-form .js-form-type-number label {
    color: #3d3d3d;
    font-size: 1.5rem;
    margin-bottom: 20px;
		padding-top: 20px;
    width: 100%;
		display: block;
  }
	#pagina-kader .harol-form .js-form-type-number.normal_label label {
    color: #3d3d3d;
    font-size: 12px;
    margin-bottom: 0px;
		padding-top: 0px;
    width: auto;
		display: block;
		margin-bottom: 10px;
		color: #7a7a7a;
  }
	#pagina-kader .harol-form .js-form-type-number input[type=number] {
		width: calc(50% - 10px);
		margin-top: 0px;
	}
  #pagina-kader .harol-form .js-form-type-number label
  #pagina-kader .harol-form .form-item-schiftingsvraag {

  }

  #pagina-kader .harol-form .form-info {
    color: #3d3d3d;
    font-size: 1.5rem;
    margin-bottom: 20px;
		clear: left;
  }
	#pagina-kader .harol-form .form-info.kleiner {
    font-size: 1.1rem;
		margin-left: 20px;
  }
	#pagina-kader .harol-form .form-info-subtle {
    color: #a7a7a7;
    font-size: 1.1rem;
    margin-bottom: 20px;
		clear: left;
  }
	#pagina-kader .harol-form .form-info-subtle .zwart {
        color: #000;
    }
  #pagina-kader .harol-form fieldset.harol-product-field legend {
    font-weight: bold;
  }

  #forms-step-1 fieldset.harol-product-field {
    margin-top: 20px;
    margin-bottom: 6px;
  }

  #forms-step-1 fieldset.harol-product-field legend {
    cursor: pointer;
    display: block;
    box-sizing: border-box;
    width: 100%;
    background-image: url(../images/uitklap_pijltje.png);
    background-repeat: no-repeat;
    background-position: right 5px center;
  }

  #forms-step-1 fieldset.harol-product-field legend.expanded {
    background-image: url(../images/inklap_pijltje.png);
  }

  #forms-step-1 fieldset.harol-product-field legend span.selection-count {
    font-weight: normal;
  }

#pagina-kader .harol-form .uitklap-info .stap {
  color: #7a7a7a;
  font-family: "Bree", sans-serif;
  font-size: 1rem;
  margin-bottom: 15px;
}

#pagina-kader .harol-form .uitklap-info .onderdeel-naam {
  color: #3d3d3d;
  /*font-family: "Bree", sans-serif;*/
	font-family: "fira-sans",sans-serif;
  font-size: 1.5rem;
  line-height: 1.5;
  margin-top: 15px;
}

#pagina-kader .harol-form p.forms-commentaar  {
  font-size: 1.125rem;
}

#pagina-kader .harol-form .vraag {
  margin-top: 35px;
  color: #3d3d3d;
}

#pagina-kader .harol-form .vraag::after {
  clear: both;
  content: "";
  display: table;
}

#pagina-kader .harol-form .uitklap-info + .vraag {
  margin-top: 20px;
}

#pagina-kader .harol-form .vraag.ingeklapt {
  border-bottom: 1px solid #f3f1ef;
}

#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 section#forms-step-2 fieldset .form-item,
#pagina-kader .harol-form section#forms-step-3 fieldset .form-item,
#pagina-kader .harol-form section#forms-step-4 fieldset .form-item {
  float: left;
  width: 100%;
  margin-right: 0px;
}

#pagina-kader .harol-form section#forms-step-2 .form-item.js-form-type-webform-document-file,
#pagina-kader .harol-form section#forms-step-3 .form-item.js-form-type-webform-document-file,
#pagina-kader .harol-form section#forms-step-4 .form-item.js-form-type-webform-document-file {
  margin-top: 10px;
}

#pagina-kader .harol-form section#forms-step-1 fieldset .form-item:nth-child(2n) {
  margin-right: 0px;
}

#pagina-kader .harol-form .notitie {
  color: #7a7a7a;
  font-size: 1.17rem;
  margin-top: 30px;
}

#pagina-kader .harol-form div.form-managed-file div.description {
  display: none;
}

.vraag-flex-antwoorden div {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-justify-content: space-between;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

#pagina-kader .harol-form div.js-form-type-radio.form-item-mijn-project-kadert-binnen- {
  float: none;
  width: 230px;
  margin-right: 10px;
}

#pagina-kader .harol-form .js-form-type-checkbox input[type=checkbox],
#pagina-kader .harol-form .js-form-type-radio input[type=radio] {
  display: none;
}
  /*default 'custom' radiobuttons / checkbox */
  #pagina-kader .harol-form .js-form-type-radio input[type=radio] + label {
    background: #f7f7f7 url('../images/forms/radio.png') no-repeat right 18px center;
    background-size: 19px 19px;
    display: block;
    padding: 18px 30px;
    color: #7a7a7a;
    font-size: 1.33rem;
    margin-bottom: 10px;
  }

  #pagina-kader .harol-form .js-form-type-radio input[type=radio]:checked + label {
    background: #3d3d3d url('../images/forms/radio_check.png') no-repeat right 18px center;
    background-size: 19px 19px;
    color: #ffffff;
    transition-duration: 150ms;
  }

  #pagina-kader .harol-form .js-form-type-checkbox input[type=checkbox] + label {
    background: #f7f7f7 url('../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;
  }

  #pagina-kader .harol-form .js-form-type-checkbox input[type=checkbox]:checked + label {
    background: #3d3d3d url('../images/forms/checkbox_check.png') no-repeat right 18px center;
    background-size: 19px 19px;
    color: #ffffff;
    transition-duration: 150ms;
  }
  /* images as radiobuttons */
  /*
  #pagina-kader .harol-form div.js-form-type-radio.form-item-mijn-project-kadert-binnen- input[type=radio] + label {
    color: #fff;
    text-align: center;
    padding-top: 105px;
    float: left;
    width: 230px;
    height: 230px;
    vertical-align: middle;
    cursor: pointer;
    background-size: 230px 230px;
    box-sizing: border-box;
    font-size: 1.67rem;
    margin-bottom: 10px;
  }

  #pagina-kader .harol-form div.js-form-type-radio.form-item-mijn-project-kadert-binnen- input[type=radio]:checked + label {
    padding-top: 99px;
    border: 6px solid #3d3d3d;
  }
  */

#pagina-kader .harol-form div.js-form-type-radio.form-item-mijn-project-kadert-binnen- {
  float: left;
  width: 30%;
  margin-right: 3%;
}

  #pagina-kader .harol-form div.js-form-type-radio.form-item-mijn-project-kadert-binnen-:nth-child(3n) {
    margin-right: 0px;
  }

/*
** CAREFUL: TWICE THE SAME VALUES FOR IE BALKING ON THE -webkit- syntax
*/
.login form input[type=text],
.login form input[type=password],
form.zoek-verkooppunt input[type=text],
#pagina-kader .harol-form input[type=text],
#pagina-kader .harol-form input[type=number],
#pagina-kader .harol-form input[type=date],
#pagina-kader .harol-form input[type=email],
#pagina-kader .harol-form input[type=password],
#pagina-kader .harol-form select,
#pagina-kader .harol-form textarea {
  -webkit-text-fill-color: #3d3d3d;
  -webkit-box-shadow: 0 0 0px 1000px #f3f1ef inset;
  background-color: #f3f1ef !important;
  font-family: "fira-sans", sans-serif;
  font-size: 1.17rem;
  border: 0px;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 13px 17px;
  margin: 10px 0 15px 0;
  width: 100%;
}

#pagina-kader .harol-form input:-webkit-autofill,
#pagina-kader .harol-form textarea:-webkit-autofill,
#pagina-kader .harol-form select:-webkit-autofill {
  -webkit-text-fill-color: #3d3d3d;
  -webkit-box-shadow: 0 0 0px 1000px #f3f1ef inset;
  background-color: #f3f1ef !important;
  font-family: "fira-sans", sans-serif;
  font-size: 1.17rem;
  border: 0px;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 13px 17px;
  margin: 10px 0 15px 0;
  width: 100%;
}

#pagina-kader .harol-form select {
  -webkit-box-shadow: -13px 0px 0px 0px #f3f1ef inset;
  background-image: url(../images/groenpijltje_onder.png);
  background-repeat: no-repeat;
  background-position: right 12px center;
}

#pagina-kader .harol-form select option[disabled] {
  display: none;
}

#pagina-kader .harol-form select::-ms-expand {
  display: none;
}


/*
** CAREFUL: TWICE THE SAME VALUES FOR IE BALKING ON THE -webkit- syntax
*/
.login form input[type=text],
.login form input[type=password],
form.zoek-verkooppunt input[type=text],
#pagina-kader .harol-form input[type=text],
#pagina-kader .harol-form input[type=number],
#pagina-kader .harol-form input[type=date],
#pagina-kader .harol-form input[type=email],
#pagina-kader .harol-form input[type=password],
#pagina-kader .harol-form select{
	height: 46px;
}
#pagina-kader .harol-form input:-webkit-autofill,
#pagina-kader .harol-form select:-webkit-autofill {
	height: 46px;
}

.login form input[type=text].custom_invalid,
.login form input[type=password].custom_invalid,
form.zoek-verkooppunt input[type=text].custom_invalid,
#pagina-kader .harol-form input[type=text].custom_invalid,
#pagina-kader .harol-form input[type=date].custom_invalid,
#pagina-kader .harol-form input[type=email].custom_invalid,
#pagina-kader .harol-form input[type=password].custom_invalid,
#pagina-kader .harol-form select.custom_invalid,
#pagina-kader .harol-form textarea.custom_invalid,
#pagina-kader .harol-form input.custom_invalid,
.login form input[type=text].error,
.login form input[type=password].error,
form.zoek-verkooppunt input[type=text].error,
#pagina-kader .harol-form input[type=text].error,
#pagina-kader .harol-form input[type=date].error,
#pagina-kader .harol-form input[type=email].error,
#pagina-kader .harol-form input[type=password].error,
#pagina-kader .harol-form select.error,
#pagina-kader .harol-form textarea.error,
#pagina-kader .harol-form input.error,
#pagina-kader .harol-form .js-form-type-radio input.custom_invalid.custom_invalid+label,
#pagina-kader .harol-form .js-form-type-checkbox input.custom_invalid.custom_invalid+label {
	background-color: #fae6e8 !important;
	-webkit-box-shadow: 0 0 0px 1000px #fae6e8 inset;
}

#pagina-kader .harol-form .form-item-geboortedatum label {
	visibility: visible;
}

#pagina-kader .harol-form div.js-form-type-textarea label,
#pagina-kader .harol-form div.form-item-bouwplannen label,
#pagina-kader .harol-form div.form-item-upload-resume label,
#pagina-kader .harol-form div.form-item-upload-motivatiebrief label {
  color: #3d3d3d;
  font-size: 1.5rem;
  margin: 10px 0 20px 0;
}

::-webkit-input-placeholder {
  color: #535353;
  -webkit-text-fill-color: #535353;
}

:-moz-placeholder { /* Firefox 18- */
  color: #535353;
}

::-moz-placeholder { /* Firefox 19+ */
  color: #535353;
}

:-ms-input-placeholder {
  color: #535353;
}

.login form input[type=submit],
#pagina-kader .harol-form input[type=submit] {
  background-color: transparent;
  border: 2px solid #000;
  color: #000;
  height: 42px;
  box-sizing: border-box;
  display: inline-block;
  border-radius: 21px;
  text-transform: uppercase;
  line-height: 40px;
  text-decoration: none;
  padding: 0 20px;
  font-size: 1.125rem;
  letter-spacing: 1px;
  font-weight: bold;
  transition-duration: 150ms;
  margin: 15px 0px;
  cursor: pointer;
}

  .login form input[type=submit]:hover,
  #pagina-kader .harol-form input[type=submit]:hover {
    background-color: #71be44;
    border-color: #71be44;
    color: #fff;
  }

  .harol-form section~#edit-actions,
	.harol-form section~#edit-actions--2 {
    margin-top: -25px;
    padding-bottom: 70px;
      text-align: center;
  }

  div.dealer-locator-resultaten {
    font-size: 1.2rem;
    clear: both;
    padding: 20px 0;
  }

  span.harol-specialist-icoon {
    display: inline-block;
    background-image: url(../images/Icoontje_Specialist_groen.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 1.4em;
    height: 1.4em;
    vertical-align: bottom;
    margin-left: 8px;
  }

  #dealer-locator-kaartje {
    width: 100%;
    height: 300px;
  }

  ul.verdeler-producten {
    padding: 0;
    margin: 10px 0;
    list-style-type: none;
  }

  ul.verdeler-producten li::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    margin: 0 7px 0 0;
  }
  /*zonwering*/
  ul.verdeler-producten li.verdeler-product-1::before {
    background-color: #d55d05;
  }
  /*buitenleven*/
  ul.verdeler-producten li.verdeler-product-2::before {
    background-color: #004d87;
  }
  /*rolluiken*/
  ul.verdeler-producten li.verdeler-product-3::before {
    background-color: #862662;
  }
  /*mysterie!*/
  ul.verdeler-producten li.verdeler-product-4::before {
    background-color: #a71a17;
  }

/*flexbox - blokken verdeeld over 2 kolommen (met grijze lijn tussen rijen) */
.inhoud-blok .flexbox-rij {
  color: #7a7a7a;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-justify-content: space-between;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.text-sfeerbeeld .flexbox-rij {
  color: #fff;
}

.inhoud-blok .flexbox-rij > div {
  border-top: 2px solid #e5e5e5;
  padding-top: 25px;
  padding-bottom: 25px;
  width: 100%;
  box-sizing: border-box;
}

  .inhoud-blok .flexbox-rij > div:first-child,
  .inhoud-blok .flexbox-rij > div:nth-child(2) {
    border: none;
    padding-top: 0px;
  }

  .inhoud-blok .flexbox-rij > div:nth-child(2) {
      border-top: 2px solid transparent;
      padding-top: 25px;
      padding-bottom: 25px;
      box-sizing: border-box;
    }

  .inhoud-blok .flexbox-rij > div h3:first-child {
    padding: 0px;
    margin: 0px;
  }

  .inhoud-blok .flexbox-rij > div p:last-child {
    padding-bottom: 0px;
    margin-bottom: 0px;
  }

    .inhoud-blok ul.voordelen {
      padding: 0;
      margin: 0;
      list-style-type: none;
    }

      .inhoud-blok ul.voordelen li {
        border-top: 2px solid #e5e5e5;
        padding-top: 25px;
        padding-bottom: 25px;
        font-size: 1.17rem;
      }

        .inhoud-blok ul.voordelen li:first-child {
          border: none;
          padding-top: 0px;
        }

        .inhoud-blok ul.voordelen li h3:first-child {
          padding: 0px;
          margin: 0px;
        }

        .inhoud-blok ul.voordelen li p:last-child {
          padding-bottom: 0px;
          margin-bottom: 0px;
        }

.kruimelpad {
  padding-top: 76px;
  text-shadow: rgba(0,0,0,0.8) 1px 1px 4px;
}

  .kruimelpad ol {
    list-style: none;
    background-image: none;
    margin: 0;
    padding: 0;
  }

    .kruimelpad ol li {
      background-image: none;
      display: inline-block;
      margin: 0;
      padding: 0;
      font-size: 1rem;
      color: #fff;
      font-family: 'Bree', sans-serif;
    }

      .kruimelpad ol li a {
        color: #fff;
        text-decoration: none;
      }

      .kruimelpad ol li a:hover {
        text-decoration: underline;
      }

      .kruimelpad ol li:before {
        content: "/";
        color: #6c6c6c;
        font-family: 'Bree', sans-serif;
        font-size: 1rem;
        display: inline-block;
        padding: 0px 4px;
      }

      .kruimelpad ol li:first-child:before {
        content: "";
        display: none;
      }

.hoofd-titel {
  color: #fff;
  margin-top: 144px;
}

  .hoofd-titel h1 {
    color: #fff;
    font-size: 1.66rem;
    line-height: 1.5;
    margin: 0px;
  }

  .hoofd-titel h2 {
    color: #fff;
    font-size: 3.83rem;
    font-weight: bold;
    line-height: 1.1;
    margin: 0px;
  }

  .hoofd-titel a.link-knop {
    color: #fff;
    border: 2px solid #71be44;
    background-color: #71be44;
    margin: 20px 20px 0 0;
    text-decoration: none;
    transition-duration: 150ms;
  }

    .hoofd-titel a.link-knop+a.link-knop {
       /* margin-left: 20px;*/
    }

  .hoofd-titel a.link-knop:hover,
  .hoofd-titel a.link-knop:active
  {
    border-color: #fff;
    background-color: rgba(113,190,68,0);
  }

section#submenu {
  background-color: #f3f1ef;
  padding: 30px 33px;
  border-top: 1px solid #fff;
}


section#menu-producten {
  background-color: #f3f1ef;
  padding: 30px 33px;
  border-bottom: 1px solid #fff;
}

  section#menu-producten ul, section#submenu ul {
    list-style: none;
    background-image: none;
    margin: 0px;
    padding: 0px;
  }

    section#menu-producten ul li,
    section#submenu ul li {
      display: block;
      margin: 0px;
      padding: 15px 0 15px 0;
    }

      section#menu-producten ul li:first-child, section#submenu ul li:first-child {
        padding-left: 0px;
      }

      section#menu-producten ul li a, section#submenu ul li a {
        border-bottom: 2px solid rgba(113, 190, 68, 0);
        color: #3d3d3d;
        font-family: 'Bree', sans-serif;
        font-size: 1.17rem;
        font-weight: bold;
        text-decoration: none;
        transition-duration: 150ms;
      }

        section#menu-producten ul li a:hover, section#submenu ul li a:hover {
          border-bottom-color: rgba(113, 190, 68, 1);
        }

section#product-intro {
  background-color: #f3f1ef;
  padding-top: 80px;
  padding-bottom: 55px;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 1.5rem;
  line-height: 1.8;
  text-align: center;
}


  section#product-intro br {
    display: none;
  }

  #product-intro .cta-knop {
    margin-bottom: 20px;
  }

.cta-knop,
.inhoud-blok a.cta-knop {
  border: 2px solid #000;
  color: #000;
  background-color: transparent;
  /*height: 42px;*/
  box-sizing: border-box;
  display: inline-block;
  border-radius: 21px;
  text-transform: uppercase;
  line-height: 1.5;
  text-decoration: none;
  padding: 5px 18px;
  font-size: 1.125rem;
  letter-spacing: 1px;
  font-weight: bold;
  transition-duration: 150ms;
}

.cta-knop:hover,
.inhoud-blok a.cta-knop:hover {
  border: 2px solid #71be44;
  color: #fff;
  background: #71be44;
  text-decoration: none;
}

.cta-knop + .cta-knop {
  margin-left: 5px;
}

div.product-slider div.product-slide {
  background-size: cover;
  background-color: #3e382e;
  color: #fff;
  min-height: calc((1vh * 11) + 500px);
}

/* none image list we don't want in the list' */
section.image-slider>*{
  display: none;
}

section.image-slider>ul,
section.image-slider>ol,
div.product-slider>div,
section.blog-image-slider>ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  display: block;
  position: relative;
}

section.image-slider ul li.slick-slide
{
  padding: 0;
  margin: 0;
  position: relative;
  display: block;
  height: 80vh;
  /* otherwise there's a gap */
  min-height: 640px;
  overflow: hidden;
}

section.image-slider ul li.slick-slide {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

section.image-slider .slick-dotted.slick-slider,
div.product-slider>div .slick-dotted.slick-slider,
section.blog-image-slider .slick-dotted.slick-slider
{
  margin-bottom: 0;
}

section.image-slider ul li img {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
}

#intro-beeld>div button.slick-arrow,
section.image-slider ul button.slick-arrow,
section.blog-image-slider button.slick-arrow,
div.product-slider>div button.slick-arrow,
#actie-banners button.slick-arrow {
  position: absolute;
  z-index: 9;
  top: 50%;
  transform: translateY(-50%);
  background-color: #fff;
  width: 50px;
  height: 150px;
  background-position: center center;
  background-repeat: no-repeat;
  color: rgba(0,0,0,0);
  transition-duration: 150ms;
  visibility: hidden;
}

#intro-beeld>div button.slick-arrow:hover,
section.image-slider ul button.slick-arrow:hover,
section.blog-image-slider button.slick-arrow:hover,
div.product-slider>div button.slick-arrow:hover,
#actie-banners button.slick-arrow:hover {
  background-color: rgba(255,255,255,.4);
}

#intro-beeld>div button.slick-arrow::before,
section.image-slider ul button.slick-arrow::before,
section.blog-image-slider button.slick-arrow::before,
div.product-slider>div button.slick-arrow::before,
#actie-banners button.slick-arrow::before {
  color: rgba(0,0,0,0);
}

#intro-beeld>div button.slick-prev,
section.image-slider ul button.slick-prev,
section.blog-image-slider button.slick-prev,
div.product-slider>div button.slick-prev,
#actie-banners button.slick-prev {
  left: 0;
  background-image: url(../images/zwartpijltje_links.png);
}

#intro-beeld>div button.slick-next,
section.image-slider ul button.slick-next,
section.blog-image-slider button.slick-next,
div.product-slider>div button.slick-next,
#actie-banners button.slick-next  {
  right: 0;
  background-image: url(../images/zwartpijltje_rechts.png);
}

#intro-beeld>div ul.slick-dots,
section.image-slider ul ul.slick-dots,
section.blog-image-slider ul.slick-dots,
div.product-slider>div ul.slick-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;
  height: 20px;
  border-radius: 10px;
  box-sizing: border-box;
  background-color: rgba(0,0,0,0.7);
  width: auto;
}

#intro-beeld>div ul.slick-dots {
  bottom: 60px;
}

#intro-beeld>div ul.slick-dots li,
section.image-slider ul ul.slick-dots li,
section.blog-image-slider ul.slick-dots li,
div.product-slider>div ul.slick-dots li {
  padding: initial;
  margin: initial;
  position: static;
  display: inline-block;
  height: auto;
  overflow: hidden;
  width: 10px;
  height: 10px;
  color: #fff;
  line-height: 10px;
  text-align: center;
  background-color: #fff;
  border-radius: 5px;
  box-sizing: border-box;
  margin: 5px;
}

#intro-beeld>div ul.slick-dots li button,
section.image-slider ul ul.slick-dots li button,
section.blog-image-slider ul.slick-dots li button,
div.product-slider>div ul.slick-dots li button {
  width: 100%;
  height: 100%;
  line-height: 10px;
  padding: 0;
}

#intro-beeld>div ul.slick-dots li button::before,
section.image-slider ul ul.slick-dots li button::before,
section.blog-image-slider ul.slick-dots li button::before,
div.product-slider>div ul.slick-dots li button::before {
  position: static;
  color: rgba(0,0,0,0);
  width: 10px;
  height: 10px;
  display: block;
  line-height: 10px;
  margin: 0;
}

#intro-beeld>div ul.slick-dots li.slick-active button::before,
section.image-slider ul ul.slick-dots li.slick-active button::before,
section.blog-image-slider ul.slick-dots li.slick-active button::before,
div.product-slider>div ul.slick-dots li.slick-active button::before {
  color: rgba(0,0,0,1);
}

footer#links-footer {
  background-color: #f3f1ef;
  margin: 0 auto;
  padding: 40px 20px;
}

footer#links-footer .zoek-een-verkooppunt a {
  text-decoration: underline;
}

footer#links-footer a:hover {
  color: #c2c2c2;
}

  footer#links-footer div.zoek-een-verkooppunt {
    padding: 10px;
    text-align: center;
  }

  footer#links-footer div.zoek-een-verkooppunt div.land {
    font-size: 1.33rem;
  }

  footer#links-footer div.zoek-een-verkooppunt h3 {
    font-size: .8rem;
    font-weight: 200;
  }

  footer#links-footer>nav ul {
    list-style-type: none;
    margin-top: -1rem;
    padding: 10px;
    text-align: center;
  }

    footer#links-footer>nav ul li {
      display: block;
      padding: 0;
      margin: 0;
      padding-top: 1rem;
    }

      footer#links-footer>nav ul li a {
        font-size: 1.33rem;
        text-decoration: none;
        font-family: 'Bree', sans-serif;
      }

  footer#links-footer div.contact {
    padding: 10px;
    text-align: center;
  }

  footer#links-footer div.contact a.telefoon,
  footer#links-footer div.contact a.e-mail {
    display: inline-block;
    width: 21px;
    height: 21px;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    margin: 3px;
  }

  footer#links-footer div.contact a.telefoon {
    background-image: url(../images/icoon_tel_grijs.svg);
  }

  footer#links-footer div.contact a.telefoon:hover {
    background-image: url(../images/icoon_tel_groen.svg);
  }

  footer#links-footer div.contact a.e-mail {
    background-image: url(../images/icoon_email_grijs.svg);
  }
  footer#links-footer div.contact a.e-mail:hover {
    background-image: url(../images/icoon_email_groen.svg);
  }

footer#info-footer {
  background-color: #f3f1ef;
  text-align: center;
  padding-bottom: 50px;
}

  footer#info-footer div.sociale-media a {
    display: inline-block;
    width: 21px;
    height: 21px;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    margin: 3px 3px 15px 3px;
    transition-duration: 200ms;
  }

    footer#info-footer div.sociale-media a.pinterest {
      background-image: url(../images/icoon_pinterest.png);
    }

    footer#info-footer div.sociale-media a.facebook {
      background-image: url(../images/icoon_facebook.png);
    }

    footer#info-footer div.sociale-media a.linkedin {
      background-image: url(../images/icoon_linkedin.png);
    }

    footer#info-footer div.sociale-media a.twitter {
      background-image: url(../images/icoon_twitter.png);
    }

    footer#info-footer div.sociale-media a.pinterest:hover {
      background-image: url(../images/icoon_pinterest_hover.png);
    }

    footer#info-footer div.sociale-media a.facebook:hover {
      background-image: url(../images/icoon_facebook_hover.png);
    }

    footer#info-footer div.sociale-media a.linkedin:hover {
      background-image: url(../images/icoon_linkedin_hover.png);
    }

    footer#info-footer div.sociale-media a.twitter:hover {
      background-image: url(../images/icoon_twitter_hover.png);
    }

  footer#links-footer div.zoek-een-verkooppunt {
    padding: 10px;
    text-align: center;
  }

  footer#links-footer>nav ul {
    padding: 10px;
    text-align: center;
  }

  footer#links-footer div.contact {
    padding: 10px;
    text-align: center;
  }

  .inhoud-blok {
    padding-left: 30px;
    padding-right: 30px;
  }

  #intro-beeld .inhoud-blok h2 {
    font-size: 4.42rem;
  }

	section.text-sfeerbeeld-klein .promotie-bol img {
		height: 118px;
		width: auto;
		position: absolute;
		right: 20px;
		top: 0px;
	}

	section.text-sfeerbeeld-klein .promotie-bol.actiepagina span.promotie-bol-tekst {
		position: relative;
		z-index: 3;
		display: block;
		font-family: 'fira-sans',sans-serif;
		font-size: 1.5rem;
	}

	section.text-sfeerbeeld-klein .promotie-bol {
    left: auto;
    top: auto;
    bottom: -85px;
    right: 0px;
  }

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {

  .inhoud-blok .knoppen {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-justify-content: space-between;
    -webkit-justify-content: space-between;
    justify-content: space-between;
  }

  #product-intro .knoppen {
    margin-top: 50px;
  }

  .inhoud-blok .knoppen a.cta-knop {
    display: inline-block;
    width: auto;
  }

  footer#links-footer {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;

    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    /*max-height: 500px;*/
  }

    footer#links-footer #block-zoekeenverkooppuntnlbe
    {
      flex-grow: 1;
      flex-order: 1;
      width: 50%;
      order: 2;
      box-sizing: border-box;
    }

    footer#links-footer div.zoek-een-verkooppunt {
      text-align: left;
    }

    footer#links-footer #block-footermenunlbe {
      flex-grow: 2;
      flex-order: 3;
      order: 1;
      width: 50%;
      box-sizing: border-box;
      margin: 0;
      text-align: left;
      height: 100%;
    }

    footer#links-footer #block-footermenunlbe > ul {
      height: 100%;
      box-sizing: border-box;
      text-align: left;
    }

    footer#links-footer #block-contactnlbe {
      flex-grow: 1;
      flex-order: 2;
      width: 50%;
      order: 3;
      box-sizing: border-box;
    }

    footer#links-footer div.contact{
      text-align: left;
    }

      footer#links-footer div.contact h4 {
        margin-top: 0;
      }

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
	.cta-knop,
	.inhoud-blok a.cta-knop {
		height: 42px;
		padding: 0 18px;
		line-height: 40px;
	}

  section#product-intro {
    padding-left: calc((100vw - 740px) / 2);
    padding-right: calc((100vw - 740px) / 2);
  }

    section#product-intro br {
      display: block;
    }

  .cta-knop + .cta-knop {
    margin-left: 28px;
  }

  section#menu-producten ul li,
  section#submenu ul li {
    display: inline-block;
    margin: 0px;
    padding: 0px 0px 0px 50px;
  }

  table.mobiel-seriele-tabel { display: table;}
  table.mobiel-seriele-tabel tbody{ display: table;}
  table.mobiel-seriele-tabel thead { display: table;}
  table.mobiel-seriele-tabel tr{ display: table-row;}
  table.mobiel-seriele-tabel td { display: table-cell;}
  table.mobiel-seriele-tabel th { display: table-cell;}

  .uitklap-hoofd {
    padding-left: 75px;
    padding-right: 75px;
  }
		.uitklap-hoofd .uitklap-info {
			font-size: 14px;
		}
		body.page-node-type-actieformulier .js-form-type-select label
    {
			font-size: 14px;
		}

  #harol-links > div.kleur-vlak a {
    padding: 0px 70px 20px 70px;
  }

  #harol-links div.item-list > div.kleur-vlak > div.foto-achtergrond {
    display: block;
  }

  .vert-submenu {
    margin-top: -55px;
    float: left;
  }

  section#blog-intro .blog-intro-text {
    float: left;
    width: calc(100% - 260px - 62px - 10px - 30px);
  }

  #pagina-kader .harol-form .gegevens-2-kolom div.veld {
    width: calc(100% / 2 - 35px);
  }

  #pagina-kader .harol-form section#forms-step-6 {
    padding-top: 40px;
  }

  #pagina-kader .harol-form section#forms-step-1 fieldset .form-item,
  #pagina-kader .harol-form section#forms-step-4 .form-item,
  #pagina-kader .harol-form section#forms-step-6 .form-item {
    width: calc(50% - 10px);
    margin-right: 10px;
  }

  #pagina-kader .harol-form section#forms-step-6 .form-item {
    float: left;
  }

  #pagina-kader .harol-form section#forms-step-6 .form-item label {
    color: #3d3d3d;
    font-size: 1.5rem;
    margin-bottom: 20px;
  }

	#pagina-kader .harol-form section#forms-step-4 .form-item.form-item-breed {
    width: 100%;
    margin-right: 0px;
  }
	#pagina-kader .harol-form section#forms-step-4 .form-item.js-form-type-textarea{
		width: 100%;
	}
	#pagina-kader .harol-form .form-item.js-form-type-textarea{
		padding-top: 25px;
		padding-bottom: 20px;
	}

	#pagina-kader .harol-form section#forms-step-4 div.js-form-type-textarea label {
		visibility: visible;
	}
  #pagina-kader .harol-form section#forms-step-4 fieldset.form-item {
    width: 100%;
    margin-right: 0;
  }

  #pagina-kader .harol-form section#forms-step-1 fieldset .form-item.harol-narrow-field,
  #pagina-kader .harol-form section#forms-step-4 .form-item.harol-narrow-field {
    width: calc(25% - 10px);
  }

  #pagina-kader .harol-form section#forms-step-1 fieldset .form-item.harol-newline-field,
  #pagina-kader .harol-form section#forms-step-4 .form-item.harol-newline-field {
    clear: left;
  }

  #pagina-kader .harol-form section#forms-step-2 fieldset .form-item
  {
    width: calc(33% - 10px);
    margin-right: 10px;
  }

  #pagina-kader .harol-form section#forms-step-3 fieldset .form-item,
  #pagina-kader .harol-form section#forms-step-4 fieldset .form-item
  {
    width: calc(50% - 10px);
    margin-right: 10px;
  }

  /* Vanaf hier actiebanners zichtbaar met achtergrond */
  #actie-banners {
    height: 450px;
  }

  #actie-banners div.actie-banner {
    /* Removing this for the slick carousel */
    /* position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;  */
    height: 100%;
    background-size: cover;
    background-position: center center;
    overflow: hidden;
    position: relative;
  }

    #actie-banners div.actie-banner > div.actie-banner-text {
      position: absolute;
      width: 400px;
      height: 400px;
      left: 55px;
      top: -60px;
      background-image: url(../images/actie_bol.svg);
      background-color: transparent;
      background-size: contain;
      background-repeat: no-repeat;
      box-sizing: border-box;
      padding: 90px 50px 50px 85px;
      text-decoration: none;
    }

    #actie-banners div.actie-banner > div.actie-banner-text-groot {
      width: 500px;
      height: 500px;
      top: -100px;
      padding: 80px 60px 50px 60px;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }

  .links-blok div.item-list {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;

    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
  }

    .links-blok.home-links-blok div.item-list,
    .links-blok div.item-list.drie-blokken
    {
      /* -webkit-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column; */
      display: block;
      max-height: 800px;
    }

    .links-blok div.item-list > div {
      width: 50%;
      flex-grow: 1;
      box-sizing: border-box;
      padding: 86px 60px 86px 40px;
    }

    .links-blok div.item-list > div > div.icoon,
    .links-blok div.item-list > div > a > h2
    {
      transition-duration: 150ms;
      transform-origin: left center;
    }

    .links-blok div.item-list > div.hover > div.icoon,
    .links-blok div.item-list > div.hover > a > h2
    {
      transform: scale(1.07, 1.07);
    }

      .links-blok div.item-list > div.zoek-een-verkooppunt,
      .links-blok div.item-list.drie-blokken > div.normaal-link-blok:nth-last-child(3) /* should be the first item */
      {
        min-height: 600px;
        padding-left: calc((100vw - 740px) / 2);
        float: left;
      }

      .links-blok div.item-list > div.vraag-documentatie,
      .links-blok div.item-list.drie-blokken > div.normaal-link-blok:nth-last-child(2) /* should be the second item */
      {
        min-height: 180px;
        border-top: none;
        border-left: 2px solid #f3f1ef;
        padding-right: calc((100vw - 740px) / 2);
        float: right;
      }

      .links-blok div.item-list > div.vraag-offerte,
      .links-blok div.item-list.drie-blokken > div.normaal-link-blok:nth-last-child(1) /* last item */
      {
        min-height: 180px;
        border-top: 2px solid #f3f1ef;
        border-left: 2px solid #f3f1ef;
        padding-right: calc((100vw - 740px) / 2);
        float: right;
      }

      .links-blok div.item-list.geen-drie-blokken > div.normaal-link-blok {
        border-top: 2px solid #f3f1ef;
      }

        .links-blok div.item-list.geen-drie-blokken > div.normaal-link-blok:nth-child(2n+1) {
          border-right: 2px solid #f3f1ef;
          padding-left: calc((100vw - 740px) / 2);
        }

        .links-blok div.item-list.geen-drie-blokken > div.normaal-link-blok:nth-child(2n) {
          border-right: 2px solid #f3f1ef;
          padding-right: calc((100vw - 740px) / 2);
        }

        .links-blok div.item-list.geen-drie-blokken > div.normaal-link-blok:nth-child(1),
        .links-blok div.item-list.geen-drie-blokken > div.normaal-link-blok:nth-child(2) {
          border-top: none;
        }

  #product-groepen div.item-list ul li {
    flex-grow: 1;
    flex-basis: 50%;
  }

  #product-groepen div.item-list ul li {
    background-size: 100% auto;
    background-position: center 0px;
    padding: 160px 20px 0 20px;
    margin-top: 90px;
  }

    #product-groepen div.item-list ul li.buitenleven {
      background-image: url(../images/product_buitenleven.png);
      background-size: 120px auto;
      background-position: center 67px;
    }

    #product-groepen div.item-list ul li.garagepoorten {
      background-image: url(../images/product_garagepoorten.png);
      background-size: 120px auto;
      background-position: center 60px;
    }

    #product-groepen div.item-list ul li.rolluiken {
      background-image: url(../images/product_rolluiken.png);
      background-size: 100px auto;
      background-position: center 53px;
    }

    #product-groepen div.item-list ul li.zonwering {
      background-image: url(../images/product_zonwering.png);
      background-size: 100px auto;
      background-position: center 50px;
    }

    #product-groepen div.item-list ul li p {
      display: block;
    }




		#product-groepen div.item-list ul li.buitenleven:before {
      background-image: url(../images/product_buitenleven.png);
      background-size: 120px auto;
      background-position: center bottom 10px;
			background-repeat: no-repeat;
			content: "";
			display: block;
			height: 100px;
			margin-top: -100px;
			transition-duration: 150ms;
			transition-timing-function: ease-out;
    }

    #product-groepen div.item-list ul li.garagepoorten:before {
      background-image: url(../images/product_garagepoorten.png);
      background-size: 120px auto;
      background-position: center bottom 5px;
			background-repeat: no-repeat;
			content: "";
			display: block;
			height: 100px;
			margin-top: -100px;
			transition-duration: 150ms;
			transition-timing-function: ease-out;
    }

    #product-groepen div.item-list ul li.rolluiken:before {
      background-image: url(../images/product_rolluiken.png);
      background-size: 100px auto;
      background-position: center bottom 13px;
			background-repeat: no-repeat;
			content: "";
			display: block;
			height: 100px;
			margin-top: -100px;
			transition-duration: 150ms;
			transition-timing-function: ease-out;
    }

    #product-groepen div.item-list ul li.zonwering:before {
      background-image: url(../images/product_zonwering.png);
      background-size: 100px auto;
      background-position: center bottom 12px;
			background-repeat: no-repeat;
			content: "";
			display: block;
			height: 100px;
			margin-top: -100px;
			transition-duration: 150ms;
			transition-timing-function: ease-out;
    }

		#product-groepen div.item-list ul li.buitenleven,
		#product-groepen div.item-list ul li.garagepoorten,
		#product-groepen div.item-list ul li.rolluiken,
		#product-groepen div.item-list ul li.zonwering {
			background: none;
		}

		#product-groepen div.item-list ul li.buitenleven:hover:before,
		#product-groepen div.item-list ul li.garagepoorten:hover:before,
		#product-groepen div.item-list ul li.rolluiken:hover:before,
		#product-groepen div.item-list ul li.zonwering:hover:before {
			transform: scale(1.15,1.15);
		}

  #product-groepen-oplossingen div.item-list ul li {
    width: 50%;
  }

  #product-groepen-oplossingen div.item-list ul li:nth-child(1) {
    order: 1;
  }

  #product-groepen-oplossingen div.item-list ul li:nth-child(2) {
    order: 4;
  }

  #product-groepen-oplossingen div.item-list ul li:nth-child(3) {
    order: 3;
  }

  #product-groepen-oplossingen div.item-list ul li:nth-child(4) {
    order: 2;
  }

  #harol-links div.item-list > div.grote-foto,
  #harol-links div.item-list > div.kleur-vlak {
    flex-basis: 50%;
  }

    #harol-links > div h2 {
      font-size: 1.67rem;
    }

    #harol-links > div h3 {
      font-size: 2.25rem;
    }

    #harol-links div.item-list > div:nth-child(even) > div.harol-link-content {
      padding-left: 115px;
      padding-top: 70px;
    }

    #harol-links div.item-list > div:nth-child(odd) > div.harol-link-content {
      padding-right: 115px;
      padding-top: 70px;
    }

    #harol-links div.item-list > div.kleur-vlak:nth-child(odd) > div.harol-link-content {
      padding-right: 0;
    }

      #harol-links div.item-list > div.kleur-vlak:nth-child(odd) > div.harol-link-content a {
        padding-right: 115px;
      }

    #harol-links div.item-list > div.kleur-vlak:nth-child(even) > div.harol-link-content {
      padding-left: 0;
    }

      #harol-links div.item-list > div.kleur-vlak:nth-child(even) > div.harol-link-content a {
        padding-left: 115px;
      }

  footer#links-footer {
    flex-direction: row;
  }

    footer#links-footer #block-zoekeenverkooppuntnlbe {
      width: 25%;
      order: initial;
    }

    footer#links-footer #block-footermenunlbe {
      width: 50%;
      order: initial;
    }

      footer#links-footer #block-footermenunlbe > ul {
        column-count: 2;
      }

    footer#links-footer #block-contactnlbe {
      width: 25%;
      order: initial;
    }

  .harol-referenties div.views-field {
    width: 33%;
    padding: 15px;
  }

  .forms-wrapper .inhoud-blok,
  .inhoud-blok,
  .blog-inhoud-blok {
    padding-left: 115px;
    padding-right: 115px;
  }
	.bevestig_groot {
		font-size: 2rem;
	}

	body.page-node-type-actieformulier .forms-wrapper .inhoud-blok,
  body.page-node-type-actiepagina .forms-wrapper .inhoud-blok,
  body.page-node-type-actieformulier .inhoud-blok,
  body.page-node-type-actiepagina .inhoud-blok{
    padding-left: 75px;
    padding-right: 75px;
  }

  #intro-beeld .inhoud-blok h2,
  .hoofd-titel h2 {
    font-size: 5.2rem;
  }
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
  .hide-on-mobile {
    display: block;
  }

  header {
    height: 114px;
  }

  div.table-wrapper {
    overflow: visible;
  }

  div.responsive-by-column {
  grid-auto-flow: column;
  }

  div.responsive-by-column div.column-index-0 {
  grid-column: 1;
  }
  div.responsive-by-column div.column-index-1 {
  grid-column: 2;
  }
  div.responsive-by-column div.column-index-2 {
  grid-column: 3;
  }
  div.responsive-by-column div.column-index-3 {
  grid-column: 4;
  }
  div.responsive-by-column div.column-index-4 {
  grid-column: 5;
  }
  div.responsive-by-column div.column-index-5 {
  grid-column: 6;
  }
  div.responsive-by-column div.column-index-6 {
  grid-column: 7;
  }
  div.responsive-by-column div.column-index-7 {
  grid-column: 8;
  }

  div.responsive-by-column > div {
  border-right: 1px solid #cdd1d6;
  border-bottom: 1px solid #cdd1d6;
  }

  div.responsive-by-column.column-count-2 > div.column-index-1,
  div.responsive-by-column.column-count-3 > div.column-index-2,
  div.responsive-by-column.column-count-4 > div.column-index-3,
  div.responsive-by-column.column-count-5 > div.column-index-4,
  div.responsive-by-column.column-count-6 > div.column-index-5,
  div.responsive-by-column.column-count-7 > div.column-index-6,
  div.responsive-by-column.column-count-8 > div.column-index-7 {
  border-right: none;
  }

  div.responsive-by-column div.last-row {
  border-bottom: none;
  }

  section.text-sfeerbeeld a.telefoon:hover,
  section.text-sfeerbeeld a.e-mail:hover {
    max-width: 200px;
  }

  section#inspiratie,
  section#intro-detail-beeld,
  section#blog-beeld,
  section#forms-beeld {
    height: calc(100vh - 114px - 37px);
  }

  #intro-beeld>div button.slick-arrow,
  section.image-slider ul button.slick-arrow,
  section.blog-image-slider button.slick-arrow,
  div.product-slider>div button.slick-arrow,
  #actie-banners button.slick-arrow {
    visibility: visible;
  }

  header a#logo {
    width: 160px;
    height: 94px;
  }

  section#product-intro {
    padding-left: calc((100vw - 885px) / 2);
    padding-right: calc((100vw - 885px) / 2);
  }

  .inhoud-blok,
  .blog-inhoud-blok
  {
    padding-left: calc((100vw - 885px) / 2);
    padding-right: calc((100vw - 885px) / 2);
  }

  .inhoud-blok .flexbox-rij > div {
    width: calc(50% - 33.25px);
  }

    .inhoud-blok .flexbox-rij > div:nth-child(2) {
      border-top: none;
      padding-top: 0px;
      padding-bottom: 25px;
      box-sizing: border-box;
    }

    .inhoud-blok .flexbox-rij > div > *:first-child {
      margin-top: 0 !important;
    }

    .inhoud-blok div.icoon + .flexbox-rij {
      margin-top: 15px;
    }

  section.wit-blok .flexbox-rij > div {
    width: calc(50% - 33.25px);
  }

  section#login-pro-beeld div.login > div {
    width: calc(50% - 48px);
  }

  section.wit-blok .flexbox-rij > div h3 {
    margin-bottom: 81px;
  }

  section.wit-blok .flexbox-rij > div h3.kwaliteit {
    padding-bottom: 81px;
    margin-bottom: 0;
    text-align: center;
    font-style: italic;
    background-repeat: no-repeat;
    background-position: center bottom 35px;
    background-size: 20% 1px;
    background-image: url(data:image/gif;base64,R0lGODlhAQABAPAAAOXl5QAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==);
  }

  section.wit-blok .flexbox-rij > div a.cta-knop {
    margin-top: 45px;
  }

  section.wit-blok,
  section.text-sfeerbeeld {
    min-height: 640px;
  }

  body.page-node-type-blog-artikel section.wit-blok,
  body.page-node-type-blog-artikel section.text-sfeerbeeld
  {
    min-height: 0;
  }

  section.text-sfeerbeeld-klein {
    min-height: 320px;
  }

  #text-artikel-inhoud {
    min-height: 0;
  }

  #mobiel-menu-blok {
    display: none;
  }

  section#blog-items a.nieuws-item {
    float: left;
  }

    section#blog-items a.nieuws-item:nth-of-type(4n+1),
    section#blog-items a.nieuws-item:nth-of-type(4n+4) {
      width: calc(66% - 20px);
    }

    section#blog-items a.nieuws-item:nth-of-type(4n+2),
    section#blog-items a.nieuws-item:nth-of-type(4n+3) {
      width: calc(34% - 20px);
    }

      section#blog-items a.nieuws-item:nth-of-type(4n+1) div.preview.breed,
      section#blog-items a.nieuws-item:nth-of-type(4n+2) div.preview.smal,
      section#blog-items a.nieuws-item:nth-of-type(4n+3) div.preview.smal,
      section#blog-items a.nieuws-item:nth-of-type(4n+4) div.preview.breed {
        display: block;
      }

      section#blog-items a.nieuws-item:nth-of-type(4n+1) div.preview.smal,
      section#blog-items a.nieuws-item:nth-of-type(4n+2) div.preview.breed ,
      section#blog-items a.nieuws-item:nth-of-type(4n+3) div.preview.breed ,
      section#blog-items a.nieuws-item:nth-of-type(4n+4) div.preview.smal{
        display: none;
      }

  section.text-sfeerbeeld-klein .promotie-bol
  {
    box-sizing: border-box;
    min-width: 217px;
    min-height: 212px;
    width: 270px;
    height: 270px;
    padding: 50px 42px 40px 33px;
    background: url("../images/product_bol.svg") no-repeat center 0px;
    background-size: contain;
    color: #fff;
    font-size: 1.25rem;
    line-height: 1.4;
    text-align: center;
    position: absolute;
    left: auto;
    top: auto;
    bottom: -50px;
    right: 80px;
    z-index: 9;
  }

  section.text-sfeerbeeld-klein .promotie-bol br {
		display: inline-block;
	}

  section.text-sfeerbeeld-klein .promotie-bol.actiepagina span.promotie-bol-tekst {
    position: relative;
    z-index: 3;
    display: block;

	  font-family: 'fira-sans',sans-serif;
	  font-size: 1.6rem;
  }

  section.text-sfeerbeeld-klein .promotie-bol.actiepagina img {
    position: absolute;
    z-index: 2;
    right: 0px;
    bottom: 0px;
    top: auto;
    left: auto;
    width: 140px;
    height: auto;
    float: none;
  }

  section.text-sfeerbeeld-klein .promotie-bol h3 {
    margin: 0px;
    padding: 0px;
    font-size: 1.92rem;
    font-weight: bold;
    line-height: normal;
  }

  .promotie-banner div.inhoud-blok a.link-knop {
    position: absolute;
    right: 5px;
    top: 20px;
    margin: 0;
  }

  /* MENNO */

  /* Promotions on these pages are run through banners, not the promo ball thingie
   * Mobile though it's still visible.
   */
  /* display: none; */
  /* 31/8/2017: Now, all of a sudden Harol wants them balls back */
  /* 4/9/2017: And now it is ball-be-gone time */
  /* 4/9/2017: Latest update: some pages with banners, some with balls, some with text */

  section#intro-beeld ul.product-groepen li a {
    font-size: 1.5vw;
  }

  /* snelle links laten zien vanaf desktop */
  #snelle-links {
    display: block;
    position: absolute;
    z-index: 10;
    left: 0;
    top: calc(114px + 37px + 1px);
    overflow: hidden;
  }

    #snelle-links.fixed {
      position: fixed;
      top: 1px;
    }

    #snelle-links ul {
      margin: 0;
      padding: 0;
      list-style-type: none;
    }

    #snelle-links li {
      padding: 0;
      margin: 0 0 1px 0;
    }

      #snelle-links li a {
        font-size: 1.25rem;
        display: block;
        box-sizing: border-box;
        width: 270px;
        height: 70px;
        line-height: 70px;
        padding: 0 0 0 10px;
        background-color: #71be44;
        background-size: auto 50%;
        background-repeat: no-repeat;
        background-position: 20px center;
        color: #fff;
        text-decoration: none;
        transform: translateX(-200px);
        transition-duration: 400ms;
        transition-timing-function: ease-out;
      }

        #snelle-links li a:hover {
          transform: translateX(0px);
        }

        #snelle-links li a > span { /* de icoontjes */
          color: #fff;
          font-size: 35px;
          float: right;
          vertical-align: middle;
          width: 70px;
          height: 70px;
          line-height: 70px;
          text-align: center;
        }

          #snelle-links li a > span.zoek-een-verkooppunt-icoon:before {
            background-image: url("../images/locatie_wit.svg");
            width: 50px;
            height: 50px;
            vertical-align: middle;
            margin-top: 15px;
            margin-left: 18px;
          }

  /* top menu pas vanaf desktop */
  nav#top-menu {
    background-color: #f3f1ef;
    height: 37px;
    display: block;
  }

    nav#top-menu ul {
      float: right;
      list-style-type: none;
      margin: 0;
      padding: 0;
    }

      nav#top-menu ul li {
        float: left;
        padding: 8px 20px;
      }

        nav#top-menu ul li a {
          color: #71be44;
          font-weight: normal;
          text-decoration: none;
          font-family: 'Bree', sans-serif;
          font-size: 1rem; /* 12px = 12px * 1 */
          transition-duration: 150ms;
        }

          nav#top-menu ul li a:hover,
          nav#top-menu ul li a.active {
            color: #000;
          }

          nav#top-menu ul li a.is-active {
            text-decoration: underline;
          }

  header .taalkeuze,
  header .zoek-knop {
    display: block;
    float: right;
    width: 70px;
    height: 114px;
    background-color: #fff;
    color: #000;
    text-decoration: none;
    text-align: center;
    line-height: 114px;
    font-weight: bold;
    transition-duration: 200ms;
  }

  header .taalkeuze {
    position: relative;
    z-index: 11; //above the quick links
  }

  header .zoek-knop>div {
    display: none;
  }

  header .zoek-knop.selected {
    width: 200px;
    cursor: default;
  }

  header .zoek-knop.selected div {
    display: inline;
  }

  header .zoek-knop.selected input.form-search {
    box-sizing: border-box;
    font-size: 1.2rem;
    border: 1px solid #3f3f40;
  }

  header .zoek-knop.selected input.form-submit {
    background: url('../images/icoon_zoeken_zwart.svg') no-repeat center center;
    background-size: auto 1em;
    width: 1.2em;
    display: inline-block;
    overflow: hidden;
    color: rgba(0,0,0,0);
    border: none;
  }

  header .zoek-knop.selected input.form-submit:hover {
    background-image: url('../images/icoon_zoeken_groen.svg');
  }

  header .zoek-knop.selected::before {
    display: none;
  }

  header .taalkeuze.selected
  {
    width: 160px;
  }

  header .taalkeuze ul.links {
    margin: 0;
    padding: 0;
    list-style-type: none;
    position: absolute;
    top: 0px;
    right: 0px;
    background-color: #fff;
    border-left: 2px solid #f3f1ef;
    border-right: none;
    border-bottom: none;
  }

  header .taalkeuze ul.links li {
    box-sizing: border-box;
    max-height: 0px;
    display: none;
    overflow: hidden;
    line-height: normal;
    text-align: left;
    border-top: 2px solid #f3f1ef;
    margin: 0;
    padding: 0;
    transition-duration: 200ms;
  }

  header .taalkeuze ul.links li a {
    box-sizing: border-box;
    padding: 15px 8px 15px 60px;
    color: #fff;
    background-position: 25px center;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    display: block;
    font-size: 0rem;
  }

  header .taalkeuze ul.links li.nl a {
    background-image: url(../images/icoon_belgie.png);
  }

  header .taalkeuze ul.links li.fr a {
    background-image: url(../images/icoon_belgie.png);
  }

  header .taalkeuze ul.links li.en a {
    background-image: url(../images/icoon_english.png);
  }

  header .taalkeuze ul.links li.de a {
    background-image: url(../images/icoon_duitsland.png);
  }

  header .taalkeuze ul.links li.nl-nl a {
    background-image: url(../images/icoon_nederland.png);
  }

  header .taalkeuze ul.links li.fr-fr a {
    background-image: url(../images/icoon_frankrijk.png);
  }

  header .taalkeuze ul.links li:first-child {
    border-top: none;
  }

  header .taalkeuze.selected ul.links li,
  header .taalkeuze ul.links li.is-active {
    max-height: 114px;
    display: block;
  }

  header .taalkeuze.selected ul.links li a,
  header .taalkeuze ul.links li.is-active a {
    color: #000;
  }

  header .taalkeuze.selected ul.links li a {
    font-size: 1rem;
  }

  header .taalkeuze.selected ul.links li.is-active a {
    height: auto;
    padding: 15px 8px 15px 60px;
  }

  header .taalkeuze ul.links li.is-active a {
    height: 113px;
    padding-top: 47px;
    padding-bottom: 47px;
  }

  header .zoek-knop::before{
    display: block;
    width: 70px;
    height: 114px;
  }

  header .taalkeuze {
    font-size: 1rem;
  }

  header .zoek-knop {
    font-size: 1.5rem;
  }

    header .zoek-knop:hover {
      color: #71be44;
    }

  header nav#hoofd-menu {
    float: right;
    clear: none;
    display: block;
  }

    header nav#hoofd-menu ul {
      float: right;
      list-style-type: none;
      margin: 0;
      padding: 0;
    }

      header nav#hoofd-menu ul li {
        float: left;
        padding: 10px 20px;
        height: 114px;
        box-sizing: border-box;
        line-height: 94px;
      }

        header nav#hoofd-menu ul li a {
          color: #000;
          font-weight: bold;
          font-size: 1.16rem; /* 14px = 12px * 1.16 */
          text-decoration: none;
          font-family: 'Bree', sans-serif;
          transition-duration: 150ms;
        }

          header nav#hoofd-menu ul li a:hover,
          header nav#hoofd-menu ul li a.active {
            color: #71be44;
          }

          header nav#hoofd-menu ul li a.is-active {
            text-decoration: underline;
          }

          #hoofd-menu .contextual-region {
            position: static;
          }

          /* oplossingen submenu */
          header nav#hoofd-menu ul ul {
            position: absolute;
            left: 0px;
            top: 114px;
            z-index: 12;
            background-color: #fff;
            box-sizing: border-box;
            width: 100%;
            text-align: center;
            padding: 0;
            max-height: 0;
            transition-duration: 250ms;
            overflow: hidden;
            background-image: url(../images/f3f1ef.png);
            background-size: 100% 2px;
            background-position: center top;
            background-repeat: no-repeat;
          }

          header nav#hoofd-menu ul li:hover ul {
            max-height: 200px;
          }

          header nav#hoofd-menu ul ul li {
            float: none;
            padding: 0;
            margin: 15px;
            height: auto;
            box-sizing: border-box;
            line-height: normal;
            display: inline-block;
          }

          header nav#hoofd-menu ul ul li a {
            color: #000;
            font-weight: bold;
            font-size: 1.16rem; /* 14px = 12px * 1.16 */
            text-decoration: none;
            font-family: 'Bree', sans-serif;
            transition-duration: 150ms;
            display: block;
            width: 210px;
          }

          header nav#hoofd-menu ul ul li a.oplossingen::before {
            width: 210px;
            height: 139px;
            display: block;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center center;
            content: '';
            margin: 0 0 15px 0;
          }

          header nav#hoofd-menu ul ul li a.oplossingen.zonwering::before {
            background-image: url(../images/productgroepen/zonwering-menu.jpg);
          }
          header nav#hoofd-menu ul ul li a.oplossingen.buitenleven::before {
            background-image: url(../images/productgroepen/buitenleven-menu.jpg);
          }
          header nav#hoofd-menu ul ul li a.oplossingen.garagepoorten::before {
            background-image: url(../images/productgroepen/garagepoorten-menu.jpg);
          }
          header nav#hoofd-menu ul ul li a.oplossingen.rolluiken::before {
            background-image: url(../images/productgroepen/rolluiken-menu.jpg);
          }
          header nav#hoofd-menu ul ul li a.oplossingen.solar::before {
            background-image: url(../images/menu_solar.jpg);
          }

  section#intro-beeld,
  section#intro-beeld.groen-kader {
    height: calc(100vh - 114px - 37px);
    min-height: calc((1vh * 11) + 500px); /* to make sure there's space for the green window thingie */
    background-size: cover;
    background-position: center center;
    padding: 0;
  }

    section#intro-beeld div.verhaal {
      background-color: rgba(113,190,68,1);
      width: 407px;
      height: auto;
      right: 15%;
      left: auto;
      top: auto;
      bottom: calc((1vh * 11) + 90px);
      padding: 40px 48px 60px 48px;
      border-radius: 4px;
      box-shadow: rgba(0,0,0,0.1) 8px 8px;
    }

    section#intro-beeld div.promotie-verhaal {
      padding: 100px 115px 0 115px;
      font-size: 2rem;
    }

    section#intro-beeld div.promotie-verhaal h2 {
      font-size: 6.42rem;
      margin: 0;
      font-weight: bold;
    }

    section#intro-beeld div.promotie-verhaal p {
      margin: 0;
    }

    section#intro-beeld div.verhaal > h2:first-child {
      position: static;
      padding: 0;
      font-size: 1.67rem;
    }

    section#intro-beeld div.verhaal h2 {
      margin-top: 0;
    }

    section#intro-beeld div.verhaal > p {
      display: block;
    }

    section#intro-beeld div.verhaal a.lees-verhaal {
      bottom: -23px;
      display: block;
    }

    section#intro-beeld div.verhaal span.lees-verhaal.mobiel {
      display: none;
    }

    section#intro-beeld span.beeld-counter {
      display: none;
    }

    section#intro-beeld ul.product-groepen {
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;

      -ms-flex-wrap: nowrap;
      -webkit-flex-wrap: nowrap;
      flex-wrap: nowrap;

      position: absolute;
      box-sizing: border-box;
      left: 0px;
      bottom: 70px;
      width: 100%;
      margin: 0;
      padding: 0 115px 0 115px;
      background: none;;
      list-style-type: none;
      z-index: 2;
    }

    section#intro-beeld>div ul.slick-dots {
      display: none !important;
    }

      section#intro-beeld ul.product-groepen li {
        flex-basis: 25%;
        padding: 0 0 0 15px;
      }

        section#intro-beeld ul.product-groepen li a {
          background: none;
          color: #fff;
          padding: 0;
          border-bottom: 2px solid #fff;
          transition-duration: 150ms;
          text-decoration: none;
          display: block;
        }

          section#intro-beeld ul.product-groepen li a.selected,
          section#intro-beeld ul.product-groepen li a:hover
          {
            border-color: #71be44;
            color: #fff;
          }

  a.naar-beneden {
    display: block;
    background-image: url(../images/witpijltje_onder.png);
    background-repeat: no-repeat;
    background-size: 75%;
    background-position: center center;
    width: 30px;
    height: 30px;
    position: absolute;
    left: calc(50% - 16px);
    bottom: 16px;
    z-index: 2;
    border: 4px solid #fff;
    border-radius: 19px;
    transition-duration: 150ms;
    transform-origin: center center;
  }

  a.naar-beneden:hover {
    transform: scale(1.2);
  }

  .links-blok div.item-list > div {
    padding: 86px 120px 86px 80px;
  }

    .links-blok div.item-list.drie-blokken > div.normaal-link-blok:nth-last-child(3) {
      padding-left: calc((100vw - 885px) / 2);
    }

    .links-blok div.item-list.drie-blokken > div.normaal-link-blok:nth-last-child(2),
    .links-blok div.item-list.drie-blokken > div.normaal-link-blok:nth-last-child(1) {
      padding-right: calc((100vw - 885px) / 2);
    }

    .links-blok div.item-list.geen-drie-blokken > div.normaal-link-blok:nth-child(2n+1) {
      padding-left: calc((100vw - 885px) / 2);
    }

    .links-blok div.item-list.geen-drie-blokken > div.normaal-link-blok:nth-child(2n) {
      padding-right: calc((100vw - 885px) / 2);
    }

  #product-groepen div.item-list {
    padding: 0 115px 0 115px;
  }

    #product-groepen div.item-list ul {
      flex-wrap: nowrap;
    }

      #product-groepen div.item-list ul li {
        flex-basis: auto;
      }

  /* form aanpassingen - toon afbeeldingen vanaf desktop */

  #pagina-kader .harol-form div.js-form-type-radio.form-item-mijn-project-kadert-binnen-::before {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    display: block;
    height: 200px;
    margin-bottom: 5px;
    content: '';
  }

  #pagina-kader .harol-form div.js-form-type-radio.form-item-mijn-project-kadert-binnen-:nth-child(1)::before {
    background-image: url('../images/forms/nieuwbouw.png');
  }

  #pagina-kader .harol-form div.js-form-type-radio.form-item-mijn-project-kadert-binnen-:nth-child(2)::before {
    background-image: url('../images/forms/renovatie.png');
  }

  #pagina-kader .harol-form div.js-form-type-radio.form-item-mijn-project-kadert-binnen-:nth-child(3)::before {
    background-image: url('../images/forms/verfraaiing.png');
  }

  section#oplossingen-huis {
    padding-top: 100px;
    padding-bottom: 100px;
    padding-left: 50%;
    padding-right: calc((100vw - 885px) / 2);
    position: relative;
  }

  section#oplossingen-huis #harol-oplossingen-huis {
    display: block;
    position: absolute;
    width: 49%;
    height: 100%;
    left: 0;
    top: 0;
  }

  section#oplossingen-huis h2 {
    font-size: 4.42rem;
  }

  section#group-intro {
    padding: calc((100vw - 885px) / 2);
    padding-top: 120px;
    padding-bottom: 120px;
  }

  footer#links-footer {
    padding: 40px calc((100vw - 885px) / 2);
  }

  section.kleuren h2,
  section.text-sfeerbeeld h2,
  section.Stijl h2,
  section.comfort h2,
  .product-sfeerbeeld h2,
  section.text-sfeerbeeld .inhoud-blok h2 {
    font-size: 6.42rem;
  }

  #group-info-beeld .inhoud-blok h2 {
    font-size: 3.83rem;
  }


  ul.unieke-eigenschappen li {
    width: calc(50% - 33px);
  }

  ul.unieke-eigenschappen li:nth-child(1),
  ul.unieke-eigenschappen li:nth-child(2){
    border-top: none;
  }

  ul.esthetiek > li{
		width: 53%;
	}
	ul.esthetiek > li img {
		position: absolute;
		top: 0px;
		right: 0px;
		display: none;
	}

  .harol-referenties div.views-field {
    float: left;
    width: 25%;
    padding: 20px;
  }

  div.forms-wrapper {
    width: 970px;
  }
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
  section#product-intro {
    padding-left: calc((100vw - 970px) / 2);
    padding-right: calc((100vw - 970px) / 2);
  }

  .links-blok div.item-list.drie-blokken > div.normaal-link-blok:nth-last-child(3) {
    padding-left: calc((100vw - 970px) / 2);
  }

  .links-blok div.item-list.drie-blokken > div.normaal-link-blok:nth-last-child(2),
  .links-blok div.item-list.drie-blokken > div.normaal-link-blok:nth-last-child(1) {
    padding-right: calc((100vw - 970px) / 2);
  }

  .links-blok div.item-list.geen-drie-blokken > div.normaal-link-blok:nth-child(2n+1) {
    padding-left: calc((100vw - 970px) / 2);
  }

  .links-blok div.item-list.geen-drie-blokken > div.normaal-link-blok:nth-child(2n) {
    padding-right: calc((100vw - 970px) / 2);
  }

  .inhoud-blok,
  .blog-inhoud-blok {
    padding-left: calc((100vw - 970px) / 2);
    padding-right: calc((100vw - 970px) / 2);
  }

  section#group-intro {
    padding-left: calc((100vw - 970px) / 2) ;
    padding-right: calc((100vw - 970px) / 2);
  }

  section.product-lijst .overzicht-accessoires a.stub {
    display: block;
  }



  section#oplossingen-huis {
    padding-right: calc((100vw - 970px) / 2);
  }

  footer#links-footer {
    padding-left: calc((100vw - 970px) / 2);
    padding-right: calc((100vw - 970px) / 2);
  }
}

@media only screen and (min-width: 1550px) {
  h3 {
    font-size: calc(2.25 * 1550px / 100);
  }

  #snelle-links.fixed {
    left: calc((100% - 1550px) / 2);
  }

  section#intro-beeld ul.product-groepen li a {
    font-size: calc(1.5 * 1550px / 100);
  }

  .links-blok div.item-list > div.zoek-een-verkooppunt,
  .links-blok div.item-list.drie-blokken > div.normaal-link-blok:nth-last-child(3) {
    padding-left: calc((1550px - 970px) / 2);
  }

  .links-blok div.item-list > div.vraag-documentatie,
  .links-blok div.item-list > div.vraag-offerte,
  .links-blok div.item-list.drie-blokken > div.normaal-link-blok:nth-last-child(2),
  .links-blok div.item-list.drie-blokken > div.normaal-link-blok:nth-last-child(1) {
    padding-right: calc((1550px - 970px) / 2);
  }

  .links-blok div.item-list.geen-drie-blokken > div.normaal-link-blok:nth-child(2n+1) {
    padding-left: calc((1550px - 970px) / 2);
  }

  .links-blok div.item-list.geen-drie-blokken > div.normaal-link-blok:nth-child(2n) {
    padding-right: calc((1550px - 970px) / 2);
  }

  .inhoud-blok,
  .blog-inhoud-blok {
    padding-left: calc((1550px - 970px) / 2);
    padding-right: calc((1550px - 970px) / 2);
  }

  #harol-links div.item-list > div:nth-child(odd) > div.harol-link-content {
    padding-top: 70px;
  }

  #harol-links > div:nth-child(even) > div.harol-link-content {
    padding-top: 70px;
  }

  section#product-intro {
    padding-left: calc((1550px - 970px) / 2) ;
    padding-right: calc((1550px - 970px) / 2);
  }

  section#group-intro {
    padding-left: calc((1550px - 970px) / 2) ;
    padding-right: calc((1550px - 970px) / 2);
  }

  section#oplossingen-huis {
    padding-right: calc((1550px - 970px) / 2);
  }

  footer#links-footer {
    padding-left: calc((1550px - 970px) / 2);
    padding-right: calc((1550px - 970px) / 2);
  }
}

/* Changes for Drupal */
/*

- Find and replace: #product-groepen --> #product-groepen div.item-list
- Find and replace: .links-blok --> .links-blok div.item-list
- Find and replace: #harol-links --> #harol-links div.item-list
- Switch around even and odd for #harol-links div:nth-child(odd) selectors - there's an extra div inserted by Drupal
- Find and replace: footer#links-footer ul.footer-menu --> footer#links-footer>nav ul
- Set flex props on:
  footer#links-footer #block-zoekeenverkooppuntnlbe
  footer#links-footer #block-footermenunlbe
  footer#links-footer #block-contactnlbe

*/

#block-harol-local-tasks ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

#block-harol-local-tasks ul::after {
  clear: both;
  content: '';
  display: block;
  height: 0px;
  visibility: hidden;
}

#block-harol-local-tasks ul li {
  float: right;
  padding: 3px;
  margin: 0;
}

#block-harol-local-tasks ul li a {
  height: 42px;
  box-sizing: border-box;
  display: inline-block;
  border-radius: 21px;
  text-transform: uppercase;
  line-height: 40px;
  text-decoration: none;
  padding: 0 20px;
  font-size: 1.125rem;
  letter-spacing: 1px;
  font-weight: bold;
  transition-duration: 150ms;
  color: #000;
  background-color: #fff;
  border: 2px solid #000;
}

#block-harol-local-tasks ul li a:hover {
  background-color: #71be44;
  border-color: #71be44;
  color: #fff;
  text-decoration: none;
  transition-duration: 150ms;
}

#actie-banners>div,
#actie-banners>div>div.contextual-region{
  height: 100%;
}

nav.pager ul {
  display: block;
  padding: 0;
  margin: 0;
  list-style-type: none;
  text-align: center;
}

nav.pager ul li {
  display: inline-block;
  padding: 0;
  margin: 0 6px;
}


element.style {
}
user agent stylesheet
div {
    display: block;
}
.dichtstbijzijnde-verkooppunt
{
	display:none!important;
}
@media only screen and (max-width: 600px)
{
	section#group-info-beeld .kolom-links 
	{
		width: 100%;
	}
	div.hoofd-titel > h2 {
		font-size: 40px!important;
		width: 70%;
	}
}