@import 'libs/vars'; @import 'libs/functions'; @import 'libs/mixins'; @import 'libs/vendor'; @import 'libs/breakpoints'; @import url('fonts.googleapis.com/css?family=Source+Sans+Pro:400,600'); @import url('font-awesome.min.css');

/*

Parallelism by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)

*/

// Breakpoints.

@include breakpoints((
        xlarge:  ( 1281px,  1680px ),
        large:   ( 981px,   1280px ),
        medium:  ( 737px,   980px  ),
        small:   ( 481px,   736px  ),
        xsmall:  ( null,    480px  )
));

// Components

@import 'components/cookieconsent';

// Layout

@import 'layout/header';

// Reset. // Based on meyerweb.com/eric/tools/css/reset (v2.0 | 20110126 | License: public domain)

html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
}

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

body {
        line-height: 1;
}

ol, ul {
        list-style: none;
}

blockquote,     q {
        quotes: none;

        &:before,
        &:after {
                content: '';
                content: none;
        }
}

table {
        border-collapse: collapse;
        border-spacing: 0;
}

body {
        -webkit-text-size-adjust: none;
}

mark {
        background-color: transparent;
        color: inherit;
}

input::-moz-focus-inner {
        border: 0;
        padding: 0;
}

input, select, textarea {
        -moz-appearance: none;
        -webkit-appearance: none;
        -ms-appearance: none;
        appearance: none;
}

/* Basic */

// Set box model to border-box.
// Based on css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice
        html {
                box-sizing: border-box;
        }

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

body {
        @include vendor('background-image', ('url("images/overlay.png")', 'linear-gradient(top, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.65))', 'url("../images/bg.jpg")'));
        background-position: top left, bottom left, auto;
        background-size: auto, 100% 100%, cover;
        background-attachment: fixed;
        background-repeat: repeat, no-repeat, auto;
        position: relative;
        background-color: #150C07;
        line-height: 1.75em;
        overflow-x: hidden;
        overflow-y: auto;

        // Stops initial animations until page loads.
                &.is-preload {
                        *, *:before, *:after {
                                @include vendor('animation', 'none !important');
                                @include vendor('transition', 'none !important');
                        }
                }

        @include breakpoint('<=large') {
                background-attachment: scroll;
        }

        @include breakpoint('<=small') {
                background-attachment: scroll;
                background-size: auto, 100% 100%, 250% auto;
                background-repeat: repeat, no-repeat, no-repeat;
                background-position: top left, bottom left, 50% 0%;
        }
}

body, input, select, textarea {
        font-family: 'Source Sans Pro';
        font-weight: 400;
        padding: 0;
        font-size: 13pt;
        color: rgba(255, 255, 255, 0.6);

        @include breakpoint('<=xlarge') {
                font-size: 11pt;
        }

        @include breakpoint('<=large') {
                font-size: 10pt;
        }

        @include breakpoint('<=medium') {
                font-size: 11pt;
        }
}

a {
        color: #fff;
        color: rgba(255, 255, 255, 0.85);
        text-decoration: none;
        @include vendor('transition', 'color 0.25s ease-in-out');

        &:hover {
                color: #d64760;
        }
}

h1, h2, h3, h4, h5, h6 {
        font-weight: 400;
        color: #fff;
        letter-spacing: -0.05em;
}

strong, b {
        color: #fff;
        color: rgba(255, 255, 255, 0.85);
        font-weight: 600;
}

/* List */

ul {
        &.icons {
                cursor: default;
                margin: 0 0 0.5em 0;

                li {
                        display: inline-block;
                        font-size: 1.5em;
                        margin-left: 1em;

                        span {
                                display: none;
                        }

                        a {
                                opacity: 0.35;
                                color: #fff;
                                @include vendor('transition', 'opacity 0.25s ease-in-out');

                                &:hover {
                                        opacity: 1.0;
                                }
                        }

                        &:first-child {
                                margin-left: 0;
                        }
                }

                @include breakpoint('<=small') {
                        margin: 0 0 2em 0;
                }
        }
}

/* Icons */

.icon {
        position: relative;
        text-decoration: none;

        &:before {
                -moz-osx-font-smoothing: grayscale;
                -webkit-font-smoothing: antialiased;
                font-family: FontAwesome;
                font-style: normal;
                font-weight: normal;
                text-transform: none !important;
        }

        > .label {
                display: none;
        }
}

/* Wrapper */

