.blocks {
	display: none;
}

.block {
	height: 100vh;
	overflow: hidden;
	position: relative;
}
.block__container {
	bottom: 0;
	height: 900px;
	left: 50%;
	overflow: hidden;
	position: absolute;
	transform: translateX(-50%);
	width: 2000px;
}

.cloud {
	animation-iteration-count: infinite;
	animation-name: banner1-cloud-motion;
	animation-timing-function: linear;
	left: -585px;
	position: absolute;
	z-index: 0;
}
.cloud-1 {
	animation-duration: 85s;
	animation-delay: -30s;
	background: url("/static/img/banner_1/cloud-1.png");
	height: 188px;
	top: 170px;
	width: 585px;
}
.cloud-2 {
	animation-duration: 50s;
	background: url("/static/img/banner_1/cloud-2.png");
	height: 157px;
	top: 60px;
	width: 513px;
}
.cloud-3 {
	animation-duration: 50s;
	animation-delay: -40s;
	background: url("/static/img/banner_1/cloud-3.png");
	height: 103px;
	top: 100px;
	width: 276px;
}
@keyframes banner1-cloud-motion {
	0% {transform:translateX(0)}
	100% {transform:translateX(2585px)}
}

.banner1 {
	background: rgb(214,239,255);
	background: linear-gradient(180deg, rgba(214,239,255,1) 0%, rgba(255,255,255,1) 70%);
	height: 100%;
}
.banner1__bg {
	background: url("/static/img/banner_1/bg2.png") no-repeat bottom center;
	height: 100%;
	position: absolute;
	width: 100%;
	z-index: 1;
}
.banner1__car {
	background: url("/static/img/banner_1/car.png");
	bottom: 328px;
	height: 265px;
	left: 130px;
	position: absolute;
	width: 183px;
	z-index: 3;
}
.banner1__sunflower {
	animation-duration: .6s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	bottom: 567px;
	left: 255px;
	position: absolute;
	z-index: 2;
}
.banner1__sunflower-1 {
	animation-name: banner1-sunflower-motion-1;
	background: url("/static/img/banner_1/sunflower1.png");
	height: 24px;
	width: 26px;
}
.banner1__sunflower-2 {
	animation-name: banner1-sunflower-motion-1;
	animation-delay: -.15s;
	background: url("/static/img/banner_1/sunflower2.png");
	height: 21px;
	width: 28px;
}
.banner1__sunflower-3 {
	animation-name: banner1-sunflower-motion-2;
	animation-delay: -.3s;
	background: url("/static/img/banner_1/sunflower1.png");
	height: 21px;
	width: 28px;
}
.banner1__sunflower-4 {
	animation-name: banner1-sunflower-motion-2;
	animation-delay: -.45s;
	background: url("/static/img/banner_1/sunflower2.png");
	height: 21px;
	width: 28px;
}
@keyframes banner1-sunflower-motion-1 {
	0% {opacity:.1;transform:translate(0, 0)}
	15% {opacity: 1;}
	100% {transform: translate(-35px, 130px)}
}
@keyframes banner1-sunflower-motion-2 {
	0% {opacity:.1;transform:translate(0, 0)}
	15% {opacity: 1;}
	100% {transform: translate(-65px, 130px)}
}
.banner1__layout {
	animation-direction: alternate;
	animation-name: banner1-layout-motion;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	position: absolute;
}
.banner1__layout-1 {
	animation-duration: 2.8s;
	background: url("/static/img/banner_1/layout1.png");
	bottom: 40px;
	height: 182px;
	left: 310px;
	width: 1057px;
	z-index: 2;
}
.banner1__layout-2 {
	animation-duration: 2.5s;
	background: url("/static/img/banner_1/layout2.png");
	bottom: -20px;
	height: 203px;
	left: 250px;
	width: 1376px;
	z-index: 3;
}
.banner1__layout-3 {
	animation-delay: -2s;
	animation-duration: 2.2s;
	background: url("/static/img/banner_1/layout3.png");
	bottom: -60px;
	height: 232px;
	left: 340px;
	width: 1267px;
	z-index: 4;
}
@keyframes banner1-layout-motion {
	0% {transform: translateX(0)}
	5% {transform: translateX(0)}
	30% {transform: translateX(3px)}
	70% {transform: translateX(9px)}
	95% {transform: translateX(12px)}
	100% {transform: translateX(12px)}
}

