html,body{
	width:100%;
	overflow-x: hidden;
  	overflow-y: scroll;
  	scroll-behavior: smooth;
	background-color: var(--c-0);
	margin: 0;
	padding: 0;
}


.page-start .strip{
	width: 0% !important;
}
.strip{
	width: 100%;
	border-bottom:1px solid #000;
	margin-top: 10vw;
	transition:width 1.5s;
}



#loader{
	width: 100vw;
	height: 100vh;
	position:fixed;
	background-color:var(--c-0);
	pointer-events:none;
	opacity:1;
	transition:all 3s;
}
#loader .shine{
	width:1px;
	height:1px;
	background-color:#867e7e;
	transition:width 2s, height 1s;
}
#loader .basic{
	top: 0;
	left: 0;
	transform:translateY(100%);
	background-color:var(--c-0);
	transition:all 1.8s;
}


.loader-start-1 .shine{
	width:100% !important;
}
.loader-start-2 .shine{
	height:100% !important;
}
.loader-start-3 .basic{
	transform:translateY(0%) !important;
}
.loader-start-4{
	opacity:0 !important;
}




#loader-page{
	width: 100vw;
	height: 100vh;
	pointer-events:none;
	opacity:0;
}

#loader-page .shine{
	background-color:#867e7e;
	top: 0;
	left: 0;
	transform:translateY(100%);
	transition:all 1s;
}
#loader-page .basic{
	background-color:var(--c-0);
	top: 0;
	left: 0;
	transform:translateY(100%);
	transition:all 1s;
	transition-delay:0.3s;
}

.loader-page-start-1{
	opacity: 1 !important;
}
.loader-page-start-1 .shine{
	transform:translateY(0%) !important;
}
.loader-page-start-1 .basic{
	transform:translateY(0%) !important;
}

.loader-page-start-2{
	opacity:0 !important;
	transition:opacity 1s;
}




#menu{
	padding:5vw;
	top:0px;
	left: 0;
	grid-template-columns:auto auto auto;
	transform: translateY(0vw);
	opacity:1;
	transition-delay:1s;
	transition:transform 2s, opacity 1s;
}
.page-start #menu{
	transform:translateY(4vw) !important;
	opacity: 0 !important;
}

#menu .logo{
	width:35vw;
	mix-blend-mode:difference;
}
#menu img{
	margin: auto;
}
#menu a{
	color: #867e7e;
	font-size:3vw;
	padding-top:0vw;
	font-variation-settings: "wght" 200, "ital" 0;
	display:inline-block;
	mix-blend-mode:difference;
}






#home .back-img{
	opacity: 0.1;
	filter: grayscale(100%);
}



.page-start .page-tit .t{
	transform:translateY(-8vw) !important;
	opacity: 0 !important;
}
.page-start .page-tit .back{
	transform:translateY(-4vw) !important;
	opacity: 0 !important;
}
.page-tit{
	font-size:28vw;
	line-height:0.8;
	font-variation-settings: "wght" 300, "ital" 0;
	padding:25vw 5vw 10vw;
}
.page-tit .t{
	transform:translateY(0vw);
	opacity: 1;
	transition:transform 1.5s, opacity 1.5s;
}
.page-tit .back{
	font-size:4.7vw;
	transform:translateY(0vw);
	opacity: 1;
	transition:transform 1.5s, opacity 1.5s;
	transition-delay:0.6s;
	cursor:pointer;
	margin-top:5vw;
}




#categories{
	padding:0vw 5vw 12vw;
}
#categories .payoff{
	font-size:4.7vw;
	margin-bottom:3vw;
	font-weight:200;
}
#categories .cat{
	height:14vw;
	font-size:15vw;
	line-height:0.9;
	position:relative;
	cursor: pointer;
	font-weight:300;
	color:#000;
	font-variation-settings: "wght" 300, "ital" 0;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: transparent;
	transition:all 0.3s;
}

#categories .cat .num{
	font-size:5vw;
	display:inline-block;
	position: absolute;
	top: 0;
	padding:1vw 0vw 0vw 2vw;
	font-weight:100;
	font-variation-settings: "wght" 100, "ital" 0;
}

#categories .cat-active{
	color:transparent;
	font-variation-settings: "wght" 700, "ital" 0;
	-webkit-text-stroke-width:1px;
	-webkit-text-stroke-color: #000;
}




#projects{
	padding:0vw 5vw 0vw;
}

#projects .proj{
	margin-bottom: 15vw;
	cursor: pointer;
}
#projects .p-70 .content{
	width:70vw;
}
#projects .p-70:nth-child(2n) .content{
	width:70vw;
	margin-left:20vw;
}


#projects .proj .visual{
	grid-gap:1vw;
}


#projects .proj .visual .v{
	height:40vw;
	overflow: hidden;
}
#projects .proj .visual .v div{
	width:100%;
	height:100%;
	top:-0%;
	left:-0%;
	position:relative;
	filter:sepia(30%);
	background-color: rgba(59, 49, 49, 0.9);
  	background-blend-mode: multiply;
  	transition:filter 2s, background-color 2s;
}

#projects .proj .info{
	display: block;
	margin-top:1vw;
	color:#000;
	transition:color 2s;
} 
#projects .proj .info .tit{
	font-size: 16vw;
	line-height:0.75;
	margin-top:2vw;
	font-variation-settings: "wght" 300, "ital" 0;
	z-index:2;
	transition:all 1s;
}
#projects .proj .info .data{
	text-align:left;
	font-size:3.5vw;
	line-height:1.3;
} 
#projects .proj .info .data .cat{
	font-variation-settings: "wght" 400;
} 





#footer{
	padding:0vw 5vw 0vw 5vw;
	font-size:4.7vw;
	color:#867e7e;
}

#footer .categories{
	padding:10vw 0 8vw;
	border-top: 1px solid #867e7e;
}
#footer .categories .cat{
	margin-bottom:2vw;
}
#footer .menu{
	padding:10vw 0 8vw;
	border-top: 1px solid #867e7e;
	grid-template-columns:repeat(2, 45vw);
}
#footer .menu .m{
	cursor:pointer;
	margin-bottom:2vw;
}

#footer .info{
	padding:10vw 0 8vw;
	border-top: 1px solid #867e7e;
	font-size:3.2vw;
}
#footer .info .d{
	margin-bottom:2vw;
}


#footer .logo{
	padding:15vw 0;
	border-top: 1px solid #867e7e;
}
#footer .logo img{
	width:38vw;
}





.info-proj{
	padding: 0vw 5vw 2vw;
	grid-template-columns: auto auto auto;
	margin-top: -3vw;
	font-size:3.5vw;
}

.proj-detail{
	padding: 0vw 5vw 10vw;
	margin-top:-5vw;
}
.proj-detail .strip{
	transition-delay:0.3s;
}

.proj-detail .content{
	grid-template-columns:repeat(9, 8vw);
	grid-gap:2vw;
}

.proj-detail .content img{
	margin-top:10vw;
}

.proj-detail .v{
	height:35vw;
}

.proj-detail .v div{
	width: 100%;
	height:100%;
}

.proj-detail .v-1{
	grid-column: 1 / span 10;
}

.proj-detail .v-3{
	grid-column: 1 / span 10;
}



#page-about .main-descr{
	padding: 0 5vw 10vw 5vw;
	grid-gap: 10vw;
	font-size: 3.5vw;
	line-height:1.6;
}
#page-about .main-descr img{
	mix-blend-mode:multiply;
}