*{
    padding: 0;
    margin: 0;
    align-items:center;
    vertical-align:middle;
    font-size: calc(0.4vw + 7px);
    line-height: 1.4;
    word-spacing: -3px;
    text-transform: uppercase;
    font-family: 'Source Code Pro', monospace;
    font-weight: 400;
    color: aquamarine;}

body{
    font-family:serif;
    background-color:black;
    overflow-x: hidden;}

#body{overflow-y: hidden;}

grid{
    display: grid;
    grid-template-columns: repeat(18, 1fr);
}

a{
    text-decoration:none;
    color: aquamarine;}

a:hover{
    background-color: white;
    color: black;
    }

info{
    display: block;}


.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }

div.se-pre-con {
	position: relative;
    width: 90vw;
    height: 100vh;
	z-index: 9999;
    background-color: black;
      display: flex;
  align-items: center;
  justify-content: center;}

img.loadimg{
    position: absolute;
    width: 20vw;}

    

/**********CURSOR**********/

#pointer:hover{
    cursor: pointer;}

#ew-resize:hover{
    cursor: ew-resize;}




/**********SCRUB_SCROLL**********/

div.scrubcontainer{
    background-color:aquamarine;}

span#mouseposition{
    position: absolute;
    left: 0.5vw;
    top: 0.7vw;
    z-index: 5;
    color: black;}

b{
    font-weight: 300;}



/**********BOXES**********/

div.relative{
    position: relative;}

div.box{
    overflow: hidden;}

.show{
    visibility: visible;}
.hide{
visibility: hidden;}


/**********FILL**********/

#fill{
    background-color:aquamarine;}

div.fill{
    width: calc(100vw / 18);
    height: calc(100vw / 18);}

div.filleins{
    width: calc(100vw / 9);
    height: calc(100vw / 18);
    grid-column: 16 / span 2;
    grid-row: 4 / span 1;}

div.fillzwei{
    width: calc(100vw / 18);
    height: calc(100vw / 18);
    grid-column: 11 / span 1;
    grid-row: 6 / span 1;}

div.filldrei{
    width: calc(100vw / 18);
    height: calc(100vw / 9);
    grid-column: 16 / span 1;
    grid-row: 16 / span 2;}

div.fillvier{
    width: calc(100vw / 9);
    height: calc(100vw / 18);
    grid-column: 3 / span 2;
    grid-row: 28 / span 1;}

div.fillfuenf{
    width: calc((100vw / 18)* 3);
    height: calc((100vw / 18)* 1);
    grid-column: 16 / span 3;
    grid-row: 41 / span 1;
    z-index: 0;}

div.fillsechs{
    width: calc((100vw / 18)* 1);
    height: calc((100vw / 18)* 2);
    grid-column: 2 / span 1;
    grid-row: 44 / span 2;
    z-index: 0;}

div.fillsieben{
    width: calc((100vw / 18)* 1);
    height: calc((100vw / 18)* 1);
    grid-column: 3 / span 1;
    grid-row: 47 / span 1;
    z-index: 0;}





/**********SPAN_EXTRA**********/


div.krypt{
    grid-column: 1 / span 8;
    grid-row: 2 / span 4;}

div.erotik{
    grid-column: 14/ span 3;
    grid-row: 3/ span 1;}

div.ae{
    grid-column: 13 / span 2;
    grid-row: 7/ span 2;}

div.aspekt{
    grid-column: 7/ span 5;
    grid-row: 10/ span 2;}

div.s{
    grid-column: 12/ span 2;
    grid-row: 15/ span 2;}

div.kauvid{
    grid-column: 14 / span 2;
    grid-row: 14/ span 3;}

div.colorblurr{
    grid-column: 1 / span 4;
    grid-row: 19 / span 4;}

div.paradox{
    grid-column: 3 / span 6;
    grid-row: 18 / span 2;
    z-index:1;}

div.stroboskop{
    grid-column: 12 / span 6;
    grid-row: 25 / span 9;
    background-color: aquamarine;}

div.q{
    grid-column: 2 / span 4;
    grid-row: 10 / span 6;}

div.qtest{
    grid-column: 2 / span 4;
    grid-row: 10 / span 6;
    width: calc((100vw / 18)*4);
    height: calc((100vw / 18)*6);
    background-image: url(p/q_schwarz_dreh.gif), url("p/aquamarine.jpg");
    background-size: 100%;}

div.blend{ background-blend-mode:normal;}

div.blend:hover{ background-blend-mode:darken;}

div.ue{
    grid-column: 6 / span 2;
    grid-row: 22 / span 3;}

div.e{
    grid-column: 2 / span 3;
    grid-row: 25 / span 3;
    z-index:;}

