html {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    /* Colors & font */
    background: #fff;
    color: #000;
    font-family: 'arial', sans-serif;
    font-size: 14px;
    /* Add height so that the main content will stretch & center. */
    min-height: 100%;
    margin: 0;
    padding: 0;
}


/*
 * Utility classes
 * ---------------
 */

/*
 * These elements are hidden from browsers visually, but should be seen by screen readers.
 */
.primary-section .section-header > span,
.header-responsive-background h1,
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    clip: rect(0 0 0 0);
}

/*
 * Shared styles
 * -------------
 */
.primary-section .section-header {
    background: no-repeat 0 0;
    margin: 25px 0 25px 0;
    padding: 0;
}

/*
 * Header
 * ------
 */

/*
 * This background shrinks on mobile devices.
 */
.header-responsive-background {
    background: url('../images/header.jpg') no-repeat 50% 0;
    /* The background takes up the entire height of this element.
    The height is set by the child element */
    background-size: auto 100%;
}
/*
 * This element (and its pseudo-child) is used to set the height of the
 * background image. The minimum width of this element is slightly smaller
 * than the background image, because the sides may be clipped off.
 */
.header-responsive-background .inner {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
}
.header-responsive-background .inner:before {
    content: '';
    height: 0;
    width: 100%;
    /* 840px is the height of the image,
    1280px is the minimum width of the image if the sides are clipped.
    The percentage is the aspect ratio: 840 / 1280 * 100 */
    padding-bottom: 65.625%;
    /* Because this element is only used to size the parent,
    we make it non-interactive and invisible. */
    pointer-events: none;
    visibility: hidden;
    display: block;
    /* When debugging, the element has some visible text. */
    background: rgba(255, 128, 0, 0.1);
    color: rgba(255, 128, 0, 0.5);
    outline: 1px dashed red;
    font-size: 25px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
}
.header-responsive-background .inner.visible:before {
    content: 'Minimum background size';
    visibility: visible;
}

/*
 * Footer
 * ------
 */
.footer-responsive {
    display: flex;
    align-items: flex-end;
}
.footer-responsive .left {
    flex: auto 1;
    max-width: 257px;
}
.footer-responsive .right {
    flex: auto 1;
    max-width: 454px;
    margin-left: 6%;
    margin-left: calc(-5.5% - 15px);
}
.footer-responsive .middle {
    flex: 1 0 550px;
    text-align: center;
    width: 550px;
    padding: 0 25px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    align-self: center;
    position: relative;
    z-index: 2;
}

.footer-responsive .left img,
.footer-responsive .right img {
    max-width: 100%;
    width: auto;
    height: auto;
}
.footer-responsive .middle img {
    height: auto;
    max-width: 100%;
}

@media (max-width: 850px) {
    .footer-responsive  .left {
        display: none;
    }
    .footer-responsive .right {
        display: none;
    }
    .footer-responsive .middle {
        width: 100%;
        flex: none;
    }
}


/*
 * Film section
 * ------------
 */
.section-film {}
.section-film .section-header {
    background-image: url('../images/title-filmpje.png');
    /*max-height: 91px;
    min-width: 202px;
    margin-top: 180px;
    margin-left: 105px;
    margin-bottom: 28px;*/

    background-size: auto 100%;
    position: absolute;
    height: 100%;
    z-index: 2;
    top: 0;
    left: 105px;
    right: 0;
    margin: 0;
}


.section-film .title-inner {
    /*
     * This element has the ~20% of the aspect ratio as the
     * other title container: If the other was 16:10,
     * this would be 16:2.
     * The title image is, instead of ~17% the height of
     * its container, 588% the size: 100%.
     * In other words, the aspect ratio of the :before element
     * is divided by ~5.88.
     * (53.179% / ~5.88... = ~9.41%)
     * This makes the titles the same size, when downscaling.
     */
    position: relative;
    max-height: 91px;
    width: 100%;
    margin: 180px 0 28px 0;
}
.section-film .title-inner:before {
    content: '';
    height: 0;
    width: 100%;
    /* See block comment above */
    padding-bottom: 9.041%;
    /* Because this element is only used to size the parent,
    we make it non-interactive and invisible. */
    pointer-events: none;
    visibility: hidden;
    display: block;
    /* When debugging, the element has some visible text. */
    background: rgba(255, 128, 0, 0.1);
    color: rgba(255, 128, 0, 0.5);
    outline: 1px dashed red;
    font-size: 25px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
}
.section-film .title-inner.visible:before {
    content: 'Minimum background size';
    visibility: visible;
}

@media (max-width: 1279px) {
    .section-film .title-inner {
        margin-top: 120px;
    }
    .section-film .section-header {
        left: 66px;
    }
}
@media (max-width: 480px) {
    .section-film .title-inner {
        margin-top: 40px;
    }
    .section-film .section-header {
        left: 25px;
    }
}
/*
 * The title has to be sized like this:
 *  - container should be the same aspect ratio as
 *    the "Photos" title container:before
 *  - the height should be the same percentage as
 *    the "Photos" image title's height
 * But, because this would result in too much wasted
 * space, we do this:
 *  - container should be double/triple aspect ratio.
 *  - size should be 50% / 33% of the percentage.
 */

