/*
FARBEN
Lachs       df8061
Dunkelgrau  414141
Hellgrau    f5f5f5
 */

/* region Debug */

.center-marker {
    position: fixed;
    width: 2px;
    height: 100vh;
    background: tomato;
    top: 0;
    left: calc(50vw - 1px);
}

.debug-container {
    position: fixed;
    top: 0;
    width: 0;
    overflow: visible;
    left: calc(50vw);
    white-space: nowrap;
}

.section.active {
    /*outline: 1px solid red;*/
}

.img-parallax {
    /*outline: 2px solid red;*/
}


#section-3 .img-parallax,
#section-6 .img-parallax {
    /*outline: 2px solid blue;*/
}

/* endregion */

.conference .overlay-open-wrapper {
    margin-top: auto;
    height: 100%;
}

/*
.background-section-wrapper,
#wrapper {
    counter-reset: number;
}

.background-section,
.section {
    counter-increment: number;
    position: relative;
}

.background-section::before,
.section::before {
    position: absolute;
    content: counter(number)" ";
    font-size: 2rem;
    font-weight: bold;
}

.background-section::before {
    color: silver;
}
*/

/*
.section {
    opacity: 0.6;
}

.background-section:nth-child(3),
.section:nth-child(3) {
    background-color: darkred;
}

.background-section:nth-child(5),
.section:nth-child(5) {
    background-color: darkgreen;
}

.background-section:nth-child(7),
.section:nth-child(7) {
    background-color: darkblue;
}

.background-section:nth-child(9),
.section:nth-child(9) {
    background-color: darkkhaki;
}
*/

/* region Cursor */

body,
label {
    cursor: url('../img/Cursor/Kassia_Cursor_Standard_1_32x32.png') 16 16, auto;
}

a,
button,
.plyr__control,
.grid-galerie img {
    cursor: url('../img/Cursor/Kassia_Cursor_Standard_2_32x32.png') 16 16, auto;
}

input,
textarea {
    cursor: url('../img/Cursor/Kassia_Cursor_Text_32x32.png') 16 16, auto;
}

#draggable {
    cursor: url('../img/Cursor/Kassia_Cursor_Hand_2_32x32.png') 16 16, grab !important;
}

#draggable.dragging {
    cursor: url('../img/Cursor/Kassia_Cursor_Hand 1_32x32.png') 16 16, grabbing !important;
}

/* endregion */

/* region Font */

@font-face {
    font-family: 'Roboto';
    src: local('Roboto'), local('Roboto Regular'), local('Roboto-Regular'),
         url('../font/roboto-regular.woff2?#iefix') format('woff2'),
         url('../font/roboto-regular.woff') format('woff');
    font-display: swap;
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto Light';
    src: local('Roboto Light'), local('Roboto-Light'),
         url('../font/roboto-light.woff2?#iefix') format('woff2'),
         url('../font/roboto-light.woff') format('woff');
    font-display: swap;
    font-weight: 300;
    font-style: normal;
}

html {
    font-family: 'Roboto', Arial, Helvetica Neue, Helvetica, sans-serif;
    line-height: 1.4;
}

body {
    font-size: 1rem;
    letter-spacing: 0.045rem;
}

html {
    font-size: 11px;
}

@media (min-width: 512px) {
    html {
        font-size: calc(0.75rem + (22 - 11) * ((100vw - 512px) / (2560 - 512)));
        min-height: 0vw;
    }
}

@media (min-width: 2560px) {
    html {
        font-size: 22px;
    }
}

/* endregion */

/* region Defaults */

body {
    background-color: #001700;
    color: #e5f9ff;
}

main {
    padding-left: 8rem;
}

.light {
    font-family: 'Roboto Light', 'Franklin Gothic Medium', Tahoma, sans-serif;
    letter-spacing: 0.035rem;
}

.nowrap {
    white-space: nowrap;
}

h2 {
    white-space: nowrap;
}

.MushROOM_UNDERground h2 {
    pointer-events: none;
}

ul {
    margin: 0;
    padding: 0;
}

ul li {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* endregion */

/* region Presets */

span.hidden {
    visibility: hidden !important;
}

.color-hover {
    transition: filter 0.3s linear;
}

.color-hover:hover {
    -webkit-filter: contrast(2) saturate(3);
    filter: contrast(2) saturate(3);
}

.color-hover:hover .interact-here {
    transition: filter 0.3s linear;
}

.color-hover:hover .interact-here {
    -webkit-filter: contrast(0.5) saturate(1);
    filter: contrast(0.5) saturate(1);
}

.jpg-hover,
.png-hover {
    display: inline-block;
    cursor: url('../img/Cursor/Kassia_Cursor_Lupe_32x32.png') 16 16, auto;
}

.png-hover {
    -webkit-filter: invert(56%) sepia(82%) saturate(300%) hue-rotate(328deg) brightness(88%) contrast(100%);
    filter: invert(60%) sepia(27%) saturate(915%) hue-rotate(327deg) brightness(92%) contrast(88%);
    filter: invert(56%) sepia(82%) saturate(300%) hue-rotate(328deg) brightness(90%) contrast(110%);
}

.jpg-hover {
    background: #df8061;
}

.jpg-hover img {
    mix-blend-mode: multiply;
}

.png-hover:hover {
    -webkit-filter: none;
    filter: none;
}

.jpg-hover:hover img {
    mix-blend-mode: normal;
}

.hidden {
    display: none;
}

/* endregion */

.youtube-wrapper {
    position: fixed;
    z-index: 100;
    background: #001700;
    height: 100%;
    width: 100%;
}

.youtube-wrapper .center {
    margin: 0;
    position: absolute;
    width: 100%;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

#skipIntro {
    position: absolute;
    right: 5%;
    bottom: 8%;
}

/* region Canvas */
#c {
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
}

/* endregion */

/* region Loading/Cached */
.loaded #loading {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.5s, opacity 0.5s linear;
}

.cached #loading {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.2s, opacity 0.2s linear;
}

/* endregion */

/* region Parallax Scrolling */

body {
    overflow-x: hidden;
    touch-action: pan-y;
}

html,
body,
#viewport,
#content,
#wrapper {
    overscroll-behavior: none;
    scroll-behavior: smooth;
}

.MushROOM_UNDERground {
    overflow: hidden !important;
}

.horizontal {
    overflow-x: visible;
    overflow-y: hidden;
    touch-action: pan-x;
}

.pin-spacer {
    pointer-events: none;
}

.horizontal .pin-spacer {
    /*width: 0 !important;*/
}

/* horizontal scrollbar */
#wrapper {
    height: 100vh;
}

.horizontal #wrapper {
    height: 100% !important;
}

#viewport {
    overflow: hidden;
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.horizontal #viewport {
    overflow: visible;
    position: static;
}

#content {
    overflow: visible;
    width: 100%;
}

.wrapper {
    display: -ms-flexbox;
    display: flex;

    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}

.vertical .wrapper {
    position: fixed;
}

.horizontal .wrapper {
    position: static;
}

/* endregion */

/* region Säulen/Pillars */

#pillars {
    position: absolute;
    top: 0;
    left: 0;

    height: 100%;

    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;

    justify-content: space-between;
    align-content: space-between;

    pointer-events: none;
    z-index: 90;

    padding-left: 120vw;
    padding-left: 38vw;
    padding-left: 70vw;
}

.conference #pillars {
    padding-left: 120vh;
}

#pillars div {
    height: 100%;
    width: 200vw;
    pointer-events: none;

    background-repeat: no-repeat;
    background-size: auto 100%;
}

#background-pillars,
.background-pillar-wrapper {
    height: 60vh;

    pointer-events: none;
    z-index: 90;
}

#background-pillars {
    position: absolute;
    top: 30vh;
    left: 0;

    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;

    justify-content: space-between;
    align-content: space-between;

    padding-left: 120vw;
    padding-left: 38vw;
    padding-left: 90vw;
}

.background-pillar-wrapper {
    width: 0;
    margin-top: 29vh;
    overflow: visible;

    filter: brightness(66%);
}

.pillarstriped .background-pillar-wrapper {
    margin-top: 26.5vh;
}

.ByzANTian_TRAces #background-pillars,
.FACing_KASsiaS_FACes #background-pillars {
    display: none;
}

.FEMinist_FUTure_PRActiseS #background-pillars,
.BIOsphere #background-pillars {
    display: none;
}

.background-pillar-wrapper div,
#background-pillars div {
    height: 60vh;
    width: 100vw;
    /*pointer-events: none;*/

    background-repeat: no-repeat;
    background-size: auto 100%;
}

.FACing_KASsiaS_FACes .background-pillar-wrapper div,
.FACing_KASsiaS_FACes #background-pillars div {
    height: 70vh;
}

.background-pillar-wrapper div {
    background-position: center;
    margin-left: -50vw;
}

/* region Responsive */
.saeule_00 {
    background-image: url('/img/Saeulen/saeule_00.png')
}

#background .saeule_00 {
    background-image: url('/img/Saeulen/saeule_00_1536.png')
}

.saeule_01 {
    background-image: url('/img/Saeulen/saeule_01.png')
}

#background .saeule_01 {
    background-image: url('/img/Saeulen/saeule_01_1536.png')
}

.pillarstriped .saeule_01 {
    background-image: url('/img/Saeulen/7_BIOsphere_Paralax_Saeulen_01_2048.png')
}

.pillarstriped #background .saeule_01 {
    background-image: url('/img/Saeulen/7_BIOsphere_Saeule_01_1827.png')
}

.saeule_02 {
    background-image: url('/img/Saeulen/saeule_02.png')
}

#background .saeule_02 {
    background-image: url('/img/Saeulen/saeule_02_1536.png')
}

.pillarstriped .saeule_02 {
    background-image: url('/img/Saeulen/7_BIOsphere_Paralax_Saeulen_02_2048.png')
}

.pillarstriped #background .saeule_02 {
    background-image: url('/img/Saeulen/7_BIOsphere_Saeule_02_1827.png')
}

.saeule_03 {
    background-image: url('/img/Saeulen/saeule_03.png')
}

#background .saeule_03 {
    background-image: url('/img/Saeulen/saeule_03_1536.png')
}

.pillarstriped .saeule_03 {
    background-image: url('/img/Saeulen/7_BIOsphere_Paralax_Saeulen_03_2048.png')
}

.pillarstriped #background .saeule_03 {
    background-image: url('/img/Saeulen/7_BIOsphere_Saeule_03_1827.png')
}

.saeule_04 {
    background-image: url('/img/Saeulen/saeule_04.png')
}

#background .saeule_04 {
    background-image: url('/img/Saeulen/saeule_04_1536.png')
}

.saeule_05 {
    background-image: url('/img/Saeulen/saeule_05.png')
}

#background .saeule_05 {
    background-image: url('/img/Saeulen/saeule_05_1536.png')
}

.saeule_06 {
    background-image: url('/img/Saeulen/saeule_06.png')
}

#background .saeule_06 {
    background-image: url('/img/Saeulen/saeule_06_1536.png')
}

.saeule_07 {
    background-image: url('/img/Saeulen/saeule_07.png')
}

#background .saeule_07 {
    background-image: url('/img/Saeulen/saeule_07_1536.png')
}

.saeule_08 {
    background-image: url('/img/Saeulen/saeule_08.png')
}

#background .saeule_08 {
    background-image: url('/img/Saeulen/saeule_08_1536.png')
}

.saeule_09 {
    background-image: url('/img/Saeulen/saeule_09.png')
}

#background .saeule_09 {
    background-image: url('/img/Saeulen/saeule_09_1536.png')
}

.saeule_10 {
    background-image: url('/img/Saeulen/saeule_10.png')
}

#background .saeule_10 {
    background-image: url('/img/Saeulen/saeule_10_1536.png')
}

.saeule_11 {
    background-image: url('/img/Saeulen/saeule_11.png')
}

#background .saeule_11 {
    background-image: url('/img/Saeulen/saeule_11_1536.png')
}

.saeule_12 {
    background-image: url('/img/Saeulen/saeule_12.png')
}

#background .saeule_12 {
    background-image: url('/img/Saeulen/saeule_12_1536.png')
}

.saeule_13 {
    background-image: url('/img/Saeulen/saeule_13.png')
}

#background .saeule_13 {
    background-image: url('/img/Saeulen/saeule_13_1536.png')
}

.FACing_KASsiaS_FACes .pillar {
    background-image: url('/img/FACing_KASsiaS_FACes/Saeule_Paralax_2048.png');
}

.FACing_KASsiaS_FACes #background .pillar {
    background-image: url('/img/FACing_KASsiaS_FACes/Saeule_Paralax_1536.png');
}

#background-pillars .hidden,
.background-pillar-wrapper .hidden {
    display: none;
}