div.y{
    grid-column: 9/ span 6;
    grid-row: 25/ span 9;
    z-index: 5;}

div.blitz{
    grid-column: 1 / span 6;
    grid-row: 33 / span 3;
    z-index:;}

div.gewittereins{
    grid-column: 5 / span 4;
    grid-row: 37 / span 1;
    z-index: 5;
    background-color: aquamarine;}

div.gewitterzwei{
    grid-column: 5 / span 4;
    grid-row: 39 / span 1;
    z-index: 5;}

div.gewitterdrei{
    grid-column: 5 / span 4;
    grid-row: 41 / span 1;
    z-index: 5;}

div.d{
    grid-column: 13 / span 4;
    grid-row: 40 / span 6;
    z-index:;}

div.frittez{
    grid-column: 2 / span 15;
    grid-row: 50 / span 15;
    z-index: 5;}

div.spring{
    grid-column: 8/ span 6;
    grid-row: 49 / span 4;
    z-index: 0;
    background-blend-mode: darken;}

div.springzw{
    grid-column: 4/ span 2;
    grid-row: 56 / span 4;
    z-index: 0;}

div.springdrei{
    grid-column: 11/ span 2;
    grid-row: 59 / span 2;
    z-index: 0;}

div.stro{
    grid-column: 6/ span 1;
    grid-row: 63 / span 3;
    z-index: 0;}

div.x{
    grid-column: 5 / span 4;
    grid-row: 72 / span 4;
    z-index:;}

div.rastloseins{
    grid-column: 11/ span 6;
    grid-row: 71 / span 2;}

div.rastloszwei{
    grid-column: 11/ span 6;
    grid-row: 74 / span 2;}

div.rastlosdrei{
    grid-column: 11/ span 6;
    grid-row: 77 / span 2;}

div.rastlosvier{
    grid-column: 11/ span 6;
    grid-row: 80 / span 2;}

div.rad{
    grid-column: 1/ span 4;
    grid-row: 79 / span 6;
    z-index: 0;}

div.verwirrt{
    grid-column: 7/ span 10;
    grid-row: 84 / span 4;
    z-index: 0;}



/**********SPAN_INDEX**********/


div.emptyzwei{
    grid-column: 18 / span 1;
    grid-row: 1/ span 18;
    background-color: black;
    width: calc(100vw / 18);
    height: calc(100vw / 1);}

div.emptydrei{
    grid-column: 18 / span 1;
    grid-row: 18/ span 18;
    background-color: black;
    width: calc(100vw / 18);
    height: calc(100vw / 1);}

div.emptyvier{
    grid-column: 18 / span 1;
    grid-row: 36/ span 18;
    background-color: black;
    width: calc(100vw / 18);
    height: calc(100vw / 1);}

div.emptyfuenf{
    grid-column: 18 / span 1;
    grid-row: 54/ span 18;
    background-color: black;
    width: calc(100vw / 18);
    height: calc(100vw / 1);}

div.emptysechs{
    grid-column: 18 / span 1;
    grid-row: 72/ span 17;
    background-color: black;
    width: calc(100vw / 18);
    height: calc((100vw / 18)*17);}




/**********SPAN_INFO**********/

div.eddingeins{
    grid-column: 2 / span 4;
    grid-row: 3/ span 4;}

div.h{
    grid-column: 15 / span 2;
    grid-row: 4 / span 3;
    z-index: 1;
    padding-bottom: 0vw;}

div.infoeins{
    width: calc(0.4vw + 7px + 20em);
    top: calc(100vw / 18 * 1);
    left: calc(100vw / 18 * 5);
    background-color:;
    z-index: 1;
    padding-left: 0.7vw;
    grid-column: 16 / span 2;
    grid-row: 4 / span 1;
    position: absolute;}

div.infostro{
    grid-column: 13 / span 6;
    grid-row: 8/ span 3;
    z-index:0;}

div.v{
    grid-column: 6 / span 2;
    grid-row: 9 / span 2;
    z-index: 1;
    padding-bottom: 0vw;}

div.kryptinfo{
    grid-column: 1 / span 4;
    grid-row: 12 / span 2;}

div.fillinfo{
    width: calc((100vw / 18)* 2);
    height: calc((100vw / 18)* 1);
    grid-column: 17 / span 2;
    grid-row: 6 / span 1;
    z-index: 0;}

div.fillinfozwei{
    width: calc((100vw / 18)* 1);
    height: calc((100vw / 18)* 1);
    grid-column: 5 / span 1;
    grid-row: 10 / span 1;
    z-index: 0;}

div.eddingzwei{
    grid-column: 6 / span 6;
    grid-row: 15 / span 4;}

div.kgitter{
    grid-column: 4 / span 4;
    grid-row: 20/ span 4;}