.banner1__dust {
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	position: absolute;
	z-index: 2;
}
.banner1__dust-1 {
	animation-duration: 1s;
	animation-name: banner1-rotate2;
	background-image: url("/static/img/banner_1/dust_1.png");
	bottom: 292px;
	height: 188px;
	right: 632px;
	width: 504px;
}
.banner1__dust-2 {
	animation-duration: .8s;
	animation-name: banner1-move-left3, banner1-fade;
	background-image: url("/static/img/banner_1/dust_2.png");
	bottom: 320px;
	height: 153px;
	right: 650px;
	width: 425px;
}

.banner1__dust-circle {
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	position: absolute;
	transform-origin: 50%;
	z-index: 2;
}
.banner1__dust-circle::after {
	animation-iteration-count: infinite;
	animation-name: banner1-rotate1;
	animation-timing-function: linear;
	display: block;
	content: '';
}
.banner1__bg-ribbon {
	background-image: url("/static/img/banner_1/ribbon.png");
	width: 1530px;
	height: 162px;
	position: absolute;
	bottom: 30px;
	z-index: 99;
	left: 200px;
}
.banner1__dust-circle-1 {
	animation-duration: 1.2s;
	animation-name: banner1-fade, banner1-move-left1;
	bottom: 320px;
	right: 775px;
}
.banner1__dust-circle-1::after {
	animation-duration: 1.2s;
	background-image: url("/static/img/banner_1/dust_сircle_1.png");
	height: 19px;
	width: 23px;
}
.banner1__dust-circle-2 {
	animation-duration: 1.8s;
	animation-name: banner1-fade, banner1-move-left2;
	bottom: 385px;
	right: 905px;
}
.banner1__dust-circle-2::after {
	animation-duration: 1.6s;
	background-image: url("/static/img/banner_1/dust_сircle_2.png");
	height: 50px;
	width: 53px;
}
.banner1__dust-circle-3 {
	animation-duration: 1.2s;
	animation-name: banner1-fade, banner1-move-left2;
	bottom: 415px;
	right: 975px;
}
.banner1__dust-circle-3::after {
	animation-duration: 1.2s;
	background-image: url("/static/img/banner_1/dust_сircle_3.png");
	height: 27px;
	width: 30px;
}
@keyframes banner1-move-left1 {
	0% {transform: translate(0, 0)}
	100% {transform: translate(-65px, -30px)}
}
@keyframes banner1-move-left2 {
	0% {transform: translate(0, 0)}
	100% {transform: translate(-65px, -15px)}
}
@keyframes banner1-move-left3 {
	0% {transform: translate(0, 0)}
	100% {transform: translate(-20px, -10px)}
}
@keyframes banner1-fade {
	0% {opacity:.1}
	20% {opacity:1}
	75% {opacity:1}
	100% {opacity:.2}
}
@keyframes banner1-rotate1 {
	0% {transform: rotate(0)}
	100% {transform: rotate(360deg)}
}
@keyframes banner1-rotate2 {
	0% {transform: translate(2px, 0)}

	25% {transform: translate(0, 2px)}

	50% {transform: translate(-2px, 0)}

	75% {transform: translate(0, -2px)}

	100% {transform: translate(2px, 0)}
}


