/* FONTS */

@font-face {
    font-family: 'AkzidenzGroteskBQ-Ext';
    src: url(../fonts/AkzidenzGroteskBQ-Ext.eot?#iefix) format("embedded-opentype"), url(../fonts/AkzidenzGroteskBQ-Ext.otf) format("opentype"), url(../fonts/AkzidenzGroteskBQ-Ext.woff) format("woff"), url(../fonts/AkzidenzGroteskBQ-Ext.ttf) format("truetype"), url(../fonts/AkzidenzGroteskBQ-Ext.svg#AkzidenzGroteskBQ-Ext) format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'AkzidenzGroteskBQ-LigExt';
    src: url(../fonts/AkzidenzGroteskBQ-LigExt.eot?#iefix) format("embedded-opentype"), url(../fonts/AkzidenzGroteskBQ-LigExt.otf) format("opentype"), url(../fonts/AkzidenzGroteskBQ-LigExt.woff) format("woff"), url(../fonts/AkzidenzGroteskBQ-LigExt.ttf) format("truetype"), url(../fonts/AkzidenzGroteskBQ-LigExt.svg#AkzidenzGroteskBQ-LigExt) format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Charon-Regular';
    src: url(../fonts/Charon-Regular.eot?#iefix) format("embedded-opentype"), url(../fonts/Charon-Regular.otf) format("opentype"), url(../fonts/Charon-Regular.woff) format("woff"), url(../fonts/Charon-Regular.ttf) format("truetype"), url(../fonts/Charon-Regular.svg#Charon-Regular) format("svg");
    font-weight: lighter;
    font-style: normal;
}

@font-face {
    font-family: 'MVCharon-Italic';
    src: url(../fonts/MVCharon-Italic.eot?#iefix) format("embedded-opentype"), url(../fonts/MVCharon-Italic.otf) format("opentype"), url(../fonts/MVCharon-Italic.woff) format("woff"), url(../fonts/MVCharon-Italic.ttf) format("truetype"), url(../fonts/MVCharon-Italic.svg#MVCharon-Italic) format("svg");
    font-weight: normal;
    font-style: italic;
}


/*SCSS VARIABLES*/

* {
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    border: none;
    box-sizing: border-box;
    list-style: none;
}

::-moz-selection {
    background: #A88861;
    color: black;
}

::selection {
    background: #A88861;
    color: black;
}


/*TYPOGRAPHY*/

h1 {
    font-family: "Charon-Regular", Georgia, serif;
    font-weight: normal;
    font-size: 24vw;
    line-height: 0.65;
    text-align: left;
    color: #1D1D1B;
    word-wrap: break-word;
    margin-left: 2vw;
    letter-spacing: -0.01em;
}

h2 {
    font-family: "AkzidenzGroteskBQ-LigExt", Georgia, serif;
    font-weight: normal;
    font-size: 3.9vw;
    line-height: 1.25;
    text-align: left;
    color: #1D1D1B;
    letter-spacing: -0.005em;
    margin-left: 3.5vw;
    margin-top: 1vw;
    margin-bottom: 12vw;
}

h3 {
    font-family: "Charon-Regular", Georgia, serif;
    font-weight: normal;
    font-size: 5.9vw;
    line-height: 0.85;
    text-align: center;
    color: #1D1D1B;
    letter-spacing: -0.01em;
}

h4 {
    font-family: "AkzidenzGroteskBQ-LigExt", Georgia, serif;
    font-weight: normal;
    font-size: 1.5vw;
    line-height: 1.25;
}

p {
    font-family: "AkzidenzGroteskBQ-LigExt", Georgia, serif;
    font-weight: normal;
    font-size: 2.2vw;
    line-height: 1.27;
    text-align: left;
    color: #A88861;
    letter-spacing: -0.005em;
    padding: 0 0 0.5rem 0;
}

a {
    font-family: "AkzidenzGroteskBQ-LigExt", Georgia, serif;
    text-decoration: none;
}

a:hover,
a:focus,
a:active {
    color: #A88861;
}

.cf::after {
    content: "";
    display: block;
    height: 0;
    overflow: hidden;
    clear: both;
}


/*GENERAL & RESETING*/

html {
    cursor: default;
    overflow-y: scroll;
    overflow-x: hidden;
    /* Setting this to `default` prevents the cursors from
       changing when hovering blocks of text or whitespace,
       which is less distracting */
    position: relative;
    min-height: 100%;
    /* Prevent adjustments of font size after orientation
       changes in IE and iOS. */
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    /* Highlight color for WebKit-bases touch devices. */
    -webkit-tap-highlight-color: #1D1D1B;
    /*animation-name: fadeIn;
    animation-duration: 0.5s;
    animation-delay: 0.1s;
    animation-fill-mode: forwards;
    -webkit-animation-name: fadeIn;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-delay: 0.1s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-name: fadeIn;
    -moz-animation-duration: 0.5s;
    -moz-animation-delay: 0.1s;
    -moz-animation-fill-mode: forwards;*/
    -webkit-appearance: none;
    -webkit-user-select: none;
    /* Chrome all / Safari all */
    /*-moz-user-select: none;
    /* Firefox all */
    /*-ms-user-select: none;
    /* IE 10+ */
    /*user-select: none;*/
}

body {
    padding-bottom: 40vw;
    overflow-x: hidden;
}

.grid {
    padding-top: 3vw;
}


/*div#cursor {
    position: absolute;
    width: 92px;
    height: 128px;
    background-image: url(/assets/img/cursor.png);
    transform-origin: 50% 0;
}*/

ol,
ul,
li {
    list-style: none;
    display: block;
}

figure {
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    margin: 0;
    padding: 0;
}

img {
    outline: none;
}

@media all and (max-width: 30em) {
    html {
        /* We decrease the font-size a little-bit for tiny
         screens. Because this stylesheet uses relative units
         everywhere, everything scales nicely. */
        font-size: 1.25em;
    }
}

.navs {
    font-family: "AkzidenzGroteskBQ-LigExt", Georgia, serif;
    font-size: 2.6vw;
    line-height: 1.2;
    color: #1D1D1B;
    padding-top: 10vw;
    margin-left: 2vw;
}

.indi-wrapper a {
    color: black;
}

.indi-wrapper a:hover {
    color: #A88861;
}

.indi-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-left: 8vw;
    position: fixed;
    top: 2vw;
    z-index: 1;
}

.indicator-start {
    font-size: 2.2vw;
    font-family: "AkzidenzGroteskBQ-LigExt", Georgia, serif;
    color: white;
    padding: 0.7vw 2vw 1vw 3.6vw;
    border-radius: 10rem;
    border: 1px solid white;
    width: 29vw;
    height: 4vw;
}

.number {
    font-size: 2.9vw;
    font-family: "Charon-Regular", Georgia, serif;
    border: 1px solid black;
    color: white;
    width: 10vw;
    height: 4vw;
    background-color: black;
    border-radius: 10rem;
    position: absolute;
    left: 27.2vw;
    padding: 0.3vw 1vw 1vw 3.4vw;
}

.indicator {
    font-size: 2.2vw;
    font-family: "AkzidenzGroteskBQ-LigExt", Georgia, serif;
    padding: 0.7vw 2vw 1vw 3vw;
    border-radius: 10rem 0 0 10rem;
    border-top: 1px solid #1D1D1B;
    border-left: 1px solid #1D1D1B;
    border-bottom: 1px solid #1D1D1B;
    width: 30vw;
    height: 4vw;
}

#navi {
    background-color: black;
    /* Black background color */
    position: fixed;
    display: none;
    /* Make it stick/fixed */
    bottom: 0;
    /* Stay on top */
    /* Full width */
    transition: bottom 0.5s;
    /* Transition effect when sliding down (and up) */
    z-index: 100;
    animation-name: navIn;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    -webkit-animation-name: navIn;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-name: navIn;
    -moz-animation-duration: 1.5s;
    -moz-animation-fill-mode: forwards;
}

@keyframes navIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.navi-wrapper {
    background-color: black;
}

#navi-footer {
    min-height: 5vw;
    position: relative;
    bottom: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-left: 58vw;
}

#navi-footer a {
    color: white;
    text-decoration: none;
    font-style: normal !important;
    padding-top: 2vw;
    padding-bottom: 1vw;
    padding-right: 4vw;
}