/*
 * Video element with a background image that scales
 */
.container-video {
    /* We allocate some padding on the sides for the background image.
    This is a percentage, because the image is scaled proportionally */
    padding: 0 11% 0 13%;
    margin-bottom: 82px;
}
.container-video .video {
    max-width: 944px;
    border: 1px solid #fff;
    box-shadow: 0 0 54px rgba(0, 0, 0, 0.41);
    box-sizing: border-box;
    /*margin: 0 auto;*/
}
/*
 * The background image is positioned inside of the video container so that
 * it can inherit the height and be positioned relatively to its parent.
 */
.container-video .video .background-image {
    background: url('../images/background-filmpje.png') no-repeat 0 0;
    background-size: auto 100%;
    height: 100%;
    width: 100%;
    position: absolute;
    left: -21%;
    top: 22%;
}
/*
 * Content of the video player.
 */
.container-video .video .inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
}

.container-video .video .inner iframe {
    width: 100%;
    height: 100%;
}

/*
 * Photo section
 * -------------
 */
.section-photo {
    /*height: 527px;
    max-width: 100%;*/
}
.section-photo .section-header {
    background-image: url('../images/title-fotos.png');
    background-position: 100% 0;
    background-size: auto 100%;
    max-height: 79px;
    width: 200px;
    /*min-width: 200px;
    margin-right: 150px;
    margin-top: -527px;*/
    margin-top: 0;
    position: absolute;
    right: 24.419778002018163%;
    top: 37.571157495256167%;
    height: 17.267552182163188%;
}

/*
 * This element (and its pseudo-child) is used to set the height of the
 * background image. The minimum width of this element is slightly smaller
 * than the background image, because the sides may be clipped off.
 */
.section-photo .inner {
    background: url('../images/background-fotos.png') no-repeat 100% 0;
    background-size: auto 100%;
    max-width: 991px;
    max-height: 527px;
    width: 100%;
    margin: 0 0 25px auto;
    position: relative;
}
.section-photo .inner:before {
    content: '';
    height: 0;
    width: 100%;
    /* 527px is the height of the image,
    991px is the minimum width of the image.
    The percentage is the aspect ratio: 527 / 991 * 100 */
    padding-bottom: 53.179%;
    /* Because this element is only used to size the parent,
    we make it non-interactive and invisible. */
    pointer-events: none;
    visibility: hidden;
    display: block;
    /* When debugging, the element has some visible text. */
    background: rgba(255, 128, 0, 0.1);
    color: rgba(255, 128, 0, 0.5);
    outline: 1px dashed red;
    font-size: 25px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
}
.section-photo .inner.visible:before {
    content: 'Minimum background size';
    visibility: visible;
}

.photo-gallery-container {
    background: #d2dadd;
    margin: 25px 0;
    padding: 50px 0;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
}
.photo-gallery-container.centered {
    justify-content: center;
    align-items: center;
}
.photo-gallery-container:after {
    content: none;
    flex: auto;
}

@media (min-width: 1280px) {
    .photo-gallery-container {
        padding-left: 50px;
        padding-right: 50px;
    }
}


.photo-gallery-container .photo {
    margin: 50px;
    min-width: 100%;
    text-align: center;
}
.photo-gallery-container .photo > * {
    box-shadow: 0 0 54px 0 rgba(0, 0, 0, 0.41);
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
    position: relative;
    transition: box-shadow 0.5s ease-in-out, top 0.25s ease-in-out;
    top: 0;
}
.photo-gallery-container .photo img {
    max-width: 280px;
    max-height: 280px;
    display: block;
}
.photo-gallery-container .photo:hover > * {
    top: -10px;
    box-shadow: 0 20px 54px 0 rgba(0, 0, 0, 0.45);
}

@media (min-width: 640px) {
    .photo-gallery-container .photo {
        min-width: 0;
    }
}


/*
 * Proportionally scaled element.
 */
.ratio-16x9 {
    width: 100%;
    position: relative;
}
.ratio-16x9:before {
    content: '';
    height: 0;
    width: 100%;
    /* 9 / 16 * 100 */
    padding-bottom: 56.25%;
    /* Because this element is only used to size the parent,
    we make it non-interactive and invisible. */
    pointer-events: none;
    visibility: hidden;
    display: block;
    /* When debugging, the element has some visible text. */
    background: rgba(255, 128, 0, 0.1);
    color: rgba(255, 128, 0, 0.5);
    outline: 1px dashed red;
    font-size: 25px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ratio-16x9.visible:before {
    content: '16x9 element';
    visibility: visible;
}