*{margin: 0; padding:0;}

@font-face {
  font-family: "minpax";
  src: url("font/Minpax-master/fonts/webfonts/Minpax-Regular.eot") format("eot"),
      url("font/Minpax-master/fonts/webfonts/Minpax-Regular.woff") format("woff").
       url("font/Minpax-master/fonts/webfonts/Minpax-Regular.woff2") format("woff2");}

body{background-color: black; width: 100%; height: 100%; overflow: hidden;}

#fullscreenWrapper{width: 100%; height:100%;}

iframe{
    border: none;
    width: 100%; height: 100%;}

.deselect ::selection {background: transparent;color: inherit;}
.deselect ::-moz-selection {background: transparent;color: inherit;}
.deselect {-ms-user-select: none; -webkit-user-select: none; -moz-user-select: none; user-select: none;}

/*########################################################################################################################*/

/*PRELOADER*/
#preloader{
    width: 100%; height: 100%;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    transition: all 1s ease;
    z-index: 10000;
    background-color: rgba(0, 0, 0, 1);
    background-image: url(images/background.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    cursor: url(images/cursor/cursor_white.png), auto;}

#loader{
    position: absolute;
    top: 45%; left: 50%;  
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 10002;
    font-family: 'dejavu_sans_monobook';
    font-size: 1.5vw;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.25);
    display: none;}

@media only screen and (max-width:850px){#loader{font-size: 20px;}}

#loader.active{
    display: block;}

#loader span{margin: 0.2vw;}

#loader.enableAudio:hover{
        cursor: pointer;
        color: rgba(255, 255, 255, 0.45);}

#preloader_content{
    position: absolute;
    top: 45%; left: 55%;  
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 10001;
    width: 70vw; height: 90%;
    opacity: 0.7;
    display:none;
    background-image: url(images/front-page/tbyalfdne_11.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;}

@media only screen and (max-width:666px){
    #preloader_content{
        top: 0; left: 7%;
        width: 85vw;
        -webkit-transform: translate(0%, 0%);
        -moz-transform: translate(0%, 0%);
        -ms-transform: translate(0%, 0%);
        -o-transform: translate(0%, 0%);
        transform: translate(0%, 0%);}}

#preloader_content.active{display: block;}

#preloader_content.hovered{
    background-image: url(images/front-page/tbyalfdne_13.png);
    opacity: 0;
    animation: blinkTitle 75ms 5;
    -webkit-animation: blinkTitle 75ms 5;}

@keyframes blinkTitle{0% {opacity: 0;} 50%{opacity: 0.4; color: white;} 100% {opacity: 0;}}
@-webkit-keyframes blinkTitle{0% {opacity: 0;} 50%{opacity: 0.4;} 100% {opacity: 0;}}

#hoverBoxWrapper{
    position: absolute;
    top: 50%; left: 50%;  
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%; height: 40vw;}

.hoverElement{
    cursor: pointer;
    position: absolute;}

.hoverElement:first-of-type{
    width: 80%; height: 25%;}

.hoverElement:nth-of-type(2){
    top: 25%;
    width: 100%; height: 25%;}

.hoverElement:nth-of-type(3){
    top: 50%;
    width: 55%; height: 25%;}

.hoverElement:nth-of-type(4){
    top: 75%;
    width:36%; height: 25%;}

#preloaderMobileContent{
    position: absolute;
    width: 75vw;
    top: 50%; left: 50%;  
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-family: 'dejavu_sans_monobook';
    color: rgba(255, 255, 255, 0.55);
    font-size: 10vw;
    line-height: 1.5;
    display: none;}

@media only screen and (max-width:500px){
    #hoverBoxWrapper{display:none;}
    #preloader_content{background-image: none;}
    #preloaderMobileContent{display: block;}}

/*####################################*/

#fullscreenAlert{
    position: absolute;
    top: 45%; left: 55%;  
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-family: 'dejavu_sans_monobook';
    font-size: 1.5vw;
    line-height: 1.7;
    z-index: 10001;
    color: rgba(255, 255, 255, 0.25);
    transition: all 200ms ease;
    opacity: 0;}

#fullscreenAlert.active{opacity: 1;}

@media only screen and (max-width:500px){#fullscreenAlert.active{display: none;}}

/*####################################*/

#support{
    position: absolute;
    font-size: 12px;
    left: 20px; bottom: 10px;
    display: none;}

#support.active{
    display: block;}

@media only screen and (max-width:666px){#support.active{display: none;}}

#support span{
    line-height: 1.5;
    float: left;}

.frontPage{
    font-family: 'dejavu_sans_monobook';
    color: rgba(255, 255, 255, 0.4);}

.logo:first-of-type{
    margin-left: 40px;
    margin-right: 10px;}

