/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */
/* Slider Container Stijl */
.acf-galerij-slider {
    max-width: 600px; /* Pas de maximale breedte aan naar wens */
    margin: auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Slider Item (Slide) Stijl */
.acf-galerij-slider .slide {
    position: relative;
}

.acf-galerij-slider .slick-slide img {
    width: 100%; /* Zorgt dat de afbeelding de volledige breedte van de container vult */
    height: auto; /* Behoudt de aspectverhouding */
    display: block; /* Verwijdert extra witruimte onder de afbeelding */
	    object-fit: cover; /* Snijdt de afbeelding bij om de container te vullen zonder de aspectverhouding te verliezen */
    object-position: center; /* Centreert de afbeelding in de container */
}

.acf-galerij-slider .slick-slide {
    height: 250px; /* Stel een vaste hoogte in voor elke slide */
    overflow: hidden; /* Verbergt delen van de afbeelding die buiten de container vallen */
}


/* Slick Slider Navigatieknoppen (Prev/Next) Stijl */
.slick-prev, .slick-next {
    color: #333; /* Kleur van de navigatiepijlen */
    font-size: 24px; /* Grootte van de pijlen */
}

/* Slick Dots/Pagination Stijl */
.slick-dots {
    text-align: center;
    margin-top: 10px;
}

.slick-dots li {
    display: inline-block;
    margin: 0 5px;
}

.slick-dots li button {
    font-size: 0; /* Verbergt de standaard tekst */
    line-height: 0;
}

.slick-dots li button:before {
    font-size: 10px;
    line-height: 20px;
    opacity: .75;
    color: #333; /* Kleur van de dots */
}

.slick-dots li.slick-active button:before {
    opacity: 1;
    color: #000; /* Kleur van de actieve dot */
}

/* Slider Navigatieknoppen Stijl */
.slick-prev, .slick-next {
    color: #ffffff; /* Kleur van de pijlen */
    font-size: 24px; /* Grootte van de pijlen */
    line-height: 1; 
    background: #11B4E6; /* Achtergrondkleur */
	border: none;
    border-radius: 50%; /* Maakt de knoppen rond */
    padding: 10px; /* Padding binnen de knoppen */
    height: 40px; /* Hoogte van de knoppen */
    width: 40px; /* Breedte van de knoppen */
    z-index: 25; /* Zorgt dat de knoppen bovenop de slider liggen */
    opacity: 0.75; /* Doorzichtigheid van de knoppen */
    transition: opacity 0.3s ease; /* Transitie-effect voor doorzichtigheid */
}

/* Toont de knoppen duidelijker wanneer de muis eroverheen gaat */
.slick-prev:hover, .slick-next:hover {
    opacity: 1!important;
	background: #11B4E6; /* Achtergrondkleur */
	
}

/* Positie van de vorige knop */
.slick-prev {
    left: -15px; /* Afstand vanaf de linker rand van de slider */
}

/* Positie van de volgende knop */
.slick-next {
    right: -15px; /* Afstand vanaf de rechter rand van de slider */
}

/* Correctie voor de positie van de pijlsymbolen binnen de knoppen */
.slick-prev:before, .slick-next:before {
    font-size: 20px; /* Grootte van de pijlsymbolen */
}
.slick-prev, .slick-next {
    font-size: 0; /* Verwijdert zichtbare tekst */
}

.slick-prev:before {
    content: '\2190'; /* Unicode voor het linkerpijlsymbool */
}

.slick-next:before {
    content: '\2192'; /* Unicode voor het rechterpijlsymbool */
}
}

#custom-bedrijfsformulier {
    max-width: 600px; /* Max breedte van het formulier */
    margin: 0 auto; /* Centreert het formulier horizontaal */
    padding: 20px; /* Voegt padding toe rondom het formulier */
    background-color: #f9f9f9; /* Lichtgrijze achtergrondkleur */
    border-radius: 8px; /* Ronde hoeken */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Subtiele schaduw */
}

#custom-bedrijfsformulier input[type="text"],
#custom-bedrijfsformulier input[type="email"],
#custom-bedrijfsformulier input[type="url"] {
    width: 100%; /* Zorgt dat de velden de volledige breedte van het formulier gebruiken */
    padding: 10px; /* Voegt padding toe binnenin de velden */
    margin-bottom: 15px; /* Voegt ruimte toe onder elk veld */
    border: 1px solid #ccc; /* Lichte rand rondom de velden */
    border-radius: 4px; /* Ronde hoeken voor de velden */
}

#custom-bedrijfsformulier input[type="submit"] {
    width: auto; /* Automatische breedte gebaseerd op de inhoud */
    padding: 10px 20px; /* Padding rondom de tekst */
    background-color: #11B4E6; /* Blauwe achtergrondkleur */
    color: white; /* Witte tekstkleur */
    border: none; /* Geen rand */
    border-radius: 4px; /* Ronde hoeken */
    cursor: pointer; /* Verandert de cursor naar een handje */
    font-size: 16px; /* Grotere tekst */
}

#custom-bedrijfsformulier input[type="submit"]:hover {
    background-color: #0056b3; /* Donkerdere blauwe kleur bij hover */
}

#form-response {
    margin-top: 20px; /* Ruimte boven de responsmelding */
    font-size: 16px; /* Grotere tekst voor de responsmelding */
    color: #28a745; /* Groene tekstkleur voor succesmeldingen */
    text-align: center; /* Centreert de tekst */
}