@charset "UTF-8";
@import url("//hello.myfonts.net/count/3173c7");
@import url("//hello.myfonts.net/count/32ee9c");

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, img {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

a img {
    outline : none;
}

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

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

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

div.clear {
    clear: both;
    line-height: 0;
    height: 0;
    font-size: 0;
    border: 0;
    margin: 0;
    padding: 0;
}

img, video, .video-1 { /*AZIM*/
    display: block;
}

i, em {
    font-style: italic;
}

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

@media print {
    * {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre, blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
        /* h5bp.com/t */
    }

    tr, img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p, h2, h3 {
        orphans: 3;
        widows: 3;
    }

    h2, h3 {
        page-break-after: avoid;
    }
}

/**
 * @license
 * MyFonts Webfont Build ID 3240903, 2016-06-29T11:11:33-0400
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: NeueHaasUnicaPro-Black by Linotype
 * URL: http://www.myfonts.com/fonts/linotype/neue-haas-unica/black/
 * 
 * 
 * License: http://www.myfonts.com/viewlicense?type=web&buildid=3240903
 * Licensed pageviews: 250,000
 * Webfonts copyright: Copyright © 2015 Monotype Imaging Inc.  All rights reserved.
 * 
 * © 2016 MyFonts Inc
*/
/*
@font-face {
  font-family: 'FontNameWasHere';
  src: url("../font/3173C7_A_0.eot");
  src: url("../font/3173C7_A_0.eot?#iefix") format("embedded-opentype"), url("../font/3173C7_A_0.woff2") format("woff2"), url("../font/3173C7_A_0.woff") format("woff"), url("../font/3173C7_A_0.ttf") format("truetype"); }
*/
.media-check {
    width: 0;
    height: 0;
    visibility: hidden;
    position: absolute;
    top: -1000px;
    left: -1000px;
    text-indent: 30px;
}

@media (max-width: 1040px) {
    .media-check {
        text-indent: 10px;
    }
}

html {
    width: 100%;
    height: 100%;
}

body {
    width: 100%;
    height: 100%;
    -webkit-text-size-adjust: 100%;
    zoom: 1;
    -webkit-font-smoothing: antialiased;
    background: url("../images/line_art.svg") #fff no-repeat right center;
    background-size: 100% repeat-x;
    color: #000;
    font-family: "Arial", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 9vh; /* Scroll Navigation Size */
    line-height: 1.1em;
    text-transform: none; /* AZIM */
    letter-spacing: 0.1em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

@media (max-width: 1040px) {
    body {
        font-family: "Arial", "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 8vw;
        line-height: 1.1em;
    }
}

a {
    color: #000;
    border: 0;
    text-decoration: none;
}

a:hover {
    color: #000;
    border: 0;
    text-decoration: none;
}

::selection {
    background: #fff;
    color: #000;
    text-shadow: none;
}

.loading, .loading * {
    cursor: wait;
}

.group:after {
    content: '';
    display: table;
    clear: both;
}

#mfPreviewBarShow, #mfPreviewBar {
    display: none;
}

.page-container {
    position: fixed;
    z-index: 3; /* z-index-azim */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    transform: scale(1);
    transition: transform 400ms;
    padding-bottom: 100vh;
}

@media (max-width: 1040px) {
    .page-container {
        overflow: scroll;
        -webkit-overflow-scrolling: touch;
        display: flex;
        flex-direction: column;
        justify-content: left;
        padding: 7vh 0;
    }
}

@media (max-width: 1040px) {
    .no-center .page-container {
        display: block;
    }
}

.video-playing .page-container {
    transform: scale(1.15);
}

.project-container {
    position: fixed;
    z-index: 2; /* z-index-azim */
    width: 100vw;
    height: 100vh;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    background: none !important;
}

.video-container {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.current-video {
    opacity: 1;
}

.video .video-1 { /*AZIM*/
    transition: -webkit-filter 300ms;
}

.playbar {
    position: fixed;
    bottom: 5px;
    left: 0;
    right: 0;
    height: 3px;
    transition: height 160ms;
    padding-top: 5px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 200ms;
}

.video-playing .playbar {
    opacity: 1;
}

.playbar-inner {
    height: 5px;
    width: 0px;
    background: #fff;
    transition: width 30ms linear;
    opacity: 0.4;
}

.video-playing .video .video-1 {
    -webkit-filter: blur(0px);
}

.loop {
    opacity: 0.9;
}

@media (max-width: 1040px) {
    .loop {
        display: none !important;
    }
}

.loading .loop {
    opacity: 1;
}

.video-playing .loop {
    opacity: 0;
}

.main-video {
    opacity: 0;
}

.video-playing .main-video {
    opacity: 1;
}

/* VIDEO POSITION 1 */

video {
    width: 85vw;
    height: auto;
    position: fixed;
    left: 50%;
    top: 50%;
    top: 50vh;
    transform: translate(-50%, -50%) scale(0.6);
    transition: width 400ms, opacity 400ms, transform 400ms;
}

@media screen and (min-aspect-ratio: 5 / 3) {
    video {
        width: 70vw;
    }
}

@media screen and (min-aspect-ratio: 161 / 76) {
    video {
        width: 60vw;
    }
}

@media (max-width: 1040px) {
    video {
        width: 95vw;
    }
}

@media screen and (min-width: 700px) and (max-width: 1040px) {
    video {
        width: 70vw;
    }
}

.loading video {
    transform: translate(-50%, -50%) scale(0.7);
}

.video-playing video {
    transform: translate(-50%, -50%) scale(1);
}

video {
    border-radius: 5px;
}

@media (max-width: 1040px) {
    video {
        border-radius: 2px;
    }
}

/* VIDEO POSITION 1 */

.video-1 {
    width: 85vw;
    height: auto;
    position: fixed;
    left: 54%;
    top: 50%;
    top: 25vh;
    transform: translate(-50%, -50%) scale(0.7);
    transition: width 400ms, opacity 400ms, transform 400ms;
}

@media screen and (min-aspect-ratio: 5 / 3) {
    .video-1 {
        width: 70vw;
    }
}

@media screen and (min-aspect-ratio: 161 / 76) {
    .video-1 {
        width: 60vw;
    }
}

@media (max-width: 1040px) {
    .video-1 {
        width: 95vw;
    }
}

@media screen and (min-width: 700px) and (max-width: 1040px) {
    .video-1 {
        width: 70vw;
    }
}

.loading .video-1 {
    transform: translate(-50%, -50%) scale(0.7);
}

.video-playing .video-1 {
    transform: translate(-50%, -50%) scale(1);
}

.video-1 {
    border-radius: 5px;
}

@media (max-width: 1040px) {
    .video-1 {
        border-radius: 2px;
    }
}

.info {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    font-family: "Arial", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1.2vw; /* size of the all info of the scroll nav EXCEPT the 1st one AZIM */
    line-height: 1.5em;
    text-transform: none;
    letter-spacing: 0.1em;
    color: #fff;
    visibility: hidden;
    opacity: 0;
    transition: opacity 300ms, visibility 300ms;
}

@media (max-width: 1040px) {
    .info {
        font-family: "Arial", "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 4vw;
        line-height: 1.2em;
    }
}

@media screen and (min-width: 700px) and (max-width: 1040px) {
    .info {
        font-family: "Arial", "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 3.5vh;
        line-height: 1.3em;
    }
}

.info-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 40vw;
}

@media (max-width: 1040px) {
    .info-inner {
        width: 90vw;
    }
}

@media screen and (min-width: 700px) and (max-width: 1040px) {
    .info-inner {
        width: 40vw;
    }
}

.info-open .info {
    opacity: 1;
    visibility: visible;
}

.awards {
    padding-top: 33px; /* AZIM */
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 40vh;
}

.video-playing.mouse-moved.info-open .click-back {
    visibility: hidden;
    opacity: 0;
}

.loading-icon {
    position: fixed;
    top: 5vh;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    z-index: 101;
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: visibility 300ms, opacity 300ms;
    width: 40px;
    height: 40px;
    font-family: "Arial";
    font-size: 40px;
    line-height: 40px;
    text-align: center;
}

@media (max-width: 1040px) {
    .loading-icon {
        font-family: "Arial";
        font-size: 8vw;
        line-height: 40px;
        top: 3vh !important;
    }
}

@media screen and (min-width: 700px) and (max-width: 1040px) {
    .loading-icon {
        font-family: "Arial";
        font-size: 40px;
        line-height: 40px;
    }
}

@media screen and (min-height: 1000px) {
    .loading-icon {
        font-family: "Arial";
        font-size: 40px;
        line-height: 40px;
    }
}

.loading-icon-inner {
    display: block;
    -moz-animation: spinner 1s infinite linear;
    -ms-animation: spinner 1s infinite linear;
    -webkit-animation: spinner 1s infinite linear;
    animation: spinner 1s infinite linear;
}

@-moz-keyframes spinner {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@-ms-keyframes spinner {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes spinner {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes spinner {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loading .loading-icon {
    opacity: 1;
    visibility: visible;
}

.click-back {
    position: fixed;
    top: 5vh;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.4);
    z-index: 101;
    cursor: pointer;
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: visibility 300ms, opacity 300ms;
    font-family: "Arial";
    font-size: 40px;
    line-height: 40px;
}

@media (max-width: 1040px) {
    .click-back {
        font-family: "Arial";
        font-size: 8vw;
        line-height: 1.1em;
        margin-top: -1vh;
    }
}

@media screen and (min-width: 700px) and (max-width: 1040px) {
    .click-back {
        font-family: "Arial";
        font-size: 40px;
        line-height: 40px;
    }
}

@media screen and (min-height: 1000px) {
    .click-back {
        font-family: "Arial";
        font-size: 40px;
        line-height: 40px;
    }
}

@media screen and (min-aspect-ratio: 161 / 76) {
    .click-back {
        top: 5px !important;
    }
}

.credits-link {
    position: fixed;
    bottom: 5vh;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.4);
    z-index: 101;
    cursor: pointer;
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: visibility 300ms, opacity 300ms;
    font-family: "Arial";
    font-size: 40px;
    line-height: 40px;
}

@media (max-width: 1040px) {
    .credits-link {
        font-family: "Arial";
        font-size: 8vw;
        line-height: 1.1em;
        margin-bottom: -1vh;
    }
}

@media screen and (min-width: 700px) and (max-width: 1040px) {
    .credits-link {
        font-family: "Arial";
        font-size: 40px;
        line-height: 40px;
    }
}

@media screen and (min-height: 1000px) {
    .credits-link {
        font-family: "Arial";
        font-size: 40px;
        line-height: 40px;
    }
}

@media screen and (min-aspect-ratio: 161 / 76) {
    .credits-link {
        bottom: 5px !important;
    }
}

.click-back:hover, .credits-link:hover {
    color: #fff;
}

.video-playing.mouse-moved .click-back, .video-playing.mouse-moved .credits-link, .click-back:hover, .credits-link:hover {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 1040px) {
    .video-playing .click-back, .video-playing .credits-link {
        opacity: 1;
        visibility: visible;
    }
}

.video-playing .cover {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
    z-index: 9;
}

.nav {
    padding: 33vh 0; /* AZIM */
    /* z-index: 5; z-index-azim */
    position: relative;
}

@media (max-width: 1040px) {
    .nav {
        padding: 0vh 0;
    }
}

.nav li {
    display: block;
    text-align: left; /* AZIM */
    opacity: 0;
    padding-left: 15vh;
}

.nav li.faded {
    opacity: 1;
    transform: translateY(0px);
}

.nav li:nth-child(1) {
    -moz-animation: pageFadeIn 600ms 0ms;
    -ms-animation: pageFadeIn 600ms 0ms;
    -webkit-animation: pageFadeIn 600ms 0ms;
    animation: pageFadeIn 600ms 0ms;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.nav li:nth-child(2) {
    -moz-animation: pageFadeIn 600ms 60ms;
    -ms-animation: pageFadeIn 600ms 60ms;
    -webkit-animation: pageFadeIn 600ms 60ms;
    animation: pageFadeIn 600ms 60ms;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.nav li:nth-child(3) {
    -moz-animation: pageFadeIn 600ms 120ms;
    -ms-animation: pageFadeIn 600ms 120ms;
    -webkit-animation: pageFadeIn 600ms 120ms;
    animation: pageFadeIn 600ms 120ms;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.nav li:nth-child(4) {
    -moz-animation: pageFadeIn 600ms 180ms;
    -ms-animation: pageFadeIn 600ms 180ms;
    -webkit-animation: pageFadeIn 600ms 180ms;
    animation: pageFadeIn 600ms 180ms;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.nav li:nth-child(5) {
    -moz-animation: pageFadeIn 600ms 240ms;
    -ms-animation: pageFadeIn 600ms 240ms;
    -webkit-animation: pageFadeIn 600ms 240ms;
    animation: pageFadeIn 600ms 240ms;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.nav li:nth-child(6) {
    -moz-animation: pageFadeIn 600ms 300ms;
    -ms-animation: pageFadeIn 600ms 300ms;
    -webkit-animation: pageFadeIn 600ms 300ms;
    animation: pageFadeIn 600ms 300ms;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.nav li:nth-child(7) {
    -moz-animation: pageFadeIn 600ms 360ms;
    -ms-animation: pageFadeIn 600ms 360ms;
    -webkit-animation: pageFadeIn 600ms 360ms;
    animation: pageFadeIn 600ms 360ms;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.nav li:nth-child(8) {
    -moz-animation: pageFadeIn 600ms 420ms;
    -ms-animation: pageFadeIn 600ms 420ms;
    -webkit-animation: pageFadeIn 600ms 420ms;
    animation: pageFadeIn 600ms 420ms;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.nav li:nth-child(9) {
    -moz-animation: pageFadeIn 600ms 480ms;
    -ms-animation: pageFadeIn 600ms 480ms;
    -webkit-animation: pageFadeIn 600ms 480ms;
    animation: pageFadeIn 600ms 480ms;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.nav li:nth-child(10) {
    -moz-animation: pageFadeIn 600ms 540ms;
    -ms-animation: pageFadeIn 600ms 540ms;
    -webkit-animation: pageFadeIn 600ms 540ms;
    animation: pageFadeIn 600ms 540ms;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.nav li:nth-child(11) {
    -moz-animation: pageFadeIn 600ms 600ms;
    -ms-animation: pageFadeIn 600ms 600ms;
    -webkit-animation: pageFadeIn 600ms 600ms;
    animation: pageFadeIn 600ms 600ms;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.nav li:nth-child(12) {
    -moz-animation: pageFadeIn 600ms 660ms;
    -ms-animation: pageFadeIn 600ms 660ms;
    -webkit-animation: pageFadeIn 600ms 660ms;
    animation: pageFadeIn 600ms 660ms;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.nav li:nth-child(13) {
    -moz-animation: pageFadeIn 600ms 720ms;
    -ms-animation: pageFadeIn 600ms 720ms;
    -webkit-animation: pageFadeIn 600ms 720ms;
    animation: pageFadeIn 600ms 720ms;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.nav li:nth-child(14) {
    -moz-animation: pageFadeIn 600ms 780ms;
    -ms-animation: pageFadeIn 600ms 780ms;
    -webkit-animation: pageFadeIn 600ms 780ms;
    animation: pageFadeIn 600ms 780ms;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.nav li:nth-child(15) {
    -moz-animation: pageFadeIn 600ms 840ms;
    -ms-animation: pageFadeIn 600ms 840ms;
    -webkit-animation: pageFadeIn 600ms 840ms;
    animation: pageFadeIn 600ms 840ms;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.nav li:nth-child(16) {
    -moz-animation: pageFadeIn 600ms 900ms;
    -ms-animation: pageFadeIn 600ms 900ms;
    -webkit-animation: pageFadeIn 600ms 900ms;
    animation: pageFadeIn 600ms 900ms;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.nav li:nth-child(17) {
    -moz-animation: pageFadeIn 600ms 960ms;
    -ms-animation: pageFadeIn 600ms 960ms;
    -webkit-animation: pageFadeIn 600ms 960ms;
    animation: pageFadeIn 600ms 960ms;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.nav li:nth-child(18) {
    -moz-animation: pageFadeIn 600ms 1020ms;
    -ms-animation: pageFadeIn 600ms 1020ms;
    -webkit-animation: pageFadeIn 600ms 1020ms;
    animation: pageFadeIn 600ms 1020ms;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.nav li:nth-child(19) {
    -moz-animation: pageFadeIn 600ms 1080ms;
    -ms-animation: pageFadeIn 600ms 1080ms;
    -webkit-animation: pageFadeIn 600ms 1080ms;
    animation: pageFadeIn 600ms 1080ms;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.nav li:nth-child(20) {
    -moz-animation: pageFadeIn 600ms 1140ms;
    -ms-animation: pageFadeIn 600ms 1140ms;
    -webkit-animation: pageFadeIn 600ms 1140ms;
    animation: pageFadeIn 600ms 1140ms;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@-moz-keyframes pageFadeIn {
    0% {
        opacity: 0;
        transform: translateY(1.5vh);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

@-ms-keyframes pageFadeIn {
    0% {
        opacity: 0;
        transform: translateY(1.5vh);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

@-webkit-keyframes pageFadeIn {
    0% {
        opacity: 0;
        transform: translateY(1.5vh);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

@keyframes pageFadeIn {
    0% {
        opacity: 0;
        transform: translateY(1.5vh);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

.nav li.small a {
    font-family: "Arial", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 3.5vh;
    line-height: 1em;
    padding-bottom: 2vh;
    display: inline-block;
}

@media (max-width: 1040px) {
    .nav li.small a {
        font-family: "Arial", "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 4vw;
        line-height: 1.2em;
        padding-bottom: 1vh;
    }
}

.nav a {
    display: inline-block;
    transition: opacity 300ms, transform 400ms;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation;
    position: relative;
}

.nav a.clicked {
    color: #000;
}

.nav a.clicked span {
    opacity: 0.4;
}

.nav a.current-link span {
    opacity: 1;
}

.nav a:hover, .nav a:active {
    color: #666;
}

.loading .nav a:hover, .video-playing .nav a:hover {
    color: #000;
}

.loading li a, .video-playing li a {
    opacity: 0;
}

.nav li a.current-link, .nav a.current-link:hover {
    color: #666;
    opacity: 1;
}

.video-playing .nav li a.current-link {
    opacity: 0;
}

.loading .nav li a.current-link, .loading .nav a.current-link:hover, .video-playing .nav li a.current-link, .video-playing .nav a.current-link:hover {
    color: #fff;
    transition: opacity 300ms, transform 400ms, color 300ms;
}

.bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #111;
    opacity: 0;
    transition: opacity 300ms;
}

.bg-darken {
    background: #111;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    transition: opacity 300ms;
}

.video-playing .bg-darken {
    opacity: 0.9;
}

.video-playing .bg {
    opacity: 1;
}

.loading .bg {
    opacity: 0.85;
}

.information {
    background: black;
    transition: opacity 300ms, visibility 300ms;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
}

.information-inner {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 40vw;
}

@media (max-width: 1040px) {
    .information-inner {
        width: 90vw;
    }
}

@media screen and (min-width: 700px) and (max-width: 1040px) {
    .information-inner {
        width: 40vw;
    }
}

.information-inner p, .information-inner a {
    color: #fff;
    font-family: "Arial", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1.2vw; /* wAZIM 1.2vw;*/
    line-height: 1.5em;
    letter-spacing: 0.1em;
    text-transform: none;
}

@media (max-width: 1040px) {
    .information-inner p, .information-inner a {
        font-family: "Arial", "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 4vw;
        line-height: 1.2em;
    }
}

@media screen and (min-width: 700px) and (max-width: 1040px) {
    .information-inner p, .information-inner a {
        font-family: "Arial", "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 3.5vh;
        line-height: 1.3em;
    }
}

.information-inner p + p {
    margin-top: 1em;
}

.information-inner a:hover {
    opacity: 0.7;
}

.footer {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 4.5vw;
}

@media (max-width: 1040px) {
    .footer {
        width: 10vw;
    }
}

@media screen and (min-width: 700px) and (max-width: 1040px) {
    .footer {
        width: 4.5vw;
    }
}

.footer img {
    width: 100%;
    height: auto;
}

.information-show .information {
    opacity: 1;
    visibility: visible;
}

.information-show .click-back {
    opacity: 1;
    visibility: visible;
}

.info-open .click-back {
    opacity: 0;
    visibility: hidden;
}

.activewheel {
    position: fixed;
    z-index: 4; /* z-index-azim */
    top: 10%;
    left: 85%;

    /*
        -webkit-animation:spin 11s linear infinite;
        -moz-animation:spin 11s linear infinite;
        animation:spin 11s linear infinite;
    }
    @-moz-keyframes spin { 100% { -moz-transform: rotate(-360deg); } }
    @-webkit-keyframes spin { 100% { -webkit-transform: rotate(-360deg); } }
    @keyframes spin { 100% { -webkit-transform: rotate(-360deg); transform:rotate(360deg); } }

    */
    -webkit-animation: antiClockwiseSpin 11s infinite linear;
    animation: antiClockwiseSpin 11s infinite linear;
}

@keyframes antiClockwiseSpin {
    0% {
        transform: rotate(360deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

@keyframes antiClockwiseSpin {
    0% {
        transform: rotate(360deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.position-demo {
   position: fixed;
    display: block;
    top: 67%;
    left: 65%;
}

.position-absolut {
    position: fixed;
    display: block;
    top: 38%;
    left: 65%;
}

.position-dav {
    position: fixed;
    display: block;
    top: 79%;
    left: 58%;
}

.position-penguin {
    position: fixed;
    display: block;
    top: 60%;
    left: 74%;
}

.position-subway {
    position: fixed;
    display: block;
    top: 67%;
    left: 55%;
}

.position-portraid {
    position: fixed;
    display: block;
    top: 40%;
    left: 65%;
}

.position-designs {
    position: fixed;
    display: block;
    top: 50%;
    left: 55%;
}

.position-soelden {
    position: fixed;
    display: block;
    top: 66%;
    left: 75%;
}

.position-stylight {
    position: fixed;
    display: block;
    top: 70%;
    left: 65%;
}


.position-oneshow {
    position: fixed;
    display: block;
    top: 38%;
    left: 61%;
}

.position-wwf {
    position: fixed;
    display: block;
    top: 64%;
    left: 55%;
    height: 800px;
}


/***************************************
    Slider Preview
 ****************************************/
.slider-loaded .click-back {
    visibility: visible;
    opacity: 1;
}

.gellary {
    display: none;
}

.open-slider-container {
    background: black;
    transition: opacity 300ms, visibility 300ms;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    visibility: visible;
    box-sizing: border-box;
    padding: 10vh;
    display: block;
}

.owl-carousel {
    max-width: 800px;
    margin: 0 auto;
    max-height: 80vh;
}

.slider-loaded.info-open .open-slider-container .info {
    opacity: 1;
    visibility: visible;
    z-index: 9;
}

.slider-loaded .credits-link {
    visibility: visible;
    opacity: 1;
}


#redspinner:hover {
    content: url('http://ganzeinfach.art/images/einfachmindfach_red.png');
}