/* MAIN CSS */

:root {
--groen: #183834;
--oranje: #cc957d;
--rose: #f4d2c3;
--bruin: #945f43;
--accent: #b24602;
--wit: white;
--antraciet: #555;
}

body {
  overflow-x:hidden!important;
}

body {
  font-family: 'Raleway', sans-serif;
  color: var(--antraciet);
  word-break: break-word;
}

h1 {
  font-family: 'Playfair Display', serif;
  font-weight: bold;
  font-size:4rem;
  text-align:center;
  line-height: 1.1;
}

/* De H6 hieronder wordt in de de praktijk alleen in de footer gebruikt. */
h2, h6 {
  font-family: 'Playfair Display', serif; /* Alternatief voor Paralucent Light */
  margin-top:4rem;
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
  color: var(--groen);
}

h2:first-child, h6:first-child {margin-top:0;}

h3 {
  font-family: 'Maven Pro', sans-serif; /* Alternatief voor Paralucent Light */
  text-transform: uppercase;
  font-size: 16px;
  margin-bottom: 1rem;
  margin-top: 2.5rem;
  color: var(--accent);
}

h3:first-child {margin-top:0;}

h4  {
  font-size: 1rem;
  font-weight: bold;
  line-height:2rem;
  margin-top: 1rem;
  margin-bottom: 0;
}

h4:first-child {margin-top:0;}

a {text-decoration: none;}

b, h4 {color: var(--groen);}

b {font-weight: bold;}

.plate--element__paragraph {line-height: 2rem;}

.card {
  line-height: 1.5rem;
}

.plate--column .plate--element__paragraph:last-child p:last-child, .card p:last-of-type {
  margin-bottom:0;
}

@media (min-width: 576px) {.card-deck .card {margin-bottom: 15px;}}
@media (min-width: 992px) {.card-deck .card {margin-bottom: 0;}}

.punt::after {
  color: var(--accent);
  content: ".";
  font-family: 'Playfair Display', serif;
  font-weight: bold;
  position: relative;
  left: 1px;
  transition: all .15s;
}

.btn {
  font-family: 'Maven Pro', sans-serif; /* Alternatief voor Paralucent Light */
  text-transform: uppercase;
}

.temp-border {
  border: red thin solid;
}

.plate--element__paragraph ul, .plate--element__paragraph h4 {
  padding-inline-start: 1.8rem;
}

.plate--element__paragraph ul li {
  list-style-type: none;
}

.plate--element__paragraph ul li::before, .plate--element__paragraph h4::before {
  color: var(--oranje);
  font-weight: bold;
}

.plate--element__paragraph ul li::before, .plate--element__paragraph h4::before {
  content: ".";
  font-family: 'Playfair Display', serif;
  font-size:2rem;
  position: absolute;
  margin-left: -1.2rem;
  margin-top: -10px;
}

.plate--element__paragraph ol {
  list-style: none;
  counter-reset: counter;
  padding-left: 0;
}
.plate--element__paragraph ol li {
  counter-increment: counter;
  padding-left:1.8rem;
}
.plate--element__paragraph ol li::before {
  content: counter(counter); /* "." */
  color: var(--oranje);
  font-weight:bold;
  margin-left:-1.1rem;
  margin-right:.3rem;
}

/* FULL WIDTH */

.plate--container {
  max-width: none;
}

.plate--section.container-fluid .plate--container {
  padding:0;
}

/* LINKJES */

p a, p a:hover, .card-footer a, .card-footer a:hover {
  color: var(--oranje);
  font-weight: bold;
}

p a:hover {
  text-decoration: underline;
}

/* IMAGE */

figure {margin:0;}

.plate--element__image img {
  /* border: 2px solid;
  border-color: rgba(24,56,52,1); */
  border-radius: 5px;
}

.plate--element__image figure figcaption {
  margin: 0.3rem 0.5rem 0rem;
}

