/* ==========================================================================
   Algemene Basis Styles
   ========================================================================== */
html, body {
    overflow-x: hidden;
    overflow-y: hidden;
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Custom Scrollbar
::-webkit-scrollbar { 
    width: 10px; 
    background: transparent; 
    padding-top: 3px; 
}
 */
::-webkit-scrollbar-thumb {  
    cursor: pointer;  
    background-color: steelblue;
    border-radius: 5px;
}	



/* Verberg de scrollbalk volledig op de hoofdpagina en de body */
html::-webkit-scrollbar, 
body::-webkit-scrollbar { 
    display: none !important;
    width: 0px !important;
}

/* Behoud de scrollbalk alléén voor elementen die écht moeten kunnen scrollen (zoals popup-menu's) */
div::-webkit-scrollbar, 
span::-webkit-scrollbar, 
iframe::-webkit-scrollbar { 
    width: 8px; 
    background: transparent; 
}

div::-webkit-scrollbar-thumb, 
span::-webkit-scrollbar-thumb, 
iframe::-webkit-scrollbar-thumb {  
    cursor: pointer;  
    background-color: steelblue;
    border-radius: 5px;
}
/* ==========================================================================
   Menu & Knoppen (Gecorrigeerd voor betere zichtbaarheid)
   ========================================================================== */

.mplaat {
    position: fixed; 
    padding: 1px; 
    width: 200px;
    line-height: 150%;
    z-index: 100000; 
    text-align: center; 
    height: 35px;
    margin-top: 0px;
    border-radius: 5px;
    color: gray;
    transition: all 0.3s ease;
		background: rgba(255,255,255,0); 
		cursor:pointer;
}

/* Hover effecten voor de menu-container */
.mplaat:hover {
    border-radius: 0 0 5px 5px;
    color: silver;
		background: rgba(255,255,255,0); 

}



/* Toon de tekst zodra je over de container (.mplaat) heen beweegt */
.mplaat:hover .knoptekst { 
    display: block; 
    color: white !important; 
     background: rgba(255,255,255,0); 
		   background: steelblue !important; 
}



.wpl { 
    background: rgba(255,255,255,0);  
    position: absolute; 
    top: 0;
   
    width: 30px;
    height: auto; 
    padding: 10px;
    border-radius: 5px; 
    cursor: pointer; 
    transition: background 0.3s ease;
		border:1px solid rgba(255,255,255,0);
		 
} 

	
.knoptekst { 
    display: none; /* Standaard verborgen */
    position: absolute;
    font-family: system-ui, sans-serif;
    font-size: 10px;
    line-height: 140%;
    width: 60%;
    height: 15px;
    padding: 5px;
    text-align: center; 
    margin-top: 7px;   
		color: rgba(0, 0, 0, 1); 
		border:1px dotted rgba(0,0,0,1);
		Border-radius:5px;
}

/* 
.knoptekst:hover {color: black !important;   background: white !important; }


#tekstap { position: relative; left: 0; width: 75%; text-align: left; font-size: 10px; }


==========================================================================
   Bijlage ID Selectors
   ========================================================================== */
#bijlage {
    position: absolute;
    display: none; 
    overflow-y: auto;
    overflow-x: hidden;
    width: fit-content; 
    opacity: 1; 
    z-index: 2;
    height: auto;
		border-radius:0px;
			
}

#bijlage:hover {
    opacity: 1; 

}


#bijlage:hover #pdfbijlage {
    opacity: 0.4;
}

#pdfbijlage {
    display: none; 
    overflow-x: hidden;  
    width: fit-content; 
    background: transparent; 
    opacity: 1; 
    z-index: 2;
}

#pdfbijlage:hover #bijlage {
    opacity: 0.4;
}

#pdfbijlage:hover {
    opacity: 1; 
 
}

/* ==========================================================================
   Knoppen, Teksten & Tabellen
   ========================================================================== */
.menuzien {
    width: 14%; 
    height: 100%; 
    margin-top: 0; 
    cursor: pointer; 
    border-radius: 0 10px 10px 0; 
    color: black;  
    background: transparent;  
}

#plaatjestekst {  
    font-family: arial, sans-serif;  
    font-size: 12px;
    color: black;
    display: block;			
    text-align: center;	
    cursor: pointer;
    width: 80%; 
    right: 10%;
}

