@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);

@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700);

/* Global styles
================================================== */
body {
    border: 0;
    margin: 0;
    padding: 0;
    font-family: 'Filson Pro', Arial;
    color: #f07d32;
}

h2 {
color:#322882;
}

.navigation {
    border: 1px solid rgba(255,255,255,1);
    height: 100%;
    width: 320px;
    background-color: rgba(49,40,130,1);
    color: #fff;
    position: fixed;
    z-index: 999;
    top: 0;
    right: calc(100% - 320px);
    transition: right 0.5s;
}

    .navigation .toggle-wrapper {
        border: 1px solid rgba(255,255,255,1);
        border-left: none;
        height: 52px;
        width: 51px;
        background-color: rgba(230,49,34,1);
        overflow: hidden;
        position: absolute;
        z-index:1000;
        top: -1px;
        right: calc(0px - 52px);
    }

        .navigation .toggle-wrapper span {
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: transparent;
            color: inherit;
            cursor: pointer;
            position: absolute;
            z-index: 1001;
            top: 0;
            right: 0;
            transition: right 0.25s;
        }

        .navigation .toggle-wrapper .show {
            right: -50px;
        }

    .navigation .heading {
        padding: 15px;
        height: 51px;
        border-bottom: 1px solid rgba(255,255,255,.1);
        line-height: 20px;
    }

    .navigation .menu {
        list-style-type: none;
    }

        .navigation .menu li {
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }

        .navigation .menu a {
            display: block;
            padding: 15px;
            line-height: 20px;
            color: #fff;
            text-decoration: none;
            position: relative;
            z-index: 0;
        }

            .navigation .menu a::after {
                content: '';
                background-color: rgba(255,255,255,0.1);
                position: absolute;
                top: 0;
                right: 100%;
                bottom: 0;
                left: 0;
                transition: left 0.25s, right 0.25s;
            }

            .navigation .menu a:hover::after {
                right: 0;
            }

    .navigation .has-menu {
        position: relative;
    }

        .navigation .has-menu::before {
            content: '';
            border-left: 1px solid rgba(255,255,255,0.1);
            height: 50px;
            width: 50px;
            cursor: pointer;
            position: absolute;
            top: 0;
            right: 0;
            z-index: 1;
        }

        .navigation .has-menu::after {
            content: '\027A4';
            padding: 15px 0;
            height: 50px;
            width: 50px;
            line-height: 20px;
            text-align: center;
            cursor: pointer;
            position: absolute;
            top: 0;
            right: 0;
            z-index: 1;
            transform: rotate(90deg);
            transition: transform 0.25s;
        }

        .navigation .has-menu > .menu {
            overflow: hidden;
            max-height: auto;
        }

    .navigation .menu .menu {
        border-top: 1px solid rgba(255,255,255,0.1);
    }

    .navigation .has-menu > .menu > li > a {
        padding-left: 45px;
        transition: padding 1s;
    }

    .navigation .has-menu > .menu > li:last-child {
        border-bottom: none;
    }
    /* Closed States */
    .navigation:not(.open) {
        right: 100%;
    }

        .navigation:not(.open) .toggle-wrapper .show {
            right: 0px;
        }

        .navigation:not(.open) .toggle-wrapper .hidemenu {
            right: 50px;
        }

    .navigation .has-menu:not(.open)::after {
        transform: rotate(-90deg);
    }

    .navigation .has-menu:not(.open) > .menu {
        border-top: none;
        max-height: 0;
    }

        .navigation .has-menu:not(.open) > .menu > li > a {
            padding-left: 15px;
        }
#beeldmerk {
    position: absolute;
    z-index: 100;
    left: 50%;
    margin-left: -134px;
    top: 50vh;
    margin-top: -55px;
}

#myVideo {
    position: fixed;
    right: 0;
    top: 0;
    min-width: 100%;
    min-height: 100%;
}

.tekstvlak {
    background-color: white;
    min-height: 80vh;
}

.intro {
    font-size: 14px;
    float: right;
    margin-right: 30px;
    width: 230px;
}


h2 {
    font-size:14px;
    font-family: 'Filson Pro', Arial;
    color: #322882;
}

a {
    color: #322882;
}

    a:hover {
        color: #e63122;
        text-decoration:none;
    }

.btn-warning:hover {
    background-color:#322882 !important;
}

.content {
color:#000;
padding:10px 40px 100px 40px;
}

#footer {
    position: fixed;
    bottom: 0;
    background-color: white;
    width:100%;
    z-index: 100;
    line-height: 10vh;
    vertical-align: middle;
}