@charset "utf-8";


/* Font Import */

@font-face {
src: url("fonts/lazzer_medium.otf") format("opentype");
font-family: "Lazzer Medium";
font-style: normal;
}

@font-face {
src: url("fonts/lazzer_medium_italic.otf") format("opentype");
font-family: "Lazzer Medium Italic";
font-style: italic;
}

@font-face {
src: url("fonts/serpiente_display_medium.otf") format("opentype");
font-family: "Serpiente Display Medium";
font-style: normal;
}


/* Presettings */

:root {
--gray: rgb(202, 202, 202);
--black: rgb(0, 0, 0);
--ultra_yellow: rgb(223, 255, 72);
--ultra_violet: rgb(77, 1, 148);
--lazzer_medium_medium_font_size: 1rem;
--lazzer_medium_large_font_size: 2.0689655172413794rem;
--serpiente_display_medium_large_font_size: 1.7241379310344827rem;
--drop_shadow: drop-shadow(0.2413793103448276rem 0.2413793103448276rem 0.10344827586206896rem rgba(0, 0, 0, 0.3));
--shadow: 0.20689655172413793rem 0.20689655172413793rem 0.20689655172413793rem rgba(0, 0, 0, 0.3);
--media_gallery_item_border_radius: 5.172413793103448rem;
}

*, h1 {
-webkit-tap-highlight-color: transparent;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
margin: 0;
padding: 0;
color: inherit;
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-weight: normal;
hyphens: auto;
line-height: 97%;
text-decoration: none;
cursor: none;
scroll-behavior: smooth;
user-select: none;
}

::-webkit-scrollbar {
display: none;
}

html {
background-color: var(--gray);
color: var(--black);
font-family: "Lazzer Medium", sans-serif;
font-size: 2.013888888888889vw;
}

html, body {
width: 100%;
overflow-x: hidden;
}

video, img {
display: block;
width: 100%;
}

.cursor {
z-index: 3;
position: fixed;
top: 0;
left: 0;
width: 3.6206896551724137rem;
height: 3.6206896551724137rem;
pointer-events: none;
}


/* Basic Styles */

#header {
z-index: 2;
position: fixed;
width: 100%;
height: 1.3793103448275863rem;
padding: 0.1724137931034483rem 0.3448275862068966rem 0 0.6896551724137931rem;
border-bottom: 0.07241379310344828rem solid var(--black);
background-color: var(--gray);
}

#header:hover {
background-color: var(--ultra_yellow);
}

#main_area {
position: relative;
min-height: 100vh;
padding-top: 1.3793103448275863rem;
}

.two_columns {
display: flex;
width: 100%;
min-height: 100%;
}

#left_area, #right_area {
width: 50%;
}

.subpage h1 {
padding: 0.3448275862068966rem 0.3448275862068966rem 0rem 0.5862068965517241rem;
color: var(--black);
font-family: "Lazzer Medium", sans-serif;
font-size: var(--lazzer_medium_large_font_size);
text-align: left;
}

.large_body_text {
padding: 0.2413793103448276rem 0.3448275862068966rem 0.3448275862068966rem 0.5862068965517241rem;
font-size: var(--lazzer_medium_large_font_size);
white-space: pre-wrap;
}

.large_body_text .highlighting {
font-family: "Serpiente Display Medium", serif;
font-size: var(--serpiente_display_medium_large_font_size);
}

.teaser {
padding: 2.0689655172413794rem 0.6896551724137931rem 0.3448275862068966rem 0.6896551724137931rem;
font-family: nimbus-sans-extended, sans-serif;
font-size: 0.8275862068965517rem;
}

.teaser p {
text-indent: 1.7241379310344827rem;
}

.teaser p:nth-child(1) {
text-indent: 0;
}

.medium_size_button {
padding: 0.4482758620689655rem 0.6896551724137931rem 0.5172413793103449rem 0.6896551724137931rem;
border: 0.07241379310344828rem  solid var(--ultra_yellow);
border-radius: 1.0344827586206897rem;
color: var(--ultra_yellow);
}