@media (max-height: 1690px) {
    .saeule_00 {
        background-image: url('/img/Saeulen/saeule_00_1536.png')
    }

    #background .saeule_00 {
        background-image: url('/img/Saeulen/saeule_00_1024.png')
    }

    .saeule_01 {
        background-image: url('/img/Saeulen/saeule_01_1536.png')
    }

    #background .saeule_01 {
        background-image: url('/img/Saeulen/saeule_01_1024.png')
    }

    .pillarstriped .saeule_01 {
        background-image: url('/img/Saeulen/7_BIOsphere_Paralax_Saeulen_01_1536.png')
    }

    .pillarstriped #background .saeule_01 {
        background-image: url('/img/Saeulen/7_BIOsphere_Saeule_01_1218.png')
    }

    .saeule_02 {
        background-image: url('/img/Saeulen/saeule_02_1536.png')
    }

    #background .saeule_02 {
        background-image: url('/img/Saeulen/saeule_02_1024.png')
    }

    .pillarstriped .saeule_02 {
        background-image: url('/img/Saeulen/7_BIOsphere_Paralax_Saeulen_02_1536.png')
    }

    .pillarstriped #background .saeule_02 {
        background-image: url('/img/Saeulen/7_BIOsphere_Saeule_02_1218.png')
    }

    .saeule_03 {
        background-image: url('/img/Saeulen/saeule_03_1536.png')
    }

    #background .saeule_03 {
        background-image: url('/img/Saeulen/saeule_03_1024.png')
    }

    .pillarstriped .saeule_03 {
        background-image: url('/img/Saeulen/7_BIOsphere_Paralax_Saeulen_03_1536.png')
    }

    .pillarstriped #background .saeule_03 {
        background-image: url('/img/Saeulen/7_BIOsphere_Saeule_03_1218.png')
    }

    .saeule_04 {
        background-image: url('/img/Saeulen/saeule_04_1536.png')
    }

    #background .saeule_04 {
        background-image: url('/img/Saeulen/saeule_04_1024.png')
    }

    .saeule_05 {
        background-image: url('/img/Saeulen/saeule_05_1536.png')
    }

    #background .saeule_05 {
        background-image: url('/img/Saeulen/saeule_05_1024.png')
    }

    .saeule_06 {
        background-image: url('/img/Saeulen/saeule_06_1536.png')
    }

    #background .saeule_06 {
        background-image: url('/img/Saeulen/saeule_06_1024.png')
    }

    .saeule_07 {
        background-image: url('/img/Saeulen/saeule_07_1536.png')
    }

    #background .saeule_07 {
        background-image: url('/img/Saeulen/saeule_07_1024.png')
    }

    .saeule_08 {
        background-image: url('/img/Saeulen/saeule_08_1536.png')
    }

    #background .saeule_08 {
        background-image: url('/img/Saeulen/saeule_08_1024.png')
    }

    .saeule_09 {
        background-image: url('/img/Saeulen/saeule_09_1536.png')
    }

    #background .saeule_09 {
        background-image: url('/img/Saeulen/saeule_09_1024.png')
    }

    .saeule_10 {
        background-image: url('/img/Saeulen/saeule_10_1536.png')
    }

    #background .saeule_10 {
        background-image: url('/img/Saeulen/saeule_10_1024.png')
    }

    .saeule_11 {
        background-image: url('/img/Saeulen/saeule_11_1536.png')
    }

    #background .saeule_11 {
        background-image: url('/img/Saeulen/saeule_11_1024.png')
    }

    .saeule_12 {
        background-image: url('/img/Saeulen/saeule_12_1536.png')
    }

    #background .saeule_12 {
        background-image: url('/img/Saeulen/saeule_12_1024.png')
    }

    .saeule_13 {
        background-image: url('/img/Saeulen/saeule_13_1536.png')
    }

    #background .saeule_13 {
        background-image: url('/img/Saeulen/saeule_13_1024.png')
    }

    .FACing_KASsiaS_FACes .pillar {
        background-image: url('/img/FACing_KASsiaS_FACes/Saeule_Paralax_1536.png');
    }

    .FACing_KASsiaS_FACes #background .pillar {
        background-image: url('/img/FACing_KASsiaS_FACes/Saeule_Paralax_1024.png');
    }
}

@media (max-height: 1126px) {
    .saeule_00 {
        background-image: url('/img/Saeulen/saeule_00_1024.png')
    }

    #background .saeule_00 {
        background-image: url('/img/Saeulen/saeule_00_768.png')
    }

    .saeule_01 {
        background-image: url('/img/Saeulen/saeule_01_1024.png')
    }

    #background .saeule_01 {
        background-image: url('/img/Saeulen/saeule_01_768.png')
    }

    .pillarstriped .saeule_01 {
        background-image: url('/img/Saeulen/7_BIOsphere_Paralax_Saeulen_01_1024.png')
    }

    .pillarstriped #background .saeule_01 {
        background-image: url('/img/Saeulen/7_BIOsphere_Saeule_01_913.png')
    }

    .saeule_02 {
        background-image: url('/img/Saeulen/saeule_02_1024.png')
    }

    #background .saeule_02 {
        background-image: url('/img/Saeulen/saeule_02_768.png')
    }

    .pillarstriped .saeule_02 {
        background-image: url('/img/Saeulen/7_BIOsphere_Paralax_Saeulen_02_1024.png')
    }

    .pillarstriped #background .saeule_02 {
        background-image: url('/img/Saeulen/7_BIOsphere_Saeule_02_913.png')
    }

    .saeule_03 {
        background-image: url('/img/Saeulen/saeule_03_1024.png')
    }

    #background .saeule_03 {
        background-image: url('/img/Saeulen/saeule_03_768.png')
    }

    .pillarstriped .saeule_03 {
        background-image: url('/img/Saeulen/7_BIOsphere_Paralax_Saeulen_03_1024.png')
    }

    .pillarstriped #background .saeule_03 {
        background-image: url('/img/Saeulen/7_BIOsphere_Saeule_03_913.png')
    }

    .saeule_04 {
        background-image: url('/img/Saeulen/saeule_04_1024.png')
    }

    #background .saeule_04 {
        background-image: url('/img/Saeulen/saeule_04_768.png')
    }

    .saeule_05 {
        background-image: url('/img/Saeulen/saeule_05_1024.png')
    }

    #background .saeule_05 {
        background-image: url('/img/Saeulen/saeule_05_768.png')
    }

    .saeule_06 {
        background-image: url('/img/Saeulen/saeule_06_1024.png')
    }

    #background .saeule_06 {
        background-image: url('/img/Saeulen/saeule_06_768.png')
    }

    .saeule_07 {
        background-image: url('/img/Saeulen/saeule_07_1024.png')
    }

    #background .saeule_07 {
        background-image: url('/img/Saeulen/saeule_07_768.png')
    }

    .saeule_08 {
        background-image: url('/img/Saeulen/saeule_08_1024.png')
    }

    #background .saeule_08 {
        background-image: url('/img/Saeulen/saeule_08_768.png')
    }

    .saeule_09 {
        background-image: url('/img/Saeulen/saeule_09_1024.png')
    }

    #background .saeule_09 {
        background-image: url('/img/Saeulen/saeule_09_768.png')
    }

    .saeule_10 {
        background-image: url('/img/Saeulen/saeule_10_1024.png')
    }

    #background .saeule_10 {
        background-image: url('/img/Saeulen/saeule_10_768.png')
    }

    .saeule_11 {
        background-image: url('/img/Saeulen/saeule_11_1024.png')
    }

    #background .saeule_11 {
        background-image: url('/img/Saeulen/saeule_11_768.png')
    }

    .saeule_12 {
        background-image: url('/img/Saeulen/saeule_12_1024.png')
    }

    #background .saeule_12 {
        background-image: url('/img/Saeulen/saeule_12_768.png')
    }

    .saeule_13 {
        background-image: url('/img/Saeulen/saeule_13_1024.png')
    }

    #background .saeule_13 {
        background-image: url('/img/Saeulen/saeule_13_768.png')
    }

    .FACing_KASsiaS_FACes .pillar {
        background-image: url('/img/FACing_KASsiaS_FACes/Saeule_Paralax_1024.png');
    }

    .FACing_KASsiaS_FACes #background .pillar {
        background-image: url('/img/FACing_KASsiaS_FACes/Saeule_Paralax_768.png');
    }
}

@media (max-height: 845px) {
    .saeule_00 {
        background-image: url('/img/Saeulen/saeule_00_768.png')
    }

    #background .saeule_00 {
        background-image: url('/img/Saeulen/saeule_00_768.png')
    }

    .saeule_01 {
        background-image: url('/img/Saeulen/saeule_01_768.png')
    }

    #background .saeule_01 {
        background-image: url('/img/Saeulen/saeule_01_768.png')
    }

    .pillarstriped .saeule_01 {
        background-image: url('/img/Saeulen/7_BIOsphere_Paralax_Saeulen_01_768.png')
    }

    .pillarstriped #background .saeule_01 {
        background-image: url('/img/Saeulen/7_BIOsphere_Saeule_01_609.png')
    }

    .saeule_02 {
        background-image: url('/img/Saeulen/saeule_02_768.png')
    }

    #background .saeule_02 {
        background-image: url('/img/Saeulen/saeule_02_768.png')
    }

    .pillarstriped .saeule_02 {
        background-image: url('/img/Saeulen/7_BIOsphere_Paralax_Saeulen_02_768.png')
    }

    .pillarstriped #background .saeule_02 {
        background-image: url('/img/Saeulen/7_BIOsphere_Saeule_02_609.png')
    }

    .saeule_03 {
        background-image: url('/img/Saeulen/saeule_03_768.png')
    }

    #background .saeule_03 {
        background-image: url('/img/Saeulen/saeule_03_768.png')
    }

    .pillarstriped .saeule_03 {
        background-image: url('/img/Saeulen/7_BIOsphere_Paralax_Saeulen_03_768.png')
    }

    .pillarstriped #background .saeule_03 {
        background-image: url('/img/Saeulen/7_BIOsphere_Saeule_03_609.png')
    }

    .saeule_04 {
        background-image: url('/img/Saeulen/saeule_04_768.png')
    }

    #background .saeule_04 {
        background-image: url('/img/Saeulen/saeule_04_768.png')
    }

    .saeule_05 {
        background-image: url('/img/Saeulen/saeule_05_768.png')
    }

    #background .saeule_05 {
        background-image: url('/img/Saeulen/saeule_05_768.png')
    }

    .saeule_06 {
        background-image: url('/img/Saeulen/saeule_06_768.png')
    }

    #background .saeule_06 {
        background-image: url('/img/Saeulen/saeule_06_768.png')
    }

    .saeule_07 {
        background-image: url('/img/Saeulen/saeule_07_768.png')
    }

    #background .saeule_07 {
        background-image: url('/img/Saeulen/saeule_07_768.png')
    }

    .saeule_08 {
        background-image: url('/img/Saeulen/saeule_08_768.png')
    }

    #background .saeule_08 {
        background-image: url('/img/Saeulen/saeule_08_768.png')
    }

    .saeule_09 {
        background-image: url('/img/Saeulen/saeule_09_768.png')
    }

    #background .saeule_09 {
        background-image: url('/img/Saeulen/saeule_09_768.png')
    }

    .saeule_10 {
        background-image: url('/img/Saeulen/saeule_10_768.png')
    }

    #background .saeule_10 {
        background-image: url('/img/Saeulen/saeule_10_768.png')
    }

    .saeule_11 {
        background-image: url('/img/Saeulen/saeule_11_768.png')
    }

    #background .saeule_11 {
        background-image: url('/img/Saeulen/saeule_11_768.png')
    }

    .saeule_12 {
        background-image: url('/img/Saeulen/saeule_12_768.png')
    }

    #background .saeule_12 {
        background-image: url('/img/Saeulen/saeule_12_768.png')
    }

    .saeule_13 {
        background-image: url('/img/Saeulen/saeule_13_768.png')
    }

    #background .saeule_13 {
        background-image: url('/img/Saeulen/saeule_13_768.png')
    }

    .FACing_KASsiaS_FACes .pillar {
        background-image: url('/img/FACing_KASsiaS_FACes/Saeule_Paralax_768.png');
    }

    .FACing_KASsiaS_FACes #background .pillar {
        background-image: url('/img/FACing_KASsiaS_FACes/Saeule_Paralax_768.png');
    }
}

/* endregion */

/* endregion */

/* region SVG Drawing */

.vivus-wrapper svg {
    width: 100%;
    height: 100%;
}

.vivus-wrapper svg {
    visibility: hidden;
}

.vivus-wrapper .vivus-ready {
    visibility: visible !important;
}

.vivus-wrapper path {
    fill: none;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.vivus-wrapper .cls-1 {
    fill: none !important;
}

.svg-defs {
    width: 0 !important;
    height: 0 !important;
    visibility: hidden;
}

.svg-drawing {
    position: absolute;
    width: 66vh;
    max-width: 90vw;
    height: 65vh;
    top: 8vh;
}

.svg-drawing svg {
    /*max-width: 90vw;*/
}

.conference .svg-drawing {
    margin-left: 15vh;
}

.BIOsphere .svg-drawing {
    margin-left: -10vh;
}

/* endregion */

/* region Sections */

#background {
    position: absolute;
    z-index: 0;

    width: 100%;
    height: 100%;
}

.background-image {
    position: absolute;

    width: 100%;
    height: 100%;

    top: 0;
    left: 110vw;

    background: left / contain repeat-x url("../img/Background-Grid.png");
}

.conference .background-image {
    left: 0;
    background-image: url("../img/HERstories/Background/Architektur_2048.png");
}

.ByzANTian_TRAces .background-image {
    left: 0;
    background-image: url("../img/ByzANTian_TRAces/Background/Istanbul_Background_Rapport_2160.png");
}

.FACing_KASsiaS_FACes .background-image {
    left: 0;
    background-position: 7% 0 !important;
    background-image: url("../img/FACing_KASsiaS_FACes/Background/Schleierraum_Background_Rapport_2160.png");
}

.CHAmber_of_CHAnts .background-image,
.PoeTREEs .background-image {
    left: 0;
    background-image: url("../img/PoeTREEs/Background/bg_06-gridGreen_2048.png");
}

.BIOsphere .background-image {
    left: 0;
    background-image: url("../img/BIOsphere/Background/7_BIOsphere_Background_Rapport_2048.png");
}

.FEMinist_FUTure_PRActiseS .background-image {
    left: 0;
    background-image: url("../img/FEMinist_FUTure_PRActiseS/Background/Toolbox_Background_Glitch_2160.png");
}

.SPACing_SILenCe .background-image {
    left: 0;
    background-image: url("../img/SPACing_SILenCe/Background/12_SPACingSILenCe_Background_3840x2160.png");
    background-size: cover;
}

@media (max-height: 1690px) {
    .conference .background-image {
        background-image: url("../img/HERstories/Background/Architektur_1536.png");
    }

    .ByzANTian_TRAces .background-image {
        background-image: url("../img/ByzANTian_TRAces/Background/Istanbul_Background_Rapport_1440.png");
    }

    .FACing_KASsiaS_FACes .background-image {
        background-image: url("../img/FACing_KASsiaS_FACes/Background/Schleierraum_Background_Rapport_1440.png");
    }

    .CHAmber_of_CHAnts .background-image,
    .PoeTREEs .background-image {
        background-image: url("../img/PoeTREEs/Background/bg_06-gridGreen_1536.png");
    }

    .BIOsphere .background-image {
        background-image: url("../img/BIOsphere/Background/7_BIOsphere_Background_Rapport_1536.png");
    }

    .FEMinist_FUTure_PRActiseS .background-image {
        background-image: url("../img/FEMinist_FUTure_PRActiseS/Background/Toolbox_Background_Glitch_1440.png");
    }

    .SPACing_SILenCe .background-image {
        background-image: url("../img/SPACing_SILenCe/Background/12_SPACingSILenCe_Background_2560x1440.png");
    }
}