.plate--element__image figure figcaption .description {
  font-family: 'Maven Pro', sans-serif;
  text-transform: uppercase;
  font-size: .8rem;
  color: var(--groen);
  text-align:right;
}

.plate--page-content-wrapper  {background-color: white;}

.plate--column {margin-bottom: 1rem; margin-top:1rem;}
/* Was 2, aangepast ivm overgang rij-met-1-kolom naar rij-met-2-kolommen, met beide paragraphs */

#breadcrumbs + .row .col:first-child .plate--page-content-wrapper:first-child .plate--section:first-child .container-boven-render-content.bg-wit {padding-top:0 !important;}
#breadcrumbs + .row .col:first-child .plate--page-content-wrapper:first-child .plate--section:first-child .container-boven-render-content.bg-wit .plate--container:first-child .plate--row:first-child .plate--column {margin-top:0;}

/* ZOOM ON HOVER */

.zoom-on-hover {transition: all .15s ease-in-out;}
.zoom-on-hover:hover {transform: scale(1.1);}

.at-icon-wrapper:first-child {padding-left:0;}

.logo_collection .card .logo {transform: scale(0.9); filter: grayscale(1); transition: all 0.2s;}
.logo_collection .card:hover .logo {transform: scale(1); filter: grayscale(0);}
.logo_collection .card img.logo {height: inherit;width: inherit;object-fit: contain;}
.logo_collection .ratio {--bs-aspect-ratio: 35%;}

/* BLOCKQUOTE CSS */

/* Aparte selector i.v.m. Bootstrap overrulen */
blockquote.blockquote {
  font-family: 'Maven Pro', sans-serif; /* Alternatief voor Paralucent Light */
  text-transform: uppercase;
  position: relative;
  margin:0;
  :last-child {margin-bottom:0;}
  p {font-size: 1.5rem; position: relative;}
  p::before, p::after {display:none; position:absolute;font-size: 4rem; line-height: 1; opacity: 0.3;}
  &.toon_aanhalingstekens {p::before, p::after {display:block;}}
}

blockquote p::before {
  top: -.5rem;
  left: -2rem;
  content: "\201C";
}
blockquote p::after {
    float:right;
    right:-2rem;
    bottom:-1.25rem;
    content: "\201D";
}

.bg-wit blockquote {
  p {color:var(--bruin);}
  p::before, p:: after {color:var(--oranje);}
  footer {color:var(--oranje);}
}

.bg-rose blockquote {
  p {color:var(--bruin);}
  p::before, p:: after {color:var(--bruin);}
  footer {color:var(--oranje);}
}

.bg-oranje blockquote {
  p {color:white;}
  p::before, p:: after {color: white;}
  footer {color:var(--rose);}
}

.bg-bruin blockquote {
  p {color:white;}
  p::before, p:: after {color:var(--rose);}
  footer {color:var(--oranje);}
}

.bg-groen blockquote {
  p {color:white;}
  p::before, p:: after {color:white;}
  footer {color:var(--oranje);}
}

.bg-accent blockquote {
  p {color:white;}
  p::before, p:: after {color: white;}
  footer {color:var(--oranje);}
}

/* HEADER CSS */

.header_homepage {
  height: 75vh;
  position:relative;
}

.header_homepage .carousel {z-index:1; height:inherit;}

.header_homepage .carousel .carousel-item {background-size: cover; background-position: 50% 50%;
  /* filter:grayscale(100%) blur(2px); */
}

.header_homepage .color_layer {
  z-index:2;
  width:100%;
  position:absolute; top:0;
  height:inherit;
  background-color: var(--groen);
  opacity: 85%;
}

.header_homepage .text_layer {
  z-index:3;
  width:100%;
  position:absolute; top:0;
  height:inherit;
}

.header {
  min-height: 40vh;
  position:relative;
}

/* NAVBAR CSS  */

/* NAVBAR */

.navbar-container {
  transition: all 0.15s ease-in-out;
  position: fixed;
  z-index:99;
  top:0;
}

