@charset "UTF-8";
html.open-menu .animation-wrapper-roadmap .particle {
		animation-play-state: paused !important;
}
.animation-wrapper-roadmap {
		z-index: 0;
}
.roadmap {
		position: relative;
		z-index: 2;
}
.roadmap .head {
		min-height: 100vh;
		min-height: 100svh;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: var(--vspace-big) 0;
}
.roadmap .head .h1 {
		flex: 0 0 auto;
		font-weight: bold;
		line-height: 1;
		margin: 0;
		text-transform: uppercase;
		text-align: center;
}
@media only screen and (orientation: portrait) {
		.roadmap .head .h1 {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate3d(-50%, -50%, 0) rotate(-90deg);
				font-size: calc((100vh - 280px) * 0.2);
				font-size: calc((100svh - 280px) * 0.2);
		}
}
@media only screen and (orientation: landscape) {
		.roadmap .head .h1 {
				position: relative;
				font-size: 4rem;
		}
		.roadmap .head .h1:before, .roadmap .head .h1:after {
				content: '';
				position: absolute;
				backface-visibility: hidden;
				background-repeat: no-repeat;
				background-position: 50% 50%;
				background-size: contain;
				top: 50%;
				width: 1.9em;
				height: 1.9em;
		}
		.roadmap .head .h1:before {
				background-image: url("../img/roadmap/top-l.svg");
				left: 0;
				transform: translate3d(-18%, -45%, 0);
		}
		.roadmap .head .h1:after {
				background-image: url("../img/roadmap/top-r.svg");
				left: 100%;
				transform: translate3d(-95%, -64%, 0);
		}
		.roadmap .head .h1 > * {
				position: relative;
		}
		@media only screen and (min-width: 760px) {
				.roadmap .head .h1 {
						font-size: 15rem;
				}
		}
}
.roadmap .list {
		list-style: none;
		margin: 0;
		padding: 0;
}
.roadmap .list li {
		margin: 0;
		padding: 0;
}
.roadmap .list li:before {
		content: '';
		position: static;
		display: block;
		width: 80px;
		height: 198px;
		margin: 0 auto;
		padding: 0;
		min-width: 0;
		background-image: conic-gradient(from 220deg at 60% 40%, #19FCFE -45.45deg, #66FDA2 1.3deg, #B7FF42 49.61deg, #C253D5 221.36deg, #19FCFE 314.55deg, #66FDA2 361.3deg);
		backface-visibility: hidden;
		-webkit-mask-image: repeating-linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 1) 2px, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0) 22px);
		mask-image: repeating-linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 1) 2px, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0) 22px);
}
@media only screen and (max-width: 759px) {
		.roadmap .list li:before {
				width: 70px;
		}
}
@media only screen and (orientation: portrait) {
		.roadmap .list {
				margin-top: -94px;
		}
		.roadmap .list li:before {
				width: calc((100vh - 280px) * 0.13);
		}
}
@media only screen and (orientation: landscape) {
		.roadmap .list {
				margin-top: calc(var(--vspace-big) * -1);
		}
		@media only screen and (max-height: 750px) {
				.roadmap .list {
						margin-top: calc(var(--vspace-big) * -0.5);
				}
		}
}
.roadmap .list .text {
		font-weight: 500;
		font-size: 33px;
		line-height: 1.2;
		text-align: center;
		color: var(--white);
		display: flex;
		flex-direction: column;
		gap: 40px;
		max-width: 11.363636em;
		margin: 50px auto 0 auto;
		padding: 0 0 70px 0;
		backface-visibility: hidden;
		opacity: var(--percent);
}
.roadmap .list .name {
		font-size: 22px;
		text-transform: uppercase;
		color: #B7FF42;
		margin-bottom: -10px;
}
@media only screen and (min-width: 1000px) {
		.roadmap .list .text {
				font-size: 2.75rem;
		}
}
.roadmap .list .link {
		cursor: pointer;
		user-select: none;
		text-decoration: none;
		color: var(--white);
		text-decoration: underline;
}