/* ========== Основные элементы ========== */
:root 
{	
	--text-h1: #caf2dd;
	--text-h2: #548e77;
	--drawings: #3f6f5b;
	--stripe-light-start: #f4faf6;
    --stripe-light-end: #c4d8ce;
    --stripe-dark-start: #2c4440;
    --stripe-dark-end: #121c1a;
	--hover: #528a74;
	--border: #4b826d;
}
*
{
	box-sizing: border-box;
}
html
{
	font-size: 10px;
	scroll-behavior: smooth;
	overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }
}
body
{
	font-family: Arial, sans-serif;
	font-size: 1.5rem;
	line-height: 1.5;
	margin: 0;
	overflow-x: clip;
}
a
{
	text-decoration: none;
}
.citation
{
	margin: 3rem 5rem !important;
}
.mt0
{
	margin-top: 0 !important;
}
.mt6
{
	margin-top: 6rem !important;
}
.mt9
{
	margin-top: 9rem !important;
}
.mt15
{
	margin-top: 15rem !important;
}
.mb
{
	margin-bottom: 6rem !important;
}
/* ========== Подложка ========= */
.video-container {
	position: fixed;
	top: 0;
    left: 0;
    width: 100%;
  	height: 100lvh;
  	z-index: -1;
  	overflow: hidden;
	transform: translateZ(0);
}
.video-container video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.content {
	z-index: 1;
	filter: drop-shadow(0 0 10px rgba(10, 00, 20, 1));
}
/* ========== Логотип ========== */
.logo
{
	display: flex;
	align-items: center;
}
.logo>a
{
	display: flex;
	text-decoration: none;
	transition: transform .2s ease-in-out;
	transform-origin: 50% 50%;	
}
.logo>a:hover
{
	transform: scale(1.05);
}
.logo>a>img
{
	height: 3.6rem;
}
/* ========== Шапка ========== */
.header
{
	position: fixed;
	display: flex;
	top: 0;
	width: 100%;
	justify-content: space-between;
	align-items: center;
	height: 5rem;
	padding: 0 2rem;
	user-select: none;
	z-index: 50;
	background-color: rgba(150, 170, 160, 0.9);
	box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
	transition: top .2s ease-in-out;
}
.header.hidden
{
	top: -6rem;
}
.menu
{
	display: flex;
	flex-direction: column;
	position: absolute;
	width: 24rem;
	right: -25rem;
	top: 0;
	padding: 1rem 0 1rem 1rem;
	margin: 0;
	list-style: none;
	user-select: none;
	z-index: 49;
	background-color: rgba(150, 170, 160, 0.9);
	box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
	transition: right .2s ease-in-out, top .2s ease-in-out;
}
.menu li 
{
	margin: 1.5rem 0 0.5rem 1.5rem;
}
.menu li>a
{
	display: inline-block;
	color: #f8fff8;
	font-size: 1.3rem;
	text-decoration: none;
	letter-spacing: 0.05rem;
	transition: color .2s ease-in-out, transform .2s ease-in-out;
	transform-origin: 50% 100%;
}
.menu li>a:hover, 
.menu li>a:focus 
{
	color: #508070;
	transform: scale(1.1);
}
.menu ul
{
	margin: 0;
	padding: 0 0 0 3rem;
	list-style: none;
}
.menu ul>li
{
	margin: 0.8rem 0;
}
.dots
{
	display: block;
	width: 3rem;
	height: 3rem;
	margin: 1rem 0;
	background-image: url(../svg/list.svg);
	filter: invert(100%);
}
#toggle
{
	display: none;
}
.header:not(.hidden) #toggle:checked ~ .menu
{
	right: 0.6rem;
	top: 5.5rem;
}
/* ========== Баннер в основном окне ========== */
.banner
{
	position: relative;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	width: 100%;
	height: 100vh;
	height: 100svh;
}
.banner-title
{
	position: relative;
	width: 100%;
	container: banner / inline-size;
	z-index: 1;
}
.banner-title h2
{
	text-align: center;
	font-size: 4cqi;
	margin: 0 5%;
	padding: 0;
	color: var(--text-h1);
}
.banner-title h4
{
	text-align: center;
	font-size: 2cqi;
	font-weight: 100;
	margin: 0;
	padding: 0;
	color: var(--stripe-light-start);
	text-transform: uppercase;
}
.banner-scroll
{
	position: absolute;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	transition: transform .2s ease-in-out;
	transform-origin: 50% 50%;
}
.banner-scroll:hover
{
	transform: translateX(-50%) scale(1.05);
}
.banner-scroll img
{
	width: 3rem;
	height: 3rem;
}
.banner-scroll p
{
	margin: 1rem 0;
	color: var(--text-h1);
}
/* ========== Мини загаловки ========== */
.title
{
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: fit-content;
	margin: 0;
	padding: 9rem 3rem 4rem 3rem;
	text-align: center;
}
.title h1
{
	color: var(--text-h1);
	font-size: 3rem;
	font-weight: 600;
	letter-spacing: .05em;
	margin: 0;
	padding: 0;
}
.title h2
{
	color: var(--stripe-light-start);
	font-size: 2rem;
	font-weight: 600;
	margin: 0;
	padding: 0;
}
/* ========== Линии ========== */
.stripe
{
	position: relative;
	width: 100%;
    padding: 3.5rem 2rem 7rem 2rem;
    text-align: center;    
    background: linear-gradient(135deg, var(--stripe-light-start) 0%, var(--stripe-light-end) 100%);
	clip-path: polygon(
		0 1.4vw,
		50% 0,
		100% 1.4vw,
		100% 100%,
		50% calc(100% - 1.4vw),
		0 100%
	);
}
@media(min-width: 768px) {
	.stripe
	{
		padding: 4rem 5% 8rem 5%;
	}
}
@media(min-width: 992px) {
	.stripe
	{
		padding: 4.5rem 10% 9rem 10%;
	}
}
@media(min-width: 1400px) {
	.stripe
	{
		padding: 5rem 10% 10rem 10%;
        clip-path: polygon(
            0 20px,
            50% 0,
            100% 20px,
            100% 100%,
            50% calc(100% - 20px),
            0 100%
        );
	}
}
.stripe:nth-child(odd)
{
	color: var(--stripe-light-start);
    background: linear-gradient(135deg, var(--stripe-dark-start) 0%, var(--stripe-dark-end) 100%);
}
.stripe iframe
{
	width: 100%;
	aspect-ratio: 16/9;
	margin-bottom: 4rem;
}
@media(min-width: 1400px) {
	.stripe iframe
	{
		width: 75%;
	}
}
.stripe h2
{
	color: var(--text-h2);
	font-size: 2.5rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	padding: 0;
	margin: 2rem 0 3rem 0;
}
.stripe h3
{
	color: var(--text-h2);
	font-size: 2rem;
	font-weight: 400;
	padding: 0;
	margin: 3rem 0 1rem 0;
}
.stripe ul
{
	text-align: left;
}
.stripe p
{
	margin: 0;
}
.stripe .desc h3
{
	font-size: 1.75rem;
	margin: 0 0 1.5rem 0;
}
.stripe .desc h4
{
	font-weight: 600;
	color: #000000;
	padding: 0;
	margin: 0 0 1.5rem 0;
}
.stripe:nth-child(odd) .desc h4
{
	color: #ffffff;
}
.desc p
{
	width: 100%;
	text-align: left;	
}
.stripe .extra
{
	color: #707800;
}
.stripe:nth-child(odd) .extra
{
	color: #b8c0a0;
}
/* ========== Картинки ========== */
.pics
{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 4rem;
}
.pic
{
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	padding: 0 20%;
	margin-top: 6rem;
}
@media(min-width: 768px) {
	.pic
	{
		width: 50%;
		padding: 0 5rem;
		margin: 0;
	}
}
@media(min-width: 992px) {
	.pic
	{
		width: 33.3%;
		padding: 0 2rem;
	}
}
@media(min-width: 1400px) {
	.pic
	{
		width: 25%;
	}
}
.pic>img
{
	width: 100%;
	margin-bottom: 2rem;
	border-radius: 100%;
	outline: solid 0.3rem var(--border);
}
/* ========== Пустая линия ========== */
.empty
{
	position: relative;
	width: 100%;
	height: 10rem;
}
@media(min-width: 992px) {
	.empty
	{
		height: 14rem;
	}
}
@media(min-width: 1400px) {
	.empty
	{
		height: 18rem;
	}
}
/* ========== Контакты ========== */
.links
{
	display: flex;
	height: 16rem;
}
.link
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	background: var(--stripe-dark-start);
	transition: background-color .2s ease-in-out;
}
.link:hover
{
	background-color: #507068;
}
.link .logo
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #f8fff8;
	border-radius: 0.5rem;
	width: 6rem;
	height: 6rem;
}
.link .logo img
{
	width: 3rem;
	height: 3rem;
	filter: invert(44%) sepia(0%) saturate(0%) hue-rotate(142deg) brightness(98%) contrast(88%);
}
.link .body
{
	display: none;
	flex-direction: column;
	margin-left: 2rem;
}
@media(min-width: 500px) {
	.link .body
	{
		display: inline-flex;
	}
}
.link .body h4
{
	color: #f8fff8;
	font-size: 2rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .2rem;
	margin: 0;
}
.link .body p
{
	color: #f8fff8;
	font-size: 1.5rem;
	font-weight: 600;
	text-transform: uppercase;
	margin: 0;
}
.linkedin
{
	background: #30504A;
}
.youtube
{
	background: #304040;
}
/* ========== Конец страницы ========== */
footer
{
	display: flex;
	justify-content: center;
	height: 5rem;
	background-color: #000000;
}
/* ========== Цели ========== */
.goals
{
	display: inline-flex;
	flex-direction: column;
	column-gap: 4%;
	align-content: center;
	justify-content: space-between;
	flex-wrap: wrap;
}
@media(min-width: 768px) {
	.goals
	{
		flex-direction: row;
	}
}
.goal
{
	display: inline-flex;
	flex-direction: column;	
	align-items: center;
	text-align: center;
	width: 80%;
	margin: 1.5rem 0;
	padding: 1rem;
	border-radius: 1rem;
	background-color: var(--drawings);
	border: 0.3rem solid var(--border);
	user-select: none;
	transition: background-color .2s ease-in-out, box-shadow .2s ease-in-out, transform .2s ease-in-out;
}
@media(min-width: 768px) {
	.goal
	{
		width: 48%;
		margin: 2% auto;
	}
}
.goal:hover, .goal.anim.visible:hover {
	color: #ffffff;
	background-color: var(--hover);
	transform: translate(-2px, -4px);
	box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.3);
}
.goal img
{
	height: 4rem;
	width: 4rem;
	margin: 0.6rem 0 1rem 0;
	filter: invert(100%);
}
.goal h6
{
	font-weight: 600;
	font-size: 2rem;
	margin: 0;
	color: var(--stripe-light-start);
}
.goal hr
{
	width: 100%;
	height: 2px;
	margin: 1rem;
	border: none;    
    background-color: var(--stripe-light-end);
}
.goal p
{
	color: var(--stripe-light-end);
}
.goal ul
{
	color: var(--stripe-light-end);
}
.goal ul.left 
{
	margin: 0.2rem 0 0 -3rem;
}
/* ========== Факты ========== */
.facts
{
	display: inline-flex;
	flex-direction: column;
	align-content: center;
	height: 100%;
	margin: 4rem 0 4rem 0;
}
@media(min-width: 768px) {
	.facts
	{
		flex-direction: row;
	}
}
.fact
{
	display: inline-flex;
	flex-direction: row-reverse;
	justify-content: space-around;
	align-items: center;
	text-align: center;
	width: 26rem;
	height: min-content;
	margin: 1rem;
	padding: 1rem;
	border-radius: 1rem;
	background-color: var(--drawings);
	border: 0.3rem solid var(--border);
	user-select: none;
	transition: background-color .2s ease-in-out, box-shadow .2s ease-in-out, transform .2s ease-in-out;
}
@media(min-width: 768px) {
	.fact
	{
		flex-direction: column;
		width: 14rem;
	}
}
.fact:hover, .fact.anim.visible:hover {
	color: #ffffff;
	background-color: var(--hover);
	transform: translate(-2px, -4px);
	box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.3);
}
.fact img
{
	height: 3rem;
	width: 3rem;
	margin: 0.6rem 0 0.4rem 0;
	filter: invert(100%);
}
.fact p
{
	font-weight: 600;
	font-size: 2.5rem;
	margin: 1rem 0;
	color: var(--stripe-light-end);
}
.fact h6
{
	width: 8rem;
	font-weight: 400;
	font-size: 1.5rem;
	margin: 0;
	color: var(--stripe-light-start);
}
/* ========== Ссылка ========== */
.u-a
{
	text-decoration: none;
	color: #00a0d0;
	background: linear-gradient(0deg, #00a0d0, #00a0d0) no-repeat right bottom;
	background-size: 0 0.1rem;
	transition: background-size .2s ease-in-out;
}
.u-a:hover,
.u-a:focus
{
	color: #60c0ff;
	background-size: 100% 0.1rem;
	background-position-x: left;
}
/* ========== DOI ========== */
.doi
{
	text-decoration: none;
	color: #609080;
	background: linear-gradient(0deg, #609080, #609080) no-repeat right bottom;
	background-size: 0 0.1rem;
	transition: background-size .2s ease-in-out;
}
.doi:hover,
.doi:focus
{
	color: #80b8a8;
	background-size: 100% 0.1rem;
	background-position-x: left;	
}
/* ========== Списки ========== */
.references
{
	text-align: left;
}
.references em
{
	color: #609080;
}
/* ========== Кнопка Read more ========== */
.more
{
	display: inline-block;
	width: 20rem;
	padding: .7rem 0;
	margin-top: 4rem;
	text-align: center;
	background-color: #407060;
	border-radius: 2rem;
	box-shadow: inset .5rem .6rem 1.5rem .2rem rgba(120, 255, 180, .4), .3rem .3rem 2rem .1rem rgba(120, 255, 180, .5);
	color: #c0ffe0;
	user-select: none;
	transition: transform .2s ease-in-out, box-shadow .2s ease-in-out;
}
.more.anim {
	transform: translate(-15rem, -10rem) scale(0.1);
}
.more.visible:hover {
	color: #d0ffe8;
	box-shadow: inset .5rem .6rem 1.5rem .2rem rgba(120, 255, 180, .5), .4rem .4rem 1.6rem rgba(120, 255, 180, .5);
	transform: scale(1.05);
}
/* ========== Анимация ========== */
.anim
{
	transform: translate(15rem, -10rem) scale(0.1);
	opacity: 0;	
	transition: background-color .2s ease-in-out, transform .2s ease-in-out, box-shadow .2s ease-in-out, opacity 0.3s ease-in;
}
.anim.visible
{
	transform: translate(0, 0) scale(1);
	opacity: 1;
}
/* ========== Карточка ========== */
.card
{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.card-pic
{
	position: relative;
	width: 95%;
	margin: auto;
	outline: solid .2rem var(--border);
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;	
	aspect-ratio: 16/9;
}
.card-pic>img
{
	width: 100%;
}
.card-pic>iframe
{
	position: absolute;
    top: 0;
    left: 0;
    height: 100.4%;
    width: 100.4%;
}
.card .desc
{
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	padding: 4rem 0 0 0;
}
.desc h4
{
	font-weight: 600;
	text-align: center;
	margin: 0;
	padding: 0 0 2rem 0;
}
@media(min-width: 992px) {
	.card
	{
		flex-direction: row;
	}
	.card-pic
	{
		width: 40%;
	}
	.card .desc
	{
		width: 60%;
		margin: auto 0;
		padding: 0 0 0 6rem;
	}
	.card.left
	{
		flex-direction: row-reverse;
	}
	.card.left .desc
	{
		padding: 0 6rem 0 0;
	}
}
@media(min-width: 1400px) {
	.card .desc
	{
		padding: 0 0 0 12rem;
	}
	.card.left .desc
	{
		padding: 0 12rem 0 0;
	}
}
/* ========== Карточка 2 ========== */
.card2
{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
}
.card2 h3
{
	margin: 0 0 2rem 0;
}
.card2 .desc
{
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	width: 100%;
	padding: 3rem 0 3rem 0;
}
@media(min-width: 992px) {
	.card2
	{
		flex-direction: row;
	}
	.card2:nth-child(odd), .card2.left
	{
		flex-direction: row-reverse;
	}
	.card2 .desc
	{
		width: 66%;
		padding: 4rem 0 4rem 6rem;
	}
	.card2:nth-child(odd) .desc, .card2.left .desc
	{
		padding: 4rem 6rem 4rem 0;
	}
}
@media(min-width: 1400px) {
	.card2 .desc
	{
		width: 75%;
		padding: 5rem 0 5rem 12rem;
	}
	.card2:nth-child(odd) .desc
	{
		padding: 5rem 12rem 5rem 0;
	}
}
/* ========== Прочее ========== */
.stripe h5
{
	color: #508070;
	font-size: 1.7rem;
	font-weight: 400;
	padding: 0;
	margin: 0 0 1rem 0;
}
.buttons
{
	display: flex;
	flex-direction: column;
	align-items: center;	
}
@media(min-width: 500px) {
	.buttons
	{
		flex-direction: row;
		justify-content: center;
		column-gap: 3rem;
	}
}
@media(min-width: 992px) {
	.buttons
	{
		column-gap: 5rem;
	}
}