/* Reset */

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

.gallery-block{
width: 50%;
height: auto;
margin-block-start: 0em !important;
margin-bottom: 2rem;
border-top: solid 1px #c5b796 !important;
padding-top: 3rem;
}

.gallery-block img {
max-width: 33%;
padding-bottom: 1rem;
object-fit: contain !important;
}

.centered-title{
  text-align: center !important;
}

ul {
margin-block-start: 0em !important;
padding-inline-start: 0px !important;
}

.resident{
border: solid 0px green !important;
border-top: solid 1px #c5b796 !important;
padding-top: 3rem !important;
margin-top: 3rem !important;
}

.resident .block p{
margin-bottom: 2rem !important;
}


a:active{
background-color: transparent !important;
}

html{
}

h1, h2, h3, h4, h5, h6 { /*reset for mobile browsers */
font-weight: normal !important;
}

body{
max-width: 100vw;
overflow-x: clip;
}

/* Fonts */

@font-face {
font-family: "Macan Regular";
src: url("../fonts/Macan/Macan-Regular-Web/Macan-Regular.woff") format("woff"),
url("../fonts/Macan/Macan-Regular-Web/Macan-Regular.woff2") format("woff2");
}       

@font-face {
font-family: "Macan Regular Italic";
src: url("../fonts/Macan/Macan-Regular-Italic-Web/Macan-Regular-Italic.woff") format("woff"),
url("../fonts/Macan/Macan-Regular-Italic-Web/Macan-Regular-Italic.woff2") format("woff2");
}

@font-face {
font-family: "Macan Light";
src: url("../fonts/Macan/Macan-Light_Web/Macan-Light.woff") format("woff"),
url("../fonts/Macan/Macan-Light_Web/Macan-Light.woff2") format("woff2");
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}

@font-face {
font-family: "Macan Light";
src: url("../fonts/Macan/Macan-Light_Web/Macan-Light.woff") format("woff"),
url("../fonts/Macan/Macan-Light_Web/Macan-Light.woff2") format("woff2");
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}

@font-face {
font-family: "Macan Stencil Semibold";
src: url("../fonts/Macan/Macan-Stencil-Semibold-Web/Macan-Stencil-Semibold.woff") format("woff"),
url("../fonts/Macan/Macan-Stencil-Semibold-Web/Macan-Stencil-Semibold.woff") format("woff2");
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}



/* Styles */
/* h1 */

h1{
font-family: Macan Light !important;
font-size: 4rem; 
line-height: 4.5rem !important;
margin-block-start: 0rem !important;
margin-block-end: 0rem !important;
color: #3d422e !important;
letter-spacing: -2px !important;
}

.dark-bg-full h1{
color: #ebe4d1 !important;
margin-left: 3vw;
}

.dark-text h1{
color: #3d422e !important;
font-size: 7.25rem !important;
line-height: 7.75rem !important;
max-width: 80vw !important;
text-rendering: optimizeLegibility !important;
padding-left: 1rem;
letter-spacing: -0.2rem !important;
}

.light-text h1{
color: #00faa0 !important;
font-size: 5.75rem !important;
line-height: 6rem !important;
max-width: 50vw !important;
}

.block h1{
margin-bottom: 3rem !important;
max-width: 90vw;
}

.h-custom h1{
font-size: 10rem !important;
padding-bottom: 3rem;
padding-top: 1rem;
}

/* h2 */

h2{
font-family: Macan Regular !important;
font-size: 2rem; 
line-height: 4.5rem !important;
margin-block-start: 0rem !important;
margin-block-end: 0rem !important;
color: #3d422e !important;
letter-spacing: 0px !important;
}

/* h3 */

h3{
font-family: Macan Light;
font-size: 1.8rem; line-height: 2.6rem !important;
color: #3d422e !important;
margin-block-start: 0rem !important;
margin-block-end: 1rem !important;
padding-left: calc(3vw + 1rem);
padding-top: 0rem;
}

.icons h3{
text-align: center !important;
float: center !important;
box-sizing: border-box;
padding-left: 0% !important;
width: 100% !important;
overflow: visible;
}

.h3-padding-cancel h3{
padding-left: calc(0vw + 0rem) !important;
}

.transport h3{
text-align: left !important;
float: left !important;
box-sizing: border-box;
padding-left: 0% !important;
width: 100% !important;
overflow: visible;
}

/* h4 */

h4{
font-family: Macan Regular;
font-size: 1.5625rem; line-height: 2.2rem !important;
color: #3d422e !important;
letter-spacing: 0rem !important; 
}

/* h5 */

h5{
font-family: Macan Regular !important;
font-size: 1.1rem !important;
line-height: 1rem !important;
margin-block-start: 0rem;
margin-block-end: 0rem !important;
}