.navbar-container.not-on-top, .navbar-container.toggled  {
  background-color: rgba(24,56,52,.99);
  box-shadow: 0px 0px 20px 0px rgba(0,0,0,.8);
  transition: all 0.15s ease-in-out;
}

.navbar-dark .navbar-nav a.nav-link {
  color:white;
  padding: .5rem 1rem;
  transition: all 0.15s ease-in-out;
  white-space: nowrap;
}

a.nav-link.highlight {
  padding-right: 0;
  background-color: var(--oranje);
  color:white;
  padding: 0.5rem .75rem;
  border: var(--oranje) solid thin;
  border-radius: 0.3rem;
  font-weight: bold;
  margin: 0 1rem;
}

.navbar-dark .navbar-nav a.nav-link:hover {
  color: var(--rose);
}

.navbar-dark .navbar-nav a.nav-link.highlight:hover {
  font-weight: bold;
  background-color: var(--accent);
  color:white;
  /* color: var(--rose); */
}

.navbar-collapse.collapse.show ul, .navbar-collapse.collapsing ul {
padding-top: 1rem;
padding-bottom: 0.5rem;
margin-right:0;
}

.navbar-collapse.collapse.show .nav-link, .navbar-collapse.collapsing .nav-link {
  display:inline-block;
}

.navbar-collapse.collapse.show .nav-link.highlight, .navbar-collapse.collapsing .nav-link.highlight {
  margin-top:0.5rem; margin-bottom:0.5rem;
}

.navbar-collapse.collapse .navbar-nav {
margin-right: 0!important;
}

/* DROPDOWN */

.dropdown-menu {background-color: var(--rose); min-width: unset;}

.dropdown-item {padding-left: 1rem; padding-right: 1rem;}

.dropdown-item.active, .dropdown-item:hover {
    background-color: var(--oranje);
    color: white;
}

.nav-item.active, .dropdown-item.active {
  font-weight: bold;
}

.navbar-dark .navbar-nav .nav-item.active a.nav-link:not(.highlight) {color: var(--rose);}
.navbar-dark .navbar-nav .nav-item.active a.nav-link:hover {font-weight: bold;}

.navbar-container.buiten_beeld {
  margin-top:-7rem;
}

/* BLURRY BG  */

.blurrybg {
  overflow: hidden;
}

.blurrybg .container-fluid {
  position: relative;
  overflow: hidden;
  height:fit-content;
}

.blurrybg .text_layer {
  z-index:3;
  width:100%;
  position:relative;
  top:0;
  height:inherit;
  min-height: inherit;
}

.blurrybg .img_layer {
  z-index:1;
  width: 100%;
  height: inherit;
  position: absolute;
  top: 0;
  height: 100%;
  background-size: cover;
  background-position: 50% 50%;
}

.blurrybg .color_layer {
  z-index:2;
  width:100%;
  position:absolute; top:0;
  height:100%;
  opacity: 85%;
}

/* TEKST IN EEN BLURRYBG */

.blurrybg.bg-rose .text_layer {
  color:var(--antraciet); font-weight:400;
  h2, h3, h4 {color:var(--bruin);}
  a, b, li::before, h4::before {color:var(--bruin);}
}

.blurrybg.bg-oranje .text_layer {
  color:white; font-weight:200;
  h2, h3, h4 {color:var(--groen);}
  a, b {color:var(--bruin);}
  li::before, h4::before {color:var(--rose);}
}

.blurrybg.bg-bruin .text_layer {
  color:white; font-weight:100;
  h2, h3, h4, a, b {color:var(--rose);}
  li::before, h4::before {color:var(--oranje);}
}

.blurrybg.bg-groen .text_layer {
  color:white; font-weight:100;
  h2, h3, h4 {color:var(--rose);}
  a, b, li::before, h4::before {color:var(--oranje);}
}

.blurrybg.bg-accent .text_layer {
  color:white; font-weight:100;
  h2, h3, h4, a, b, li::before, h4::before {color:var(--rose);}
}

