/*
 Theme Name:   Blockbuilding
 Theme URI:    http://example.com/naam-van-jouw-child-thema/
 Description:  Thema voor de deurbel en presentatiescherm balie
 Author:       ICIT
 Author URI:   http://example.com
 Template:     twentytwentyfour
 Version:      1.0.0
*/

.body {margin-top:-16px;}

/* Stijlen voor de deurbel pop-up */
#popupMessage {
    display: none; /* Verberg standaard */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9); /* Begin iets kleiner voor 'pop' effect */
    width: auto;
    max-width:700px;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    opacity: 0; /* Begin transparant voor fade-in effect */
    transition: opacity 0.5s ease, transform 0.5s ease; /* Animeren van de opacity en transform */
}
/* Klasse toegevoegd wanneer getoond */
.visible {
    display: block; /* Toon element */
    opacity: 1; /* Volledig zichtbaar */
    transform: translate(-50%, -50%) scale(1); /* Terug naar normale grootte */
}
/* Stijl toevoegen om de pop-up te verbergen */
.hidden {
    opacity: 0; /* Maak de pop-up volledig transparant */
    visibility: hidden; /* Zorg dat de pop-up niet interactief is wanneer verborgen */
    transition: visibility 0s 0.5s, opacity 0.5s ease-out; /* Vertraag het verbergen van visibility tot na de fade-out */
}
/* Achtergrond overlay */
.popup-overlay {
    display: none; /* Verberg standaard */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Halfdoorzichtige zwarte achtergrond */
    z-index: 999; /* Zorg dat dit onder de pop-up zelf staat */
    opacity: 0; /* Begin transparant voor fade-in effect */
    transition: opacity 0.5s ease; /* Animeren van de opacity */
}
/* Animatie */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.deurbel-knop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    margin: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animatie voor hover effect */
	 cursor: pointer; /* Maakt de cursor een handje over het gehele blok */
	width: 250px;
	height: 250px;
}

.deurbel-knop:hover {
    transform: translateY(20px); /* Laat het blok iets oplichten bij hover */
}

.deurbel-knop img { /* Stijlen voor het logo */
    max-width: 400px; /* Maximale breedte van het logo */
 }

.deurbel-knop p { /* Stijlen voor de tekst */
    font-size: 16px; /* Lettergrootte */
    text-align: center; /* Centreer de tekst */
  text-decoration: none; /* Verwijder de onderstreping van links */
}
.deurbel-knop a { /* Stijlen voor de link */
    font-size: 16px; /* Lettergrootte */
    text-align: center; /* Centreer de tekst */
  text-decoration: none; /* Verwijder de onderstreping van links */
}