/* h6 */

h6{
font-weight: 200 !important;
font-family:Macan Regular;
font-size: 0.9rem; line-height: 1.7rem !important;
letter-spacing: 1px !important;
color: #C5B695 !important;
margin-block-start: 3rem;
margin-block-end: 0rem !important;
border-top: solid 1px #c5b796;
padding-top: 0.75rem;
}

.dark-bg-full h6{
color: #ebe4d1 !important;
margin-left: 3vw;
padding-bottom: 2rem !important;
}

/* p */

p{
font-family:Macan Regular !important;
font-size: 1.2rem; line-height: 1.7rem !important;
color: #3d422e !important;
letter-spacing: 0.01rem;
text-rendering: optimizeLegibility !important;
}

.block p{
margin-bottom: 2rem !important;
}

.dark-bg-full p{
color: #ebe4d1 !important; 
}

.icons p{
text-align: center !important;
float: center !important;
box-sizing: border-box;
padding-left: 0% !important;
width: 100% !important;
overflow: visible;
}

.footer-p p{
font-size: 1rem;
line-height: 1.5rem !important;
color: #C5B695 !important;
letter-spacing: 0.04rem !important;
}

.footer-heading p{
font-size: 1.2rem;
}

.kostum p{
text-align: center;
margin-bottom: 1em;
}

.kostumm p{
text-align: center !important;
}

.transport p{
text-align: left !important;
float: left !important;
box-sizing: border-box;
padding-left: 0% !important;
width: 100% !important;
overflow: visible;
}

.h-custom p{
padding-bottom: 1rem;
border-bottom: solid 1px #c4b795;
}

p.secondary{
font-family: Macan Regular;
font-size: 12px; line-height: 16px !important;
color: #3d422e !important;
columns: 1 !important;
}

.centered-text p{
text-align: center !important;
}

/* a */

a{
color: #3d422e !important;
}

button a{
text-decoration: none !important;
}

p a{
color: #3D422E !important;
border-bottom: solid 2px #C5B695 !important;
text-decoration: none;
}

.custom-menu{
  padding-bottom: 1rem;
}

.custom-menu-item a:hover{
transition: 0.5s ease-in-out;
color: #00faa0 !important;
padding-left: 3rem !important;
}

.custom-menu-item a:hover{
transition: 0.5s ease-in-out;
color: #00faa0 !important;
padding-left: 3rem !important;
}

.custom-menu a{
text-decoration: none;
font-family: Macan Light;
font-size: 10rem !important;
color: #3D422E !important;
width: 100% !important;
letter-spacing: -9px;
}

/* li */

li{
font-family:Macan Regular;
list-style: none;
}

li:hover{
color: black;
background: lightgrey;
text-decoration: underline !important;
}

/* bespoke typography */

.footer-p{
margin-bottom: 0rem !important;
}

.footer-heading{
margin-bottom: 1.5rem !important;
}

.centered-text{
text-align: center;
margin: 0 auto;
}

/* Images */

.footer img{
    margin-right: 1rem;
    float: left;
    max-height: 2rem;
    max-width: 2rem;
    margin-bottom: 2rem;
}

/* Custom Menu */

.custom-menu-item{
border-top: solid 1px #c4b795 !important;
width: 100% !important;
}

/* Buttons */

button{
display: inline-block;
background: #00faa1;
border: none;
border-radius: 100vw;
padding-top: 1rem;
padding-bottom: 1rem;
font-family: Macan regular;
font-size: 1.2rem;
text-decoration: none !important;
transition: transform 0.3s ease-in-out; /* Add transition for scaling */
margin: 0;
margin-bottom: 0.5rem;
}

button:hover{
color: #3D422E !important;
transform: scale(1.1); /* Apply scaling on hover */
}

.buildings-buttons button{
width: calc(50% - 0.4rem);
float: left;
margin-top: 0.3rem;
margin-bottom: 0.3rem;
margin-left: 0.2rem;
margin-right: 0.2rem;
box-sizing: border-box;
}

.buildings-buttons{
float: left;
margin-top: 1rem;
width: 100%;
box-sizing: border-box;
}

.contact-button{
padding: 1rem 2rem!important;
margin: 0 auto;
margin-top: 3rem;
margin-bottom: 3rem;
box-sizing: border-box;
text-decoration: none !important;
}

/* Animations */

.fade-out {
pointer-events: none;
filter: blur(3px);
opacity: 0;
transition: opacity 2s ease; /* You can adjust the duration and easing */
}

.animate-me {
opacity: 0;
transform: translateY(0px) translateX(0px) translateZ(0px); 
transition: opacity 1.35s, transform 0.5s, filter 1.1s, scale 1s;
filter: blur(3px);
scale: 1.3 !important;
}

