/* ------------------------------------------------------------- */
/* ROOT */
/* ------------------------------------------------------------- */

:root {
--media_clip_path_sx: 90%;
--media_clip_path_sx: calc(100% - var(--space_x_out));
--slider_y_bottom: 6rem;
--slider_y_bottom: clamp(6rem, 4.8387rem + 3.2258vw, 10rem);
}

/* ------------------------------------------------------------- */
/* MEDIA */
/* ------------------------------------------------------------- */

#media {
position: relative;
padding: 0 var(--space_x_out);
overflow-x: hidden;
z-index: 0;
}
#media:has(#video) { margin-bottom: 1rem; }
#media::before {
content: "";
position: absolute;
top: var(--space_x_out);
right: 0;
bottom: calc(var(--space_x_out) + var(--slider_y_bottom));
left: 0;
display:  block;
background-color: var(--color_orange);
clip-path: polygon(0 0, 100% var(--space_x_out), 100% 100%, 0 var(--media_clip_path_sx));
z-index: 1;
}
#media.animation::before { transition: transform 1s; transform: scaleY(0); }
#media.animation.on::before { transform: scaleY(1); }
#media:has(#video)::before { bottom: var(--space_x_out); }

/* ------------------------------------------------------------- */
/* SLIDER */
/* ------------------------------------------------------------- */

#slider {
position: relative;
height: auto;
padding: 0 0 var(--slider_y_bottom);
z-index: 2;
}
#slider .swiper { height: auto; }
#media.animation .swiper { transition: opacity 0.5s 1s; opacity: 0; }
#media.animation.on .swiper { opacity: 1; }
#slider .swiper-wrapper {}
#slider .swiper-slide {
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
/*#slider figure {
display: block;
width: 100%;
height: auto;
margin: 0;
padding: 0;
text-align: left;
overflow: hidden;
}
#slider img {
display: block;
width: 100%;
height: auto;
margin: 0;
padding: 0;
object-fit: cover;
}*/

/* SLIDER - PAGINATION */
#slider .swiper_pagination {
position:  absolute;
left: 0;
bottom: calc(var(--slider_y_bottom) /2);
width: auto;
font-family: "Rajdhani", sans-serif;
font-size: 2rem;
font-size: clamp(2rem, 1.7097rem + 0.8065vw, 3rem);
font-weight: 400;
font-style: normal;
line-height: 1;
color: var(--color_grey);
transform: translateY(50%);
z-index: 5;
}
#media.animation .swiper_pagination { transition: opacity 0.5s 1.5s; opacity: 0; }
#media.animation.on .swiper_pagination { opacity: 1; }
#slider .swiper_pagination .swiper-pagination-current {
width: 4rem;
width: clamp(2.5rem, 2.0645rem + 1.2097vw, 4rem);
font-weight: 700;
text-align: left;
}
#slider .swiper_pagination .swiper-pagination-total {
width: 4rem;
width: clamp(2.5rem, 2.0645rem + 1.2097vw, 4rem);
text-align: right;
}

/* SLIDER - NAVIGATION */
#slider .swiper_navigation {
position: absolute;
right: 0;
bottom: calc(var(--slider_y_bottom) /2);
transform: translateY(50%);
z-index: 5;
}
#media.animation .swiper_navigation { transition: opacity 0.5s 1.5s; opacity: 0; }
#media.animation.on .swiper_navigation { opacity: 1; }
#slider .swiper_navigation .arrow {
position: relative;
display:  block;
width:  3rem;
width:  clamp(3rem, 2.7097rem + 0.8065vw, 4rem);
height: 3rem;
cursor: pointer;
opacity: 1;
transition: opacity 0.5s; 
}
#slider .swiper_navigation .arrow:first-child {
margin-right: 2rem;
margin-right: clamp(2rem, 1.7097rem + 0.8065vw, 3rem);
transform: rotate(-180deg);
}
#slider .swiper_navigation .arrow:hover { opacity: 0.5; }
#slider .swiper_navigation .arrow::before {
content: "";
position: absolute;
top: 50%;
left: 0;
display:  block;
width: 100%;
height: 2px;
background-color: var(--color_grey);
transform: translateY(-50%);
}
#slider .swiper_navigation .arrow::after {
content: "";
position: absolute;
top: 50%;
display:  block;
width: 1.2rem;
width: clamp(1.2rem, 1.0839rem + 0.3226vw, 1.6rem);
height: 2px;
background-color: var(--color_grey);
right: 0;
transform-origin: right center;
transform: rotate(45deg) translateY(-1px);
}

/* ------------------------------------------------------------- */
/* VIDEO */
/* ------------------------------------------------------------- */

