/* -- Fonts ----------------------- */
@font-face {
  font-family: 'canela-light';
  src: url('fonts/canela-light-webfont.woff2') format('woff2'),
       url('fonts/canela-light-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* -- Reset ----------------------- */
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
  all: unset;
  display: revert;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

a, button {
  cursor: revert;
}

ol, ul, menu, summary {
  list-style: none;
}

img {
  max-inline-size: 100%;
  max-block-size: 100%;
}

table {
  border-collapse: collapse;
}

input, textarea {
  -webkit-user-select: auto;
}

textarea {
  white-space: revert;
}

meter {
  -webkit-appearance: revert;
  appearance: revert;
}

:where(pre) {
  all: revert;
  box-sizing: border-box;
}

::placeholder {
  color: unset;
}

:where([hidden]) {
  display: none;
}

:where([contenteditable]:not([contenteditable="false"])) {
  -moz-user-modify: read-write;
  -webkit-user-modify: read-write;
  overflow-wrap: break-word;
  -webkit-line-break: after-white-space;
  -webkit-user-select: auto;
}

:where([draggable="true"]) {
  -webkit-user-drag: element;
}

:where(dialog:modal) {
  all: revert;
  box-sizing: border-box;
}

::-webkit-details-marker {
  display: none;
}

html, body {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 15px;
  color: #42210B;
  line-height: 1.3;
}

/* -- Grid ------------------------ */
.grid {
  display: grid; 
  grid-template-columns: 1fr minmax(0, calc(700px - 3rem)) 1fr; 
  gap: 1.5rem; 
  grid-template-areas: 
    ". grid__main ." 
    ". grid__left ."
    ". grid__right ."; 
}
.grid__main { grid-area: grid__main; }
.grid__left { grid-area: grid__left; }
.grid__right { grid-area: grid__right; }

@media all and (min-width: 992px) {
  .grid {
    display: grid; 
    grid-template-columns: 1fr 460px 1fr; 
    gap: 0 1.5rem; 
    grid-template-areas: 
      "grid__left grid__main grid__right"; 
  }
}

/* -- Utility --------------------- */
.d-block { display: block; }
.d-flex { display: flex; }
.d-none { display: none; }

.place-items-center { display: grid; place-items: center;}
.justify-content-center { justify-content: center; }
.align-items-center { align-items: center; }

.font-canela-300 { font-family: 'canela-light'; font-weight: normal; }

p { line-height: 1.6; }
p + p { margin-top: 1.5rem; }

.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }

.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mb-3 { margin-bottom: 3rem; }

.fs-1 { font-size: 2rem; }
.fs-2 { font-size: 1.75rem; }
.fs-3 { font-size: 1.5rem; }
.fs-4 { font-size: 1.25rem; }
.fs-5 { font-size: 1.15rem; }

small { font-size: .85rem; }

.fw-300 { font-weight: 300; }
.fw-400 { font-weight: 400; }
.fw-500, strong { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }

.clr--white { color: white; }

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-uppercase { text-transform: uppercase; }

.img--radius { border-radius: 1rem; }
.img--shadow { box-shadow: 1rem 1rem 1rem 0 rgba(0,0,0,0.25); }

.box { padding: 1.5rem; border-radius: 1rem; }
.box--blue { background: rgba(202, 221, 227, 1); }
.box--orange { background: rgba(202, 158, 103, 1); }
.box--red { background: rgba(218, 125, 129, 1); }

.box--blue.box--transparant { background: rgba(202, 221, 227, .85); }
.box--orange.box--transparant { background: rgba(202, 158, 103, .85); }
.box--red.box--transparant { background: rgba(218, 125, 129, .35); }

.box--blue.box--shadow { box-shadow: 1rem 1rem 1rem 0 rgba(202, 221, 227, .25); }
.box--orange.box--shadow { box-shadow: 1rem 1rem 1rem 0 rgba(202, 158, 103, .25); }
.box--red.box--shadow { box-shadow: 1rem 1rem 1rem 0 rgba(218, 125, 129, .25); }

.inner--spacer { padding: 0 .5rem; }

.w-50 { width: 50%; }
.w-55 { width: 55%; }
.w-60 { width: 60%; }
.w-65 { width: 65%; }
.w-70 { width: 70%; }
.w-75 { width: 75%; }
.w-80 { width: 80%; }
.w-85 { width: 85%; }
.w-90 { width: 90%; }
.w-95 { width: 95%; }
.w-100 { width: 100%; }

.button {
  padding: .5rem 1rem !important;
  color: #CA9E67 !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  border: 1.5px solid #CA9E67 !important;
  border-radius: 1rem !important;
  transition: all .5s !important;
  background: none !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.button:hover {
  color: #fff !important;
  background: #CA9E67 !important;
}

/* -- App ------------------------- */
.site-wrapper {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  
}

.site-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  background-image: url(../images/bcg-elements.svg);
  background-repeat: no-repeat;
  background-position: top center;
  z-index: 1;  
  pointer-events: none; 
}

.site-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 700px;
  height: 100%;
  background: #F4F0EB;
  z-index: -1;  
}