/* CARD */

.card {background-color:var(--rose);border-color: var(--oranje);border-style:none; font-weight:400;}
.card-body {font-size:.9rem;}
.card-header {background-color:var(--oranje); border-style:none; line-height:1.5rem;
  h4 {color:white!important;}
}
.card-footer {background-color: rgba(255,255,255,0.3); border-style: none; line-height:1.5rem; width: fit-content; margin-left: auto; border-top-left-radius: .25rem!important;border-bottom-left-radius: 0!important; font-size:smaller;
  a, a:hover {color:var(--oranje)!important;}
}

@media (max-width: 991.98px) {
  .card-group .card {border-radius: 0.25rem!important;}
  .card-group .card .card-header {border-top-left-radius:0.25rem!important; border-top-right-radius:0.25rem!important;}
  .card-group .card .card-body:last-child, .card-group .card .card-footer:last-child {border-bottom-left-radius:0.25rem!important; border-bottom-right-radius:0.25rem!important;}
}

.card-columns {column-count: 4;}
@media (max-width: 1199.98px) { .card-columns {column-count: 3;} }
@media (max-width: 991.98px) { .card-columns {column-count: 2;} }
@media (max-width: 575.98px) { .card-columns {column-count: 1;} }

.card-columns h2 {font-size: 2rem;}

.card button {color:white;}

/* BUTTONS  */

.btn {
  line-height: 1.1;
  padding:0.75rem;
}

.btn-groen {
  color: white;
  background-color: var(--groen);
  border-color: var(--groen);
}

.btn-oranje {
  color: white;
  background-color: var(--oranje);
  border-color: var(--oranje);
}

.btn-rose {
  color: var(--bruin);
  background-color: var(--rose);
  border-color: var(--rose);
}

.btn-bruin {
  color: white;
  background-color: var(--bruin);
  border-color: var(--bruin);
}

.btn-bruin.punt::after, .btn-accent.punt::after {color:var(--rose);}

.btn-accent {
  color: white;
  background-color: var(--accent);
  border-color: var(--accent);
}

.btn:hover, a:active .btn {
  background-color: var(--accent);
  color:white;
}

.btn-accent:hover, a:active .btn-accent {
  background-color: var(--oranje);
  color:white;
}

.btn.punt:hover::after, a:active .btn.punt {
  color:var(--rose);
}

a:hover {
  /* text-decoration: none; */
}

.btn svg {
  margin-right: 0.5rem;
  top: -1px;
  font-size:0.9rem;
  position: relative;
  color: var(--rose);
}

/* FOOTER CSS  */

.footer-container {
  background-color: var(--bruin);
}

.footer-container, .footer-container .plate--element__paragraph {
  line-height: 1.5rem;
}

.footer-container p, .footer-container p a {
  font-size:0.8rem;
  color:var(--oranje);
  margin:0;
}

.footer-container p:last-child {
  margin-bottom:0;
}

.footer-container h6:first-child {
  margin: 0 0 1rem 0;
}

.footer-container h6 {
  color:var(--rose);
  font-size:1.5rem;
}

.footer-container a {display: inline-block;}

.footer-container a, .footer-container a:hover, .footer-container svg {
  color:var(--rose);
}

/* SOCIAL ICONS */

.social-icon svg {margin-right: .5rem;}
.social-icon .icon {transform: translateY(1px);}
a:hover .social-icon .value {text-decoration: underline;}
a .social-icon .value {color:white;}
a:hover .social-icon .value {color:var(--rose);}