#video {
position: relative;
height: auto;
padding: 0;
z-index: 2;
}
#media.animation #video { transition: opacity 0.5s 1s; opacity: 0; }
#media.animation.on #video { opacity: 1; }
#video figure {
position: relative;
display: block;
width: 100%;
height: 0;
margin: 0;
padding-bottom: 56.25%;
}
#video figure iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#video .no_cookie {
position: relative;
display: block;
width: 100%;
height: 0;
margin: 0;
padding-bottom: 56.25%;
background-color: var(--color_grey);
}
#video .no_cookie .text {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: var(--space_x_out);
justify-content: center;
align-items: center;
}
#video .no_cookie p {
display: block;
font-size: 1.6rem;
font-size: clamp(1.6rem, 1.4839rem + 0.3226vw, 2rem);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
color: var(--color_white);
}
#video .no_cookie .btn {
display: block;
margin-top: 2rem;
}
#video .no_cookie .btn a {
display:  block;
font-size: 1.6rem;
font-weight: 700;
line-height: 1;
padding: 1rem 2rem;
text-decoration: none;
letter-spacing: 0.05em;
text-transform: uppercase;
transition: color 0.5s, background-color 0.5s;
z-index: 1;
}
#video .no_cookie .btn a, #video .no_cookie .btn a:link, #video .no_cookie .btn a:visited { color: var(--color_grey); background-color: var(--color_white); }
#video .no_cookie .btn a:active, #video .no_cookie .btn a:hover, #video .no_cookie .btn a:focus { color: var(--color_white); background-color: var(--color_orange); }

/* ------------------------------------------------------------- */
/* CONTENT */
/* ------------------------------------------------------------- */

#content {}
#content .boxed {
padding: 3rem 0;
padding: clamp(3rem, -0.4839rem + 9.6774vw, 15rem) 0;
}
#content .cols {
padding: 0 7rem;
padding: 0 clamp(7rem, 1.6667rem + 5.2083vw, 10rem);
}
#content .cols .col { width: 50%; }
#content .cols .col:first-child {
padding: 0 7rem 0 0;
padding: 0 clamp(7rem, 1.6667rem + 5.2083vw, 10rem) 0 clamp(0rem, -17.7778rem + 17.3611vw, 10rem);
text-align: left;
}
#content .cols .col:last-child {
padding-right: 0;
padding-right: clamp(0rem, -17.7778rem + 17.3611vw, 10rem);
}
#content h1 {
display: block;
font-family: "Rajdhani", sans-serif;
font-size: 3.6rem;
font-size: clamp(3.6rem, 2.9032rem + 1.9355vw, 6rem);
font-weight: 600;
font-style: normal;
line-height: 1;
text-transform: uppercase;
color: var(--color_grey);
}
#content.animation h1 { transition: opacity 0.5s 0.2s, transform 0.5s 0.2s; opacity: 0; transform: translateY(50px); }
#content.animation.on h1 { opacity: 1; transform: translateY(0); }
#content h2 {
display: block;
font-family: "Rajdhani", sans-serif;
font-size: 2.4rem;
font-size: clamp(2.4rem, 1.9355rem + 1.2903vw, 4rem);
font-weight: 400;
font-style: normal;
margin-top: 0;
margin-top: clamp(0rem, -0.1452rem + 0.4032vw, 0.5rem);
line-height: 1;
color: var(--color_grey);
}
#content.animation h2 { transition: opacity 0.5s 0.5s, transform 0.5s 0.5s; opacity: 0; transform: translateY(50px); }
#content.animation.on h2 { opacity: 1; transform: translateY(0); }
#content h3 {
position:  relative;
display: block;
font-size: 1.6rem;
font-size: clamp(1.6rem, 1.4839rem + 0.3226vw, 2rem);
font-weight: 300;
font-style: italic;
margin-top: 0.5rem;
margin-top: clamp(0.5rem, -0.0806rem + 1.6129vw, 2.5rem);
padding-left: 4rem;
padding-left: clamp(4rem, 3.4194rem + 1.6129vw, 6rem);
line-height: 1.5;
letter-spacing: 0.03em;
color: var(--color_grey);
}
#content.animation h3 { transition: opacity 0.5s 0.8s, transform 0.5s 0.8s; opacity: 0; transform: translateY(50px); }
#content.animation.on h3 { opacity: 1; transform: translateY(0); }
#content h3::before {
content: "";
position: absolute;
left: 0;
top: 1rem;
top: clamp(1rem, 0.8548rem + 0.4032vw, 1.5rem);
display: block;
width: 2rem;
width: clamp(2rem, 1.7097rem + 0.8065vw, 3rem);
height: 0.5rem;
background-color: var(--color_orange);
}
#content .text { text-align: justify; }
#content.animation .text { transition: opacity 0.5s 1s, transform 0.5s 1s; opacity: 0; transform: translateY(50px); }
#content.animation.on .text { opacity: 1; transform: translateY(0); }
#content p {
display: block;
font-size: 1.8rem;
font-size: clamp(1.8rem, 1.6839rem + 0.3226vw, 2.2rem);
font-weight: 400;
line-height: 1.5;
color: var(--color_grey);
}
#content p a {
font-weight: 700;
text-decoration: underline;
transition: color 0.5s;
}
#content p a, #content p a:link, #content p a:visited { color: var(--color_grey); }
#content p a:active, #content p a:hover, #content p a:focus { color: var(--color_orange); }