@media (max-height: 1126px) {
    .conference.background-image {
        background-image: url("../img/HERstories/Background/Architektur_1024.png");
    }

    .ByzANTian_TRAces .background-image {
        background-image: url("../img/ByzANTian_TRAces/Background/Istanbul_Background_Rapport_1080.png");
    }

    .FACing_KASsiaS_FACes .background-image {
        background-image: url("../img/FACing_KASsiaS_FACes/Background/Schleierraum_Background_Rapport_1080.png");
    }

    .CHAmber_of_CHAnts .background-image,
    .PoeTREEs .background-image {
        background-image: url("../img/PoeTREEs/Background/bg_06-gridGreen_1024.png");
    }

    .BIOsphere .background-image {
        background-image: url("../img/BIOsphere/Background/7_BIOsphere_Background_Rapport_1024.png");
    }

    .FEMinist_FUTure_PRActiseS .background-image {
        background-image: url("../img/FEMinist_FUTure_PRActiseS/Background/Toolbox_Background_Glitch_1080.png");
    }

    .SPACing_SILenCe .background-image {
        background-image: url("../img/SPACing_SILenCe/Background/12_SPACingSILenCe_Background_1920x1080.png");
    }
}

@media (max-height: 845px) {
    .conference .background-image {
        background-image: url("../img/HERstories/Background/Architektur_768.png");
    }

    .ByzANTian_TRAces .background-image {
        background-image: url("../img/ByzANTian_TRAces/Background/Istanbul_Background_Rapport_720.png");
    }

    .FACing_KASsiaS_FACes .background-image {
        background-image: url("../img/FACing_KASsiaS_FACes/Background/Schleierraum_Background_Rapport_720.png");
    }

    .CHAmber_of_CHAnts .background-image,
    .PoeTREEs .background-image {
        background-image: url("../img/PoeTREEs/Background/bg_06-gridGreen_768.png");
    }

    .BIOsphere .background-image {
        background-image: url("../img/BIOsphere/Background/7_BIOsphere_Background_Rapport_768.png");
    }

    .FEMinist_FUTure_PRActiseS .background-image {
        background-image: url("../img/FEMinist_FUTure_PRActiseS/Background/Toolbox_Background_Glitch_720.png");
    }

    .SPACing_SILenCe .background-image {
        background-image: url("../img/SPACing_SILenCe/Background/12_SPACingSILenCe_Background_1280x720.png");
    }
}

.ByzANTian_TRAces .section,
.FACing_KASsiaS_FACes .section,
.BIOsphere .section {
    pointer-events: none;
}

section {
    position: relative;

    font-size: min(1vh, 2vw);
}

.section {
    position: relative;

    height: 100%;

    -ms-flex-negative: 0;
    flex-shrink: 0;

    display: -ms-flexbox;
    display: flex;

    -ms-flex-pack: center;
    justify-content: center;

    -ms-flex-align: center;
    align-items: center;

    top: 0 !important;
    pointer-events: all;
}

.background-section-wrapper {
    width: 100%;
    height: 100%;

    display: -ms-flexbox;
    display: flex;

    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;

    /*padding-left: 60vw;*/
}

.background-section:first-child {
    width: 60vw;
}

.background-section {
    position: relative;

    height: 100%;
    width: 100vw;

    -ms-flex-negative: 0;
    flex-shrink: 0;

    display: -ms-flexbox;
    display: flex;

    -ms-flex-pack: center;
    justify-content: center;

    -ms-flex-align: center;
    align-items: center;

    top: 0 !important;
}

.background-intro {
    display: block;
    width: 100vw;
}

.background-last {
    width: min(90vh, 80vw);
}

.FACing_KASsiaS_FACes .background-intro {
    width: 140vh;
}

.conference .background-section {
    margin: 0;
    width: 185vh;

    -ms-flex-pack: start;
    justify-content: start;
}

.conference .background-intro {
    width: 166vh;
}

/*
@media (min-aspect-ratio: 15/8) {
    .conference .background-pillar-wrapper {
        filter: brightness(100%) !important;
    }

    .conference .background-section:first-child {
        width: 85vw;
    }

    .conference .background-section {
        width: 100vw;
    }
}

@media (max-aspect-ratio: 15/8) {

    .conference .background-pillar-wrapper {
        filter: brightness(1000%)  saturate(1000%) !important;
    }

    .conference .background-section:first-child {
        width: 165vh;
    }

    .conference .background-section {
        width: 188vh;
    }
}
*/

.section .inner {
    -ms-flex-negative: 0;
    flex-shrink: 0;

    display: -ms-flexbox;
    display: flex;

    -ms-flex-pack: center;
    justify-content: center;

    -ms-flex-align: center;
    align-items: center;

    z-index: 2;

    width: 100%;
    height: 100%;
}

.BIOsphere .section .inner,
.conference .section .inner {
    -ms-flex-pack: start;
    justify-content: start;
}

.section--large {
    width: 100vw;
    min-width: 860px;
}

.section--medium {
    width: 80vw;
    min-width: 640px;
}

.section--small {
    width: 60vw;
    min-width: 512px;
}

.section--spacer {
    width: 10vw;
}

.section--last {
    width: 50vw;
    pointer-events: none;
}

.conference .section--last {
    width: 50vw !important;
}

.section--audio {
    width: 70vw;
    width: min(70vw, 85vh);
    height: 100%;
}

.section--portrait {
    width: min(80vw, 95vh);
    height: 100%;
}

.section--pdf {
    width: min(60vw, 75vh);
    height: 100%;
}

.section--pause {
    width: 16rem;
}

.section--grid .inner {
    height: 100%;
}

.section--auto,
.section--ajax {
    width: auto;
}

.section--nohover {
    pointer-events: none;
}

.section-info .inner {
    width: 45vw;
    min-width: 786px;
}

.background-section p,
.section p {
    font-size: 1rem;
    padding-bottom: 0.8rem;
}

.section-info p {
    font-size: 1rem;
    padding-bottom: 0.8rem;
}

/* endregion */

/* region Lettering / Intro */

.lettering-wrapper {
    width: 100vh;
    min-width: 100vw;
    height: 100%;
}

.lettering {
    background-position: top;
    background-repeat: no-repeat;
    background-size: contain;

    margin: 8rem auto 0;

    width: 60%;
    height: 80%;

    max-width: 2304px;
    max-width: 60vh !important;
}

.BIOsphere .lettering {
    background-image: url('/img/Schriftzuege/BIOsphere_2304.png')
}

.ByzANTian_TRAces .lettering {
    background-image: url('/img/Schriftzuege/ByzANTianTRAces_2304.png')
}

.CHAmber_of_CHAnts .lettering {
    background-image: url('/img/Schriftzuege/CHAmberofCHAnts_2304.png')
}

.CONstantINOPLE_CONventION .lettering {
    background-image: url('/img/Schriftzuege/CONstantiNOPLE_2304.png')
}

.CompoSTing_FuTureS .lettering {
    background-image: url('/img/Schriftzuege/CompoSTing_2304.png')
}

.HERstories .lettering {
    background-image: url('/img/Schriftzuege/HERstories_2304.png')
}

.FACing_KASsiaS_FACes .lettering {
    background-image: url('/img/Schriftzuege/FACingKASsiaSFACes_2304.png')
}

.FEMinist_FUTure_PRActiseS .lettering {
    background-image: url('/img/Schriftzuege/FEMinistFUTurePRActiseS_2304.png')
}

.PoeTREEs .lettering {
    background-image: url('/img/Schriftzuege/PoeTREEs_2304.png')
}

.IcosmNOclasm .lettering {
    background-image: url('/img/Schriftzuege/icosmNOclasm_2304.png')
}

.M_OTher-T_ONgues .lettering {
    background-image: url('/img/Schriftzuege/M_OTherT_ONgues_2304.png')
}

.SPACing_SILenCe .lettering {
    background-image: url('/img/Schriftzuege/SPAcingSILenCe_2304.png')
}

@media (max-width: 2560px) or (max-height: 1600px) {
    .lettering {
        max-width: 1536px;
    }

    .BIOsphere .lettering {
        background-image: url('/img/Schriftzuege/BIOsphere_1536.png')
    }

    .CONstantINOPLE_CONventION .lettering {
        background-image: url('/img/Schriftzuege/CONstantiNOPLE_1536.png')
    }

    .CompoSTing_FuTureS .lettering {
        background-image: url('/img/Schriftzuege/CompoSTing_1536.png')
    }

    .HERstories .lettering {
        background-image: url('/img/Schriftzuege/HERstories_1536.png')
    }

    .PoeTREEs .lettering {
        background-image: url('/img/Schriftzuege/PoeTREEs_1536.png')
    }

    .IcosmNOclasm .lettering {
        background-image: url('/img/Schriftzuege/icosmNOclasm_1536.png')
    }

    .ByzANTian_TRAces .lettering {
        background-image: url('/img/Schriftzuege/ByzANTianTRAces_1536.png')
    }

    .CHAmber_of_CHAnts .lettering {
        background-image: url('/img/Schriftzuege/CHAmberofCHAnts_1536.png')
    }

    .FACing_KASsiaS_FACes .lettering {
        background-image: url('/img/Schriftzuege/FACingKASsiaSFACes_1536.png')
    }

    .FEMinist_FUTure_PRActiseS .lettering {
        background-image: url('/img/Schriftzuege/FEMinistFUTurePRActiseS_1536.png')
    }

    .M_OTher-T_ONgues .lettering {
        background-image: url('/img/Schriftzuege/M_OTherT_ONgues_1536.png')
    }

    .SPACing_SILenCe .lettering {
        background-image: url('/img/Schriftzuege/SPAcingSILenCe_1536.png')
    }
}

@media (max-width: 1920px) or (max-height: 1200px) {
    .lettering {
        max-width: 1152px;
    }

    .BIOsphere .lettering {
        background-image: url('/img/Schriftzuege/BIOsphere_1152.png')
    }

    .CONstantINOPLE_CONventION .lettering {
        background-image: url('/img/Schriftzuege/CONstantiNOPLE_1152.png')
    }

    .CompoSTing_FuTureS .lettering {
        background-image: url('/img/Schriftzuege/CompoSTing_1152.png')
    }

    .HERstories .lettering {
        background-image: url('/img/Schriftzuege/HERstories_1152.png')
    }

    .PoeTREEs .lettering {
        background-image: url('/img/Schriftzuege/PoeTREEs_1152.png')
    }

    .IcosmNOclasm .lettering {
        background-image: url('/img/Schriftzuege/icosmNOclasm_1152.png')
    }

    .ByzANTian_TRAces .lettering {
        background-image: url('/img/Schriftzuege/ByzANTianTRAces_1152.png')
    }

    .CHAmber_of_CHAnts .lettering {
        background-image: url('/img/Schriftzuege/CHAmberofCHAnts_1152.png')
    }

    .FACing_KASsiaS_FACes .lettering {
        background-image: url('/img/Schriftzuege/FACingKASsiaSFACes_1152.png')
    }

    .FEMinist_FUTure_PRActiseS .lettering {
        background-image: url('/img/Schriftzuege/FEMinistFUTurePRActiseS_1152.png')
    }

    .M_OTher-T_ONgues .lettering {
        background-image: url('/img/Schriftzuege/M_OTherT_ONgues_1152.png')
    }

    .SPACing_SILenCe .lettering {
        background-image: url('/img/Schriftzuege/SPAcingSILenCe_1152.png')
    }
}

@media (max-width: 1280px) or (max-height: 800px) {
    .lettering {
        max-width: 768px;
    }

    .BIOsphere .lettering {
        background-image: url('/img/Schriftzuege/BIOsphere_768.png')
    }

    .CONstantINOPLE_CONventION .lettering {
        background-image: url('/img/Schriftzuege/CONstantiNOPLE_768.png')
    }

    .CompoSTing_FuTureS .lettering {
        background-image: url('/img/Schriftzuege/CompoSTing_768.png')
    }

    .HERstories .lettering {
        background-image: url('/img/Schriftzuege/HERstories_768.png')
    }

    .PoeTREEs .lettering {
        background-image: url('/img/Schriftzuege/PoeTREEs_768.png')
    }

    .IcosmNOclasm .lettering {
        background-image: url('/img/Schriftzuege/icosmNOclasm_768.png')
    }

    .ByzANTian_TRAces .lettering {
        background-image: url('/img/Schriftzuege/ByzANTianTRAces_768.png')
    }

    .CHAmber_of_CHAnts .lettering {
        background-image: url('/img/Schriftzuege/CHAmberofCHAnts_768.png')
    }

    .FACing_KASsiaS_FACes .lettering {
        background-image: url('/img/Schriftzuege/FACingKASsiaSFACes_768.png')
    }

    .FEMinist_FUTure_PRActiseS .lettering {
        background-image: url('/img/Schriftzuege/FEMinistFUTurePRActiseS_768.png')
    }

    .M_OTher-T_ONgues .lettering {
        background-image: url('/img/Schriftzuege/M_OTherT_ONgues_768.png')
    }

    .SPACing_SILenCe .lettering {
        background-image: url('/img/Schriftzuege/SPAcingSILenCe_768.png')
    }
}

/* endregion */

/* region Interact Here */

.interact-here {
    background: url("../img/Click-here.svg") no-repeat;
}

.touch .interact-here {
    background: url("../img/Tap-here.svg") no-repeat;
}

.interact-here {
    pointer-events: none;
    position: absolute;
    top: 60%;
    left: 75%;

    height: 90%;
    width: 90%;
}

.IcosmNOclasm .interact-here {
    height: 60%;
    width: 60%;

    top: 60%;
}

.IcosmNOclasm .mirror-wrapper .interact-here {
    height: 50%;
    width: 50%;
}

.ByzANTian_TRAces .interact-here {
    height: 60%;
    width: 60%;

    top: 60%;
    left: 85%;
}

.BIOsphere .interact-here {
    height: 50%;
    width: 50%;

    top: 60%;
    left: 75%;
}

.BIOsphere .door-desk .interact-here {
    top: 60%;
    left: 50%;
}


.FACing_KASsiaS_FACes .interact-here {
    height: 30%;
    width: 30%;

    top: 40%;
    left: 55%;
}

.conference .interact-here {
    top: 30%;
    left: 85%;
}

.audioroom .interact-here {
    height: 30%;
    width: 30%;

    top: 55%;
    left: 70%;
}

/* endregion */

/* region SVG */

.svg-defs {
    width: 0 !important;
    height: 0 !important;
    visibility: hidden;
}

.svg-wrapper {

}

.vivus-wrapper {

}

.vivus-wrapper {
    fill: none;
    stroke: #fff;
    stroke-linejoin: round;
    stroke-linecap: round;
}

/* endregion */

/* region Grid */

.grid-wrapper {
    height: 100%;
    overflow: visible;
    font-size: min(1vh, 2vw);
}

