/*-----Root Config-----*/
*{
    margin: 0;
    padding: 0; 
    box-sizing: border-box; 
    scroll-behavior: smooth;
}

body{
    animation: menu_background_grid 60s infinite ease-in;
    background-color: #ff0000;
}

@keyframes menu_background_grid{
    0% {background-color: #ff0000}
    16% {background-color: #ffff00}
    32% {background-color: #00ff00}
    48% {background-color: #00ffff}
    64% {background-color: #0000ff}
    85% {background-color: #ff00ff}
    100% {background-color: #ff0000}
}

:root {
    --button_height_clsd: 3.4vh; /*Ratio = 5/18.5*/
    --button_width_clsd: 3.4vh;
    --button_width_opnd: 15vh;
    --button_pos_clsd: 0vh;
    --button_pos_opnd: -.8vh;
    --menu_width: 22vh; 
    --button_activ_opac: .85; 
    --button_deactiv_opac: .45; 
    --button_icon_pos_clsd: 0vh; 
    --button_icon_pos_opnd: .8vh; 
    --button_activ_border: .2vh; 
    --button_deactiv_border: .175vh; 
    --button_opnd_border-radius: 0.25vh; 
    --button_clsd_border-radius: 3.5vh; 
    --Fade_In_animation: 1.5s FadeIn; 
    --flattext_size: 1.18vh; 
    --buttontext_size: 2.35vh; 
    --col-2-width: 72.5vh; 
    --col-3-width: 25vh; 
    --col-4-width: 60vh; 
    --col-5-width: 50vh; 
    --switch-view-box_height: 6vh; 
    --switch-view-box_width: 14vh; 
}

.display-none{
    display: none; 
}

/*-----Color/Theme Overlays-----*/
.theme-overlay{
    position: absolute; 
    width: 2500vh;
    height: 100vh; 
    pointer-events: none;
}

/*-----Monochrome Mode Overlay-----*/
#mono-overlay{
    z-index: 30;
    background-color: #262524; 
    mix-blend-mode: hue; 
}

/*-----Custom Color Mode Overlay-----*/
#cstm-overlay{
    z-index: 30;
    mix-blend-mode: difference; 
    background-color: rgb(236, 0, 0); 
}

/*-----Single Colorchange Overlay-----*/
.colorchange{
    position: relative; 
    width: 100%; 
    height: 100%; 
    background-position: center; 
    background-size: contain; 
    background-repeat: no-repeat; 
    backgroundcolor:  none; 
    mix-blend-mode: difference; 
    z-index: 9; 
    margin:0; 
}

.cc01{animation: cc01 infinite 25s; }
@keyframes cc01 {
  0% { background-color: #ff0000; }
  16% { background-color: #14ff00; }
  33% { background-color: #00f5ff; }
  50% { background-color: #ff00eb; }
  66% { background-color: #00f5ff; }
  84% { background-color: #14ff00; }
  100% { background-color: #ff0000; }
}

.cc02{animation: cc02 infinite 30s; }
@keyframes cc02 {
  0% { background-color: #eaff4c; }
  16% { background-color: #cc0000; }
  33% { background-color: #ba00ff; }
  50% { background-color: #0000ff; }
  66% { background-color: #ba00ff; }
  84% { background-color: #cc0000; }
  100% { background-color: #eaff4c; }
}

.cc03{animation: cc03 infinite 20s; }
@keyframes cc03 {
  0% { background-color: #ffffff; }
  33% { background-color: #ff6200; }
  50% { background-color: #00d372; }
  66% { background-color: #ff6200; }
  100% { background-color: #ffffff; }
}

.cc04{animation: cc04 infinite 10s; }
@keyframes cc04 {
  0% { background-color: #ff00e2; }
  50% { background-color: #FFF; }
  100% { background-color: #ff00e2; }
}

.cc05{animation: cc05 infinite 15s; }
@keyframes cc05 {
  0% { background-color: #26a700; }
  33% { background-color: #e23d00; }
  50% { background-color: #1400ff; }
  66% { background-color: #e23d00; }
  100% { background-color: #26a700; }
}

.cc06{animation: cc06 infinite 40s; }
@keyframes cc06 {
  0% { background-color: #ea4cff; }
  16% { background-color: #00cc5e; }
  33% { background-color: #ff00ff; }
  50% { background-color: #ffffff; }
  66% { background-color: #ff00ff; }
  84% { background-color: #00cc5e; }
  100% { background-color: #ea4cff; }
}

.cc07{animation: cc07 infinite 45s; }
@keyframes cc07 {
  0% { background-color: #00d8ff; }
  16% { background-color: #ffff06; }
  33% { background-color: #ff00c4; }
  50% { background-color: #ffffff; }
  66% { background-color: #ff00c4; }
  84% { background-color: #ffff06; }
  100% { background-color: #00d8ff; }
}

/*-----Exposures-----*/
.exposure01{
    background-image: url(../../img/exposure01.jpg);
}

.exposure02{
    background-image: url(../../img/exposure02.jpg);
    background-size: cover; 
}
.exposure04{
    background-image: url(../../img/exposure04.jpg);
    background-size: cover; 
}
.exposure05{
    background-image: url(../../img/exposure05.jpg);
}

/*-----Menu-----*/
.menu{
    position: fixed; 
    height: 100vh; 
    left: 0; 
    z-index: 50;
    color: rgb(255, 255, 255);
    mix-blend-mode: difference; 
}

.menu_blur{
    position: fixed; 
    height: 100vh;
    z-index: 10;
    backdrop-filter: blur(.75vh);
    box-shadow: -5px 0px 68px -24px rgba(0, 0, 0, 0.54);
}


/*-----Menu Boxes-----*/
.menu_box{
    position: relative;
    backgroundcolor: aqua; 
    left: 1.725vh; 
    margin-bottom: 3vh; 
}

/*-----Menu Open/Close Animation-----*/
.menu_close_animation{animation: menu_off 1s; opacity: 0;}
@keyframes menu_off{
    0% {opacity: 1;}
    100% {opacity: 0;}
}
.menu_open_animation{animation: menu_on 1s cubic-bezier(.4, .15, 0, .7); opacity: 1; width: var(--menu_width); height: 100vh; box-shadow: -5px 0px 68px -24px rgba(0, 0, 0, 0.54); 
    background-color: rgba(54, 54, 54, 0.4);}
@keyframes menu_on{
    0%{opacity: 0;}
    100% {opacity: 1;}
}


/*-----Introduction Box-----*/
.introduction{
    height: 15vh; 
    width: 20vh; 
    top: 12vh; 
    text-align: justify; 
    text-align-last: justify; 
    backgroundcolor: aqua;
    backgroundimage: url(../../img/iobl-font.png); 
    background-size: contain; 
    background-repeat: no-repeat; 
    background-position: center; 
    z-index: 50; 
}

.introduction .text12r{
    letter-spacing: 0.035vh;
}

/*-----Introduction Box Text SPANS-----*/
#span1{letter-spacing: 0vh;}
#span2{letter-spacing: -0.015vh;}
#span3{letter-spacing: 0vh;}


/*-----Histogram Box-----*/
.histogram{
    display: flex;
    align-items: flex-end;
    height: 6vh;
    backgroundcolor: aqua; 
    width: var(--button_width_opnd); 
    top: -18vh;
    margin-left: 1.275vh;
    padding: 0;
    brder: var(--button_deactiv_border) #ffffff solid; 
    border-radius: var(--button_opnd_border-radius); 
    transform: rotate(180deg); 
}

.bar{
    width: 0.07vh;
    background-color: #ffffff;
    display: flex;
    align-items: flex-end;
}

/*-----Controls Explanation Text-----*/
.controls_expl_text{
    height: 5vh; 
    width: 20vh;
    top: 0vh; 
    backgroundcolor: aqua; 
    margin-left: 1.5vh;  
}

/*-----Control Button Area-----*/
.control_area{
    width: var(--button_width_opnd); 
    height: var(--button_height_clsd);
    margin-bottom: 1.5vh; 
    backgroundcolor: aqua; 
}

/*-----Control Buttons-----*/
.control_buttons{
    position: absolute;
    height: 27.5vh; 
    width: 3vh;
    transform: translateY(-50%); 
    top: 50%; 
    left: 4vh;
    borderradius: 1vh;
    backgroundcolor: aqua;
    display: block;  
}

/*-----Control Buttons-----*/
.buttons{
    position: absolute;
    float: left; 
    height: var(--button_height_clsd); 	
    border: var(--button_deactiv_border) #ffffff solid;
    opacity: 0.45; 
    color: #ffffff; 
    cursor: pointer;
    background: none; 
    background-repeat: no-repeat; 
    background-position: left;
    border-radius: var(--button_opnd_border-radius);
    box-shadow: 0 0 11px 3px rgba(0, 0, 0, 0.04);
}

/*-----Autoscroll Button/Slider-----*/
#button_autoscroll{border-bottom: none; z-index: 100;}
.autoscroll_area{
    border: var(--button_deactiv_border) #ffffff solid;    
    border-radius: var(--button_opnd_border-radius);
    box-shadow: 0 0 11px 3px rgba(0, 0, 0, 0.04);
    opacity: var(--button_deactiv_opac);
}

/*-----Control Buttons Status-----*/
.button-pressed{ 
    border: var(--button_activ_border) #ffffff solid;
    font-family: 'Inter Medium', sans-serif;
    opacity: var(--button_activ_opac); 
}


/*-----Control Button Status: Hover-----*/
.buttons:hover{
    opacity: 0.65;
}

/*-----Control Button Status: Active-----*/
.buttons:active{
    transform: scale(0.99); 
    opacity: var(--button_activ_opac);
}

/*-----Control Button Status: Opened-----*/
.button-menu-open{width: var(--button_width_opnd);left: var(--button_pos_opnd);background-position-x: var(--button_icon_pos_opnd);}

/*-----Control Button Status: Closed-----*/
.button-menu-clsd{width: var(--button_width_clsd);left: var(--button_pos_clsd);background-position-x: var(--button_icon_pos_clsd);}

/*-----Control Buttons Menu Open/Close Animation-----*/
.button-menu-clsd-animation{animation: button-menu-clsd-animation 0.5s cubic-bezier(0, 0, .01, .99);}
@keyframes button-menu-clsd-animation{
    0% {width: var(--button_width_opnd);left: var(--button_pos_opnd);background-position-x: var(--button_icon_pos_opnd);}
    100% {width: var(--button_width_clsd);left: var(--button_pos_clsd);background-position-x: var(--button_icon_pos_clsd);}
}

.button-menu-open-animation{animation: button-menu-open-animation 0.5s cubic-bezier(0, 0, .01, .99); }
@keyframes button-menu-open-animation{
    0% {width: var(--button_width_clsd);left: var(--button_pos_clsd);background-position-x: var(--button_icon_pos_clsd);}
    100% {width: var(--button_width_opnd);left: var(--button_pos_opnd);background-position-x: var(--button_icon_pos_opnd);}
}


/*-----Menu Button Grid Mode: Deactivated-----*/
.buttons_menu_grid_mode{
    pointer-events: none;
    opacity: var(--button_deactiv_opac);
}

/*-----Colormode Button/Pickarea-----*/
.picker-wrapper {
    display: block;  
    position: absolute;
    left: 0;
    z-index: 50; 
    width: 2500vw;
    backgroundcolor: aqua;
}

/*-----Colormode Cursor-----*/
.color-picker {
    width: 2500vw;
    height: 100vh;
    cursor: crosshair;
    opacity: 0;
    z-index: 50;
    mix-blend-mode: difference; 
}

#picker-cursor {
    width: 14px;
    height: 14px;
    border: 2px solid #fff;
    border-radius: 50%;
    position: absolute;
    pointer-events: none;
    transform: translate(-7px, -7px);
    z-index: 50; 
}

/*-----Colormode Button Text-----*/
#Color_Mode_text{
    position: absolute;
    width: var(--button_width_opnd); 
    backgroundcolor: aqua;
}

.output {
    display: flex;
    flex-direction: column;
}

#rgb-output{
    position: absolute; 
    top: 50%; 
    left:  50%; 
    transform: translate(-50%, -50%); 
    width: 14vh; 
    backgroundcolor: aqua; 
    z-index: 40; 
    cursor: none; 
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
    text-align: center;
    font-family: "Inter", sans-serif; 
    font-size: 1.5vh; 
    color: #FFF; 
}


/*-----Autoscroll Button Text-----*/
#Autoscroll_text{
    position: absolute;
    width: var(--button_width_opnd);
    backgroundcolor: aqua;
}


/*-----Autoscroll Slider - SLIDE VIEW-----*/
#speedSlider-slide{
    z-index: 100; 
    margin-top: 3.75vh; 
    margin-left: 1vh;
    width: 13vh; 
    background-color: rgba(255, 255, 255, 0);
    outline: none;
    border: #FFF; 
    -webkit-appearance: none;
    height: 5px; 
    border-style: dashed;
}

#speedSlider-slide:hover{opacity: 1;}

#speedSlider-slide::-webkit-slider-thumb{
    -webkit-appearance: none;
    appearance: none;
    width: 8px;
    height: 15px;
    border-radius: 0; 
    background: #ffffff;
    cursor: pointer;
}

#speedSlider-slide::-moz-range-thumb{
    width: 8px;
    height: 15px;
    border-radius: 0%; 
    background: #ffffff;
    cursor: pointer;
}

/*-----Autoscroll Slider - GRID VIEW-----*/
#speedSlider-grid{
    z-index: 100; 
    margin-top: 3.75vh; 
    margin-left: 1vh;
    width: 13vh; 
    background-color: rgba(255, 255, 255, 0);
    outline: none;
    border: #FFF; 
    -webkit-appearance: none;
    height: 5px; 
    border-style: dashed;
}

#speedSlider-grid:hover{opacity: 1;}

#speedSlider-grid::-webkit-slider-thumb{
    -webkit-appearance: none;
    appearance: none;
    width: 8px;
    height: 15px;
    border-radius: 0; 
    background: #ffffff;
    cursor: pointer;
}

#speedSlider-grid::-moz-range-thumb{
    width: 8px;
    height: 15px;
    border-radius: 0%; 
    background: #ffffff;
    cursor: pointer;
}


/*-----Autoscroll Button Status: Opened-----*/
.autoscroll_button_opnd{width: var(--button_width_opnd); height: 6vh; margin-left: var(--button_pos_opnd);}

/*-----Autoscroll Button Status: Closed-----*/
.autoscroll_button_clsd{width: var(--button_width_clsd); height: var(--button_height_clsd); margin-left: var(--button_pos_clsd)}

/*-----Animation Autoscroll Control Area-----*/
.autoscroll_area_clsd_animation{animation: buttons_speed_off 0.5s cubic-bezier(0, 0, .01, .99);}
@keyframes buttons_speed_off{
    0% {width: var(--button_width_opnd); height: 6vh; margin-left: var(--button_pos_opnd);}
    100% {width: var(--button_width_clsd); height: var(--button_height_clsd); margin-left: var(--button_pos_clsd);}
}

.autoscroll_area_open_animation{animation: buttons_speed_on 0.5s cubic-bezier(0, 0, .01, .99);}
@keyframes buttons_speed_on{
    0% {width: var(--button_width_clsd); height: var(--button_height_clsd); margin-left: var(--button_pos_clsd);}
    100% {width: var(--button_width_opnd); height: 6vh; margin-left: var(--button_pos_opnd);}
}

/*-----Mode Switch Button Area-----*/
.mode{
    height: 16vh; 
    width: 17vh;
    top: 40vh;
    backgroundcolor: aqua; 
    left: 3vh; 
}

.Switch_View_Box{
    cursor: pointer;
    display: block; 
    background-image: url(../ui/switch_view_icon.svg); 
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: contain; 
    mix-blend-mode: difference; 
    height: var(--switch-view-box_height); 
    width: var(--switch-view-box_width);
    border-radius: var(--switch-view-box_height);
    outline: .5vh #ffffff solid;
    outline-offset: -.1vh;
    margin-left: .4vh; 
    margin-top: 1vh;
}

.Switch_View_Box input { 
    opacity: 0;
    width: 0;
    height: 0;
}

.Switch_View_Slider {
    position: absolute;
    cursor: pointer;
    -webkit-transition: .4s;
    transition: .4s;
    width: calc(var(--switch-view-box_height) - .5vh);
    height: calc(var(--switch-view-box_height) - .5vh);
    border-radius: var(--switch-view-box_height);
    mix-blend-mode: difference; 
    margin-left: .5vh; 
    margin-top: .25vh; 
}

.Switch_View_Slider:before {
    position: absolute;
    content: "";
    height: calc(var(--switch-view-box_height) - .5vh);
    width: calc(var(--switch-view-box_height) - .5vh);
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: var(--switch-view-box_height); 
    background-color: white; 
    mix-blend-mode: difference; 
}


input:checked + .Switch_View_Slider {

}

input:focus + .Switch_View_Slider {
}

input:checked + .Switch_View_Slider:before {
  -webkit-transform: translateX(7.5vh);
  -ms-transform: translateX(7.5vh);
  transform: translateX(7.5vh);
}



/*-----Button Icons IMG Path-----*/
.menu_icon{
    background-image: url(../ui/menu-icon.svg); 
}

.overlay_icon{
    background-image: url(../ui/cch-icon.svg); 
}

.effects_icon_play{
    background-image: url(../ui/vfx-icon-1.svg); 
}

.effects_icon_pause{
    background-image: url(../ui/vfx-icon-0.svg);
}

.autoscroll_icon{
    background-image: url(../ui/auto-icon-0.svg); 
}

.mono_mode_icon{
    background-image: url(../ui/mono-icon.svg); 
}

.color_mode_icon{
    background-image: url(../ui/cstm-icon.svg);
}

.fullscreen_icon{
    background-image: url(../ui/full-icon.svg); 
}

.grid_icon{
    background-image: url(../ui/switch_view_icon.svg); 
}

.slide_icon{
    background-image: url(../ui/slide-icon.svg); 
}

/*---------------IMPRESSUM AREA---------------*/
.link{
    z-index: 60; 
    color: #000; 
    font-family: 'Inter Regular', sans-serif; 
    font-size: 1.6vh; 
    text-decoration: none;
    position: absolute; 
    top: 96vh; 
    right: 2.5vh; 
}

#Datenschutz{
    display: block; 
}

#Datenschutz_Mobile{
    top: 0.25vh; 
    right: 0.25vh; 
    display: none; 
    z-index: 100; 
    opacity: 0.6; 
}

/*-----Text Styles Global-----*/
.txt-headline{
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    font-size: 2.75vh;
    padding-bottom: 0.25vh; 
    letter-spacing: -0.075vh; 
}

.txt-regular{
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-size: var(--flattext_size); 
    letter-spacing: 0.035vh;
    position: relative; 
    backgroundcolor: rgba(147, 8, 147, 0.39); 
}

.txt-small{
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600; 
    font-size: var(--flattext_size); 
    padding-left: 0.25vh;
}

/*-----Button Text-----*/
.txt-button{
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-size: var(--buttontext_size);  
    position: relative;
    pointer-events: none;
    left: 4vh; 
    height: var(--button_height_clsd);
    width: var(--button_widht_opnd);
}

/*-----Control Button Text Status: Opened-----*/
.txt-menu-open{opacity: var(--button_deactiv_opac);}

/*-----Controll Buttons Text Blend In/Out Animation-----*/
.txt-menu-fade-out{animation: txt-menu-fade-out 0.8s cubic-bezier(0, 0, .01, .99);}
@keyframes txt-menu-fade-out{
    0% {opacity: var(--button_deactiv_opac);}
    85% {opacity: 0;}
    100% {opacity: 0;}
}
.txt-menu-fade-in{animation: txt-menu-fade-in 0.8s cubic-bezier(0, 0, .01, .99);}
@keyframes txt-menu-fade-in{
    0% {opacity: 0;}
    15% {opacity: 0;}
    100% {opacity: var(--button_deactiv_opac);}
}

/*-----Text Styles Button Status-----*/
.txt-pressed{font-weight: 600;opacity: var(--button_activ_opac);}

/*-----Control Button Text Status: Closed-----*/
.txt-menu-clsd{opacity: 0;}

.menu-links{
    width: var(--menu_width); 
    height: var(--flattext_size); 
    backgroundcolor: aqua;
    transform: translateY(-50%); 
    left: 0vh;
    bottom: 1.5vh; 
    position: absolute; 
    padding: 0 3vh; 
    mix-blend-mode: none;
}

.menu-links a{
    color: #FFF; 
    text-decoration: none;   
}

#link-version{
    float: right; 
}


/*-----Menu Button Text Grid Mode: Deactivated-----*/
.buttons_text_menu_grid_mode{
    pointer-events: none;
    opacity: var(--button_deactiv_opac);
}

/*-----Interaction Text-----*/
#interaction-headline{
    position: absolute; 
    transform: translateY(-50%); 
    top: 50%; 
    margin-left: var(--menu_width);   
    width: 100vw; 
    height: 50vh; 
    font-size: 20vh; 
    line-height: 15vh; 
    text-align: left;
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    color: #ffffff;  
    z-index: 1000; 
    backgroundcolor: aquamarine;
    mix-blend-mode: difference; 
    pointer-events: none;
    overflow: hidden; 
    opacity: 0;
}

#interaction-headline.show {
    opacity: 1;
}

#interaction-expl{
    position: absolute; 
    transform: translateY(-50%); 
    top: 82%; 
    left: var(--menu_width);   
    font-size: 9vh;
    line-height: 7.5vh; 
    text-align: left; 
    color: #ffffff; 
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    width: 80vw; 
    height: 50vh; 
    z-index: 1000; 
    backgroundcolor: aquamarine;
    mix-blend-mode: difference; 
    pointer-events: none;
    overflow: hidden; 
    opacity: 0;
}

#interaction-expl.show {
    opacity: 1;
}


/*-----Tool Tip Block-----*/
.tooltip-container{
    position: absolute; 
    transform: translateY(-50%); 
    top: 50%; 
    left: var(--menu_width);
    font-size: 9vh;
    line-height: 7.5vh; 
    text-align: left; 
    color: #ffffff; 
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    width: 80vw; 
    height: 50vh; 
    z-index: 1000; 
    backgroundcolor: aquamarine;
    mix-blend-mode: difference; 
    pointer-events: none;
    overflow: hidden; 
}

.tooltip-container h3{
    font-size: 20vh; 
    line-height: 15vh;
    margin-bottom: 2vh; 
}

.tooltip-container{
    opacity: 0; 
}

/*-----Blend In ToolTip HOVER-----*/
body:has(#button_menu:hover) #tooltip-menu{
    animation: var(--Fade_In_animation); 
    opacity: 1;
}
body:has(#button_prlx:hover) #tooltip-cch{
    animation: var(--Fade_In_animation); 
    opacity: 1;
}
body:has(#button_vfx:hover) #tooltip-vfx{
    animation: var(--Fade_In_animation); 
    opacity: 1;
}
body:has(#button_dark_mode:hover) #tooltip-mono{
    animation: var(--Fade_In_animation); 
    opacity: 1;
}
body:has(#customcolor_control_area:hover) #tooltip-cstm{
    animation: var(--Fade_In_animation); 
    opacity: 1;
}
body:has(#autoscroll_area:hover) #tooltip-auto{
    animation: var(--Fade_In_animation); 
    opacity: 1;
}
body:has(#button_fullscreen:hover) #tooltip-full{
    animation: var(--Fade_In_animation); 
    opacity: 1;
}
body:has(.Switch_View_Box:hover) #tooltip-mode{
    animation: var(--Fade_In_animation); 
    opacity: 1;
}

/*-----Text Animation Fades-----*/
.Blend_In_3s{
    opacity: 0; 
    animation: 3s BlendIn3s; 
}
@keyframes BlendIn3s{
    0% {opacity: 0;}
    1%, 99%{opacity: 1;}
    100% {opacity: 0;}
}

.Fade_IN{
    opacity: 1; 
    animation: .5s FadeIn;
    display: block; 
}
@keyframes FadeIn{
    0%,25% {opacity: 0;}
    100%{opacity: 1;}
}

.Fade_OUT{
    opacity: 0; 
    animation: .5s FadeOut; 
}
@keyframes FadeOut{
    0% {opacity: 1;}
    50%, 100%{opacity: 0;}
}

.Fade_IN_grid{
    opacity: 1; 
    animation: 1.35s FadeInGrid;
    display: block; 
}
@keyframes FadeInGrid{
    0% {opacity: 0;}
    100%{opacity: 1;}
}

.Fade_OUT_grid{
    opacity: 0; 
    animation: 1.35s FadeOutGrid;
}
@keyframes FadeOutGrid{
    0% {opacity: 1;}
    100%{opacity: 0;}
}


/*-----Slide Mode Config-----*/
.rotate{
    height: 100vw;
    width: 100vh; 
    transform: rotate(-90deg) translateX(-100vh); 
    transform-origin: top left; 
    position: absolute;  
    overflow-x: hidden; 
    overflow-y: scroll;
    scrollbar-color: #000 #FFF;
    scrollbar-width: thin;
}

.canvas{
    display: flex;
    width: 4500vh;
    height: 100vw; 
    transform: rotate(90deg) translateY(-100vh); 
    transform-origin: top left;
    position: relative; 
}

/*-----Slides-----*/
.slide{
    height: 100vh;  
    position: relative;
    float: left;
    aspect-ratio: 16/9; 
}

.s1{
 width: 100vw; 
}
/*-----Slide IMGs-----*/
.img{
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    backgroundcolor: #ffffff; 
}

/*-----PARALAXES-----*/
.paralax{
    position: absolute;
}

.paralax0{
    display: block;
}

.paralax1{
    display: block;
}

.paralax2{
    display: block;
}

.paralax3{
    display: block;
}

.paralax4{
    display: block;
}

.paralax5{
    display: block;
}

/*-----Startscreen-----*/
.startscreen{
    position: absolute; 
    height: 100vh; 
    width: 100vw;  
    z-index: 50; 
    backdrop-filter: blur(.75vh);
}

.startscreen-backdrop{
    position: absolute; 
    height: 100vh; 
    width: 100vw; 
    background-color: rgba(0, 0, 0, 0.3); 
}

.startscreen-container{
    position: relative;
    top: 48.5%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    height: 40vh; 
    width: 90vh; 
    background-color: rgba(0, 0, 0, 0.3);  
    border: .35vh solid #FFF;
    border-radius: .5vh; 
    padding: 7.55vh; 
}

.startscreen h1{
    font-size: 4.15vh;
    font-family: "Inter", sans-serif;
    font-weight: 800; 
    letter-spacing: -0.1vh; 
    -webkit-transform:scale(1.45,1) translateX(-50%); /* Safari and Chrome */
    -moz-transform:scale(1.45,1); /* Firefox */
    -ms-transform:scale(1.45,1); /* IE 9 */
    -o-transform:scale(1.45,1); /* Opera */
    transform:scale(1.45,1); /* W3C */
    color: #ffffff;
    top: 0vh; 
    width: 60vh;
    text-align: center; 
    margin-top: 4vh; 
    margin-bottom: .5vh;
    backgroundcolor: bisque;  
    position: absolute; 
    left: 16.55%; 
}

.startscreen h2{
    font-size: 2.5vh;
    font-family: "Inter", sans-serif;
    font-weight: 700; 
    margin-left: 16.75vh; 
    color: #ffffff;
    backgroundcolor: bisque; 
    margin-top: 2vh; 
}

.headline-break{
    display: none; 
}

#attention-icon{
    height: 15vh; 
    aspect-ratio: 1/1; 
    backgroundcolor: aquamarine; 
    background-image: url(../ui/attention-icon.svg); 
    background-position: center; 
    background-repeat: no-repeat;
    position: absolute; 
    background-size: contain;
    margin-top: 1.75vh; 
}

.startscreen-text-container{
    font-size: 2.5vh;
    font-family: "Inter", sans-serif;
    font-weight: 500; 
    color: #ffffff;
    text-align: left;
    line-height: 3vh;
    right: 0; 
    height: 12.5vh; 
    width: 57.5vh; 
    backgroundcolor: #eb00ff;  
    z-index: 70;
    float: right; 
    margin-top: .75vh; 
}

.startscreen-link-container{
    width: 55.5vh;
    height: 2.5vh; 
    bottom: 4vh; 
    backgroundcolor: aliceblue;
    margin-left: 17.25vh; 
    position: absolute;

}

.startscreen-link{
    backgroundcolor: aqua;
    line-height: 2.3125vh; 
    text-align: center;
    font-size: 2.25vh;
    font-family: "Inter", sans-serif;
    font-weight: 500;  
    color: #FFF; 
    position: relative;  
    cursor: pointer; 
        text-decoration-line: underline; 
}

#PSE-link{
    margin-right: 1.75vh;
}

#enter-website-link{
    position: absolute; 
    right: 0; 
}


.gradient-box{
    height: 1vh; 
    width: 74.25vh; 
    margin-top: 1.5vh; 
    margin-bottom: 1vh; 
    background: linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
    position: relative;
    left: 50%; 
    transform: translateX( -50%); 
}

.viewbox_grid{
    height: 100vw;
    width: 100vh; 
    transform: rotate(-90deg) translateX(-100vh); 
    transform-origin: top left; 
    position: absolute;  
    overflow-x: hidden; 
    overflow-y: scroll;
    scrollbar-color: #000 #FFF;
    scrollbar-width: thin;
}

/*-----Grid Mode Config-----*/
.gallery {
    position: relative;
    width: calc(var(--menu_width) + var(--col-2-width) + var(--col-3-width) + var(--col-4-width) + var(--col-5-width));
    height: 100vh;
    transform: rotate(90deg) translateY(-100vh); 
    transform-origin: top left;
    display: flex;
}



.column {
    position: absolute;
    top: 0;
    height: 135vh;
    animation-playstate: paused;
}

/*-----Spaltenbreiten + Positionen-----*/
.col-1 { left: 0; width: var(--menu_width); }
.col-2 { left: var(--menu_width); width: var(--col-2-width); animation: 1s infinite linear;}
.col-3 { left: calc(var(--menu_width) + var(--col-2-width)); width: var(--col-3-width); animation: 1s infinite linear;}
.col-4 { left: calc(var(--menu_width) + var(--col-2-width) + var(--col-3-width)); width: var(--col-4-width); animation: 1s infinite linear;}
.col-5 { left: calc(var(--menu_width) + var(--col-2-width) + var(--col-3-width) + var(--col-4-width)); width: var(--col-5-width); animation: 1s infinite linear;}

/*-----COLUM 2-----*/
#second-col-2 { top:  calc(var(--col-2-width) + var(--col-2-width) * .7 + var(--col-2-width) + var(--col-2-width) * .5625); animation: 1s infinite linear;}   
@keyframes col-2-slide {
  0% {top: 0;}
  100% {top: calc((var(--col-2-width) + var(--col-2-width) * .7 + var(--col-2-width) + var(--col-2-width) * .5625)*-1);}
}
@keyframes sec-col-2-slide {
  0% {top: calc(var(--col-2-width) + var(--col-2-width) * .7 + var(--col-2-width) + var(--col-2-width) * .5625);}
  100% {top: 0;}
}

/*-----COLUM 3-----*/
#second-col-3 { top: calc((var(--col-3-width) * .5625  + var(--col-3-width) + var(--col-3-width) * .5625 + var(--col-3-width) * .7 + var(--col-3-width) + var(--col-3-width) * .5625 + var(--col-3-width) * 0.7 + var(--col-3-width) + var(--col-3-width) * .5625 + var(--col-3-width)) *-1) ; animation: 1s infinite linear; } 
@keyframes sec-col-3-slide {
  0% {top: calc((var(--col-3-width) * .5625  + var(--col-3-width) + var(--col-3-width) * .5625 + var(--col-3-width) * .7 + var(--col-3-width) + var(--col-3-width) * .5625 + var(--col-3-width) * 0.7 + var(--col-3-width) + var(--col-3-width) * .5625 + var(--col-3-width)) *-1)}
  100% {top: 0;}
}
@keyframes col-3-slide {
  0% {top:0 }
  100% {top: calc((var(--col-3-width) * .5625  + var(--col-3-width) + var(--col-3-width) * .5625 + var(--col-3-width) * .7 + var(--col-3-width) + var(--col-3-width) * .5625 + var(--col-3-width) * 0.7 + var(--col-3-width) + var(--col-3-width) * .5625 + var(--col-3-width)))}
}

/*-----COLUM 4-----*/
#second-col-4 { top:  calc((var(--col-4-width) * .7 + var(--col-4-width) * .5625 + var(--col-4-width) + var(--col-4-width) * .5625 + var(--col-4-width) * .7 + var(--col-4-width) * .5625) + 1.85vw) ; animation: 1s infinite linear; }
@keyframes sec-col-4-slide {
  0% {top:  calc((var(--col-4-width) * .7 + var(--col-4-width) * .5625 + var(--col-4-width) + var(--col-4-width) * .5625 + var(--col-4-width) * .7 + var(--col-4-width) * .5625) + 1.85vw)}
  100% {top: 0;}
}
@keyframes col-4-slide {
  0% {top: 0}
  100% {top: calc((var(--col-4-width) * .7 + var(--col-4-width) * .5625 + var(--col-4-width) + var(--col-4-width) * .5625 + var(--col-4-width) * .7 + var(--col-4-width) * .5625) * -1 - 1.85vw)}
}

/*-----COLUM 5-----*/
#second-col-5 { top:  calc((var(--col-5-width) * .7 + var(--col-5-width) + var(--col-5-width) * .5625 + var(--col-5-width) + var(--col-5-width) * .7 + var(--col-5-width) + var(--col-5-width) * .7 + var(--col-5-width) + var(--col-5-width) * .5625 + var(--col-5-width) * .7 + var(--col-5-width) + var(--col-5-width) * .7 + var(--col-5-width) * .5625 + var(--col-5-width)) *-1 - 3vw) ; animation: 1s infinite linear; }
@keyframes sec-col-5-slide {
  0% {top:  calc((var(--col-5-width) * .7 + var(--col-5-width) + var(--col-5-width) * .5625 + var(--col-5-width) + var(--col-5-width) * .7 + var(--col-5-width) + var(--col-5-width) * .7 + var(--col-5-width) + var(--col-5-width) * .5625 + var(--col-5-width) * .7 + var(--col-5-width) + var(--col-5-width) * .7 + var(--col-5-width) * .5625 + var(--col-5-width)) *-1 - 3vw)}
  100% {top: 0;}
}
@keyframes col-5-slide {
  0% {top: 0}
  100% {top: calc((var(--col-5-width) * .7 + var(--col-5-width) + var(--col-5-width) * .5625 + var(--col-5-width) + var(--col-5-width) * .7 + var(--col-5-width) + var(--col-5-width) * .7 + var(--col-5-width) + var(--col-5-width) * .5625 + var(--col-5-width) * .7 + var(--col-5-width) + var(--col-5-width) * .7 + var(--col-5-width) * .5625 + var(--col-5-width)) + 3vw)}
}

/*-----Column 1 IMG Ratios-----*/
.col-1 .rat11{ width: 15vh; height: 15vh; }
.col-1 .rat64 { width: 15vh; height: calc(15vh * .7); }
.col-1 .rat169 { width: 15vh; height: calc(15vh * .5625); }

/*-----Column 2 IMG Ratios-----*/
.col-2 .rat11{ width: var(--col-2-width); height: var(--col-2-width); }
.col-2 .rat64 { width: var(--col-2-width); height: calc(var(--col-2-width) * .7); }
.col-2 .rat169 { width: var(--col-2-width); height: calc(var(--col-2-width) * .5625); }

/*-----Column 3 IMG Ratios-----*/
.col-3 .rat11{ width: var(--col-3-width); height: var(--col-3-width); }
.col-3 .rat64 { width: var(--col-3-width); height: calc(var(--col-3-width) * .7); }
.col-3 .rat169 { width: var(--col-3-width); height: calc(var(--col-3-width) * .5625); }
    
/*-----Column 4 IMG Ratios-----*/
.col-4 .rat11{ width: var(--col-4-width); height: var(--col-4-width); }
.col-4 .rat64 { width: var(--col-4-width); height: calc(var(--col-4-width) * .7); }
.col-4 .rat169 { width: var(--col-4-width); height: calc(var(--col-4-width) * .5625); }

/*-----Column 5 IMG Ratios-----*/
.col-5 .rat11{ width: var(--col-5-width); height: var(--col-5-width); }
.col-5 .rat64 { width: var(--col-5-width); height: calc(var(--col-5-width) * .7); }
.col-5 .rat169 { width: var(--col-5-width); height: calc(var(--col-5-width) * .5625); }

/*-----Special IMG Ratio in Column 3-----*/
.spez01{
    height: calc((var(--col-3-width) * .7) - 1.84vw);
}

/*-----Special IMG Ratio in Column 4-----*/
.spez02{
    width: var(--col-4-width); 
    height: calc((var(--col-4-width) * .7) + 1.85vw);
}

/*-----Special IMG Ratio in Column 4-----*/
.spez03{
    width: var(--col-5-width); 
    height: calc((var(--col-5-width) * .7) + 2.25vw);
}

/*Farben 
.col-1 .item { background: #ff6b6b; }
.sub-col-1 .item { background: #ff9393; }
.col-2 .item { background: #81d18f; }
.col-3 .item { background: #4dabf7; }
.sub-col-3 .item { background: #74c1ff; }
.col-4 .item { background: #fcc419; }
.sub-col-4 .item { background: #ffd659; }
.col-5 .item { background: #9775fa; }
.sub-col-5 .item { background: #b7a0fa; }*/

/*-----First Visit Animation Pause-----*/
.column, #second-col-2, #second-col-3, #second-col-4, #second-col-5 {
  animation-play-state: paused;
}

/*-----Grid IMGs-----*/
.item {
    margin: 0;
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
}

/*-----IMG Paths Grid Mode-----*/
.img1  { background-image: url(../../img/1.jpg); }
.img2  { background-image: url(../../img/2.jpg); }
.img3  { background-image: url(../../img/3.jpg); }
.img4  { background-image: url(../../img/4.jpg); }
.img5  { background-image: url(../../img/5.jpg); }
.img6  { background-image: url(../../img/6.jpg); }
.img7  { background-image: url(../../img/7.jpg); }
.img8  { background-image: url(../../img/8.jpg); }
.img9  { background-image: url(../../img/9.jpg); }
.img10 { background-image: url(../../img/10.jpg); }
.img11 { background-image: url(../../img/11.jpg); }
.img12 { background-image: url(../../img/12.jpg); }
.img13 { background-image: url(../../img/13.jpg); }
.img14 { background-image: url(../../img/14.jpg); }
.img15 { background-image: url(../../img/15.jpg); }
.img16 { background-image: url(../../img/16.jpg); }
.img17 { background-image: url(../../img/17.jpg); }
.img18 { background-image: url(../../img/18.gif); }
.img19 { background-image: url(../../img/19.jpg); }
.img20 { background-image: url(../../img/20.gif); }
.img21 { background-image: url(../../img/21.jpg); }
.img22 { background-image: url(../../img/22.jpg); }
.img23 { background-image: url(../../img/23.jpg); }
.img24 { background-image: url(../../img/24.jpg); }
.img25 { background-image: url(../../img/25.jpg); }
.img26 { background-image: url(../../img/26.jpg); }
.img27 { background-image: url(../../img/27.jpg); }
.img28 { background-image: url(../../img/28.jpg); }
.img29 { background-image: url(../../img/29.jpg); }
.img30 { background-image: url(../../img/30.jpg); }
.img31 { background-image: url(../../img/31.jpg); }
.img32 { background-image: url(../../img/32.jpg); }
.img33 { background-image: url(../../img/33.jpg); }
.img34 { background-image: url(../../img/34.jpg); }
.img35 { background-image: url(../../img/35.jpg); }
.img36 { background-image: url(../../img/36.jpg); }




/*-----Media Size 2/1-----*/
@media only screen and (min-aspect-ratio: 2/1){
}


    

/*-----Media Size 1/1-----*/
@media only screen and (max-aspect-ratio: 1/1){

/*-----Root Config-----*/
*{
    margin: 0;
    padding: 0; 
    box-sizing: border-box; 
    scroll-behavior: smooth;
    scrollbar-width: none; 
}

:root {
    --button_height_clsd: 14.4vw; /*Ratio = 5/18.5*/
    --button_width_clsd: 14.4vw;
    --button_width_opnd: 14.4vw;
    --button_pos_clsd: 0vh;
    --button_pos_opnd: 0vh;
    --menu_width: 80vw; 
    --button_activ_opac: .85; 
    --button_deactiv_opac: .45; 
    --button_icon_pos_clsd: 0vh; 
    --button_icon_pos_opnd: 0vh; 
    --button_activ_border: .2vh; 
    --button_deactiv_border: .175vh; 
    --button_opnd_border-radius: 0.25vh; 
    --button_clsd_border-radius: 3.5vh; 
    --Fade_In_animation: 1.5s FadeIn; 
    --flattext_size: 1.18vh; 
    --buttontext_size: 2.35vh; 
    --col-2-width: 72.5vh; 
    --col-3-width: 25vh; 
    --col-4-width: 60vh; 
    --col-5-width: 50vh; 
    --switch-view-box_height: 6vh; 
    --switch-view-box_width: 14vh; 
}

body{
    overflow: hidden; 
}
    
/*-----Color/Theme Overlays 1/1-----*/
.theme-overlay{
    position: absolute; 
    width: 100vw;
    height: 100vh; 
}

/*-----Menu 1/1-----*/
.menu{
    position: fixed;  
    height: calc(var(--button_height_clsd) + 5vw); 
    width: var(--menu_width); 
    left: 50%;
    transform: translateX(-50%); 
    bottom: 5.5vh; 
    backgroundcolor: aqua; 
    overflow: hidden; 
    pointer-events: none; 
}

.menu_blur{
    display: none; 
}
    
/*-----Menu Open/Close Animation 1/1-----*/
.menu_close_animation{animation: menu_off 1s; opacity: 0; width: 
var(--menu_width); background: none} 
@keyframes menu_off{
    0% {opacity: 1;}
    100% {opacity: 0;}
}
.menu_open_animation{animation: menu_on 1s cubic-bezier(.4, .15, 0, .7); opacity: 1; width: var(--menu_width); height: calc(var(--button_height_clsd) + 5vw); box-shadow: none; 
    background: none}
@keyframes menu_on{
    0%{opacity: 0;}
    100% {opacity: 1;}
}

    
/*-----Menu Boxes 1/1-----*/
.menu_box{
    display: none; 
}
    
    
/*-----Control Button Area 1/1-----*/
.control_area{
    margin-bottom: 0vh; 
    backgroundcolor: aqua; 
}

/*-----Control Buttons 1/1-----*/
.control_buttons{
    position: absolute;
    height: var(--button_height_clsd); 
    width: var(--button_width_clsd);
    left: 0;
    backgroundcolor: #ff0080;
    pointer-events: auto;  
}

/*-----Control Buttons 1/1-----*/
.buttons{  
    bottom: 0; 
    position: absolute; 
    float: none;
    border-radius: 2vw; 
} 

/*-----Control Buttons Status 1/1-----*/
.button-pressed{ 
}

/*-----Control Button Status: Hover 1/1-----*/
.buttons:hover{
}

/*-----Control Button Status: Active 1/1-----*/
.buttons:active{
}   

#button_menu.button-menu-clsd{
    background-image: none; 
}
    
#button_menu.button-menu-open{
    background-image: none; 
}
#button_menu.button-menu-clsd::before{
    content: "";
    width: var(--button_width_clsd); 
    height: var(--button_height_clsd);
    position: absolute; 
    backgroundcolor: rgb(88, 0, 255); 
    background-image: url(../ui/menu-icon.svg);
    background-size: contain;
    background-repeat: no-repeat;
    float: left; 
    display: block; 
    margin-top: 0vh; 
    margin-left: -.2vh; 
    transform: translateY(-50%); 
    border: var(--button_deactiv_border) rgba(255, 0, 0, 0) solid;
    border-radius: var(--button_opnd_border-radius);
    animation: spin-menu-icon-clsd 1s; 
}
     
@keyframes spin-menu-icon-clsd{
    0%{transform: rotate(0deg);top: -.275vh}
    100%{transform: rotate(360deg);top: -.275vh}
}  
    
#button_menu.button-menu-open::before{
    content: "";
    width: var(--button_width_opnd); 
    height: var(--button_width_opnd);
    position: absolute; 
    backgroundcolor: rgb(255, 226, 0); 
    background-image: url(../ui/menu-icon.svg);
    background-size: contain;
    background-repeat: no-repeat;
    float: left; 
    margin-top: 0vh; 
    margin-left: -.2vh; 
    display: block; 
    transform: translateY(-50%); 
    border: var(--button_deactiv_border) rgba(88, 0, 255, 0) solid;
    border-radius: var(--button_opnd_border-radius);
    animation: spin-menu-icon-open 1s; 
}
     
@keyframes spin-menu-icon-open{
    0%{transform: rotate(0deg);top: -.275vh}
    100%{transform: rotate(-360deg);top: -.275vh}
}      
    
#button_prlx.button-menu-clsd{
    animation: fade-out-menu-mobile-clsd 1s forwards; 
}
    
#button_vfx.button-menu-clsd{
    animation: fade-out-menu-mobile-clsd 1s forwards; 
}
    
#button_dark_mode.button-menu-clsd{
    animation: fade-out-menu-mobile-clsd 1s forwards; 
}
    
#button_fullscreen.button-menu-clsd{
    animation: fade-out-menu-mobile-clsd 1s forwards; 
}
 
@keyframes fade-out-menu-mobile-clsd{
    0%{opacity: 1;}
    95%{opacity: 0; margin-left: 0;}
    100%{margin-left: -200vw;}
}  
    
#button_prlx.button-menu-open{
    animation: fade-out-menu-mobile-open 1s forwards; 
}
    
#button_vfx.button-menu-open{
    animation: fade-out-menu-mobile-open 1s forwards; 
}
    
#button_dark_mode.button-menu-open{
    animation: fade-out-menu-mobile-open 1s forwards; 
}
    
#button_fullscreen.button-menu-open{
    animation: fade-out-menu-mobile-open 1s forwards; 
}
 
@keyframes fade-out-menu-mobile-open{
    0%{margin-left: -200vw;}
    5%{opacity: 0; margin-left: 0;}
    100%{opacity: 1;}
}  
    
    
#button_menu{
}    
    
#button_prlx{
    left: calc(var(--button_width_clsd) + 2vw); 
}  
    
#button_vfx{
    left: calc((var(--button_width_clsd) + 2vw) * 2);
}  

#button_dark_mode{
    left: calc((var(--button_width_clsd) + 2vw) * 3);
} 
    
#button_color_mode{
    display: none; 
} 
    
/*-----Autoscroll Button/Slider 1/1-----*/
#button_autoscroll{display: none}
.autoscroll_area{
    display: none; 
}
    
#button_fullscreen{
    left: calc((var(--button_width_clsd) + 2vw) * 4);
}    
    
/*-----Button Text 1/1-----*/
.txt-button{
    display: none; 
}    
    
/*-----Interaction Text 1/1-----*/
#interaction-headline{
    top: 3vh; 
    transform: none;  
    margin-left: 10vw;   
    width: 80vw; 
    height: auto; 
    font-size: 23vw; 
    line-height: 20vw;
    word-break: break-all; 
    backgroundcolor: aquamarine;
    text-transform: uppercase;
}
    
#interaction-headline-menu{
    line-height: 20vw; 
    font-size: 27.2vw; 
}    
    
#interaction-headline-visual{
    line-height: 18.5vw; 
    font-size: 22.55vw; 
}    

#interaction-headline-effects{
    line-height: 17.5vw; 
    font-size: 18.15vw;
}    

#interaction-headline-change{
    line-height: 15vw; 
    font-size: 18.55vw; 
}
    
#interaction-headline-mono{
    line-height: 20vw; 
    font-size: 25.5vw; 
}
    
#interaction-headline-chrome{
    line-height: 15vw; 
    font-size: 18vw; 
}    
    