.bg-wit {
  .social-icon .icon {color:var(--oranje);}
  a .social-icon .value {color:#555;}
  a:hover .social-icon .value {color:var(--oranje);}
}

.bg-rose {
  .social-icon .icon {color:var(--bruin);}
  a .social-icon .value {color:var(--bruin);}
  a:hover .social-icon .value {color:var(--bruin);}
}

/* FORM  */

form {margin-top: .5rem;}

input, textarea, .field .placeholder, select {
  color: var(--antraciet);
  text-align: left;
}

input:not([type="file"]), textarea {font-weight:bold;}

input:not([type="file"]), textarea, .field .alternative_container {
  width:100%;
  border-radius:5px;
  border-width: thin;
  border-color: var(--rose);
  border-style: solid;
  padding: 13px 21px 13px 47px;
}

input:not([type="file"]):focus, textarea:focus, .field .alternative_container:focus {
  outline-color: var(--oranje);
}

input[type="file"] {
  margin-top: 8px;
  width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

.inputfile + label {
  display: inline-block;
}

input[id^=dropdown_input]{
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
  border: 0;
  pointer-events: none;

}

textarea {height:9rem;}

.alternative_container select {
  border:none;
  width:100%;
  padding:14px;
  padding-left: 36px;
  padding-right: 26px;
  border-radius: 5px;
}

::placeholder {
  color: var(--oranje);
  font-weight:bold;
  white-space: initial;
  opacity:1;
  overflow: visible;
  vertical-align: middle;
}

.field {
  padding: 0;
  margin-bottom:1rem;
  position: relative;
}

.field .icon {
  position:absolute;
  top: 15px;
  left: 17px;
  font-size: .9rem;
  color: var(--oranje);
}

.field .icon i {
  text-align: center;
  width: 1.25em;
}

.bg-oranje .btn-oranje {border:1px solid var(--rose);}

/* BREADCRUMBS */

.breadcrumb-item+.breadcrumb-item::before { content: ""; padding:0;}

ol.breadcrumb {
  margin: 2rem 0;
  background-color: var(--rose);
  font-size: 0.9rem;
  width:fit-content;
  padding: .5rem 1rem;
}

li.breadcrumb-item {padding: 0;}

li.breadcrumb-item a, li.breadcrumb-item a:hover, .breadcrumb-item.active {
  color: var(--antraciet);
}

li.breadcrumb-item a:hover {
  text-decoration: underline;
}

ol.breadcrumb span.divider {
  padding: 0 0.75rem;
  transform: translateY(0.3rem);
  font-size: x-small;
  color: var(--oranje);
  }

/* ZOOM EFFECT CAROUSEL SLIDER HOMEPAGE */

@keyframes zoom {
  from {
    transform: scale(1, 1);
  }
  to {
    transform: scale(1.5, 1.5);
  }
}

/* ACCORDION  */
.accordion {position: relative; overflow:hidden;}

.accordion-item {
  border:none;
  position: relative;
  z-index: 0;
}

.accordion-item:not(:first-of-type) {border-top: solid thin var(--rose);}

.accordion a:hover {cursor: pointer;}

.accordion h4 {margin:0;}
.accordion h4::before {
    content: ".";
    font-family: 'Playfair Display', serif;
    font-size: 6rem;
    position: absolute;
    color: var(--accent)!important;
    top: -22px;
    left: 12px;
    z-index: 1;
    }

.accordion-header {
  background-color:var(--oranje);
  position: relative;
}

.accordion .accordion-item .accordion-header button.accordion-button {
  color:white;
  margin:0;
  font-size:1rem;
  font-weight: bold;
  line-height:2rem;
  background-color: unset;
  padding: .75rem 1.5rem .75rem 3rem;
}

.accordion-button:focus {box-shadow: none;}

.accordion .timeline_line {
  position: absolute;
  height: 100%;
  top: 0;
  left: 23px;
  border-left: var(--accent) solid 4px;
  z-index: 1;
}

.accordion-item:first-child .timeline_line {top: 1.5rem;}
.accordion-item:last-child .timeline_line {height: 1.5rem;}

.accordion-body {
  padding-left: 3rem;line-height:1.5rem;font-size:0.9rem; background-color:var(--rose); font-weight: 400;
  p:last-child {
    margin-bottom:0;
    }
}