*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	/* disablePageUnloadEvents: ['unload']; */
}
:root {
--index: calc(1vw + 1vh);
--transition: transform .75s cubic-bezier(.075, .5, 0, 1);
}

body {
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
background: linear-gradient(to bottom, rgb(255, 230, 196), rgb(0, 108, 209));
line-height: 1;
}

.content {
	will-change: transform;
}

.layers {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}

.layer {
	height: 100%;
	width: 100%;
	position: absolute;
	background-size: cover;
	background-position: center;
	will-change: transform;
	transition: var(--transition);
}

/* ------------------------ВИДЕО-ФОН--------------------- */

/* .layers__base {
	bottom: 3vh;
	justify-content: center;
	display: flex;
	height: 120vh;
	left: 50px;
	background-size: cover;
	transform: translate3d(0, calc(var(--scrollTop) / 1.6), 0);
} */




/* ----------------ПЕРВАЯ СТРАНИЦА----------------------------- */

.main-header {
position: relative;
}

.main-header::after {
	content: '';
	position: absolute;
	z-index: 100;
	width: 100%;
	height: calc(var(--index) * 12);
	background-image: url(../img/page1/crosspage.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	bottom: calc(var(--index) * -5.8);
}

.layers__base {
	bottom: 5vh;
	justify-content: center;
	display: flex;
	transform: translate3d(0, calc(var(--scrollTop) / 1.6), 0);
}

.layers__logotype {
	position: absolute;
	background-size: cover;
	width: 470px;
	height: 500px;
	top: 40px;
	transform: translate3d(0, calc(var(--scrollTop) / 2.5), 0);
}

@media (max-aspect-ratio: 3/2) {
.layers__logotype {
	width: 280px;
	height: 300px;
	top: 18vh;
	transform: translate3d(0, calc(var(--scrollTop) / 2.5), 0);
}
}

@media (max-height: 800px) {
.layers__logotype {
	width: 180px;
	height: 200px;
	top: 8vh;
	transform: translate3d(0, calc(var(--scrollTop) / 2.5), 0);
}
}

/* .layers__logotype {
		height: calc(var(--index) * 5);
    width: 25vw;
		position: absolute;
    background-size: cover;
		transform: translate3d(0, calc(var(--scrollTop) / 3), 0);	
		top: calc(var(--index) * 1);
}

.layers__logotype img {
	  width: 100%;
    height: auto;
} */


.layers__logotext {
	position: absolute;
	background-size: cover;
	width: 900px;
	height: 200px;
	/* width: calc(var(--index) * 25);
	height: calc(var(--index) * 6); */
	top: 400px;
	transform: translate3d(0, calc(var(--scrollTop) / 3), 0);
}

@media (max-aspect-ratio: 3/2) {
.layers__logotext {
	width: 350px;
	height: 80px;
	top: 45vh;
	transform: translate3d(0, calc(var(--scrollTop) / 3), 0);
}
}

@media (max-height: 900px) {
.layers__logotext {
	width: 350px;
	height: 70px;
	top: 45vh;
	transform: translate3d(0, calc(var(--scrollTop) / 3), 0);
}
}

.layers__1middle1_clouds {
	transform: translate3d(0, calc(var(--scrollTop) / 4), 0);
}

@media (max-aspect-ratio: 3/2) {
.layers__1middle1_clouds {
	bottom: -50px;
	transform: translate3d(0, calc(var(--scrollTop) / 3), 0);
}
}

/* .layers__1middle2_planetop {
	transform: translate3d(0, calc(var(--scrollTop) / 4), 0);
	width: 500px;
	height: 280px;
	left: 40px;
	top: 30px;
}

@media (max-aspect-ratio: 3/2) {
.layers__1middle2_planetop {
	width: 250px;
	height: 140px;
	left: 10px;
	top: 30px;
	transform: translate3d(0, calc(var(--scrollTop) / 2.2), 0);
}
} */

.layers__1middle2_planetop {
		height: calc(var(--index) * 12);
    width: 28vw;
		position: absolute;
    background-size: cover;
		left: 40px;
		top: 30px;
		transform: translate3d(calc(var(--scrollTop) / 20), calc(var(--scrollTop) / 2.5), 0);	
		bottom: calc(var(--index) * 20);
}

.layers__1middle2_planetop img {
		width: 100%;
		height: auto;
}



/* .layers__1middle3_planebottom {
	position: absolute;
	background-size: cover;
	width: 500px;
	height: 420px;
	right: 0;
	top: 490px;
	transform: translate3d(0, calc(var(--scrollTop) / 8), 0);
}

@media (max-aspect-ratio: 3/2) {
.layers__1middle3_planebottom {
	position: absolute;
	width: 300px;
	height: 250px;
	right: -20px;
	top: 58vh;
	transform: translate3d(0, calc(var(--scrollTop) / 8), 0);
}
} */

.layers__1middle3_planebottom {
		height: calc(var(--index) * 15);
		width: 25vw;
		position: absolute;
		background-size: cover;
		right: 0;
		transform: translate3d(0, calc(var(--scrollTop) / 7), 0);	
		bottom: calc(var(--index) * 2);
}

@media (max-aspect-ratio: 3/2) {
.layers__1middle3_planebottom {
		height: calc(var(--index) * 15);
		width: 45vw;
		position: absolute;
		background-size: cover;
		right: 0;
		transform: translate3d(0, calc(var(--scrollTop) / 7), 0);	
		bottom: calc(var(--index) * 10);
}
.layers__1middle3_planebottom img {
		width: 100%;
		height: auto;
}
}


.layers__1middle3_planebottom img {
		width: 100%;
		height: auto;
}



.layers__1front_clouds {
	transform: translate3d(0, calc(var(--scrollTop) / 14), 0);
}

@media (max-aspect-ratio: 3/2) {
.layers__1front_clouds {
	bottom: -50px;
	transform: translate3d(0, calc(var(--scrollTop) / 12), 0);
}
}


/* ----------------ВТОРАЯ СТРАНИЦА----------------------------- */

.second-header {
position: relative;
}

.second-header::after {
	content: '';
	position: absolute;
	z-index: 100;
	width: 100%;
	height: calc(var(--index) * 12);
	background-image: url(../img/page2/2crosspage.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	bottom: calc(var(--index) * -6.5);
}

.layers__base_2 {
	justify-content: center;
	display: flex;
	/* scale: 1.1; */
	bottom: 50vh;
	transform: translate3d(0, calc(var(--scrollTop) / 2), 0);
}

.layers__2clouds {
	bottom: 30vh;
	transform: translate3d(0, calc(var(--scrollTop) / 3), 0);
}

  /* @keyframes blink {
    0% { border-color: rgba(255, 255, 255, 0.1); }
    50% { border-color: rgba(255, 255, 255, 0.6); }
    100% { border-color: rgba(255, 255, 255, 0.1); }
  } */

.layers__2border {
	/* border: 2px solid rgba(255, 255, 255, 0.6); */
	/* animation: blink 5s infinite; */
	width: calc(var(--index) * 44);
	height: calc(var(--index) * 23);
	transform: translate3d(0, calc(var(--scrollTop) / 14), 0);
	border-radius: 30px 0px 0px 30px;
	padding: 2.2% 2.2%;
	background-color: rgba(255, 255, 255, 0.3);
	backdrop-filter: blur(3px);
	box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.2);
	right: -2px;
	margin-top: -7%;
	text-align: justify;
}

@media (max-aspect-ratio: 3/2) {
.layers__2border {
	border-radius: 15px 0px 0px 15px;
	padding: 4% 4%;
	width: calc(var(--index) * 26);
	height: calc(var(--index) * 43);
	top: 10%;
	transform: translate3d(0, calc(var(--scrollTop) / 14), 0);
	text-align: justify;
}
}

h1 {
	font-size: 1.3vw; line-height: 1.2; color: rgb(0, 36, 112);  font-weight: normal;
}
@media (max-aspect-ratio: 3/2) {
	h1 {
	font-size: 1.7vh; line-height: 1.3; color: rgb(0, 36, 112); font-weight: normal;
}}


.p2 {
	font-size: 1vw; line-height: 1.2; margin-left: 0%;
}
@media (max-aspect-ratio: 3/2) {
	.p2 {
	font-size: 1.1vh; line-height: 1.3;
	}}


.p3 {
	font-size: 1vw; line-height: 1.3; margin-left: 35%; font-weight: bold;
}
@media (max-aspect-ratio: 3/2) {
.p3 {
	font-size: 1.2vh; line-height: 1.3; margin-left: 0%; text-align: left;
}}

.p3_2 {
	font-size: 1vw; line-height: 1.3; margin-left: 0%; font-weight: bold;
}
@media (max-aspect-ratio: 3/2) {
.p3_2 {
	font-size: 1.2vh; line-height: 1.3; margin-left: 0%; text-align: left;
}}


.p4 {
	font-size: 1vw; line-height: 1.3; margin-left: 35%;
}
@media (max-aspect-ratio: 3/2) {
.p4 {
	font-size: 1.2vh; line-height: 1.2; margin-left: 0%; text-align: right;
}}

.p5 {
	font-size: 1vw; line-height: 1.3; margin-left: 0%;
}
@media (max-aspect-ratio: 3/2) {
.p5 {
	font-size: 1.2vh; line-height: 1.2; margin-left: 0%;
}}


.layers__2plane {
		height: calc(var(--index) * 12);
    width: 55vw;
		position: absolute;
    background-size: cover;
		left: 0px;
		transform: translate3d(0, calc(var(--scrollTop) / 10), 0);	
		bottom: calc(var(--index) * 20);
}

.layers__2plane img {
	    width: 100%;
    height: auto;
}

@media (max-aspect-ratio: 3/2) {
.layers__2plane {
		height: calc(var(--index) * 12);
    width: 55vw;
		position: absolute;
    background-size: cover;
		left: 0px;
		transform: translate3d(0, calc(var(--scrollTop) / 10), 0);	
		bottom: calc(var(--index) * 17);
}

.layers__2plane img {
	    width: 100%;
    height: auto;
}
}

.layers__2topclouds {
	bottom: -15px;
	transform: translate3d(0, calc(var(--scrollTop) / -15), 0);
}
@media (max-aspect-ratio: 3/2) {
.layers__2topclouds {
	bottom: -15px;
	transform: translate3d(0, calc(var(--scrollTop) / -10), 0);
}}

/* .layers__2fog {
	width: 200vw;
	height: 200vh;
	transform: translate3d(0, calc(var(--scrollTop) / 15), 0);
	transition: 5s ease;
	opacity: 0.5;
	filter: brightness(300%);
} */

/* ----------------ТРЕТЯЯ СТРАНИЦА----------------------------- */

.third-header {
position: relative;
}

.third-header::after {
	content: '';
	position: absolute;
	z-index: 100;
	width: 100vw;
	height: calc(var(--index) * 12);
	background-image: url(../img/page3/3crosspage.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	bottom: calc(var(--index) * -5.7);
}

.layers__base_3 {
	/* scale: 1.2; */
	justify-content: center;
	display: flex;
	bottom: 100vh;
	transform: translate3d(0, calc(var(--scrollTop) / 2), 0);
}

.layers__3clouds {
	bottom: 65vh;
	transform: translate3d(0, calc(var(--scrollTop) / 2.8), 0);
}


.layers__3border {
	width: calc(var(--index) * 35);
	height: calc(var(--index) * 22);
	transform: translate3d(0, calc(var(--scrollTop) / 15), 0);
	border-radius: 0px 30px 30px 0px;
	padding: 2.3% 2.3%;
	background-color: rgba(255, 255, 255, 0.3);
	backdrop-filter: blur(3px);
	box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.2);
	left: -2px;
	margin-top: -15%;
	text-align: justify;
}


@media (max-aspect-ratio: 3/2) {
.layers__3border {
	border-radius: 0px 15px 15px 0px;
	padding: 5% 5%;
	width: calc(var(--index) * 26);
	height: calc(var(--index) * 43);
	top: 10%;
	transform: translate3d(0, calc(var(--scrollTop) / 15), 0);
	text-align: justify;
}
}



a {
	/* text-align: left; */
	text-decoration: none;
}
a:hover {
	/* text-align: left; */
	font-size: 1.03vw;
	transition: 0.5s;
	color: red;
}

@media (max-aspect-ratio: 3/2) {
a:hover {
	/* text-align: left; */
	font-size: 2.3vw;
	transition: 0.5s;
	color: red;
}
}

.layers__3plane {
		height: calc(var(--index) * 9);
    width: 75vw;
		position: absolute;
    background-size: cover;
		right: 0px;
		transform: translate3d(0, calc(var(--scrollTop) / 10), 0);	
		bottom: calc(var(--index) * 25);
}

.layers__3plane img {
	    width: 100%;
    height: auto;
}


/* ----------------ЧЕТВЕРТАЯ СТРАНИЦА----------------------------- */

.layers__base_4 {
	justify-content: center;
	display: flex;
	bottom: 170vh;
	transform: translate3d(0, calc(var(--scrollTop) / 2), 0);
}

.layers__clouds4 {
	justify-content: center;
	display: flex;
	bottom: 125vh;
	transform: translate3d(0, calc(var(--scrollTop) / 3), 0);
}


.layers__planes4 {
	bottom: 42vh;
	transform: translate3d(0, calc(var(--scrollTop) / 6), 0);
}

.layers__grass4_1 {
	bottom: 25vh;
	transform: translate3d(0, calc(var(--scrollTop) / 10), 0);
}

.layers__grass4_2 {
	bottom: -13vh;
	transform: translate3d(0, calc(var(--scrollTop) / -25), 0);
	z-index: 1000;
}

/* .layers__4border {
	width: calc(var(--index) * 25);
	height: 300px;
	transform: translate3d(0, calc(var(--scrollTop) / 15), 0);
	border-radius: 30px 30px 30px 30px;
	padding: 1% 1%;
	background-color: rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(3px);
	box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.2);
	top: 48%;
	text-align: center;
} */

.layers__4border {
	width: calc(var(--index) * 25);
	height: 300px;
	transform: translate3d(0, calc(var(--scrollTop) / -1.3), 0);
	border-radius: 30px 30px 30px 30px;
	padding: 1% 1%;
	background-color: rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(3px);
	box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.2);
	top: 300%;
	text-align: center;
	transition: 0.4s ease;
}

@media (max-aspect-ratio: 3/2) {
.layers__4border {
	border-radius: 15px 15px 15px 15px;
	padding: 2% 2%;
	width: calc(var(--index) * 26);
	height: 300px;
	top: 271%;
	transform: translate3d(0, calc(var(--scrollTop) / -1.5), 0);
	text-align: center;
}
}

sign {
	font-size: 1vw; line-height: 1.2; color: rgb(0, 36, 112);  font-weight: normal; letter-spacing: 1px;
}
@media (max-aspect-ratio: 3/2) {
	sign {
	font-size: 1.3vh; line-height: 1.3; color: rgb(0, 36, 112); font-weight: normal; letter-spacing: 1px;
}}

.layers__4author {
	width: calc(var(--index) * 25);
	height: 60px;
	transform: translate3d(0, calc(var(--scrollTop) / -1.3), 0);
	padding: 1% 1%;
	top: 323%;
	text-align: center;
	text-shadow: 0 0 5px black;
	transition: 1s ease;
	z-index: 1001;
	backdrop-filter: blur(1px);
	border-radius: 50px 50px 50px 50px;
}

@media (max-aspect-ratio: 3/2) {
.layers__4author {
	top: 325%;
	width: calc(var(--index) * 30);
	height: 60px;
}}