.large_size_button {
display: inline-block;
margin: 1.896551724137931rem 0.3448275862068966rem 0.3448275862068966rem 0.6206896551724138rem;
padding: 0.27586206896551724rem 0.8620689655172413rem 0.5172413793103449rem 0.7931034482758621rem;
border: 0.07241379310344828rem  solid var(--ultra_yellow);
border-radius: 1.206896551724138rem;
color: var(--ultra_yellow);
font-size: var(--lazzer_medium_large_font_size);
filter: var(--drop_shadow);
}

.large_size_button:hover {
background-color: var(--ultra_yellow);
color: var(--black);
}

.external_link:hover {
color: var(--ultra_yellow);
}

.right_area_graphic {
padding: 0.3448275862068966rem 0.3448275862068966rem 0.3448275862068966rem 0.3448275862068966rem;
}

#footer {
display: flex;
flex-wrap: wrap;
padding: 1.0344827586206897rem 0.6896551724137931rem 0.6896551724137931rem 0.6896551724137931rem;
}

#footer .medium_size_button {
filter: var(--drop_shadow);
}

#footer .medium_size_button:hover {
background-color: var(--ultra_yellow);
color: var(--black);
}


/* Index */

#index h1 {
padding: 0.8620689655172413rem 0rem 2.2413793103448274rem 0rem;
color: var(--ultra_yellow);
font-family: "Serpiente Display Medium", serif;
font-size: 3.9655172413793105rem;
line-height: 120%;
text-align: center;
text-transform: uppercase;
}

#index h1 span:nth-child(2) {
display: none;
}

#cover {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 22.413793103448278rem;
background: url(../media/header.jpg);
background-position: center;
background-size: cover;
}

#cover_text {
display: flex;
flex-direction: column;
align-items: center;
}

#webm_video {
position: absolute;
margin-top: 9.655172413793103rem;
background: transparent;
transition: transform 2s linear;
}

#webm_video:hover {
transform: scale(0.5);
}

h2 {
padding: 0.8620689655172413rem 0.3448275862068966rem 1.0344827586206897rem 0rem;
font-size: var(--lazzer_medium_large_font_size);
text-align: center;
}

#navigation {
padding: 0.3448275862068966rem 0.6896551724137931rem 0.3448275862068966rem 0.6896551724137931rem;
color: var(--ultra_yellow);
}

#navigation_links {
display: flex;
flex-wrap: wrap;
}

.navigation_link {
display: flex;
width: 50%;
overflow: hidden;
border: 0.07241379310344828rem solid var(--ultra_yellow);
border-radius: 2.586206896551724rem;
filter: var(--drop_shadow);
}

.navigation_link:hover {
background-color: var(--ultra_yellow);
color: var(--black);
}

.navigation_link_graphic_container {
display: flex;
align-items: center;
justify-content: center;
width: 30%;
}

.navigation_link_graphic_container img {
padding: 0.5172413793103449rem;
}

.navigation_link_text {
display: inline;
position: relative;
width: 95%;
padding: 0.8620689655172413rem 1.0344827586206897rem 0.7931034482758621rem 0rem;
font-family: "Serpiente Display Medium", serif;
font-size: var(--serpiente_display_medium_large_font_size);
hyphens: manual;
line-height: 130%;
}

.navigation_link_text span {
position: absolute;
transform: translateY(-0.1724137931034483rem);
font-family: "Lazzer Medium", sans-serif;
font-size: var(--lazzer_medium_medium_font_size);
}

#index #footer .medium_size_button:nth-of-type(3) {
margin-left: auto;
}


/* Editorial */

#editorial #main_area {
background: linear-gradient(0deg, var(--gray) 0%, var(--ultra_violet) 100%);
}

#editorial h1 {
color: var(--ultra_yellow);
}

#editorial .large_body_text .highlighting {
color: var(--ultra_yellow);
}

.large_body_text p {
text-indent: 4.137931034482759rem;
}

.large_body_text p:nth-child(1) {
text-indent: 0;
}

.large_body_text .without_indentation {
text-indent: 0;
}

