//fonts//

@font-face {
  font-family: 'main';
  src: url('font/Hoefler Text.ttc'),
       url('font/Hoefler Text.ttf') format('truetype'),
       url('font/Hoefler Text.woff') format('woff'),
       url('font/Hoefler Text.woff2') format('woff2'),
       url('font/Hoefler Text.otf') format('opentype'),
       url('font/Hoefler Text.svg') format('svg');
}

@font-face {
  font-family: 'drau3en';
  src: url('font/drau3en.woff'),
       url('font/Hoefler Text.ttf') format('truetype'),
       url('font/Hoefler Text.woff') format('woff'),
       url('font/Hoefler Text.woff2') format('woff2'),
       url('font/Hoefler Text.otf') format('opentype'),
       url('font/Hoefler Text.svg') format('svg');
}

/*cursors */

a:hover, h1:hover, .btn:hover, img.post:hover {
	-webkit-animation: cursor_zoom 120ms 1;
	animation: cursor_zoom  200ms 1;
	cursor: url(cur/zoom/z9.svg)16 16, auto;
}

#mail_link:hover {
	-webkit-animation: cursor_mail 120ms 1 ;
	animation: cursor_mail 120ms 1 ;
	cursor: url(cur/mail/m4.svg)16 16, auto;
}


#web_link:hover {
	-webkit-animation: cursor_contact 400ms 1;
	animation: cursor_contact  400ms 1;
	cursor: url(cur/contact/c10.svg)16 16, auto;
}

#mail_link{
	display: contents;
}

@-webkit-keyframes cursor_mail {
  0% {cursor: url(cur/mail/m1.svg)16 16, auto;}
  33% {cursor: url(cur/mail/m2.svg)16 16, auto;}
  66% {cursor: url(cur/mail/m3.svg)16 16, auto;}
  100% {cursor: url(cur/mail/m4.svg)16 16, auto;}
} 

@keyframes cursor_mail {
  0% {cursor: url(cur/mail/m1.svg)16 16, auto;}
  33% {cursor: url(cur/mail/m2.svg)16 16, auto;}
  66% {cursor: url(cur/mail/m3.svg)16 16, auto;}
  100% {cursor: url(cur/mail/m4.svg)16 16, auto;}
} 

@-webkit-keyframes cursor_mail_rev {
  0% {cursor: url(cur/mail/m4.svg)16 16, auto;}
  33% {cursor: url(cur/mail/m3.svg)16 16, auto;}
  66% {cursor: url(cur/mail/m2.svg)16 16, auto;}
  100% {cursor: url(cur/mail/m1.svg)16 16, auto;}
} 

@keyframes cursor_mail_rev {
  0% {cursor: url(cur/mail/m4.svg)16 16, auto;}
  33% {cursor: url(cur/mail/m3.svg)16 16, auto;}
  66% {cursor: url(cur/mail/m2.svg)16 16, auto;}
  100% {cursor: url(cur/mail/m1.svg)16 16, auto;}
} 

@-webkit-keyframes cursor_contact {
  0% {cursor: url(cur/contact/c1.svg)16 16, auto;}
  11% {cursor: url(cur/contact/c2.svg)16 16, auto;}
  22% {cursor: url(cur/contact/c3.svg)16 16, auto;}
  33% {cursor: url(cur/contact/c4.svg)16 16, auto;}
  44% {cursor: url(cur/contact/c5.svg)16 16, auto;}
  55% {cursor: url(cur/contact/c6.svg)16 16, auto;}
  66% {cursor: url(cur/contact/c7.svg)16 16, auto;}
  77% {cursor: url(cur/contact/c8.svg)16 16, auto;}
  88% {cursor: url(cur/contact/c9.svg)16 16, auto;}
  100% {cursor: url(cur/contact/c10.svg)16 16, auto;}
} 

@keyframes cursor_contact {
   0% {cursor: url(cur/contact/c1.svg)16 16, auto;}
  11% {cursor: url(cur/contact/c2.svg)16 16, auto;}
  22% {cursor: url(cur/contact/c3.svg)16 16, auto;}
  33% {cursor: url(cur/contact/c4.svg)16 16, auto;}
  44% {cursor: url(cur/contact/c5.svg)16 16, auto;}
  55% {cursor: url(cur/contact/c6.svg)16 16, auto;}
  66% {cursor: url(cur/contact/c7.svg)16 16, auto;}
  77% {cursor: url(cur/contact/c8.svg)16 16, auto;}
  88% {cursor: url(cur/contact/c9.svg)16 16, auto;}
  100% {cursor: url(cur/contact/c10.svg)16 16, auto;}
} 

