@charset "utf-8";


/* Font Import */

@font-face {
font-style: normal;
font-weight: 400;
src: url("fonts/NeueHaasGroteskText-55Roman-Web.woff2") format("woff2"),
url("fonts/NeueHaasGroteskText-55Roman-Web.woff") format("woff");
font-family: "Haas Grotesk Text Web";
}

@font-face {
font-style: italic;
font-weight: 400;
src: url("fonts/NeueHaasGroteskText-56Italic-Web.woff2") format("woff2"),
url("fonts/NeueHaasGroteskText-56Italic-Web.woff") format("woff");
font-family: "Haas Grotesk Text Web";
}


/* Presettings */

*,
*:before,
*:after,
h1,
br {
-webkit-tap-highlight-color: transparent;
-webkit-text-size-adjust: none;
box-sizing: border-box;
margin: 0;
padding: 0;
border: none;
outline: none;
color: inherit;
font-style: normal;
font-weight: 400;
font-size: inherit;
line-height: 122%;
font-family: "Haas Grotesk Text Web", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
list-style: none;
text-decoration: none;
cursor: inherit;
}

html,
body {
width: 100%;
height: 100%;
}

html {
user-select: text;
-webkit-user-select: text;
background-color: rgb(235, 235, 235);
font-size: 1.1772486772486772vw;
cursor: default;
}

.bubble,
img,
video,
audio {
user-select: none;
-webkit-user-select: none;
}

img {
display: flex;
}

.lazyload {
opacity: 0;
}

.lazyloaded {
opacity: 1;
}

::selection {
background: rgb(187, 187, 187);
color: transparent;
}

.italic,
em {
font-style: italic;
}

@media (hover: hover) {
p a:hover {
color: rgb(92, 92, 92);
cursor: alias;
}
}


/* Basic Styles */

.bubble {
border-radius: 0.28089887640449435rem;
backdrop-filter: blur(0.6741573033707865rem);
background-color: rgba(175, 175, 175, 0.4);
cursor: pointer;
-webkit-backdrop-filter: blur(0.6741573033707865rem);
padding: 0.449438202247191rem 0.6741573033707865rem 0.449438202247191rem 0.6741573033707865rem;
}

.active {
background-color: rgba(175, 175, 175, 0.8);
}

@media (hover: hover) {
.bubble:hover {
background-color: rgba(175, 175, 175, 0.8);
}
}


/* Basic Layout */

#content {
display: flex;
flex-direction: column;
height: 100%;
height: auto;
min-height: 100%;
}

#navigation {
z-index: 2;
position: sticky;
top: 0;
padding: 1.1235955056179774rem 1.1235955056179774rem;
}

#navigation #standard_navigation,
#navigation #subpages_navigation,
#navigation #search_navigation {
display: flex;
flex-wrap: wrap;
gap: 0.28089887640449435rem;
}

#navigation #subpages_navigation,
#navigation #search_navigation {
display: flex;
margin-top: 0.28089887640449435rem;
}

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

#search_field {
overflow: hidden;
}

#search_field::selection {
background: rgb(125, 125, 125);
}

#gettag {
display: none;
}


/* BUW Logo */

#buw_logo,
#buw_logo_s {
z-index: 1;
position: fixed;
right: 1.1235955056179774rem;
bottom: 0;
}

#buw_logo {
height: 1.6853932584269662rem;
}

#buw_logo_s {
display: none;
height: 3.230337078651685rem;
}

#buw_logo img,
#buw_logo_s img {
height: 100%;
cursor: alias;
}


/* Index Page */

.main_gallery_area {
margin-top: 1.2921348314606742rem;
margin-bottom: 5.674157303370786rem;
padding: 0.5617977528089887rem;
}

.main_gallery_sizer,
.main_gallery_item {
position: relative;
width: calc(100% / 4);
padding: 0.5617977528089887rem;
}

.main_gallery_item_image,
.main_gallery_item_video {
overflow: hidden;
border-radius: 0.28089887640449435rem;
cursor: pointer;
}

.main_gallery_item_image img,
.main_gallery_item_video video {
display: table;
width: 100%;
height: auto;
overflow: hidden;
border-radius: 0.28089887640449435rem;
transition: transform 15s ease-out;
}

@media (hover: hover) {
.main_gallery_item_image img:hover,
.main_gallery_item_video video:hover {
width: 100%;
transform: scale(1.2);
}
}

.main_gallery_item_title {
display: none;
z-index: 1;
position: absolute;
bottom: 1.1235955056179774rem;
left: 1.1235955056179774rem;
max-width: calc(100% - 2.2471910112359548rem);
pointer-events: none;
}

.search_information {
display: none;
}

