@charset "UTF-8";

html20 {
	font-family: 'Montserrat', sans-serif;
}

main20 {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
}

ul20 {
	list-style: none;
}

a20 {
	text-decoration: none;
}

section20 {
	width: 100vw;
	height: 100vh;
}

	section20:nth-child(even) {
		background-color: gray;
	}

	section20:nth-child(odd) {
		background-color: #fafafa;
	}


.navigator20 {
	flex-direction: column;
	align-items: center;
	position: fixed;
	width: 10vw;
	height: 30vh;
	top: calc(50% - 15vh);
	right: 1%;
	z-index: 100;
	font-size: 14px;
	text-transform: uppercase;
	line-height: 1.2vw;
	font-weight: 600;
	padding-left: 0;
	box-sizing: border-box;
}

	.navigator20.curtain:after, .navigator20.prevent_click:after {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		width: 85%;
		height: 100%;
		background-color: transparent
	}


	.navigator20.prevent_click:after {
		width: 100%;
	}

	.navigator20 .nav-item20 {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		width: 100%;
		transition: opacity .4s ease;
		position: relative;
		cursor: pointer;
	}

		.navigator20 .nav-item20.show {
			cursor: pointer;
		}

		.navigator20 .nav-item20 a {
			font-size: 12px;
			width: 80%;
			transition: color .4s, opacity .4s;
			opacity: 0;
			text-align: right;
		}

	.navigator20 .nav-line20:before {
		background-color: black;
	}

	.navigator20.white .nav-line20:before {
		background-color: white;
	}

	.navigator20 .nav-line20 {
		position: relative;
		margin-left: 5%;
		width: 10%;
		height: 100%;
		transition: width .5s;
	}

		.navigator20 .nav-line20:hover + a {
			opacity: 1;
		}

		.navigator20 .nav-line20:hover:before {
			/* background-color:red; */
		}


	.navigator20 .nav-item20.show .nav-line20 {
		width: 20%;
	}

	.navigator20 .nav-line20:before {
		content: '';
		position: absolute;
		top: 50%;
		width: 100%;
		height: 1px;
		background-color: black;
	}

.nav-item20.active .nav-line20 {
	width: 20%;
}

	.nav-item20.active .nav-line20:before {
		background-color: black;
	}

.navigator20 .nav-item20:before:hover {
	background-color: black;
}


.navigator20 .nav-item20.active:before {
	width: 30%;
	background-color: var(--main_red);
}

.nav-item20.active a {
	color: cornflowerblue;
	position: relative;
	opacity: 1;
}

	.nav-item20.active a:after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 0;
		height: 100%;
		/* background-color: white; */
		animation: showWord 1.5s ease;
	}

.nav-item20.show a {
	color: black;
	position: relative;
	/* transition: color .4s ease; */
	opacity: 1;
}

	.nav-item20.show a:after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 0;
		height: 100%;
		/* background-color: white; */
		animation: showWord 1.5s ease;
	}

.navigator20.white .nav-item20.show a:after {
	/* background-color: #181818; */
}

.navigator20.white .nav-item20 a {
	/* transition: color .4s; */
	color: white !important;
}

.navigator20.white {
	color: black;
}

@keyframes showWord {
	from {
		width: 100%;
	}

	to {
		width: 0;
	}
}