.grid {
    padding: 10em 24em 0;

    display: grid;
    grid-auto-flow: column;

    row-gap: 15em;
    column-gap: 15em;

    grid-auto-columns: 25em;
    grid-template-rows: 27em 27em;
}

.grid-videos {
    padding-left: 25em;
    padding-right: 25em;

    row-gap: 25em;
    column-gap: 25em;

    padding-top: 5em;
}

.grid .video-wrapper {
    padding: 0;

    height: 40vh;
    position: relative;
}

.grid .video-wrapper video {
    margin: 0;
    top: 0;
    max-width: 100%;
    z-index: 1;

    display: block;
    height: auto;
    max-height: 35vh;
}

.grid .video-wrapper a {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 2;
    top: 0;
}
/* endregion */

/* region Doors */

.door-ajax {
    display: flex;
}

.door-open-wrapper {
    height: 100%;
}

.mirror-wrapper,
.door-wrapper {
    height: 100% !important;
    width: 100%;

    display: block;
    position: relative;
}

.mirror,
.door {
    margin-top: auto;

    display: block;
    bottom: 12vh;
    position: absolute;
}

.conference .door {
    bottom: 10vh;
}

.door-exit {
    background-repeat: no-repeat;
    background-position: bottom;
    width: 901px;
    height: 1827px;
    min-height: auto;
}

.exit_tuer_02 {
    background-image: url('/img/Tueren/EXIT_Tuer2_1827.png');
}

@media (max-width: 2560px) or (max-height: 1600px) {
    .door-exit {
        width: 601px;
        height: 1218px;
    }

    .exit_tuer_02 {
        background-image: url('/img/Tueren/EXIT_Tuer2_1218.png');
    }
}

@media (max-width: 1920px) or (max-height: 1200px) {
    .door-exit {
        width: 451px;
        height: 913px;
    }

    .exit_tuer_02 {
        background-image: url('/img/Tueren/EXIT_Tuer2_913.png');
    }
}

@media (max-width: 1280px) or (max-height: 800px) {
    .door-exit {
        width: 301px;
        height: 609px;
    }

    .exit_tuer_02 {
        background-image: url('/img/Tueren/EXIT_Tuer2_609.png');
    }
}

.door .sprite {
    margin-top: auto;

    min-height: 2048px;
    height: 2048px;
    width: 1010px;

    background-repeat: no-repeat;

    pointer-events: none;
}

.exit-door .sprite {
    background: url('/img/Tueren/Exit_Tuer_Spritesheet_horizontal_1010px_.png') 0 0%;
}

.kammertuer_01 .sprite {
    background: url('/img/Tueren/spritesheet_kammertuer_01.png') 0 0%;
}

.mirror-wrapper,
.mirror,
.door-wrapper,
.door {
    width: 1010px;
    height: 1827px;
}

.mirror .sprite,
.door .sprite {
    width: 100%;
    height: 100%;
}

.door-desk {
    width: 1119px;
    height: 1661px;
}

.mirror {
    display: block;
}

.mirror .sprite {
    margin-top: auto;
    background-repeat: no-repeat;
    background-image: url('/img/IcosmNOclasm/Mirror/Spiegel_1827.png')
}

.door-desk .sprite {
    background-image: url('/img/BIOsphere/Desk/Schreibpult_1661_.png');
}

.door_01 .sprite {
    background-image: url('/img/Tueren/KammerTuer_1-Offen_SPRITESHEET_1827.png')
}

.door_02 .sprite {
    background-image: url('/img/Tueren/KammerTuer_2-Offen_SPRITESHEET_1827.png')
}

.door_03 .sprite {
    background-image: url('/img/Tueren/KammerTuer_3-Offen_SPRITESHEET_1827.png')
}

.door_04 .sprite {
    background-image: url('/img/Tueren/KammerTuer_6-Offen_SPRITESHEET_1827.png')
}

.door_05 .sprite {
    background-image: url('/img/Tueren/KammerTuer_7-Offen_SPRITESHEET_1827.png')
}

.door_06 .sprite {
    background-image: url('/img/Tueren/KammerTuer_8-Offen_SPRITESHEET_1827.png')
}

.door_07 .sprite {
    background-image: url('/img/Tueren/KammerTuer_9-Offen_SPRITESHEET_1827.png')
}

.door_08 .sprite {
    background-image: url('/img/Tueren/KammerTuer_10-Offen_SPRITESHEET_1827.png')
}

.door_09 .sprite {
    background-image: url('/img/Tueren/KammerTuer_11-Offen_SPRITESHEET_1827.png')
}

.door_10 .sprite {
    background-image: url('/img/Tueren/KammerTuer_12-Offen_SPRITESHEET_1827.png')
}

.door_11 .sprite {
    background-image: url('/img/Tueren/KammerTuer_13-Offen_SPRITESHEET_1827.png')
}

.door_12 .sprite {
    background-image: url('/img/Tueren/KammerTuer_14-Offen_SPRITESHEET_1827.png')
}

.door_13 .sprite {
    background-image: url('/img/Tueren/KammerTuer_15-Offen_SPRITESHEET_1827.png')
}

.door_14 .sprite {
    background-image: url('/img/Tueren/KammerTuer_16-Offen_SPRITESHEET_1827.png')
}

@media (max-width: 2560px) or (max-height: 1600px) {
    .mirror-wrapper,
    .mirror,
    .door-wrapper,
    .door {
        width: 673.2857142857143px;
        height: 1218px;
    }

    .door-desk {
        width: 746px;
        height: 1107px;
    }

    .mirror .sprite {
        background-image: url('/img/IcosmNOclasm/Mirror/Spiegel_1218.png')
    }

    .door-desk .sprite {
        background-image: url('/img/BIOsphere/Desk/Schreibpult_1107_.png');
    }

    .door_01 .sprite {
        background-image: url('/img/Tueren/KammerTuer_1-Offen_SPRITESHEET_1218.png')
    }

    .door_02 .sprite {
        background-image: url('/img/Tueren/KammerTuer_2-Offen_SPRITESHEET_1218.png')
    }

    .door_03 .sprite {
        background-image: url('/img/Tueren/KammerTuer_3-Offen_SPRITESHEET_1218.png')
    }

    .door_04 .sprite {
        background-image: url('/img/Tueren/KammerTuer_6-Offen_SPRITESHEET_1218.png')
    }

    .door_05 .sprite {
        background-image: url('/img/Tueren/KammerTuer_7-Offen_SPRITESHEET_1218.png')
    }

    .door_06 .sprite {
        background-image: url('/img/Tueren/KammerTuer_8-Offen_SPRITESHEET_1218.png')
    }

    .door_07 .sprite {
        background-image: url('/img/Tueren/KammerTuer_9-Offen_SPRITESHEET_1218.png')
    }

    .door_08 .sprite {
        background-image: url('/img/Tueren/KammerTuer_10-Offen_SPRITESHEET_1218.png')
    }

    .door_09 .sprite {
        background-image: url('/img/Tueren/KammerTuer_11-Offen_SPRITESHEET_1218.png')
    }

    .door_10 .sprite {
        background-image: url('/img/Tueren/KammerTuer_12-Offen_SPRITESHEET_1218.png')
    }

    .door_11 .sprite {
        background-image: url('/img/Tueren/KammerTuer_13-Offen_SPRITESHEET_1218.png')
    }

    .door_12 .sprite {
        background-image: url('/img/Tueren/KammerTuer_14-Offen_SPRITESHEET_1218.png')
    }

    .door_13 .sprite {
        background-image: url('/img/Tueren/KammerTuer_15-Offen_SPRITESHEET_1218.png')
    }

    .door_14 .sprite {
        background-image: url('/img/Tueren/KammerTuer_16-Offen_SPRITESHEET_1218.png')
    }
}

@media (max-width: 1920px) or (max-height: 1200px) {
    .mirror-wrapper,
    .mirror,
    .door-wrapper,
    .door {
        width: 504.7142857142857px;
        height: 913px;
    }

    .door-desk {
        width: 559px;
        height: 830px;
    }

    .mirror .sprite {
        background-image: url('/img/IcosmNOclasm/Mirror/Spiegel_913.png')
    }

    .door-desk .sprite {
        background-image: url('/img/BIOsphere/Desk/Schreibpult_830_.png');
    }

    .door_01 .sprite {
        background-image: url('/img/Tueren/KammerTuer_1-Offen_SPRITESHEET_913.png')
    }

    .door_02 .sprite {
        background-image: url('/img/Tueren/KammerTuer_2-Offen_SPRITESHEET_913.png')
    }

    .door_03 .sprite {
        background-image: url('/img/Tueren/KammerTuer_3-Offen_SPRITESHEET_913.png')
    }

    .door_04 .sprite {
        background-image: url('/img/Tueren/KammerTuer_6-Offen_SPRITESHEET_913.png')
    }

    .door_05 .sprite {
        background-image: url('/img/Tueren/KammerTuer_7-Offen_SPRITESHEET_913.png')
    }

    .door_06 .sprite {
        background-image: url('/img/Tueren/KammerTuer_8-Offen_SPRITESHEET_913.png')
    }

    .door_07 .sprite {
        background-image: url('/img/Tueren/KammerTuer_9-Offen_SPRITESHEET_913.png')
    }

    .door_08 .sprite {
        background-image: url('/img/Tueren/KammerTuer_10-Offen_SPRITESHEET_913.png')
    }

    .door_09 .sprite {
        background-image: url('/img/Tueren/KammerTuer_11-Offen_SPRITESHEET_913.png')
    }

    .door_10 .sprite {
        background-image: url('/img/Tueren/KammerTuer_12-Offen_SPRITESHEET_913.png')
    }

    .door_11 .sprite {
        background-image: url('/img/Tueren/KammerTuer_13-Offen_SPRITESHEET_913.png')
    }

    .door_12 .sprite {
        background-image: url('/img/Tueren/KammerTuer_14-Offen_SPRITESHEET_913.png')
    }

    .door_13 .sprite {
        background-image: url('/img/Tueren/KammerTuer_15-Offen_SPRITESHEET_913.png')
    }

    .door_14 .sprite {
        background-image: url('/img/Tueren/KammerTuer_16-Offen_SPRITESHEET_913.png')
    }
}

@media (max-width: 1280px) or (max-height: 800px) {
    .mirror-wrapper,
    .mirror,
    .door-wrapper,
    .door {
        width: 336.7142857142857px;
        height: 609px;
    }

    .door-desk {
        width: 372px;
        height: 553px;
    }

    .mirror .sprite {
        background-image: url('/img/IcosmNOclasm/Mirror/Spiegel_609.png')
    }

    .door-desk .sprite {
        background-image: url('/img/BIOsphere/Desk/Schreibpult_03_.png');
    }

    .door_01 .sprite {
        background-image: url('/img/Tueren/KammerTuer_1-Offen_SPRITESHEET_609.png')
    }

    .door_02 .sprite {
        background-image: url('/img/Tueren/KammerTuer_2-Offen_SPRITESHEET_609.png')
    }

    .door_03 .sprite {
        background-image: url('/img/Tueren/KammerTuer_3-Offen_SPRITESHEET_609.png')
    }

    .door_04 .sprite {
        background-image: url('/img/Tueren/KammerTuer_6-Offen_SPRITESHEET_609.png')
    }

    .door_05 .sprite {
        background-image: url('/img/Tueren/KammerTuer_7-Offen_SPRITESHEET_609.png')
    }

    .door_06 .sprite {
        background-image: url('/img/Tueren/KammerTuer_8-Offen_SPRITESHEET_609.png')
    }

    .door_07 .sprite {
        background-image: url('/img/Tueren/KammerTuer_9-Offen_SPRITESHEET_609.png')
    }

    .door_08 .sprite {
        background-image: url('/img/Tueren/KammerTuer_10-Offen_SPRITESHEET_609.png')
    }

    .door_09 .sprite {
        background-image: url('/img/Tueren/KammerTuer_11-Offen_SPRITESHEET_609.png')
    }

    .door_10 .sprite {
        background-image: url('/img/Tueren/KammerTuer_12-Offen_SPRITESHEET_609.png')
    }

    .door_11 .sprite {
        background-image: url('/img/Tueren/KammerTuer_13-Offen_SPRITESHEET_609.png')
    }

    .door_12 .sprite {
        background-image: url('/img/Tueren/KammerTuer_14-Offen_SPRITESHEET_609.png')
    }

    .door_13 .sprite {
        background-image: url('/img/Tueren/KammerTuer_15-Offen_SPRITESHEET_609.png')
    }

    .door_14 .sprite {
        background-image: url('/img/Tueren/KammerTuer_16-Offen_SPRITESHEET_609.png')
    }
}

/*
.door {
    transform: translate(0, -36%) scale(0.2);
    transform-origin: bottom;
}

@media (min-height: 614px) {
    .door { transform:  translate(0, -28%) scale(0.3); }
}

@media (min-height: 819px) {
    .door { transform:  translate(0, -24%) scale(0.4); }
}

@media (min-height: 1024px) {
    .door { transform:  translate(0, -20%) scale(0.5); }
}

@media (min-height: 1228px) {
    .door { transform:  translate(0, -16%) scale(0.6); }
}

@media (min-height: 1433px) {
    .door { transform:  translate(0, -12%) scale(0.7); }
}

@media (min-height: 1638px) {
    .door { transform: translate(0, -8%) scale(0.8); }
}

@media (min-height: 1843px) {
    .door { transform: translate(0, -4%) scale(0.9); }
}

@media (min-height: 2048px) {
    .door { transform: translate(0, 0) scale(1); }
}
*/
/* endregion */

/* region Kugelblitze */
.ball-wrapper .ball {
    display: block;
    width: 332px;
    height: 332px;
}

.ball-wrapper .sprite {
    width: 100%;
    height: 100%;

    background-image: url('/img/FEMinist_FUTure_PRActiseS/Kugelblitz/Kugelblitz_Spritesheet_332.png')
}

@media (max-width: 2560px) or (max-height: 1600px) {
    .ball-wrapper .ball {
        width: 221px;
        height: 221px;
    }

    .ball-wrapper .sprite {
        background-image: url('/img/FEMinist_FUTure_PRActiseS/Kugelblitz/Kugelblitz_Spritesheet_221.png')
    }
}

@media (max-width: 1920px) or (max-height: 1200px) {
    .ball-wrapper .ball {
        width: 166px;
        height: 166px;
    }

    .ball-wrapper .sprite {
        background-image: url('/img/FEMinist_FUTure_PRActiseS/Kugelblitz/Kugelblitz_Spritesheet_166.png')
    }
}

