main, aside, article, header, footer, nav {
    display: block;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --tekstwit: #fcfaf5;
    --tekstblauw: #1b1464;
    --kleurhoofding: #026dff;
    --kleurachtergrond: #fcfaf5;
}

body{
    font-family: verdana, "open sans", roboto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--tekstblauw);
    width: 100vw;           
    min-height: 100vh;
    line-height: 1.5;    
    margin: 0;
}

.container{
    max-width: 1440px;
}

main{
    min-height: calc(100vh - 280px);   
    width: 100vw;    
    max-width: 1440px;
    font-size: clamp(1rem, 2vw, 1.2rem); 
}

.transparant{
   background-color: rgba(255,255,255,0.90);
   min-height: calc(100vh - 260px);
   padding: 48px;   
   width: 100%;
}

h1 { 
    font-size: clamp(1.5rem, 5vw, 2rem); 
}

h2 { 
    font-size: clamp(1.3rem, 3vw, 1.6rem); 
}

h3 { 
    font-size: clamp(1.5rem, 3vw, 2rem); 
}

h4 { 
    font-size: clamp(1.25rem, 2.5vw, 1.5rem); 
}

a {
    color: var(--kleurtekst);
}

.red {
    color: red;
}

.blue {
    color: blue;
}


/* ************************************************************ */
/* ********************   Header    *************************** */
/* ************************************************************ */
header {
    width: 100%;
    color: white;
    background-color: var(--kleurhoofding);
    z-index: 3;
}

.hoofding{
   width: 100%;
   display: flex;
   justify-content: space-between;
   padding: 10px;
}

.info{
   display: flex;
   flex-direction: column;
   align-items: flex-end;
}

.tel{
   padding-top: 8px;
   padding-right: 12px;
}

.gsmMenu {
    margin: 1vw
}

.bar1, .bar2, .bar3 {
    width: 2.2rem;
    height: .25rem;
    background-color: white;
    margin: 0.31rem 0;
    transition: .4s
}

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-.67rem, .375rem);
    transform: rotate(-45deg) translate(-.67rem, .375rem)
}

.change .bar2 {
    opacity: 0
}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-.375rem, -.188rem);
    transform: rotate(45deg) translate(-.375rem, -.188rem);
}

/* ************************************************************ */

nav {
    flex: 0 1 100%;
    font-size: 1rem;
    height: 0;
    transition: all 1s ease;
    overflow: hidden;
}

nav ul {
    list-style: none;
    width: 100%;
}

nav li {
    border-bottom: 1px solid white;
    width: 100%;
    background-color: #026dff;
}



nav a, nav a:visited {
    display: block;
    padding: .67rem 0.31rem;
    text-decoration: none;
    text-align: center;
    color: white;
        
}

/* ************************************************************ */
/* ********************   Footer    ***************************** */
/* ************************************************************ */

footer{
    color: white;
    background-color: rgb(2,109,255);
    padding: 8px;
    text-align: center;
    z-index: 3;
    width: 100%;
}

.icons{
   font-size: 24px;
}

.desktop{
    display: none;
}

/* ************************************************************ */
/* ********************   Media screen    ***************************** */
/* ************************************************************ */
@media screen and (min-width: 480px) {

    .desktop{
        display: inline;
    }

    .gsm{
        display: none;
    }
}

@media screen and (min-width: 727px) {

    .gsmMenu {
        display: none
    }

    nav {
        height: auto;
        padding-bottom: .5rem;
    }

    nav li {
        display: inline;
        border: none;
    }

    nav ul{
        margin-left: 48px;
    }

    nav a {
        display: inline;
        margin-right: 2%;
        text-align: left;
    }




}