/* Basisinstellingen */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    background-color: #231f20;  /* Donkere achtergrondkleur voor de inhoud */
    color: white; /* Witte tekstkleur voor leesbaarheid */
    line-height: 1.6;
	font-size:1.2em
}
h4 
{
	font-size:1.3em;
	text-transform:uppercase;
	letter-spacing:2px;
	font-weight:normal;
}
.container {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header Stijl */
header {
    background-color: rgba(35, 31, 32, 0.8); /* Semi-transparante achtergrondkleur */ /* Donkere achtergrond */
    color: white;
    padding: 10px 0;
    border-bottom: 1px solid red;
    position: relative;
}

header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

header .logo img {
    max-height: 50px;
}

header nav  ul {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}

header nav li {
    margin: 0 15px;
}

header nav li a {
    color: white; /* Witte links */
    text-decoration: none;
    transition: color 0.3s; /* Zachte overgang */
    text-transform: uppercase;
    letter-spacing: 2px;
}

header nav li a:hover {
    color: #bf1b2c; /* Rode hover */
}

header .menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

header .menu-toggle span {
    height: 3px;
    width: 25px;
    background: white;
    margin: 4px 0;
    transition: transform 0.3s, opacity 0.3s;
}

header .menu-toggle.active span:nth-child(1) {
    transform: translateY(10.5px) rotate(45deg);
}

header .menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

header .menu-toggle.active span:nth-child(3) {
    transform: translateY(-10.5px) rotate(-45deg);
}

@media (max-width: 768px) {
    header nav .menu {
        display: none;
        flex-direction: column;
        width: 100%;
        background: #231f20; /* Donkere achtergrond */
        position: absolute;
        top: 80px;
        left: 0;
        max-height: 0;
        transition: max-height 0.5s ease-out;
    }

    header nav .menu.active {
        display: flex;
        max-height: 500px; /* Max hoogte kan aangepast worden aan het aantal items */
        transition: max-height 0.5s ease-in;
		z-index:9999;
		border-bottom: 1px solid white;
    }

    header nav .menu li {
        text-align: center;
        margin: 10px 0;
    }

    header nav .menu li a {
        display: block;
        padding: 10px 0;
    }

    header .menu-toggle {
        display: flex;
    }
}

/* Footer Stijl */
footer {
	border-top: 1px solid red;
       background-color: rgba(35, 31, 32, 0.8);
    color: white;
    padding: 20px 0;
}

footer .footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

footer .footer-logo img {
    max-height: 50px;
}

footer .footer-nav ul, footer .footer-socials ul {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}

footer .footer-nav ul li, footer .footer-socials ul li {
    margin: 0 15px;
}

footer .footer-nav ul li a, footer .footer-socials ul li a {
    color: white; /* Witte links */
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s; /* Zachte overgang */
}

footer .footer-nav ul li a:hover, footer .footer-socials ul li a:hover {
    color: #bf1b2c; /* Rode hover */
}

footer .footer-bottom {
    text-align: center;
    margin-top: 20px;
}

@media (max-width: 768px) {
    footer .footer-content {
        flex-direction: column;
        text-align: center;
    }

    footer .footer-nav ul, footer .footer-socials ul {
        flex-direction: column;
        margin-top: 10px;
    }

    footer .footer-nav ul li, footer .footer-socials ul li {
        margin: 10px 0;
    }
}

/* Algemene Stijlen */
h1, h2, h3, h4, h5, h6 {
    margin-bottom: 20px;
    line-height: 1.2;
}

p {
    margin-bottom: 20px;
}

a {
    color: white;
    text-decoration: none;
    transition: color 0.3s;
}

a:hover {
    color: #bf1b2c;
}

/* Knoppen */
button, .btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #bf1b2c;
    color: white;
    border: none;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s;
}

button:hover, .btn:hover {
    background-color: white;
    color: red;
    border: 1px solid red;
}

/* Formulieren */
input, textarea {
    width: 100%;
    padding: 10px;
    margin: 10px 0 20px 0;
    border: 1px solid #ccc;
}

input:focus, textarea:focus {
    border-color: #333;
}

/* Lijsten */
ul {
    list-style-type: disc;
    margin: 0 0 20px 20px;
}

ol {
    list-style-type: decimal;
    margin: 0 0 20px 20px;
}

/* Tabellen */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

table th, table td {
    padding: 10px;
    border: 1px solid #ccc;
}

table th {
    background-color: #f4f4f4;
}

#primary,
section {
    padding: 40px;
}

/* Algemene stijl voor over-block */
.over-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0;
}

.over-block img {
 	max-width: 100%;
	width: 1vw;
}
.over-block_image-container {
    overflow: hidden;
    position: relative;
   height: 44vw;
    width: 50vw;
}
.over-block_image-container img {
     height: 100%;       /* Zorgt ervoor dat de afbeelding de volledige hoogte van de container vult */
    width: 100%;        /* Houdt de breedte in verhouding */
    display: block;     /* Verwijdert eventuele extra ruimte onder de afbeelding */
    object-fit: cover; 
}


/* Voor de afbeelding aan de linkerkant en tekst aan de rechterkant */
.left-image {
  flex-direction: row;
}

.left-image .over-block__image {
  order: 1;
    height: auto;
}

.left-image .over-block__content {
  order: 2;
}

