/* Graphik fonts */
@font-face {
    font-family: 'Graphik Web';
    src: url("fonts/graphik/Graphik-Light-Web.eot");
    src: url("fonts/graphik/Graphik-Light-Web.eot?#iefix") format("embedded-opentype"), url("fonts/graphik/Graphik-Light-Web.woff") format("woff"), url("fonts/graphik/Graphik-Light-Web.ttf") format("truetype"), url("fonts/graphik/Graphik-Light-Web.svg#Graphik Web") format("svg");
    font-weight: 200;
    font-style: normal;
    font-stretch: normal;
}
@font-face {
    font-family: 'Graphik Web';
    src: url("fonts/graphik/Graphik-LightItalic-Web.eot");
    src: url("fonts/graphik/Graphik-LightItalic-Web.eot?#iefix") format("embedded-opentype"), url("fonts/graphik/Graphik-LightItalic-Web.woff") format("woff"), url("fonts/graphik/Graphik-LightItalic-Web.ttf") format("truetype"), url("fonts/graphik/Graphik-LightItalic-Web.svg#Graphik Web") format("svg");
    font-weight: 200;
    font-style: italic;
    font-stretch: normal;
}
@font-face {
    font-family: 'Graphik Web';
    src: url("fonts/graphik/Graphik-Regular-Web.eot");
    src: url("fonts/graphik/Graphik-Regular-Web.eot?#iefix") format("embedded-opentype"), url("fonts/graphik/Graphik-Regular-Web.woff") format("woff"), url("fonts/graphik/Graphik-Regular-Web.ttf") format("truetype"), url("fonts/graphik/Graphik-Regular-Web.svg#Graphik Web") format("svg");
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
}
@font-face {
    font-family: 'Graphik Web';
    src: url("fonts/graphik/Graphik-RegularItalic-Web.eot");
    src: url("fonts/graphik/Graphik-RegularItalic-Web.eot?#iefix") format("embedded-opentype"), url("fonts/graphik/Graphik-RegularItalic-Web.woff") format("woff"), url("fonts/graphik/Graphik-RegularItalic-Web.ttf") format("truetype"), url("fonts/graphik/Graphik-RegularItalic-Web.svg#Graphik Web") format("svg");
    font-weight: 400;
    font-style: italic;
    font-stretch: normal;
}
@font-face {
    font-family: 'Graphik Web';
    src: url("fonts/graphik/Graphik-Semibold-Web.eot");
    src: url("fonts/graphik/Graphik-Semibold-Web.eot?#iefix") format("embedded-opentype"), url("fonts/graphik/Graphik-Semibold-Web.woff") format("woff"), url("fonts/graphik/Graphik-Semibold-Web.ttf") format("truetype"), url("fonts/graphik/Graphik-Semibold-Web.svg#Graphik Web") format("svg");
    font-weight: 700;
    font-style: normal;
    font-stretch: normal;
}
@font-face {
    font-family: 'Graphik Web';
    src: url("fonts/graphik/Graphik-SemiboldItalic-Web.eot");
    src: url("fonts/graphik/Graphik-SemiboldItalic-Web.eot?#iefix") format("embedded-opentype"), url("fonts/graphik/Graphik-SemiboldItalic-Web.woff") format("woff"), url("fonts/graphik/Graphik-SemiboldItalic-Web.ttf") format("truetype"), url("fonts/graphik/Graphik-SemiboldItalic-Web.svg#Graphik Web") format("svg");
    font-weight: 700;
    font-style: italic;
    font-stretch: normal;
}
/* END - Graphik fonts */

html, body {
    margin: 0;
    padding: 0;
    font: normal 400 16px/24px "Graphik Web", sans-serif;
    color: #333333;
}

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
    display: block;
}

header {
    background: #000000;
    height: 50px;
}

header img {
    position: relative;
    top: 50%;
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    height: 16px;
    padding: 0 16px;
}

main figure {
    position: relative;
    margin: 0;
    max-height: 70rem;
    overflow: hidden;
}

main figure img {
    width: 100%;
}

main figure figcaption {
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    text-align: center;
    text-transform: uppercase;
    color: #ffffff;
    font-size: 1.5em;
    font-weight: 200;
    width: 100%;
    padding: 0 16px;
}

main figure figcaption p span {
    white-space: nowrap;
}

main section p {
    margin: 32px 16px;
    text-align: center;
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    main figure figcaption {
        font-size: 2.5em;
        line-height: 1.2em;
    }

    main figure figcaption p {
        width: 60%;
        max-width: 800px;
        margin: auto;
    }

    main section {
        width: 80%;
        max-width: 800px;
        margin: auto;
    }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
    main figure figcaption {
        font-size: 3em;
    }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    main figure figcaption {
        font-size: 3.5em;
    }
}