/*#navi-footer {
    background-color: black;
    width: 100%;
    min-height: 5vw;
    position: relative;
    bottom: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
}*/

#navi-footer p {
    margin-left: 8vw;
    padding-top: 2vw;
    font-size: 2.2vw;
    line-height: 1.5;
    color: white;
    font-style: normal !important;
}

.sub-navi {
    float: right;
    padding-top: 3vw;
    padding-bottom: 1vw;
    padding-right: 2vw;
}

.sub-navi h4 {
    color: white !important;
    text-align: left;
}

.sub-navi a {
    margin-right: 4vw;
}

#navi a {
    float: left;
    display: block;
    color: white;
    text-decoration: none;
    font-style: normal !important;
    margin-top: -0.8vw;
    padding-left: 0.8vw;
}

#navi p {
    font-size: 2.2vw;
    line-height: 1.5;
    color: white;
    font-weight: normal;
    margin-left: 8vw;
    margin-top: 3vw;
}

#navi img,
#navi-footer img {
    width: 3.7vw;
}

#navi a:hover,
#navi-footer a:hover {
    color: #A88861 !important;
}

.sub-navi:hover {
    color: #A88861 !important;
}

.footer-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
}


/*QUOTES*/

span.quote-line {
    text-indent: 0px !important;
}

.quote-line {
    font-family: "AkzidenzGroteskBQ-LigExt", Georgia, serif;
    display: inline-block;
    font-size: 1.5vw;
    color: #A88861;
    vertical-align: top;
}

.quote-line .tooltiptext {
    font-family: "AkzidenzGroteskBQ-LigExt", Georgia, serif;
    visibility: hidden;
    font-size: 1.5vw;
    width: 14vw;
    color: #A88861;
    text-align: left;
    /* Position the tooltip */
    position: absolute;
    right: 25px;
    z-index: 1;
}

.quote-line:hover .tooltiptext {
    visibility: visible;
}

.quote-line .line {
    visibility: hidden;
    width: 14vw;
    color: #A88861;
    position: absolute;
    z-index: 1;
    margin-top: 1.6vw;
    margin-left: -2vw;
}

.quote-line:hover .line {
    visibility: visible;
    border-bottom: 2px solid #A88861;
}

.quote-line:hover .year {
    visibility: visible;
}


/*SECTION INTRO*/

.text-image-wrapper {
    position: fixed;
    margin-left: 5vw;
    margin-right: 4vw;
    margin-top: 10vh;
}

.text-image-wrapper img {
    height: 5vw;
    margin-bottom: -3vw;
    margin-top: -3vw;
}

#intro {
    background-color: black;
    height: 100vh;
}

#intro a {
    font-style: normal;
}

.intro-text p {
    font-family: "AkzidenzGroteskBQ-LigExt", Georgia, serif;
    font-size: 4vw;
    line-height: 1.3;
    color: #D8D8D8;
    display: inline;
}

.intro-text img,
.navigation img {
    display: inline;
    vertical-align: middle;
}


/*SECTION 00-HOME*/

.indi-counter {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    position: -webkit-sticky;
    position: sticky;
    top: 0vw;
    z-index: 100;
}

.stats {
    font-family: "Charon-Regular", Georgia, serif;
    color: white;
    font-size: 3vw;
    margin-left: 84vw;
    margin-top: -0.3vw;
}


/*SECTION 01-SPACE*/

#space {
    position: relative;
    z-index: 2;
    background-color: white;
    padding-bottom: 4vw;
}

.image-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
}

.position-overlay {
    margin-left: 4vw;
    margin-top: 6vw;
    margin-bottom: 4vw;
}

.mask-01-00 {
    mask: url(/assets/svg/01-space/01-00.svg);
    -webkit-mask: url(/assets/svg/01-space/01-00.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: 92vw;
    -webkit-mask-size: 92vw;
}

.mask-01-00 img {
    -webkit-transition: 1.5s ease-in-out;
    transition: 1.5s ease-in-out;
    width: 94vw;
}

.stage-offset {
    margin-top: -51.1vw;
    -webkit-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}

.stage-offset:hover {
    opacity: 0;
}

.mask-1 {
    mask: url(/assets/svg/01-space/01-01.svg);
    -webkit-mask: url(/assets/svg/01-space/01-01.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: 24.3vw;
    -webkit-mask-size: 24.3vw;
    margin-left: 55vw;
    margin-top: -7vw;
}

.mask-1 img {
    -webkit-transition: 1.5s ease-in-out;
    transition: 1.5s ease-in-out;
    margin-left: 0vw;
    width: 40vw;
}

.mask-1 img:hover {
    margin-left: -5vw;
}

.mask-2 {
    mask: url(/assets/svg/01-space/01-02.svg);
    -webkit-mask: url(/assets/svg/01-space/01-02.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: 36vw;
    -webkit-mask-size: 36vw;
    margin-left: 19vw;
    margin-bottom: 2vw;
    margin-top: 2vw;
}

.mask-2 img {
    -webkit-transition: 1.5s ease-in-out;
    transition: 1.5s ease-in-out;
    margin-left: 0;
    width: 50vw;
}

.mask-2 img:hover {
    margin-left: -10vw;
}

.image-wrapper-2 {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
}

.mask-3 {
    mask: url(/assets/svg/01-space/01-03.svg);
    -webkit-mask: url(/assets/svg/01-space/01-03.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: 39vw;
    -webkit-mask-size: 39vw;
    margin-left: 46vw;
    margin-bottom: -2vw;
    margin-top: -19vw;
    z-index: 10;
    mix-blend-mode: multiply;
}

.mask-3 img {
    -webkit-transition: 1.5s ease-in-out;
    transition: 1.5s ease-in-out;
    margin-left: 0;
    width: 40vw;
}

.mask-3 img:hover {
    margin-left: -20vw;
}

.mask-4 {
    mask: url(/assets/svg/01-space/01-04.svg);
    -webkit-mask: url(/assets/svg/01-space/01-04.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: 35vw;
    -webkit-mask-size: 35vw;
    margin-bottom: 2vw;
    position: absolute;
    margin-left: 30vw;
    margin-top: -1vw;
    z-index: 10;
    mix-blend-mode: multiply;
}

.mask-4 img {
    -webkit-transition: 1.5s ease-in-out;
    transition: 1.5s ease-in-out;
    margin-left: 0;
    width: 36vw;
}

.mask-4 img:hover {
    margin-left: -40vw;
}

.mask-5 {
    mask: url(/assets/svg/01-space/01-05.svg);
    -webkit-mask: url(/assets/svg/01-space/01-05.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: 40vw;
    -webkit-mask-size: 40vw;
    margin-left: 17vw;
    margin-top: 2vw;
    margin-bottom: -3vw;
    mix-blend-mode: multiply;
}

.mask-5 img {
    -webkit-transition: 1.5s ease-in-out;
    transition: 1.5s ease-in-out;
    margin-left: 0;
    width: 52vw;
}

.mask-5 img:hover {
    margin-left: -40vw;
}

.mask-6 {
    mask: url(/assets/svg/01-space/01-06.svg);
    -webkit-mask: url(/assets/svg/01-space/01-06.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: 16vw;
    -webkit-mask-size: 16vw;
    margin-left: 60vw;
    position: absolute;
    mix-blend-mode: difference;
}

.mask-6 img {
    -webkit-transition: 1.5s ease-in-out;
    transition: 1.5s ease-in-out;
    margin-left: 0;
    width: 28vw;
}

.mask-6 img:hover {
    margin-left: -40vw;
}

.mask-7 {
    mask: url(/assets/svg/01-space/01-07.svg);
    -webkit-mask: url(/assets/svg/01-space/01-07.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: 95vw;
    -webkit-mask-size: 95vw;
    margin-top: 4vw;
    margin-left: 2.8vw;
}

.mask-7 img {
    -webkit-transition: 1.5s ease-in-out;
    transition: 1.5s ease-in-out;
}

.mask-7 img:hover {
    margin-left: -40vw;
}

.quote-charon-wrapper {
    margin: 5vw 8vw 0 17vw;
    text-align: center;
}

.quote-charon-wrapper h3 h4 {
    z-index: 20;
}

.quote-charon-wrapper h4 {
    width: 40vw;
    display: inline-block;
    margin-top: 2vw;
}

.combo img {
    width: 84.4vw;
    margin-left: 8.2vw;
    margin-top: 10vw;
}

.green img {
    width: 73vw;
    margin-left: 22.2vw;
    margin-top: 10vw;
}

.read-gold {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-left: 8vw;
    width: 67vw;
}

.read-gold p {
    font-family: "AkzidenzGroteskBQ-LigExt", Georgia, serif;
    color: #A88861;
    /*word-break: normal;*/
    hyphens: auto;
    font-kerning: normal;
    text-rendering: auto;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    text-indent: 3vw;
}

.read-gold h4 {
    color: #A88861;
    width: 80vw;
    word-break: normal;
    hyphens: auto;
    font-kerning: normal;
    text-rendering: auto;
    text-align: left;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
}

.inout img {
    width: 95vw;
}


/* SECTION 02-METAPHER */

#metapher {
    position: relative;
    z-index: 2;
    background-color: white;
    padding-bottom: 4vw;
}

.gif {
    width: 92vw;
    margin-left: 4vw;
}

.gif img {
    width: 100%;
}

.mask-02-00 {
    mask: url(/assets/svg/02-metapher/02-00.svg);
    -webkit-mask: url(/assets/svg/02-metapher/02-00.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 92vw;
    mask-size: 92vw;
    -webkit-mask-position: center;
    mask-position: center;
}

.shadow {
    filter: drop-shadow(5px 5px 3px rgba(0, 0, 0, 0.5));
    -webkit-filter: drop-shadow(5px 5px 3px rgba(0, 0, 0, 0.5));
    -moz-filter: drop-shadow(5px 5px 3px rgba(0, 0, 0, 0.5));
    -ms-filter: drop-shadow(5px 5px 3px rgba(0, 0, 0, 0.5));
    -o-filter: drop-shadow(5px 5px 3px rgba(0, 0, 0, 0.5));
    -webkit-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}

.shadow:hover {
    filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0));
    -webkit-filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0));
    -moz-filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0));
    -ms-filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0));
    -o-filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0));
}