/* Voor de tekst aan de linkerkant en afbeelding aan de rechterkant */
.right-image {
  flex-direction: row-reverse;
}

.left-image .over-block__image {
  order: 2;
}

.right-image .over-block__content {
  order: 1;
}

/* Zorg ervoor dat beide blokken ongeveer even groot zijn */
.over-block__image, .over-block__content {
  flex: 1 1 50%;
  max-width: 50%;
  padding: 10px;
}
/* Algemene stijl voor over-block */
.over-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0;
}

.over-block img {
 	max-width: 100%;
	width: 1vw;
}
.over-block_image-container {
    overflow: hidden;
    position: relative;
   height: 57vw;
    width: 50vw;
}
.over-block_image-container img {
     height: 100%;       /* Zorgt ervoor dat de afbeelding de volledige hoogte van de container vult */
    width: 100%;        /* Houdt de breedte in verhouding */
    display: block;     /* Verwijdert eventuele extra ruimte onder de afbeelding */
    object-fit: cover; 
}

/* Mobiel weergave */
@media (max-width: 768px) {
	header nav .menu ul {
display:block;
}
  .over-block {
    flex-direction: column;
  }
.over-block img {
    max-width: 100%;
    width: 100vw;
}

  .over-block__image, .over-block__content {
    max-width: 100%;
	  
  }
	.over-block__image{
		width:100%
	}
	.over-block_image-container {
    width: 100vw;
		height:100vw;
}
}
.breadcrumb-trail {
  background-color: #231f20; /* Achtergrondkleur van de breadcrumb */
  padding: 10px 15px; /* Binnenmarge rondom de breadcrumb */
  margin-bottom: 20px; /* Ruimte onder de breadcrumb */
  font-size: 14px; /* Tekengrootte */
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.breadcrumb-trail ul {
  list-style: none;
  display: flex;
  padding: 0;
  margin: 0;
}

.breadcrumb-trail li {
  margin: 0;
  display: flex;
  align-items: center;
}

.breadcrumb-trail li + li::before {
  content: ">";
  padding: 0 10px;
  color: #fff; /* Kleur van de scheidingspijlen */
}

.breadcrumb-trail a {
  text-decoration: none;
  color: #fff; /* Kleur van de links zonder hover */
  transition: color 0.3s;
}
.trail-items li::after {
    content: "";
}


.breadcrumb-trail a:hover {
  color: #ff0000; /* Kleur van de links bij hover */
}

.breadcrumb-trail span[itemprop="name"] {
  color: #fff; /* Kleur van de tekst */
}
.entry-header
{
	display:none;
}

/* Basis CSS voor overgang */
body.home {
    background-size: cover;
    background-position-y: 57%;
    transition: background-image 1s ease-in-out; /* Zorgt voor vloeiende overgang */
}

/* Optioneel: CSS voor extra overgangsstyling */
body.home.fade {
    opacity: 0.5;
}

@media (max-width: 768px) {
body.home {
    background-position:center;
}
}

div.homepage, .homepage .hero-section {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-family: Arial, sans-serif;
}

.hero-content {
    text-align: center;
    background: rgba(0, 0, 0, 0.7);
    padding: 20px;
    border-radius: none;
	border:1px solid red;
}

.hero-content h1 {
  font-size: 2.5em;
  margin-bottom: 20px;
}

.hero-content .main-text {
  font-size: 1.2em;
  margin-bottom: 20px;
}

.hero-content .cta-button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #ff0000; /* Kleur van de knop */
  color: #fff;
  text-decoration: none;
  font-size: 1em;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.hero-content .cta-button:hover {
  background-color: #cc0000; /* Kleur van de knop bij hover */
}

.hero-content .secondary-text {
  font-size: 0.9em;
  margin-top: 20px;
}

.hero-content .secondary-text a {
  color: #ff0000; /* Kleur van de link */
  text-decoration: none;
}

.hero-content .secondary-text a:hover {
  text-decoration: underline;
}
/* Algemeen formulier styling */
.wpcf7-form {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
	    margin-top: 100px;
    margin-bottom: 100px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
background-color: rgba(255, 255, 255, 0);
}

/* Label styling */
.wpcf7-form p {
    margin-bottom: 20px;
}

.wpcf7-form label {
    font-weight: bold;
    margin-bottom: 5px;
    display: block;
}

/* Invoervelden styling */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form select,
.wpcf7-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box;
}

/* Tekstarea styling */
.wpcf7-form textarea {
    resize: vertical;
}

/* Invoer focus styling */
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
    border-color: #0073aa;
    outline: none;
}

/* Submit knop styling */
.wpcf7-form input[type="submit"] {
    background-color: #d9534f; /* Rode achtergrond */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

.wpcf7-form input[type="submit"]:hover {
    background-color: #c9302c; /* Donkerdere rode kleur bij hover */
}

/* Responsieve styling */
@media (max-width: 600px) {
    .wpcf7-form {
        padding: 15px;
    }
}

@media (max-width: 768px) {
body.home {
    background-position:center;
}
.homepage .hero-section {
    height: 90vh;
}
.homepage .hero-section .hero-content 
	{
		width:80%;
    position: relative;
    top: -50px;
	}
.hero-content h1 {
    font-size: 1.2em;
    margin-bottom: 20px;
}
}