@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

* { margin:0; padding:0; border:0; box-sizing: border-box;transition:0.2s;}
:focus { outline:0 none;}
body { width:100%; background-color: #1E1021; color:#fff;font-family: 'Roboto', sans-serif;}
ul,li {list-style:none;}
.wrapper {
	max-width:1440px; width:100%; padding:0 15px;margin:0 auto; position:relative; height:100%; display:flex;
	background: url(../images/fon2.webp) no-repeat right bottom / 962px auto ;
	align-items: center;
	z-index: 1;
}

.fon {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
	background: url(../images/fon.webp) no-repeat center / cover;
}

.box1 {
	background: rgba(0, 0, 0, 0.35);
	backdrop-filter: blur(15px);
	border-radius:30px; 
	max-width:540px;
	max-height: 550px;
	padding:30px 80px 45px 80px;
	height: 100%;
	width: 100%;
}
.box-1-1 {
	position:absolute;
	text-align:center;
	top:-80px;
	left: 50%;
	margin: 0 0 0 -83px;
}
/*.box-1-1::before {
	content:"";
	background: url(../images/box-1-1.svg) no-repeat center / auto ;
	width:16px;
	height:23px;
	position:absolute;
	display:block;
	bottom: -45px;
	left: 50%;
	margin: 0 0 0 -8px;
}*/
.box-1-1 .box-1-1-1 {
	font-size:32px;
	font-weight:900;
}
.box-1-1 .box-1-1-1 span {color:#50BF4D;}
.box-1-1 .box-1-1-2 {
	font-size:20px;
	font-weight:600;
	position: relative;
}
.box-1-1 .box-1-1-2::before {
	content:"";
	height:1px;
	background-color:#fff;
	display:block;
	position:absolute;
	left:0;
	top:12px;
	width:13px;
}
.box-1-1 .box-1-1-2::after {
	content:"";
	height:1px;
	background-color:#fff;
	display:block;
	position:absolute;
	right:0;
	top:12px;
	width:13px;
}
.box-1-2 {
	text-align:center;
	margin:-10px 0 15px 0;
}
.box-1-3 {
	text-align:center;
	font-size:47px;
	line-height:48px;
	font-weight:900;
	margin:0 0 15px 0;
}
.box-1-4 {
	text-align:center;
	background: linear-gradient(97.69deg, rgba(250, 232, 47, 1), #FF7C42);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
/*	text-shadow: 0px 12px 22px rgba(0, 0, 0, 0.55);*/
	font-size:52px;
	line-height:53px;
	font-weight:900;
	font-family: "Montserrat", serif;
	margin: 0 0 10px 0;
}
.box-1-5 {
	color: #F8E734C7;
	font-size:28px;
	font-weight:900;
	text-align:center;
	position:relative;
	margin: 0 0 35px 0;
}
.box-1-5::before {
	content:"";
	height:1px;
	background-color:#FCCB0066;
	width:107px;
	position:absolute;
	left: 0;
	top: 17px;
}
.box-1-5::after {
	content:"";
	height:1px;
	background-color:#FCCB0066;
	width:107px;
	position:absolute;
	right: 0;
	top: 17px;
}
.box-1-6 {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 78px;
	background: url(../images/box-1-4.svg) no-repeat center top / 380px;
}
.box-1-6 .box-1-6-1 {
	color: #2D1010;
	font-size:20px;
	font-weight:900;
	height:100%;
	padding:0 30px;
	border-right:1.3px dashed;
	align-content: center;
}
.box-1-6 .box-1-6-2 {
	color: #2D1010;
	font-size:34px;
	font-weight:900;
	height:100%;
	padding:0 30px;
	align-content: center;
}
.box-1-7 {
	font-size:42px;
	font-weight:900;
	height:105px;
	width:540px;
	align-content:center;
	text-transform: uppercase;
	text-decoration: none;
	color:#fff;
	border: 1px solid #787FDF;
	backdrop-filter: blur(45px);
	box-shadow: 0px 44px 54px 0px #1C71CF59;
	background: linear-gradient(90deg, #2064B0 0%, #1F27AF 100%);
	border-radius:30px;
	display: block;
	text-align: center;
	position: absolute;
	bottom: -114px;
	left: 0;
	text-shadow: 0px 8px 14px #00000040;
	animation: pulse-animation 1.5s infinite;
}
.box-1-7:hover {transform: scale(1.1);}
.box-1-7::before {
	content:"";
	display:block;
	background: url(../images/box-1-7.svg) no-repeat left top / 100% ;
	width:22px;
	height:20px;
	position: absolute;
	left: 45px;
	top: 40px;
}
@keyframes pulse-animation {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.05);
	}
	100% {
		transform: scale(1);
	}
}
.box-1-8 {
	text-align:center;
	
}
.box-1-8 .book-of-ra {
	max-width:270px;
	margin: 20px 0 0 0;
}


.img1,.img2,.img3,.img4,.img5,.img6,.img7,.img8,.img9,.img10,.img11 {position: absolute;z-index: 2;}
.img1 {height:550px; left:0; top:0;z-index: 0;}
.img2 {width:686px; top:0; right:0;animation:alert 10s linear 0s infinite normal;}
.img3 {width:686px; bottom:0; right:10%;animation:alert2 10s linear 0s infinite normal;}

.img4 {width:140px; top:0; left:35%;animation:alert2 10s linear 0s infinite normal;}
.img5 {width:145px; top:8%; left:50%;animation:alert 10s linear 0s infinite normal;}
.img6 {width:145px; top:15%; left:5%;}
.img7 {width:140px; top:30%; left:38%;z-index: 0;animation:alert2 10s linear 0s infinite normal;}
.img8 {width:145px; top:50%; left:49%;animation:alert 10s linear 0s infinite normal;}
.img9 {width:140px; bottom:24%; left:2%;z-index: 0;animation:alert2 10s linear 0s infinite normal;}
.img10 {width:145px; bottom:25%; right:5%;animation:alert2 10s linear 0s infinite normal;}
.img11 {width:145px; bottom:5%; right:20%;animation:alert 10s linear 0s infinite normal;}
.book-fon {display:none;}
@-webkit-keyframes alert {
  0%{
	-webkit-transform: translateX(20px);
	transform: translateX(20px);
  }
  50%{
	-webkit-transform: translateX(-20px);
	transform: translateX(-20px);
  }
  100%{
	-webkit-transform: translateX(20px);
	transform: translateX(20px);
  }
}
@-webkit-keyframes alert2 {
  0%{
	-webkit-transform: translateX(-20px);
	transform: translateX(-20px);
  }
  50%{
	-webkit-transform: translateX(20px);
	transform: translateX(20px);
  }
  100%{
	-webkit-transform: translateX(-20px);
	transform: translateX(-20px);
  }
}
@media screen and (max-width: 1440px) { 
	.box1 {max-width: 480px;max-height: 440px;padding: 20px 60px 30px 60px;}
	.logo {width: 195px;}
	.box-1-1::before {bottom: -30px;}
	.box-1-2 {margin: 0 0 15px 0;}
	.box-1-3 {font-size: 32px;line-height: 34px;margin: 0 0 5px 0;}
	.box-1-4 {font-size: 37px;margin: 0;}
	.box-1-5 {font-size: 24px;margin: 0 0 15px 0;}
	.box-1-6 {height: 57px;background: url(../images/box-1-4.svg) no-repeat center top / 280px;}
	.box-1-6 .box-1-6-1 {font-size: 14px;padding: 0 20px;}
	.box-1-6 .box-1-6-2 {font-size: 24px;padding: 0 20px;}
	.box-1-7 {width: 480px;}
	.box-1-8 .book-of-ra {max-width: 200px;margin: 30px 0 0 0;}
	
}
@media screen and (max-width: 1280px) { 
	.wrapper {background: url(../images/fon2.webp) no-repeat right -200px bottom / 962px auto;}
}
@media screen and (max-width: 768px) { 
	.wrapper {background: none;justify-content: center;}
	.box-1-5 {
		font-size: 18px;
		width: 260px;
		margin: 0 auto 15px auto;
	}
	.box-1-5::before {top:10px; width:73px;}
	.box-1-5::after {top:10px; width:73px;}
	.box-1-6 {
		height: 52px;
		background: url(../images/box-1-4.svg) no-repeat center top / 260px;
		margin:0 0 15px 0;
	}
	.box-1-7 {
		position: relative;
		bottom: auto;
		left: auto;
		width: 260px;
		margin: auto;
		font-size: 18px;
		height:50px;
		border-radius:13px;
	}
	.box-1-7::before {
		width: 10px;
		height: 9px;
		left: 25px;
		top: 20px;
	}
	
	.img4 {left:-40px;top:-17px;width: 113px;}
	.img2 {width: 480px;top: 0;right: -250px;}
	.img6 {width: 130px;top: 22%;left: auto;right: -50px;}
	.img3 {bottom: -80px;right: 50%;margin: 0 -383px 0 0;z-index: 0;}
	.img5,.img11 {display:none;}
	.img8 {top: 70%;left: auto;right: -60px;z-index: 0;}
	.img9 {z-index: 1;left: -50px;}
	.img10 {width: 145px;bottom: -80px;right: 50%;}
	
	.box1 {max-height: 600px; padding: 20px 60px 263px 60px;}
	.box-1-8 .book-of-ra {position: absolute;bottom: 17px;right: 17px;}
	.box-1-1 {margin: 0 0 0 -70px;top: -60px;}
	.box-1-1 .box-1-1-1 {font-size: 27px;}
	.box-1-1 .box-1-1-2 {font-size:16px;}
	.box-1-1::before {background: url(../images/box-1-1.svg) no-repeat center / auto 19px;height: 19px;}
	.box-1-3 {margin: 0 auto 0 auto;width: 260px;}
	.book-fon {display:block;height: 200px;position: absolute;bottom: 0;left: 50%;margin: 0 0 0 -133px;z-index: -1;}
}
@media screen and (max-width: 480px) { 
	.box1 {padding: 20px 15px 263px 15px;}
}