@media (max-width: 1280px) or (max-height: 800px) {
    .ball-wrapper .ball {
        width: 110px;
        height: 110px;
    }

    .ball-wrapper .sprite {
        background-image: url('/img/FEMinist_FUTure_PRActiseS/Kugelblitz/Kugelblitz_Spritesheet_110.png')
    }
}

/* endregion */

/* region Portraits */

.portrait-wrapper .portrait {
    display: block;
    width: 996px;
    height: 996px;
}

.portrait-wrapper .sprite {
    width: 100%;
    height: 100%;
}

@media (max-width: 2560px) or (max-height: 1600px) {
    .portrait-wrapper .portrait {
        width: 664px;
        height: 664px;
    }
}

@media (max-width: 1920px) or (max-height: 1200px) {
    .portrait-wrapper .portrait {
        width: 498px;
        height: 498px;
    }
}

@media (max-width: 1280px) or (max-height: 800px) {
    .portrait-wrapper .portrait {
        width: 332px;
        height: 332px;
    }
}

.portrait_00 .sprite {
    background-image: url('/img/FEMinist_FUTure_PRActiseS/Portraits/01_Interviews_Spritesheet_996.png')
}

.portrait_01 .sprite {
    background-image: url('/img/FEMinist_FUTure_PRActiseS/Portraits/Agata_Spritesheet_996.png')
}

.portrait_02 .sprite {
    background-image: url('/img/FEMinist_FUTure_PRActiseS/Portraits/Anna_Spritesheet_996.png')
}

.portrait_03 .sprite {
    background-image: url('/img/FEMinist_FUTure_PRActiseS/Portraits/Dominika_Spritesheet_996.png')
}

.portrait_04 .sprite {
    background-image: url('/img/FEMinist_FUTure_PRActiseS/Portraits/Iza_Spritesheet_996.png')
}

.portrait_05 .sprite {
    background-image: url('/img/FEMinist_FUTure_PRActiseS/Portraits/KasiaS_Spritesheet_996.png')
}

.portrait_06 .sprite {
    background-image: url('/img/FEMinist_FUTure_PRActiseS/Portraits/Lucja_Spritesheet_996.png')
}

.portrait_07 .sprite {
    background-image: url('/img/FEMinist_FUTure_PRActiseS/Portraits/Marta_Spritesheet_996.png')
}

.portrait_08 .sprite {
    background-image: url('/img/FEMinist_FUTure_PRActiseS/Portraits/Monika_Spritesheet_996.png')
}

.portrait_09 .sprite {
    background-image: url('/img/FEMinist_FUTure_PRActiseS/Portraits/Roz_Spritesheet_996.png')
}

.portrait_10 .sprite {
    background-image: url('/img/FEMinist_FUTure_PRActiseS/Portraits/Zegluga_Spritesheet_996.png')
}

.portrait_11 .sprite {
    background-image: url('/img/FEMinist_FUTure_PRActiseS/Portraits/Zuzanna_Spritesheet_996.png')
}

@media (max-width: 2560px) or (max-height: 1600px) {
    .portrait_00 .sprite {
        background-image: url('/img/FEMinist_FUTure_PRActiseS/Portraits/01_Interviews_Spritesheet_664.png')
    }

    .portrait_01 .sprite {
        background-image: url('/img/FEMinist_FUTure_PRActiseS/Portraits/Agata_Spritesheet_664.png')
    }

    .portrait_02 .sprite {
        background-image: url('/img/FEMinist_FUTure_PRActiseS/Portraits/Anna_Spritesheet_664.png')
    }

    .portrait_03 .sprite {
        background-image: url('/img/FEMinist_FUTure_PRActiseS/Portraits/Dominika_Spritesheet_664.png')
    }

    .portrait_04 .sprite {
        background-image: url('/img/FEMinist_FUTure_PRActiseS/Portraits/Iza_Spritesheet_664.png')
    }

    .portrait_05 .sprite {
        background-image: url('/img/FEMinist_FUTure_PRActiseS/Portraits/KasiaS_Spritesheet_664.png')
    }

    .portrait_06 .sprite {
        background-image: url('/img/FEMinist_FUTure_PRActiseS/Portraits/Lucja_Spritesheet_664.png')
    }

    .portrait_07 .sprite {
        background-image: url('/img/FEMinist_FUTure_PRActiseS/Portraits/Marta_Spritesheet_664.png')
    }

    .portrait_08 .sprite {
        background-image: url('/img/FEMinist_FUTure_PRActiseS/Portraits/Monika_Spritesheet_664.png')
    }

    .portrait_09 .sprite {
        background-image: url('/img/FEMinist_FUTure_PRActiseS/Portraits/Roz_Spritesheet_664.png')
    }

    .portrait_10 .sprite {
        background-image: url('/img/FEMinist_FUTure_PRActiseS/Portraits/Zegluga_Spritesheet_664.png')
    }

    .portrait_11 .sprite {
        background-image: url('/img/FEMinist_FUTure_PRActiseS/Portraits/Zuzanna_Spritesheet_664.png')
    }
}

@media (max-width: 1920px) or (max-height: 1200px) {
    .portrait_00 .sprite {
        background-image: url('/img/FEMinist_FUTure_PRActiseS/Portraits/01_Interviews_Spritesheet_498.png')
    }

    .portrait_01 .sprite {
        background-image: url('/img/FEMinist_FUTure_PRActiseS/Portraits/Agata_Spritesheet_498.png')
    }

    .portrait_02 .sprite {
        background-image: url('/img/FEMinist_FUTure_PRActiseS/Portraits/Anna_Spritesheet_498.png')
    }

    .portrait_03 .sprite {
        background-image: url('/img/FEMinist_FUTure_PRActiseS/Portraits/Dominika_Spritesheet_498.png')
    }

    .portrait_04 .sprite {
        background-image: url('/img/FEMinist_FUTure_PRActiseS/Portraits/Iza_Spritesheet_498.png')
    }

    .portrait_05 .sprite {
        background-image: url('/img/FEMinist_FUTure_PRActiseS/Portraits/KasiaS_Spritesheet_498.png')
    }

    .portrait_06 .sprite {
        background-image: url('/img/FEMinist_FUTure_PRActiseS/Portraits/Lucja_Spritesheet_498.png')
    }

    .portrait_07 .sprite {
        background-image: url('/img/FEMinist_FUTure_PRActiseS/Portraits/Marta_Spritesheet_498.png')
    }

    .portrait_08 .sprite {
        background-image: url('/img/FEMinist_FUTure_PRActiseS/Portraits/Monika_Spritesheet_498.png')
    }

    .portrait_09 .sprite {
        background-image: url('/img/FEMinist_FUTure_PRActiseS/Portraits/Roz_Spritesheet_498.png')
    }

    .portrait_10 .sprite {
        background-image: url('/img/FEMinist_FUTure_PRActiseS/Portraits/Zegluga_Spritesheet_498.png')
    }

    .portrait_11 .sprite {
        background-image: url('/img/FEMinist_FUTure_PRActiseS/Portraits/Zuzanna_Spritesheet_498.png')
    }
}

@media (max-width: 1280px) or (max-height: 800px) {
    .portrait_00 .sprite {
        background-image: url('/img/FEMinist_FUTure_PRActiseS/Portraits/01_Interviews_Spritesheet_332.png')
    }

    .portrait_01 .sprite {
        background-image: url('/img/FEMinist_FUTure_PRActiseS/Portraits/Agata_Spritesheet_332.png')
    }

    .portrait_02 .sprite {
        background-image: url('/img/FEMinist_FUTure_PRActiseS/Portraits/Anna_Spritesheet_332.png')
    }

    .portrait_03 .sprite {
        background-image: url('/img/FEMinist_FUTure_PRActiseS/Portraits/Dominika_Spritesheet_332.png')
    }

    .portrait_04 .sprite {
        background-image: url('/img/FEMinist_FUTure_PRActiseS/Portraits/Iza_Spritesheet_332.png')
    }

    .portrait_05 .sprite {
        background-image: url('/img/FEMinist_FUTure_PRActiseS/Portraits/KasiaS_Spritesheet_332.png')
    }

    .portrait_06 .sprite {
        background-image: url('/img/FEMinist_FUTure_PRActiseS/Portraits/Lucja_Spritesheet_332.png')
    }

    .portrait_07 .sprite {
        background-image: url('/img/FEMinist_FUTure_PRActiseS/Portraits/Marta_Spritesheet_332.png')
    }

    .portrait_08 .sprite {
        background-image: url('/img/FEMinist_FUTure_PRActiseS/Portraits/Monika_Spritesheet_332.png')
    }

    .portrait_09 .sprite {
        background-image: url('/img/FEMinist_FUTure_PRActiseS/Portraits/Roz_Spritesheet_332.png')
    }

    .portrait_10 .sprite {
        background-image: url('/img/FEMinist_FUTure_PRActiseS/Portraits/Zegluga_Spritesheet_332.png')
    }

    .portrait_11 .sprite {
        background-image: url('/img/FEMinist_FUTure_PRActiseS/Portraits/Zuzanna_Spritesheet_332.png')
    }
}
/* endregion */

/* region Form */
.form-overlay h2 {
    color: #fff;
    font-size: 1.25rem;
    line-height: 4rem;
}

textarea {
    resize: none;
}

.btn-wrapper {
    height: 5rem;
    padding: 1rem 0 0;
    margin: 0;
}

.btn-wrapper button {
    float: right;

    font-size: 1.5rem;
    font-weight: bold;
}

.field-wrapper label {
    display: block;
    float: left;
    width: 10%;
}

.field-wrapper textarea {
    height: 100%;
    width: 100%;
    padding: 1rem 1rem 0;
}

.field-wrapper input {
    height: 4rem;
}

.form-overlay .form {
    display: block;
    height: 100%;
}

.form-grid {
    display: grid;
    height: 100%;
    padding-bottom: 4rem;
    grid-template-rows: auto auto 1fr auto;
}

.form-grid p {
    color: #fff;
    line-height: 2rem;
}

.field-wrapper textarea,
.field-wrapper input {
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-bottom: 1rem;
}

button.block {
    border: none;
    margin: 0;
    padding: 0;
    overflow: visible;

    background: #df8061;
    color: #fff;
    padding-left: 2rem;
    padding-right: 2rem;

    width: auto;
}

button.block::-moz-focus-inner {
    border: 0;
    padding: 0;
}

button.block:hover {
    background: #666;
}

.form-overlay.error form,
.form-overlay.success form {
    display: none;
}

.form-overlay .info,
.form-overlay .ok {
    display: none;
    color: #fff;
}

.form-overlay.error .info {
    display: block;
}

.form-overlay.success .ok {
    display: block;
}

.form-overlay.error .middle {
    /*background: red;*/
}

.form-overlay.success .middle {
    /*background: greenyellow;*/
}

/* endregion */

/* region Desks */

.desk-wrapper {
    height: 100%;
    position: relative;

    display: flex;
    flex-direction: column;
}

.desk {
    position: relative;
    margin-top: auto;

    display: block;
    background-repeat: no-repeat;
    background-position: center;
}

.desk .vivus-wrapper {
    position: absolute;
    bottom: 0;

    width: 100%;
    max-width: 75vw;

    height: 100%;

    overflow: visible;
}

.desk svg {
    position: absolute;

    min-width: 200%;
    width: 200%;
    max-width: 100vw;

    height: 100%;
    max-height: 75vh;

    bottom: 100%;
    left: 50%;

    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

.desk .vivus-wrapper {
    display: none;
}

.desk.active .vivus-wrapper,
.desk:hover .vivus-wrapper {
    display: block;
}

.png-wrapper {
    /*max-width: 75vw;*/

    position: absolute;
    bottom: 2%;
    left: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    pointer-events: none;
}

.png-mask {

    overflow: hidden;
    mask-image: radial-gradient(ellipse 0% 0% at center, black 25%, transparent 60%);
}

.png-wrapper,
.png-mask {
    width: 2437px;
    height: 1827px;
}

.png-wrapper img {
    width: 100%;
    /*max-width: 100vw;*/
    height: auto;
}

.png-wrapper {
    left: 50%;
    margin-left: -1218px;
}

@media (max-width: 2560px) or (max-height: 1600px) {
    .png-wrapper,
    .png-mask {
        width: 1625px;
        height: 1218px;
    }

    .png-wrapper {
        margin-left: -812px;
    }
}

@media (max-width: 1920px) or (max-height: 1200px) {
    .png-wrapper,
    .png-mask {
        width: 1218px;
        height: 913px;
    }

    .png-wrapper {
        margin-left: -609px;
    }
}

@media (max-width: 1280px) or (max-height: 800px) {
    .png-wrapper,
    .png-mask {
        width: 812px;
        height: 609px;
    }

    .png-wrapper {
        margin-left: -406px;
    }
}

.section--doors {
    width: 85vh;
    min-width: 85vw;
}

.section--doors .inner {
    height: 100%;
    width: 100%;

    display: flex;
    justify-content: center;
}

.section--desks .inner {
    width: 50%;
    align-items: end;
}

.desk {
    width: 600px;
    height: 996px;

    max-height: 44vh;
    bottom: 1.3%;

    background-position: bottom;
    background-size: contain;
}

.desk-wrapper {
    width: 600px;
}

.desk_01 {
    background-image: url('/img/Pulte/996_Pult02.png')
}

.desk_02 {
    background-image: url('/img/Pulte/996_Pult04.png')
}

.desk_03 {
    background-image: url('/img/Pulte/996_Pult_rechts_01_.png')
}

.desk_04 {
    background-image: url('/img/Pulte/996_Pult_rechts_02.png')
}

.desk_05 {
    background-image: url('/img/Pulte/996_Pult_rechts_03.png')
}

.desk_06 {
    background-image: url('/img/Pulte/996_Pult_rechts_04.png')
}

.desk_07 {
    background-image: url('/img/Pulte/996__Pult01.png')
}

.desk_08 {
    background-image: url('/img/Pulte/996__Pult03.png')
}

@media (max-width: 2560px) or (max-height: 1600px) {
    .desk {
        width: 400px;
        height: 664px;
    }

    .desk-wrapper {
        width: 400px;
    }

    .desk_01 {
        background-image: url('/img/Pulte/664_Pult01.png')
    }

    .desk_02 {
        background-image: url('/img/Pulte/664_Pult02.png')
    }

    .desk_03 {
        background-image: url('/img/Pulte/664_Pult03.png')
    }

    .desk_04 {
        background-image: url('/img/Pulte/664_Pult04.png')
    }

    .desk_05 {
        background-image: url('/img/Pulte/664_Pult_rechts_01_.png')
    }

    .desk_06 {
        background-image: url('/img/Pulte/664_Pult_rechts_02.png')
    }

    .desk_07 {
        background-image: url('/img/Pulte/664_Pult_rechts_03.png')
    }

    .desk_08 {
        background-image: url('/img/Pulte/664_Pult_rechts_04.png')
    }
}

@media (max-width: 1920px) or (max-height: 1200px) {
    .desk {
        width: 300px;
        height: 498px;
    }

    .desk-wrapper {
        width: 300px;
    }

    .desk_01 {
        background-image: url('/img/Pulte/498_Pult01_.png')
    }

    .desk_02 {
        background-image: url('/img/Pulte/498_Pult02.png')
    }

    .desk_03 {
        background-image: url('/img/Pulte/498_Pult03.png')
    }

    .desk_04 {
        background-image: url('/img/Pulte/498_Pult04.png')
    }

    .desk_05 {
        background-image: url('/img/Pulte/498_Pult_rechts_01_.png')
    }

    .desk_06 {
        background-image: url('/img/Pulte/498_Pult_rechts_02_.png')
    }

    .desk_07 {
        background-image: url('/img/Pulte/498_Pult_rechts_03_.png')
    }

    .desk_08 {
        background-image: url('/img/Pulte/498_Pult_rechts_04_.png')
    }
}

@media (max-width: 1280px) or (max-height: 800px) {
    .desk {
        width: 200px;
        height: 332px;
    }

    .desk-wrapper {
        width: 200px;
    }

    .desk_01 {
        background-image: url('/img/Pulte/332_Pult01.png')
    }

    .desk_02 {
        background-image: url('/img/Pulte/332_Pult02.png')
    }

    .desk_03 {
        background-image: url('/img/Pulte/332_Pult03.png')
    }

    .desk_04 {
        background-image: url('/img/Pulte/332_Pult04.png')
    }

    .desk_05 {
        background-image: url('/img/Pulte/332_Pult_rechts_01_.png')
    }

    .desk_06 {
        background-image: url('/img/Pulte/332_Pult_rechts_02_.png')
    }

    .desk_07 {
        background-image: url('/img/Pulte/332_Pult_rechts_03.png')
    }

    .desk_08 {
        background-image: url('/img/Pulte/332_Pult_rechts_04.png')
    }
}

/*
@media (max-width: 1536px) or (max-height: 960px) {
.desk {
    transform: scale(0.6) translateY(200px);
}
}

@media (max-width: 1152px) or (max-height: 720px) {
.desk {
    transform: scale(0.5) translateY(220px);
}
}

@media (max-width: 768px) or (max-height: 480px) {
.desk {
    transform: scale(0.4) translateY(240px);
}
}
*/
/* endregion */

/* region Windows */

.ByzANTian_TRAces #content {
    pointer-events: none;
}

