@font-face {
	font-family: 'TTFirsNeue'; 
	src: url('/static/fonts/TTFirsNeue-Regular.ttf') format('truetype'),
		 url('/static/fonts/TTFirsNeue-Regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'TTFirsNeue'; 
	src: url('/static/fonts/TTFirsNeue-Medium.ttf') format('truetype'),
		 url('/static/fonts/TTFirsNeue-Medium.woff') format('woff');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'TTFirsNeue'; 
	src: url('/static/fonts/TTFirsNeue-DemiBold.ttf') format('truetype'),
		 url('/static/fonts/TTFirsNeue-DemiBold.woff') format('woff');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'TTFirsNeue'; 
	src: url('/static/fonts/TTFirsNeue-Bold.ttf') format('truetype'),
		 url('/static/fonts/TTFirsNeue-Bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'TTFirsNeue'; 
	src: url('/static/fonts/TTFirsNeue-ExtraBold.ttf') format('truetype'),
		 url('/static/fonts/TTFirsNeue-ExtraBold.woff') format('woff');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'TTFirsNeue'; 
	src: url('/static/fonts/TTFirsNeue-Italic.ttf') format('truetype'),
		 url('/static/fonts/TTFirsNeue-Italic.woff') format('woff');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'TTFirsNeue'; 
	src: url('/static/fonts/TTFirsNeue-BlackItalic.ttf') format('truetype'),
		 url('/static/fonts/TTFirsNeue-BlackItalic.woff') format('woff');
	font-weight: 900;
	font-style: italic;
	font-display: swap;
}

html {
	scroll-behavior: smooth;
}

body {
	max-width: 1280px;
	margin: auto;
	font-family: TTFirsNeue, sans-serif;
	font-size: 24px;
	line-height: 1.2;
	color: #fff;
	font-weight: 400;
	overflow-x: hidden;
}

input, button {
	font-family: TTFirsNeue, sans-serif;
}

strong {
	font-weight: 600;
}

a {
	text-decoration: none;
	color: inherit;
}


input::placeholder {
	color: inherit;
}

.hidden {
	display: none !important;
}



.header {
	padding: 175px 70px 81px 55px;
	background: #161e39 url('/static/i/header_bg.webp') no-repeat 50% 50%;
	background-size: cover;
	position: relative;
	overflow: hidden;
}

.logo {
	width: 200px;
	position: absolute;
	top: 52px;
	right: 73px;
}

.logo img {
	max-width: 100%;
}

.header_content {
	/* display: flex;
	justify-content: space-between; */
}

.header_btn {
	background-image: linear-gradient(to bottom, #1854da, #0e3fac);
	font-weight: 900;
	font-style: italic;
	border-radius: 12px;
	padding: 14px 19px 10px;
	align-self: flex-end;
	/* transform: translateY(-20px); */
	flex-shrink: 0;
	position: fixed;
	top: 55px;
	line-height: 1.1;
	z-index: 10000;
	transition: transform .6s;
}

.header_btn::after {
	content: '';
	width: 26px;
	height: 28px;
	flex-shrink: 0;
	background-image: url('data:image/svg+xml;utf8,<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.7988 11.9207C14.7598 11.902 13.3018 11.184 13.0427 11.0907C12.9369 11.0527 12.8236 11.0157 12.7031 11.0157C12.5062 11.0157 12.3408 11.1138 12.212 11.3065C12.0663 11.523 11.6254 12.0384 11.4892 12.1924C11.4714 12.2127 11.4471 12.237 11.4326 12.237C11.4195 12.237 11.1939 12.144 11.1256 12.1144C9.56147 11.435 8.37426 9.80112 8.21147 9.5256C8.18822 9.48599 8.18725 9.468 8.18705 9.468C8.19277 9.44703 8.24536 9.3943 8.27251 9.3671C8.35192 9.28852 8.43796 9.18495 8.52121 9.08476C8.56062 9.03729 8.6001 8.98976 8.63887 8.94495C8.75965 8.80443 8.81342 8.69534 8.87575 8.56898L8.90842 8.50333C9.06062 8.20093 8.93062 7.94573 8.88861 7.86333C8.85413 7.79437 8.23848 6.30852 8.17303 6.15242C8.01562 5.77573 7.80764 5.60034 7.51861 5.60034C7.49179 5.60034 7.51861 5.60034 7.40614 5.60508C7.26919 5.61086 6.52342 5.70904 6.19368 5.9169C5.844 6.13735 5.25244 6.84008 5.25244 8.07593C5.25244 9.1882 5.95829 10.2384 6.26134 10.6378C6.26887 10.6479 6.2827 10.6683 6.30277 10.6977C7.46335 12.3926 8.91017 13.6487 10.3769 14.2346C11.7889 14.7987 12.4575 14.8638 12.8376 14.8638H12.8377C12.9974 14.8638 13.1253 14.8513 13.2381 14.8402L13.3096 14.8334C13.7974 14.7901 14.8694 14.2347 15.1132 13.5571C15.3053 13.0234 15.3559 12.4403 15.2282 12.2287C15.1406 12.0848 14.9898 12.0124 14.7988 11.9207Z" fill="white"/><path d="M10.1775 0.428467C4.76089 0.428467 0.354141 4.8021 0.354141 10.178C0.354141 11.9168 0.819465 13.6188 1.70096 15.1084L0.0137512 20.0854C-0.0176774 20.1781 0.0056992 20.2807 0.0743356 20.3506C0.123881 20.4012 0.191089 20.4285 0.259725 20.4285C0.286024 20.4285 0.312517 20.4245 0.338362 20.4163L5.52797 18.7672C6.9481 19.5259 8.55317 19.9265 10.1776 19.9265C15.5937 19.9265 20 15.5533 20 10.178C20 4.8021 15.5937 0.428467 10.1775 0.428467ZM10.1775 17.8956C8.64901 17.8956 7.16856 17.4542 5.89596 16.6192C5.85317 16.5911 5.80349 16.5766 5.75349 16.5766C5.72706 16.5766 5.70057 16.5807 5.67479 16.5889L3.07511 17.4152L3.91434 14.9393C3.94148 14.8592 3.92791 14.7708 3.87791 14.7025C2.90882 13.3783 2.39654 11.8139 2.39654 10.178C2.39654 5.92197 5.88706 2.45938 10.1775 2.45938C14.4673 2.45938 17.9575 5.92197 17.9575 10.178C17.9575 14.4335 14.4675 17.8956 10.1775 17.8956Z" fill="white"/></svg>');
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	top: 11px;
	right: 24px;
}

.header_btn div {
	font-size: 12px;
	font-weight: normal;
	font-size: 17px;
}

.header_btn.hide {
	transform: translateY(-200px);
}

.header_items {
	margin: 55px 0 0 30px;
	display: flex;
	justify-content: space-between;
}

.header_item {
	font-size: 13px;
	text-transform: uppercase;
	font-style: italic;
	text-align: center;
	transform: translateX(-100vw);
	transition: transform .6s;
}

.header_item div {
	font-size: 29px;
	font-weight: 900;
}

.header_item.a {
	transform: translateX(0);
}

h1 {
	margin-left: auto;
	max-width: 800px;
	font-size: 74px;
	font-weight: 900;
	font-style: italic;
	text-transform: uppercase;
	text-align: right;
}


.block1 {
	padding: 74px 10px 77px;
	background-color: #212121;
	font-size: 48px;
	font-weight: 900;
	font-style: italic;
	text-align: center;
	text-transform: uppercase;
}

.cit {
	color: transparent;
}

.cit span {
	transition: color .2s;
}

.cit .-letter-visible {
	color: #fff;
}

.block2 {
	padding-top: 50px;
}

.techs {
	overflow: hidden;
	font-size: 40px;
	font-style: italic;
	color: #dadada;
	text-transform: uppercase;
	display: flex;
	flex-direction: column;
	gap: 16px;
	position: relative;
}

.tech_row {
	display: flex;
	gap: 20px;
}

.tech_row div {
	white-space: nowrap;
}

.tech_row-title {
	height: 1.55em;
	font-size: 160px;
	font-weight: 900;
	font-style: italic;
	color: #000;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	z-index: 1;
	gap: 50px;
}



.block3 {
	padding: 72px 60px 0 60px;
	color: #000;
}

.block3_title {
	font-size: 48px;
	text-transform: uppercase;
	text-align: center;
	font-weight: 900;
	font-style: italic;
}

.block3_title div {
	color: #dadada;
	font-weight: normal;
}

.projects {
	padding-top: 83px;
	padding-bottom: 40px;
}

.project {
	padding-right: 15px;
}

.project_title {
	font-size: 145px;
	font-weight: 900;
	font-style: italic;
	text-transform: uppercase;
	border-bottom: 7px solid;
	display: inline-block;
	cursor: pointer;
}

.project_title:hover {
	color: #418af8;
}

.project_content {
	max-width: 1000px;
	padding: 0px 0 30px;
	flex-direction: column;
	gap: 70px;
	overflow: hidden;
	/* display: inline-flex; */
	display: none;
	transition: all .6s;
}

.project_content p {
	transform: translateX(100vw);
	transition: transform .8s;
}

.project_content span {
	display: block;
}

.project.right {
	text-align: right;
}

.project.center {
	text-align: center;
}

.project.left {
	text-align: left;
}

.project.open .project_title {
	border-bottom-color: transparent;
}

.project.open .project_content {
	display: inline-flex;
}

.project.open .project_content p.a {
	transform: translateX(0);
}

.sl {
	padding-bottom: 2rem;
}

.sl h2 {
	font-weight: 800;
	text-transform: uppercase;
	font-style: italic;
}

.sl_figure {
	width: 100%;
	max-width: 1280px;
	aspect-ratio: 1280 / 590;
	display: flex;
	justify-content: center;
	align-items: center;
}

.sl_item {
	display: none;
	position: relative;
}

.sl_item.active {
	display: block;
}

.sl_item img {
	max-width: 100%;
}

.sl_item_move {
	overflow: hidden;
}

.sl_item_move_imgs {
	display: flex;
	animation: scroll 20s linear infinite;
}


@keyframes scroll {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-100%);
	}
}


.sl_text {
	text-transform: uppercase;
	position: absolute;
	top: 0;
	right: 60px;
	bottom: 22px;
	left: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: bold;
	font-style: italic;
	text-align: center;
	font-size: 67px;
	line-height: 1.2;
	/* text-shadow: 0px -10px 3px #3d96db, -10px -10px 3px #3d96db, 10px -10px 3px #3d96db, 0px 10px 3px #3d96db, -10px 10px 3px #3d96db, 10px 10px 3px #3d96db,    0px -15px 3px #3d96db, -15px -15px 3px #3d96db, 15px -15px 3px #3d96db, 0px 15px 3px #3d96db, -15px 15px 3px #3d96db, 15px 15px 3px #3d96db; */
	background: url('/static/i/sl_text_bg.webp') no-repeat 50% 50%;
	background-size: contain;

}



.block4 {
	color: #000;
	padding: calc( var(--rm) * 3 );
}

.block4_title {
	font-size: 48px;
	font-size: calc(var(--rm)* 3.6);
	font-weight: 800;
	font-style: italic;
	text-transform: uppercase;
}

.block4_title span {
	background-color: #418af8;
	color: #fff;
	padding: 0 15px 0 5px;
}

.block4_text {
	margin-top: 20px;
	max-width: 990px;
}

.block4_text a {
	text-decoration: underline;
}

.block4_text br.-m {
	display: none;
}

.models {
	max-width: 1110px;
	margin-top: 50px;
	display: flex;
	flex-wrap: wrap;
	gap: 35px;
}

.model {
	width: 100%;
	max-width: calc((100% - 35px) / 2);
	padding: 40px 40px 135px 40px;
	box-sizing: border-box;
	border: 1px solid #000;
	position: relative;
	transition: all 1s;
	opacity: 0;
}


body.is_safari .model:nth-child(1).a1,
body.is_safari .model:nth-child(3).a1 {
	animation: modelMovingSafari .6s linear forwards;
}

body.is_safari .model:nth-child(2).a1,
body.is_safari .model:nth-child(4).a1 {
	animation: modelMovingSafari2 .6s linear forwards;
}

body:not(.is_safari) .model.a1 {
	animation: modelMoving .6s linear forwards;
}


@keyframes modelMoving {
	0% {
		transform: translateX(100vw) rotateZ(360deg);
	}
	100% {
		opacity: 1;
		transform: translateX(0) rotateZ(0);
	}
}

@keyframes modelMovingSafari {
	0% {
		transform: translateX(-100%);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes modelMovingSafari2 {
	0% {
		transform: translateX(100%);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}


.model_title {
	font-size: 42px;
	font-weight: 900;
	font-style: italic;
	text-transform: uppercase;
}

.model_text {
	max-width: 430px;
	font-size: 23px;
	margin-top: 10px;
}

.model img {
	width: 62px;
	position: absolute;
	right: 30px;
	bottom: 30px;
}

.model:nth-child(1) {background-color: #e4eefe;}
.model:nth-child(2) {background-color: #fee4f7;}
.model:nth-child(3) {background-color: #fefde4;}
.model:nth-child(4) {background-color: #e4feed;}


.frame {
	width: 370px;
	aspect-ratio: 551 / 282;
	background-size: contain;
	color: #000;
	position: absolute;
	top: 40px;
	left: 20px;
	font-weight: 900;
	text-transform: uppercase;
	font-style: italic;
	line-height: 1.15;
	font-size: 20px;
	transition: all .4s;
	opacity: 0;
}

.frame div {
	position: absolute;
	top: 44px;
	left: 30px;
	z-index: 1;
}

.frame a {
	text-decoration: underline;
	position: relative;
}

.frame a::after {
	content: '';
	width: 20px;
	aspect-ratio: 20/21;
	flex-shrink: 0;
	background-image: url('data:image/svg+xml;utf8,<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.7988 11.9207C14.7598 11.902 13.3018 11.184 13.0427 11.0907C12.9369 11.0527 12.8236 11.0157 12.7031 11.0157C12.5062 11.0157 12.3408 11.1138 12.212 11.3065C12.0663 11.523 11.6254 12.0384 11.4892 12.1924C11.4714 12.2127 11.4471 12.237 11.4326 12.237C11.4195 12.237 11.1939 12.144 11.1256 12.1144C9.56147 11.435 8.37426 9.80112 8.21147 9.5256C8.18822 9.48599 8.18725 9.468 8.18705 9.468C8.19277 9.44703 8.24536 9.3943 8.27251 9.3671C8.35192 9.28852 8.43796 9.18495 8.52121 9.08476C8.56062 9.03729 8.6001 8.98976 8.63887 8.94495C8.75965 8.80443 8.81342 8.69534 8.87575 8.56898L8.90842 8.50333C9.06062 8.20093 8.93062 7.94573 8.88861 7.86333C8.85413 7.79437 8.23848 6.30852 8.17303 6.15242C8.01562 5.77573 7.80764 5.60034 7.51861 5.60034C7.49179 5.60034 7.51861 5.60034 7.40614 5.60508C7.26919 5.61086 6.52342 5.70904 6.19368 5.9169C5.844 6.13735 5.25244 6.84008 5.25244 8.07593C5.25244 9.1882 5.95829 10.2384 6.26134 10.6378C6.26887 10.6479 6.2827 10.6683 6.30277 10.6977C7.46335 12.3926 8.91017 13.6487 10.3769 14.2346C11.7889 14.7987 12.4575 14.8638 12.8376 14.8638H12.8377C12.9974 14.8638 13.1253 14.8513 13.2381 14.8402L13.3096 14.8334C13.7974 14.7901 14.8694 14.2347 15.1132 13.5571C15.3053 13.0234 15.3559 12.4403 15.2282 12.2287C15.1406 12.0848 14.9898 12.0124 14.7988 11.9207Z" fill="white"/><path d="M10.1775 0.428467C4.76089 0.428467 0.354141 4.8021 0.354141 10.178C0.354141 11.9168 0.819465 13.6188 1.70096 15.1084L0.0137512 20.0854C-0.0176774 20.1781 0.0056992 20.2807 0.0743356 20.3506C0.123881 20.4012 0.191089 20.4285 0.259725 20.4285C0.286024 20.4285 0.312517 20.4245 0.338362 20.4163L5.52797 18.7672C6.9481 19.5259 8.55317 19.9265 10.1776 19.9265C15.5937 19.9265 20 15.5533 20 10.178C20 4.8021 15.5937 0.428467 10.1775 0.428467ZM10.1775 17.8956C8.64901 17.8956 7.16856 17.4542 5.89596 16.6192C5.85317 16.5911 5.80349 16.5766 5.75349 16.5766C5.72706 16.5766 5.70057 16.5807 5.67479 16.5889L3.07511 17.4152L3.91434 14.9393C3.94148 14.8592 3.92791 14.7708 3.87791 14.7025C2.90882 13.3783 2.39654 11.8139 2.39654 10.178C2.39654 5.92197 5.88706 2.45938 10.1775 2.45938C14.4673 2.45938 17.9575 5.92197 17.9575 10.178C17.9575 14.4335 14.4675 17.8956 10.1775 17.8956Z" fill="white"/></svg>');
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	top: -4px;
	margin-left: 8px;
}

.frame span {
	color: transparent;
}

.frame span {
	transition: color .2s;
}

.frame .-letter-visible {
	color: #000;
}


.frame::after {
	content: '';
	background: url('/static/i/frame.webp') no-repeat;
	background-size: contain;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	transition: all .4s;
}

.frame.a1 {
	opacity: 1;
}

.frame.a2::after {
	animation: frameMoving .8s linear infinite;
}


@keyframes frameMoving {
	0% {
		transform: rotate(0) translate(0, 0);
	}
	50% {
		transform: rotate(5deg) translate(-5px, 5px);
	}
	100% {
		transform: rotate(0)  translate(0, 0);
	}
}




@media screen and (max-width: 1279px) {
	.project_title {
		font-size: 10.4vw;
	}

	.sl_text {
		font-size: calc((100vw - 90px) / 17.5);
		right: 4.7vw;
		left: 4.7vw;
	}

	.block4_title span {
		padding: 0 1.2vw 0 .4vw;
	}

	.frame {
		width: 29vw;
		font-size: 1.55vw;
		top: 3vw;
		left: 1.5vw;
	}

	.frame div {
		top: 3.5vw;
		left: 2.4vw;
	}

	.frame a::after {
		width: 1.55vw;
		top: -0.325vw;
		margin-left: .65vw;
	}

	@keyframes frameMoving {
		0% {
			transform: rotate(0) translate(0, 0);
		}
		50% {
			transform: rotate(5deg) translate(-.4vw, .4vw);
		}
		100% {
			transform: rotate(0)  translate(0, 0);
		}
	}
}

@media screen and (max-width: 1185px) {
	h1 {
		font-size: 52px;
	}
}

@media screen and (max-width: 950px) {
	.header {
		padding-top: 220px;
	}

	.header_content {
		flex-direction: column-reverse;
		gap: 30px;
	}

	.header_item {
		font-size: 10px;
	}

	.header_item div {
		font-size: 20px;
	}

	.model {
		padding-bottom: 80px;
	}

	.model_title {
		font-size: 24px;
	}

	.model_text {
		font-size: 18px;
	}

	.model img {
		width: 30px;
	}
}

@media screen and (max-width: 767px) {
	.header {
		padding: 95px 25px 25px 0;
		background-image: url("/static/i/header_bg-m.webp");
	}

	.header_content {
		gap: 12px;
	}

	.logo {
		max-width: 76px;
		top: 30px;
		right: 27px;
	}

	h1 {
		max-width: 310px;
		font-size: 28px;
		align-self: flex-end;
	}

	.header_btn {
		font-size: 14px;
		padding: 10px 15px;
		border-radius: 8px;
		top: 20px;
		left: 20px;
	}

	.header_btn div {
		font-size: 10px;
	}

	.header_btn::after {
		width: 15px;
		height: 16px;
		top: 9px;
		right: 19px;
	}

	.header_items {
		flex-wrap: wrap;
		gap: 20px 5px;
	}

	.header_item {
		width: calc((100% - 50px) / 3);
		font-size: 10px;
		flex-grow: 1;
		order: 2;
	}

	.header_item[data-idx="0"],
	.header_item[data-idx="1"],
	.header_item[data-idx="2"] {
		order: 1;
	}

	.header_item div {
		font-size: 20px;
	}

	.block1 {
		font-size: 22px;
		padding-top: 42px;
		padding-bottom: 42px;
		line-height: 1.38;
	}


	.block2 {
		padding-top: 35px;
	}

	.techs {
		font-size: 15px;
		gap: 6px;
	}

	.tech_row-title {
		font-size: 60px;
	}


	.block3 {
		padding: 40px 5px 0 20px;
	}

	.block3_title {
		font-size: 18px;
	}

	.projects {
		padding-top: 21px;
		padding-bottom: 20px;
		line-height: 1.23;
	}

	.project_title {
		border-bottom-width: 3px;
	}

	.project_content {
		font-size: 18px;
		padding: 0 0 20px;
		gap: 20px;
	}

	.block4_text {
		font-size: 18px;
	}

	.block4_text br.-m {
		display: block;
	}

	.sl_text {
		right: 4.7vw;
		left: 4.7vw;
	}
}

@media screen and (max-width: 640px) {
	.sl_text {
		font-size: calc((100vw - 90px) / 15.7);
		bottom: 10px;
	}

	.models {
		flex-direction: column;
		gap: 20px;
	}

	.model {
		max-width: none;
		width: 100%;
		padding: 20px 20px 80px 20px;
	}

	.model_text {
		max-width: none;
		font-size: 16px;
	}
}

@media screen and (max-width: 460px) {
	.block1 {
		font-size: 4.7vw;
	}
}

@media screen and (max-width: 420px) {
	.block4_title {
		font-size: 5.8vw;
	}
}

@media screen and (max-width: 390px) {
	.sl_text {
		font-size: calc((100vw - 90px) / 14.7);
	}
}




/* footer */

:root {
    --rm: 20px;
}

footer {
    position: relative;
    color: #000000;
    padding: calc( var(--rm) * 3 );
    padding-bottom: 0;
}   

footer > h2 {
    font-size: calc(var(--rm) * 3.6);
    font-weight: 800;
    font-style: italic;
    text-transform: uppercase;
}

footer > h2 > em {
    display: block;
    font-size: calc(var(--rm) * 1.95);
    font-weight: 600;
    color: #cbcbcb;
    position: relative;
    top: -10px;
    padding-bottom: 5px;
}

footer > div.b3 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-bottom: calc(var(--rm) * 5.1);
}

footer > div.b3 span:nth-child(1) {
    font-size: calc(var(--rm) * 12);
    font-weight: 800;
    font-style: italic;
    position: relative;
    left: calc(var(--rm) * -1.25);
    top: calc(var(--rm) * -0.75);
}

footer > div.b3 span:nth-child(2) {
    font-size: calc(var(--rm) * 2);
    padding-left: calc(var(--rm) * 3);
    text-transform: uppercase;
    font-weight: 800;
    font-style: italic;
    position: relative;
    top: calc(var(--rm) * -1);
}

footer > div.b3 span:nth-child(2) a {
    font-size: calc(var(--rm) * 2.4);
    display: inline-block;
    text-decoration: underline;
    text-underline-offset: calc(var(--rm) * 0.6);
    text-decoration-thickness: 3px;
}

.sl h2,
footer > h2:nth-of-type(2) {
    /*padding-top: calc(var(--rm) * 1);*/
    font-size: calc(var(--rm) * 5.5);
    text-align: center;
    position: relative;
    left: calc(var(--rm) * -1.3);
	white-space: nowrap;
}

footer > section {
    position: relative;
    margin: -5px calc(var(--rm) * -3) 0 calc(var(--rm) * -3);
    background: #6dbaf6 url("/static/i/footer.webp") center top no-repeat;
    aspect-ratio: 1.56;
    background-size: cover;
    padding-left: 44%;
    box-sizing: border-box;
    color: #ffffff;
    z-index: 20;
}

footer > section h3 {
    position: relative;
    padding-top: var(--rm);
    font-weight: 800;
    font-size: calc(var(--rm) * 3.1);
    font-style: italic;
    text-transform: uppercase;
}

footer > section h3 > span {
    display: block;
    position: relative;
    font-size: calc(var(--rm) * 8.25);
    margin-bottom: calc(var(--rm) * -5.25);
}

footer > section h3 > em {
    display: block;
    position: relative;
    font-size: calc(var(--rm) * 2.65);
}

footer > .credits {
    position: relative;
    z-index: 10;
    background: #000000;
    color: #6e6e6e;
    margin: 0 calc(var(--rm) * -3);
    padding: calc(var(--rm) * 1.5) calc(var(--rm) * 3);
    font-size: calc(var(--rm) * 0.8);
    display: flex;
    align-items: center;
    justify-content: space-between;
    
}

footer > .credits .f-logo {
    height: 3em;
    background: transparent url("/static/i/logo.webp") center center no-repeat;
    background-size: contain;
    aspect-ratio: 3;
}

footer ul.sm-menu {
    position: absolute;
    bottom: calc(var(--rm) * -1.5);
    background: #ffffff;
    color: #000000;
    padding: calc(var(--rm) * 1.5) calc(var(--rm) * 2.1);
    font-size: calc(var(--rm) * 3);
    font-weight: 800;
    font-style: italic;
    border-radius: calc(var(--rm) * .9);
    overflow: hidden;
}

footer ul.sm-menu li {
    padding: calc(var(--rm) * .3) 0;
    position: relative;
    transition: transform .4s ease;
    transform: translateX(0);
}
footer ul.sm-menu li:nth-child(1) { transition-delay: .15s }
footer ul.sm-menu li:nth-child(2) { transition-delay: .3s }
footer ul.sm-menu li:nth-child(3) { transition-delay: .45s }
footer ul.sm-menu li:nth-child(4) { transition-delay: .6s }

footer ul.sm-menu[invisible] li {
    transform: translateX(-50dvw);
}

footer ul.sm-menu a {
    text-decoration: underline;
    text-underline-offset: calc(var(--rm) * 0.7);
    text-decoration-thickness: 3px;
}






.d {
	display: block;
}

@media screen and (max-width:1240px){ :root { --rm: 15px; } }
@media screen and (max-width:950px) { :root { --rm: 12px; } }
@media screen and (max-width:760px) { :root { --rm: 10px; }
    footer > h2 > em {
        top: 0;
    }
}
@media screen and (max-width:640px) { :root { --rm: 7px; } }
@media screen and (max-width:450px) { :root { --rm: 6.667px; }
    footer > div.b3 span:nth-child(1) {
        top: 0;
        left: 0;
    }

    footer > div.b3 span:nth-child(2) {
        top: 0;
    }
    footer > div.b3 span:nth-child(2) a {
        text-underline-offset: 4px;
    }
	.sl h2,
    footer > h2:nth-of-type(2) {
        left: 0;
    }
    footer ul.sm-menu {
        border-radius: 5px;
    }
    footer ul.sm-menu a {
        text-underline-offset: 4px;
    }

	.m {
		display: block;
	}
	.d {
		display: inline;
	}
}
@media screen and (max-width:390px) { :root { --rm: 5.6px; }