*{/*Standaard om aan te houden voor alles*/
    margin:0;
    padding: 0;
    font-family:"Montserrat", sans-serif;
    scroll-behavior:auto;

}


/*navbar*/
.active{
    background-color: #2b6c97;  /*navbar donkere achtergrond voor actieve pagina*/
}

#navbar ul{ /*De ul, dus daarin de breedte en positie en actergrond etc van hele ding*/
    list-style-type: none;
    overflow:hidden;
    background-image: linear-gradient(to right,#50ABE7,#50ABE7);
    position: fixed;
    top:0;
    width: 100%;
    z-index: 5;

}

#navbar ul a{ /*de a, dus de text kleur en grootte, 
    de breedte van 1 blok en padding van 1 blok etc*/
    display: block;
    padding-left: 0px;
    padding-top:1.5%;
    padding-bottom: 1.5%;
    height: 3%;
    width:9%;
    text-decoration: none;
    color: white;
    float:left;
    text-align:center;
    font-size: 1.3vw;
    border-right: 0px solid white;
    transition-duration:0.3s;
    border-radius: 10px;
}

#navbar li a:hover{/*hover kleur*/
    background-color: #53baff;
}

#navbar #inlog{/*inlog blok naar rechts bewegen en daarmee correct aanpast*/
    float:right;
    border-right: 0px solid white;
    border-left: 0px solid white;
}

#navbar1 ul{/*dit is een kopie van de echte navbar, 
    maar onzichtbaar, zodat de tekst niet onder de normale navbar gaat*/
    width: 100%;
    font-size: 1.5vw;
    list-style-type:none;
    overflow:hidden;
    position:relative;
}

#navbar1 ul li{/*dit is een kopie van de echte navbar, 
    maar onzichtbaar, zodat de tekst niet onder de normale navbar gaat*/
    display: block;
    padding-left: 0px;
    padding-top:1.5%;
    padding-bottom: 1.5%;
    height: 3%;
    width: 9%;
    text-decoration: none;
    color: white;
    float:left;
    text-align: center;
    font-size: 1.3vw;
    border-right: 0px solid white;
    transition-duration:0.3s;
    border-radius: 10px;
}



/*navbar*/

/*global*/
body{ /*Alle simpele info van de body die belangrijk zijn*/
    background-color: #EDF2FB;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
/*global*/

/*index*/

#home .logo{ /*logo correct laten pas*/
    margin:-20%;
    margin-bottom:-16%;
    width:42%;
}

#home{ /*centreren*/
    display:flex;
    align-items: center;
    justify-content: center;
}

#index #back-img{ /*achtergrond img*/
    background-size: cover;
    width:100%;
    z-index: 0;
}



#index #container1{ /*relatief*/
    position:relative;

}

#index #welkom{ /*box met text over achtergrond img*/
    font-size: 1.5vw;
    text-decoration: none;
    text-align:left;
    position: absolute;
    top: 25%;
    left: 15%;
    size: 20%;
    background-color: #50ABE7de;
    color: white;
    padding: 1.5%;
    padding-bottom:3%;
    width:18.75%;
    height:22.5%;
    overflow:hidden;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

