html {
    height: 100%;
}

body {
    height: 100%;
    width: 100%;
}

#wrapper {
    background-size: cover;
    position: relative;
    overflow: hidden;
    font-family: "Avenir next";
    color: #fff;
    width: 100%;
    height: 100%;
}

#wrapper img {
    width: 100%;
    height: 100%;
}

.article-background {
    background-color: white;
    width: 100%;
    height: 100%;
}

.overlay-right {
    position: absolute;
    top: 0;
    z-index: 10;
    width: 160%;
    height: 100%;
    transform: skew(-30deg);
    left: 50%;
}

.yellow {
    background-color: rgba(254, 246, 226, 0.95);
}

.overlay-header {
    position: absolute;
    color: #000;
    max-width: 50%;
    top: 50%;
    left: 17.8%;
    z-index: 11;
    font-family: "Avenir Next";
    font-weight: medium;
    font-size: 4vw;
}

.overlay-background-text {
    position: absolute;
    font-family: "Courier New";
    top: 15%;
    left: 5%;
    z-index: 5;
    font-size: 18vw;
    font-weight: 900;
    color: rgba(254, 246, 226, 0.95);
    max-width: 40%;
}

.overlay-image-right {
    z-index: 10;
    position: absolute;
    top: 25%;
    left: 50%;
}

.overlay-text {
    position: absolute;
    color: black;
    top: 60%;
    left: 18%;
    max-width: 40%;
    z-index: 11;
    font-weight: 300;
    font-size: 2vw;
}


/* media queries */

@media (max-width: 36em) {
    /*    algemeen*/
    #Kirstenprop {
        display: none;
    }
    .overlay-text {
        top: 43%;
        max-width: 45%;
        font-size: 4vw;
    }
    .overlay-header {
        font-size: 3em;
        top: 34%;
    }
    .overlay-right {
        position: absolute;
        top: 0;
        z-index: 10;
        width: 160%;
        height: 140%;
        transform: skew(-30deg);
        left: 50%;
    }
}

@media (min-width: 36em) {
    /*    algemeen*/
    #kp {
        display: none;
    }
    .wrapper {
        display: flex;
    }
    main {
        flex: 3 0em;
        justify-content: center;
    }
    .about img {
        float: left;
        width: 25%;
    }
    #headertext {
        font-size: 1em;
    }
    .overlay-text {
        top: 63%;
        max-width: 40%;
        font-size: 1.5em;
    }
    .overlay-header {
        font-size: 4.5em;
        top: 50%;
    }
}