*,
*::after,
*::before {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

:root { 
	--color-text: ;
	--color-bg: #131417;
	--color-link: #aaa;
	--color-link-hover: #fff;
	--color-label: #adadad;
	--color-text-alt: #575757;
	--color-caption: #fff;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  margin: 0; 
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch; 
  color: ; 
}
 

body {
	background: #121212;  
	font-size: 100%;
	height: 100%;
	width: 100%;
	overflow-x:hidden;  
	-webkit-overflow-scrolling: touch; 
}

 
 
section {
  position: relative;
  padding: 3vw 0; 
  overflow: ;
}

@media (max-width: 992px) {  
	section {
	  position: relative;
	  padding: 2vw 0;  
	}
} 


#wrap #container #contents { width:100% !important; margin:0 auto;}   




/* Page 1 */

/* 
.main {
	position: relative; opacity:0; transition:all 2s ease-in-out;
}
.main.action {opacity:1; transition:all 2s ease-in-out;}
.main_sub {
	position: relative; opacity:0; transition:all 2s ease-in-out;
}
.main_sub.action {opacity:1; transition:all 2s ease-in-out;}
 */



.wrap {	position: relative; z-index: 10; opacity:0; transition:all 2s ease-in-out;}
.wrap.action {opacity:1; transition:all 2s ease-in-out;}




.maintitle .h1,
.maintitle .display-1,
.maintitle .h6 {
  position: relative;
  width: 100%;
  height: ; 
  display: flex;
  justify-content: center;
  align-items: flex-center;
  font-weight: ;
  /* font-size: calc(3rem + 0.3vw); */
  text-align: center;
  color: white;
  box-sizing: border-box;
  overflow: ; 
    margin:2em 0 1em ;
}   
 
 




/*  Page 1 - visual */

.home-slider { 
	position: relative; 
  width: 100%;
  height: calc(100vh);  z-index: 1}

.home-slider .overlay:before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, .0); 
	background:linear-gradient(180deg, rgba(19,19,19,0) 50%, rgba(19,19,19,.5) 80%, rgba(19,19,19,1) 100%); 
	z-index: 0; }  
