html {
    box-sizing: border-box
}

*, *::after, *::before {
    box-sizing: inherit
}

* {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased
}

body {
    background-color: #000000;
    color: #0e0e0e;
    font-family: 'Open Sans', Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 350;
    line-height: 1.4
}

@media screen and (min-width: 55em) {
    body {
        overflow-x: hidden;
        overflow-y: visible;
        min-height: 100vh;
        padding: calc(5vw + 2rem) 5vw 5vw 5vw
    }
}

img {
    max-width: 60em;
    vertical-align: top;
    width: 100%
}

a {
    border-bottom: 2px #0e0e0e solid;
    color: #0e0e0e;
    font-weight: 100;
    text-decoration: none
}

@media screen and (min-width: 55em) {
    a:hover, a:focus {
        -webkit-animation: flash-border 0.65s steps(1, end) infinite;
        animation: flash-border 0.65s steps(1, end) infinite;
        outline: 0
    }
}

p a {
    border-width: 1px;
    font-weight: 400
}

em a {
    font-style: normal
}

h1, h2, h3 {
    margin-top: 0
}

h2, h3 {
    font-weight: 800
}

h1 {
    font-size: 3.25em;
    font-weight: 100;
    line-height: 1
}

@media screen and (min-width: 40em) {
    h1 {
        font-size: 4em
    }
}

@media screen and (min-width: 53.75em) {
    h1 {
        font-size: 4.25em
    }
}

h2 {
    font-size: 1.25em
}

h3 {
    font-size: 16px;
    margin-bottom: 0.35rem
}

ol, ul {
    margin-top: 0;
    margin-bottom: 0;
    list-style-type: none;
    padding-left: 0
}

p {
    margin-top: 0
}

.page {
    padding: 5em 5vw calc(5vw * 2.5);
    position: relative
}

@media screen and (min-width: 40em) {
    .page {
        padding: 8em calc(5vw * 2);
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        min-height: 100vh
    }
}

@media screen and (min-width: 53.75em) {
    .page {
        padding: 5vw 0;
        display: none;
        min-height: calc(100vh - (5vw * 2) - 2rem - (16px * 1.25 * 1.5));
        position: absolute;
        -webkit-transform-origin: center 10vw;
        transform-origin: center 10vw;
        width: calc(100vw - (2 * 5vw));
        will-change: transform;
    }

    .page.page-init {
        display: flex
    }
}

.page-bg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1
}

.page#index .page-bg {
    background-color: #f6bcd6
}

.page#privacy_policy .page-bg {
    background-color: #f6bfbc
}

.page#cookie_policy .page-bg {
    background-color: #f6dcbc
}

.page#contact .page-bg {
    background-color: #bcf6dc
}

@media screen and (min-width: 53.75em) {
    .page-bg {
        height: calc(100% + 16px * 1.25 * 1.5 + 2rem);
        top: calc((16px * 1.25 * 1.5 + 2rem) * -1);
        -webkit-transition: opacity 0.25s cubic-bezier(0.55, 0.085, 0.68, 0.53);
        transition: opacity 0.25s cubic-bezier(0.55, 0.085, 0.68, 0.53);
        will-change: opacity
    }

    .page-init .page-bg {
        opacity: 1
    }
}

.content-wrap {
    display: block
}

.content-wrap::after {
    clear: both;
    content: "";
    display: table
}

@media screen and (min-width: 53.75em) {
    .content-wrap {
        padding-right: calc(5vw * 2);
        padding-left: calc(5vw * 2);
        display: none;
        opacity: 0;
        position: fixed;
        will-change: opacity
    }

    .page-init .content-wrap, .page-visible .content-wrap, .page-outro .content-wrap {
        display: block
    }

    .page-init .content-wrap, .page-visible .content-wrap {
        position: relative
    }

    .page-init .content-wrap {
        opacity: 1
    }

    .page-visible .content-wrap {
        -webkit-animation: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
        animation: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
        -webkit-animation-timing-function: steps(1, end);
        animation-timing-function: steps(1, end)
    }
}

.nav-links {
    position: fixed;
    top: 1em;
    left: 5vw;
    margin: 0;
    z-index: 2
}

@media screen and (min-width: 40em) {
    .nav-links {
        padding-right: 5vw;
        padding-left: 5vw;
        top: 2em
    }
}

@media screen and (min-width: 53.75em) {
    .nav-links {
        position: relative;
        top: inherit;
        left: inherit;
        padding: 0 calc(5vw * 2)
    }
}

.nav-links li {
    display: inline-block;
    margin-right: 1rem
}

@media screen and (min-width: 40em) {
    .nav-links li {
        margin-right: 2rem
    }
}

.nav-links h2 {
    margin-bottom: 0
}

.nav-link {
    font-size: 1rem;
    text-transform: uppercase;
    -webkit-transition: border-width 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: border-width 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

@media screen and (min-width: 40em) {
    .nav-link {
        font-size: 1em
    }
}

.nav-link-active {
    border-width: 0.5em
}

@media screen and (min-width: 53.75em) {
    .nav-link-active:hover, .nav-link-active:focus {
        -webkit-animation: none;
        animation: none
    }
}

@media screen and (min-width: 53.75em) {
    .background, .extras {
        float: left;
        display: block;
        margin-right: 3.57866%;
        width: 48.21067%
    }

    .background:last-child, .extras:last-child {
        margin-right: 0
    }
}

@media screen and (min-width: 68.75em) {
    .background, .extras {
        float: left;
        display: block;
        margin-right: 7.42297%;
        width: 46.28851%
    }

    .background:last-child, .extras:last-child {
        margin-right: 0
    }
}

.e-mail:before {
    content: attr(data-website) "\0040" attr(data-user);
    unicode-bidi: bidi-override;
    direction: rtl;
}