.interaction-state{
    line-height: 10vw; 
    font-size: 11vw; 
}
    


#interaction-headline.show {
    opacity: 1;
}

#interaction-expl{
    display: none; 
}

#interaction-expl.show {
    opacity: 0;
    display: none; 
}


/*-----Tool Tip Block-----*/
.tooltip-container{
    display: none; 
}

.tooltip-container h3{
    font-size: 40vh; 
    line-height: 15vh;
    margin-bottom: 2vh; 
}

.tooltip-container{
    opacity: 0; 
}
/*-----Slide Mode Config for Mobile 1/1-----*/  
.rotate{
    height: 100vh;
    width: 100vw; 
    transform: none; 
    transform-origin: top; 
    position: fixed;  
    overflow-x: hidden; 
    overflow-y: hidden;
    backgroundcolor: aqua;
    scrollbar-width: none; 
}

.canvas{
    display: flex;
    width: 100vw;
    height: 100vh; 
    transform: none; 
    transform-origin: top;
    position: absolute; 
    background-color: rgba(77, 77, 77, 0.33); 
    overflow-x: hidden; 
    overflow-y: scroll;
    scrollbar-width: none; 
}       
    
    
/*---Slides 1/1---*/
.slide{ 
    width: 100vw; 
    height: 50vh;
}