.logo{
    height: 5vh; width: auto;
    opacity: 0.4;}

#logo_3{margin-left: 10px; margin-right: 10px;}

/*########################################################################################################################*/

#escButton{
    position: absolute;
    left: 30px; top:5%;
    font-size: 1.7vw;
    font-family: 'dejavu_sans_monobook';
    color: rgba(255, 255, 255, 0.25);}

#escButton:hover{
    cursor: pointer;
    color: rgba(255, 255, 255, 0.45);}

@media only screen and (max-width:500px){#escButton{display: none;}}

#overlay{
    z-index: 9999;
    background-image: url(images/background.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    cursor: url(images/cursor/cursor_white.png), auto;}

#overlay.black{
    background-image: none;
    background-color: black;}

#logLine{
    position: absolute;
    top: 50%; left: 50%;  
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-family: 'dejavu_sans_monobook';
    font-size: 1.5vw;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.4);
    visibility: hidden;}

#logLine.active{visibility: visible;}

#logLineContent .logLineContentInner{}

#skipLogLine{
    position: absolute;
    bottom: -0.5vw; right: -4vw;
    font-size: 2.3vw;
    display: none;
    animation: blinkTitle 120ms 1;
    -webkit-animation: blinkTitle 120ms 1;}

#skipLogLine:hover{
    cursor: pointer;
    color: rgba(255, 255, 255, 0.9);}

#skipLogLine.active{display: block;}

@media only screen and (max-width:850px){
    #logLine{
        font-size: 4.5vw;
        width: 90vw; height: 95vh;
        padding-top: 5vh;
        white-space: nowrap;} 
    #skipLogLine{
        position: fixed;
        bottom: 10px; right: 15px;
        font-size: 30px;}
}

@media only screen and (max-width:500px){.loglineDesktop{display: none;}}

/*########################################################################################################################*/

/* SAFARI ALERT */
#safari_alert{
    position: fixed;
    width: 100%; height: 100%;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 10002;
    display: none;}

#safari_alert_message{
    position: absolute;
    background-color: black;
    top: 50%; left: 50%;  
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: rgba(150, 150, 150, 1);
    font-family: 'dejavu_sans_monobook';
    font-size: 35px;
    border: 1px solid rgba(150, 150, 150, 1);
    padding: 20px;
    padding-bottom: 40px;}

#close_safari_alert{
    cursor: pointer;
    width: 100%; text-align: right;
    padding-bottom: 20px;}

/*########################################################################################################################*/

/*BUISINESS CARD*/
#buisinesscard{
    text-decoration: none;
    position: absolute;
    right: 30px; bottom: 8px;
    font-family: 'dejavu_sans_monobook';
    color: rgba(255, 255, 255, 0.3);
    font-size: 12px;
    letter-spacing: 1.5px;
    word-spacing: -2;
    display: none;}

#buisinesscard.active{display: block;}

#buisinesscard span{
    font-size: 14px;
    margin-right: 5px;}

#buisinesscard:hover{color: rgba(150, 150, 150, 1);}

/*########################################################################################################################*/

/*NAVIGATION*/
#navigation{
    position: fixed;
    top: 50%; transform: translateY(-50%);
    right: 20px; padding: 30px;}

ul{color: white;
    list-style-type: none;}

li{margin-bottom: 18px;}

a.navLink{text-decoration: none;
    display: block;
    width: 7px; height: 7px;
    border: 2px solid rgba(250, 250, 250, 0.35);
    border-radius: 50%;
    filter: blur(0.5px);}

a.navLink:hover{background-color: rgba(250, 250, 250, 0.35);}

a.navLink.active{background-color: rgba(250, 250, 250, 0.35);}

@media only screen and (max-width:500px){
    #navigation{right: 0;}
    li{margin-bottom: 15px;}
    a.navLink{width: 3px; height: 3px;}}

/*########################################################################################################################*/

#overlay, #sectionsOverlay, #mobileAlertWrapper{
    position: fixed;
    top: 0; left: 0; bottom: 0; right: 0;
    width: 100%; height: 100%;
    background-color: black;}

#sectionsOverlay{cursor: url(images/cursor/cursor_black.png), auto;}

/* MOBILE ALERT */
#mobileAlertWrapper{display: none;}

#mobileAlertWrapper.active{display: none;}

#mobileAlert{
    position: absolute;
    background-color: black;
    top: 25px;
    color: rgba(225, 225, 225, 0.45);
    font-family: 'dejavu_sans_monobook';
    text-align: center;
    width: 100%;
    font-size: 4.5vw;}