#plaatjestekst:hover {
    background: rgba(255, 255, 255, 1);
} 

#plaatjestekst:hover .thu {
    background: transparent; 
} 

.thu {
    position: absolute; 
    display: block !important;
    text-align: center;	
    padding: 2px; 
    z-index: 1;  
    font-family: Arial, sans-serif;  
    color: gray;
    font-weight: bold;
    cursor: pointer;
    bottom: 0;
    background: linear-gradient(to bottom, silver 0%, white 50%, silver 100%);
    font-size: 12px; 
    border-radius: 5px;
    border: 1px solid white; 
    height: auto; 
    width: 2.5%;
}

.thu:hover {
    color: white;  
    background: linear-gradient(to bottom, steelblue 0%, black 50%, steelblue 100%); 
    border: 1px solid white;  
}

#contactplaatjediv:hover {
    color: white; 
    background: steelblue; 
}

.tdstijl { 
    padding-right: 5px; 
    padding-left: 0; 
    font-style: normal; 
    line-height: 150%; 
    color: steelblue; 
    cursor: pointer; 
    border-left: 0px solid transparent; 
    background: transparent;  
    border-radius: 0;  
    width: 100%; 
}

.tdstijl:hover {
    color: red;   
    border-left: 0px solid red; 
}

.over {
    color: steelblue;
    cursor: pointer;  
}

.over:hover {
    color: red; 
    background: white;
}

.q { 
    color: steelblue; 
    cursor: pointer; 
} 

.q:hover { 
    color: red; 
}

.mpla1 {
    position: absolute; 
    cursor: pointer; 
    bottom: 3px; 
    top: 5px;
    padding: 5px; 
    border: 0;
    line-height: 150%;
    color: black; 
    z-index: 1; 
    background: transparent; 
    border-radius: 5px; 
    text-align: left; 
    width: 30px; 
    height: 30px;
}

.mpla1:hover {
    filter: grayscale(0); 
    opacity: 1;
    border-radius: 5px !important;
    color: white; 
    background: rgba(255, 255, 255, 1); 
}

/* ==========================================================================
   Keyframes (Animaties)
   ========================================================================== */
@keyframes mein {
    from { top: -80%; left: -30%; opacity: 0; }
    to { top: 0; left: 0; opacity: 1; }
}
@keyframes meout {
    from { left: 0; }
    to { left: -30%; }
}
@keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes fadeout {
    from { opacity: 1; }
    to { opacity: 0.8; } /* Dubbele animatie samengevoegd naar de unieke waarde */
}
@keyframes linksin {
    from { left: -25%; }
    to { left: 0; }
}  
@keyframes linksin2 {
    from { left: -25%; }
    to { left: 20%; }
}
@keyframes rechtsin {
    from { right: -25%; }
    to { right: 0; }
}
@keyframes vin {
    from { left: -20%; }  
    to { left: 0; }
}
@keyframes vuit {
    from { left: 0; }  
    to { left: -20%; }
}
@keyframes uit {
    from { width: 4%; }
    to { width: 10%; }
}
@keyframes formFade {
    from { transform: rotate(-270deg); opacity: 0; }
    to { transform: rotate(0deg); opacity: 1; }
}
@keyframes formFade2 {
    from { transform: rotate(-450deg); opacity: 0; }
    to { transform: rotate(0deg); opacity: 1; }
}
@keyframes formFade3 {
    from { transform: rotate(-270deg); opacity: 0; }
    to { transform: rotate(30deg); opacity: 1; }
}
@keyframes formFade4 {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes vanboven {
    from { top: -40%; }  
    to { top: 40%; }
}
@keyframes vanboven2 {
    from { top: 110%; }  
    to { top: 0%; }
}
@keyframes bovin {
    from { top: -40%; }  
    to { top: 0%; }
}
/* ==========================================================================
   Headers & Tekst (SVG) Elements
   ========================================================================== */
#mydivheader {
    padding: 10px;
    cursor: move;
    z-index: 1;
    background-color: #2196F3;
    color: #fff;
}

