/* ========== Основные элементы ========== */
*
{
	box-sizing: border-box;
}
html
{
	font-size: 10px;
	scroll-behavior: smooth;
	overflow-x: clip;
}
body
{
	font-family: Arial, sans-serif;
	font-size: 1.5rem;
	line-height: 1.5;
	margin: 0;
	overflow-x: clip;
}
a
{
	text-decoration: none;
}
.anchor
{
	display: block;
	position: relative;
	visibility: hidden;
	top: -6rem;
}
video
{
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100vh;
	height: 100lvh;
	object-fit: cover;
	z-index: -1;
}
.citation
{
	margin: 3rem 5rem !important;
}
.mt
{
	margin-top: 6rem !important;
}
.mb
{
	margin-bottom: 6rem !important;
}
.ab
{
	text-align: left !important;
	align-items: flex-start !important;
	align-self: flex-start !important;
}
/* ========== Логотип ========== */
.logo
{
	display: flex;
	align-items: center;
	user-select: none;
}
.logo>a
{
	display: flex;
	align-items: center;
	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;
}
.logo h2
{
	margin: 0 0 0 1rem;
    font-weight: 400;
    font-size: 1.8rem;
    line-height: normal;
    text-align: center;
    color: #f8fff8;
}
/* ========== Шапка ========== */
.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 rgb(100, 120, 110);
	transition: top .2s ease-in-out;
}
.header.hidden
{
	top: -6rem;
}
.menu
{
	display: flex;
	flex-direction: column;
	position: absolute;
	width: 20rem;
	right: -21rem;
	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 rgb(100, 120, 110);
	transition: right .2s ease-in-out, top .2s ease-in-out;
}
@media(min-width: 700px) {
	.menu
	{
		display: inline-flex;
		position: relative;
		top: 0;
		right: 0;
		width: unset;
		flex-direction: row;
		justify-content: center;
		background-color: unset;
		box-shadow: none;
	}
}
.menu li 
{
	margin: 1rem 2rem;
}
.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);
}
.dots
{
	display: block;
	width: 3rem;
	height: 3rem;
	margin: 1rem 0;
	background-image: url(../svg/list.svg);
	filter: invert(100%);
}
@media(min-width: 700px) {
	.dots
	{
		display: none;
	}
}
#toggle
{
	display: none;
}
@media(max-width: 699px) {
	.header:not(.hidden) #toggle:checked ~ .menu
	{
		right: 1rem;
		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;
	padding: 0;
	color: #f8fff8;
}
.banner-title h4
{
	text-align: center;
	font-size: 2cqi;
	font-weight: 100;
	margin: 0;
	padding: 0;
	color: #80B0A0;
	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: #508070;
}
/* ========== Мини загаловки ========== */
.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: #609080;
	font-size: 3rem;
	font-weight: 600;
	letter-spacing: .05em;
	margin: 0;
	padding: 0;
}
.title h2
{
	color: #80B0A0;
	font-size: 2rem;
	font-weight: 600;
	margin: 0;
	padding: 0;
}
/* ========== Линии ========== */
.stripe
{
	width: 100%;
	padding: 1rem 2rem 6rem 2rem;
	text-align: center;
	background-color: #f8fff8;
}
@media(min-width: 768px) {
	.stripe
	{
		padding: 1rem 5% 6rem 5%;
	}
}
@media(min-width: 992px) {
	.stripe
	{
		padding: 2rem 10% 8rem 10%;
	}
}
@media(min-width: 1400px) {
	.stripe
	{
		padding: 3rem 13% 10rem 13%;
	}
}
.stripe:nth-child(odd)
{
	color: #f8fff8;
	background-color: #304040;
}
.stripe iframe
{
	width: 100%;
	aspect-ratio: 16/9;
	margin-bottom: 4rem;
}
@media(min-width: 1400px) {
	.stripe iframe
	{
		width: 75%;
	}
}
.stripe h2
{
	color: #508070;
	font-size: 2.5rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	padding: 0;
	margin: 2rem 0 3rem 0;
}
.stripe h3
{
	color: #508070;
	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;
	}
}
@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 #a0b0a0;
}
/* ========== Пустая линия ========== */
.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: #30504A;
	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;
}
.twitter
{
	background: #304040;
}
.facebook
{
	background: #30504A;
}
/* ========== Конец страницы ========== */
footer
{
	display: flex;
	justify-content: center;
	height: 5rem;
	background-color: #000000;
}
/* ========== Цели ========== */
.goals
{
	display: inline-flex;
	flex-direction: column;
	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: #407060;
	border: 0.3rem solid #609080;
	user-select: none;
}
@media(min-width: 768px) {
	.goal
	{
		width: 48%;
		margin: 2% 0;
	}
}
.goal:hover {
	color: #ffffff;
	background-color: #609080;
}
.goal h6
{
	font-weight: 600;
	font-size: 2rem;
	margin: 0;
	color: #f8fff8;
}
.goal hr
{
	width: 100%;
	margin: 1rem;
}
.goal p,
.goal ul
{
	color: #f8fff8;
}
/* ========== Ссылка ========== */
.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) 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) scale(0.1);
	opacity: 0;	
	transition: 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>img
{
	width: 100%;
	user-select: none;
	outline: solid .2rem #205040;
	object-fit: cover;
}
.card>iframe,
.card.vid>img
{
	width: 95%;
	margin: auto;
	outline: solid .2rem #205040;
	aspect-ratio: 16/9;
}
.card.book>img
{
	width: 30%;
	margin: auto;
}
.card-pic
{
	position: relative;
	width: 95%;
	margin: auto;
	outline: solid .2rem #205040;
	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;
}
.card.book .desc
{
	align-items: flex-start;
}
@media(min-width: 992px) {
	.card
	{
		flex-direction: row;
	}
	.card>img
	{
		width: 30%;
	}
	.card .desc
	{
		width: 70%;
		padding: 0 0 0 6rem;
	}
	.card.left
	{
		flex-direction: row-reverse;
	}
	.card.left .desc
	{
		padding: 0 6rem 0 0;
	}
	.card>iframe,
	.card.vid>img,
	.card-pic
	{
		width: 40%;
	}
	.card.vid .desc
	{
		width: 60%;
		margin: auto 0;
	}
	.card.book>img
	{
		width: 20%;
	}
	.card.book .desc
	{
		width: 80%;
		margin: auto 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;
	margin-top: 4rem;
}
.card2 h3
{
	margin: 0 0 2rem 0;
}
.card2 .desc
{
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	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;
	}
}