@media only screen and (max-width:666px){#mobileAlertWrapper.active{display: block;}}

/*########################################################################################################################*/

/*SECTIONS*/
.section{
    width: 100%; height: 100%;
    position: absolute;
    visibility: hidden;
    opacity: 0;
    transition: 250ms all ease;}

.section.transition{opacity: 1;}
.section.active{visibility: visible;}

/*#######################################*/

/*SECTION1 ABC-SCULPTURE*/
.abc_section{
    width: 100%; height:100%;
    background-image: url(images/abc-sculpture/bg0.jpg);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: auto 100%;
    cursor: url(images/cursor/dot_white_blurred.png), auto;}

.abc_section.bg0{background-image: url(images/abc-sculpture/bg0.jpg);}
.abc_section.bg1{background-image: url(images/abc-sculpture/bg1.jpg);}
.abc_section.bg2{background-image: url(images/abc-sculpture/bg2.jpg);}
.abc_section.bg3{background-image: url(images/abc-sculpture/bg3.jpg);}
.abc_section.bg4{background-image: url(images/abc-sculpture/bg4.jpg);}
.abc_section.bg5{background-image: url(images/abc-sculpture/bg5.jpg);}
.abc_section.bg6{background-image: url(images/abc-sculpture/bg6.jpg);}
.abc_section.bg7{background-image: url(images/abc-sculpture/bg7.jpg);}
.abc_section.bg8{background-image: url(images/abc-sculpture/bg8.jpg);}

/*#section1-textContainer{*/
.abc_textContainer{
    position: absolute;
    top: 50%; left: 50%;  
    height: 75vh; width: 75vh;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);}

.abc_character{
    position: absolute;
    top: 45%; left: 50%;     
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-size: 90vh;
    font-family: 'unnaregular';
    color: white;
    opacity: 0;}

.abc_character.active{
    opacity: 0.2;}

@media only screen and (max-width:500px){.abc_character{left: 50%; font-size: 87vw;}}

/*#######################################*/

.erlkoenig_section{
    cursor: none;
    background-image: url(images/bg_erlkoenig.jpg);
    background-size: auto 100%;
    background-position: left;}

.erlkoenig_textContainer{
    position: absolute;
    width: 84%;
    top: 50%; left: 50%; 
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: rgba(255, 255, 255, 1);
    word-wrap: break-word;
    text-align: center;
    text-transform: uppercase;
    font-family: 'yantramanavthin';
    font-weight: 100;
    filter: blur(0.7px);
    font-size: 7.4vw;
    letter-spacing: -1.5vw;
    line-height: 0.2;}

.erlkoenig_character{opacity: 0.1;}

@media only screen and (max-width:450px){.erlkoenig_textContainer{font-size: 10vh;}}

/*#######################################*/

.textInquest_section{
    width: 100%; height: 100%;
    cursor: url(images/cursor/cursor_invisible.png), auto;
    background-image: url(images/background.gif);
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: right;}

.textInquest_textContainer{
    position: absolute;
    width: 85%; padding-left: 10vh;
    top: 50%; left: 50%;     
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 0.75;
    font-family: 'dash_digital-7regular';
    font-size: 4vw;
    line-height: 1.5;
    text-shadow: 0 0 1.5px rgba(0, 0, 0, 0.8);
    word-spacing: -15;
    letter-spacing: 0.3;
    color: rgba(0, 0, 0, 0.1);}

@media only screen and (max-width:450px){
    .textInquest_textContainer{padding-left: 5px; width: 95%; font-size: 5vh;}}

.textInquest_torch_mode_1{    
    width: 3.5vw; 
    height: 3.5vw;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 50%;
    box-shadow: 
        0px 0px 2px 2px rgba(255,255,255,0.9) inset,
        0px 0px 5px 2px rgba(255,255,255,0.9),
        0px 0px 10px 5px rgba(255,255,255,0.8), 
        0px 0px 20px 20px rgba(255,255,255,0.5);}

.textInquest_torch_mode_2{
    width: 4.5vw; 
    height: 4.5vw;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    box-shadow: 
        0px 0px 2px 2px rgba(255,255,255,0.7) inset,
        0px 0px 5px 2px rgba(255,255,255,0.7),
        0px 0px 10px 5px rgba(255,255,255,0.8), 
        0px 0px 30px 30px rgba(255,255,255,0.3);}

.textInquest_torch_mode_3{
    width: 35px; 
    height: 35px;
    transition: all 0.1s ease;
    animation: blink 0.3s infinite;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 50%;
    box-shadow: 
        0px 0px 2px 2px rgba(255,255,255,0.9) inset,
        0px 0px 5px 2px rgba(255,255,255,0.9),
        0px 0px 10px 5px rgba(255,255,255,0.8), 
        0px 0px 10px 10px rgba(255,255,255,0.5);}

@keyframes blink{0%{opacity: 1;} 100%{opacity: 0;}}
@-webkit-keyframes blink{0%{opacity: 1;} 100%{opacity: 0;}}