div.infozwei{
    width: calc(0.4vw + 7px + 20em);
    top: calc(100vw / 18 * 17);
    left: calc(100vw / 18 * 11);
    background-color:;
    z-index: 1;
    padding-left: 0.7vw;
    grid-column: 16 / span 2;
    grid-row: 4 / span 1;
    position: absolute;}

div.eddingdrei{
    grid-column: 8 / span 1;
    grid-row: 22/ span 3;}

div.emptydreiinf{
    grid-column: 18 / span 1;
    grid-row: 18/ span 8;
    background-color: black;
    width: calc(100vw / 18);
    height: calc((100vw / 18)*9);}

div.z{
    grid-column: 10 / span 2;
    grid-row: 20 / span 3;
    z-index: 1;
    padding-bottom: 0vw;}



/**********FOOTER**********/

footer, footerimp{
    width: 20vw;
    color: aquamarine;
    bottom: 3vw;
    position: fixed;
    z-index: 10;
    padding-left: calc(100vw / 18);}


/**********IMPRESSUM**********/

div.impressum{
    padding-left: calc((100vw / 18)*5);
    padding-top: calc((100vw / 18)*1);
    padding-right: calc((100vw / 18)*1);  
    padding-bottom: 3vw;}



/**********HANDY**********/

@media only screen and (max-width: 600px){
    
    *{
        font-size: calc(1.1vw + 7px);
        line-height: 1.4;
        word-spacing: -2.5px;
        background-color: ;}
    
   
    div.impressum {
        padding-left: calc((100vw / 18)*1);
        padding-top: calc((100vw / 18)*2);
        padding-right: calc((100vw / 18)*1);  
        padding-bottom: 45vw;}
    
    div.impressum p{
        hyphens: auto;
        -moz-hyphens: auto;
        -o-hyphens: auto;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;}

    footer{
        width: 37vw;
        bottom: 10vw;}
    
    footerimp{
        width: 90vw;
        background-color:black;
        bottom: 0vw;
        padding-bottom: 10vw;
        padding-top: 10vw;}
    
    div.emptysechs{
    grid-column: 18 / span 1;
    grid-row: 72/ span 23;
    background-color: black;
    width: calc(100vw / 18);
    height: calc((100vw / 18)*23);}
    
    
    
/**********HANDY/INFO**********/    
    
div.eddingeins{
    grid-column: 2 / span 8;
    grid-row: 1/ span 8;}

div.h{
    grid-column: 14 / span 2;
    grid-row: 1 / span 3;
    z-index: 1;
    padding-bottom: 0vw;}
    
div.fillinfo{
    width: calc((100vw / 18)* 3);
    height: calc((100vw / 18)* 1);
    grid-column: 16 / span 3;
    grid-row: 3 / span 1;
    z-index: 0;}

div.infostro{
    grid-column: 13 / span 6;
    grid-row: 5/ span 2;}
    
div.infoeins{
    width: calc(0.4vw + 7px + 20em);
    top: calc(100vw / 18 * 9);
    right: calc(100vw / 18 * 1);
    left:auto;
    background-color:;
    z-index: 1;
    padding-left:0;
    grid-column: 16 / span 2;
    grid-row: 4 / span 1;
    position: absolute;}

div.fillinfozwei{
    width: calc((100vw / 18)* 1);
    height: calc((100vw / 18)* 1);
    grid-column: 1 / span 1;
    grid-row: 14 / span 1;
    z-index: 0;}
    
div.z{
    grid-column: 1 / span 6;
    grid-row: 16/ span 9;
    z-index: 1;
    padding-bottom: 0vw;}
    
div.eddingdrei{
    grid-column: 7 / span 2;
    grid-row: 28/ span 6;}
    
div.eddingzwei{
    grid-column: 10 / span 9;
    grid-row: 32 / span 6;}
    
div.kryptinfo{
    grid-column: 2 / span 6;
    grid-row: 36 / span 3;}

div.infozwei{
    width: calc(0.4vw + 7px + 20em);
    top: calc(100vw / 18 * 39);
    left: calc((100vw / 18)* 1);
    background-color:;
    z-index: 1;
    padding-left:0;
    grid-column: 16 / span 2;
    grid-row: 4 / span 1;
    position: absolute;}
    
div.kgitter{
    grid-column: 11 / span 7;
    grid-row: 55/ span 7;}
    
div.v{
    grid-column: 6 / span 5;
    grid-row: 52 / span 5;
    z-index: 1;}

div.emptydreiinf{
    grid-column: 18 / span 1;
    grid-row: 18/ span 46;
    background-color: black;
    width: calc(100vw / 18);
    height: calc((100vw / 18)*46);}
}