:root {
	--tst: bottom 0.5s ease 0s;
	--dark: #E6E6E6EE;
}
body {
	background: #000000;
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size: 14px;
	color: #000;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.swiper {
	width: 100%;
	padding-top: 50px;
	padding-bottom: 50px;
}

.swiper-slide {
	background-position: center;
	background-size: cover;
	width: 400px;
	height: 500px;
	border-radius: 10px;
	overflow: hidden;
}

.swiper-container-3d .swiper-slide-shadow-left {
	background-image: linear-gradient(to left, #000, #fff0);
	border-right: 1px solid #000;
	border-radius: 10px;
}

.swiper-container-3d .swiper-slide-shadow-right {
	background-image: linear-gradient(to right, #000, #fff0);
	box-shadow: 0 0 0 1px #000;
	border-radius: 10px;
}

.swiper-pagination-bullet {
	background: #696969;
	transition: all 0.5s ease 0s;
	border-radius: 8px;
}

.swiper-pagination-bullet-active {
	background: #ffc107;
	width: 30px;
}

.info {
	position: absolute;
	/*bottom: -1px;*/
	width: calc(100% + 2px);
	height: calc(50% + 2px);
	text-align: center;
	background: linear-gradient(180deg, #fff0 0, #0008 50px), linear-gradient(180deg, #fff0 , #0009);
	padding: 15px;
	padding-top: 70px;
	left: calc(-100% - 3px);
	left: 0;
	bottom: calc(-100% - 3px);
	box-sizing: border-box;
	transition: var(--tst);
}

.swiper-slide-active .info {
	bottom: 0;
	transition: var(--tst);
}

.info span {
	width: 100%;
	margin: 0.25em 0 0.25em 0;
	display: inline-block;
	padding: 0.55em 0.5em 0.55em 4em;
	box-sizing: border-box;
	color: var(--dark);
	text-align: left;
	position: relative;
	text-transform: uppercase;
	font-size: 12px;
	/*mix-blend-mode: color-burn;*/
	border-radius: 2em;
}

.info span:hover {
	/*mix-blend-mode: luminosity;*/
	background: #0008;
	filter: invert(1);
}

.info span:before,
.info span:after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	background: #fff8;
	height: 100%;
	max-width: 2em;
}

/*climber 1*/
.info span:nth-child(1):before {
	background: radial-gradient(
		circle at 50% 50%,
		var(--dark) 2px,
		#fff0 3px 150%
	);
	width: 7px;
	height: 6px;
	border-radius: 100% 100% 100% 40%;
	left: 16px;
	top: 2px;
	border: 3px solid var(--dark);
	border-top-color: #fff0;
	background-repeat: no-repeat;
	transform: rotate(29deg);
}

.info span:nth-child(1):after {
	background: linear-gradient(180deg, var(--dark) 1px, #fff0 1px 150%);
	width: 4px;
	height: 7px;
	border-radius: 100% 50% 100% 0%;
	left: 15px;
	top: 13px;
	border: 3px solid var(--dark);
	border-bottom-color: #fff0;
	background-repeat: no-repeat;
	transform: rotate(-1deg);
}

/*photo 2*/
.info span:nth-child(2):before {
	background: radial-gradient(
		circle at 50% 42%,
		var(--dark) 2px,
		#fff0 3px 4px,
		var(--dark) 5px 100%
	);
	width: 20px;
	height: 13px;
	left: 11px;
	top: 8px;
	border-radius: 2px;
}

.info span:nth-child(2):after {
	border: 10px solid #fff0;
	border-width: 0px 2px 4px 2px;
	border-bottom-color: var(--dark);
	width: 10px;
	background: #fff0;
	height: 0px;
	left: 14px;
	top: 5px;
}

/*route 3*/
.info span:nth-child(3):before {
	width: 22px;
	height: 22px;
	left: 11px;
	top: 3px;
	background: radial-gradient(circle at 60% 50%, var(--dark) 1px, #fff0 2px 100%),
		radial-gradient(circle at 37% 70%, var(--dark) 1px, #fff0 2px 100%),
		radial-gradient(circle at 52% 64%, var(--dark) 1px, #fff0 2px 100%),
		radial-gradient(circle at 45% 42%, var(--dark) 1px, #fff0 2px 100%),
		radial-gradient(circle at 49% 25%, var(--dark) 1px, #fff0 2px 100%),
		radial-gradient(circle at 61% 15%, var(--dark) 1px, #fff0 2px 100%),
		radial-gradient(
			circle at 18% 84%,
			#fff0 1px,
			var(--dark) 2px 3px,
			#fff0 4px 100%
		),
		radial-gradient(
			circle at 85% 16%,
			#fff0 1px,
			var(--dark) 2px 3px,
			#fff0 4px 100%
		);
}

/*sector 4*/
.info span:nth-child(4):before {
	border: 10px solid #fff0;
	height: 0;
	border-bottom-color: var(--dark);
	border-width: 0 6px 10px 6px;
	left: 12px;
	top: 10px;
	background: #fff0;
}

.info span:nth-child(4):after {
	border: 10px solid #fff0;
	height: 0;
	border-bottom-color: var(--dark);
	border-width: 0 6px 15px 6px;
	left: 18px;
	top: 5px;
	background: #fff0;
}

/*zone 5*/
.info span:nth-child(5):before {
	width: 16px;
	height: 16px;
	border-radius: 100%;
	left: 13px;
	top: 3px;
	background: radial-gradient(
		circle at 50% 50%,
		var(--dark) 2px,
		#fff0 3px 4px,
		var(--dark) 5px 100%
	);
}

.info span:nth-child(5):after {
	border: 10px solid #fff0;
	height: 0;
	border-top-color: var(--dark);
	border-width: 8px 6px 0 6px;
	left: 15px;
	top: 16px;
	background: #fff0;
}