/*-----Slide IMGs 1/1-----*/
.img{
    height: 50vh; 
}

/*-----Startscreen 1/1-----*/
.startscreen{
    overflow: hidden; 
}
    
.startscreen-content{
    height: 100vh; 
    width: 100vw; 
    border: none;
    border-radius: 0vh; 
    padding: 0vh; 
}    
    
.startscreen h1{
    font-size: 9vh;
    line-height: 8vh;  
    margin-top: 5vh; 
    width: 100vw;
    text-align: center; 
    text-wrap: balance;  
}

.attention_icon{
    height: 18vh;
    position: relative; 
    top: 0;
    left: 50%; 
    transform: translateX(-50%); 
}    

.text_container{
    font-size: 2.5vh;
    line-height: 1.65; 
    height: 12.5vh; 
    width: 90vw; 
    left: 5vw; 
    z-index: 70;
    float: none; 
    position: relative; 
}

.button_startscreen{
    height: 8vh; 
    width: 40vw; 
    line-height: 7vh; 
    font-size: 5vh;
    color: #FFF; 
    margin-top: 14.5vh; 
    z-index: 1500; 
}    
    
.viewbox_grid{
    display: none; 
}
    
/*-----Startscreen 1/1-----*/
.startscreen{
}

.startscreen-backdrop{
}