/* ------------------------------------------------------------- */
/* OTHERS */
/* ------------------------------------------------------------- */

#others {}
#others .boxed {
padding: 6rem 0 10rem;
padding: clamp(6rem, 3.3871rem + 7.2581vw, 15rem) 0 clamp(10rem, 5.6452rem + 12.0968vw, 25rem);
}
#others ul {}
#others.animation ul { transition: opacity 0.5s 1s, transform 0.5s 1s; opacity: 0; transform: translateY(50px); }
#others.animation.on ul { opacity: 1; transform: translateY(0); }
#others ul li { display: block; width: 50%; }
#others ul li.prev { text-align: left; border-left: 0.5rem solid var(--color_orange); }
#others ul li.next {text-align: right; border-right: 0.5rem solid var(--color_orange); }
#others ul li:only-child { width: 100%; }
#others ul li a {
position: relative;
display: inline-block;
margin: 0;
padding: 0 1.5rem;
padding: 0 clamp(1.5rem, 1.0645rem + 1.2097vw, 3rem);
text-decoration: none;
white-space: normal;
}
#others ul li a span.label {
display: block;
font-size: 1.2rem;
font-size: clamp(1.2rem, 1.0839rem + 0.3226vw, 1.6rem);
font-weight: 300;
font-style: italic;
margin-bottom: 0.5rem;
margin-bottom: clamp(0.5rem, 0.3548rem + 0.4032vw, 1rem);
line-height: 1;
letter-spacing: 0.03em;
color: var(--color_grey);
}
#others ul li a span.project {
display: block;
font-family: "Rajdhani", sans-serif;
font-size: 2rem;
font-size: clamp(2rem, 1.7677rem + 0.6452vw, 2.8rem);
font-weight: 700;
font-style: normal;
line-height: 1;
text-transform: uppercase;
color: var(--color_grey);
transition: color 0.5s;
}
#others ul li a span.project, #others ul li a:link span.project, #others ul li a:visited span.project { color: var(--color_grey); }
#others ul li a:active span.project, #others ul li a:hover span.project, #others ul li a:focus span.project { color: var(--color_orange); }

/* ------------------------------------------------------------- */
/* PIXEL RATIO */
/* ------------------------------------------------------------- */

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { 


			
}

/* ------------------------------------------------------------- */
/* RESPONSIVE */
/* ------------------------------------------------------------- */

@media (hover: none) and (pointer: coarse) {
	
}

@media screen and (orientation: landscape) {
    
}

@media screen and (orientation: portrait) {
  
}

@media only screen and (max-width: 1699px) {
	
	
}

@media only screen and (max-width: 1599px) {
    	
}

@media only screen and (max-width: 1439px) {
	
}

@media only screen and (max-width: 1365px) {
	
}

@media only screen and (max-width: 1279px) {
	
	
}

@media only screen and (max-width: 1199px) {
	
}

@media only screen and (max-width: 1111px) {
		
	
}

@media only screen and (max-width: 1023px) {
    
    /* CONTENT */
    #content .cols {
    display: block;
    padding: 0 0rem;
    padding: 0 clamp(0rem, -6.1765rem + 12.8676vw, 7rem);
    }
    #content .cols .col { width: 100%; }
    #content .cols .col:first-child {
    padding: 0 0 2.5rem;
    padding: 0 0 clamp(2.5rem, 2.2289rem + 0.7530vw, 3rem);
    }
	
}

@media only screen and (max-width: 833px) {
	
}

@media only screen and (max-width: 767px) {
	
}

@media only screen and (max-width: 735px) {
	
}

@media only screen and (max-width: 666px) {
	
    
}
	

@media only screen and (max-width: 599px) {
    
    /* OTHERS */
    #others ul li a {
    display: block;
    height: 100%;
    }	
	
}

@media only screen and (max-width: 567px) {
	
	
}

@media only screen and (max-width: 479px) {
    
    /* VIDEO */
    #video .no_cookie {
    position: static;
    height: auto;
    padding-bottom: 0;
    }
    #video .no_cookie .text {
    position: static;
    height: auto;
    }
    
    	
}

@media only screen and (max-width: 413px) {
	
}

@media only screen and (max-width: 374px) {
	
	
}

@media only screen and (max-width: 359px) {
	
}