.banner2 {
	height: 100%;
}
.banner2__bg {
	height: 100%;
	perspective: 500px;
	perspective-origin: 50% 0;
	transform-style: preserve-3d;
}
.banner2__bg_wrapper {
	animation: banner2-bg-motion-left 30s linear infinite;
	background: url("/static/img/banner_2/bg.jpg") repeat-x 50%;
	background-size: contain;
	height: 1300px;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: rotateX(30deg) translate(-50%, -56%);
	width: 5000px;
}
.banner2__seed {
	animation-name: banner2-motion-left, banner2-motion-up-down;
	animation-timing-function: linear, linear;
	animation-iteration-count: infinite, infinite;
	box-shadow: 0 45px 6px -5px rgba(0, 0, 0, .25);
	position: absolute;
	border-radius: 50%;
	bottom: 0;
}
.banner2__seed::after {
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	content: '';
	display: block;
	height: 39px;
	width: 78px;
}
.seed-1::after {
	background-image: url("/static/img/banner_2/seed1.png");
}
.seed-2::after {
	background-image: url("/static/img/banner_2/seed2.png");
}
.seed-animation-1 {
	animation-duration: 33s, .4s;
}
.seed-animation-2 {
	animation-duration: 30s, .35s;
}
.seed-animation-1::after {
	animation-name: banner2-rotate;
	animation-duration: 2.8s;
}
.seed-animation-2::after {
	animation-name: banner2-rotate2;
	animation-duration: 3s;
}
@keyframes banner2-bg-motion-left {
	from {background-position: 0 50%}
	to {background-position: -100% 50%}
}
@keyframes banner2-motion-left {
	0% {
		opacity: .2;
		right: 1.5%;
	}
	1% {
		opacity: 1;
		right: 2%;
	}
	99% {
		opacity: 1;
		right:98%;
	}
	100% {
		opacity: .2;
		right: 98.5%
	}
}
@keyframes banner2-motion-up-down {
	0% {bottom: 0}
	50% {bottom: 50px}
	100% {bottom: 0}
}
@keyframes banner2-rotate {
	0% {transform: rotate(0)}
	25% {transform: rotate(-120deg)}
	75% {transform: rotate(120deg)}
	100% {transform: rotate(0)}
}
@keyframes banner2-rotate2 {
	0% {transform: rotate(0)}
	50% {transform: rotate(180deg)}
	100% {transform: rotate(360deg)}
}


.banner3 {
	background: url('/static/img/banner_3/bg.png');
	height: 100%;
}
.banner3__image_01 {
	animation: banner3-bg-motion 30s linear infinite;
	background-image: url('/static/img/banner_3/image_01.png');
	background-repeat: repeat-y;
	background-size: contain;
	height: 1380px;
	position: absolute;
	right: 150px;
	transform: rotate(49deg);
	transform-origin: top right;
	top: 0;
	width: 319px;
	z-index: 1;
}
.banner3__image_02 {
	background-image: url('/static/img/banner_3/image_02.png');
	bottom: 0;
	height: 450px;
	left: 0;
	position: absolute;
	width: 1020px;
	z-index: 2;
}
.banner3__image_03 {
	animation: banner3-bg-motion 4s linear infinite;
	background-image: url("/static/img/banner_3/image_03.png");
	background-repeat: repeat-y;
	bottom: 295px;
	height: 840px;
	left: 0;
	position: absolute;
	transform: rotate(93.5deg);
	transform-origin: left bottom;
	width: 100px;
	z-index: 4;
}
.banner3__image_04 {
	background-image: url("/static/img/banner_3/image_04.png");
	bottom: -9px;
	height: 459px;
	left: -5px;
	position: absolute;
	width: 1025px;
	z-index: 5;
}
@keyframes banner3-bg-motion {
	from {background-position: 0 0}
	to {background-position: 0 -100%}
}