.startscreen-container{
    top: 0;
    left: 0%; 
    transform: translate(0%, 0%); 
    height: 100vh; 
    width: 100vw; 
    backgroundcolor: aqua;  
    border: none;
    padding: 10vw;
}

.startscreen h1{
    font-size: 4.65vw; 
    top: 0; 
    width: 90vw;
    margin-top: 0; 
    margin-bottom: 0;
    backgroundcolor: bisque;  
    position: relative; 
    left: 20vw; 
    text-align: left;
    line-height: 2vw; 
    letter-spacing: -0.21vw; 
}
    
.startscreen h2{
    font-size: 4vh;
    line-height: 4.5vh; 
    margin-left: 0; 
    backgroundcolor: bisque; 
    margin-top: .5vw; 
    margin-bottom: 15px; 
    float: inherit;
    position: relative; 
    width: 80vw; 
    text-align: center; 
}    
    
    
.gradient-box{
    height: 2.35vw; 
    width: 80vw;
    top: -.5vw; 
    margin-bottom: 9vh;
    margin-top: 2vw; 
}
    
.headline-break{
    display: block; 
}

#attention-icon{
    height: 25vh; 
    backgroundcolor: aquamarine; 
    position: relative;
    transform: translateX(-50%); 
    left: 50%; 
    margin-top: 0; 
}

.startscreen-text-container{
    font-size: calc(30px+2vh); 
    line-height: calc(30px+2.2vh); 
    height: auto; 
    width: 78vw; 
    backgroundcolor: #eb00ff;  
    margin-top: 0; 
    text-align: center; 
}

.startscreen-link-container{
    width: 80vw;
    height: 6vh; 
    bottom: 10vw; 
    backgroundcolor: aliceblue;
    margin-left: 0vh;
}

.startscreen-link{
    backgroundcolor: aqua;
    line-height: calc(30px+2.2vh);  
    font-size: calc(30px+2vh); 
}

#PSE-link{
    margin-right: 1.75vh;
}

#data-protection-link01{
}
    
#enter-website-link{
    position: relative; 
    float: right; 
 
}
    
.menu-links{
        display: none; 
}



.viewbox_grid{
    height: 100vw;
    width: 100vh; 
    transform: rotate(-90deg) translateX(-100vh); 
    transform-origin: top left; 
    position: absolute;  
    overflow-x: hidden; 
    overflow-y: scroll;
    scrollbar-color: #000 #FFF;
    scrollbar-width: thin;
}
    
    
    
    
}