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

:root {
--projects_clip_path_sx: 9rem;
--projects_clip_path_sx: clamp(9rem, -2.9032rem + 33.0645vw, 50rem);
--projects_clip_path_dx: 2.5rem;
--projects_clip_path_dx: clamp(2.5rem, 0.3704rem + 2.8935vw, 5rem);
--projects_clip_path_t_sx: calc(50% - var(--projects_clip_path_sx));
--projects_clip_path_t_dx: calc(50% + var(--projects_clip_path_dx));
--projects_clip_path_b_sx: calc(50% + var(--projects_clip_path_sx));
--projects_clip_path_b_dx: calc(50% - var(--projects_clip_path_dx));
--projects_list_gap_x: 3rem;
--projects_list_gap_x: clamp(3rem, 0.9677rem + 5.6452vw, 10rem);
--projects_list_gap_y: 3rem;
--projects_list_gap_y: clamp(3rem, 0.9677rem + 5.6452vw, 10rem);
--projects_list_items: 2;
}

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

#header_bg {
position: relative;
z-index: 10;
}

/* ------------------------------------------------------------- */
/* FOOTER */
/* ------------------------------------------------------------- */

#footer_bg {
position: relative;
z-index: 10;
}

/* ------------------------------------------------------------- */
/* PROJECTS */
/* ------------------------------------------------------------- */

#projects { overflow-x: hidden; }
#projects::before {
content: "";
position: fixed;
top: 0;
left: 0;
display:  block;
width: 100%;
height: 0;
padding-top: 100%;
background-color: var(--color_orange);
clip-path: polygon(var(--projects_clip_path_t_sx) 0, var(--projects_clip_path_t_dx) 0, 100% var(--projects_clip_path_b_dx), 100% var(--projects_clip_path_b_sx));
z-index: 1;
}
#projects.animation::before { transition: transform 1s; transform: translateX(100%); }
#projects.animation.on::before { transform: translateX(0); }
#projects .boxed {
padding: 0 0 10rem;
padding: 0 0 clamp(10rem, 5.6452rem + 12.0968vw, 25rem);
}
#projects .list { gap: var(--projects_list_gap_y) var(--projects_list_gap_x); }
#projects .list .item {
position: relative;
display: block;
width: calc((100% / var(--projects_list_items)) - (((var(--projects_list_items) - 1) / var(--projects_list_items)) * var(--projects_list_gap_x)));
overflow: hidden;
z-index: 5;
}
#projects .list .item.animation { transition: opacity 1s 0.5s, transform 1s 0.5s; opacity: 0; transform: translateY(50px); }
#projects .list .item.animation.on { opacity: 1; transform: translateY(0); }
#projects .list .item::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
display: block;
width: 100%;
height: 100%;
background: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);
transition: opacity 0.5s ease-in-out;
opacity: 1;
z-index: 10;
}
#projects .list .item:hover::after { opacity: 0; }
#projects .item a {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
z-index: 15;
}
#projects .text {
position: absolute;
left: 0;
bottom: 0;
display: block;
width: 100%;
padding: 3rem;
text-align: left;
transition: transform 0.5s ease-in-out;
z-index: 20;
}
#projects a .text, #projects a:link .text, #projects a:visited .text { transform: translateY(0); }
#projects a:active .text, #projects a:hover .text, #projects a:focus .text { transform: translateY(100%); }
#projects .text h2 {
display: block;
font-family: "Rajdhani", sans-serif;
font-size: 2rem;
font-size: clamp(2rem, 1.1481rem + 1.1574vw, 3rem);
font-weight: 700;
font-style: normal;
line-height: 1;
text-transform: uppercase;
color: var(--color_white);
}
#projects .text h3 {
display: block;
font-family: "Rajdhani", sans-serif;
font-size: 1.6rem;
font-size: clamp(1.6rem, 1.0889rem + 0.6944vw, 2.2rem);
font-weight: 400;
font-style: normal;
margin-top: 0.5rem;
line-height: 1;
color: var(--color_white);
}
#projects figure {
display: block;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
#projects figure img {
display: block;
width: 100%;
height: auto;
margin: 0 auto;
padding: 0;
transition: transform 0.5s ease-in-out;
transform: scale(1);
}
#projects .item:hover figure img { transform: scale(1.1); }

/* ------------------------------------------------------------- */
/* 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) {
    
    /* ROOT */
    :root {
    --projects_clip_path_dx: 3rem;
    --projects_clip_path_dx: clamp(3rem, -8.5714rem + 32.1429vw, 30rem);
    }
    

}

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

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

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

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

}

@media only screen and (max-width: 735px) {
    
     /* ROOT */
    :root { --projects_list_items: 1; }
    
    /* PROJECTS */
    #projects .text h2 {
    font-size: 2rem;
    font-size: clamp(2rem, 1.0426rem + 2.6596vw, 3rem);
    }
    #projects .text h3 {
    font-size: 1.6rem;
    font-size: clamp(1.6rem, 1.0255rem + 1.5957vw, 2.2rem);
    }
	
}

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

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

	
}

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

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

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

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

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