#kopje {
    background: transparent; /* Typefout 'rga' hersteld naar transparent */
}
/*/
.v { 
    position: absolute; 
    height: auto; 
    cursor: pointer; 
    z-index: 2; 
    background: transparent;    
    filter: grayscale(1); 
    opacity: 0.5; 
    margin-bottom: 0;  
    padding: 1px; 
    border-bottom: 0px solid white; 
    border-radius: 50%; 
    display: none;  
}
  
.v:hover {
    filter: grayscale(0); 
    opacity: 1; 
    border-bottom: 0px solid red; 
}


.v:hover #plaatjestekst {
    display: block;
}
/*/

.it {
    position: fixed;
}

.it:hover .plp {
    filter: grayscale(0); 
    opacity: 1;
}

.it:hover .my-text { 
    fill: red;
}

/* SVG Tekst styling */
.my-text {
    fill: steelblue; 
    font-size: 22px;
}

.my-text:hover {
    fill: red; 
}

.my-text1 {
    fill: steelblue; 
    font-size: 14px; 
    color: steelblue;
    margin-left: 10%;
}

.my-text1:hover {
    fill: red; 
}
		
.plp {
    filter: grayscale(0); 
    opacity: 1; /* Laatste waarde overschreef 0.3 */
}

.plp:hover {
    filter: grayscale(0); 
    opacity: 1; 
}

/* ==========================================================================
   Mobiele Knoppen & Selectors
   ========================================================================== */
.mobknop {
    position: fixed; 
    left: 0;
    min-height: 5%;
    height: auto; 
    padding: 10px;
    line-height: 150%;  
    text-align: center; 
    font-size: 10px; 
    font-family: verdana, sans-serif; 
    color: black; /* Overschrijft wit  cursor: pointer; */
   
    opacity: 1;
    border-radius: 15px;
    background: transparent; 
  /*   box-shadow: 5px 5px 20px #f2f2f2; Laatste geldige schaduw behouden */
}

.mobknop:hover { 
    border-radius: 15px;   
    opacity: 1;  
    background: transparent; 
}

/* Elementen binnen de mobiele knop bij hover */
.mobknop:hover .mom {
    display: block; 
    padding: 0; 
    opacity: 1; 
    color: red; 
    width: 80% !important; 
    margin-left: 10%; 
    border-radius: 15px; 
    box-shadow: 5px 5px 20px transparent;
}

.mobknop:hover .knoptekst {
    display: block; 
    color: yellow; 
}

.mom {
    display: none; 
    opacity: 0.8; 
    border-radius: 10px; 
    width: 30%;  
    padding: 2px; 
    box-shadow: 5px 5px 20px transparent; 
    margin-bottom: 1px; 
    background: transparent; 
}

.mob {
    display: none; 
    text-align: center; 
    width: 100%; 
    color: steelblue; 
    cursor: pointer; 
    font-style: italic; 
    font-size: 11px;  
    margin-top: 5px; 
    padding: 5px; 
    background: transparent;
}

.mob:hover {
    color: aqua !important;
}

.te { 
    position: absolute; /* Toegevoegd voor werking van bottom */
    bottom: 0; 
    width: 100%; 
    padding: 5px; 
    line-height: 150%; 
    font-size: 10px; 
    font-family: sans-serif;
    color: silver; 
    text-align: center; 
    border-radius: 15px;
    background: transparent; 
}

.a {
    background-repeat: no-repeat;	
    background-size: 35%; 
    height: 90px; 
    margin-top: 20px; 
    text-align: center; 
    font-size: 9px; 
    padding-left: 40%;
}

/* Standaard browser styling verwijderen voor dropdowns */
select, option {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}


/* ==========================================================================
   Mobiele Lay-out Fix (VOORKOMT WITTE EN ZILVEREN BALKEN)
   ========================================================================== */
@media (max-width: 768px) {
    .knoptekst {
        background: transparent !important;
        background-color: transparent !important;
        border: 0px none transparent !important;
        border-style: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        color: white !important; /* Zorgt dat de tekst puur los op de foto zweeft */
    }
    .mplaat:hover .knoptekst, .wpl:hover .knoptekst {
        background: transparent !important;
        border: 0px none transparent !important;
        color: white !important;
    }
}

        /* ==========================================================================
           Aanpassingen voor Desktop / Grotere Schermen (Vanaf 768px breedte)
           ========================================================================== */
        @media (min-width: 768px) {
                      
            /* Transparante tekst zonder witte balk op desktop */
            #plaatjestekst { left: 30%; width: 40%; bottom: 1%; font-size: 12px; background: transparent !important; }
            
            /* Fotolijst links aan de zijkant docken */
            #plaatk { right: 1%; width: 25%; top: 10%; height: 78%; font-size: 10px; }
            .a { background-size: 35%; padding-left: 40%; font-size: 11px; }
        }
				
				
