/*************IPAD on start*******************/
@keyframes flyIn {
	0% {
		transform: translateY(-70%);
		opacity: 0;
	}
	99% {
		transform: translateY(0);
		opacity: 1;
	}
	100% {
		animation-delay: 0s;
		opacity: 1;
		animation: none;
		transition: none;
	}
}

.jumbotron-image,
.ipad {
	animation: flyIn 0.5s ease forwards;
	opacity: 0; /* Изначально скрыть элемент */
}

.ipad {
	animation-delay: 700ms;
}

.iphone1 {
	animation-delay: 600ms;
}
.iphone2 {
	animation-delay: 800ms;
}

.iphone3 {
	animation-delay: 900ms;
}

.iphone4 {
	animation-delay: 400ms;
}
/**********JUMBOTRON CONTAINER*****************/
.jumbotron_container {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
}
.jumbotron_group {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}
.jumbotron-image {
	width: 220px;
	transition: all 2s;
	position: absolute;
}

.ipad {
	z-index: 5;
	width: 400px;
}

.iphone1 {
	right: -40px;
	bottom: -70px;
}

.iphone2 {
	top: -0px;
	right: -50px;
	z-index: 6;
}

.iphone3 {
	top: -220px;
	left: 50px;
	z-index: 6;
}

.iphone4 {
	bottom: -120px;
	left: -30px;
	z-index: 5;
}

/* .jumbotron-image {
	transition: all;
	transform: translateY(0);
	opacity: 0;
} */

/* ._active.ipad {
	transition: all;
	transform: translateY(-100px);
	animation-duration: 3s;

	opacity: 0.7;
}
._active.iphone1 {
	transition: all;
	transform: translateY(-50px);
	animation-duration: 3s;
	opacity: 0.7;
}
._active.iphone2 {
	transform: translateY(-200px);
	animation-duration: 3s;
	opacity: 0.7;
}
._active.iphone3 {
	transform: translateY(-150px);
	animation-duration: 3s;
	opacity: 0.7;
}
._active.iphone4 {
	transform: translateY(-100px);
	animation-duration: 3s;
	opacity: 0.7;
}

.jumbotron-container {
	position: relative;
	height: 100%;
	overflow: hidden;
} */

/******************DEVICE*********************/

.device__box .device__gadjets {
	opacity: 0;
	transform: translateY(200px);
}
.device__box .device__gadjets._active {
	transform: translatey(0);
	opacity: 1;
}
.device__box .device__gadjets._active:nth-child(1) {
	transition: all 0.5s ease-in 0s;
}
.device__box .device__gadjets._active:nth-child(2) {
	transition: all 0.3s ease-in 0.3s;
}
.device__box .device__gadjets._active:nth-child(3) {
	transition: all 0.3s ease-in 0.6s;
}
.device__box .device__gadjets._active:nth-child(4) {
	transition: all 0.3s ease-in 0.9s;
}

/***********INTEGRATED APPROACH LEFT***********/
.integrated__approach_left,
.integrated__approach_right {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.integrated__approach_left .integrated__approach__slave__box {
	opacity: 0;
	transform: translateX(-100px);
}
.integrated__approach_right .integrated__approach__slave__box {
	opacity: 0;
	transform: translateX(100px);
}
.integrated__approach_right .integrated__approach__slave__box._active,
.integrated__approach_left .integrated__approach__slave__box._active {
	opacity: 1;
	transform: translateX(0);
}

.integrated__approach_right .integrated__approach__slave__box._active:nth-child(1),
.integrated__approach_left .integrated__approach__slave__box._active:nth-child(1) {
	transition: all 0.3s ease-in 0.3s;
}
.integrated__approach_right .integrated__approach__slave__box._active:nth-child(2),
.integrated__approach_left .integrated__approach__slave__box._active:nth-child(2) {
	transition: all 0.3s ease-in 0.6s;
}
.integrated__approach_right .integrated__approach__slave__box._active:nth-child(3),
.integrated__approach_left .integrated__approach__slave__box._active:nth-child(3) {
	transition: all 0.3s ease-in 0.9s;
}
.integrated__approach_right .integrated__approach__slave__box._active:nth-child(4),
.integrated__approach_left .integrated__approach__slave__box._active:nth-child(4) {
	transition: all 0.3s ease-in 1.2s;
}

/*******************BRAND***************************/
.brand_left {
	opacity: 0;
	transform: translateX(-100px);
}
.brand_right {
	opacity: 0;
	transform: translateX(100px);
}
.brand span._active {
	opacity: 1;
	transform: translateX(0);
}
.brand span._active:nth-child(1) {
	transition: all 0.3s ease-in 0.1s;
}
.brand span._active:nth-child(2) {
	transition: all 0.3s ease-in 0.2s;
}
.brand span._active:nth-child(3) {
	transition: all 0.3s ease-in 0.3s;
}
.brand span._active:nth-child(4) {
	transition: all 0.3s ease-in 0.4s;
}
.brand span._active:nth-child(5) {
	transition: all 0.3s ease-in 0.5s;
}
.brand span._active:nth-child(6) {
	transition: all 0.3s ease-in 0.6s;
}
.brand span._active:nth-child(7) {
	transition: all 0.3s ease-in 0.8s;
}
.brand span._active:nth-child(8) {
	transition: all 0.3s ease-in 0.9s;
}
.brand span._active:nth-child(9) {
	transition: all 0.3s ease-in 1s;
}
.brand span._active:nth-child(10) {
	transition: all 0.3s ease-in 1.1s;
}
.brand span._active:nth-child(11) {
	transition: all 0.3s ease-in 1.2s;
}
.brand span._active:nth-child(12) {
	transition: all 0.3s ease-in 1.3s;
}
.brand span._active:nth-child(13) {
	transition: all 0.3s ease-in 1.4s;
}
.brand span._active:nth-child(14) {
	transition: all 0.3s ease-in 1.5s;
}
/***************BG*********************/

/* svg {
	width: 100%;
	height: 100%;
	g {
		mix-blend-mode: darken;
	}
	polygon {
		stroke: none;
		fill: black;
	}
}

.animated-bg {
	position: fixed;
	width: 100vw;
	height: 100vh;
	z-index: -1;
} */

#bg {
	width: 100vw;
	height: 100vh;
	overflow: hidden;

	background: #000000;
}
.anim-container {
	position: fixed;
	width: 100vw;
	height: 100vh;
	z-index: -1;
}
.anim-background {
	position: absolute;
	/* background: linear-gradient(45deg, #155968, #1a5a4d, #58460d); */
	/* background: linear-gradient(217deg, #155968, rgba(255, 0, 0, 0) 70.71%),
		linear-gradient(127deg, #58460d, rgba(0, 255, 0, 0) 70.71%),
		linear-gradient(336deg, #13816b, rgba(43, 43, 95, 0) 70.71%); */
	background: #222222;
	inset: 0;
	mix-blend-mode: multiply;

	/* animation: move 5s linear infinite; */
	/* filter: contrast(1.2) brightness(0.7); */
}