html, body {
    height: 100%;
}
/* Home page images */
.eigenheid{
    background-image: url(../image/homepage/eigenheid.jpg);
    background-position: center;
    background-size: cover;
}
.groei{
    background-image: url(../image/homepage/groei.png);
    background-position: center;
    background-size: cover;
}
.plezier{
    background-image: url(../image/homepage/plezier.png);
    background-position: center;
    background-size: cover;
}
.trots{
    background-image: url(../image/homepage/trots.png);
    background-position: center;
    background-size: cover;
}
.zelfvertrouwen{
    background-image: url(../image/homepage/zelfvertrouwen.png);
    background-position: center;
    background-size: cover;
}
/* Move CSS for homepage */
.align-auto {
    align-self: auto;
}
.height {
    height: inherit;
}
a.gray {
    text-decoration: none;
}
.gray {
    background-color: rgba(61, 61, 61, 0.6);
    background-size: 100%;
}
.centertext {
    display: flex;
    justify-content: center;
    align-items: center;
}
.frontpage{
    font-size: 2.1em;
    font-weight: 600!important;
    text-transform: uppercase;
    color: white;
    text-decoration: underline;
}
/* Fixed animations  */
.colomn {
    position: relative;
    width: 100%;
    flex-grow: 1;
    flex-basis: 0;
}
.colomn:not(:hover) {
    animation: 0.5s WidthAnimationBackward;
    animation-fill-mode: forwards;
}

.colomn:hover {
    animation: 0.5s WidthAnimationForward;
    animation-fill-mode: forwards;
}

@keyframes WidthAnimationBackward {
    from {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
        -ms-flex: 0 0 33.333333%;
    }
    to {
        max-width: 100%;
    }
}

@keyframes WidthAnimationForward {
    from {
        max-width: 100%;
    }
    to {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
        -ms-flex: 0 0 33.333333%;
    }
}