.ByzANTian_TRAces .background-intro {
    width: 140vh;
}

.section--window {
    width: 110vh;
}

.section--curtain {
    width: 118vh;
}

.window-wrapper {
    height: 100%;
    position: relative;

    display: flex;
    flex-direction: column;
}

.window {
    position: relative;
    margin-top: auto;

    display: block;
    background-repeat: no-repeat;
    background-position: center;
}

.window {
    width: 1005px;
    height: 1329px;
}

.window_01 {
    background-image: url('/img/Fenster/Fenster_1329_v1.png')
}

.window_02 {
    background-image: url('/img/Fenster/Fenster_1329_v2.png')
}

.window_03 {
    background-image: url('/img/Fenster/Fenster_1329_v3.png')
}

.window_04 {
    background-image: url('/img/Fenster/Fenster_1329_v4.png')
}

.window_05 {
    background-image: url('/img/Fenster/Fenster_1329_v5.png')
}

@media (max-width: 2560px) or (max-height: 1600px) {
    .window {
        width: 670px;
        height: 886px;
    }

    .window_01 {
        background-image: url('/img/Fenster/Fenster_886_v1.png')
    }

    .window_02 {
        background-image: url('/img/Fenster/Fenster_886_v2.png')
    }

    .window_03 {
        background-image: url('/img/Fenster/Fenster_886_v3.png')
    }

    .window_04 {
        background-image: url('/img/Fenster/Fenster_886_v4.png')
    }

    .window_05 {
        background-image: url('/img/Fenster/Fenster_886_v5.png')
    }
}

@media (max-width: 1920px) or (max-height: 1200px) {
    .window {
        width: 502px;
        height: 664px;
    }

    .window_01 {
        background-image: url('/img/Fenster/Fenster_664_v1.png')
    }

    .window_02 {
        background-image: url('/img/Fenster/Fenster_664_v2.png')
    }

    .window_03 {
        background-image: url('/img/Fenster/Fenster_664_v3.png')
    }

    .window_04 {
        background-image: url('/img/Fenster/Fenster_664_v4.png')
    }

    .window_05 {
        background-image: url('/img/Fenster/Fenster_664_v5.png')
    }
}

@media (max-width: 1280px) or (max-height: 800px) {
    .window {
        width: 335px;
        height: 443px;
    }

    .window_01 {
        background-image: url('/img/Fenster/Fenster_443_v1.png')
    }

    .window_02 {
        background-image: url('/img/Fenster/Fenster_443_v2.png')
    }

    .window_03 {
        background-image: url('/img/Fenster/Fenster_443_v3.png')
    }

    .window_04 {
        background-image: url('/img/Fenster/Fenster_443_v4.png')
    }

    .window_05 {
        background-image: url('/img/Fenster/Fenster_443_v5.png')
    }
}

/* endregion */

/* region Galerie Grid */

.grid-galerie img {
    width: auto;
    height: auto;
}

.grid .img-wrapper {
    padding-top: 3em;
    padding-left: 3em;
    position: relative;
    z-index: 2;
    min-width: 35vh;
}

.grid .img-wrapper img {
    max-height: 40vh;
}

.grid .img-wrapper:nth-child(even) {
    padding-top: 0;
    padding-left: 0;
}

.portrait img {
    padding: 0 21%;
}

.square img {
    padding: 0 9%;
}

/* endregion */

/* region PoeTREEs / Kunst / Gedichte */

.audio-structure {
    position: relative;
    width: 100%;
    height: 100%;

    display: flex;
    justify-content: center;
    align-content: center;
}

.audio-structure a {
    display: block;
    position: absolute;
    top: 0;

    /*max-width: 100%;*/
    width: 100%;
    height: auto;

    transition: all .2s;
}

.audio-structure img {
    width: 105%;
    max-width: 110%;
}

.audio-structure .plyr {
    position: absolute;
    top: 0;
    margin-top: 20vh;

    width: 100%;
    height: auto;

    overflow: visible;
}

.audio-structure .plyr__captions {
    font-family: 'Roboto Light', Arial, Helvetica Neue, Helvetica, sans-serif;
    letter-spacing: 0.035rem;
    font-size: 1.2rem;
    line-height: 1.4;

    overflow: visible;
}

.audio-structure .plyr--video,
.audio-structure .plyr__video-wrapper,
.audio-structure .plyr__poster {
    background: none !important;
}

.section--audio .plyr__controls,
.section--audio .plyr__control,
.section--audio .plyr__poster,
.section--audio button {
    display: none !important;
}

.audiocontrols,
.audio-structure a,
.audio-structure .plyr {
    opacity: 0.55;
}

.active .audiocontrols,
.active .audio-structure a,
.active .audio-structure .plyr {
    opacity: 1;
}

.odd .audio-structure {
    margin-top: -40%;
}

.even .audio-structure a {
    top: auto;
    bottom: 0;
}

.even .audio-structure {
    top: auto;
    bottom: 0;
    width: 90%;
}

@keyframes playing-back {
    0% {
        transform: scale(1, 1) rotate(0deg)
    }
    10% {
        transform: scale(0.9, 1.1) rotate(15deg)
    }
    30% {
        transform: scale(1.1, 0.9) rotate(30deg)
    }
    50% {
        transform: scale(1, 1) rotate(15deg)
    }
    70% {
        transform: scale(1.1, 0.9) rotate(0deg)
    }
    90% {
        transform: scale(0.9, 1.1) rotate(-15deg)
    }
    100% {
        transform: scale(1, 1) rotate(0deg)
    }
}

@keyframes playing-front {
    0% {
        transform: scale(1, 1) rotate(0deg)
    }
    10% {
        transform: scale(1.1, 0.9) rotate(-15deg)
    }
    30% {
        transform: scale(0.9, 1.1) rotate(-30deg)
    }
    50% {
        transform: scale(1, 1) rotate(-15deg)
    }
    70% {
        transform: scale(0.9, 1.1) rotate(0deg)
    }
    90% {
        transform: scale(1.1, 0.9) rotate(15deg)
    }
    100% {
        transform: scale(1, 1) rotate(0deg)
    }
}

.audio-structure .back,
.audio-structure .front {
    transition-property: all;
    transition-duration: .2s;
    transition-timing-function: linear;

    animation-duration: 12s;
    animation-iteration-count: infinite;
    animation-timing-function: ease;
    animation-play-state: paused;
}

.active .audio-structure .back,
.active .audio-structure .front {
    animation-play-state: running;
}

.audio-structure .back {
    animation-name: playing-back;
}

.audio-structure .front {
    animation-name: playing-front;
}

/* endregion */

.pause-icon {
    background: url("../img/Icons/Pause Icon.svg") no-repeat;
}

.close-icon {
    background: url("../img/Icons/x close icon.svg") no-repeat;
}

.map-icon {
    background: url("../img/Icons/map icon.svg") no-repeat;
}

.note-icon {
    background: url("../img/Icons/notes icon.svg") no-repeat;
}

.mushroom-icon {
    background: url("../img/Icons/mushroom icon.svg") no-repeat;
}

.questionmark-icon {
    background: url("../img/Icons/fragezeichen icon.svg") no-repeat;
    margin-left: 0.1rem;
}

.eye-icon {
    background: url("../img/Icons/eye open icon.svg") no-repeat;
    margin-left: 0.1rem;
    margin-top: 0.3rem;
}

.SPACing_SILenCe .a-silence .eye-icon,
a:hover .eye-icon {
    background: url("../img/Icons/eye closed icon.svg") no-repeat;
    margin-left: 0.1rem;
    margin-top: 0.3rem;
}

.block-w,
.block {
    width: 84px;
    width: 4rem;
}

.block-h,
.block {
    height: 84px;
    height: 4rem;
}

nav {
    position: fixed;
    top: 0;
    left: 0;
    font-size: 1.2rem;

    margin: 0;
    padding: 0;

    z-index: 2000;
    background: #414141;

    height: 100%;

    /*box-shadow: -0.2rem 0px 0px 0px #df8061;*/
    /*margin-left: 0.2rem;*/

    -webkit-box-shadow: 0px 0px 3rem 2rem rgba(0, 0, 0, 0.6);
    box-shadow: 0px 0px 3rem 2rem rgba(0, 0, 0, 0.6);

    width: 4rem;
}

nav ul {
    padding: 0;
    margin: 0;
}

nav li {
    list-style: none;
    box-shadow: 0 0.15rem 0 #393939;
    /*border-bottom: 0.15rem solid #393939;*/
}

.nav-bottom li {
    border-bottom: 0;
    box-shadow: 0 -0.15rem 0 #393939;
}

nav h1 {
    position: absolute;
    bottom: 8rem;

    writing-mode: vertical-rl;
    transform: rotate(180deg);
    line-height: 4rem;
    margin: 0;
    color: #df8061;

    font-size: 1.4rem;
    letter-spacing: 0.01rem;
}

@media (max-height: 45rem) {
    nav h1 {
        /*bottom: 5.5rem;*/
        font-size: 1.2rem;
        letter-spacing: 1px;
    }
}

@media (max-height: 39rem) {
    nav h1 {
        /*bottom: 5.25rem;*/
        font-size: 1rem;
        letter-spacing: 0;
    }
}

@media (max-height: 32rem) {
    nav h1 {
        /*bottom: 5rem;*/
        font-size: 0.8rem;
        letter-spacing: 0;
    }
}

@media (max-height: 28rem) {
    nav h1 {
        display: none
    }
}

.nav-bottom {
    position: absolute;
    bottom: 0;
}

nav a {
    padding: 0.4rem;
    display: block;
    position: relative;
}

.block .svg,
nav .svg {
    display: block;
    width: 100%;
    height: 100%;
}

.a-label {
    display: none;
    position: absolute;

    white-space: nowrap;

    color: #fff;
    letter-spacing: 0.02rem;
    font-size: 0.9rem;

    background: #444444;
    line-height: 1rem;
    padding: 0.3rem 0.6rem;
}

nav .a-label {
    left: 100%;
    bottom: 0;
}

.nav-bottom .a-label {
    bottom: auto;
    top: 0;
}

a.block:hover {
    background-color: #df8061;
}

.mushROOMunderGROUND .a-mushroom,
.SPACing_SILenCe .a-silence,
.About .a-about {
    background-color: #df8061;
}

.About .a-about .svg {
    filter: brightness(10);
}

.overlay a.close:hover {
    background-color: #414141;
}

.BIOsphere a.close,
.form-overlay a.close {
    background-color: #df8061;
}

.BIOsphere a.close:hover,
.form-overlay a.close:hover {
    background-color: #666;
}

.nav-bottom a.block:hover .svg {
    filter: brightness(10);
}

a.block:hover .a-label {
    display: block;
}

.nav-overlay-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    height: 70%;
    z-index: 1000;

    padding: 0;
    margin-bottom: 4rem;
}

.nav-overlay {
    position: absolute;
    top: 4rem;
    left: -100vw;
    height: 100%;
    width: 100vw;
    padding-bottom: 8rem;
    padding-right: 4rem;
}

.nav-inner {
    position: relative;
    background: #000;
    height: 100%;
    border: 0.3rem solid #414141;

    width: 100%;
    margin-right: 4rem;
    padding-left: 5rem;
}

.nav-close-link {
    position: absolute;
    top: 0.3rem;
    right: 0.3rem;
    height: 4rem;
    width: 4rem;
    z-index: 1000;
}

.nav-inner {
    box-sizing: border-box;
    display: table;
}

.nav-inner .left {
    height: 100%;
    width: 0;
    display: none;
    vertical-align: top;
}

.nav-inner .left p {
    font-weight: lighter;
}

.nav-inner .left h3 {
    margin-top: 3.7rem;
}

.nav-inner .right {
    position: relative;
    height: 100%;
    width: 100%;
    display: table-cell;
    vertical-align: top;

    padding-bottom: 3.7rem;
}