.large_body_text .superscript {
display: inline-block;
transform: translateY(-0.7586206896551724rem);
font-size: var(--lazzer_medium_medium_font_size);
text-indent: 0;
}

blockquote {
padding-left: 4.482758620689655rem;
font-style: italic;
}

blockquote span {
font-style: normal;
}

cite {
display: block;
margin: 4.137931034482759rem 0.3448275862068966rem 9.655172413793103rem 4.137931034482759rem;
font-style: italic;
}

#editorial #ultrameduse_graphic_one {
position: absolute;
right: 0;
bottom: 55.172413793103445rem;
width: 50%;
pointer-events: none;
}

#editorial #ultrameduse_graphic_two {
position: absolute;
bottom: 0rem;
left: 0;
width: 70%;
pointer-events: none;
}

#editorial #footer .medium_size_button:nth-of-type(1) {
margin-left: auto;
}


/* Kunsthistorisches */

#kunsthistorisches .two_columns {
background: url(../media/kunsthistorisches_background.svg) no-repeat;
background-position: center;
background-size: cover;
}


/* Symbole und Mythen */

#symbole_und_mythen .two_columns {
background: url(../media/symbole_und_mythen_background.svg) no-repeat;
background-position: center;
background-size: cover;
}


/* Ophidiophobie */

#ophidiophobie .two_columns {
background: url(../media/ophidiophobie_background.svg) no-repeat;
background-position: center;
background-size: cover;
}


/* Skin Architecture */

#skin_architecture .two_columns {
background: url(../media/skin_architecture_background.svg) no-repeat;
background-position: center;
background-size: cover;
}


/* Scales */

#scales .large_body_text:hover {
z-index: 1;
position: relative;
}

.large_body_text i {
font-style: italic;
}

.vimeo_video_container {
--vimeo_video_width: 640;
--vimeo_video_height: 400;
position: relative;
max-width: 100%;
padding-bottom: calc(var(--vimeo_video_height) / var(--vimeo_video_width) * 100%);
overflow: hidden;
border-radius: var(--media_gallery_item_border_radius);
transition: border-radius 1s linear;
}

.vimeo_video_container:hover {
border-radius: 0;
}

.vimeo_video_container iframe, .vimeo_video_container object, .vimeo_video_container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

#vimeo_video_one {
position: absolute;
top: 4.137931034482759rem;
right: 0.3448275862068966rem;
width: 50%;
}

#scales #ultrameduse_graphic_two {
z-index: 1;
position: relative;
margin-top: -10.517241379310345rem;
pointer-events: none;
}

#media_gallery {
display: flex;
flex-wrap: wrap;
padding: 0.3448275862068966rem 0.3448275862068966rem 0.3448275862068966rem 0.3448275862068966rem;
}

#vimeo_video_two {
width: 72%;
margin-bottom: 0.1724137931034483rem;
}

#image_with_video {
display: flex;
position: relative;
justify-content: center;
overflow: hidden;
border-radius: var(--media_gallery_item_border_radius);
}

#vimeo_video_three {
z-index: 1;
position: absolute;
bottom: 6.896551724137931rem;
width: 72%;
}

.media_gallery_item {
width: 50%;
padding: 0.06896551724137931rem 0.06896551724137931rem 0.06896551724137931rem 0.06896551724137931rem;
}

.media_gallery_item img {
overflow: hidden;
border-radius: var(--media_gallery_item_border_radius);
}

.media_gallery_item .without_rounded_edges {
border-radius: 0;
}

.flip_box {
display: block;
perspective: 100vh;
}

.flip_box:hover {
z-index: 1;
}

.flip_box_inner {
position: relative;
width: 100%;
transform-style: preserve-3d;
transition: transform 1.5s;
}

.flip_box:hover .flip_box_inner {
transform: rotateY(180deg);
}

.flip_box_front, .flip_box_back {
-webkit-backface-visibility: hidden;
position: relative;
width: 100%;
backface-visibility: hidden;
}

.flip_box_front {
position: relative;
}

.flip_box_back {
position: absolute;
transform: translate(0, -100%) rotateY(180deg);
}