.animate-me.is-visible {
opacity: 1;
transform: translateY(0) translateX(0px) translateZ(0px);
filter: blur(0px);
scale: 1 !important;
}


/* Image */

img{
width: 100% !important;
}

.kostum img{
height: 100%;
object-fit: cover;
border-radius: 100%;
box-sizing: border-box;
padding: 2em;
}

.kostumm .block img{
height: 100%;
object-fit: cover;
border-radius: 100%;
box-sizing: border-box;
padding: 2em;
}

.transport img{
max-width: 33%;
padding: 0% !important;
padding-bottom: 1rem !important;
margin: 0 auto !important;
}

/* Video */

#intro-video{
object-fit: cover;
width: 100vw;
height: 100vh;
left: 0px;
top: 0px;
position: absolute;
z-index: 1000;
}

iframe{
height: 100vh !important;
width: 100vw !important;
margin-left: 0vw !important;
margin-right: 0vw !important;
margin-top: 0vw !important;
margin-bottom: 0vw !important;
left: 0px !important;
}

/* Graphics, backgrounds */

/* Backgrounds */

.dark-bg{
background: #3d422e !important;
}

.dark-bg-full{
background: #3d422e !important;
background-size: cover;
width: 100vw;
margin-left: -3vw !important;
margin-right: -3vw !important;
}

/* Icons */

.icons{
perspective: 1000px !important;
}

.icons img{
height: 25vh !important;
max-width: 100% !important;
padding: 0% !important;
padding-bottom: 1rem !important;
margin: 0 auto !important;
transition: transform 1s ease; /* Adjust the duration for a slower transition */
transform-style: preserve-3d; /* For better 3D transformations */
}

section.icons{
perspective: 200px !important;
}

/* Apply hover effect to the images */
.icons img:hover {
transform: rotateY(180deg);
}

/* Layout */

/* Sidemargins */

.headline{
margin-left: calc(12.5vw - 1.5vw);
margin-right: calc(12.5vw - 1.5vw);
}

.subheadline{
margin-left: calc(12.5vw - 1.5vw);
margin-right: calc(12.5vw - 1.5vw);
}

.body{
margin-left: calc(25vw - 1.5vw);
margin-right: calc(25vw - 1.5vw);
}

.nominator{
margin-left: calc(12.5vw - 1.5vw);
margin-right: calc(12.5vw - 1.5vw);
}

section.embedded-button img{
max-width: 200px !important;
display: block;
margin: auto;
text-align: center;
  font-family: macan regular;
  background-color: #00faa0 !important;
  color: #3d422e !important;
  border: none;
  border-radius: 20px;
  padding: 0.2rem 0.2rem;
  cursor: pointer;
  font-size: 1.2rem !important;
  outline: none;
  transition: transform 0.3s ease-in-out; /* Add transition for scaling */
  margin-bottom: 2rem !important;
}

section.embedded-button img:hover {
  transform: scale(1.05); /* Apply scaling on hover */
}

/* Sections, Columns & Blocks */

section .kostumm{
display: flex;
}

.column{
margin: 0;
padding: 0 !important;
width: 100% !important;
height: auto;
float: left;
}

.kostum .block{
width:100%;
aspect-ratio : 1 / 1;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box;
}

.scrollable-section {
height: 500px;
width: 500px;
max-height: 100vh; /* Set the maximum height as needed */
overflow-y: auto; /* Enable vertical scrolling */
}

.kostumm{
width: 100% !important;
}

.kostumm .column{
width: 25% !important;
margin: 0 auto;
}

.kostumm .blocks{
justify-content: center !important;
}

.kostumm .block{
width:100%;
aspect-ratio : 1 / 1;
padding: 0 !important;
box-sizing: border-box;
}

.transport .block{
width: auto;
padding: 2rem !important;
margin: 0 !important;
}

.horizontal-scroll{
padding-left: 20vw !important;
margin-left: -4vw;
width: calc(100vw + 2vw) !important;
white-space: nowrap; 
overflow: scroll !important;
height: 60vh;
object-fit: contain;
overflow-y: hidden !important;
background: #3d422e;
}

.horizontal-scroll img{
margin-top: -1rem;
width: auto !important;
height: 100%;
max-width: 5000%;
box-sizing: border-box;
}

/* MISC */

/* HONEYPOT FOR REGISTRATION FORM */
.honey {
position: absolute;
left: -9999px;
}

.cover h1{
font-family: Macan Light !important;
}

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

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

/* Typography */

/* H1 */

h1{
font-size: 2.5rem; 
line-height: 3rem !important;
}

