@import "https://fonts.googleapis.com/css?family=Roboto:300,400,700";

/* scss/style.scss */
.bg--blue {
  position: relative;
  color: #fff;
}
.bg--blue:before {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  display: block;
  width: 100vw;
  height: 100%;
  content: " ";
  transform: translateX(-50%);
  background-color: #0e3b97;
}
.bg--shade-6 {
  position: relative;
  color: #000;
}
.bg--shade-6:before {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  display: block;
  width: 100vw;
  height: 100%;
  content: " ";
  transform: translateX(-50%);
  background-color: #F5F5F5;
}
html,
body,
main,
header,
footer,
p,
article,
div,
section,
nav,
a,
ul,
li {
  box-sizing: border-box;
  margin: 0;
}
html {
  height: 100%;
  font-size: 62.5%;
}
body {
  display: block;
  overflow-x: hidden;
  padding: 0;
  color: #666;
  font-family: Roboto, sans-serif;
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1.8;
}
main {
  overflow-x: hidden;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 6px 0;
  color: #666;
  font-family: Roboto, sans-serif;
  font-weight: 400;
}
h1 {
  font-size: 3rem;
}
h2 {
  font-size: 2.2rem;
}
h3 {
  font-size: 1.6rem;
}
ul,
ol {
  margin: 0;
  margin-left: 2rem;
  padding: 0;
}
figure {
  display: block;
  margin: 0;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
a {
  transition: all, 0.4s;
  text-decoration: none;
  color: #0e3b97;
}
a:hover,
a:focus {
  color: #f40c1b;
}
p {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.field-type-text-with-summary ul,
.field-type-text-with-summary ol {
  margin-left: 2rem;
}
@media screen and (max-width: 1000px) {
  main {
    padding-top: 2rem;
  }
  ul.tabs.primary {
    display: flex;
    flex-direction: column;
  }
  ul.tabs.primary li {
    display: block;
    width: 100%;
    border: none;
  }
  ul.tabs.primary li a {
    display: block;
    padding: 5px;
    border: 1px solid black;
  }
}
.close {
  float: right;
  opacity: 0.2;
  color: #ccc;
  text-shadow: none;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1;
}
.close:hover,
.close:focus {
  cursor: pointer;
  text-decoration: none;
  opacity: 0.5;
  color: #333;
}
button.close {
  padding: 0;
  cursor: pointer;
  border: 0;
  background: transparent;
  -webkit-appearance: none;
}
.sr-only {
  position: absolute;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}
.alert {
  margin-bottom: 1rem;
  padding: 15px;
  border: 1px solid transparent;
  border-radius: 0;
}
.alert h4 {
  margin-top: 0;
  color: inherit;
}
.alert .alert-link {
  font-weight: bold;
}
.alert > p,
.alert > ul {
  margin-bottom: 0;
}
.alert > p + p {
  margin-top: 5px;
}
.alert-dismissable,
.alert-dismissible {
  padding-right: 35px;
}
.alert-dismissable .close,
.alert-dismissible .close {
  position: relative;
  top: -2px;
  right: -21px;
  color: inherit;
}
.alert-success {
  margin-bottom: 1rem;
  padding: 15px;
  color: #3c763d;
  border: 1px solid transparent;
  border-color: rgb(83.834422658%, 91.339869281%, 77.4836601307%);
  border-radius: 0;
  background-color: #dff0d8;
}
.alert-success h4 {
  margin-top: 0;
  color: inherit;
}
.alert-success .alert-link {
  font-weight: bold;
}
.alert-success > p,
.alert-success > ul {
  margin-bottom: 0;
}
.alert-success > p + p {
  margin-top: 5px;
}
.alert-success hr {
  border-top-color: rgb(78.6492374728%, 88.5620915033%, 70.2614379085%);
}
.alert-success .alert-link {
  color: rgb(16.787838731%, 33.0160828376%, 17.0676360432%);
}
.alert-info {
  margin-bottom: 1rem;
  padding: 15px;
  color: #31708f;
  border: 1px solid transparent;
  border-color: rgb(73.5328218244%, 90.9454390452%, 94.4279624893%);
  border-radius: 0;
  background-color: #d9edf7;
}
.alert-info h4 {
  margin-top: 0;
  color: inherit;
}
.alert-info .alert-link {
  font-weight: bold;
}
.alert-info > p,
.alert-info > ul {
  margin-bottom: 0;
}
.alert-info > p + p {
  margin-top: 5px;
}
.alert-info hr {
  border-top-color: rgb(65.2719522592%, 88.1193520887%, 92.6888320546%);
}
.alert-info .alert-link {
  color: rgb(14.1115196078%, 32.2549019608%, 41.1825980392%);
}
.alert-warning {
  margin-bottom: 1rem;
  padding: 15px;
  color: #8a6d3b;
  border: 1px solid transparent;
  border-color: rgb(97.8557874763%, 92.018764495%, 79.9873497786%);
  border-radius: 0;
  background-color: #fcf8e3;
}
.alert-warning h4 {
  margin-top: 0;
  color: inherit;
}
.alert-warning .alert-link {
  font-weight: bold;
}
.alert-warning > p,
.alert-warning > ul {
  margin-bottom: 0;
}
.alert-warning > p + p {
  margin-top: 5px;
}
.alert-warning hr {
  border-top-color: rgb(96.8880455408%, 88.4166139574%, 70.9550917141%);
}
.alert-warning .alert-link {
  color: rgb(40.1074947746%, 31.6791081915%, 17.1474071862%);
}
.alert-danger {
  margin-bottom: 1rem;
  padding: 15px;
  color: #a94442;
  border: 1px solid transparent;
  border-color: rgb(92.0758738278%, 79.8849104859%, 81.9167377096%);
  border-radius: 0;
  background-color: #f2dede;
}
.alert-danger h4 {
  margin-top: 0;
  color: inherit;
}
.alert-danger .alert-link {
  font-weight: bold;
}
.alert-danger > p,
.alert-danger > ul {
  margin-bottom: 0;
}
.alert-danger > p + p {
  margin-top: 5px;
}
.alert-danger hr {
  border-top-color: rgb(89.2497868713%, 72.7109974425%, 75.4674623473%);
}
.alert-danger .alert-link {
  color: rgb(51.8915310805%, 20.8794326241%, 20.2653316646%);
}
.header--top {
  padding: 0 2rem;
  color: #fff;
  background-color: #0e3b97;
}
.header--top ul {
  display: flex;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: var(--gap, 2rem);
}
.header--top ul li a {
  display: flex;
  align-items: center;
  padding: 0.5rem;
  transition: all 0.5s;
  text-decoration: none;
  color: #fff;
  border-top: 0.5rem solid transparent;
  border-bottom: 0.5rem solid transparent;
}
.header--top ul li a:hover,
.header--top ul li a:focus {
  border-bottom: 0.5rem solid #fff;
}
.header--top ul li a svg {
  height: calc(1.2 * var(--font-size, 1.6rem));
}
.header--top ul li a span {
  margin-left: var(--font-size, 1.6rem);
  font-size: var(--font-size, 1.6rem);
}
@media screen and (max-width: 1400px) {
  .header--top {
    --font-size: 1.2rem;
    --gap: 2rem;
  }
}
@media screen and (min-width: 1401px) {
  .header--top {
    --font-size: 1.6rem;
    --gap: 6rem;
  }
}
footer .inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 120rem;
  margin: 0 auto;
  padding: 6rem 2rem;
  gap: 1rem;
}
footer a {
  color: #fff;
}
footer a svg {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  margin-right: 2rem;
}
footer a:hover,
footer a:focus {
  color: #999;
}
footer .block {
  flex: 1 1 15rem;
}
footer ul li {
  display: block;
  padding: 1rem;
}
.splash {
  background-image: url(/img/content/splash_mobile.jpg);
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: auto 100%;
}
.splash .splash--content {
  max-width: 120rem;
  margin: 0 auto;
  padding: 2rem;
  background: transparent;
  background:
    linear-gradient(
      90deg,
      rgb(255, 255, 255) 50%,
      rgba(255, 255, 255, 0) 85%,
      rgba(255, 255, 255, 0) 100%);
}
.splash .logo svg {
  width: 40vw;
  height: auto;
  margin-bottom: 4rem;
}
.splash ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1.6rem;
  line-height: 2;
}
@media screen and (min-width: 501px) {
  .splash ul {
    font-size: 1.8rem;
  }
}
@media screen and (min-width: 1401px) {
  .splash {
    background-image: url(/img/content/splash.jpg);
  }
  .splash .splash--content {
    padding: 6rem 2rem;
    background:
      linear-gradient(
        90deg,
        rgb(255, 255, 255) 25%,
        rgba(255, 255, 255, 0) 75%,
        rgba(255, 255, 255, 0) 100%);
  }
  .splash .logo svg {
    width: 40rem;
    margin-bottom: 6rem;
  }
  .splash ul {
    font-size: 2.4rem;
  }
}
.header--branding {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 120rem;
  margin: 0 auto;
  padding: 2rem;
}
.header--branding .back-to-home {
  padding-left: 4rem;
  background-image: url(../img/icons/blue/chevron-left.svg);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 1rem auto;
  font-size: 2.2rem;
}
.wist-je-dat {
  max-width: 80rem;
  margin: 0 auto;
  padding: 6rem;
}
.realisation {
  font-size: 1.6rem;
  font-weight: 300;
  font-style: italic;
}
.realisation img {
  aspect-ratio: 3/2;
  -o-object-fit: cover;
  object-fit: cover;
}
h1 {
  margin-bottom: 2rem;
  text-align: center;
}
.content-page {
  max-width: 120rem;
  margin: 0 auto;
  padding: 2rem;
}
fieldset {
  margin: 0;
  padding: 6px 0;
  border: none;
}
fieldset label {
  display: block;
  margin-bottom: 5px;
}
input[type=color],
input[type=url],
input[type=password],
input[type=email],
input[type=tel],
input[type=number],
input[type=text],
input[type=search] {
  padding: 6px 3px;
  color: #666;
  border: 1px solid #999;
  font-family: Roboto, sans-serif;
  -webkit-appearance: none;
}
select {
  height: 30px;
  padding: 6px 3px;
  border: 1px solid #999;
  border-radius: 0;
  font-family: Roboto, sans-serif;
}
textarea {
  border: 1px solid #999;
}
input[type=submit],
input[type=reset],
input[type=button],
button,
button.btn,
.btn,
.btn-2,
.btn-3,
.btn-4 {
  display: inline-block;
  margin-top: 5px;
  padding: 1rem 2rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  transition: all, 0.4s;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  color: #fff;
  border: 1px solid #0e3b97;
  border-radius: 8px;
  background-color: #0e3b97;
  font-family: Roboto, sans-serif;
  font-size: 1.8rem;
  font-weight: normal;
}
input[type=submit]:focus,
input[type=submit].focus,
input[type=reset]:focus,
input[type=reset].focus,
input[type=button]:focus,
input[type=button].focus,
button:focus,
button.focus,
button.btn:focus,
button.btn.focus,
.btn:focus,
.btn.focus,
.btn-2:focus,
.btn-2.focus,
.btn-3:focus,
.btn-3.focus,
.btn-4:focus,
.btn-4.focus {
  outline: 0;
  box-shadow: #333 1px 1px;
}
input[type=submit].disabled,
input[type=submit]:disabled,
input[type=reset].disabled,
input[type=reset]:disabled,
input[type=button].disabled,
input[type=button]:disabled,
button.disabled,
button:disabled,
button.btn.disabled,
button.btn:disabled,
.btn.disabled,
.btn:disabled,
.btn-2.disabled,
.btn-2:disabled,
.btn-3.disabled,
.btn-3:disabled,
.btn-4.disabled,
.btn-4:disabled {
  cursor: not-allowed;
  opacity: 0.65;
  box-shadow: none;
}
input[type=submit]:active,
input[type=submit].active,
input[type=reset]:active,
input[type=reset].active,
input[type=button]:active,
input[type=button].active,
button:active,
button.active,
button.btn:active,
button.btn.active,
.btn:active,
.btn.active,
.btn-2:active,
.btn-2.active,
.btn-3:active,
.btn-3.active,
.btn-4:active,
.btn-4.active {
  background-image: none;
}
input[type=submit]:focus,
input[type=submit]:hover,
input[type=reset]:focus,
input[type=reset]:hover,
input[type=button]:focus,
input[type=button]:hover,
button:focus,
button:hover,
button.btn:focus,
button.btn:hover,
.btn:focus,
.btn:hover,
.btn-2:focus,
.btn-2:hover,
.btn-3:focus,
.btn-3:hover,
.btn-4:focus,
.btn-4:hover {
  color: #fff;
  border-color: rgb(0.3992869875%, 1.6827094474%, 4.3065953654%);
  background-color: rgb(2.0962566845%, 8.8342245989%, 22.6096256684%);
}
input[type=submit].btn-2,
input[type=reset].btn-2,
input[type=button].btn-2,
button.btn-2,
.btn-2 {
  padding: 10px 35px;
  color: #0e3b97;
  border-color: #fff;
  background-color: #fff;
}
input[type=submit].btn-2:focus,
input[type=submit].btn-2:hover,
input[type=reset].btn-2:focus,
input[type=reset].btn-2:hover,
input[type=button].btn-2:focus,
input[type=button].btn-2:hover,
button.btn-2:focus,
button.btn-2:hover,
.btn-2:focus,
.btn-2:hover {
  border-color: #E5E5E5;
  background-color: #E5E5E5;
}
input[type=submit].btn-3,
input[type=reset].btn-3,
input[type=button].btn-3,
button.btn-3,
.btn-3 {
  color: #fff;
  border-color: #000;
  background-color: #000;
}
input[type=submit].btn-3:focus,
input[type=submit].btn-3:hover,
input[type=reset].btn-3:focus,
input[type=reset].btn-3:hover,
input[type=button].btn-3:focus,
input[type=button].btn-3:hover,
button.btn-3:focus,
button.btn-3:hover,
.btn-3:focus,
.btn-3:hover {
  color: #fff;
  border-color: hsl(0, 0%, -20%);
  background-color: hsl(0, 0%, -20%);
}
input[type=submit].btn-4,
input[type=reset].btn-4,
input[type=button].btn-4,
button.btn-4,
.btn-4 {
  color: #fff;
  border-color: #0e3b97;
  background-color: #0e3b97;
}
input[type=submit].btn-4:focus,
input[type=submit].btn-4:hover,
input[type=reset].btn-4:focus,
input[type=reset].btn-4:hover,
input[type=button].btn-4:focus,
input[type=button].btn-4:hover,
button.btn-4:focus,
button.btn-4:hover,
.btn-4:focus,
.btn-4:hover {
  background-color: rgb(2.0962566845%, 8.8342245989%, 22.6096256684%);
}
.btn-block {
  display: block;
  text-align: center;
}
.intro,
.presentation {
  position: relative;
  max-width: 100rem;
  margin: 0 auto;
}
.intro .text,
.presentation .text {
  padding: 2rem;
}
#realisaties {
  --gap: 4rem;
  --width: 120rem;
  max-width: var(--width);
  margin: 0 auto;
  padding: 4rem 2rem;
}
#realisaties h2 {
  text-align: left;
  color: #0e3b97;
}
#realisaties .grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 4rem 0;
  gap: var(--gap);
}
#realisaties .grid > article {
  flex: 0 0 calc((100% - 2 * var(--gap)) / 3);
  margin: 0;
}
#realisaties > a {
  display: block;
  width: 25rem;
  margin: 0 auto;
}
@media (max-width: 1000px) {
  .intro {
    display: flex;
    flex-direction: column-reverse;
  }
}
@media (min-width: 1001px) {
  .presentation,
  .intro {
    display: flex;
    align-items: center;
    gap: 6rem;
  }
  .intro {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  .intro .image {
    flex: 0 0 45%;
  }
  .presentation:before {
    left: 0;
    width: calc(61vw + 6rem);
  }
  .presentation .image {
    flex: 0 0 40%;
  }
}
.realisaties h1 {
  text-align: center;
}
.realisaties .grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  max-width: 120rem;
  margin: 0 auto;
  padding: 2rem;
  gap: 4rem;
}
.realisaties .grid article {
  max-width: 30rem;
}
#verwarming .content-page {
  display: flex;
  gap: 4rem;
}
/*# sourceMappingURL=style.css.map */