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: 5vw;
	transition:width 1.5s;
}



#loader{
	width: 100vw;
	height: 100vw;
	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: 100vw;
	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:2vw 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:12vw;
	mix-blend-mode:difference;
}
#menu img{
	margin: auto;
}
#menu a{
	color: #867e7e;
	font-size:1.2vw;
	padding-top:0.5vw;
	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:15.5vw;
	line-height:0.9;
	font-variation-settings: "wght" 300, "ital" 0;
	padding:12vw 5vw 5vw;
}
.page-tit .t{
	transform:translateY(0vw);
	opacity: 1;
	transition:transform 1.5s, opacity 1.5s;
}
.page-tit .back{
	font-size:1.4vw;
	transform:translateY(0vw);
	opacity: 1;
	transition:transform 1.5s, opacity 1.5s;
	transition-delay:0.6s;
	cursor:pointer;
}




#categories{
	padding:0vw 5vw 5vw;
}
#categories .payoff{
	font-size:1.4vw;
	margin-bottom:1vw;
	font-weight:200;
}
#categories .cat{
	height:7vw;
	font-size:8vw;
	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.8s;
}
#categories .cat:hover{
	color:transparent;
	font-variation-settings: "wght" 700, "ital" 0;
	-webkit-text-stroke-width:2px;
	-webkit-text-stroke-color: #000;
}

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

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




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

#projects .proj{
	margin-bottom: 10vw;
	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:30vw;
	overflow: hidden;
}
#projects .proj .visual .v div{
	width:140%;
	height:140%;
	top:-20%;
	left:-20%;
	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:hover .visual .v div{
	filter:sepia(0%);
	background-color: transparent;
}

#projects .proj .info{
	grid-template-columns:60vw 10vw;
	margin-top:1vw;
	color:#000;
	transition:color 2s;
} 
#projects .proj:hover .info {
	color:#867e7e;
}
#projects .proj .info .tit{
	font-size: 11vw;
	line-height:0.9;
	margin-top:-3vw;
	font-variation-settings: "wght" 200, "ital" 0;
	z-index:2;
	transition:all 1s;
}
#projects .proj:hover .info .tit{
	font-variation-settings: "wght" 600, "ital" 0;
}
#projects .proj .info .data{
	text-align:right;
} 
#projects .proj .info .data .cat{
	font-variation-settings: "wght" 400;
} 





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

#footer .categories{
	padding:2vw 0;
	border-top: 1px solid #867e7e;
	grid-template-columns:repeat(5, 18vw);
}

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

#footer .info{
	padding:2vw 0;
	border-top: 1px solid #867e7e;
	grid-template-columns:repeat(3, 30vw);
	font-size: 0.8vw;
}

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





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

.proj-detail{
	padding: 0vw 5vw 5vw;
	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:5vw;
}

.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 5vw 5vw;
	grid-template-columns: 50vw auto;
	grid-gap: 5vw;
	font-size: 1.2vw;
	line-height:1.6;
}
#page-about .main-descr img{
	mix-blend-mode:multiply;
}