/* ========= INFORMATION ============================
	- document:  WP Coder!
	- author:    Dmytro Lobov 
	- url:       https://wow-estore.com/
==================================================== */
body {position: relative; height: 100vh; font-family: 'Cinzel', serif; font-size: 16px;}

.company{
	background-color:#fffafa;
	display:none;
}

.company_title{
	font-weight:bold;
	font-size:40px;
	text-align:center;
}



.scroll_up {
  transition: 0.8s ease-in-out;
  transform: translateY(30px);

}
.scroll_up.on {
  transform: translateY(0);
  opacity: 1.0;
}

.company_information {
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 100%;
	border: none;
}

.gmap {
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
}
.gmap iframe {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}

.company_char{
	text-align:center;
	width:100%;
}

.company_char img{
	width: 30%;
	height:30%;
}


.soap_wrap {
	position: relative;
	font-weight:bold;
	margin-top: -80px;
}
.soap {
	position: absolute;
	text-align:center;
	left: 240px;
	top: 50px;
	width: 250px;
	height: 250px;
	border-radius: 50% 46% 48% 44%;
	overflow: hidden;
	background: radial-gradient(at 46% 54%, transparent 50%, rgba(2, 172, 253,0.3) 70%, transparent 100%) 50% 50% no-repeat;
	animation: soap 10s 0s ease-in-out infinite;
	z-index: 1;
}
.soap::before{
	content: "";
	position: absolute;
	right: -10%;
	bottom: -10%;
	width: 60%;
	height: 60%;
	border-radius: 60% 0;
	background: radial-gradient(at 0 0, rgba(0, 130, 255, 0.3) 40%, rgba(255, 154, 204, 0.7) 50%);
	transform-origin: 0 0;
	animation: soap_rotate 15s 0s ease-in-out infinite;
	filter: blur(15px);
}
.soap::after{
	content: "";
	position: absolute;
	left: -10%;
	top: -10%;
	width: 60%;
	height: 60%;
	border-radius: 20% 0;
	background: radial-gradient(at 100% 100%, rgba(255, 255, 100, 0.5) 40%, rgba(120, 255, 140, 0.7) 60%);
	transform-origin: 100% 100%;
	animation: soap_rotate 6s 0s ease-in-out infinite;
	filter: blur(15px);
}

.soap2 {
	position: absolute;
	text-align:center;
	left: calc(50% - 100px);
	top: 10px;
	width: 320px;
	height: 320px;
	border-radius: 50% 46% 48% 44%;
	overflow: hidden;
	background: radial-gradient(at 46% 54%, transparent 50%, rgba(2, 172, 253,0.3) 70%, transparent 100%) 50% 50% no-repeat;
	animation: soap 10s 0s ease-in-out infinite;
	z-index: 1;
}
.soap2::before{
	content: "";
	position: absolute;
	right: -10%;
	bottom: -10%;
	width: 60%;
	height: 60%;
	border-radius: 60% 0;
	background: radial-gradient(at 0 0, rgba(0, 130, 255, 0.3) 40%, rgba(255, 154, 204, 0.7) 50%);
	transform-origin: 0 0;
	animation: soap_rotate 15s 0s ease-in-out infinite;
	filter: blur(15px);
}
.soap2::after{
	content: "";
	position: absolute;
	left: -10%;
	top: -10%;
	width: 60%;
	height: 60%;
	border-radius: 20% 0;
	background: radial-gradient(at 100% 100%, rgba(255, 255, 100, 0.5) 40%, rgba(120, 255, 140, 0.7) 60%);
	transform-origin: 100% 100%;
	animation: soap_rotate 6s 0s ease-in-out infinite;
	filter: blur(15px);
}