.map {
    width: 100%;
    height: 100%;
    background: url("../img/Grundriss_Map.svg") no-repeat;
    background-position: right bottom;
    background-size: contain;
}

.map-overlay {
    color: #df8061;
    position: absolute;
    top: 3.7rem;
    left: 0;
    width: 100%;
    height: 100%;

    pointer-events: none;
}

.map-overlay h4,
.map-overlay h3 {
    line-height: 1.75;
}

.map-overlay h3 {
    font-weight: bold;
}

.map-overlay h4 {
    font-weight: normal;
}

.map-item {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}

.map-item p {
    white-space: pre-line;
}

.map-overlay .visible {
    display: block;
}

@media (min-aspect-ratio: 3/3) {
    .nav-overlay-wrapper {
        height: 80%;
    }

    .nav-inner {
        /*background: red;*/
    }
}

@media (min-aspect-ratio: 4/3) {
    .nav-overlay-wrapper {
        height: 90%;
    }

    .nav-inner .left {
        width: 22%;
        padding-right: 2rem;
        display: table-cell;
    }

    .nav-inner .right {
        width: 78%;
    }

    .nav-inner {
        /*background: green;*/
    }
}

@media (min-aspect-ratio: 5/3) {
    .nav-overlay-wrapper {
        height: 100%;
    }

    .nav-inner {
        /*background: blue;*/
    }
}

.nav-inner .right {
    position: relative;
}

.nav-inner .right svg {
    position: absolute;
    bottom: 5%;
    right: 0;

    height: 95%;
    width: auto;
}

#map .left,
#map .left a {
    color: #414141;
}

#map .left a {
    padding: 0;
}

#map .left h3 {
    color: #df8061;
    font-size: 3rem;
}

#map .right a circle {
    stroke: #df8061;
    fill: transparent;
}

#map .right a:hover circle {
    fill: white !important;
}

.HERstories .HERstories circle,
.CONstantINOPLE_CONventION .CONstantINOPLE_CONventION circle,
.CompoSTing_FuTureS .CompoSTing_FuTureS circle,
.M_OTher-T_ONgues .M_OTher_T_ONgues circle,
.PoeTREEs .PoeTREEs circle,
.IcosmNOclasm .IcosmNOclasm circle,
.BIOsphere .BIOsphere circle,
.FEMinist_FUTure_PRActiseS .FEMinist_FUTure_PRActiseS circle,
.ByzANTian_TRAces .ByzANTian_TRAces_ circle,
.FACing_KASsiaS_FACes .FACing_KASsiaS_FACes circle,
.CHAmber_of_CHAnts .CHAmber_of_CHAnts circle,
.SPACing_SILenCe .SPACing_SILenCe circle,
.mushROOMunderGROUND .mushROOMunderGROUND circle {
    fill: #df8061 !important;
}
/* region Audioplayer */

.waveform-wrapper {

}

.waveform-wrapper .block-wrapper {
    width: 4rem;
    float: left;
}

.waveform-wrapper .block {
    display: block;
}

#play-intro .svg,
.waveform-wrapper .svg {
    display: block;
    width: 100%;
    height: 100%;
    background: url("../img/Icons/play icon.svg") no-repeat;
}

#play-intro .svg {
    width: 50%;
    height: 100%;
    margin: 0 auto;
    background-position: center;
}

.playing .svg {
    background: url("../img/Icons/Pause Icon.svg") no-repeat;
    background-position: center;
    background-size: 75%;
}

.waveform {
    margin-left: 4rem;
    width: 16rem;
}

/* endregion Audioplayer */


/* region Intro */

#play-intro {
    position: fixed;
    width: 100vw;
    height: 100%;

    top: 0;
    left: 0;

    z-index: 999;

    background: rgba(0, 0, 0, 0.8);

    display: none;
}

#play-intro.visible {
    display: block;
}

/* endregion Intro */

/* region Overlay */

.overlay {
    font-size: 1.5rem;
}

.overlay-opened #content,
.overlay-opened #background,
.overlay-opened #c,
.overlay-opened #pillars {
    filter: blur(20px);
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;

    display: none;
}

.overlay.over {
    display: flex;
    pointer-events: none;
}

.overlay.opened {
    display: flex;
    pointer-events: auto;
}

.overlay.over::before {
    background: none;
}

.overlay.over .left,
.overlay.over .overlay-close,
.overlay.over .left,
.overlay.over .left,
.overlay.over .left {
    visibility: hidden;
}

.overlay.over .left,
.overlay.over .overlay-close,
.overlay.over .inner {
    pointer-events: none;
}

.overlay::before {
    pointer-events: none;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;

    background-color: rgb(0, 0, 0); /* Fallback color */
    background-color: rgba(0, 0, 0, 0.5); /* Black w/opacity/see-through */

    z-index: 100;
}

.overlay-background {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 101;
}

.overlay .video-target video {
    max-height: 70vh;
    margin: 0 auto;

    transform: none !important;
}

@media (orientation: portrait) {
    .overlay .video-target video {
        max-height: 50vh;
    }
}

.BIOsphere .overlay-background {
    background: rgba(0, 0, 0, 0.75) url("../img/BIOsphere/bg_03_2688x1512.png") no-repeat top center;
    background-size: cover;
}

@media (max-width: 2560px) or (max-height: 1600px) {
    .BIOsphere .overlay-background {
        background-image: url("../img/BIOsphere/bg_03_1792x1008.png");
    }
}

@media (max-width: 1920px) or (max-height: 1200px) {
    .BIOsphere .overlay-background {
        background-image: url("../img/BIOsphere/bg_03_1344x756.png");
    }
}

@media (max-width: 1280px) or (max-height: 800px) {
    .BIOsphere .overlay-background {
        background-image: url("../img/BIOsphere/bg_03_1344x756.png");
    }
}

.overlay .inner {
    position: relative;
    z-index: 101;

    display: flex;
    flex: 1;

    margin-left: 4rem;

    box-sizing: border-box;
}

.overlay .table {
    display: table;
    flex: 1;
}

.overlay .table-row {
    display: table-row-group;
}

.overlay, .overlay a {
    color: #df8061;
}

.overlay .left {
    display: table-row;
    vertical-align: top;

    background: #414141;
    color: #000;
    font-size: 1rem;

    height: 20%;
}

.audio-overlay .left {
    padding-right: 4rem;
}

.overlay p.spacer {
    height: 4rem;
}

.form-overlay .middle {
    width: 100%;
    height: 100%;
    background: #414141;
    color: #000;
    font-size: 1rem;
    padding: 4rem 4rem 0 4rem;
}

.overlay .left p {
    line-height: 1.3rem;
    padding-top: 1rem;
    white-space: pre-line;
}

.overlay .left p:last-child {
    padding-bottom: 1rem;
}

.overlay .left h4 {
    color: #fff;
    font-size: 1.3rem;
    line-height: 1.5;
}

.audio-overlay .left h4 {
    padding-bottom: 1rem;
}

.overlay .image-wrapper {
    width: 100%;
    min-height: 4rem;
}

.overlay .right {
    display: table-row;
    vertical-align: top;

    background: #df8061;
    color: #fff;
    font-size: 1rem;

    text-shadow: 0 0 2px #666;

    padding: 1rem 1.5rem 1rem;

    position: relative;
    clear: both;
}

.overlay .right p {
    font-size: 1rem;
    line-height: 1.35;
    padding: 0 1rem 0 1rem;
}

.overlay .right h3 {
    padding: 1.5rem 1rem 1.5rem 1rem;
    white-space: pre-line;
}

.overlay .arrow {
    vertical-align: -5.5%;
}

.overlay h3 {
    padding-bottom: 0.5rem;
    font-size: 1.5rem;
    line-height: 1.3;
}

.overlay img {
    z-index: 101;
    max-width: 100%;
    max-height: 60vh;
    height: auto;
    width: auto;

    margin: 8rem auto 2rem;

}

.audioroom .overlay img {
    max-height: 40vh;
}

.audio-overlay img {
    margin-left: 0;
}

.overlay .close {
    position: fixed;
    top: 0;
    right: 0rem;
    z-index: 102;
}

.text-overlay .inner {
    padding-top: 4rem;
}

.close .svg {
    display: block;
    width: 100%;
    height: 100%;
}

.overlay .scrollable-text {
    overflow-y: auto;
    margin-bottom: 1rem;
    height: 100%;
    max-height: 60vh;
}

.videogalerie-overlay .scrollable-text {
    height: 100% !important;
}

.overlay .scrollable-text p {
    white-space: pre-line;
    padding-right: 0.5rem !important;
}

.text-animation {
    font-family: 'Roboto Light', 'Franklin Gothic Medium', Tahoma, sans-serif;
    letter-spacing: 0.04rem;
    font-size: 1.9rem;
    line-height: 1.75;
    padding-top: 1rem;
}

.mushroom-links h4 {
    display: block;
    font-weight: normal;
    padding-bottom: 0.1rem;
    border-bottom: 2px solid #414141;
}

.pdf-links a,
.mushroom-links a,
.mushroom-links {
    color: #000;
    text-shadow: none;
}

.mushroom-links .link-wrapper {
    padding-top: 0.3rem;
    line-height: 1.4;
}

.mushroom-links a {
    margin-right: 1rem;
}

.mushroom-overlay .right a {
    color: #000;
}

.mushroom-overlay .scrollable-text {
    max-height: 60vh;
}

@media (orientation: landscape) {

    .overlay {

    }

    .overlay .table {

    }

    .overlay .inner {
        margin: 8rem 8rem 6rem 12rem;
    }

    .overlay .close {
        top: 8rem;
        right: 8rem;
    }

    .overlay .left {
        padding-top: 4rem;
        display: table-cell;
        width: 25%;
        height: auto;
    }

    .image-overlay .left {
        width: 50%;
    }

    .video-overlay .left,
    .ByzANTian_TRAces .overlay .left {
        width: 66%;
    }

    .audio-overlay .left {
        width: 33.333%;
    }

    .mushroom-overlay .left {
        width: 60%;
    }

    .overlay .left p {
        line-height: 1.3rem;
        padding-top: 0.5rem;
    }

    .overlay .left p,
    .overlay .left h4,
    .overlay .image-wrapper {
        padding-left: 1rem;
    }

    .audio-overlay .left p,
    .audio-overlay .left h4,
    .audio-overlay .image-wrapper {
        padding-left: 4rem;
    }

    .overlay .right {
        display: table-cell;
        width: 75%;

        clear: none;

        padding: 4rem 1.5rem 0 1rem;
    }

    .audio-overlay .right {
        padding: 4rem 3rem 0 4rem;
    }

    .image-overlay .right {
        width: 50%;
    }

    .video-overlay .right,
    .ByzANTian_TRAces .overlay .right,
    .conference.overlay .right {
        width: 33.333%;
    }

    .audio-overlay .right {
        width: 66%;
    }

    .mushroom-overlay .right {
        width: 40%;
    }

    .overlay .right h3 {
        padding: 0 0 0.5rem;
    }

    .overlay .right p {
        padding-left: 0;
        padding-right: 0;
    }

    .overlay img {
        max-height: 55vh;

        margin-top: 0;
        margin-bottom: 0;
        margin-left: 0;
    }
}

@media (orientation: landscape) and (max-width: 1800px) {
    .overlay .right {
        /*background: red;*/
    }

    .overlay .close {
        top: 6rem;
        right: 4rem;
    }

    .overlay .inner {
        margin: 6rem 4rem 4rem 8rem;
    }

    nav {
        box-shadow: 0px 0px 2.5rem 1.5rem rgba(0, 0, 0, 0.6);
    }
}

@media (orientation: landscape) and (max-width: 1600px) {
    .overlay .right {
        /*background: blue;*/
    }

    .overlay .close {
        top: 4rem;
        right: 3rem;
    }

    .overlay .inner {
        margin: 4rem 3rem 2rem 7rem;
    }

    nav {
        box-shadow: 0px 0px 2rem 1rem rgba(0, 0, 0, 0.6);
    }
}

@media (orientation: portrait) {
    .overlay .left > * {
        padding-left: 1rem;
    }

    .overlay img {
        max-height: 30vh;
    }

    .overlay p.spacer {
        height: 0;
    }

    .mushroom-overlay .link-wrapper {
        margin-left: 1rem;
    }

    .overlay .scrollable-text {
        margin-right: 1rem;
    }
}

/* endregion */

/* region MushROOM UNDERground / Garten */

.mushROOMunderGROUND {
    background: url("../img/mushROOMunderGROUND/Background/seamless-paper-pattern.png");
}

#draggable {

}

#draggable .background-image {
    z-index: -1;
    pointer-events: none;

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("../img/mushROOMunderGROUND/Background/Mushroom_Underground_Background_Graphic-min.svg");
    background-size: min(400vw, 400vh);
}

.ytp-button,
.ytp-large-play-button,
.ytp-large-play-button-red-bg {
    display: none;
}

.plyr--youtube {
    height: auto;
}

.plyr--youtube iframe {
    position: static;
}

.plyr--video .plyr__control.plyr__tab-focus,
.plyr--video .plyr__control:hover,
.plyr--video .plyr__control[aria-expanded="true"],
.plyr__control--overlaid {
    background: #df8061;
}

.plyr--full-ui input[type="range"] {
    color: #df8061;
}

.container p {
    text-align: center;
}

.container {

}
/*
.container--large {
    height: 45rem;
    width: 45rem;
}

.container--medium {
    height: 35rem;
    width: 35rem;
}

.container--small {
    height: 25rem;
    width: 25rem;
} */

/* endregion */

/* region Signpost */

.Signpost {
    background: #1c0b2d;
}

#signpost {
    width: 100%;
    height: 100%;
}

.signpillar {
    position: absolute;
    z-index: 20;
    pointer-events: none;
    width: 100%;
    height: 2160px;
    background-position: top left;
    background-repeat: no-repeat;

    margin-top: -108px;
    opacity: .75;
}

.signpillar-left {
    background-image: url("../img/signpost/Wegweiser_Saeule_links_2160_.png");
}

.signpillar-right {
    background-position: top right;
    background-image: url("../img/signpost/Wegweiser_Saeule_rechts_2160_.png");
}

#sign {
    position: relative;
}

#sign .left,
#sign .right {
    position: absolute;
    width: 50%;
    height: 50%;
    overflow: visible;
    top: 47%;
}

#sign .left {
    right: 51%;
    text-align: right;
}

#sign .right {
    left: 49%;
}

.Signpost .left a {
    padding-right: 2em;
}