@keyframes cursor_contact_leave {
   0% {cursor: url(cur/contact/c10.svg)16 16, auto;}
  11% {cursor: url(cur/contact/c9.svg)16 16, auto;}
  22% {cursor: url(cur/contact/c8.svg)16 16, auto;}
  33% {cursor: url(cur/contact/c7.svg)16 16, auto;}
  44% {cursor: url(cur/contact/c6.svg)16 16, auto;}
  55% {cursor: url(cur/contact/c5.svg)16 16, auto;}
  66% {cursor: url(cur/contact/c4.svg)16 16, auto;}
  77% {cursor: url(cur/contact/c3.svg)16 16, auto;}
  88% {cursor: url(cur/contact/c2.svg)16 16, auto;}
  100% {cursor: url(cur/contact/c1.svg)16 16, auto;}
} 

@-webkit-keyframes cursor_contact_leave {
  0% {cursor: url(cur/contact/c10.svg)16 16, auto;}
  11% {cursor: url(cur/contact/c9.svg)16 16, auto;}
  22% {cursor: url(cur/contact/c8.svg)16 16, auto;}
  33% {cursor: url(cur/contact/c7.svg)16 16, auto;}
  44% {cursor: url(cur/contact/c6.svg)16 16, auto;}
  55% {cursor: url(cur/contact/c5.svg)16 16, auto;}
  66% {cursor: url(cur/contact/c4.svg)16 16, auto;}
  77% {cursor: url(cur/contact/c3.svg)16 16, auto;}
  88% {cursor: url(cur/contact/c2.svg)16 16, auto;}
  100% {cursor: url(cur/contact/c1.svg)16 16, auto;}
} 

@-webkit-keyframes cursor_zoom {
  0% {cursor: url(cur/zoom/z1.svg)16 16, auto;}
  12,5% {cursor: url(cur/zoom/z2.svg)16 16, auto;}
  25% {cursor: url(cur/zoom/z3.svg)16 16, auto;}
  37,5% {cursor: url(cur/zoom/z4.svg)16 16, auto;}
  50% {cursor: url(cur/zoom/z5.svg)16 16, auto;}
  62,5% {cursor: url(cur/zoom/z6.svg)16 16, auto;}
  75% {cursor: url(cur/zoom/z7.svg)16 16, auto;}
  87,5% {cursor: url(cur/zoom/z8.svg)16 16, auto;}
  100% {cursor: url(cur/zoom/z9.svg)16 16, auto;}
} 

@keyframes cursor_zoom {
  0% {cursor: url(cur/zoom/z1.svg)16 16, auto;}
  12,5% {cursor: url(cur/zoom/z2.svg)16 16, auto;}
  25% {cursor: url(cur/zoom/z3.svg)16 16, auto;}
  37,5% {cursor: url(cur/zoom/z4.svg)16 16, auto;}
  50% {cursor: url(cur/zoom/z5.svg)16 16, auto;}
  62,5% {cursor: url(cur/zoom/z6.svg)16 16, auto;}
  75% {cursor: url(cur/zoom/z7.svg)16 16, auto;}
  87,5% {cursor: url(cur/zoom/z8.svg)16 16, auto;}
  100% {cursor: url(cur/zoom/z9.svg)16 16, auto;}
} 

@keyframes cursor_zoom_rev {
  0% {cursor: url(cur/zoom/z9.svg)16 16, auto;}
  12,5% {cursor: url(cur/zoom/z8.svg)16 16, auto;}
  25% {cursor: url(cur/zoom/z7.svg)16 16, auto;}
  37,5% {cursor: url(cur/zoom/z6.svg)16 16, auto;}
  50% {cursor: url(cur/zoom/z5.svg)16 16, auto;}
  62,5% {cursor: url(cur/zoom/z4.svg)16 16, auto;}
  75% {cursor: url(cur/zoom/z3.svg)16 16, auto;}
  87,5% {cursor: url(cur/zoom/z2.svg)16 16, auto;}
  100% {cursor: url(cur/zoom/z1.svg)16 16, auto;}
} 