#control_buttons_area {
display: flex;
z-index: 1;
position: fixed;
bottom: 1.1235955056179774rem;
left: 1.1235955056179774rem;
gap: 0.28089887640449435rem;
}


/* Overview Page */

.overview {
display: flex;
flex-wrap: wrap;
margin-top: 1.0674157303370786rem;
margin-bottom: 4.101123595505618rem;
padding: 1.1235955056179774rem;
gap: 0.28089887640449435rem;
}

.overview_category {
width: 100%;
margin-top: 1.1797752808988764rem;
margin-bottom: 0.16853932584269662rem;
}

.overview_category:nth-child(1) {
margin-top: 0;
}


/* About Page */

#about {
margin-top: 2.0224719101123596rem;
margin-bottom: 4.887640449438202rem;
padding: 0 1.1235955056179774rem;
font-size: calc(1rem * 1.618);
white-space: pre-wrap;
}


/* Standard Page */

.standard_page_text_area {
margin: 2.191011235955056rem 0 5rem 0;
grid-column-gap: 1.1235955056179774rem;
display: grid;
grid-template-columns: repeat(2, 1fr);
padding: 0 1.1235955056179774rem;
}

.standard_page_text_area .left_area,
.standard_page_text_area .right_area {
white-space: pre-wrap;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}

.standard_page_text_area .left_area {
grid-column-start: 1;
grid-column-end: 2;
}

.standard_page_text_area .right_area {
grid-column-start: 2;
grid-column-end: 3;
}

.standard_page_text_area .right_area ul {
padding: 0;
list-style-type: none;
white-space: normal;
counter-reset: list-item-counter;
}

.standard_page_text_area .right_area ul li {
position: relative;
padding-left: 0.8426966292134831rem;
}

.standard_page_text_area .right_area ul li::before {
position: absolute;
left: 0;
content: "• ";
}


/* Project Page */

#back_button {
margin-left: auto;
}

.project_page_title {
margin-top: 2.0224719101123596rem;
margin-bottom: 1.348314606741573rem;
padding: 0 1.1235955056179774rem;
font-size: calc(1rem * 1.618);
}

.project_page_gallery {
position: relative;
width: 100%;
height: 61.8vh;
min-height: 11.235955056179774rem;
overflow: hidden;
background-color: rgb(211, 211, 211);
}

.scrollable_content_area {
width: 100%;
height: 100%;
overflow-x: auto;
overflow-y: hidden;
}

.scrollable_content_area::-webkit-scrollbar {
height: 0.5617977528089887rem;
}

.scrollable_content_area::-webkit-scrollbar-track {
background: rgb(187, 187, 187);
}

.scrollable_content_area::-webkit-scrollbar-thumb {
background: rgb(125, 125, 125);
}

@media (hover: hover) {
.scrollable_content_area::-webkit-scrollbar-thumb:hover {
background: rgb(92, 92, 92);
}
}

.scrollable_content_area::-webkit-scrollbar-thumb:active {
background: rgb(92, 92, 92);
}

.dragscroll {
cursor: grab;
}

.dragscroll:active {
cursor: grabbing;
}

.project_page_gallery_items {
display: flex;
min-width: 100%;
height: 100%;
padding: 1.1235955056179774rem;
}

.project_page_gallery_item {
/* display: inline-flex; */
display: flex;
flex: 0 0 auto;
width: max-content;
height: 100%;
object-fit: contain;
}

.project_page_gallery_item:last-child {
margin-right: -1.1235955056179774rem;
}

.project_page_gallery_item img,
.project_page_gallery_item video {
max-width: 100%;
height: 100%;
object-fit: contain;
border-radius: 0.28089887640449435rem;
}

.project_page_gallery_item img,
.project_page_gallery_item video,
.project_page_gallery_item iframe,
.project_page_gallery_item .sound_item {
margin-right: 1.1235955056179774rem;
}

.project_page_gallery_item img,
.project_page_gallery_item video {
pointer-events: none;
}

.project_page_gallery_item iframe {
width: calc((16 / 9) * 61.8vh - 3.3707865168539324rem);
border-radius: 0.28089887640449435rem;
background-color: black;
}

.iframe_item {
position: relative;
}

.iframe-content {
display: none;
z-index: 1;
}

.preloader {
display: flex;
display: none;
position: absolute;
align-items: center;
justify-content: center;
width: 100% !important;
height: 100%;
}

.load_video_from_vimeo {
display: block;
white-space: nowrap;
margin-left: -1.1235955056179774rem;
}

.sound_item {
display: flex;
align-items: center;
justify-content: center;
width: calc(61.8vh - (2 * 1.1235955056179774rem));
height: 100%;
border-radius: 0.28089887640449435rem;
background-color: rgb(187, 187, 187);
}

.project_page_gallery_item audio {
cursor: default;
}

