:root{
   --bgColLight: #fafafa;
   --bgColLighty: #dadada;
   --bgColDark: #151515;
   --bgColDarkey:#252525;
   --purpDark: #691156;
   --purpLight: #8d608c;
   --blueDark: #19B5FE;
   --blueLight:#89C4F4;
   --yellow: yellow;
   --green: rgb(0, 42, 43);
   
}

@font-face {
	font-family: IRANSans;
	font-style: normal;
	font-weight: bold;
	src: url('../fonts/eot/IRANSansWeb_Bold.eot');
	src: url('../fonts/eot/IRANSansWeb_Bold.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
		 url('../fonts/woff2/IRANSansWeb_Bold.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
		 url('../fonts/woff/IRANSansWeb_Bold.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
		 url('../fonts/ttf/IRANSansWeb_Bold.ttf') format('truetype');
}
@font-face {
	font-family: IRANSans;
	font-style: normal;
	font-weight: normal;
	src: url('../fonts/eot/IRANSansWeb.eot');
	src: url('../fonts/eot/IRANSansWeb.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
		 url('../fonts/woff2/IRANSansWeb.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
		 url('../fonts/woff/IRANSansWeb.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
		 url('../fonts/ttf/IRANSansWeb.ttf') format('truetype');
}
@font-face {
	font-family: IRANSans;
	font-style: normal;
	font-weight: 900;
	src: url('../fonts/eot/IRANSansWeb_Black.eot');
	src: url('../fonts/eot/IRANSansWeb_Black.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
		 url('../fonts/woff2/IRANSansWeb_Black.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
		 url('../fonts/woff/IRANSansWeb_Black.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
		 url('../fonts/ttf/IRANSansWeb_Black.ttf') format('truetype');
}
* {
    text-decoration: none;
	list-style: none;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0;
}
body,textarea,input{
	font-family: 'IRANSans' !important;
}

.pereng{
	display: none !important;
}
.per{
	direction: rtl;
	text-align-last: right;
}
.eng{
	text-align-last: left;
}
main{
	padding: 6em 5em 5em 5em;
	overflow: hidden; 
	background-color: var(--bgColLight);
}
main.dark{
    background-color: var(--bgColDark);
}

body{
    background: var(--bgColLight);
}
body.dark{
    background: var(--bgColDark);
}


/* loading */
.loadingWhole{
	width: 100vw;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--bgColLight);
	position: fixed;
	overflow: hidden;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1000;

}
.loadingAnimation{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.loadingWhole svg{
	width: 6em;
	height: 10em;
	position: relative;
}
.loadingWhole.dark{
	background-color: var(--bgColDark);
}

.stls0{
	fill: var(--bgColDark);
}
.stlsLoading0.dark{
	fill: var(--bgColLight);
}
.stlsLoading0{
	fill: var(--blueDark);
}
.stls1 {
	fill: #ff0000;
}

.stls3 {
	fill: #0000C8;
}

.stls2 {
	fill: #00C800;
}
#loadingText span{
	color: var(--bgColDark);
	font-size: 0.7em;
	font-weight: bold;
	margin: 0 1em 0 1em;
	opacity: 0%;
	animation: spanimate 2s linear infinite;
}
#loadingText.dark span{
	color: var(--bgColLight);
}
#loadingText{
	width: 10em;
	height: 3em;
	display: flex;
	justify-content: center;
	align-items: center;
}
@keyframes spanimate{
	0%{
		opacity: 1;
		transform: rotate(-10deg) scale(1);
	}5%{
		transform: rotate(10deg);
	}10%{
		transform: rotate(-10deg);
	}15%{
		transform: rotate(10deg);
	}20%{
		transform: rotate(-10deg);
	}25%{
		transform: rotate(10deg);
	}30%{
		transform: rotate(-10deg) scale(1.1);
	}35%{
		transform: rotate(10deg);
	}40%{
		transform: rotate(-10deg);
	}45%{
		transform: rotate(10deg);
		opacity: 1;
	}50%{
		transform: rotate(-10deg) scale(0.9);
	}55%{
		transform: rotate(10deg);
	}60%{
		transform: rotate(-10deg);
		opacity: 0%;
	}65%{
		transform: rotate(10deg);
	}70%{
		transform: rotate(-10deg);
	}75%{
		transform: rotate(10deg) ;
	}80%{
		transform: rotate(-10deg);
	}85%{
		transform: rotate(10deg);
	}90%{
		transform: rotate(-10deg);
	}97%{
		transform: rotate(10deg);
	}100%{
		transform: rotate(-10deg);
		opacity: 0%;
	}
}

.fadeIn {
	animation: fadeIn 0.7s;
  }
  
  @keyframes fadeIn {
	0% {
	  opacity: 0;
	}
  
	100% {
	  opacity: 1;
	}
  }

@media screen and (max-width: 768px){
	main{
		padding: 6em 3em 2em 3em;
		overflow: hidden;
	}
}