.knopachtergrond{display:none; cursor:pointer; position:fixed; padding:5px; width:15px; background:white; border:1px solid transparent; border-radius:50%;}

.knopachtergrond:hover{ box-shadow: 0 10px 30px red; border:1px solid red; border-radius:50%;}
		

.myDiv {
  position: relative;
  animation: fadeIn 1s ease-in-out; 	
  border: 0; width: 100%; height: 100%;
  background: linear-gradient(to top,rgba(255,255,255,1) 0%, rgba(255,255,255,0.8) 5%, rgba(255,255,255,0) 10%, rgba(255,255,255,0) 90%, rgba(255,255,255,1) 100%),
              linear-gradient(to right,rgba(255,255,255,1) 0%, rgba(255,255,255,0) 10%, rgba(255,255,255,0) 15%, rgba(255,255,255,0) 90%, rgba(255,255,255,1) 100%);
}

.bg {
  background: url('/agpl/') no-repeat center center; background-size: cover;    
  position: absolute; z-index: -5; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;
}	
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Desktop posities via CSS in plaats van JavaScript voorkomt render-vertraging */
#stlog { top: 20%; right: 20px; }
#bez1 { top: 75%; right: 20px; }
#achtergrondpopup { top: 40%; right: 20px; }


@media (max-width: 768px) {
  #fra { margin-top: 60px; height: calc(100% - 60px) !important; }
  #stlog { left: 10px !important; right: auto !important; top: 10px !important; width: 50px; }    
  #bez1 { right: 10px !important; bottom: auto !important; top: 10px !important; width: 50px; } 
	#achtergrondpopup { display:none;}
  .myDiv { background: linear-gradient(to left, steelblue -50%, black 50%, steelblue 150%) !important; }
}

#bezoekersaantallen {
  overflow-y: scroll; overflow-x: hidden; position: fixed; 
  right: 5%; top: 10%; height: 80%; width: 90%; max-width: 450px;
  padding: 15px; background: white; color: black; border-radius: 10px; 
  z-index: 10000000; display: none; font-family: Arial, sans-serif; 
  box-shadow: 0px 10px 25px rgba(0,0,0,0.5); 
}

/* ==========================================================================
   Introductie Pop-up Welkomstscherm
   ========================================================================== */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Donkere semi-transparante achtergrond */
    backdrop-filter: blur(4px); /* Maakt de achtergrondfoto erachter licht wazig */
    display: none; /* Standaard verborgen, wordt via JS getoond */
    justify-content: center;
    align-items: center;
    z-index: 9999999; /* Zorgt dat hij absoluut overal bovenop ligt */
}

.popup-content {
    background: rgba(255, 255, 255, 0.95);
    padding: 30px 40px;
    border-radius: 15px;
    max-width: 550px;
    width: 90%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    position: relative;
    font-family: system-ui, -apple-system, sans-serif;
    color: #333;
    line-height: 1.6;
    animation: popupIn 0.4s ease-out forwards;
}

.popup-content h2 {
    margin-top: 0;
    color: steelblue;
    font-size: 24px;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 10px;
}

.popup-content p {
    font-size: 14px;
    margin-bottom: 15px;
}

.popup-groet {
    font-style: italic;
    font-size: 14px;
    display: inline-block;
    text-align: left;
}

/* Sluitkruisje rechtsboven */
.popup-close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    cursor: pointer;
    color: #aaa;
    transition: color 0.2s;
}

.popup-close:hover {
    color: #333;
}

/* Knop onderaan */
.popup-btn {
    background: steelblue;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    display: block;
    margin: 20px auto 0 auto;
    transition: background 0.2s;
}

.popup-btn:hover {
    background: #36648b;
}

/* Animatie voor het binnenstromen van de pop-up */
@keyframes popupIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

/* Mobiel vriendelijk maken */
@media (max-width: 768px) {
    .popup-content {
        padding: 20px;
        width: 85%;
    }
    .popup-content h2 {
        font-size: 20px;
    }
}