.indexp1{ /*lap tekst in index*/
    margin-top: 3%;
    width:50%;
    text-align: left;
    font-size: 1.65vw;
    border-radius: 10px;
    background-color: #50abe7;
    padding: 1%;
    color: white;
    margin-bottom: -30%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

.indexp2{ /*box van lap tekst centreren*/
    display:flex;
    align-items: center;
    justify-content: center;
}
/*index*/

/*vacatures*/
table, tr, th, td{/*alle borders en margins van alles*/
    border: 1px solid black;
    margin: 2.5%
}

th, td{ /*overflow fix*/
    padding: 1%;
    overflow-wrap:break-word;

}

table { /*info van hele tabel*/
    width: 90%;
    margin: 30px auto;
    border-collapse: collapse;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    font-family: Arial, sans-serif;
    background-color: #f9f9f9;
    font-size: 1.4vw;
}

th, td { /*info table heads en table cell*/
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid #f0f0f0;
}

th { /*table head specifiek*/
    background-color: #6CBDE9; /* blauwe kleur */
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1.5vw;
}

tr:nth-child(even) {
    background-color: #EDF2FB; /* lichtblauwe achtergrond voor even rijen */
}

tr:hover {
    background-color: #87CEEB; /* donkerblauwe achtergrond bij hover */
}

.highlight {
    background-color: #0a77ff; /* nogmaals blauw voor gemarkeerde rijen */
    transition: background-color 0.3s ease;
}

.highlight:hover {
    background-color: #6CBDE9; /* donkerblauw bij hover voor gemarkeerde rijen */
}

.meerinfo {
    background-color: #6CBDE9; /* groene knopkleur */
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    transition: color 0.3s ease;
}

tr:hover .meerinfo{ /*kleur verandering bij hover*/
    background-color: #ffffff;
    color:black;
}


/*vacatures*/

/*standpunten*/

.standpuntbox{ /*schaduw onder de boxen*/
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

#standpunt1{ /*Alle info over box standpunt1 Tijden*/
    color:white;
    display:block;
    width:43%;
    background-color:#50ABE7;
    border-radius: 10px;
    padding:1%;
    margin: 2%;
    overflow-wrap: break-word;
    float:left;
    font-size: 1.2vw;
}

#standpunt2{ /*Alle info over box standpunt2 Optimalisatie*/
    color:white;
    display:block;
    width:43%;
    background-color:#50ABE7;
    border-radius: 10px;
    padding:1%;
    margin:2%;
    overflow-wrap: break-word;
    float:right;
    font-size: 1.2vw;
}

#standpunt3{ /*Alle info over box standpunt3 Gelijke kansen*/
    color:white;
    display:block;
    width:43%;
    background-color:#50ABE7;
    border-radius: 10px;
    padding:1%;
    margin:2%;
    overflow-wrap: break-word;
    float:right;
    font-size: 1.2vw;
}

#standpunt4{ /*Alle info over box standpunt4 Studeren op niveau*/
    color:white;
    display:block;
    width:43%;
    background-color:#50ABE7;
    border-radius: 10px;
    padding:1%;
    margin: 2%;
    overflow-wrap: break-word;
    float:right;
    font-size: 1.2vw;

}

#poster { /*Info over de poster image*/
    width: 30%;
    text-align: center;
    margin-left: 14%;
    max-height: 750px;
    float: left;
    border: solid black;
    
}

#poster1{ /*De box van de poster*/
    margin-top: 2%;
    margin-right: 7%;

}
/*standpunten*/

/*Leden*/

#lance{ /*De box en de text van lance*/
    padding:0.5%;
    margin:3%;
    background-color: #50ABE7;
    border-radius:12px;
    width:100%;
    color:white;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}
    
#lancebox{ /*Extra box eromheen om de box te centreren en niet te de text*/
    display:flex;
    align-items: left;
    justify-content: left;
}
    
#lance .lanceimg{ /*De foto van lance*/
    height:100px;
    width:100px;
    float:left;
    margin:1%;
}
    
#thijs{ /*De box en de text van thijs*/
    padding:0.5%;
    margin:3%;
    background-color: #50ABE7;
    border-radius:12px;
    width:100%;
    color:white;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}
    
#thijsbox{ /*Extra box eromheen om de box te centreren en niet te de text*/
    display:flex;
    align-items: left;
    justify-content: left;
}
    
#thijs .thijsimg{ /*De foto van thijs*/
    height:100px;
    width:100px;
    float:left;
    margin: 1%;
}

#isaac{ /*De box en de text van isaac*/
    padding:0.5%;
    margin:3%;
    background-color: #50ABE7;
    border-radius:12px;
    width:100%;
    color:white;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}
    
#isaacbox{ /*Extra box eromheen om de box te centreren en niet te de text*/
    display:flex;
    align-items: left;
    justify-content: left;
}
    
#isaac .isaacimg{ /*De foto van isaac*/
    height:100px;
    width:100px;
    float:left;
    margin: 1%;
}

/*Leden*/