.textInquest_torch_mode_4{
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 1);   
    animation: scaleout 1s infinite ease-in-out;
    box-shadow: 
        0px 0px 2px 2px rgba(255,255,255,0.9) inset,
        0px 0px 5px 2px rgba(255,255,255,0.9),
        0px 0px 10px 5px rgba(255,255,255,0.8), 
        0px 0px 20px 20px rgba(255,255,255,0.5);}

@keyframes scaleout{0% {transform: scale(0);}  100% {transform: scale(1.0); opacity: 0;}}
@-webkit-keyframes scaleout{0% {-webkit-transform: scale(0);}  100% {-webkit-transform: scale(1.0); opacity: 0;}}

.textInquest_mousefollower{position: absolute; display: none;}

/*#######################################*/

.signIn_section{
    width: 100%; height 100%;}

/*#######################################*/
    
.magnetText_section{
    width: 100%; height: 100%;
    background-image: url(images/abc-sculpture/bg8.jpg);
    background-repeat: no-repeat;
    background-position: right;
    background-size: auto 100%;}

.magnetText_textContainer{
    position: absolute;
    width: 500px; height: 250px;
    top: 50%; left: 50%;  
    -webkit-transform: translate(-50%, -50%) rotateZ(1deg);
    -moz-transform: translate(-50%, -50%) rotateZ(1deg);
    -ms-transform: translate(-50%, -50%) rotateZ(1deg);
    -o-transform: translate(-50%, -50%) rotateZ(1deg);
    transform: translate(-50%, -50%) rotateZ(1deg);
    color: white;
    font-family: 'minpax';
    font-size: 55px;
    line-height: 1.3;
    letter-spacing: 1px;
    text-align: center;
    filter: blur(0.5px);
    cursor: url(images/cursor/cursor_white.png), auto;}

.magnetText_particle{
    position: absolute;
    transform-origin: center center;}

.magnetText_pickUpContainer{
    position: absolute;
    color: rgba(255, 255, 255, 1);
    filter: blur(0.5px);
    font-family: 'minpax';
    font-size: 55px;
    line-height: 0.1;
    cursor: url(images/cursor/cursor_white.png), auto;}

@media only screen and (max-width:666px){
    .magnetText_textContainer{width: 250px; height: 350px; font-size: 35px; letter-spacing: 0.5px;}
    .magnetText_pickUpContainer{font-size: 35px;}
}

/*#######################################*/

.cannibalCode_section{
    width: 100vw; height: 100vh;
    cursor: url(images/cursor/dot_white_blurred.png), auto;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 1);
    background-image: url(images/Copy_Background.jpg);
    background-repeat: no-repeat;
    background-position: right;
    background-size: auto 100%;}

.cannibalCode_textContainer{
    position:absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 75%; height: 75%;
    overflow: hidden;}

.cannibalCode_toggleButton{
    position: absolute;
    top:5%;
    font-family: 'dejavu_sans_monobook';
    line-height: 1.7;
    font-size: 1.7vw;
    color: rgba(255, 255, 255, 0.25);}

.cannibalCode_toggleButtonEn{left: 16.5%;}
.cannibalCode_toggleButtonEn.active{color: rgba(255, 255, 255, 0.45);}

.cannibalCode_toggleButtonDe{left: 21.5%;}
.cannibalCode_toggleButtonDe.active{color: rgba(255, 255, 255, 0.45);}

.cannibalCode_toggleButton:hover{ 
    cursor: pointer;
    color: rgba(255, 255, 255, 0.45);}

.cannibalCode_scrollContainer{
    position: absolute;
    top: 0; left: 0;
    font-family: 'dejavu_sans_monobook';
    line-height: 1.7;
    font-size: 1.7vw;
    color: rgba(255, 255, 255, 0.75);
    padding-top: 10vw;
    padding-left: 4vw;
    padding-bottom: 10vw;
    visibility: hidden;}

.cannibalCode_scrollContainer.active{visibility: visible;}

.cannibalCode_lineSpan{
    display: block;
    opacity: 0;}

.cannibalCode_lineSpan.active{opacity: 1;}

.cannibalCode_charSpan{opacity: 0.75;}

.cannibalCode_charSpan.active{padding-right: 0.2px;}

.cannibalCode_lineSpan:first-child{
    padding-left: 3vw;
    padding-bottom: 10vw;}

.cannibalCode_lineSpan.lastLine{margin-bottom: 2vw;}

.cannibalCode_lineSpan.firstLine{text-indent: 2vw;}

/*########################################################################################################################*/

.listening_section{
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 1);
    background-image: url(images/abc-sculpture/bg2.jpg);
    background-repeat: no-repeat;
    background-position: right;
    background-size: auto 100%;}

/*########################################################################################################################*/