body {
    background-color : darkgray;
    background-image : url('../images/landingpage-bg.jpg');
    background-size  : cover;

    font-family      : 'Raleway', sans-serif;
    font-weight      : 400;
    margin           : 0;
    min-height       : 100vh;
}

#wrapper {
    min-height : 100vh;
    position   : relative;
}

#header {
    width   : 100%;
    display : block;
}

.topborder-image {
    display           : block;
    padding-bottom    : 9px;
    background-image  : url('../images/menutopborder.jpg');
    background-repeat : repeat-x;
    height            : 3px;
    width             : 100%;
    position          : relative;
    top               : 0;
    left              : 0;
}

.logo {
    display       : block;
    position      : relative;
    margin-top    : 50px;
    margin-bottom : 50px;
}

.logo img {
    display : block;
    width   : inherit;
    height  : auto;
    margin  : auto;
}

.intro-text {
    max-width     : 900px;
    margin        : auto;
    text-align    : center;
    margin-bottom : 40px;
}

.intro-text h2 {
    color : #503109;
}

#content {
    display        : block;
    padding-bottom : 200px;
    min-height     : 600px;
}

.accomodatie-block {
    display    : block;
    position   : relative;
    width      : 100%;
    min-height : 500px;
}

.accomodatie-block .accomodatie-container {
    width    : 50%;
    float    : left;
    position : relative;
    display  : block;
}

.accomodatie-block .accomodatie-container .accomodatie {
    max-width        : 400px;
    display          : block;
    position         : relative;
    min-height       : 400px;
    background-color : rgba(223, 100, 0, 0.9);
    padding          : 20px 30px;
}

.longwope {
    margin-left  : auto;
    margin-right : 50px;
}

.longwope .image-container {
    background-image : url('../images/longwope.jpg');
    background-size  : cover;
}

.caprivi {
    margin-right : auto;
    margin-left  : 50px;
}

.caprivi .image-container {
    background-image : url('../images/caprivi.jpg');
    background-size  : cover;
}

.accomodatie h1 {
    color          : #fff;
    font-size      : 2.5em;
    text-transform : uppercase;
    margin-top     : 0;
    margin-bottom  : 0;
    line-height    : 1;
    font-weight    : 700;
}

.accomodatie p {
    color     : #fff;
    font-size : 15px;
}

.accomodatie .image-container {
    width    : 100%;
    height   : 200px;
    display  : block;
    overflow : hidden;
    position : relative;
}

.accomodatie .image-container .accomodatie-image {
    width   : 100%;
    height  : auto;
    display : block;
}

.accomodatie a {
    background      : #fff51f;
    color           : #000;
    text-decoration : none;
    text-transform  : uppercase;
    padding         : 10px 20px;
    font-weight     : 700;
    font-size       : 14px;
    position        : relative;
    display         : inline-block;
    margin-top      : 20px;
    cursor          : pointer;
    transition      : background .1s ease-in-out;
}

.accomodatie a:hover {
    background : #503109;
    color      : #FFF;
}

#footer {
    bottom           : 0;
    left             : 0;
    position         : absolute;
    height           : 150px;
    width            : 100%;
    background-color : #341e01;
    border-top       : 15px solid #4c2c03;
}

.footer-credits {
    color      : #fff;
    display    : block;
    position   : relative;
    width      : 100%;
    text-align : center;
    margin-top : 20px;
    font-size  : 12px;
}

.footer-credits a {
    color : #fff;
}

.footer-credits a:hover {
    color : #fff51f;
}

@media (max-width : 1100px) {
    .accomodatie-block .accomodatie-container .accomodatie {
        width : 300px;
    }

    .longwope {
        margin-right : 25px;
    }

    .caprivi {
        margin-left : 25px;
    }
    .intro-text {
        max-width     : 700px;
    }
}

@media (max-width : 800px) {
    .accomodatie-block .accomodatie-container {
        width : 100%;
    }

    .accomodatie-block .accomodatie-container .accomodatie {
        width         : 400px;
        margin        : auto;
        margin-bottom : 20px;
    }

    .longwope {
        margin : 0;
    }

    .caprivi {
        margin : 0;
    }

    #content {
        min-height : 1000px;
    }
    .intro-text {
        max-width     : 400px;
    }
}

@media (max-width : 520px) {
    .accomodatie-block .accomodatie-container .accomodatie {
        width   : 250px;
        padding : 10px 20px;
    }

    .logo img {
        width  : 300px;
        height : auto;
    }

    #content {
        min-height : 1200px;
    }
    .intro-text {
        max-width     : 250px;
    }
}