.banner4 {
	background: rgb(214,239,255);
	background: linear-gradient(180deg, rgba(214,239,255,1) 20%, rgba(255,255,255,1) 80%);
	height: 100%;
}
.banner4__bg {
	background: url("/static/img/banner_4/bg.png") no-repeat bottom center;
	height: 100%;
	position: absolute;
	width: 100%;
	z-index: 2;
}
.banner4__warehouse {
	background-image: url("/static/img/banner_4/warehouse.png");
	bottom: 250px;
	height: 376px;
	left: 0;
	position: absolute;
	width: 1088px;
	z-index: 4;
}
.banner4__bags {
	animation-direction: alternate;
	animation-duration: 4s;
	animation-name: banner4-motion-up-down;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	background-image: url("/static/img/banner_4/bags.png");
	bottom: 265px;
	height: 126px;
	left: 235px;
	position: absolute;
	width: 113px;
	z-index: 5;
}
@keyframes banner4-motion-up-down {
	0% {transform: translateY(0)}
	15% {transform: translateY(0)}
	85% {transform: translateY(-70px)}
	100% {transform: translateY(-70px)}
}
.banner4__train {
	animation-duration: 14s;
	animation-name: banner4-train-motion-right;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in;
	background-image: url("/static/img/banner_4/train.png");
	height: 695px;
	position: absolute;
	transform: scale(.3);
	width: 2180px;
	z-index: 3;
}
@keyframes banner4-train-motion-right {
	0% {
		bottom: 105px;
		left: -550px;
		transform: scale(.15);
	}
	10% {
		bottom: 105px;
		left: -550px;
		transform: scale(.15);
	}
	100% {
		bottom: 215px;
		left: 2350px;
		transform: scale(1.35)
	}
}
.banner4__layer {
	animation-direction: alternate;
	animation-name: banner4-layer-motion;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	position: absolute;
	z-index: 3;
}
.banner4__layer-1 {
	animation-delay: -1s;
	animation-duration: 4s;
	background-image: url("/static/img/banner_4/layer-1.png");
	bottom: -25px;
	height: 199px;
	left: 0;
	width: 2022px;
}
.banner4__layer-2 {
	animation-duration: 3s;
	background-image: url("/static/img/banner_4/layer-2.png");
	bottom: -75px;
	height: 216px;
	left: -20px;
	width: 2009px;
}
.banner4__layer-3 {
	animation-delay: -3s;
	animation-duration: 3s;
	background-image: url("/static/img/banner_4/layer-3.png");
	bottom: -88px;
	height: 209px;
	left: 203px;
	width: 1836px;
}
@keyframes banner4-layer-motion {
	0% {transform: translateX(0)}
	5% {transform: translateX(0)}
	30% {transform: translateX(4px)}
	70% {transform: translateX(10px)}
	95% {transform: translateX(14px)}
	100% {transform: translateX(14px)}
}
.banner5__bg {
	background: url("/static/img/banner_5/bg.jpg") no-repeat bottom center;
	height: 100%;
	position: absolute;
	width: 100%;
	z-index: 1;
}
.banner5__conveyor-1 {
	background: url("/static/img/banner_5/conveyor_1.png");
	bottom: 93px;
	height: 589px;
	right: 765px;
	position: absolute;
	width: 610px;
	z-index: 3;
}
.banner5__conveyor-2 {
	background: url("/static/img/banner_5/conveyor_2.png");
	bottom: 2px;
	height: 906px;
	left: 113px;
	position: absolute;
	width: 762px;
	z-index: 4;
}
.banner5__pipeTop {
	background: url("/static/img/banner_5/pipeTop.png");
	top: -41px;
	height: 174px;
	left: 499px;
	position: absolute;
	width: 119px;
	z-index: 6;
}
.falling-seeds {
	animation: seeds 2s linear infinite;
	background: url("/static/img/banner_5/seeds-top.png");
	top: 120px;
	height: 120px;
	left: 515px;
	position: absolute;
	width: 88px;
	z-index: 5;
	transform: rotate(180deg);
}
@keyframes seeds {
	from {background-position: 0 0}
	to {background-position: 0 -1000%}
}
.seed-conveyor {
	animation: seed-conveyor-animation 30s linear infinite;
	background: url("/static/img/banner_5/seed-conveyor.png");
	bottom: 190px;
	height: 490px;
	left: 825px;
	position: absolute;
	width: 56px;
	z-index: 4;
	transform: rotate(35deg);
}
@keyframes seed-conveyor-animation {
	from {background-position: 0 0}
	to {background-position: 0 -100%}
}
.controlling-people {
	animation: controlling 5s linear infinite;
	background: url("/static/img/banner_5/people-1.png");
	top: 143px;
	height: 122px;
	left: 1080px;
	position: absolute;
	width: 86px;
	z-index: 3;
}
@keyframes controlling {
	10% {transform: rotate(6deg);left: 1084px;}
	20% {transform: rotate(12deg);left: 1088px;}
	40% {transform: rotate(17deg);left: 1092px;}
	60% {transform: rotate(12deg);left: 1088px;}
	80% {transform: rotate(6deg);left: 1084px;}
	100% {transform: rotate(1deg);left: 1080px;}
}
.ready-seed-conveyor {
	animation: seed-conveyor-animation 30s linear infinite;
	background: url("/static/img/banner_5/ready-seed-conveyor.png");
	bottom: 231px;
	height: 495px;
	right: 678px;
	position: absolute;
	width: 56px;
	z-index: 2;
	transform: rotate(35deg);
}
.overlap {
	background: url("/static/img/banner_5/overlap-2.png");
	bottom: 232px;
	height: 509px;
	right: 355px;
	position: absolute;
	width: 600px;
	z-index: 4;
}
.overlap-2 {
	background: url("/static/img/banner_5/overlap.png");
	bottom: 173px;
	height: 509px;
	left: 629px;
	position: absolute;
	width: 600px;
	z-index: 5;
}
.black-seeds-from-conveyor {
	animation: seeds-from-conveyor 5s linear infinite;
	background: url("/static/img/banner_5/seeds-top.png");
	top: 262px;
	height: 74px;
	left: 1014px;
	position: absolute;
	width: 45px;
	z-index: 3;
	transform: rotate(294deg);
}
.white-seeds-from-conveyor {
	animation: seeds-from-conveyor 2s linear infinite;
	background: url("/static/img/banner_5/seeds-white.png");
	top: 199px;
	height: 87px;
	right: 470px;
	position: absolute;
	width: 45px;
	z-index: 3;
	transform: rotate(295deg);
}
@keyframes seeds-from-conveyor {
	from {background-position: 0}
	to {background-position: 0 -1000%;}
}
.control-panel {
	background: url("/static/img/banner_5/control-panel.png");
	bottom: -52px;
	height: 807px;
	left: 44px;
	position: absolute;
	width: 769px;
	z-index: 4;
}
.control-panel-people {
	background: url("/static/img/banner_5/control-panel-people.png");
	bottom: -52px;
	height: 299px;
	left: 519px;
	position: absolute;
	width: 96px;
	z-index: 6;
}
.control-panel-people-hand {
	animation: clickButton 5s linear infinite;
	background: url("/static/img/banner_5/control-panel-people-hand.png");
	bottom: 43px;
	height: 150px;
	left: 486px;
	position: absolute;
	width: 73px;
	z-index: 5;
	transform: rotate(360deg)
}
@keyframes clickButton {
	10% {transform: rotate(320deg);left: 530px; bottom: 41px;}
	20% {transform: rotate(285deg);left: 555px; bottom: 65px;}
	40% {transform: rotate(225deg);left: 550px; bottom: 106px;}
	60% {transform: rotate(285deg);left: 555px; bottom: 65px;}
	80% {transform: rotate(320deg);left: 530px; bottom: 41px;}
	100% {transform: rotate(360deg);left: 486px; bottom: 43px;}
}
.control-panel-button {
	animation-delay: 2.5s;
	animation: useBtn 5s infinite;
	background: url("/static/img/banner_5/control-panel-button.png");
	bottom: 211px;
	height: 25px;
	left: 615px;
	position: absolute;
	width: 26px;
	z-index: 4;
}
@keyframes useBtn {
	20% {opacity: 0;}
	100% {opacity: 1;}
}
.controlling-people-hand {
	animation: armMovement 5s linear infinite;
	background: url("/static/img/banner_5/controlling-people-hand.png");
	top: 168px;
	height: 84px;
	right: 355px;
	position: absolute;
	width: 50px;
	z-index: 4;
}
.controlling-people-strap {
	background: url("/static/img/banner_5/controlling-people-strap.png");
	top: 164px;
	height: 81px;
	right: 355px;
	position: absolute;
	width: 9px;
	z-index: 5;
}
@keyframes armMovement {
	10% {transform: rotate(1deg);right: 355px; top: 168px;}
	40% {transform: rotate(35deg);right: 368px; top: 151px;}
	60% {transform: rotate(1deg);right: 355px; top: 168px;}
}
.finished-product {
	animation: seeds-from-conveyor 2s linear infinite;
	background: url("/static/img/banner_5/finished-product.png");
	bottom: 216px;
	height: 83px;
	width: 42px;
	right: 355px;
	position: absolute;
	transform: rotate(155deg);
	z-index: 3;
}
.bag-overlap {
	background: url("/static/img/banner_5/bag-overlap.png");
	bottom: 116px;
	height: 119px;
	width: 108px;
	right: 299px;
	position: absolute;
	z-index: 5;
}

.mobile-banners__item > img {
	display: block;
	height: auto;
	margin: 0 auto;
	max-width: 100%;
}

@media (min-width: 1024px) {
	.front-page .header {
		left: 0;
		position: fixed;
		right: 0;
		top: 0;
		z-index: 10;
	}

	.blocks {
		display: block;
	}

	.mobile-banners {
		display: none;
	}
}