/*Target alles*/
*
{
    padding: 0px;
    margin: 0px;
    font-family: Arial, Helvetica, sans-serif;
}

body {
    display: flex;
    flex-direction: column; /*Zorgt dat het onder elkaar gaat staan*/
    min-height: 100vh;
}

header
{
    display: flex;
    position: sticky; /*Zorgt dat als je scrollt, het mee beweegt soortvan*/
    top: 0px;
    background-color: white;
    box-shadow: 2px 2px 10px gray; /*Grijze schaduw, 10px blur, 2px horizontaal en verticaal*/
    height: 12.5vh;
    width: 100%;
    align-items: center;
}

#Header-logo
{
    position: absolute; /*Zorgt dat de plaats vast staat*/
    height: 10vh;
    width: auto;
    left: 2vw;
    margin-bottom: 1vh;
    margin-top: 1vh;
}

#Header-navigation-ul
{
    margin-left: 10vw;
    list-style-type: none; /*Haalt de rondjes weg  voor de text*/
    display: flex;
    flex-wrap: wrap; /*Zorgt dat elementen onder elkaar gaan staan als het niet meer past*/
    gap: 1vw; /*Ruimte tussen de li elementen*/
}

.Header-navigation-button
{
    display: flex;
    background-color: rgb(55, 55, 121);
    font-size: 1.25vw;
    color: white;
    text-decoration: none; /*Haalt de lijntjes onder de text weg*/
    padding: 0.5vw;
    border-radius: 10px; /*Zorgt voor ronde corners*/
    align-items: center;
    justify-content: center;
}

.Header-navigation-button:hover
{
    background-color: rgba(55, 55, 121, 0.6); /*Zorgt dat de knop een andere kleur krijgt als je met je muis eroverheen gaat*/
}

.Header-navigation-button-icon
{
    height: 5vh;
    width: auto;
    margin-right: 0.5vw;
}

#Contact-main-bg {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-image: url("../images/other/ContactImage.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.3;
    z-index: -50;
}

main
{
    flex: 1; /*Zorgt dat het hele scherm wordt gebruikt*/
    margin-left: 1.5vw;
    margin-right: 1.5vw;
    padding-bottom: 4vh;
}

#Main-title
{
    margin-top: 2vh;
    margin-bottom: 2vh;
    font-size: 3vw;
}

.Main-title-center
{
    text-align: center;
}

.Main-a-empty
{
    text-decoration: none; /*Haalt de lijntjes onder de text weg*/
}

.Main-p
{
    margin-top: 2vh;
    font-size: 1vw;
    margin-bottom: 4vh;
}

#Main-iframe
{
    height: 40vh;
    width: 40vw;
}

.Main-img
{
    height: 40vh;
    width: auto;
    margin-left: 4vh;
}

.Main-section
{
    display: inline-block; /*Maakt het een block element, en zorgt dat de elementen niet uit de section gaan*/
    width: 100%;
    margin-top: 5vh;
    margin-bottom: 5vh;
}

.Main-section-images-section-flex
{
    display: inline-flex; /*Maakt het een flex, en zorgt dat de elementen niet eruit gaan*/
}

.Main-section-iframe
{
    float: right;
    height: 40vh;
    width: 30vw;
    margin-left: 1vw;
}

.Main-section-img-small
{
    float: right;
    height: 20vh;
    width: auto;
}

.Main-section-img
{
    float: right;
    height: 50vh;
    width: auto;
}

#Main-square-ul-list
{
    display: flex;
    flex-direction: row; /*Zorgt dat alles naast elkaar staat*/
    list-style-type: none; /*Haalt de rondjes voor de text weg*/
    flex-wrap: wrap; /*Zorgt dat als het niet meer past, dat het eronder gaat*/
    justify-content: space-between;
    margin-top: 7.5vh;
    margin-bottom: 7.5vh;
}

.Main-square-ul-li
{
    background-color: white;
    box-shadow: 2px 2px 10px gray; /*Grijze schaduw, 10px blur, 2px horizontaal en verticaal*/
    border-radius: 15px; /*Zorgt voor ronde corners*/
    padding: 0.5vw;
    margin-top: 5vh;
    max-width: 30vw;
}

.Main-square-ul-li a
{
    display: inline-block; /*Maakt het een block element, en zorgt dat de elementen niet uit de section gaan*/
    text-align: center;
}

.Main-square-ul-li:hover
{
    background-color: rgb(221, 221, 221); /*Zorgt dat de button een andere kleur word als je met de muis erover gaat*/
}

