/* Google Webfonts */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600);
@import url(http://fonts.googleapis.com/css?family=Karla:700);

/* Fallback */
header, footer, section, article, nav, aside { display: block }

/* Basic Styles */
body, html {
    background: white;
    margin: 0;
    padding: 0; }

html {
    font-size: 17px;
    -webkit-font-smoothing: antialiased; }

body {
    font-family: "Open Sans", sans-serif;
    font-size: 1.125rem;
    color: #4b505a;
    line-height: 1.5;
    position: relative; }

b, strong { font-weight: 600 }

i, em { font-style: italic }

a {
    color: #eb2344;
    text-decoration: none; }

a:hover, a:active, a:visited { opacity: 0.65 }

a.icon {
    padding-left: 28px;
    position: relative; }

a.icon:before {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    position: absolute;
    top: 0;
    left: 0;
    background: url(icons.svg) no-repeat 0 0;
    background-size: 252px 18px; }

a.icon:active:before { top: 1px }

hr {
    height: 1px;
    border: none;
    background: #ececec; }

fieldset {
    border: none;
    background: #ececec;
    padding: 34px; }

label {
    font-size: 0.75rem;
    font-weight: 600;
    display: block;
    padding: 6px 0; }

input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="button"], input[type="submit"], textarea {
    border: 1px solid #d9d9d9;
    font-size: 1rem;
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
    color: #4b505a;
    line-height: 1;
    padding: 8px;
    background: white; }

input[type="button"], input[type="submit"] {
    border: none;
    color: white;
    font-weight: 600;
    background: #eb2344;
    padding: 12px 8px; }

input[type="button"]:hover, input[type="submit"]:hover { opacity: 0.65 }

table {
    width: 100%;
    margin: 34px 0; }

    table td, table th {
        padding: 6px;
        text-align: left; }

    table th { border-bottom: 1px solid #ececec }

a, button {
    -webkit-transition: opacity 0.2s ease-in-out, color 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out, color 0.2s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out, color 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out, color 0.2s ease-in-out; }

p { margin: 12px 0 }

h1, h2, h3, h4, h5 {
    color: #191a1a;
    line-height: 1;
    padding: 17px 0 8px;
    margin: 0; }

h1 {
    font-size: 2rem;
    font-weight: 600; }

h2 {
    font-size: 1.5rem;
    font-weight: 400; }

h3 {
    font-size: 1.125rem;
    font-weight: 600; }

h4 {
    font-size: 1rem;
    font-weight: 400; }

h5 {
    font-size: 0.875rem;
    font-weight: 600; }

/* Reusable Styles */
.title {
    font-family: "Karla", sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    display: block;
    position: relative;
    margin-bottom: 15px; }

    .title:after {
        content: "";
        display: block;
        width: 18px;
        height: 1px;
        position: absolute;
        left: 0;
        bottom: -15px;
        background: #eb2344; }

.more {
    display: inline-block;
    width: 22px;
    height: 12px;
    background: url(buttons-light.svg) no-repeat -108px -11px;
    background-size: 170px 34px;
    text-indent: -9999px;
    margin: 0 4px; }

    .more:active { background-position: -108px -10px }

.scroll {
    display: block;
    width: 34px;
    height: 34px;
    background: url(buttons-light.svg) no-repeat -136px 0;
    background-size: 170px 34px;
    text-indent: -9999px; }

/* Gradients */
.gradient-1 {
    background-color: #a18cab;
    background-image: -o-linear-gradient(-40deg, #0e153a 10%, #4a4c7b 35%, #a18cab 65%, #f3c9d7 90%);
    background-image: -moz-linear-gradient(-40deg, #0e153a 10%, #4a4c7b 35%, #a18cab 65%, #f3c9d7 90%);
    background-image: -ms-linear-gradient(-40deg, #0e153a 10%, #4a4c7b 35%, #a18cab 65%, #f3c9d7 90%);
    background-image: linear-gradient(-130deg, #0e153a 10%, #4a4c7b 35%, #a18cab 65%, #f3c9d7 90%); }

.gradient-2 {
    background-color: #8caba4;
    background-image: -o-linear-gradient(-40deg, #0e1c3a 10%, #4a687b 35%, #8caba4 65%, #c9f3d1 90%);
    background-image: -moz-linear-gradient(-40deg, #0e1c3a 10%, #4a687b 35%, #8caba4 65%, #c9f3d1 90%);
    background-image: -ms-linear-gradient(-40deg, #0e1c3a 10%, #4a687b 35%, #8caba4 65%, #c9f3d1 90%);
    background-image: linear-gradient(-130deg, #0e1c3a 10%, #4a687b 35%, #8caba4 65%, #c9f3d1 90%); }

.gradient-3 {
    background-color: #ab9c8c;
    background-image: -o-linear-gradient(-40deg, #3a0e1c 10%, #7b4a54 35%, #ab9c8c 65%, #def3c9 90%);
    background-image: -moz-linear-gradient(-40deg, #3a0e1c 10%, #7b4a54 35%, #ab9c8c 65%, #def3c9 90%);
    background-image: -ms-linear-gradient(-40deg, #3a0e1c 10%, #7b4a54 35%, #ab9c8c 65%, #def3c9 90%);
    background-image: linear-gradient(-130deg, #3a0e1c 10%, #7b4a54 35%, #ab9c8c 65%, #def3c9 90%); }

.gradient-4 {
    background-color: #ab8c98;
    background-image: -o-linear-gradient(-40deg, #2f0e3a 10%, #754a7b 35%, #ab8c98 65%, #f3e1c9 90%);
    background-image: -moz-linear-gradient(-40deg, #2f0e3a 10%, #754a7b 35%, #ab8c98 65%, #f3e1c9 90%);
    background-image: -ms-linear-gradient(-40deg, #2f0e3a 10%, #754a7b 35%, #ab8c98 65%, #f3e1c9 90%);
    background-image: linear-gradient(-130deg, #2f0e3a 10%, #754a7b 35%, #ab8c98 65%, #f3e1c9 90%); }

.gradient-5 {
    background-color: #8f8cab;
    background-image: -o-linear-gradient(-40deg, #0e2f3a 10%, #4a687b 35%, #8f8cab 65%, #f3c9ef 90%);
    background-image: -moz-linear-gradient(-40deg, #0e2f3a 10%, #4a687b 35%, #8f8cab 65%, #f3c9ef 90%);
    background-image: -ms-linear-gradient(-40deg, #0e2f3a 10%, #4a687b 35%, #8f8cab 65%, #f3c9ef 90%);
    background-image: linear-gradient(-130deg, #0e2f3a 10%, #4a687b 35%, #8f8cab 65%, #f3c9ef 90%); }

/* Required for Animations */
.hidden { opacity: 0 }

.visible { opacity: 1 }

article .body, .teaser .excerpt, footer {
    width: 634px;
    margin: 0 auto; }

/* Header incl. Logo & Navigation */
body > header {
    width: 796px;
    position: absolute;
    top: 34px;
    left: 50%;
    margin-left: -398px;
    z-index: 900; }

    body > header .logo, body > header .toggle {
        background: none;
        border: none;
        margin: 0;
        height: 34px;
        position: absolute;
        top: 0;
        color: white;
        line-height: 34px; }

    body > header .logo:after, body > header .toggle:after {
        content: "";
        display: block;
        width: 34px;
        height: 34px;
        position: absolute;
        top: 0;
        background: url(buttons-light.svg) no-repeat;
        background-size: 170px 34px; }

    body > header .logo:active:after, body > header .toggle:active:after { top: 1px }

    body > header .logo:hover, body > header .toggle:hover { opacity: 1 }

    body > header .logo:hover:after, body > header .toggle:hover:after { opacity: 0.65 }

    body > header .logo {
        display: block;
        padding: 0 0 0 43px;
        left: 0;
        font-size: 1rem;
        font-weight: 600; }

    body > header .logo:after {
        left: 0;
        background-position: 0 0; }

    body > header .toggle {
        padding: 0 43px 0 0;
        right: 0;
        font-family: "Karla", sans-serif;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase; }

    body > header .toggle:after {
        right: 0;
        background-position: -34px 0; }

    body > header .toggle.open:after { background-position: -68px 0 }

    body > header nav {
        width: 306px;
        background: white;
        position: absolute;
        top: 34px;
        right: 0; }

        body > header nav ul {
            padding: 28px 34px;
            margin: 0; }

            body > header nav ul li { list-style: none }

                body > header nav ul li a {
                    font-size: 1rem;
                    line-height: 1.75rem;
                    color: #4b505a; }

                body > header nav ul li a:hover {
                    position: relative;
                    color: #eb2344;
                    opacity: 1; }

                body > header nav ul li a:hover:after {
                    content: "";
                    display: block;
                    width: 22px;
                    height: 12px;
                    background: url(buttons-dark.svg) no-repeat -6px -11px;
                    background-size: 100px 34px;
                    position: absolute;
                    top: 5px;
                    right: -32px; }

                body > header nav ul li a:hover:active:after { background-position: -6px -10px }

/* Article Header */
.content article header {
    width: 100%;
    height: 600px;
    color: white;
    position: relative;
    overflow: hidden; }

    .content article header .overlay {
        width: 100%;
        height: 700px;
        opacity: 0.15;
        background-repeat: no-repeat;
        background-position: 50% 0;
        background-size: cover;
        -webkit-filter: saturate(0%);
        -moz-filter: saturate(0%);
        -o-filter: saturate(0%);
        -webkit-transition: opacity 0.35s ease-in-out;
        -moz-transition: opacity 0.35s ease-in-out;
        -o-transition: opacity 0.35s ease-in-out;
        transition: opacity 0.35s ease-in-out; }

.content article header:hover .overlay {
    opacity: 1;
    -webkit-filter: saturate(100%);
    -moz-filter: saturate(100%);
    -o-filter: saturate(100%); }

.content article header .excerpt {
    width: 634px;
    position: absolute;
    bottom: 95px;
    left: 50%;
    margin-left: -317px;
    z-index: 900;
    -webkit-transition: opacity 0.35s ease-in-out;
    -moz-transition: opacity 0.35s ease-in-out;
    -o-transition: opacity 0.35s ease-in-out;
    transition: opacity 0.35s ease-in-out; }

    .content article header .excerpt .title, .content article header .excerpt .meta { opacity: 0.65 }

    .content article header .excerpt .title:after {
        background: white;
        opacity: 1; }

    .content article header .excerpt h1 {
        color: white;
        padding: 15px 0 4px; }

        .content article header .excerpt h1 a { color: white }

    .content article header .excerpt p { margin: 10px 0 }

    .content article header .excerpt .meta { font-size: 0.875rem }

.content article header:hover .excerpt {
    opacity: 0.65;
    -webkit-transform: translate3d(0, 12px, 0);
    -moz-transform: translate3d(0, 12px, 0);
    -o-transform: translate3d(0, 12px, 0);
    transform: translate3d(0, 12px, 0);
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out; }

.content article header .scroll {
    display: none;
    position: absolute;
    bottom: 34px;
    left: 50%;
    margin-left: -17px;
    z-index: 900; }

.content article header .scroll:active { bottom: 33px }

/* Article Body */
.content article .body { padding: 68px 0 34px }

    .content article .body .more {
        display: block;
        background: url(buttons-dark.svg) no-repeat -6px -11px;
        background-size: 100px 34px;
        margin: 10px 0 0; }

    .content article .body .more:active { background-position: -6px -10px }

    .content article .body .summary { padding-bottom: 34px; }

        .content article .body .summary:last-of-type { padding-bottom: 0; }

    .content article .body .media {
        background-size: 72px 72px;
        background-repeat: no-repeat;
        background-position: center;
        position: relative;
        min-height: 150px;
        height: auto;
        margin: 68px -81px; }

        .content article .body .summary .media { margin-top: 34px; }

    .content article .body .media.image { background-image: url(placeholder-image.svg) }

        .content article .body .media.image img {
            display: block;
            width: 100%;
            height: auto; }

    .content article .body .media.youtube iframe, .content article .body .media.vimeo iframe, .content article .body .media.audio iframe {
        display: block;
        width: 796px;
        height: 448px;
        border: none; }

    .content article .body .media.youtube { background-image: url(placeholder-youtube.svg) }

    .content article .body .media.vimeo { background-image: url(placeholder-vimeo.svg) }

    .content article .body .media.audio { background-image: url(placeholder-audio.svg) }

        .content article .body .media.audio iframe {
            width: 100%;
            height: 166px; }

    .content article .body .media .caption {
        position: absolute;
        width: 224px;
        top: 0;
        right: -246px; }

        .content article .body .media .caption h4 { padding: 0 }

        .content article .body .media .caption p, .content article .body .media .caption a {
            font-size: 0.875rem;
            line-height: 1.75; }

        .content article .body .media .caption p {
            position: relative;
            margin: 10px 0 18px; }

        .content article .body .media .caption p:after {
            content: "";
            display: block;
            width: 18px;
            height: 1px;
            position: absolute;
            left: 0;
            bottom: -11px;
            background: #eb2344; }

        .content article .body .media .caption a { color: #4b505a }

        .content article .body .media .caption a.icon.image:before { background-position: -198px 0 }

        .content article .body .media .caption a.icon.video:before { background-position: -216px 0 }

        .content article .body .media .caption a.icon.audio:before { background-position: -234px 0 }

        .content article .body .media .caption a:hover { color: #191a1a }

/* Article Footer incl. Author Information, Share Options, Comments & Pagination */
.content article footer .author, .content article footer .share, .content article footer .comments { font-size: 0.875rem }

    .content article footer .author ul, .content article footer .share ul, .content article footer .comments ul { padding: 0 }

        .content article footer .author ul li, .content article footer .share ul li, .content article footer .comments ul li { list-style: none }

.content article footer .meta { padding-bottom: 68px }

.content article footer .meta:after {
    content: "";
    display: table;
    clear: both; }

.content article footer .author {
    width: 388px;
    float: left; }

    .content article footer .author h4 { padding: 15px 0 0 }

    .content article footer .author p { line-height: 1.625rem }

    .content article footer .author ul {
        margin: 0;
        padding-top: 10px; }

    .content article footer .author ul:after {
        content: "";
        display: table;
        clear: both; }

    .content article footer .author ul li {
        float: left;
        margin-right: 10px; }

        .content article footer .author ul li a {
            display: block;
            width: 18px;
            height: 18px;
            text-indent: -9999px; }

        .content article footer .author ul li a.icon { padding: 0 }
        
        .content article footer .author ul li a.icon.twitter:before { background-position: 0 0 }

        .content article footer .author ul li a.icon.facebook:before { background-position: -18px 0 }

        .content article footer .author ul li a.icon.google:before { background-position: -36px 0 }

        .content article footer .author ul li a.icon.linkedin:before { background-position: -54px 0 }

        .content article footer .author ul li a.icon.pinterest:before { background-position: -72px 0 }

        .content article footer .author ul li a.icon.flickr:before { background-position: -90px 0 }

        .content article footer .author ul li a.icon.dribbble:before { background-position: -108px 0 }

        .content article footer .author ul li a.icon.rss:before { background-position: -126px 0 }

.content article footer .share {
    width: 144px;
    float: right; }

    .content article footer .share ul { padding: 15px 0 0 }

        .content article footer .share ul li { padding: 4px 0 }

            .content article footer .share ul li a {
                color: #4b505a;
                height: 18px;
                display: block; }

            .content article footer .share ul li a.twitter:before { background-position: -144px 0 }

            .content article footer .share ul li a.facebook:before { background-position: -162px 0 }

            .content article footer .share ul li a.google:before { background-position: -180px 0 }

            .content article footer .share ul li a:hover { color: #191a1a }

.content article footer .comments { padding-bottom: 34px }

.content article footer .pagination { padding-bottom: 68px }

.content article footer .pagination:after {
    content: "";
    display: table;
    clear: both; }

.content article footer .pagination .button {
    display: block;
    height: 34px;
    position: relative;
    font-family: "Karla", sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    color: #4b505a;
    text-transform: uppercase;
    line-height: 34px; }

.content article footer .pagination .button:before {
    content: "";
    display: block;
    width: 34px;
    height: 34px;
    position: absolute;
    top: 0;
    left: 0;
    background: url(buttons-dark.svg) no-repeat -34px 0;
    background-size: 100px 34px; }

.content article footer .pagination .button:hover { color: #191a1a }

.content article footer .pagination .button:active:before { top: 1px }

.content article footer .pagination .button.older {
    float: left;
    padding-left: 44px; }

.content article footer .pagination .button.newer {
    float: right;
    padding-right: 44px; }

.content article footer .pagination .button.newer:before {
    left: auto;
    right: 0;
    background-position: -68px 0; }

.teaser {
    color: white;
    padding: 68px 0 62px; }

    .teaser .excerpt { opacity: 0.65 }

        .teaser .excerpt .title, .teaser .excerpt .meta { opacity: 0.65 }

        .teaser .excerpt .title:after {
            background: white;
            opacity: 1; }

        .teaser .excerpt h1 {
            color: white;
            padding: 15px 0 4px; }

            .teaser .excerpt h1 a { color: white }

        .teaser .excerpt p { margin: 10px 0 }

        .teaser .excerpt .meta { font-size: 0.875rem }

.teaser:hover .excerpt {
    opacity: 1;
    -webkit-transform: translate3d(0, -6px, 0);
    -moz-transform: translate3d(0, -6px, 0);
    -o-transform: translate3d(0, -6px, 0);
    transform: translate3d(0, -6px, 0);
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out; }

/* Footer */
body > footer {
    font-size: 0.875rem;
    padding: 68px 0;
    line-height: 1; }

    body > footer .copyright { position: relative }

    body > footer .copyright:before {
        content: "";
        display: block;
        width: 18px;
        height: 1px;
        position: absolute;
        left: 0;
        top: -15px;
        background: #eb2344; }

    body > footer .copyright a { margin-left: 6px }

/* Syntax Highlighting */
pre, code {
    background: #f8f7fa;
    padding: 34px;
    font-family: "Karla", sans-serif;
    color: #4b505a;
    font-size: 1rem;
    margin: 34px 0; }

code { padding: 3px 6px; }

.highlight { background: #ffffff }
.highlight .c { color: #4b505a } 
.highlight .err { color: #a61717; background-color: #e3d2d2 }
.highlight .gd { background-color: #ffdddd }
.highlight .gd .x { background-color: #ffaaaa }
.highlight .gi { background-color: #ddffdd }
.highlight .gi .x { background-color: #aaffaa }
.highlight .go { color: #888888 }
.highlight .gp { color: #555555 }
.highlight .gu { color: #aaaaaa }
.highlight .kt { color: #445588 }
.highlight .m { color: #009999 }
.highlight .nb { color: #0086B3 }
.highlight .nc { color: #445588 }
.highlight .ni { color: #800080 }
.highlight .nn { color: #85868c }
.highlight .nt { color: #242a52 }
.highlight .w { color: #aaaab3 }
.highlight .ne, .highlight .nf { color: #99001a; }
.highlight .cm, .highlight .c1 { color: #9a9295 } 
.highlight .sr { color: #009926 }
.highlight .ss { color: #2e3599 }
.highlight .gr, .highlight .gt { color: #ab1a32 }
.highlight .gd, .highlight .gd .x, .highlight .gi, .highlight .gi .x { color: #191a1a }
.highlight .c, .highlight .cm, .highlight .c1, .highlight .cs, .highlight .ge { font-style: italic }
.highlight .cs, .highlight .ow, .highlight .ne, .highlight .nf, .highlight .kc, .highlight .kd, .highlight .kp, .highlight .kr, .highlight .k, .highlight .o, .highlight .nc, .highlight .kt, .highlight .gs { font-weight: 700 }
.highlight .mf, .highlight .mh, .highlight .mi, .highlight .mo, .highlight .il { color: #009999 }
.highlight .s, .highlight .sb, .highlight .sc, .highlight .sd, .highlight .s2, .highlight .se, .highlight .sh, .highlight .si, .highlight .sx, .highlight .s1  { color: #eb2344 } 
.highlight .gh, .highlight .cs, .highlight .cp, .highlight .bp { color: #8c8a99 }
.highlight .na, .highlight .no, .highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi { color: #6b658c }

/* Media Queries */
@media only screen and (max-width: 1440px) { 

    html { font-size: 16px }

    .content article .body .media .caption {
        padding-top: 34px;
        background: white;
        position: relative;
        width: auto;
        top: auto;
        right: auto; }

}

@media only screen and (max-width: 780px) { 

    html { font-size: 15px }

    body > header {
        width: 634px;
        margin-left: -317px; }

    .content article .body .media { margin: 68px 0 }

    .content article .body .media.youtube iframe, .content article .body .media.vimeo iframe {
        width: 634px;
        height: 357px; }

}

@media only screen and (max-width: 634px) { 

    html { font-size: 14px }

    body > header, .content article header .excerpt, article .body, .teaser .excerpt, footer { width: 412px }

    body > header, .content article header .excerpt { margin-left: -206px }

    .content article .body .media.youtube, .content article .body .media.vimeo { margin: 68px 0 }

        .content article .body .media.youtube iframe, .content article .body .media.vimeo iframe {
            width: 412px;
            height: 232px; }

    .content article footer .author { width: 208px }

        .content article footer .author ul li { margin-right: 6px }

    .content article footer .share { width: 122px }

}

@media only screen and (max-width: 412px) { 

    body > header, .content article header .excerpt, article .body, .teaser .excerpt, footer, body > header nav { width: 300px }

    body > header, .content article header .excerpt { margin-left: -150px }

    .content article .body .media, .content article .body .media.youtube, .content article .body .media.vimeo { margin: 34px 0 }

    .content article header { height: 500px }

    .content article .body { padding: 34px 0 0 }

        .content article .body .media.youtube iframe, .content article .body .media.vimeo iframe {
            width: 300px;
            height: 169px; }

    .content article footer .meta { padding-bottom: 0 }

    .content article footer .author, .content article footer .share {
        float: none;
        width: auto;
        padding-bottom: 34px; }

    body > footer .copyright { line-height: 1.5 }

        body > footer .copyright a { margin: 0 }

}