@-webkit-keyframes cursor_zoom_rev {
  0% {cursor: url(cur/zoom/z9.svg)16 16, auto;}
  12,5% {cursor: url(cur/zoom/z8.svg)16 16, auto;}
  25% {cursor: url(cur/zoom/z7.svg)16 16, auto;}
  37,5% {cursor: url(cur/zoom/z6.svg)16 16, auto;}
  50% {cursor: url(cur/zoom/z5.svg)16 16, auto;}
  62,5% {cursor: url(cur/zoom/z4.svg)16 16, auto;}
  75% {cursor: url(cur/zoom/z3.svg)16 16, auto;}
  87,5% {cursor: url(cur/zoom/z2.svg)16 16, auto;}
  100% {cursor: url(cur/zoom/z1.svg)16 16, auto;}
} 

.mail_leave {
	-webkit-animation: cursor_mail_rev 140ms 1;
    animation: cursor_mail_rev 140ms 1;
}

.contact_leave {
	-webkit-animation: cursor_contact_leave 400ms 1;
    animation: cursor_contact_leave 400ms 1;
}

.zoom_leave {
	-webkit-animation: cursor_zoom_rev 200ms 1;
    animation: cursor_zoom_rev 200ms 1;
}

/*classes*/

a {
    text-decoration: none;
    color: var(--bgt);
    opacity: 0.8;
}

a:hover {
    opacity: 1;
    text-decoration: underline;
}

.btn {
    opacity: 0.6;
}

.no-scroll {
    overflow-x: hidden;
    overflow-y: hidden;
}

/*variable*/

:root {
  --width-x: 74vh;
  --bgc: #282825;    
  --bgt: #DAFF8A;    
  --bgd: #464C42;    
}

/*styles*/

html{
	cursor: url(cur/default.svg)16 16, auto;
    
    overflow-y: auto;
    overflow-x: hidden;
}

body {
	margin: 0;
	padding: 0;
    background-color: var(--bgc);

	font-family: sans-serif;
	font-size: 100%;
	color: var(--bgt);
	position: relative;
    width: 100vw;
    overflow-x: hidden;
    overflow-y: hidden;
    
    touch-action: auto;
    -ms-touch-action: auto;
    
    font-feature-settings: "kern" on;
}

.gm-style {
    color: var(--bgd);
}

#loading_screen {
    position: fixed;
    width: 100vw;
    height: 100%;
    background-color: var(--bgc);
    
    z-index: 22;
    top: 0;
}

#loading_frame {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: max( 10% , 240px  );
        
    width: 100%;
    height: min(60vw , 80vh );
            
}

    #loading_top{
        height: 50%;
        width: 100%;
    }    
    
    #loading_middle{
        width: 100%;
        margin-top: max(10% , 80px);
    }

    #loading_bottom{
        height: 6%;
        width: 100%;
        margin-top: 2%;

    }

#loading_globe {
    margin-left: auto;
    margin-right: auto;
    display: block;
    height: 50px;
    width: 50px;
    background-image: url(anim/map_3.svg);
	-webkit-animation: map_animation 1.8s steps(58) infinite;
    animation: map_animation 1.8s steps(58) infinite;
     transform: translate(-0%, -0%) scale(0.8);
}

.loading-bar {
  margin-left: auto;
  margin-right: auto;
  width: 36%;
  height: max( 20% , 7px );
  background-color: var(--bgd);
    border-radius: 25px;
}

.loading-progress {
  height: 100%;
  width: 0%;
  background-color: var(--bgt);
  transition: width 1s;
  border-radius: 25px !important;
  opacity: 0;
}

#blocker{
    position: absolute;
    width: 100vw;
    height: 120vh;
    height: 100%;
    background-color: var(--bgc);
    z-index: 99;
    
    display: none;
}

#wrapper {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

#top_half {
    width: 100%;
    height: 100vh;
}



#symbol {
}

#cover {

    height: 100%;
    width: 100%;
    
    margin-top: 0%;
    
    background-color: var(--bgc);
    z-index: 10;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
}

#txt_cover {
    position: absolute;
    margin-top: 14vh;

    width: 100vw;
    height: 91vh;
    
    background-color: var(--bgc);
    z-index: 44;
    
    display: none;
    opacity: 0;
}