#wrapper {
        min-height: 100vh;
        @include vendor('display', 'flex');
        @include vendor('flex-direction', 'column');
        @include vendor('justify-content', 'space-between');
        @include vendor('align-items', 'center');
        @include vendor('transition', 'filter 0.5s ease-in-out');

        &:before {
                content: '';
                display: block;
        }

        body.is-poptrox-visible & {
                @include vendor('filter', 'blur(0.25em)');
        }

        @include breakpoint('<=small') {
                min-height: 0;
        }
}

/* Scroll Zone */

.scrollZone {
        position: fixed;
        width: 6rem;
        height: 100vh;
        cursor: -moz-grab;
        cursor: -webkit-grab;
        cursor: -ms-grab;
        cursor: grab;
        z-index: _misc(z-index-base) + 1;

        &.left {
                left: 0;
        }

        &.right {
                right: 0;
        }

        @include breakpoint('<=small') {
                display: none;
        }
}

/* Main */

#main {
        $border: 10px;

        @include vendor('transition', 'opacity 1s ease-in-out');
        @include vendor('transition-delay', '0.5s');
        position: relative;
        z-index: 1;
        width: -moz-min-content;
        width: -webkit-min-content;
        width: -ms-min-content;
        width: min-content;
        max-width: 100vw;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        padding: ($border * 0.5);

        .items {
                @include vendor('display', 'flex');

                > :last-child {
                        border-right: solid $border #ffffff;
                }
        }

        .item {
                $width: 20em;

                @include vendor('flex-grow', '0');
                @include vendor('flex-shrink', '0');
                margin: ($border * 0.5);
                height: 16em;
                box-shadow: 0 0 0 $border #ffffff;

                &.span-1 {
                        width: $width;
                }

                &.span-2 {
                        width: $width * 1.5;
                }

                &.span-3 {
                        width: $width * 2;
                }

                &.intro {
                        background-color: #d64760;
                        background-image: url('images/overlay.png');
                        @include vendor('display', 'flex');
                        @include vendor('flex-direction', 'column');
                        @include vendor('justify-content', 'center');
                        padding: 1em 3em;

                        h1 {
                                font-size: 3em;
                                line-height: 1em;
                        }

                        p {
                                font-size: 1.25em;
                                line-height: 1.5em;
                                margin: 0.5em 0 0 0;
                                opacity: 0.65;
                        }
                }

                &.thumb {
                        display: block;
                        position: relative;
                        background: rgba(255, 255, 255, 0.25);
                        cursor: default;

                        h2 {
                                position: absolute;
                                bottom: 0;
                                left: 0;
                                background: rgba(18, 21, 29, 0.85);
                                width: 100%;
                                padding: 1em;
                                font-weight: 400;
                                line-height: 1em;
                                z-index: 2;
                        }

                        img {
                                display: block;
                                z-index: 1;
                                position: absolute;
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 100%;
                                @include vendor('object-fit', 'cover');
                                @include vendor('object-position', 'center');
                                @include vendor('transition', 'opacity 0.75s ease-in-out');
                                @include vendor('transition-delay', '1.25s');
                        }

                        @for $i from 1 through 6 {
                                &.delay-#{$i} {
                                        img {
                                                @include vendor('transition-delay', '#{1.25 + ($i * 0.125)}s');
                                        }
                                }
                        }
                }
        }

        body.is-preload & {
                opacity: 0;

                .item {
                        &.thumb {
                                img {
                                        opacity: 0;
                                }
                        }
                }
        }

        @include breakpoint('<=xlarge') {
                .item {
                        $width: 17em;

                        height: 14em;

                        &.span-1 {
                                width: $width;
                        }

                        &.span-2 {
                                width: $width * 1.5;
                        }

                        &.span-3 {
                                width: $width * 2;
                        }
                }
        }

        @include breakpoint('<=small') {
                $border: 5px;

                width: 100%;
                overflow-x: hidden;
                overflow-y: auto;
                padding: ($border * 0.5);

                .items {
                        @include vendor('flex-wrap', 'wrap');
                        @include vendor('justify-content', 'center');

                        > :last-child {
                                border-right: 0;
                        }
                }

                .item {
                        @include vendor('flex-grow', '1');
                        @include vendor('flex-shrink', '1');
                        width: calc(50vw - #{$border * 3}) !important;
                        margin: ($border * 0.5);
                        box-shadow: 0 0 0 $border #ffffff;

                        &.intro {
                                width: calc(100vw - #{$border * 4}) !important;
                                text-align: center;
                                height: auto;
                                padding: 3em;

                                h1 {
                                        font-size: 2em;
                                }

                                p {
                                        font-size: 1em;
                                }
                        }

                        &.thumb {
                                h2 {
                                        display: none;
                                }
                        }
                }
        }

        @include breakpoint('<=xsmall') {
                .item {
                        //width: calc(100vw - #{$border * 4}) !important;
                        height: 10em;
                }
        }
}

/* Header */

#footer {
        width: 100%;
        padding: 1.5em;
        @include vendor('display', 'flex');
        @include vendor('justify-content', 'space-between');
        position: relative;
        z-index: _misc(z-index-base) + 2;

        > section {
                &:first-child {
                        text-align: left;
                        max-width: 36em;
                        padding-right: 2em;
                }

                &:last-child {
                        text-align: right;
                        // max-width: 36em;
                }
        }

        h2 {
                font-size: 2.25em;
                margin: 0 0 1em 0;
        }

        .copyright {
                li {
                        display: inline-block;
                        margin-left: 1em;
                        padding-left: 1em;
                        border-left: solid 1px rgba(255, 255, 255, 0.25);
                        line-height: 1em;

                        &:first-child {
                                border-left: 0;
                                margin-left: 0;
                                padding-left: 0;
                        }
                }
        }

        @include breakpoint('<=medium') {
                @include vendor('flex-direction', 'column');

                > section {
                        &:first-child {
                                width: 100%;
                                padding-right: 0;
                        }

                        &:last-child {
                                text-align: left;
                                margin: 1.5em 0 0 0;
                                width: 100%;
                        }
                }
        }

        @include breakpoint('<=small') {
                text-align: center;
                padding: 3em;

                > section {
                        &:first-child {
                                text-align: center;
                                max-width: 100%;
                        }

                        &:last-child {
                                text-align: center;
                                max-width: 100%;
                        }
                }

                .copyright {
                        li {
                                display: block;
                                margin: 0.75em 0 0 0;
                                padding-left: 0;
                                border-left: 0;

                                &:first-child {
                                        margin-top: 0;
                                }
                        }
                }
        }
}

