:root{
	--s_f_bg1:radial-gradient(circle, rgba(255,113,142,1) 36%, rgba(221,63,93,1) 100%); 
	--s_f_bg2:radial-gradient(circle, rgba(255,255,255,1) 36%, rgba(160,160,160,1) 100%); 
	--s_f_bg3:linear-gradient(45deg, rgba(39, 153, 37, 1) 0%, rgba(39, 153, 37, 1) 25%, rgba(67, 186, 65, 1) 25%, rgba(67, 186, 65, 1) 50%, rgba(39, 153, 37, 1) 50%, rgba(39, 153, 37, 1) 75%, rgba(67, 186, 65, 1) 75%, rgba(67, 186, 65, 1) 100%);
	--s_f_bg4:linear-gradient(45deg, rgba(150, 30, 30, 1) 0%, rgba(150, 30, 30, 1) 25%, rgba(212, 19, 19, 1) 25%, rgba(212, 19, 19, 1) 50%, rgba(150, 30, 30, 1) 50%, rgba(150, 30, 30, 1) 75%, rgba(212, 19, 19, 1) 75%, rgba(212, 19, 19, 1) 100%);
	--s_f_border-radius:20px; 
	--s_f_color1:rgba(255,255,255,1);
}
.s_f_loading{
	position:absolute;
	width:100%;
	height:100%;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	border-radius:var(--s_f_border-radius);
	background:var(--s_f_bg1);
	z-index:300;
}
.s_f_loading_ball{
	position:absolute;
	width:15px;
	height:15px;
	border-radius:50%;
	top:50%;
	left:50%;
	background:var(--s_f_bg2);
	animation:s_f_bounce infinite;
  animation-timing-function: cubic-bezier(.5, 0.05, 1, .5);
	animation-duration:0.5s;
	animation-direction:alternate;
}
.s_f_loading_ball1{
	left:calc(50% - 23px);
	animation-duration:0.7s;
}
.s_f_loading_ball2{
	animation-duration:0.5s;
}
.s_f_loading_ball3{
	left:calc(50% + 23px);
	animation-duration:0.6s;
}
.s_f_box1{
	color:var(--s_f_color1);
	font-size:24px;
	width:90%;
	max-width:500px;
	margin-bottom:20px;
	text-align:center;
}
.s_f_box2{
	color:var(--s_f_color1);
	font-size:18px;
	width:90%;
	max-width:500px;
	text-align:center;
}
.s_f_box3{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
}
.s_f_box4{
	width:6rem;
	height:6rem;
	object-fit:cover;
	object-position:center;
	border-radius:50%;
	margin-bottom:10px;
}
.s_f_box5{
	display:flex;
	width:100%;
}
.s_f_success{
	position:absolute;
	width:100%;
	height:100%;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	border-radius:var(--s_f_border-radius);
	z-index:500;
	justify-content:center;
	align-items:center;
	display:flex;
	flex-wrap:wrap;
}
.s_f_success::before{
	top:0;
	left:0;
	width:100%;
	height:100%;
	content:'';
	position:absolute;
	background:var(--s_f_bg3);
  background-size:300px 300px;
  background-repeat:repeat;
  animation:s_f_stripe_animation 6s linear infinite;
	filter:blur(5px);
	border-radius:var(--s_f_border-radius);
	z-index:0;
}
.s_f_error{
	position:absolute;
	width:100%;
	height:100%;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	border-radius:var(--s_f_border-radius);
	z-index:500;
	justify-content:center;
	align-items:center;
	display:flex;
	flex-wrap:wrap;
}
.s_f_error::before{
	top:0;
	left:0;
	width:100%;
	height:100%;
	content:'';
	position:absolute;
	background:var(--s_f_bg4);
  background-size:300px 300px;
  background-repeat:repeat;
  animation:s_f_stripe_animation 6s linear infinite;
	filter:blur(5px);
	border-radius:var(--s_f_border-radius);
	z-index:0;
}
@keyframes s_f_bounce{
	from {
		-webkit-transform:translate3d(0,-40px,0);
		transform:translate3d(0,-40px,0);
		box-shadow:0 70px 15px -1px rgba(0,0,0,0.3);
	}
	to {
		-webkit-transform:translate3d(0,0,0);
		transform:translate3d(0,0,0);
		box-shadow:0 0 5px 0 rgba(0,0,0,0.5);
	}
}
@keyframes s_f_stripe_animation{
  0%{
    background-position:0 0;
  }
  100% {
    background-position:0 300px;
  }
}