.dark-text h1{
color: #3d422e !important;
font-size: 4rem !important;
line-height: 4.25rem !important;
max-width: 80vw !important;
text-rendering: optimizeLegibility !important;
padding-left: 1rem;
}

.light-text h1{
color: #00faa0 !important;
font-size: 5.75rem !important;
line-height: 6rem !important;
max-width: 50vw !important;
}

.block h1{
margin-bottom: 0rem !important;
margin-block-start: 1rem !important;
margin-block-end: 0rem !important;
}

.cover h1{
color: #ebe4d1 !important;
margin-block-end: 1rem !important;
}

.cover div{
filter: drop-shadow(2px 8px 50px black) !important;
}

.h-custom h1{
font-size: 6rem !important;
line-height: 5rem !important;
padding-bottom: 0rem;
padding-top: 0rem;
}

iframe{
height: 80vh !important;
width: 90vw !important;
margin-left: 5vw !important;
margin-right: 5vw !important;
margin-top: 5vw !important;
margin-bottom: 5vw !important;
left: 0px !important;
}

#intro-video{
display: none !important;
}

.transport{
display: inline-block !important;
columns: 2 !important;
column-gap: 0 !important;
}

.transport .blocks{
padding: 0 !important;
margin: 0 !important;
width: 100%;
float: left !important;
display: block !important;
}

.transport .block{
width: 100% !important;
padding: 0 !important;
margin: 0!important;
display: inline-block !important;
}

.transport img{
padding-right: 0% !important;
width: 33% !important;
max-width: 100% !important;
}

/* H2 */
h2{
font-size: 1.5rem; 
line-height: 4.5rem !important;
margin-block-start: 0rem !important;
margin-block-end: 0rem !important;
}

/* H3 */

h3{
font-size: 1.5rem; line-height: 2rem !important;
margin-block-start: 0rem !important;
margin-block-end: 1rem !important;
}

/* H4 */

h4{
margin-block-start: 0rem !important;
margin-block-end: 0rem !important;
}

/* H5 */

h5{
margin-block-start: 0rem !important;
margin-block-end: 0rem !important;
}

/* H6 */

h6{
font-size: 1rem !important;  
line-height: 1.5rem !important;
margin-block-start: 1rem !important;
margin-block-end: 0rem !important;
border-top: solid 0px #c5b796;
padding-top: 0rem;
}

/* p */

p {
font-size: 1rem; line-height: 1.5rem !important;
margin-block-start: 0rem !important;
margin-block-end: 0rem !important;
}

/* a */

.custom-menu a{
text-decoration: none;
font-family: Macan Light;
font-size: 4rem !important;
color: #3D422E !important;
width: 100% !important;
letter-spacing: -3px;
}

/* Sections, Columns & Blocks */

.kostumm{
display: inline-block !important;
}

.kostumm .column{
width: 50% !important;
margin: 0 !important;
float: left !important;
display: block !important;
}

.empty-block{
display: none;
height: 0px;
width: 0px;
padding: 0px !important;
margin: 0px !important;
margin-bottom: 0rem !important;
}

.panorama.empty-block{
display: block !important;
height: 100% !important;
width: 100% !important;
}

.kostumm .block img{
padding: 1rem;
}

section.edit.horizontal-scroll{
padding-left: 20vw !important;
margin-left: -6vw !important;
display: block;
}

.horizontal-scroll{
margin-left: -4vw;
width: calc(100vw + 2vw) !important;
white-space: nowrap; 
overflow: scroll !important;
height: 60vh;
object-fit: contain;
overflow-y: hidden !important;
background: #3d422e;
}

.horizontal-scroll img{
margin-top: -1rem;
width: auto !important;
height: 100%;
max-width: 5000%;
box-sizing: border-box;
}

/* Residents logos styling */

.gallery-block{
width: 100% !important;
height: auto;
margin-block-start: 0em !important;
margin-bottom: 2rem;
border-top: solid 1px transparent !important;
padding-top: 3rem;
}

.resident h2{
padding-left: 0rem !important;
}
.resident p{
padding-left: 0rem !important;
}
.resident .gallery-block{
padding-left: 2rem !important;
}

.gallery-block img {
max-width: 33%;
padding-bottom: 0rem;
object-fit: contain !important;
}

ul {
margin-block-start: 0em !important;
padding-inline-start: 0px !important;
}

.resident{
border: solid 0px green !important;
border-top: solid 1px #c5b796 !important;
padding-top: 3rem !important;
margin-top: 3rem !important;
}

.resident section {
display: flex;
}

.column {
flex-direction: column-reverse row-reverse !important;
}

.resident .block p{
margin-bottom: 2rem !important;
}

}