/* ----------------------------------- */
/*         ___  _        _             */
/*        / _ \| | ___  (_)_ __        */
/*       | | | | |/ _ \ | | '__|       */
/*       | |_| | | (_) || | |          */
/*        \___/|_|\___(_)_|_|          */
/*                                     */
/*        Mail: animation@Olo.ir       */
/*   Designed by Olo Ads (Oloads.ir)   */
/*                                     */
/* ----------------------------------- */

/* Public style start */

html,
body{
	padding: 0;
	margin: 0;
	height: 100vh;
	overflow: hidden;
}
.main{
	display: flex;
	height: 100vh;
	cursor: pointer;
}
.main.lock{
	cursor: wait;
}
.main.lock .logo1,
.main.lock .logo2,
.loadingtext,
.loadingbar,
.site1,
.site2{
	pointer-events: none;
}
.videoplayer{
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: -1;
	object-fit: cover;
	opacity: 0;
	transition: 1s opacity;
}
.videocover{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #ffffff80;
	z-index: 0;
	opacity: 0;
	background-image: url(../videos/video.png);
}
.videoplayer.active,
.videocover.active{
	opacity: 1;
}
.logo1,
.logo2{
	width: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}
.logo1 svg,
.logo2 svg{
	position: absolute;
	transition: 1s height, 2s right, 2s left;
}
.logo1 svg{
	height: 6rem;
	right: 1rem;
}
.logo1.active svg{
	height: 8rem;
	right: 6rem;
}
.logo2 svg{
	height: 6rem;
	left: 5rem;
}
.logo2.active svg{
	height: 8rem;
	left: 10rem;
}
.logo1:hover svg{
	height: 10rem;
}
.logo2:hover svg{
	height: 13rem;
}
.hover1,
.hover2{
	position: absolute;
	transform-origin: center;
	border-radius: 100%;
	width: 17rem;
	height: 17rem;
	transform: scale(0);
	transition: 1s all;
}

.hover1{
	right: 6rem;
	border: 0.1rem solid transparent;
	animation: hover1an 4s linear infinite;
}
.hover1.active{
	border: 0.1rem solid #0095c87d;
}
.hover2{
	left: 4.5rem;
	border: 0.1rem solid transparent;
	animation: hover1an 4s linear infinite;
	animation-delay: 1s;
}
.hover2.active{
	border: 0.1rem solid #2d55a47a;
}
@keyframes hover1an {
  0% {transform: scale(0);opacity: 1;}
  50% {opacity: 1;}
  100% {transform: scale(1.5);opacity: 0;}
}
.logo1:hover .hover1{
	right: 8rem;
}
.logo2:hover .hover2{
	left: 6.5rem;
}
.site1,
.site2{
	position: absolute;
	bottom: 4rem;
	font-family: 'iranyekan';
	font-weight: 600;
	font-size: 1rem;
	direction: rtl;
	opacity: 0;
	transition: .8s all;
	background: #ffffff;
	padding: .5rem 2rem;
	border-radius: .75rem;
}
.site1{
	color: #2d55a4;
	right: 5rem;
}
.site2{
	color: #0095c8;
	left: 5rem;
}
.logo1:hover ~ .site2{
	bottom: 5rem;
	opacity: 1;
}
.logo2:hover ~ .site1{
	bottom: 5rem;
	opacity: 1;
}
.loadingbar{
	width: 20rem;
	background: transparent;
	height: .25rem;
	position: relative;
	right: 0;
	left: 0;
	margin: auto;
	bottom: 5rem;
	overflow: hidden;
}
.loadingbar::before{
	content: '';
	position: absolute;
	width: 0;
	height: 1rem;
	background: #db2424;
	transition: 1s width ease-in-out;
	left: 0;
}
.loadingbar.active::before{
	width: 100%;
}
.loadingbar.close::before{
	right: 0;
	left: auto;
}
.loadingtext{
	color: #db2424;
	position: relative;
	bottom: 6rem;
	text-align: center;
	direction: rtl;
	font-family: 'iranyekan';
	font-weight: 400;
	font-size: .9rem;
	opacity: 0;
	transition: 1s opacity;
}
.loadingtext.active{
	opacity: 1;
}
@media only screen and (max-width: 60em){
	.main {
		display: block;
	}
	.logo1,
	.logo2{
		width: 100%;
		height: 50%;
	}
	.logo1 svg,
	.logo2 svg
	{
		position: sticky;
	}
	.hover1{
		right: auto;
	}
	.hover2{
		left: auto;
	}
	.logo1 svg,
	.logo2 svg,
	.logo1.active svg,
	.logo2.active svg{
		padding: 0 0.5em;
		height: 8rem;
	}
	.logo1.active svg {
		right: auto;
		height: 8rem;
	}
	.logo2.active svg {
		left: auto;
	}
	@keyframes hover1an {
		0% {transform: scale(0);opacity: 1;}
		50% {opacity: 1;}
		100% {transform: scale(1);opacity: 0;}
	}
	.site1,
	.site2,
	.loadingtext{
		display: none;
	}
	.logo1:hover .hover1{
		right: auto;
	}
	.logo2:hover .hover2{
		left: auto;
	}
	.loadingbar {
		width: 100%;
		bottom: .25rem;
	}
}