.header {
  padding: 3rem 0 5rem 0;
}

.header__inner {
  display: flex;
  justify-content: center;
  max-width: 700px;
  margin: 0 auto;
}

.header__logo {
  max-width: 220px;
}

.hero {
  position: relative;
  padding: 3rem 0;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 1.5px;
  background: #CA9E67;
}

.hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 1.5px;
  background: #CA9E67;
}

  .hero__title {
    font-size: 2.35rem;
  }

.introduction {
  padding: 5rem 0;
}

.oprichting {
  padding: 5rem 0;
}

  .border-box {
    position: relative;
    padding: calc(1.5rem - 45px) 1.5rem 1.5rem 1.5rem;
    border-radius: 1rem;
    border: 1.5px solid #CA9E67;
    text-align: center;
  }

  .border-box__icon {
    position: relative;
    transform: translateY(-50%);
    z-index: 2;
    margin: 0;
  }

  .border-box::after {
    content: '';
    position: absolute;
    top: .75rem;
    left: .75rem;
    width: 100%;
    height: 100%;
    border-radius: 1rem;
    border: 1.5px solid #CA9E67;
    opacity: .15;
    z-index: 0;
    pointer-events: none;
  }

  .oprichting__figure figcaption {
    position: relative;
    margin-top: -4rem;
    margin-left: 5%;
  }


.gform_wrapper label {
  color: #42210B !important;
}

.gform_wrapper input,
.gform_wrapper select,
.gform_wrapper textarea {
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  outline: 0 !important;
} 

.agenda {
  padding: 5rem 0;
}

  .agenda-list {
    margin: 3rem 0;
  }
  .list-item + .list-item {
    margin-top: 3rem;
  }

    .agenda__date {
      font-family: 'canela-light'; 
      font-weight: normal;
      display: block;
      margin-bottom: .75rem;
    }
    .agenda__regio {
      display: block;
    }
    .agenda__information {
      line-height: 1.7;
      margin-bottom: 1rem;
    }
    .agenda__information small {
      font-size: 85%;
    }

.inspiratie {
  position: relative;
  padding: 3rem 0 5rem 0;
}

.inspiratie::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 1.5px;
  background: #CA9E67;
}
.socials {
  padding: 5rem 0 8rem 0;
}

.footer {
  background: #DFC5A4;
  padding: 0 0 2.5rem 0;
}

.footer__inner {
  display: flex;
  justify-content: center;
  max-width: 700px;
  margin: 0 auto;
  flex-direction: column;
  align-items: center;
}

.footer__logo {
  margin-top: -2rem;
  position: relative;
  max-width: 220px;
}

.footer__information {
  font-size: .85rem;
  line-height: 1.6;
  text-align: center;
}

@media all and (min-width: 992px) {
  body,html { font-size: 16px; }
  .fs-1 { font-size: 2.25rem; }
  .fs-2 { font-size: 2rem; }
  .fs-3 { font-size: 1.75rem; }
  .fs-4 { font-size: 1.5rem; }
  .fs-5 { font-size: 1.25rem; }

  .header__logo {
    max-width: 290px;
  }

  .inner--spacer {
    padding: 0 3rem;
  }

  .border-box {
    padding: calc(3rem - 45px) 3rem 3rem 3rem;
  }

  .footer__logo {
    max-width: 290px;
  }
}