#vimeo_video_four {
position: relative;
width: 72%;
height: auto;
margin-top: 0.06896551724137931rem;
}

#ultraouroboros {
position: absolute;
bottom: -7.172413793103448rem;
width: 130%;
pointer-events: none;
}


/* Info */

#info #ultrameduse_graphic_three {
position: absolute;
top: 0.6896551724137931rem;
left: 0;
width: 80%;
animation: ultrameduse_graphic_three_animation 300s infinite linear;
pointer-events: none;
}

@keyframes ultrameduse_graphic_three_animation {
from {
transform: rotate(0deg);
}

to {
transform: rotate(360deg);
}
}

#info .highlighting {
color: var(--ultra_yellow);
}


/* Mehr Dimensionen */

#mehr_dimensionen #ultrameduse_graphic_two {
position: absolute;
top: 0.6896551724137931rem;
left: 0;
width: 80%;
animation: ultrameduse_graphic_two_animation 30s infinite linear;
pointer-events: none;
}

@keyframes ultrameduse_graphic_two_animation {
from {
transform: scale(0.5);
}

to {
transform: scale(1);
}
}

#mehr_dimensionen .large_size_button {
margin: 1.0344827586206897rem 0.3448275862068966rem 0.3448275862068966rem 0.20689655172413793rem;
}


/* Browser Adjustments Start */

@media not all and (min-resolution:.001dpcm) { @media {


/* Basic Styles */

.large_size_button {
box-shadow: var(--shadow);
text-shadow: var(--shadow);
filter: none;
}

.large_size_button:hover {
text-shadow: none;
}

#footer .medium_size_button {
box-shadow: var(--shadow);
text-shadow: var(--shadow);
filter: none;
}

#footer .medium_size_button:hover {
text-shadow: none;
}


/* Index */

.navigation_link {
box-shadow: var(--shadow);
text-shadow: var(--shadow);
filter: none;
}

.navigation_link:hover {
text-shadow: none;
}


/* Scales */

.vimeo_video_container {
border-radius: 0;
}


/* Browser Adjustments End */

} }


/* Window Size A Start */

@media screen and (max-width: 1000px) {


/* Presettings */

*, h1 {
cursor: inherit;
}

html {
font-size: 3vw;
cursor: default;
}

.cursor {
display: none;
}


/* Basic Styles */

#left_area {
width: 100%;
}

#right_area {
display: none;
}


/* Index */

#index h1 {
font-size: calc(3.9655172413793105rem * 2.5);
}

#index h1 span:nth-child(1) {
display: none;
}

#index h1 span:nth-child(2) {
display: block;
}

#webm_video {
transform: scale(1.1);
}

.navigation_link {
width: 100%;
}


/* Editorial */

#editorial #ultrameduse_graphic_one {
width: 70%;
}

#editorial #ultrameduse_graphic_two {
width: 140%;
}


/* Scales */

#vimeo_video_one {
position: relative;
top: 0;
right: 0;
width: 100%;
padding: 0.3448275862068966rem 0.3448275862068966rem 0.06896551724137931rem 0.3448275862068966rem;
}

#scales #ultrameduse_graphic_two {
position: absolute;
width: 120%;
}

#media_gallery {
padding: 0.06896551724137931rem 0.3448275862068966rem 0.3448275862068966rem 0.3448275862068966rem;
}

#vimeo_video_two {
width: 100%;
}

#vimeo_video_three {
width: 90%;
}

.media_gallery_item {
width: 100%;
}

.flip_box:hover .flip_box_inner {
transform: none;
}

#vimeo_video_four {
width: 100%;
}


/* Info */

#info #ultrameduse_graphic_three {
width: 150%;
}


/* Mehr Dimensionen */

#mehr_dimensionen #ultrameduse_graphic_two {
width: 150%;
}


/* Window Size A End */

}


/* Window Size B Start */

@media screen and (max-width: 600px) {


/* Presettings */

html {
font-size: 4.2vw;
cursor: default;
}


/* Basic Styles */

#footer a {
width: 100%;
text-align: center;
}


/* Index */

.navigation_link_graphic_container {
width: 50%;
}


/* Window Size B End */

}