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

:root {
--slider_y_top: 9.1rem;
--slider_y_top: clamp(9.1rem, 6.6613rem + 6.7742vw, 17.5rem);
--slider_y_bottom: 6rem;
--slider_y_bottom: clamp(6rem, 4.8387rem + 3.2258vw, 10rem);
--slider_x_top: calc(50% + 10rem);
--slider_x_bottom: calc(50% - 500px);
}

/* ------------------------------------------------------------- */
/* HEADER */
/* ------------------------------------------------------------- */

#header_bg {
position: absolute;
top: 0;
left: 0;
z-index: 9000;
}
#menu_nav .menu_icon a .icon span, #menu_nav .menu_icon a:link .icon span, #menu_nav .menu_icon a:visited .icon span { background-color: var(--color_white); }
#menu_nav .menu_icon a:active .icon span, #menu_nav .menu_icon a:hover .icon span, #menu_nav .menu_icon a:focus .icon span { background-color: var(--color_white); }
#menu_nav nav > ul > li > a, #menu_nav nav > ul > li > a:link, #menu_nav nav > ul > li > a:visited, #menu_nav nav > ul > li > a:active, #menu_nav nav > ul > li > a:hover, #menu_nav nav > ul > li > a:focus { color: var(--color_white); }
#menu_nav nav > ul > li > a::after { background: var(--color_white); }

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

#slider_bg {
position: relative;
padding: 0 var(--space_x_out);
overflow-x: hidden;
z-index: 0;
}
#slider_bg::before {
content: "";
position: absolute;
top: 0;
right: 0;
display:  block;
width: 100%;
height: 100%;
background-color: var(--color_orange);
clip-path: polygon(var(--slider_x_top) 0, 100% 0, 100% 100%, var(--slider_x_bottom) 100%);
z-index: 1;
}
#slider_bg.animation::before { transition: transform 1s; transform: translateX(100%); }
#slider_bg.animation.on::before { transform: translateX(0); }
#slider {
position: relative;
height: 100vh;
height: 100svh;
min-height: 750px;
padding: var(--slider_y_top) 0 var(--slider_y_bottom);
z-index: 2;
}
#slider .swiper { height: 100%; }
#slider_bg.animation .swiper { transition: opacity 0.5s 1s; opacity: 0; }
#slider_bg.animation.on .swiper { opacity: 1; }
#slider .swiper-wrapper {}
#slider .swiper-slide { width: 100%; height: 100%; }
section#slider .swiper-slide:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
right: 0;
display: block;
height: 50%;
background: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);
z-index: 5;
}

/* SLIDER - TEXT */
#slider .text {
position: absolute;
left: 0;
bottom: 0;
display: block;
width: 100%;
padding: var(--space_x_out);
padding-right: calc(10rem + (var(--space_x_out) *2));
text-align: left;
z-index: 10;
}
#slider .text .client {
display: block;
font-family: "Rajdhani", sans-serif;
font-size: 3.6rem;
font-size: clamp(3.6rem, 2.9032rem + 1.9355vw, 6rem);
font-weight: 700;
font-style: normal;
line-height: 1;
text-transform: uppercase;
color: var(--color_white);
}
#slider .text .project {
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_white);
}
#slider .text .deliverables {
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_white);
}
#slider .text .deliverables::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);
}
#slider .text .btn {
position: absolute;
right: var(--space_x_out);
bottom: var(--space_x_out);
display: block;
}
#slider .text .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;
}
#slider .text .btn a, #slider .text .btn a:link, #slider .text .btn a:visited { color: var(--color_grey); background-color: var(--color_white); }
#slider .text .btn a:active, #slider .text .btn a:hover, #slider .text .btn a:focus { color: var(--color_white); background-color: var(--color_orange); }

/* SLIDER - IMG */
#slider figure {
display: block;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
text-align: left;
overflow: hidden;
}
#slider img {
/*display: block;*/
width: 100%;
height: 100%;
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;
}
#slider_bg.animation .swiper_pagination { transition: opacity 0.5s 1.5s; opacity: 0; }
#slider_bg.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;
}
#slider_bg.animation .swiper_navigation { transition: opacity 0.5s 1.5s; opacity: 0; }
#slider_bg.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_white);
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_white);
right: 0;
transform-origin: right center;
transform: rotate(45deg) translateY(-1px);
}

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

#content {}
#content .boxed {
padding: 8rem 0 10rem;
padding: clamp(8rem, 4.5161rem + 9.6774vw, 20rem) 0 clamp(10rem, 5.6452rem + 12.0968vw, 25rem);
}
#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;
padding: 0 clamp(7rem, 1.6667rem + 5.2083vw, 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;
text-align: left;
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 .text { text-align: left; }
#content.animation .text { transition: opacity 0.5s 0.7s, transform 0.5s 0.7s; 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;
text-align: justify;
line-height: 1.5;
color: var(--color_grey);
}
#content span.btn {
display: inline-block;
text-align: left;
margin-top: 3rem;
margin-top: clamp(3rem, 2.4194rem + 1.6129vw, 5rem);
}
#content.animation span.btn { transition: opacity 0.5s 1.2s, transform 0.5s 1.2s; opacity: 0; transform: translateY(50px); }
#content.animation.on span.btn { opacity: 1; transform: translateY(0); }
#content span.btn a {
position: relative;
display:  block;
font-size: 1.8rem;
font-weight: 700;
line-height: 1;
padding: 1rem 3rem 1rem 2.5rem;
text-decoration: none;
letter-spacing: 0.05em;
text-transform: uppercase;
transition: color 0.5s;
z-index: 1;
}
#content span.btn a, #content span.btn a:link, #content span.btn a:visited { color: var(--color_grey); }
#content span.btn a:active, #content span.btn a:hover, #content span.btn a:focus { color: var(--color_white); }
#content span.btn a::before {
content: "";
position: absolute;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
background-color: var(--color_orange);
transition: clip-path 0.5s;
z-index: -1;
}
#content span.btn a::before, #content span.btn a:link::before, #content span.btn a:visited::before { clip-path: polygon(0 0, 5px 0, 5px 100%, 0% 100%); }
#content span.btn a:active::before, #content span.btn a:hover::before, #content span.btn a:focus::before { clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%); }


/* ------------------------------------------------------------- */
/* 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) {
    
    /* ROOT */
    :root {
    --slider_x_top: calc(100% - var(--space_x_out) - 7.5rem);
    --slider_x_top: calc(100% - var(--space_x_out) - clamp(7.5rem, -7.7419rem + 42.3387vw, 60rem));        
    --slider_x_bottom: calc(0% + var(--space_x_out) + 7.5rem);
    --slider_x_bottom: calc(0% + var(--space_x_out) + clamp(7.5rem, 3.8710rem + 10.0806vw, 20rem));
    }	
	
}

@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, -12.3529rem + 25.7353vw, 14rem);
    }
    #content .cols .col { width: 100%; }
    #content .cols .col:first-child {
    padding: 0 0 2rem;
    padding: 0 0 clamp(2rem, 1.4578rem + 1.5060vw, 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) {
    
    /* SLIDER */
    #slider .text { padding-right: var(--space_x_out); }
    #slider .text .btn {
    position: static;
    display: inline-block;
    margin-top: 2.5rem;
    }
	
}

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

@media only screen and (max-width: 479px) {
    
    /* SLIDER */
    #slider { min-height: 0; }
    
    /* CONTENT */
    #content span.btn a { font-size: 1.6rem; }
	
}

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

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

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