.project_page_gallery_item_description {
margin-right: 2.0224719101123596rem;
margin-left: -0.6741573033707865rem;
transform: rotate(180deg);
writing-mode: vertical-rl;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}

.project_page_text_area {
margin-top: 1.4606741573033708rem;
grid-column-gap: 1.1235955056179774rem;
display: grid;
grid-template-columns: repeat(2, 1fr);
padding: 0 1.1235955056179774rem 0 1.1235955056179774rem;
}

.project_page_text_area .standard_information,
.project_page_text_area .description_text {
grid-column-start: 1;
grid-column-end: 2;
white-space: pre-wrap;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}

.project_page_text_area .standard_information {
grid-column-start: 1;
grid-column-end: 2;
}

.project_page_text_area .description_text {
grid-column-start: 2;
grid-column-end: 3;
}

.tags {
display: flex;
flex-wrap: wrap;
margin-top: auto;
padding: 3.3146067415730336rem 1.1235955056179774rem 5.224719101123595rem 1.1235955056179774rem;
gap: 0.28089887640449435rem;
}


/* Window Size A Start */

@media screen and (min-width: 1600px) {


/* Presettings */

html {
font-size: calc(1.1772486772486772vw * 0.9);
}


/* Index Page */
.main_gallery_sizer,
.main_gallery_item {
width: calc(100% / 4);
}


/* Window Size A End */

}


/* Window Size B Start */

@media screen and (min-width: 2200px) {


/* Presettings */

html {
font-size: calc(1.1772486772486772vw * 0.8);
}


/* Index Page */

.main_gallery_sizer,
.main_gallery_item {
width: calc(100% / 5);
}


/* Window Size B End */

}


/* Window Size C Start */

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


/* Presettings */
html {
font-size: calc(1.1772486772486772vw * 1.3);
}


/* Index Page */

.main_gallery_sizer,
.main_gallery_item {
width: calc(100% / 3);
}


/* Window Size C End */

}


/* Window Size D Start */

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


/* Presettings */

html {
font-size: calc(1.1772486772486772vw * 2);
}


/* Index Page */

.main_gallery_sizer,
.main_gallery_item {
width: calc(100% / 2);
}


/* Standard Page */

.standard_page_text_area {
grid-template-columns: repeat(1, 1fr);
}

.standard_page_text_area .left_area {
grid-column-start: 1;
grid-column-end: 2;
}

.standard_page_text_area .right_area {
grid-column-start: 1;
grid-column-end: 2;
margin-top: 2.4157303370786516rem;
}


/* Project Page */

.project_page_text_area {
grid-template-columns: repeat(1, 1fr);
}

.project_page_text_area .standard_information {
grid-column-start: 1;
grid-column-end: 2;
}

.project_page_text_area .description_text {
grid-column-start: 1;
grid-column-end: 2;
margin-top: 2.4157303370786516rem;
}


/* Window Size D End */

}


/* Window Size E Start */

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


/* Presettings */

html {
font-size: calc(1.1772486772486772vw * 3);
}


/* Index Page */

.main_gallery_area {
margin-bottom: 4.4943820224719095rem;
}

.main_gallery_sizer,
.main_gallery_item {
width: calc(100% / 1);
}

.main_gallery_item .bubble {
border-radius: 0;
backdrop-filter: none;
background-color: transparent;
-webkit-backdrop-filter: none;
padding: 0;
}

.main_gallery_item_title {
display: block;
position: relative;
bottom: 0;
left: 0;
width: 100%;
max-width: 100%;
margin-top: 0.449438202247191rem;
margin-bottom: 0.898876404494382rem;
pointer-events: none;
}


/* Overview Page */

.overview {
margin-bottom: 5.646067415730337rem;
}


/* About Page */

#about {
margin-bottom: 6.432584269662921rem;
}


/* Standard Page */

.standard_page_text_area {
margin-bottom: 6.544943820224719rem;
}


/* Project Page */

.project_page_gallery {
height: 38.2vh;
}

.project_page_gallery_item iframe {
width: calc((16 / 9) * 38.2vh - 3.3707865168539324rem);
}

.tags {
padding-bottom: 6.769662921348314rem;
}


/* BUW Logo */

#buw_logo {
display: none;
height: 1.6853932584269662rem;
}

#buw_logo_s {
display: block;
height: 3.230337078651685rem;
}


/* Window Size E End */

}


/* Window Size F Start */

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


/* Presettings */

html {
font-size: calc(1.1772486772486772vw * 3.55);
}


/* Basic Layout */

#about,
.project_page_title {
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}


/* Window Size F End */

}


/* Window Size G Start */

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


/* Presettings */

html {
font-size: calc(1.1772486772486772vw * 3.75);
}


/* Index Page */

#control_animations_button {
display: none;
}


/* Window Size G End */

}