#main_txt {
    position: relative;
    text-align: center;
    
    width: max( calc(var(--width-x) * 0.4), 300px );

    margin-left: auto;
    margin-right: auto;
    
    top: 38%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    
    line-height: 1.4;
    
    opacity: 0.8;
/*    font-family: 'main';*/
}

#cover_container {
    height: 89.8vh;
    margin-top: max( calc(( var(--width-x) / 9 ) + 0.4%), calc(6em + 0.4%));
    
    width: 100vw ;
    position: absolute;
    margin-left:auto;
    margin-right: auto;
    
    display: none;
    opacity: 0;
    
    background-color: var(--bgc);
    z-index: 10;
    
    flex-direction: column; 
}

.windows #cover_container{
    margin-top: max( calc(( var(--width-x) / 8 ) + 0.8%), calc(5em + 0%));
}

#map_stage {
    
    margin-top: min(-8vw, -80px);
    width: max( calc(var(--width-x) - 14vh + 6vw), 360px );
    height: max( calc(var(--width-x) - 14vh + 6vw), 360px );
    
    margin-left: auto;
    margin-right: auto;
    
    
    position: relative;
}

#close_btn {
    height: max(38px, 7%);
    
    margin-top: max(  calc((var(--width-x) - 14vh + 6vw) + 2%), calc(360px) + 2%);
    margin-left: 1%;
}

#container {
    height: 100vh;
    width: 100vw ;
    position: relative;
    margin-left:auto;
    margin-right: auto;
    
    display: flex;
    flex-direction: column; 
    
}

#headline{
    margin-top: max( 2%, 34px );
    width: 100%;
    height: 4%;
    
}

#h1_c{
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    
}

h1 {
    font-family: 'drau3en';
    font-kerning: auto;
    font-weight: 100;
    
    display: block;
    color: var(--bgt);
    opacity: 0.8;
    
    font-size: calc((100vw - var(--width-x)) / 4 );
    
    padding: 0;
    margin-top: -6%;
    margin-bottom: 0vh;
    
/*    filter: drop-shadow(0.01em 0.01em 1px #444444);*/
}

#h1 {
        font-size: max( calc( var(--width-x) / 10 ), 5em);
        margin-top: -9%;
}

h1:hover {
    opacity: 1;
}


#h_loading {
    width: 100%;
    text-align: center;
    
    font-size: min( calc( var(--width-x) / 2 ), 30vw);

    opacity: 1;
    margin-left: auto;
    margin-right: auto;
    padding-left: 2vh;
    
}

#main_div {
     
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    height: 84.4%;
    width: 100%;
    
    margin-top: 1.4%;
    
}

#main_nav{
    height: 4.4%;
    width: max( calc(var(--width-x) - 14vh + 6vw), 360px );
    
    margin-left: auto;
    margin-right: auto;
    
    margin-top: -3vw;
    
}

#insta_btn{
    height: 100%;
    float: right;
    
    margin-top: -2%;
}

#stage{
    width: max( calc(var(--width-x) - 14vh + 6vw), 360px );
    height: max( calc(var(--width-x) - 14vh + 6vw), 360px );

    
    margin-top: 0.4%;
    margin-bottom: 0.4%;
    margin-left: auto;
    margin-right: auto;
        
}

#stage_img{
    width: max( calc(var(--width-x) - 14vh + 6vw), 360px );
    height: max( calc(var(--width-x) - 14vh + 6vw), 360px );
    box-shadow: 0 6.4px 14.4px 0 rgb(0 0 0 / 13%), 0 1.2px 3.6px 0 rgb(0 0 0 / 11%);
}

#map_cover {
    width: max( 50%, 360px);
    height: 50%;
    display: none;
    position: absolute;
    margin-right: auto;
    margin-right: auto;
    z-index: 12;
    
    background-color: var(--bgc);
    
    text-align: center;
    
    opacity: 0.9;

    
}

#map_cover_content{
    align-content: center;
    width: 100%;
  
}

#consent_p {
    margin-top: 5%;
}

#consent_btn{
    margin-left: auto;
    margin-right: auto;
    width: max( 30%, 240px );
    background-color: var(--bgt);
    color: var(--bgc);
    padding: 1%;
}