/*log in*/
.inlogbox { /*De box van het inloggen*/
    background-color: #fff;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    width: 70%;
    margin-top: 5%;
}

.inlogboxbox{ /*Extra box eromheen om de box te centreren en niet te de text*/
    display:flex;
    align-items: center;
    justify-content: center;
}

.inlogbox h2 { /*De titel "Login" die boven in de box staat*/
    margin-bottom: 20px;
    text-align: center;
}

.input-groep { /*Elke inputbox*/
    margin-bottom: 20px;
}

.input-groep label { /*De label van een inputbox*/
    display: block;
    margin-bottom: 5px;
}

.input-groep input[type="text"],input[type="password"] { /*van de inputbox alleen de input text en ww*/
    width: 90%;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.input-groep input[type="checkbox"] { /*van de inputbox alleen de input checkbox*/
    width: auto;
}

.inlogbox button { /*De button met inloggen*/
    width: 98%;
    padding:15px;
    background-color: #50ABE7;
    color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

button:hover { /*Als je over button inloggen hover*/
    background-color: #53baff;

}

.wwvergeten { /*Wachtwoord vergeten? box*/
    text-align: center;
    margin-top: 20px;
}

.wwvergeten a { /*Wachtwoord vergeten? text*/
    color: #50ABE7;
    text-decoration: none;
}

.wwvergeten a:hover {/*Wachtwoord vergeten? text als je hover*/
    text-decoration: underline;
}


input{ /*De inputbox*/
    background-color: #BAE0F3;
}


#google{ /*De label voor het "Doorgaan met google"*/
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #50ABE7;
    color: #fff;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 90%;
}

#google:hover{ /*De label voor het "Doorgaan met google"*/
    background-color: #53baff;
}

#google a{
    color: white;
    text-decoration: none;
    margin-left: 5%;
}

#googleimg{/*De afbeelding van google*/
    width:10%;
    float: left;
}

/*log in*/

/*Balk onderaan*/

#balk{ /*De box van de onderste balk*/
    color:white ;
    display: block;
    background-color: #6cbde9;
    margin-top: 34%;
    padding: 2%;
    padding-left: 23%;
    padding-right: 20%;
    height: 10%;
    display:flex;
    align-items: center;
    justify-content: center;
    font-size: 1vw;
    margin-top: auto;
    background-image: url('WLP logo.png');
    background-repeat: no-repeat;
    background-size: 17%;
    background-position-x: 10%;
    background-position-y: 50%;
}


#balk .contact li{ /*van onderste balk onder contact list items*/
    margin: 1.5%;
}

#balk #contactli{ /*van onderste balk bij contact lijst het woord contact*/
    font-weight:bold;
}

#balk .contact li a{ /*bij onderste balk bij contact lijst de a in list items*/
    text-decoration: none;
    color: white;

}

#balk .contact1 .contact{ /*bij onderste balk de contact lijst de list (niet list items zelf maar de list)*/
    margin: 3%;
    list-style: none;
}

#balk .contact li a img{ /*bij onderste balk bij de contact lijst in list items in de a, de img*/
    background-color: #2b6c97;
    border-radius: .5vw;
    width:6%;
}

.contact1{ /*de box om de box om de box zelf te laten bewegen*/
    float: left;
    width:50%;
}

#balk .algemeen1 .algemeen{ /*bij de onderste balk de list algemeen (niet list items zelf maar de list)*/
    margin: 3%;
    list-style: none;
    margin-bottom:12%;
    margin-top:10%;
}

#balk .algemeen1{ /*de box om de box om de box zelf te laten bewegen*/
    float:right;
    width:35%;
    height:100%;
}

#balk .algemeen1 .algemeen li a{ /*bij de onderste balk onder algemeen bij de list items de a*/
    color: white;
    text-decoration: none;
    margin-left:5%;
}

#balk .algemeen1 .algemeen li a:hover{ /*bij de onderste balk onder algemeen bij de list items de a bij hover*/
    text-decoration: underline;
}

#balk #algemeenli{ /*van onderste balk bij algemeen lijst het woord algemeen*/
    font-weight: bold;
}



/* Negeer dit
@media only screen and (max-width:840px) {

}
*/