@charset "utf-8";
/* CSS Document */


/* Header content (tekst) styling */
.header-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    font-size: 2rem;
    z-index: 10;
}

/* Titel styling */
.header-content h1 {
    font-size: 3rem;
    margin-bottom: 20px;
}

/* Subtitel styling */
.header-content p {
    font-size: 1.5rem;
}

/* EFFECTS */
.textblock {
    background: rgba(255, 255, 255, 0.85); /* Witte achtergrond met 10% transparantie */
    backdrop-filter: blur(5px) saturate(180%); /* Sterker blur-effect en levendigere kleuren */
    -webkit-backdrop-filter: blur(5px) saturate(180%); /* Voor Safari-ondersteuning */
    border-radius: 5px; /* Afgeronde hoeken */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Subtiele schaduw voor diepte */
    padding: 20px; /* Ruimte binnen de div */
    color: black; /* Tekstkleur */
    border: 1px solid rgba(255, 255, 255, 0.3); /* Lichte inner border voor glas-effect */
    position: relative; /* Nodig voor de glanslaag */
    overflow: hidden; /* Voorkomt dat effecten buiten de div vallen */
}


.imageblock {
    background: rgba(0, 0, 0, 0.85); /* Witte achtergrond met 10% transparantie */
    backdrop-filter: blur(5px) saturate(180%); /* Sterker blur-effect en levendigere kleuren */
    -webkit-backdrop-filter: blur(5px) saturate(180%); /* Voor Safari-ondersteuning */
    border-radius: 5px; /* Afgeronde hoeken */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Subtiele schaduw voor diepte */
    padding: 20px; /* Ruimte binnen de div */
    color: black; /* Tekstkleur */
    border: 1px solid rgba(255, 255, 255, 0.3); /* Lichte inner border voor glas-effect */
    position: relative; /* Nodig voor de glanslaag */
    overflow: hidden; /* Voorkomt dat effecten buiten de div vallen */
}



/* T2M EXTRA */

body .banner_image {
border-radius:10px;
margin-bottom:-150px;
}


/* Pagina Extra */
.titel {
   background: rgba(255, 255, 255, 0.95); /* Witte achtergrond met transparantie */
    backdrop-filter: blur(10px); /* Blur effect */
    -webkit-backdrop-filter: blur(10px); /* Voor Safari ondersteuning */
    border-radius: 5px; /* Optioneel voor afgeronde hoeken */
	
    padding: 20px;
    display: inline-block; /* Zorgt ervoor dat het blok net zo breed is als de tekst */

}

.titel h1 {
    font-weight: bold;
    color: #003057;
    margin: 0; /* Verwijdert eventuele standaard marges van h1 */
	text-transform: uppercase;
	font-family: 'shapiro-heavy';
	font-size:20px;
}

.tekst {

	background: rgba(255, 255, 255, 0.95); /* Witte achtergrond met transparantie */
    backdrop-filter: blur(10px); /* Blur effect */
    -webkit-backdrop-filter: blur(10px); /* Voor Safari ondersteuning */
    border-radius: 5px; /* Optioneel voor afgeronde hoeken */
	
    padding: 40px;
    display: inline-block; /* Zorgt ervoor dat het blok net zo breed is als de tekst */
	margin-bottom:20px;
}


.tekst h2 {

	 font-weight: bold;
    color: #003057;
    margin: 0; /* Verwijdert eventuele standaard marges van h1 */
	text-transform: uppercase;
	font-family: 'shapiro-heavy';
	font-size:15px;
	padding-top:10px;
}

.tekst p{
	max-width:1050px;
	font-size:14px;
}






	
	/* Mobiele styling */
@media (max-width: 768px) {
    .titel {
        padding: 10px; /* Verhoog padding voor mobiele schermen */
        display: inline-block;
        text-align: left; /* Center de titel voor mobiel */
		margin-left:25px;
		background: rgba(255, 255, 255, 0.7); /* Witte achtergrond met transparantie */
    backdrop-filter: blur(10px); /* Blur effect */
    -webkit-backdrop-filter: blur(10px); /* Voor Safari ondersteuning */
    border-radius: 5px; /* Optioneel voor afgeronde hoeken */
		
    }
	
	
    .titel h1 {
        font-size: 8px; /* Verklein de fontgrootte voor mobiel */
		
    }

    .tekst {
		display: inline-block;
		margin-left:25px;
		margin-right:25px;
        padding: 10px; /* Verlaag padding voor mobiel */
		background: rgba(255, 255, 255, 0.7); /* Witte achtergrond met transparantie */
    backdrop-filter: blur(10px); /* Blur effect */
    -webkit-backdrop-filter: blur(10px); /* Voor Safari ondersteuning */
    border-radius: 5px; /* Optioneel voor afgeronde hoeken */
       
    }

    .tekst p {
        font-size: 12px; /* Verklein tekstgrootte voor mobiel */
        max-width: 100%; /* Zorg ervoor dat de tekst binnen het scherm past */
    }
}

/* Extra kleine schermen zoals smartphones in portretmodus */
@media (max-width: 480px) {
    .titel h1 {
        font-size: 16px; /* Nog kleinere fontgrootte voor kleine schermen */
    }

    .tekst p {
        font-size: 14px; /* Verklein de tekst verder */
    }
}