#map {
  opacity: 0;
  display: none;
  position: absolute;
  width: max( calc(var(--width-x) - 14vh + 6vw), 360px );
  height: max( calc(var(--width-x) - 14vh + 6vw), 360px );
  z-index: 11;
  box-shadow: 0 6.4px 14.4px 0 rgb(0 0 0 / 13%), 0 1.2px 3.6px 0 rgb(0 0 0 / 11%);
  margin-top: -2.8%;
}

#main_bottom {
    height: 4.4%;
    width: max( calc(var(--width-x) - 14vh + 6vw), 360px );
    
    margin-left: auto;
    margin-right: auto;
    
    display: flex;
    flex-direction: row;
    justify-content: space-between;   
    
}

#bottom_left{
    
    width: 60%;
    height: 100%;
    
    display: flex;
    flex-direction: row;
}

#map_btn{
    position: relative;
    height: 50px;
    width: 50px;
    
    opacity: 0.8;
    background-image: url(anim/map_3.svg);
	-webkit-animation: map_animation 1.8s steps(58) infinite;
    animation: map_animation 1.8s steps(58) infinite;
    transform: translate(-0px, -0px) scale(0.9);
    
    margin-top: 1vh;
    margin-bottom: 0vh;
    padding: 0;
    
    transform-origin: top left;
    
}

#map_btn:hover{
    -webkit-animation-play-state:paused;
    animation-play-state:paused;
    
	cursor: url(cur/zoom/z9.svg)16 16, auto;
}

@-webkit-keyframes map_animation {
    100% { background-position: -2900px 0; } 
}

@keyframes map_animation {
    100% { background-position: -2900px 0; } 
}

@keyframes turn_animation {
    100% { background-position: -1152px 0; } 
}

#lat {
    margin-left: 4%;
    margin-top: max( 4.5%, 18px );
    
    opacity: 0.6;
    font-size: max(1.1vw, 15px);
}

#lng {
    margin-left: 3%;
    margin-top: max( 4.5%, 18px );

    opacity: 0.6;
    font-size: max(1.1vw, 15px);
    
}

#bottom_right{
        
    width: calc(8.2vh);
    width: max(fit-content);

    height: 100%;
    
    display: flex;
    flex-direction: row;
    
    margin-top: 2%;
}

#gallery_link {
    margin-right: 4%;
    height: 100%;
}

#play_btn {
    height: 100%;
}

#bottom_half {
    width: 100%;
}

#gallery{
    width: max( calc(var(--width-x) - 14vh + 6vw), 360px );
    min-height: 100vh;
    margin-left:auto;
    margin-right: auto;
    
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}

.post {
    width: max( calc(((var(--width-x) - 14vh + 6vw) / 3) - 2vw), calc((360px / 3) - 2vw) );
    height: max( calc(((var(--width-x) - 14vh + 6vw) / 3) - 2vw), calc((360px / 3) - 2vw) );
    
     margin: 1vw;
     box-shadow: 0 6.4px 14.4px 0 rgb(0 0 0 / 13%), 0 1.2px 3.6px 0 rgb(0 0 0 / 11%);

}

#bottom_line {
    width: 80vw;
    height: 2px;
    background-color: var(--bgc);
    margin-left: auto;
    margin-right: auto;
    margin-top: 14vh;
    opacity: 0.2;
}

#foot_menue {
    height: 8vh;
}

#foot_links {
    margin-top: 4vh;
    text-align: center;
}


#foot_links a {
    opacity: 0.4;
}

#foot_links a:hover {
   text-decoration: none;
   opacity: 0.8;
}

#impressum_wrap {
    margin-top: 5vh;
    width: max( 44vw , 400px );
    margin-left: auto;
    margin-right: auto;
    height:95vh;
    overflow-y: scroll;
    overflow-x: hidden;
}

#impressum_h {
    margin-top: 2%;
    height: auto;
    text-align-last: center;
    
    font-size: min( calc( var(--width-x) / 4 ), 30vw);

    display: block;
    margin-left: auto;
    margin-right: auto;

}

#impressum_h a:hover {
    text-decoration: none;
}

#impressum {
     margin-top: max( 60px , 10% );   
    margin-left: 20%;
}

#legal{
    margin-top: 5vh;
    margin-left: 20%;

}

.impressum_p {
    width: 70%;
    opacity: 0.8;
    margin-left: 20%;
     font-size: 80%;

}

#last {
    margin-bottom: 200px;
}