.Main-square-ul-li-title
{
    color: rgb(55, 55, 121);
}

.Main-square-ul-li-p
{
    margin-left: 1.5vw;
    margin-right: 1.5vw;
    color: black;
}

.Main-square-ul-li-img
{
    height: 35vh;
    width: 25vw;
    margin: 1vh 1vw 1vh 1vw;
    border-radius: 10px; /*Zorgt voor ronde corners*/
}

.Main-square-ul-li-img-nostretch
{
    height: 25vh;
    width: auto;
    max-width: 25vw;
    margin: 1vh 1vw 1vh 1vw;
    border-radius: 10px; /*Zorgt voor ronde corners*/
}

#Main-ul-list
{
    display: flex;
    flex-direction: column; /*Zorgt dat het onder elkaar gaat staan*/
    list-style-type: none; /*Haalt de rondjes voor de text weg*/
}

.Main-ul-li
{
    display: flex;
    margin-top: 5vh;
    border-radius: 15px;/*Zorgt voor ronde corners*/
    padding: 1.5vw;
    background-color: rgb(55, 55, 121);
    color: white;
}

.Main-ul-li-img
{
    float: left;
    height: 35vh;
    width: auto;
    border-radius: 10px; /*Zorgt voor ronde corners*/
    margin-bottom: 3vh;
}

.Main-ul-li-button
{   
    display: inline-flex; /*Maakt het flex, en zorgt dat de elementen niet eruit kunnen gaan*/
    border: 2px solid rgb(255, 255, 255);
    border-radius: 15px; /*Zorgt voor ronde corners*/
    margin-right: 1vw;
    text-decoration: none; /*Haalt de lijnen onder de text weg*/
    padding: 0.4vw;
    color: white;
    align-items: center;
    justify-content: center;
}

.Main-ul-li-button:hover
{
    background-color: rgba(255, 255, 255, 0.3); /*Veranderd de kleur als je erover heen gaat met je muis*/
}

.Main-ul-li-button-icon
{
    height: 2vh;
    margin-right: 0.5vw;
    width: auto;
}

.Main-ul-li-p
{
    margin-left: 1.5vw;
}

#Main-openings-section
{
    display: flex;
    flex-direction: row; /*Zorgt dat de elementen naast elkaar gaat staan*/
    justify-content: space-evenly;
}

#Main-openings-section-current
{
    display: flex;
    flex-direction: column; /*Zorgt dat de elementen onder elkaar gaan staan*/
    justify-content: space-between;
}

.Main-openings-section-current-box
{
    background-color: white;
    border-radius: 10px; /*Zorgt voor ronde corners*/
    box-shadow: 2px 2px 10px gray; /*Grijze schaduw, 10px blur, 2px horizontaal en verticaal*/
    height: auto;
    width: auto;
    max-width: 20vw;
    margin-top: 5vh;
    padding: 0.5vw;
}

.Main-openings-section-current-box-title
{
    font-size: 2.5vw;
    text-align: center; 
    margin-bottom: 1vh;
}

.Main-openings-section-current-box-p
{
    text-align: center;
}

.Main-openings-section-info-box
{
    background-color: white;
    border-radius: 10px; /*Zorgt voor ronde corners*/
    box-shadow: 2px 2px 10px gray;  /*Grijze schaduw, 10px blur, 2px horizontaal en verticaal*/
    height: auto;
    width: auto;
    max-width: 20vw;
    margin-top: 5vh;
    padding: 0.5vw;
}

.Main-openings-section-info-box-title
{
    margin-bottom: 1vh;
    font-size: 2.5vw;
}

.Main-openings-section-info-box-ul li
{
    margin-left: 2vw;
}

.Main-openings-section-info-box-ul li
{
    margin-bottom: 1vh;
}

footer
{
    display: flex;
    border-top: 1vh solid rgb(55, 55, 121);
    background-color: lightgray;
    justify-content: space-around;
    max-width: 100vw;
}

.Footer-section
{
    margin: 1vh 0px;
    background-color: white;
    border-radius: 10px; /*Zorgt voor ronde corners*/
    padding: 0.5vw;
}

.Footer-section-title
{
    font-size: 1.5vw;
}

.Footer-section-p
{
    font-size: 0.75vw;
}

.Footer-section-small
{
    font-size: 0.7vw;
}

.Footer-section-img
{
    margin-top: 1vh;
    height: 5vh;
    width: auto;
    border-radius: 2px; /*Zorgt voor ronde corners*/
}

.Footer-section-ul
{
    margin-left: 1vw;
}