.soap3 {
	position: absolute;
	text-align:center;
	right: 250px;
	top: 150px;
	width: 200px;
	height: 200px;
	border-radius: 50% 46% 48% 44%;
	overflow: hidden;
	background: radial-gradient(at 46% 54%, transparent 50%, rgba(2, 172, 253,0.3) 70%, transparent 100%) 50% 50% no-repeat;
	animation: soap 10s 0s ease-in-out infinite;
	z-index: 1;
}
.soap3::before{
	content: "";
	position: absolute;
	right: -10%;
	bottom: -10%;
	width: 60%;
	height: 60%;
	border-radius: 60% 0;
	background: radial-gradient(at 0 0, rgba(0, 130, 255, 0.3) 40%, rgba(255, 154, 204, 0.7) 50%);
	transform-origin: 0 0;
	animation: soap_rotate 15s 0s ease-in-out infinite;
	filter: blur(15px);
}
.soap3::after{
	content: "";
	position: absolute;
	left: -10%;
	top: -10%;
	width: 60%;
	height: 60%;
	border-radius: 20% 0;
	background: radial-gradient(at 100% 100%, rgba(255, 255, 100, 0.5) 40%, rgba(120, 255, 140, 0.7) 60%);
	transform-origin: 100% 100%;
	animation: soap_rotate 6s 0s ease-in-out infinite;
	filter: blur(15px);
}

.soap4 {
	position: absolute;
	text-align:center;
	left: 240px;
	top: 390px;
	width: 200px;
	height: 200px;
	border-radius: 50% 46% 48% 44%;
	overflow: hidden;
	background: radial-gradient(at 46% 54%, transparent 50%, rgba(2, 172, 253,0.3) 70%, transparent 100%) 50% 50% no-repeat;
	animation: soap 10s 0s ease-in-out infinite;
	z-index: 1;
}
.soap4::before{
	content: "";
	position: absolute;
	right: -10%;
	bottom: -10%;
	width: 60%;
	height: 60%;
	border-radius: 60% 0;
	background: radial-gradient(at 0 0, rgba(0, 130, 255, 0.3) 40%, rgba(255, 154, 204, 0.7) 50%);
	transform-origin: 0 0;
	animation: soap_rotate 15s 0s ease-in-out infinite;
	filter: blur(15px);
}
.soap4::after{
	content: "";
	position: absolute;
	left: -10%;
	top: -10%;
	width: 60%;
	height: 60%;
	border-radius: 20% 0;
	background: radial-gradient(at 100% 100%, rgba(255, 255, 100, 0.5) 40%, rgba(120, 255, 140, 0.7) 60%);
	transform-origin: 100% 100%;
	animation: soap_rotate 6s 0s ease-in-out infinite;
	filter: blur(15px);
}

@keyframes soap_rotate{
	0%{transform: rotate(0);}
	50%{transform: rotate(160deg);}
}
@keyframes soap{
	0%{transform: translateY(0);}
	50%{transform: translateY(30px);}
}

.compane_about{
	line-height: 100px;
	font-size:30px;
}

.compane_about2{
	line-height: 100px;
	font-size:25px;
}

.compane_about3{
	line-height: 80px;
	font-size:25px;
}

.compane_about4{
	line-height: 80px;
	font-size:25px;
}

@media screen and (max-width: 480px){

.company {
  display:block ;
}
	
	.company_char{
	margin: 0 auto;		
	}

.soap_wrap{
	display:none;
}
	
	.company_title{
	font-weight:bold;
	font-size:25px;
	text-align:center;
}

}

@media screen and (max-width: 900px){

.soap {
  left:10px;
	top:160px;
	width:200px;
	height:200px;
}
	
	.compane_about{
	font-size:25px;		
	}

.soap2{
	width:200px;
	height:200px;
  top: 220px;
  left: calc(50% - -160px);
}
	
	.compane_about2{
	line-height: 60px;
	font-size:25px;		
	}

.soap3{
	width:150px;
	height:150px;
  top: 210px;
}
	
	.compane_about3{
	line-height: 55px;
	}

	.soap4{
	width:150px;
	height:150px;
	left:10px;
  top: 440px;
}
	.compane_about4{
	line-height: 60px;
	}
	
}