#impressum_wrap li{
    opacity: 0.8;
    width: 25vw;
    margin-left: 9vw;
    font-size: 80%;

}

@media screen and (max-width: 850px) {
    
    :root {
      --width-x: 84vw;
    }
    
}

@media screen and (min-width: 975px) {
    
    #loading_globe {
         transform: translate(-0%, -0%) scale(1.4);
    }
    
    .windows #loading_frame {
        margin-top: max( 10% , 60px  );
    }
    
    #cover_container {
        align-items: center;

/*        margin-top: max( calc(( var(--width-x) / 10 ) + 0.8%), calc(5em + 0.8%));*/
        
        margin-top: max( calc(( var(--width-x) / 10 ) + 0.8%), calc(6em + 0.4%));
    }
    
    .windows #cover_container{
        margin-top: max( calc(( var(--width-x) / 8 ) + 0.8%), calc(5em + 0.4%));
    }
    
    #cover {
        height: max(80vh, 800px);
        height: max(86vh);
        margin-top: max( calc(5.4vh - 3vh), calc(20px - 1vh) );
    }
    
    #txt_cover {
/*        margin-top: 11vh;*/
        margin-top: 16vh;
    }
    
    .windows #txt_cover {
        margin-top: 14vh;
    }
    
    #main_txt {
        width: max( calc(var(--width-x) * 0.5), 360px );
    }

    
    #main_div {
        
        flex-direction: row;

        width: fit-content;
        height: min(80vh, 800px);
        margin-top: min( 8.4%, 80px );
                
        margin-left: auto;
        margin-right: auto;
        
        height: 89.4%; 
    }
    
    #main_nav{
        
        height: min( calc(var(--width-x) - 14vh + 11vw), 800px );
        width: max( calc( ((100vw - var(--width-x)) / 2) / 16), 45px );

        margin-left: 0;
        margin-right: max(1% , 1vw);
        margin-top: 0%;
        
    }

    #insta_btn{
        height: max( calc( ((100vw - var(--width-x)) / 2) / 16), 45px );
        width: max( calc( ((100vw - var(--width-x)) / 2) / 16), 45px );
        align-self: flex-start;

    }
    
    #stage{
        width: min( calc(var(--width-x) - 14vh + 11vw), 800px );
        height: min( calc(var(--width-x) - 14vh + 11vw), 800px );


        margin-top: 0.4%;
        margin-bottom: 0.4%;
        margin-left: auto;
        margin-right: auto;

    }
    
    #map_stage {
        width: min( calc(var(--width-x) - 14vh + 11vw), 800px );
        height: min( calc(var(--width-x) - 14vh + 11vw), 800px );
        
        margin-top: -0.4%;
        margin-left: auto;
        margin-right: auto;

        }
    
    #map {
      width: min( calc(var(--width-x) - 14vh + 11vw), 800px );
      height: min( calc(var(--width-x) - 14vh + 11vw), 800px );
      margin-top: 0%;

    }
        
   #close_btn {
         height: max(38px, 6%);
        position: absolute;

        left: min( calc(var(--width-x) - 14vh + 11vw), 800px );
        top: max(0.4%, 4px);
       
        margin-left: 2.6%;
        margin-top: 2.4%
        
    }
            
    #stage_img{
        width: min( calc(var(--width-x) - 14vh + 11vw), 800px );
        height: min( calc(var(--width-x) - 14vh + 11vw), 800px );
        box-shadow: 0 6.4px 14.4px 0 rgb(0 0 0 / 13%), 0 1.2px 3.6px 0 rgb(0 0 0 / 11%);
    }

    #main_bottom {
        height: min( calc(var(--width-x) - 14vh + 11vw), 800px );
        width: max( calc( ((100vw - var(--width-x)) / 2) / 16), 45px );

        margin-left: max(1% , 1vw);


        flex-direction: column;
        
    }

    #bottom_left{
        width: 100%;
        height: auto;

        flex-direction: column;

    }
    
    #lat {
        margin-top: max( 2.5%, 11px );
        font-size: min(1.4vw, 20px);
    }

    #lng {
        margin-top: 6%;
        font-size: min(1.4vw, 20px);

    }

    #bottom_right{

        width: 100%;
        height: auto;

        flex-direction: column;
        margin-top: 0vh;
        
    }

    #gallery_link {
        width: 100%;
        margin-bottom: 8%;
    }

    #play_btn {
        width: 100%;
    }
    
    #gallery {
        margin-top: max(2vh , 60px);
        width: min( calc(var(--width-x) - 14vh + 12vw), 800px );
    }
    
    .post {
        width: min( calc(((var(--width-x) - 14vh + 11vw) / 3) - 2vw), calc((800px / 3) - 2vw) );
        height: min( calc(((var(--width-x) - 14vh + 11vw) / 3) - 2vw), calc((800px / 3) - 2vw) );


         margin: 1vw;
         box-shadow: 0 6.4px 14.4px 0 rgb(0 0 0 / 13%), 0 1.2px 3.6px 0 rgb(0 0 0 / 11%);

    }
    
    .windows #headline{
        margin-top: 1%;
    }

    .windows #main_div{
        margin-top: 4%;
    }
    
    .windows #map_stage{
        margin-top: min(-4vw, -40px);
    }
}