.mask-02-01 {
    mask: url(/assets/svg/02-metapher/02-01.svg);
    -webkit-mask: url(/assets/svg/02-metapher/02-01.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: 67vw;
    -webkit-mask-size: 69vw;
    margin-left: 8vw;
    margin-top: 4vw;
    margin-bottom: -2vw;
}

.mask-02-01 img {
    width: 71vw;
}

.mask-02-02 {
    mask: url(/assets/svg/02-metapher/02-02.svg);
    -webkit-mask: url(/assets/svg/02-metapher/02-02.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: 44vw;
    -webkit-mask-size: 44vw;
    margin-left: 2vw;
    margin-top: -10vw;
    margin-bottom: -4vw;
}

.mask-02-02 img {
    width: 45vw;
}

.mask-02-03 {
    mask: url(/assets/svg/02-metapher/02-03.svg);
    -webkit-mask: url(/assets/svg/02-metapher/02-03.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: 50vw;
    -webkit-mask-size: 50vw;
    margin-left: 39vw;
    margin-top: 0vw;
    margin-bottom: -30vw;
}

.mask-02-03 img {
    width: 50vw;
}

.mask-02-04 {
    mask: url(/assets/svg/02-metapher/02-04.svg);
    -webkit-mask: url(/assets/svg/02-metapher/02-04.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 41vw;
    mask-size: 41vw;
    margin-top: -58vw;
    margin-left: 20vw;
    -webkit-mask-position-x: 1vw;
}

.mask-02-04 img {
    width: 57vw;
}

.mask-02-05 {
    mask: url(/assets/svg/02-metapher/02-05.svg);
    -webkit-mask: url(/assets/svg/02-metapher/02-05.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 21vw;
    mask-size: 21vw;
    margin-top: 2vw;
    margin-bottom: 3vw;
    margin-left: 32vw;
}

.mask-02-05 img {
    width: 26vw;
}

.mask-02-06 {
    mask: url(/assets/svg/02-metapher/02-06.svg);
    -webkit-mask: url(/assets/svg/02-metapher/02-06.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 21vw;
    mask-size: 21vw;
    margin-top: -36vw;
    margin-left: 55vw;
    margin-bottom: -2vw;
    z-index: 0;
}

.mask-02-06 img {
    width: 27.2vw;
}

.mask-02-07 {
    mask: url(/assets/svg/02-metapher/02-07.svg);
    -webkit-mask: url(/assets/svg/02-metapher/02-07.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 41.4vw;
    mask-size: 41.4vw;
    margin-top: -16vw;
    margin-left: 55vw;
    margin-bottom: -8vw;
}

.mask-02-07 img {
    width: 41.2vw;
}

.mask-02-08 {
    mask: url(/assets/svg/02-metapher/02-08.svg);
    -webkit-mask: url(/assets/svg/02-metapher/02-08.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 30vw;
    mask-size: 30vw;
    margin-left: 53vw;
    margin-bottom: 2vw;
    margin-top: 5vw;
}

.mask-02-08 img {
    width: 34.2vw;
}


/* SECTION 03-NAVIGATION */

#navigation {
    position: relative;
    z-index: 2;
    background-color: white;
    padding-bottom: 4vw;
}

#and-me-also {
    opacity: 0;
}

#and-me-please {
    opacity: 0;
}

#navigation-section footer {
    display: none;
}

#navigation {
    position: fixed;
    animation-name: fadeIn;
    animation-duration: 5.5s;
    animation-fill-mode: forwards;
    -webkit-animation-name: fadeIn;
    -webkit-animation-duration: 5.5s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-name: fadeIn;
    -moz-animation-duration: 5.5s;
    -moz-animation-fill-mode: forwards;
}

.intro-navigation {
    position: relative;
    width: 100vw;
    z-index: 20;
}

@keyframes fadeIn {
    from {
        background-color: black;
    }
    80% {
        background-color: black;
    }
    to {
        background-color: white;
    }
}

.fog-stone-wrapper {
    margin-left: 4vw;
    margin-top: 4vw;
    margin-bottom: -15vw;
}

.mask-03-00 {
    mask: url(/assets/svg/03-navigation/03-00.svg);
    -webkit-mask: url(/assets/svg/03-navigation/03-00.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 92vw;
    mask-size: 92vw;
}

.fog img {
    opacity: 0;
    background-color: black;
    animation-name: fogIn;
    animation-duration: 7.5s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
    -webkit-animation-name: fogIn;
    -webkit-animation-duration: 7.5s;
    -webkit-animation-delay: 0.5s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-name: fogIn;
    -moz-animation-duration: 7.5s;
    -moz-animation-delay: 0.5s;
    -moz-animation-fill-mode: forwards;
    width: 92vw;
}

@keyframes fogIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fog-stone img {
    opacity: 0;
    background-color: black;
    animation-name: fogstoneIn;
    animation-duration: 9.5s;
    animation-delay: 2.5s;
    animation-fill-mode: forwards;
    -webkit-animation-name: fogstoneIn;
    -webkit-animation-duration: 9.5s;
    -webkit-animation-delay: 2.5s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-name: fogstoneIn;
    -moz-animation-duration: 9.5s;
    -moz-animation-delay: 2.5s;
    -moz-animation-fill-mode: forwards;
    width: 92vw;
    position: absolute;
    margin-top: -71vw;
}

@keyframes fogstoneIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 0.9;
    }
}

.appear {
    opacity: 0.05;
    -webkit-transition: 3.0s ease-in-out;
    transition: 3.0s ease-in-out;
}

.appear-more {
    opacity: 0.25;
    -webkit-transition: 3.0s ease-in-out;
    transition: 3.0s ease-in-out;
}

.appear-more:hover {
    opacity: 1;
}

.appear:hover {
    opacity: 1;
}

.mask-03-01 {
    mask: url(/assets/svg/03-navigation/03-01.svg);
    -webkit-mask: url(/assets/svg/03-navigation/03-01.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 30.3vw;
    mask-size: 30.3vw;
    margin-top: -18vw;
    margin-bottom: -9.8vw;
    margin-left: 35vw;
}

.mask-03-01 img {
    width: 43.2vw;
}

.mask-03-02 {
    mask: url(/assets/svg/03-navigation/03-02.svg);
    -webkit-mask: url(/assets/svg/03-navigation/03-02.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 49vw;
    mask-size: 49vw;
    margin-top: 2vw;
    margin-bottom: 0vw;
    margin-left: 15vw;
    position: absolute;
}

.mask-03-02 img {
    width: 50vw;
}

.mask-03-03 {
    mask: url(/assets/svg/03-navigation/03-03.svg);
    -webkit-mask: url(/assets/svg/03-navigation/03-03.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 40vw;
    mask-size: 40vw;
    margin-top: 0vw;
    margin-bottom: -41vw;
    margin-left: 53vw;
    mix-blend-mode: multiply;
}

.mask-03-03 img {
    width: 45vw;
}

.mask-03-04 {
    mask: url(/assets/svg/03-navigation/03-04.svg);
    -webkit-mask: url(/assets/svg/03-navigation/03-04.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 28vw;
    mask-size: 28vw;
    margin-top: -26vw;
    margin-bottom: -17vw;
    margin-left: 28vw;
    mix-blend-mode: multiply;
}

.mask-03-04 img {
    width: 36.2vw;
}

.mask-03-05 {
    mask: url(/assets/svg/03-navigation/03-05.svg);
    -webkit-mask: url(/assets/svg/03-navigation/03-05.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 40vw;
    mask-size: 40vw;
    position: absolute;
    margin-top: -63vw;
    margin-left: 58vw;
}

.mask-03-05 img {
    width: 52vw;
}

.mask-03-06 {
    mask: url(/assets/svg/03-navigation/03-06.svg);
    -webkit-mask: url(/assets/svg/03-navigation/03-06.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 55vw;
    mask-size: 55vw;
    margin-top: -24vw;
    margin-bottom: -30vw;
    margin-left: 43vw;
    mix-blend-mode: multiply;
}

.mask-03-06 img {
    width: 58vw;
}

.mask-03-07 {
    mask: url(/assets/svg/03-navigation/03-07.svg);
    -webkit-mask: url(/assets/svg/03-navigation/03-07.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 69vw;
    mask-size: 69vw;
    margin-left: 26vw;
    margin-bottom: -33vw;
    mix-blend-mode: multiply;
}

.mask-03-07 img {
    width: 69.2vw;
}

.offset-navi h2 {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

.quote-nav h2 {
    text-align: left;
    line-height: 0.85;
    width: 80vw;
    letter-spacing: -0.01em;
    font-size: 6vw;
    margin-left: 2.6vw;
    margin-right: 2vw;
    -webkit-font-smoothing: subpixel-antialiased;
}


/* SECTION 04-ELEMENTE */

#elemente {
    position: relative;
    z-index: 2;
    background-color: white;
    padding-bottom: 4vw;
}

.mask-04-00 img {
    width: 164vw;
    margin-bottom: 8vw;
    margin-left: -11vw;
    margin-top: -4vw;
}

.mask-04-00 {
    mask: url(/assets/svg/04-elemente/04-00.svg) top left/cover;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: 56vw;
    -webkit-mask-size: 56vw;
    -webkit-mask: url(/assets/svg/04-elemente/04-00.svg) top left/cover;
    background-color: black;
    display: block;
    margin-bottom: 6vw;
    margin-top: 6vw;
}

.mask-04-01 {
    mask: url(/assets/svg/04-elemente/04-01.svg);
    -webkit-mask: url(/assets/svg/04-elemente/04-01.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 30vw;
    mask-size: 30vw;
    margin-left: 55vw;
    margin-bottom: 0vw;
    mix-blend-mode: multiply;
}

.mask-04-01 img {
    width: 30vw;
}

.mask-04-02 {
    mask: url(/assets/svg/04-elemente/04-02.svg);
    -webkit-mask: url(/assets/svg/04-elemente/04-02.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 42vw;
    mask-size: 42vw;
    margin-left: 8vw;
    margin-top: 4vw;
    margin-bottom: -19vw;
    mix-blend-mode: multiply;
}

.mask-04-02 img {
    width: 42vw;
}

.mask-04-03 {
    mask: url(/assets/svg/04-elemente/04-03.svg);
    -webkit-mask: url(/assets/svg/04-elemente/04-03.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 36vw;
    mask-size: 36vw;
    margin-left: 37vw;
    margin-top: -60vw;
    mix-blend-mode: multiply;
    margin-bottom: -7vw;
}

.mask-04-03 img {
    width: 36vw;
}

.mask-04-04 {
    mask: url(/assets/svg/04-elemente/04-04.svg);
    -webkit-mask: url(/assets/svg/04-elemente/04-04.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 42vw;
    mask-size: 42vw;
    margin-left: 20vw;
    margin-bottom: 0vw;
    mix-blend-mode: multiply;
    margin-top: 3vw;
}

.mask-04-04 img {
    width: 43vw;
}

.mask-04-05 {
    mask: url(/assets/svg/04-elemente/04-05.svg);
    -webkit-mask: url(/assets/svg/04-elemente/04-05.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 42vw;
    mask-size: 42vw;
    margin-left: 30vw;
    margin-top: -43vw;
    margin-bottom: 2vw;
    mix-blend-mode: multiply;
    mask-position: center;
    -webkit-mask-position: center;
}

.mask-04-05 img {
    width: 73vw;
}

.mask-04-06 {
    mask: url(/assets/svg/04-elemente/04-06.svg);
    -webkit-mask: url(/assets/svg/04-elemente/04-06.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 70vw;
    mask-size: 70vw;
    margin-left: 8vw;
    margin-top: 4vw;
    margin-bottom: -7vw;
    mix-blend-mode: multiply;
}

.mask-04-06 img {
    width: 70vw;
}

.action {
    -webkit-transition: 1s ease-in-out;
    transition: 1s ease-in-out;
}

.action:hover {
    margin-left: -45vw;
}

.action-4 {
    filter: brightness(1.5) grayscale(1);
    -webkit-filter: brightness(1.5) grayscale(1);
    background-blend-mode: difference, screen;
    transition: 1.5s ease-in-out;
    -webkit-transition: 1.5s ease-in-out;
}

.action-4:hover {
    filter: brightness(1) grayscale(0);
    -webkit-filter: brightness(1) grayscale(0);
    background-blend-mode: hue, screen;
}

.sktep img {
    width: 95vw;
    margin-top: 5vw;
}

.sea-window img {
    width: 95vw;
    margin-top: 5vw;
}

.zoom {
    display: none;
}

.zoom-hover:hover img:first-child {
    display: none;
}

.zoom-hover:hover img:last-child {
    display: inline-block;
    opacity: 1;
}

.zoom-hover {
    width: 35vw;
}


/* SECTION 05-SURFACE */

#surface {
    position: relative;
    z-index: 2;
    background-color: white;
    padding-bottom: 4vw;
}

.surface {
    width: 92vw;
    margin-left: 4vw;
}

.silver {
    filter: brightness(1.5) invert(1) grayscale(1);
    -webkit-filter: brightness(1.5) invert(1) grayscale(1);
    background-blend-mode: difference, screen;
    -webkit-transition: 1.5s ease-in-out;
    transition: 1.5s ease-in-out;
}

.silver:hover {
    -webkit-filter: brightness(1) invert(0) grayscale(0);
    filter: brightness(1) invert(0) grayscale(0);
}

.mask-05-00 {
    mask: url(/assets/svg/05-surface/05-00.svg);
    -webkit-mask: url(/assets/svg/05-surface/05-00.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 92vw;
    mask-size: 92vw;
    mask-position: center;
    -webkit-mask-position: center;
}

.mask-05-00 img {
    width: 96vw;
}

.mask-05-03 {
    mask: url(/assets/svg/05-surface/05-03.svg);
    -webkit-mask: url(/assets/svg/05-surface/05-03.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 50vw;
    mask-size: 50vw;
    margin-top: 2vw;
    margin-bottom: -8vw;
    margin-left: 19vw;
}

.mask-05-03 img {
    width: 50vw;
}

.mask-05-04 {
    mask: url(/assets/svg/05-surface/05-04.svg);
    -webkit-mask: url(/assets/svg/05-surface/05-04.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 50vw;
    mask-size: 50vw;
    margin-top: 10vw;
    margin-bottom: -7vw;
    margin-left: 20vw;
    -webkit-mask-position-y: center;
}

.mask-05-04 img {
    width: 54vw;
}

.mask-05-05 {
    mask: url(/assets/svg/05-surface/05-05.svg);
    -webkit-mask: url(/assets/svg/05-surface/05-05.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 78vw;
    mask-size: 78vw;
    margin-top: 6vw;
    margin-left: 8vw;
}

.mask-05-05 img {
    width: 78vw;
}

.mask-05-06 {
    mask: url(/assets/svg/05-surface/05-06.svg);
    -webkit-mask: url(/assets/svg/05-surface/05-06.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 40vw;
    mask-size: 40vw;
    margin-top: 1vw;
    margin-left: 20vw;
    margin-bottom: -9vw;
}

.mask-05-06 img {
    width: 42vw;
}

.mask-05-07 {
    mask: url(/assets/svg/05-surface/05-07.svg);
    -webkit-mask: url(/assets/svg/05-surface/05-07.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 60vw;
    mask-size: 60vw;
    margin-top: 1vw;
    margin-left: 30vw;
    margin-bottom: -19vw;
}

.mask-05-07 img {
    width: 61vw;
}

.mask-05-08 {
    mask: url(/assets/svg/05-surface/05-08.svg);
    -webkit-mask: url(/assets/svg/05-surface/05-08.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 40vw;
    mask-size: 40vw;
    margin-top: 5vw;
    margin-left: 44vw;
    position: absolute;
}

.mask-05-08 img {
    width: 42vw;
}


/* SECTION 06 THRESHOLDS */

#thresholds {
    position: relative;
    z-index: 2;
    background-color: white;
    padding-bottom: 4vw;
}

.stage-wrapper {
    margin-top: 4vw;
    margin-bottom: 6vw;
    width: 92vw;
    margin-left: 4vw;
}

.slider-b {
    margin-top: -4vw;
}

.mask-06-00-a {
    mask: url(/assets/svg/06-thresholds/06-00-a.svg);
    -webkit-mask: url(/assets/svg/06-thresholds/06-00-a.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 92vw;
    mask-size: 92vw;
    mask-position: center;
    -webkit-mask-position: center;
}

.mask-06-00-a img {
    width: 92vw;
}

.mask-06-00-b {
    mask: url(/assets/svg/06-thresholds/06-00-b.svg);
    -webkit-mask: url(/assets/svg/06-thresholds/06-00-b.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 92vw;
    mask-size: 92vw;
    mask-position: center;
    -webkit-mask-position: center;
}

.mask-06-00-b img {
    width: 92vw;
}

.slider-01 {
    width: 50vw;
}

.mask-06-01 {
    mask: url(/assets/svg/06-thresholds/06-01.svg);
    -webkit-mask: url(/assets/svg/06-thresholds/06-01.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 45vw;
    mask-size: 45vw;
    margin-left: 25vw;
    margin-bottom: -12vw;
    margin-top: 4vw;
}

.slider-02 {
    width: 50vw;
}

.mask-06-03 {
    mask: url(/assets/svg/06-thresholds/06-03.svg);
    -webkit-mask: url(/assets/svg/06-thresholds/06-03.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 40vw;
    mask-size: 40vw;
    margin-left: 50vw;
    margin-bottom: -10vw;
}

.slider-03 {
    width: 50vw;
}

.mask-06-04 {
    mask: url(/assets/svg/06-thresholds/06-04.svg);
    -webkit-mask: url(/assets/svg/06-thresholds/06-04.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 50vw;
    mask-size: 50vw;
    margin-left: 37vw;
    margin-top: 5vw;
    margin-bottom: 8vw;
}

.slider-04 {
    width: 50vw;
}

.mask-06-05 {
    mask: url(/assets/svg/06-thresholds/06-05.svg);
    -webkit-mask: url(/assets/svg/06-thresholds/06-05.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 40vw;
    mask-size: 40vw;
    margin-left: 14vw;
    margin-top: 2vw;
    margin-bottom: -19vw;
}

.slider-05 {
    width: 50vw;
}

.mask-06-06 {
    mask: url(/assets/svg/06-thresholds/06-06.svg);
    -webkit-mask: url(/assets/svg/06-thresholds/06-06.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 40vw;
    mask-size: 40vw;
    margin-left: 3vw;
    margin-bottom: -30vw;
    margin-top: -6vw;
}

.slider-06 {
    width: 50vw;
}

.mask-06-07 {
    mask: url(/assets/svg/06-thresholds/06-07.svg);
    -webkit-mask: url(/assets/svg/06-thresholds/06-07.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 40vw;
    mask-size: 40vw;
    margin-left: 8.4vw;
    margin-top: -68vw;
    margin-bottom: -22vw;
}

.slider-07 {
    width: 95vw;
}

.mask-06-08 {
    mask: url(/assets/svg/06-thresholds/06-08.svg);
    -webkit-mask: url(/assets/svg/06-thresholds/06-08.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 85vw;
    mask-size: 85vw;
    margin-left: 8vw;
    margin-bottom: -30vw;
    margin-top: 6vw;
}


/*----------------------*/

.thresholds-img img {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 1px;
    width: 95vw;
    margin-left: 2vw;
}


/*start*/

#home {
    padding-bottom: 0vw;
}

#home footer {
    display: none;
}

#start-section {
    background-color: black;
    padding-bottom: 0 !important;
}

.stones-start {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100vw;
}

.stone-1 img {
    position: relative;
    width: 58vw;
    margin-left: 40vw;
    padding-top: 8vw;
    display: inline-block;
}

.stone-1-hov {
    display: none;
    width: 80vw;
}

.stone-1-hov h1 {
    color: white;
    font-size: 18vw;
}

.stone-1:hover .stone-1-hov {
    opacity: 0.8;
    position: fixed;
    top: 10vw;
    left: 6vw;
    display: inline-block;
    z-index: 20;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.stone-2-hov {
    display: none;
    width: 65vw;
}

.stone-2-hov h1 {
    color: white;
    font-size: 18vw;
}

.stone-2:hover .stone-2-hov {
    opacity: 0.8;
    position: fixed;
    top: 10vw;
    left: 6vw;
    display: inline-block;
    z-index: 20;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.stone-3-hov {
    display: none;
    width: 65vw;
}

.stone-3-hov h1 {
    color: white;
    font-size: 18vw;
}

.stone-3:hover .stone-3-hov {
    opacity: 0.8;
    position: fixed;
    top: 10vw;
    left: 6vw;
    display: inline-block;
    z-index: 20;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.stone-4-hov {
    display: none;
    width: 65vw;
}

.stone-4-hov h1 {
    color: white;
    font-size: 18vw;
}

.stone-4:hover .stone-4-hov {
    opacity: 0.8;
    position: fixed;
    top: 10vw;
    left: 6vw;
    display: inline-block;
    z-index: 20;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.stone-5-hov {
    display: none;
    width: 65vw;
}

.stone-5-hov h1 {
    color: white;
    font-size: 18vw;
}

.stone-5:hover .stone-5-hov {
    opacity: 0.8;
    position: fixed;
    top: 10vw;
    left: 6vw;
    display: inline-block;
    z-index: 20;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.stone-6-hov {
    display: none;
    width: 65vw;
}

.stone-6-hov h1 {
    color: white;
    font-size: 18vw;
}

.stone-6:hover .stone-6-hov {
    opacity: 0.8;
    position: fixed;
    top: 10vw;
    left: 6vw;
    display: inline-block;
    z-index: 20;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.stone-7-hov {
    display: none;
    width: 65vw;
}

.stone-7-hov h1 {
    color: white;
    font-size: 18vw;
}

.stone-7:hover .stone-7-hov {
    opacity: 0.8;
    position: fixed;
    top: 10vw;
    left: 6vw;
    display: inline-block;
    z-index: 20;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.stone-8-hov {
    display: none;
    width: 65vw;
}

.stone-8-hov h1 {
    color: white;
    font-size: 18vw;
}

.stone-8:hover .stone-8-hov {
    opacity: 0.8;
    position: fixed;
    top: 10vw;
    left: 6vw;
    display: inline-block;
    z-index: 20;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.stone-9-hov {
    display: none;
    width: 65vw;
}

.stone-9-hov h1 {
    color: white;
    font-size: 18vw;
}

.stone-9:hover .stone-9-hov {
    opacity: 0.8;
    position: fixed;
    top: 10vw;
    left: 6vw;
    display: inline-block;
    z-index: 20;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.stone-10-hov {
    display: none;
    width: 65vw;
}

.stone-10-hov h1 {
    color: white;
    font-size: 18vw;
}

.stone-10:hover .stone-10-hov {
    opacity: 0.8;
    position: fixed;
    top: 10vw;
    left: 6vw;
    display: inline-block;
    z-index: 20;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.stone-2 img {
    width: 62vw;
    margin-left: 6vw;
    margin-top: 3vw;
}

.stone-3 img {
    width: 63vw;
    margin-left: 3vw;
    margin-top: 10vw;
}

.stone-4 img {
    width: 25vw;
    margin-left: 5vw;
    position: relative;
    top: -14vw;
}

.stone-5 img {
    width: 100vw;
    position: relative;
    top: -8vw;
}

.stone-6 img {
    width: 52vw;
    margin-left: 44vw;
}

.stone-7 img {
    width: 70vw;
    margin-left: 4vw;
    margin-top: 4vw;
}

.stone-8 img {
    width: 29vw;
    margin-left: 65vw;
    margin-top: -8vw;
}

.stone-9 img {
    width: 65vw;
    position: relative;
    top: -15vw;
    margin-left: 9vw;
}

.stone-10 img {
    width: 59vw;
    position: relative;
    left: 33vw;
    padding-bottom: 14vw;
    top: -11vw;
}


/* 07 CONSTRUCTION */

#construction {
    position: relative;
    z-index: 2;
    background-color: white;
    padding-bottom: 4vw;
}

.slider-wrapper {
    width: 100vw;
    height: 40vw;
}

.slider img {
    position: absolute;
    width: calc(58vw - 30px);
}

.slider .left {
    left: calc(-50vw + 30px);
}

.slider .right {
    right: calc(-50vw + 30px);
}

.mask-07-00 {
    mask: url(/assets/svg/07-construction/07-00.svg);
    -webkit-mask: url(/assets/svg/07-construction/07-00.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 41vw;
    mask-size: 41vw;
    -webkit-mask-position: center;
    mask-position: center;
}

.mask-07-00 img {
    width: 30vw;
}

.main-offset {
    margin-top: 20vw;
}

.slider-wrapper-2 {
    width: 100vw;
    height: 65vw;
}

.little-slider {
    height: 40vw;
    width: 100vw;
}

.little-slider img {
    position: absolute;
    width: calc(58vw - 30px);
}

.little-slider .left {
    left: calc(-50vw + 30px);
}

.little-slider .right {
    right: calc(-50vw + 30px);
}

.mask-07-01 {
    mask: url(/assets/svg/07-construction/07-00.svg);
    -webkit-mask: url(/assets/svg/07-construction/07-00.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 42vw;
    mask-size: 42vw;
    -webkit-mask-position: center;
    mask-position: center;
}

.mask-07-01 img {
    width: 30vw;
}

.little-slider-2 {
    height: 40vw;
    width: 100vw;
}

.little-slider-2 img {
    position: absolute;
    width: calc(58vw - 30px);
}

.little-slider-2 .left {
    left: calc(-50vw + 30px);
}

.little-slider-2 .right {
    right: calc(-50vw + 30px);
}

.mask-07-02 {
    mask: url(/assets/svg/07-construction/07-00.svg);
    -webkit-mask: url(/assets/svg/07-construction/07-00.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 42vw;
    mask-size: 42vw;
    -webkit-mask-position: center;
    mask-position: center;
}

.mask-07-02 img {
    width: 30vw;
}

.little-slider-3 {
    height: 75vh;
    width: 100vw;
}

.little-slider-3 img {
    position: absolute;
    width: calc(58vw - 30px);
}

.little-slider-3 .left {
    left: calc(-50vw + 30px);
}

.little-slider-3 .right {
    right: calc(-50vw + 30px);
}

.mask-07-03 {
    mask: url(/assets/svg/07-construction/07-00.svg);
    -webkit-mask: url(/assets/svg/07-construction/07-00.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 42vw;
    mask-size: 42vw;
    -webkit-mask-position: center;
    mask-position: center;
}

.mask-07-03 img {
    width: 30vw;
}


/* 08 ENTGRENZUNG */

#dissolution {
    position: relative;
    z-index: 2;
    background-color: white;
    padding-bottom: 4vw;
}

.dissolution-stage {
    width: 92vw;
    margin-left: 4vw;
}

.dissolution-stage img {
    width: 93vw;
}

.mask-08-00 {
    mask: url(/assets/svg/08-dissolution/08-00.svg);
    -webkit-mask: url(/assets/svg/08-dissolution/08-00.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 92vw;
    mask-size: 92vw;
    -webkit-mask-position: center;
    mask-position: center;
    background-color: black;
}

.margin {
    margin-top: 6vw;
    margin-bottom: 6vw;
}

.blur {
    -webkit-filter: blur(1vw);
    filter: blur(1w);
    -webkit-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}

.blur:hover {
    -webkit-filter: blur(0);
    filter: blur(0);
}

.mix-blend {
    /*mix-blend-mode: difference;*/
}

.mask-08-01 {
    mask: url(/assets/svg/08-dissolution/08-01.svg);
    -webkit-mask: url(/assets/svg/08-dissolution/08-01.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 40vw;
    mask-size: 40vw;
    margin-top: 5vw;
    margin-left: 8vw;
    margin-bottom: -12vw;
}

.mask-08-01 img {
    width: 42vw;
}

.mask-08-02 {
    mask: url(/assets/svg/08-dissolution/08-02.svg);
    -webkit-mask: url(/assets/svg/08-dissolution/08-02.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 40vw;
    mask-size: 40vw;
    margin-left: 40vw;
    z-index: 0;
    margin-top: -36vw;
}

.mask-08-02 img {
    width: 42vw;
}

.mask-08-03 {
    mask: url(/assets/svg/08-dissolution/08-03.svg);
    -webkit-mask: url(/assets/svg/08-dissolution/08-03.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 40vw;
    mask-size: 40vw;
    margin-top: 5vw;
    margin-left: 8vw;
    margin-bottom: -30vw;
}

.mask-08-03 img {
    width: 42vw;
}

.mask-08-04 {
    mask: url(/assets/svg/08-dissolution/08-04.svg);
    -webkit-mask: url(/assets/svg/08-dissolution/08-04.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 40vw;
    mask-size: 40vw;
    margin-top: -23vw;
    margin-left: 40vw;
    z-index: 0;
}

.mask-08-04 img {
    width: 42vw;
}

.mask-08-05 {
    mask: url(/assets/svg/08-dissolution/08-05.svg);
    -webkit-mask: url(/assets/svg/08-dissolution/08-05.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 40vw;
    mask-size: 40vw;
    margin-top: 5vw;
    margin-left: 42vw;
}

.mask-08-05 img {
    width: 42vw;
}

.mask-08-06 {
    mask: url(/assets/svg/08-dissolution/08-06.svg);
    -webkit-mask: url(/assets/svg/08-dissolution/08-06.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 29vw;
    mask-size: 29vw;
    margin-left: 59vw;
    margin-bottom: -11vw;
    margin-top: -11vw;
    z-index: 0;
}

.mask-08-06 img {
    width: 30vw;
}

.mask-08-07 {
    mask: url(/assets/svg/08-dissolution/08-07.svg);
    -webkit-mask: url(/assets/svg/08-dissolution/08-07.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 29vw;
    mask-size: 29vw;
    margin-top: 5vw;
    margin-left: 45vw;
}

.mask-08-07 img {
    width: 30vw;
}

.mask-08-08 {
    mask: url(/assets/svg/08-dissolution/08-08.svg);
    -webkit-mask: url(/assets/svg/08-dissolution/08-08.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 85vw;
    mask-size: 85vw;
    margin-top: 4vw;
    margin-left: 8vw;
    margin-bottom: -13vw;
}

.mask-08-08 img {
    width: 86vw;
}


/*SECTION TOOL - 09*/

#tools {
    position: relative;
    z-index: 2;
    background-color: white;
    padding-bottom: 4vw;
}

.scale {
    transform: scale(3);
    transform-origin: center;
    -webkit-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}

.scale:hover {
    transform: scale(1);
    transform-origin: center;
}

.mask-09-01 {
    mask: url(/assets/svg/09-tools/09-01.svg);
    -webkit-mask: url(/assets/svg/09-tools/09-01.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 30vw;
    mask-size: 30vw;
    margin-left: 19vw;
    margin-top: -2vw;
    margin-bottom: -1vw;
    -webkit-mask-position-y: 5vw;
}

.mask-09-01 img {
    width: 30vw;
}

.mask-09-02 {
    mask: url(/assets/svg/09-tools/09-02.svg);
    -webkit-mask: url(/assets/svg/09-tools/09-02.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 27vw;
    mask-size: 27vw;
    margin-bottom: 4vw;
    margin-left: 46vw;
    margin-top: 6vw;
    -webkit-mask-position-x: 5vw;
}

.mask-09-02 img {
    width: 34.4vw;
}

.mask-09-03 {
    mask: url(/assets/svg/09-tools/09-03.svg);
    -webkit-mask: url(/assets/svg/09-tools/09-03.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 62vw;
    mask-size: 62vw;
    margin-left: 8vw;
    margin-top: 4vw;
    margin-bottom: -5vw;
}

.mask-09-03 img {
    width: 64vw;
}

.mask-09-04 {
    mask: url(/assets/svg/09-tools/09-04.svg);
    -webkit-mask: url(/assets/svg/09-tools/09-04.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 43vw;
    mask-size: 43vw;
    margin-left: 15vw;
    margin-bottom: -14vw;
}

.mask-09-04 img {
    width: 43vw;
}

.mask-09-05 {
    mask: url(/assets/svg/09-tools/09-05.svg);
    -webkit-mask: url(/assets/svg/09-tools/09-05.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 20vw;
    mask-size: 20vw;
    margin-left: 46vw;
    margin-top: 28vw;
    margin-bottom: -1vw;
    -webkit-mask-position-x: 6vw;
}

.mask-09-05 img {
    width: 31vw;
}

.mask-09-06 {
    mask: url(/assets/svg/09-tools/09-06.svg);
    -webkit-mask: url(/assets/svg/09-tools/09-06.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 33vw;
    mask-size: 33vw;
    margin-bottom: 10vw;
    margin-left: 14vw;
    margin-top: -63vw;
}

.mask-09-06 img {
    width: 48.4vw;
}

.mask-09-07 {
    mask: url(/assets/svg/09-tools/09-07.svg);
    -webkit-mask: url(/assets/svg/09-tools/09-07.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 85vw;
    mask-size: 85vw;
    margin-bottom: -5vw;
    margin-left: 8vw;
    margin-top: 7vw;
}

.mask-09-07 img {
    width: 86vw;
}

#tool-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 90vw;
    margin-left: 4vw;
    margin-top: 6vw;
}

@keyframes transformTools {
    from {
        width: 27vw;
    }
    to {
        width: 92vw;
    }
}

.tool-item {
    margin: 0 1rem 2rem 0;
}

.tools img {
    border-radius: 2vw;
    width: 27vw;
    animation-name: transformTools;
    animation-duration: 4.5s;
    animation-delay: 3.5s;
    animation-fill-mode: forwards;
}

.orange-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 90vw;
    margin-left: 2vw;
    align-items: center;
}

.tennis img {
    width: 70vw;
    margin-left: 2vw;
}

.info-wrapper {
    width: 45vw;
    margin-left: 7vh;
}

.read {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 5vw;
    margin-left: 8vw;
    width: 67vw;
}

.read p {
    font-family: "AkzidenzGroteskBQ-LigExt", Georgia, serif;
    color: #1D1D1B;
    text-indent: 3vw;
    /*word-break: normal;*/
    hyphens: auto;
    font-kerning: normal;
    text-rendering: auto;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
}

.quote-right {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}

.quote-right p {
    font-family: "AkzidenzGroteskBQ-LigExt", Georgia, serif;
    font-size: 2.6vw;
    line-height: 1.2;
    color: #1D1D1B;
    width: 80vw;
    margin-left: 2vw;
    text-indent: 9.2vw;
    word-break: normal;
    hyphens: auto;
    font-kerning: normal;
    text-rendering: auto;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
}

.quote-right h4 {
    width: 15vw;
    color: #A88861;
    font-family: "Charon-Regular", Georgia, serif;
    margin-left: 1vw;
    font-size: 1.5vw;
}

.maria img {
    width: 45vw;
}

.tennis img {
    width: 80vw;
    margin-top: 5vw;
}

.mare img {
    width: 50vw;
    margin-top: 5vw;
    margin-left: 2vw;
}

.quote-underline-wrapper {
    width: 80vw;
    margin-left: 8.2vw;
    margin-top: 15vw;
}

.quote-image-wrapper {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-left: 2vw;
    margin-top: 1rem;
    align-items: center;
}

.quote h2 {
    font-size: 6vw;
    line-height: 0.75;
    margin-left: 2.6vw;
    text-align: center;
    width: 60vw;
    margin-right: 2vw;
    -webkit-font-smoothing: subpixel-antialiased;
}

.quote-underline-wrapper .quote-nav h2 {
    margin-left: 0vw;
}

.quote-underline p {
    font-family: 'AkzidenzGroteskBQ-Ext';
    font-size: 1.5vw;
    margin-left: 8.2vw;
}

.small-quote-image-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-left: 2vw;
    margin-top: 4vw;
}

.small-quote h2 {
    font-family: "AkzidenzGroteskBQ-LigExt", Georgia, serif;
    font-size: 2.2vw;
    line-height: 1.25;
    margin-left: 2vw;
    text-align: left;
    width: 40vw;
    margin-right: 2vw;
    color: #A88861;
}

.quote-img {
    background-size: cover;
}

.small-quote-underline p {
    text-align: left;
    margin-left: 2vw;
    font-family: 'AkzidenzGroteskBQ-Ext';
    font-size: 1.5vw;
}

.repository {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: left;
    margin-top: 4vw;
    margin-left: 8vw;
}

.source p {
    width: 67vw;
    color: #1D1D1B;
    margin-left: 4vw;
}

.source a {
    color: #A88861;
}

.source h3 {
    font-family: "AkzidenzGroteskBQ-LigExt", Georgia, serif;
    font-weight: normal;
    font-size: 2.2vw;
    line-height: 1.27;
    text-align: left;
    letter-spacing: -0.005em;
}


/* 10 - DESIGN */

#design {
    position: relative;
    z-index: 2;
    background-color: white;
    padding-bottom: 4vw;
}

.transform {
    -webkit-transition: 1.5s ease-in-out;
    transition: 1.5s ease-in-out;
    transform-origin: center bottom;
    transform: translate(0) skew(0) scaleX(1) scaleY(1);
}

.transform:hover {
    transform-origin: center bottom;
    transform: translate(1vw, -6vw) skew(5deg) scaleX(2) scaleY(0.2);
}

.design-space {
    width: 92vw;
    margin-top: 6vw;
    margin-bottom: 4vw;
    margin-left: 4vw;
}

.mask-10-00 {
    mask: url(/assets/svg/10-design/10-00.svg);
    -webkit-mask: url(/assets/svg/10-design/10-00.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: 92vw;
    -webkit-mask-size: 92vw;
    mask-position: center;
    -webkit-mask-position: center;
    background-color: black;
}

.mask-10-00 img {
    width: 92vw;
}

.mask-10-01-a {
    mask: url(/assets/svg/10-design/switch/10-01-a.svg);
    -webkit-mask: url(/assets/svg/10-design/switch/10-01-a.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 42vw;
    mask-size: 42vw;
    margin-left: 52vw;
    margin-top: -2vw;
    margin-bottom: -7vw;
    mix-blend-mode: multiply;
}

.mask-10-01-a img {
    width: 43vw;
}

.mask-10-01-a:hover {
    mask: url(/assets/svg/10-design/switch/10-01-b.svg);
    -webkit-mask: url(/assets/svg/10-design/switch/10-01-b.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 40vw;
    mask-size: 40vw;
    margin-left: 52vw;
    margin-top: -2vw;
    margin-bottom: -7vw;
    mix-blend-mode: multiply;
}

.mask-10-02-a {
    mask: url(/assets/svg/10-design/switch/10-02-a.svg);
    -webkit-mask: url(/assets/svg/10-design/switch/10-02-a.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 42vw;
    mask-size: 42vw;
    margin-left: 8vw;
    margin-top: 3vw;
    margin-bottom: -14vw;
}

.mask-10-02-a img {
    width: 43vw;
}

.mask-10-02-a:hover {
    mask: url(/assets/svg/10-design/switch/10-02-b.svg);
    -webkit-mask: url(/assets/svg/10-design/switch/10-02-b.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 42vw;
    mask-size: 42vw;
    margin-left: 8vw;
    margin-top: 3vw;
    margin-bottom: -14vw;
}

.mask-10-03-a {
    mask: url(/assets/svg/10-design/switch/10-03-a.svg);
    -webkit-mask: url(/assets/svg/10-design/switch/10-03-a.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 42vw;
    mask-size: 42vw;
    margin-left: 22vw;
    margin-top: 2.3vw;
    mix-blend-mode: multiply;
}

.mask-10-03-a img {
    width: 43vw;
}

.mask-10-03-a:hover {
    mask: url(/assets/svg/10-design/switch/10-03-b.svg);
    -webkit-mask: url(/assets/svg/10-design/switch/10-03-b.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 35vw;
    mask-size: 35vw;
    margin-left: 22vw;
    margin-top: 2.3vw;
    mix-blend-mode: multiply;
}

.mask-10-05-a {
    mask: url(/assets/svg/10-design/switch/10-05-a.svg);
    -webkit-mask: url(/assets/svg/10-design/switch/10-05-a.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 28vw;
    mask-size: 28vw;
    margin-left: 9vw;
    margin-top: -50vw;
    margin-bottom: -9vw;
}

.mask-10-05-a img {
    width: 43vw;
}

.mask-10-05-a:hover {
    mask: url(/assets/svg/10-design/switch/10-05-b.svg);
    -webkit-mask: url(/assets/svg/10-design/switch/10-05-b.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 28vw;
    mask-size: 28vw;
    margin-left: 9vw;
    margin-top: -50vw;
    margin-bottom: -9vw;
}

.mask-10-06-a {
    mask: url(/assets/svg/10-design/switch/10-06-a.svg);
    -webkit-mask: url(/assets/svg/10-design/switch/10-06-a.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 42vw;
    mask-size: 42vw;
    margin-left: 32.3vw;
    margin-top: 5vw;
}

.mask-10-06-a img {
    width: 43vw;
}

.mask-10-06-a:hover {
    mask: url(/assets/svg/10-design/switch/10-06-b.svg);
    -webkit-mask: url(/assets/svg/10-design/switch/10-06-b.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 42vw;
    mask-size: 42vw;
    margin-left: 32.3vw;
    margin-top: 5vw;
}

.mask-10-07-a {
    mask: url(/assets/svg/10-design/switch/10-07-a.svg);
    -webkit-mask: url(/assets/svg/10-design/switch/10-07-a.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 42vw;
    mask-size: 42vw;
    margin-left: 7vw;
    margin-top: 5vw;
    margin-bottom: -13vw;
}

.mask-10-07-a img {
    width: 43vw;
}

.mask-10-07-a:hover {
    mask: url(/assets/svg/10-design/switch/10-07-b.svg);
    -webkit-mask: url(/assets/svg/10-design/switch/10-07-b.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 42vw;
    mask-size: 42vw;
    margin-left: 7vw;
    margin-top: 5vw;
    margin-bottom: -13vw;
}

.mask-10-08-a {
    mask: url(/assets/svg/10-design/switch/10-08-a.svg);
    -webkit-mask: url(/assets/svg/10-design/switch/10-08-a.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 42vw;
    mask-size: 42vw;
    margin-left: 30vw;
    margin-top: -54vw;
    margin-bottom: 10vw;
    position: absolute;
}

.mask-10-08-a img {
    width: 43vw;
}

.mask-10-08-a:hover {
    mask: url(/assets/svg/10-design/switch/10-08-b.svg);
    -webkit-mask: url(/assets/svg/10-design/switch/10-08-b.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 42vw;
    mask-size: 42vw;
    margin-left: 30vw;
    margin-top: -54vw;
    margin-bottom: 10vw;
    position: absolute;
}

.mask-10-04-a {
    mask: url(/assets/svg/10-design/switch/10-04-a.svg);
    -webkit-mask: url(/assets/svg/10-design/switch/10-04-a.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 42vw;
    mask-size: 42vw;
    margin-left: 8vw;
    margin-top: 13vw;
}

.mask-10-04-a img {
    width: 43vw;
}

.mask-10-04-a:hover {
    mask: url(/assets/svg/10-design/switch/10-04-b.svg);
    -webkit-mask: url(/assets/svg/10-design/switch/10-04-b.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 42vw;
    mask-size: 42vw;
    margin-left: 8vw;
    margin-top: 13vw;
}


/* NEXT CHAPTER */

.next-chapter {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    background-color: black;
    -webkit-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
    padding-bottom: 8vw;
}

.next-chapter p {
    font-family: "AkzidenzGroteskBQ-LigExt", Georgia, serif;
    font-size: 2.6vw;
    color: white;
    margin-left: 4vw;
}

.next-chapter h3 {
    font-family: "Charon-Regular", Georgia, serif;
    font-size: 18vw;
    font-style: normal;
    text-align: left;
    line-height: 0.65;
    color: white;
    width: 92vw;
    margin-left: 4vw;
    word-break: break-all;
    width: 70vw;
    padding-top: 3vw;
}

.chapter-fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40vw;
    z-index: 1;
}


/* IMPRESSUM */

.indi-wrapper-imp a {
    color: black;
}

.indi-wrapper-imp a:hover {
    color: #A88861 !important;
}

.indi-wrapper-imp {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-left: 8vw;
    position: fixed;
    top: 2vw;
    z-index: 1;
}

.indicator-start-imp {
    font-size: 2.2vw;
    font-family: "AkzidenzGroteskBQ-LigExt", Georgia, serif;
    color: black;
    padding: 0.7vw 2vw 1vw 3.6vw;
    border-radius: 10rem;
    border: 1px solid black;
    width: 29vw;
    height: 4vw;
}

.impressum-text {
    margin-top: 12vw;
    margin-left: 8vw;
    width: 69vw;
}

.impressum-text h2 {
    margin: 0 0 4vw 0;
    color: black;
}

.impressum-text p {
    margin: 0 0 2vw 0;
    color: black;
}

.impressum-text a {
    margin: 0vw;
    color: black;
}

.impressum-text a:hover {
    margin: 0vw;
    color: #A88861;
}

.impressum-text img {
    margin-top: 12vw;
    margin-left: 8vw;
    width: 69vw;
}

.impressum-text-small p {
    position: fixed;
    bottom: 4vw;
    width: 85vw;
    mix-blend-mode: color;
}

.mask-imp {
    mask: url(/assets/svg/04-elemente/04-06.svg);
    -webkit-mask: url(/assets/svg/04-elemente/04-06.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 60vw;
    mask-size: 60vw;
    margin-left: 31vw;
    margin-top: 4vw;
    margin-bottom: -7vw;
    mix-blend-mode: multiply;
    position: absolute;
}

.mask-imp img {
    width: 60vw;
}