.Signpost .right a {
    padding-left: 2em;
}

#sign a {
    line-height: 2.5;
    display: inline-block;
    text-decoration: none;
    color: #ffffff;

    -webkit-filter: invert(56%) sepia(82%) saturate(300%) hue-rotate(328deg) brightness(120%) contrast(100%);
    filter: invert(56%) sepia(82%) saturate(300%) hue-rotate(328deg) brightness(120%) contrast(110%);
}

#sign a:hover {
    /*color: #8bfd9e;*/
    -webkit-filter:invert(79%) sepia(58%) saturate(339%) hue-rotate(70deg) brightness(303%) contrast(98%);
    filter:invert(79%) sepia(58%) saturate(339%) hue-rotate(70deg) brightness(353%) contrast(98%);
}

#sign ul {
    position: relative;
}

#sign li {
    position: absolute;
}

.Signpost .left li {
    transform-origin: center right;
    right: 0;
    top: 0;

    padding-right: 4.5em;
}

.Signpost .right li {
    transform-origin: center left;
    left: 0;
    top: 0;

    padding-left: 4.5em;
}

#sign .l1 {
    top: -2em;
    transform: rotate(56.5deg);
}

#sign .l2 {
    top: -1.5em;
    transform: rotate(32deg);
}

#sign .l3 {
    top: -1.5em;
    transform: rotate(8deg);
}

#sign .l4 {
    top: -1.5em;
    transform: rotate(-12deg);
}

#sign .l5 {
    top: -1em;
    transform: rotate(-33deg);
}

#sign .l6 {
    top: -1em;
    transform: rotate(-56deg);
}

#sign .r1 {
    top: -2em;
    transform: rotate(-57.5deg);
}

#sign .r2 {
    top: -1.5em;
    transform: rotate(-33deg);
}

#sign .r3 {
    top: -1.5em;
    transform: rotate(-9deg);
}

#sign .r4 {
    top: -1em;
    transform: rotate(8deg);
}

#sign .r5 {
    top: -1em;
    transform: rotate(33deg);
}

#sign .r6 {
    top: -1em;
    transform: rotate(56deg);
}

.Signpost ul,
.Signpost li  {
    font-size: 31px;
}

.Signpost .left li {
    padding-right: 5.5em;
}

.SignpostSignpost .right li {
    padding-left: 5em;
}

#sign {
    position: absolute;
    z-index: 10;
    left: 50%;
    width: 3840px;
    height: 2160px;
    margin-left: -1920px;
    background: url("../img/signpost/Wegweiser_Background_3840x2160_.png") no-repeat;
}

.Signpost .left a {
    background-position: left center;
    background-repeat: no-repeat;
}

.Signpost .right a {
    background-position: right center;
    background-repeat: no-repeat;
}

.Signpost .r1 a,
.Signpost .r4 a {
    background-image: url("../img/signpost/right/Wegweiser_Pfeil_01_332_.png");
}

.Signpost .r2 a,
.Signpost .r5 a {
    background-image: url("../img/signpost/right/Wegweiser_Pfeil_02_332_.png");
}

.Signpost .r3 a,
.Signpost .r6 a {
    background-image: url("../img/signpost/right/Wegweiser_Pfeil_03_332_.png");
}

.Signpost .l1 a,
.Signpost .l4 a {
    background-image: url("../img/signpost/left/Wegweiser_Pfeil_01_332_.png");
}

.Signpost .l2 a,
.Signpost .l5 a {
    background-image: url("../img/signpost/left/Wegweiser_Pfeil_02_332_.png");
}

.Signpost .l3 a,
.Signpost .l6 a {
    background-image: url("../img/signpost/left/Wegweiser_Pfeil_03_332_.png");
}

.Signpost .left a {
    padding-left: 5em;
}

.Signpost .right a {
    padding-right: 5em;
}

@media (max-width: 2560px) or (max-height: 1600px) {
    .signpillar {
        height: 1440px;
        margin-top: -72px;
    }

    .Signpost ul,
    .Signpost li {
        font-size: 28px;
    }

    .Signpost .left li {
        padding-right: 4.5em;
    }

    .Signpost .right li {
        padding-left: 4em;
    }

    #sign {
        width: 2560px;
        height: 1440px;
        margin-left: -1280px;
        background-image: url("../img/signpost/Wegweiser_Background_2560x1440_.png");
    }

    .Signpost .r1 a,
    .Signpost .r4 a {
        background-image: url("../img/signpost/right/Wegweiser_Pfeil_01_221_.png");
    }

    .Signpost .r2 a,
    .Signpost .r5 a {
        background-image: url("../img/signpost/right/Wegweiser_Pfeil_02_221_.png");
    }

    .Signpost .r3 a,
    .Signpost .r6 a {
        background-image: url("../img/signpost/right/Wegweiser_Pfeil_03_221_.png");
    }

    .Signpost .l1 a,
    .Signpost .l4 a {
        background-image: url("../img/signpost/left/Wegweiser_Pfeil_01_221_.png");
    }

    .Signpost .l2 a,
    .Signpost .l5 a {
        background-image: url("../img/signpost/left/Wegweiser_Pfeil_02_221_.png");
    }

    .Signpost .l3 a,
    .Signpost .l6 a {
        background-image: url("../img/signpost/left/Wegweiser_Pfeil_03_221_.png");
    }

    .Signpost .left a {
        padding-left: 4.5em;
    }

    .Signpost .right a {
        padding-right: 4.5em;
    }

    .signpillar-left {
        background-image: url("../img/signpost/Wegweiser_Saeule_links_1440_.png");
    }

    .signpillar-right {
        background-image: url("../img/signpost/Wegweiser_Saeule_rechts_1440_.png");
    }
}

@media (max-width: 1920px) or (max-height: 1200px) {
    .signpillar {
        height: 1080px;
        margin-top: -54px;
    }

    .Signpost ul,
    .Signpost li  {
        font-size: 25px;
    }

    .Signpost .left li {
        padding-right: 3.5em;
    }

    .Signpost .right li {
        padding-left: 3em;
    }

    #sign {
        width: 1920px;
        height: 1080px;
        margin-left: -960px;
        background-image: url("../img/signpost/Wegweiser_Background_1920x1080_.png");
    }

    .Signpost .r1 a,
    .Signpost .r4 a {
        background-image: url("../img/signpost/right/Wegweiser_Pfeil_01_166_.png");
    }

    .Signpost .r2 a,
    .Signpost .r5 a {
        background-image: url("../img/signpost/right/Wegweiser_Pfeil_02_166_.png");
    }

    .Signpost .r3 a,
    .Signpost .r6 a {
        background-image: url("../img/signpost/right/Wegweiser_Pfeil_03_166_.png");
    }

    .Signpost .l1 a,
    .Signpost .l4 a {
        background-image: url("../img/signpost/left/Wegweiser_Pfeil_01_166_.png");
    }

    .Signpost .l2 a,
    .Signpost .l5 a {
        background-image: url("../img/signpost/left/Wegweiser_Pfeil_02_166_.png");
    }

    .Signpost .l3 a,
    .Signpost .l6 a {
        background-image: url("../img/signpost/left/Wegweiser_Pfeil_03_166_.png");
    }

    .Signpost .left a {
        padding-left: 4em;
    }

    .Signpost .right a {
        padding-right: 4em;
    }

    .signpillar-left {
        background-image: url("../img/signpost/Wegweiser_Saeule_links_1080_.png");
    }

    .signpillar-right {
        background-image: url("../img/signpost/Wegweiser_Saeule_rechts_1080_.png");
    }
}

@media (max-width: 1280px) or (max-height: 800px) {
    .signpillar {
        height: 720px;
        margin-top: -36px;
    }

    .Signpost ul,
    .Signpost li  {
        font-size: 24px;
    }

    .Signpost .left li {
        padding-right: 2.5em;
    }

    .Signpost .right li {
        padding-left: 2em;
    }

    #sign {
        width: 1280px;
        height: 720px;
        margin-left: -640px;
        background-image: url("../img/signpost/Wegweiser_Background_1280x720_.png");
    }

    .Signpost .r1 a,
    .Signpost .r4 a {
        background-image: url("../img/signpost/right/Wegweiser_Pfeil_01_110_.png");
    }

    .Signpost .r2 a,
    .Signpost .r5 a {
        background-image: url("../img/signpost/right/Wegweiser_Pfeil_02_110_.png");
    }

    .Signpost .r3 a,
    .Signpost .r6 a {
        background-image: url("../img/signpost/right/Wegweiser_Pfeil_03_110_.png");
    }

    .Signpost .l1 a,
    .Signpost .l4 a {
        background-image: url("../img/signpost/left/Wegweiser_Pfeil_01_110_.png");
    }

    .Signpost .l2 a,
    .Signpost .l5 a {
        background-image: url("../img/signpost/left/Wegweiser_Pfeil_02_110_.png");
    }

    .Signpost .l3 a,
    .Signpost .l6 a {
        background-image: url("../img/signpost/left/Wegweiser_Pfeil_03_110_.png");
    }

    .Signpost .left a {
        padding-left: 3.5em;
    }

    .Signpost .right a {
        padding-right: 3.5em;
    }

    .signpillar-left {
        background-image: url("../img/signpost/Wegweiser_Saeule_links_720_.png");
    }

    .signpillar-right {
        background-image: url("../img/signpost/Wegweiser_Saeule_rechts_720_.png");
    }
}

/* endregion */

/* region Schleier curtains */

.curtain-wrapper {
    position: relative;
    height: 100%;
}

.curtain {
    background-repeat: no-repeat;
    background-position: bottom center;

    display: block;
    width: 1691px;
    height: 1993px;
}

.curtain_01 {
    background-image: url('/img/FACing_KASsiaS_FACes/Schleier/Schleier_1993_v1.png')
}
.curtain_02 {
    background-image: url('/img/FACing_KASsiaS_FACes/Schleier/Schleier_1993_v2.png')
}
.curtain_03 {
    background-image: url('/img/FACing_KASsiaS_FACes/Schleier/Schleier_1993_v3.png')
}
.curtain_04 {
    background-image: url('/img/FACing_KASsiaS_FACes/Schleier/Schleier_1993_v4.png')
}
.curtain_05 {
    background-image: url('/img/FACing_KASsiaS_FACes/Schleier/Schleier_1993_v5.png')
}
.curtain_06 {
    background-image: url('/img/FACing_KASsiaS_FACes/Schleier/Schleier_1993_v6.png')
}
.curtain_07 {
    background-image: url('/img/FACing_KASsiaS_FACes/Schleier/Schleier_1993_v7.png')
}

@media (max-width: 2560px) or (max-height: 1600px) {
    .curtain {
        width: 1128px;
        height: 1329px;
    }

    .curtain_01 {
        background-image: url('/img/FACing_KASsiaS_FACes/Schleier/Schleier_1329_v1.png')
    }
    .curtain_02 {
        background-image: url('/img/FACing_KASsiaS_FACes/Schleier/Schleier_1329_v2.png')
    }
    .curtain_03 {
        background-image: url('/img/FACing_KASsiaS_FACes/Schleier/Schleier_1329_v3.png')
    }
    .curtain_04 {
        background-image: url('/img/FACing_KASsiaS_FACes/Schleier/Schleier_1329_v4.png')
    }
    .curtain_05 {
        background-image: url('/img/FACing_KASsiaS_FACes/Schleier/Schleier_1329_v5.png')
    }
    .curtain_06 {
        background-image: url('/img/FACing_KASsiaS_FACes/Schleier/Schleier_1329_v6.png')
    }
    .curtain_07 {
        background-image: url('/img/FACing_KASsiaS_FACes/Schleier/Schleier_1329_v7.png')
    }
}

@media (max-width: 1920px) or (max-height: 1200px) {
    .curtain {
        width: 845px;
        height: 996px;
    }

    .curtain_01 {
        background-image: url('/img/FACing_KASsiaS_FACes/Schleier/Schleier_996_v1.png')
    }
    .curtain_02 {
        background-image: url('/img/FACing_KASsiaS_FACes/Schleier/Schleier_996_v2.png')
    }
    .curtain_03 {
        background-image: url('/img/FACing_KASsiaS_FACes/Schleier/Schleier_996_v3.png')
    }
    .curtain_04 {
        background-image: url('/img/FACing_KASsiaS_FACes/Schleier/Schleier_996_v4.png')
    }
    .curtain_05 {
        background-image: url('/img/FACing_KASsiaS_FACes/Schleier/Schleier_996_v5.png')
    }
    .curtain_06 {
        background-image: url('/img/FACing_KASsiaS_FACes/Schleier/Schleier_996_v6.png')
    }
    .curtain_07 {
        background-image: url('/img/FACing_KASsiaS_FACes/Schleier/Schleier_996_v7.png')
    }
}

@media (max-width: 1280px) or (max-height: 800px) {
    .curtain {
        width: 563px;
        height: 664px;
    }

    .curtain_01 {
        background-image: url('/img/FACing_KASsiaS_FACes/Schleier/Schleier_664_v1.png')
    }
    .curtain_02 {
        background-image: url('/img/FACing_KASsiaS_FACes/Schleier/Schleier_664_v2.png')
    }
    .curtain_03 {
        background-image: url('/img/FACing_KASsiaS_FACes/Schleier/Schleier_664_v3.png')
    }
    .curtain_04 {
        background-image: url('/img/FACing_KASsiaS_FACes/Schleier/Schleier_664_v4.png')
    }
    .curtain_05 {
        background-image: url('/img/FACing_KASsiaS_FACes/Schleier/Schleier_664_v5.png')
    }
    .curtain_06 {
        background-image: url('/img/FACing_KASsiaS_FACes/Schleier/Schleier_664_v6.png')
    }
    .curtain_07 {
        background-image: url('/img/FACing_KASsiaS_FACes/Schleier/Schleier_664_v7.png')
    }
}
/* endregion */


@media (orientation: portrait) {
    nav {
        box-shadow: none
    }
}

/*
@media (orientation: portrait) {
    .section--large .inner {
        width: 100vw !important;
        height: 100vw !important;
    }

    .section--medium.inner {
        width: 80vw !important;
        height: 100vw !important;
    }

    .section--small .inner {
        width: 60vw !important;
        height: 100vw !important;
    }
}

@media (orientation: landscape) {
    .section--large .inner {
        width: 100vh !important;
        height: 100vh !important;
    }

    .section--medium .inner {
        width: 80vw !important;
        height: 100vh !important;
    }

    .section--small .inner {
        width: 60vw !important;
        height: 100vh !important;
    }
}
*/