@media screen and (min-width: 1920px) {
    
    
    #cover {
        margin-top: 3vh;
        height: min(80vh, 1100px);
    }
    
    .windows #cover_container{
        margin-top: max( calc(( var(--width-x) / 8 ) + 0.8%), calc(5em + 2%));
    }
    
    #main_div {
        height: min(80vh, 1100px);
    }
    
    #main_nav{
        
        height: min( calc(var(--width-x) - 14vh + 11vw), 1100px );
        width: max( calc( ((100vw - var(--width-x)) / 2) / 16), 45px );
    }
    
    #stage{
        width: min( calc(var(--width-x) - 14vh + 11vw), 1100px );
        height: min( calc(var(--width-x) - 14vh + 11vw), 1100px );
    }
    
    #map_stage {
        margin-top: max(1%, 40px);

        width: min( calc(var(--width-x) - 14vh + 11vw), 1100px );
        height: min( calc(var(--width-x) - 14vh + 11vw), 1100px );
    }
    
    #map {
      width: min( calc(var(--width-x) - 14vh + 11vw), 1100px );
      height: min( calc(var(--width-x) - 14vh + 11vw), 1100px );
    }
    
     #close_btn {
        height: max(38px, 4.4%);
        position: absolute;

        left: min( calc(var(--width-x) - 14vh + 11vw), 1100px );
        top: 0vh;

        margin-left: 2%;
        margin-top: 0%;
        
    }
    
    #stage_img{
        width: min( calc(var(--width-x) - 14vh + 11vw), 1100px );
        height: min( calc(var(--width-x) - 14vh + 11vw), 1100px );
    }

    #main_bottom {
        height: min( calc(var(--width-x) - 14vh + 11vw), 1100px );
    }
     
    #gallery {
        width: min( calc(var(--width-x) - 14vh + 12vw), 1100px );
    }
    
    .post {
        width: min( calc(((var(--width-x) - 14vh + 11vw) / 3) - 2vw), calc((1100px / 3) - 2vw) );
        height: min( calc(((var(--width-x) - 14vh + 11vw) / 3) - 2vw), calc((1100px / 3) - 2vw) );
    }
    
       #cover_container {
/*        margin-top: max( calc(( var(--width-x) / 9 ) + 0.8%), calc(5em + 0.8%));*/
        margin-top: max( calc(( var(--width-x) / 9 ) + 0.8%), calc(5em + 2%));
    }
    
    #txt_cover {
        margin-top: 11vh;
    }
}

@media (orientation: landscape) and (max-width: 1000px) and (min-aspect-ratio: 4/3) {
    #blocker{
        display: flex;
        align-items: flex-start;
        justify-content: center;
    }
    
    #turn_anim{
        position: relative;
        width: 64px;
        height: 64px;
        
        margin-top: 40vh;
         -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        
        background-size: cover;
        
        background-image: url(anim/turn.svg);
        -webkit-animation: turn_animation 1.4s steps(18) infinite;
        animation: turn_animation 1.4s steps(18) infinite;
        transform: translate(-0px, -0px) scale(5);
    }
    
    body{
        width: 100vw;
        height: 100vh;
        
        overflow: hidden !important;
    }
    
    html {
        overflow: hidden !important;
        
        width: 100vw;
        height: 100vh;
    }

}

.windows #txt_cover{
        margin-top: 13vh;
}

.windows #cover{
    margin-top: 3%;
}

.windows #main_txt{
    top: 44%;
}