.home-slider .owl-nav {
	opacity: 1;
	visibility: hidden;
	-webkit-transition: .3s all ease;
	-o-transition: .3s all ease;
	transition: .3s all ease; 
	color:#fff;} 

.home-slider:focus .owl-nav, 
.home-slider:hover .owl-nav {
	opacity: 1;
	visibility: visible; }

.home-slider .slider-item { 
  width: 100%;
  height: calc(100vh);
  background-position: center center;
  background-size:cover;
  background-repeat:repeat;
	background-attachment: fixed; 
  position: relative;
  overflow: hidden; 
	
  background-position: center center;
  background-size:cover;
  background-repeat:repeat;
	background-attachment: fixed;
}
.home-slider .slider-item::after{
	content:""; display:block; position:absolute; bottom:0; left:0; width:100%; height:calc(50vh);  
	background:linear-gradient(180deg, rgba(19,19,19,0) 10%, rgba(19,19,19,.5) 50%, rgba(19,19,19,1) 100%); 
	z-index:3;
	transition:all 0.2s linear; } 
.home-slider .owl-dots {
	position: absolute;
	bottom: 5% ;
	width: 100%; }
.home-slider .owl-dots .owl-dot {
	width: 10px;
	height: 10px;
	margin: 5px;
	border-radius: 50%;
	background: #fff; 
	outline: none !important;
	position: relative;
	-webkit-transition: .3s all ease;
	-o-transition: .3s all ease;
	transition: .3s all ease; }
.home-slider .owl-dots .owl-dot i {
	position: absolute;
	width: 20px;
	height: 3px;
	background: #fff;
	left: 50%;
	top: 50%;
	display: block; }
.home-slider .owl-dots .owl-dot.active i {	background: #0057e8; }  
 
  .home-slider.owl-carousel:hover .owl-nav .owl-prev,
  .home-slider.owl-carousel:hover .owl-nav .owl-next {    opacity: 1; }
  .home-slider.owl-carousel:hover .owl-nav .owl-prev {    left:20px ; }
  .home-slider.owl-carousel:hover .owl-nav .owl-next {    right:20px ; }
	
	
@media (max-width: 992px) {  
	.home-slider .slider-item { } 
}
@media (max-width: 767px) {  
	.home-slider .slider-item { } 
}





/* Page 1 - text mask */
.text-mask-wrap {
  /* width: 100%;
  height: calc(100vh);  
  position: relative;
  overflow: hidden; */
	margin-bottom: 5vh;
}
.text-mask {
  width: 100%;
  height: calc(100vh);  
  position: relative;
  overflow: hidden;
}
.text-mask .bg {   
  background-position: center center;
  background-size:cover;
  background-repeat:repeat;
	background-attachment: fixed;
  width: 100%;
  height: 100%;  
  position: relative;
  overflow: hidden;
}
.text-mask .img01 {  
  background-image: url("/img/main/vimg01.jpg");   
}
.text-mask .img02 {  
  background-image: url("/img/main/vimg02.jpg");  
}
.text-mask .img03 {  
  background-image: url("/img/main/vimg03.jpg");  
} 
.text-mask .img04 {  
  background-image: url("/img/main/vimg04.jpg");   
} 
.text-mask .img05 {  
  background-image: url("/img/main/vimg05.jpg");   
} 
.text-mask .img06 {  
  background-image: url("/img/main/vimg06.jpg");   
}  

.text-mask .bg01 {  
  background-image: url("/img/main/1713401809929.jpg");   
}
.text-mask .bg02 {  
  background-image: url("/img/main/visual02.jpg");  
}
.text-mask .bg03 {  
  background-image: url("/img/main/visual01.jpg");  
} 
.text-mask .bg04 {  
  background-image: url("/img/main/visual04.jpg");   
} 
.text-mask .bg05 {  
  background-image: url("/img/main/visual05.jpg");   
} 
.text-mask .bg06 {  
  background-image: url("/img/main/visual06.jpg");   
}


.text-mask .bg_overlay {
	content:""; display:block; position:absolute; top:0; left:0; width:100%; height:100%; 
	background: rgb(19,19,19,.3);  
	z-index:1;
	transition:all 0.2s linear;
   /* mix-blend-mode: multiply;*/ }

.text-mask .bg::after {
	content:""; display:block; position:absolute; bottom:0; left:0; width:100%; height:50%;  
	background:linear-gradient(180deg, rgba(19,19,19,0) 10%, rgba(19,19,19,.5) 50%, rgba(19,19,19,1) 100%); 
	z-index:2;
	transition:all 0.2s linear;
   display:none ; }

.text-mask .bg01::after,
.text-mask .bg02::after, 
.text-mask .bg03::after,
.text-mask .bg04::after{
	content:""; display:block; position:absolute; bottom:0; left:0; width:100%; height:50%;  
	background:linear-gradient(180deg, rgba(19,19,19,0) 10%, rgba(19,19,19,.5) 50%, rgba(19,19,19,1) 100%); 
	z-index:5;
	transition:all 0.2s linear;
   display: ; } 

.text-mask .panel {
  position: relative;
  width: 100%;
  height: calc(50vh); 
  display: flex;
  justify-content: center;
  align-items: end;
  font-weight: 600;
  font-size: 1.5em;
  text-align: center;
  color: white;
  box-sizing: border-box;
  overflow: hidden;
} 
.text-mask .panel-sub {
  position: absolute;
  top: 0;
  left: 0;
    right:0;
  width: 90%; 
  height: calc(100vh); 
    margin:auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
  overflow: hidden
}
.text-mask .panel-mask {
  position: absolute;  
  top: 0;
  left: 0;
    right:0;
  width: 100%; 
  height: calc(100vh); 
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
	z-index: 10;
}
.text-mask .panel.description {  position: relative;}
.text-mask .description {	position: relative; z-index: 50; opacity:0; transition:all 2s ease-in-out;}
.text-mask .description.action {opacity:1; transition:all 2s ease-in-out;}
.text-mask .panel.align-top {  align-items: flex-start;}
 

.text-mask .panel * { 
  color: white; 
  margin: 0 auto;
  padding: 0;
}
.text-mask .panel .panel_text{   color: white; }
.text-mask .quote {
  background-color: transparent;
  z-index: 20;
  padding: 10vh auto; 
}
.text-mask .quote .quote_text *{ 
  line-height: 1.3; 
  padding: 0;
  margin: 0;
}


.text-mask .black {
  background-color: #131313;
  position: relative;
}



@media (max-width: 1600px) { 	
    .text-mask .panel-mask::before {
      position: absolute;
      top: 0%;
      left: 0;
      width: 100%; 
      height: 30vh; 
      display: block; 
      background: #131313;
        content:'';
        z-index:-1
    }
    .text-mask .panel-mask::after {
      position: absolute;
      left: 0;
      bottom: 0%;
      width: 100%; 
      height: 30vh; 
      display: block; 
      background: #131313;
        content:'';
        z-index:-1
    }	 
} 
@media (max-width: 1400px) { 	
    .text-mask .panel-mask::before { 
      height: 35vh;  
    }
    .text-mask .panel-mask::after { 
      height: 35vh;  
    }	 
} 

@media (max-width: 1240px) { 	  
    
}

@media (max-width: 992px) { 
	.text-mask-wrap {  
		margin-bottom: 3vh;
	} 

    .text-mask .panel-mask::before { 
      height: 30vh;  
    }
    .text-mask .panel-mask::after { 
      height: 30vh;  
    }	 
    	 
}

@media (max-width: 768px) {  
    .text-mask .panel-mask::before { 
      height: 40vh;  
    }
    .text-mask .panel-mask::after { 
      height: 40vh;  
    }	 
    .text-mask .quote .quote_text .h6 br {display:none !important;
    }
}
 
@media (max-width: 576px) {  
	
}
 
 



 












.main {
	height: calc(100vh);    
	width: 100%; 
	position: relative;
	overflow: visible;
}
.main::after {content:""; display:none; position:absolute; bottom:0; left:0; width:100%; height:33%; background: rgb(18,18,18,0.5); background:linear-gradient(360deg, rgba(18,18,18,1) 10%, rgba(18,18,18,0) 100%); z-index:10; transition:all 0.2s linear;}

.main_sub, 
.main_sub2 {
	height: calc(100vh);
	width: 100%; 
	height: auto; 
    min-height:1000px;
	position: relative;
}
.main_text {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 5;
	/* mix-blend-mode: difference; */
	color: # ;
}
.main_text {
    font-size:calc(2rem + 10vw); 
    letter-spacing:-1px;
    font-weight:900;
}
 

.boxie {
	width: 120vw;
	height:calc(120vh); 
	position: absolute;
	top: 52%;
	left: 50%;
	/*background-image: url("https://images.unsplash.com/photo-1558551649-e44c8f992010?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1574&q=80");*/ 
	background-image: url("/main/2/img/box-img01.jpg");
	background-image: url("/img/main/visual02.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: auto 100%;
	transform-origin: 50% 50%;
	z-index: 4;
}
.boxie-back { 
	width: 85vw;
	height: 85vh;
	position: absolute;
	top: 52%;
	left: 50%; 
	background-image: url("/main/2/img/boxie-back1.jpg"); 
	background-image: url("/main/2/img/boxie2.jpg"); 
	background-position: center;
	background-repeat: no-repeat;
	background-size: auto 100%;
	transform-origin: 50% 50%;
	z-index: 3;
} 

.box-1 {
	width: 40vw;
	height: 60vh;
	width: 700px;
	height: 650px;
	transform: scale(1.1); 
	background-image: url("/img/main/box-img01.jpg"); 
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
	top: 20%;
	left: 5%;
	z-index: -1;
} 
.box-2 {
	width: 40vw;
	height: 50vh; 
	width: 700px;
	height: 650px;
	background-image: url("/img/main/box-img02.jpg"); 
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
	bottom: 0%;
	right: 5%;
	z-index: -1;
}
.box-3  {
	width: 30vw;
	height: 60vh; 
	width: 600px;
	height: 700px;
	background-image: url("/img/main/box-img01.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
	bottom: -5%;
	right: 5%;
	z-index: -1;
}
.box-4  {
	width: 40vw;
	height: 60vh;
	width: 700px;
	height: 650px;
	transform: scale(1.1); 
	background-image: url("/img/main/box-img02.jpg"); 
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
	top: 20%;
	left: 5%;
	z-index: -1;
} 

@media (max-width: 1240px) { 		 
} 

@media (max-width: 992px) { 
    .main {
		height: calc(100vh - 100px);}
    .main_sub, 
    .main_sub2 {  
        height:calc(100vh); 
        min-height:auto; 
        max-height:700px;
    }	  
    .box-1 { 
        width: 400px;
        height: 400px; 
        left: 5%; 
    } 
    .box-2 { 
        width: 400px;
        height: 400px; 
    }
    .box-3  { 
        width: 400px;
        height: 450px; 
    }
    .box-4  { 
        width: 400px;
        height: 400px; 
    }	
}

@media (max-width: 768px) { 	  
    .box-1 { 
        width: 260px;
        height: 260px;  
    } 
    .box-2 { 
        width: 260px;
        height: 260px;  
    }
    .box-3  { 
        width: 240px;
        height: 300px;  
    }
    .box-4  { 
        width: 260px;
        height: 260px;   
    }	  
}

@media (max-width: 576px) { 		 
}













.project {
	padding: 1rem;
	max-width: 1000px;
	margin: 20vh auto;
	display: grid;
	grid-column-gap: 7vw;
	grid-row-gap: 0.5rem;
}
.project--intro {
	grid-template-columns: 1fr;
	grid-template-areas: 'label-name' 
						 'name' 
						 'label-date' 
						 'date'
						 'title'
						 'label-mission' 
						 'mission';
}
.project--details {
	grid-template-areas: 'label-default' 'paragraph';
	grid-template-columns: 1fr;
}
.project--left {	justify-content: start;}
.project--right {	justify-content: end;}
.project--details p {	grid-area: paragraph;	max-width: 400px;}
.project__label--default {	grid-area: label-default;}
.project p {
	line-height: 1.4;
	margin: 0;
	color: var(--color-text-alt);
}
.project__label {	color: var(--color-label);}
.project__label--name {	grid-area: label-name;}
.project__label--date {	grid-area: label-date;}
.project__label--mission {	grid-area: label-mission;}
.project__name {	grid-area: name;}
.project__date {	grid-area: date;}
.project__mission {	grid-area: mission;	line-height: 1.4;}
.project__mission p:first-child {	grid-area: p1;}
.project__mission p:child {	grid-area: p2;}
.project__mission p {	color: var(--color-text-alt);}
.project__title {
	grid-area: title;
	font-size: clamp(2rem, 13vw, 8rem);
	font-weight: 400;
	margin: 10vh 0;
	line-height: 1;
}
.project__heading {
	color: var(--color-label);
	font-weight: inherit;
	font-size: inherit;
	margin: 0;
}
 

.project * { color:#; font-weight:300;  }
.project-desc, 
.project-desc2  {  width: 100%; }
.project-desc .owl-carousel, 
.project-desc2 .owl-carousel { margin-bottom:30px }
.project_label { font-weight:300; }
.project-heading { } 
.project_title {  margin: 30px 0; position: relative; width:100%;  z-index:1;  text-transform:uppercase; color:#888; font-weight:700; letter-spacing:3px} 
.project_title:after { position:absolute; top:60%; width:60%; right:0; height:1px; display:block; background:#333; content:''; z-index:0} 
.project_name  { margin-bottom:20px} 
.project_label-date { margin-bottom:10px	}
.project .text-white { color:transparent  !important; }
.project_mission .h6 {margin-bottom:10px	} 

@media (max-width: 1240px) { 		 
} 

@media (max-width: 992px) { 		 
    .project-desc, 
    .project-desc2  {  width: 80%; margin:auto;}
}

@media (max-width: 768px) { 	
    .project-desc, 
    .project-desc2  {  width: 100%; margin:auto;}	 
}

@media (max-width: 576px) { 		 
}














 











/* Page 4 - gallery */
.gallery {  height:auto;   overflow: visible;}  
.gallery-wrap {
	position: relative;
	width: 100%;
	height: auto;
	display: flex;
	align-items: center;
	justify-content: center; 
	overflow: visible;
}
.gallery .row {    overflow: visible;} 
.gallery .panel {
  position: relative;
  width: 100%;
  height: calc(50vh);
  display: flex;
  justify-content: center;
  align-items: end;
  font-weight: 600;
  font-size: 1.5em;
  text-align: center;
  color: white;
  box-sizing: border-box;
  overflow: hidden;
}  
.gallery .panel .panel_text{   color: white; } 
.gallery .black {   position: relative;}
.gallery .img-wrap,
.gallery .img-wrap2 { position:relative; overflow:hidden; border-radius:0px; padding:5px; } 
.gallery .img-wrap h6,
.gallery .img-wrap2 h6 { color:# ;} 
.gallery .img-wrap img,
.gallery .img-wrap2 img { width:100%;position:relative;  border-radius:0;  }