/* Popup */

.poptrox-popup {
        background: #1a1f2c;
        background: rgba(18, 21, 29, 0.9);
        box-shadow: 0px 0px 0px 10px #fff, 0px 10px 60px 10px rgba(8, 11, 19, 0.55);
        cursor: default;

        .loader {
                display: block;
                width: 48px;
                height: 48px;
                position: absolute;
                top: 50%;
                left: 50%;
                margin: -24px 0 0 -24px;
                background: url('./images/loader.gif');
                opacity: 0.25;
        }

        .caption {
                position: absolute;
                bottom: 0;
                left: 0;
                background: #1a1f2c;
                background: rgba(18, 21, 29, 0.85);
                display: block;
                width: 100%;
                line-height: 75px;
                text-align: center;
                font-size: 1.25em;
                color: #fff;
        }

        .nav-next, .nav-previous {
                text-decoration: none;
                font-weight: normal;
                font-style: normal;
                @include vendor('transition', 'opacity 0.25s ease-in-out');
                opacity: 0.35;

                &:hover {
                        opacity: 1.0;
                }
        }

        .nav-next, .nav-previous {
                -moz-osx-font-smoothing: grayscale;
                -webkit-font-smoothing: antialiased;
                font-family: FontAwesome;
                font-style: normal;
                font-weight: normal;
                text-transform: none !important;
                width: 150px;
                height: 75px;
                position: absolute;
                bottom: 0;
                cursor: pointer;
                font-size: 3em;
                line-height: 75px;
        }

        .nav-next {
                right: 0;
                text-align: right;
                padding-right: 30px;
                &:before {
                        content: '\f105';
                }
        }

        .nav-previous {
                left: 0;
                text-align: left;
                padding-left: 30px;
                &:before {
                        content: '\f104';
                }
        }

        @include breakpoint('<=small') {
                background: #0a0f1c;
                box-shadow: 0px 0px 30px 10px rgba(8, 11, 19, 0.85);
                border: solid 2.5px #fff;
                @include vendor('box-sizing', 'content-box');

                .caption {
                        display: none !important;
                }

                .nav-next {
                        display: none !important;
                }

                .nav-previous {
                        display: none !important;
                }
        }
}