@font-face{
	font-family:'Neirizi';
	//font-display: block;
	src: local('Arvo'),  
	url('/fonts/me_quran.eot') format('embedded-opentype'),
	url('/fonts/me_quran.ttf') format('truetype')
	}
@font-face{
	font-family:'Vazir';
	//font-display: block;
	src: local('Arvo'),  
	url('/fonts/Vazir-FD.eot') format('embedded-opentype'),
	url('/fonts/Vazir-FD.ttf') format('truetype')
}
.tab-pane{
	line-height: 2.5em;
}

.body-innerwrapper
{
overflow-y: hidden;

}
div#stage{
//perspective: 600px;
}
.stage_div {
	float:right;
	margin:0 auto;
transition-property: transform;
transition-duration: 0.7s;
transform: translate3d(0,0,0);
   background: rgba(255, 181, 127, 0.96);
    width: 100px;
    padding: 10px;
box-reflect:below 15px
gradient(linear, left top, left bottom, from(transparent),
color-stop(0.7, transparent), to(#ff0000));
}
.stage_div:hover {
transition-property: transform;
transition-duration: 0.7s;
transform: matrix3d(0.3, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 200, 1);
}
.hidden{
//visibility:none;
}
.intro_item{
   // width: 33.33%;
    padding: 2px;
    height: 200px;
	width:100%;
    max-width: 350px;
    text-align: center;
    //margin-left: 20px;
	//margin-top: 30px;
    /* border: 1px solid; */
    border-radius: 20px;
    box-shadow: 1px 1px 4px 2px #0f1910;
    transition: all 0.2s ease-in-out;
    position: relative;
	margin: 0 auto;
}
.intro_item:hover{
background:black;
color:white;
text-decoration:none;
}
#intro_page{
	//padding:20px;
}
#intro_page>a:hover{
	text-decoration:none;
}


.myhidden{
	display:none;
	
}
.card-overlay {
    position: absolute;
    top: 0;
    background-color: rgba(8, 44, 48, 0.4);
    width: 100%;
    height: 140px;
    color: white;
    text-align: center;
}
.card-name{
    width: 100%;
    /* border: none; */
    height: 100%;
    font-family: irannastaliq;
    font-size: 42px;
    /* padding: 85px; */
    line-height: 200px;
    vertical-align: middle;
    color: white;
    border-radius: 20px;
    background: rgba(13, 16, 13, 0.45);
	text-shadow: 1px 1px 2px black;
    position: relative;
	transition: all 0.2s ease-in-out;
	
    /* margin: 0 0 0 100%; */
}
.card-name:hover {
    background: rgba(255, 255, 255, 0.14);
    color: black;
    text-shadow: 1px 1px 4px white;    
	//font-size: 30pt;
}
.link_box1{
	width:33.333%;
	padding-left:20px;
	padding-bottom:20px;
	float:right;
}
.link_box1:hover{
	text-decoration:none;
}
.link_box2{
	width:100%;
	padding-left:20px;
	padding-bottom:20px;
	float:right;
}
.link_box2:hover{
	text-decoration:none;
}
.links_container{
	margin-left:-20px;
	margin-top: 30px;
}
#intro_page > div.links_container >div.link_box1 a:hover, 
#intro_page > div.links_container >div.link_box2 a:hover{
	text-decoration:none !important;
}
#gift_images > a> img {
    width: 200px;
    float: right;
    margin: 20px;
   margin-left: 50%;
    margin-right: -100px;
	transition:all 0.1s linear;
}
#gift_images > a> img:hover {
    filter: saturate(2);
}
#gift_images{
padding-right:50%;
}
#sp-main-body{
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
    min-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
	
}



.loader {
  font-size: 10px;
  margin: 10px auto;
  text-indent: -9999em;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #ffffff;
  background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
  background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
  background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
  background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
  background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
  position: relative;
  -webkit-animation: load3 0.8s infinite linear;
  animation: load3 0.8s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
.loader:before {
  width: 50%;
  height: 50%;
  background: #ffffff;
  border-radius: 100% 0 0 0;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
}
.loader:after {
  background: black;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  content: '';
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}


.loaderbg{
	position: fixed;
    top: 0;
    right: 0;
	bottom:0;
	left:0;
    //background: #020058;
	background: rgba(60,0,255,1);
background: -moz-linear-gradient(top, rgba(60,0,255,1) 0%, rgba(0,12,92,1) 22%, rgba(0,0,0,1) 43%, rgba(0,51,255,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(60,0,255,1)), color-stop(22%, rgba(0,12,92,1)), color-stop(43%, rgba(0,0,0,1)), color-stop(100%, rgba(0,51,255,1)));
background: -webkit-linear-gradient(top, rgba(60,0,255,1) 0%, rgba(0,12,92,1) 22%, rgba(0,0,0,1) 43%, rgba(0,51,255,1) 100%);
background: -o-linear-gradient(top, rgba(60,0,255,1) 0%, rgba(0,12,92,1) 22%, rgba(0,0,0,1) 43%, rgba(0,51,255,1) 100%);
background: -ms-linear-gradient(top, rgba(60,0,255,1) 0%, rgba(0,12,92,1) 22%, rgba(0,0,0,1) 43%, rgba(0,51,255,1) 100%);
background: linear-gradient(to bottom, rgba(60,0,255,1) 0%, rgba(0,12,92,1) 22%, rgba(0,0,0,1) 43%, rgba(0,51,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3c00ff', endColorstr='#0033ff', GradientType=0 );
width: 100%;
    height: 100%;
    z-index: 199999;
	padding-top: 60px;
}
@-webkit-keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


@-webkit-keyframes myspin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes myspin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@media screen and (max-width:768px){
	.link_box1{
		width: 100%;
		margin 10px auto;
	}
}

@media screen and (min-width:768px) and (max-width:870px){
	.link_box1{
		width: 50%;
		margin 10px auto;
	}
}

main {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #090707;
}

.dank-ass-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dank-ass-loader .myrow {
  display: flex;
}

.myarrow {
  width: 0;
  height: 0;
  margin: 0 -4px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 14.4px solid #fda000;
  animation: blink 1.5s infinite;
  filter: drop-shadow(0 0 9.6px #fda000);
}
.myarrow.down {
  transform: rotate(180deg);
}
.myarrow.outer-1 {
  animation-delay: -0.08333333s;
}
.myarrow.outer-2 {
  animation-delay: -0.16666667s;
}
.myarrow.outer-3 {
  animation-delay: -0.25s;
}
.myarrow.outer-4 {
  animation-delay: -0.33333333s;
}
.myarrow.outer-5 {
  animation-delay: -0.41666667s;
}
.myarrow.outer-6 {
  animation-delay: -0.5s;
}
.myarrow.outer-7 {
  animation-delay: -0.58333333s;
}
.myarrow.outer-8 {
  animation-delay: -0.66666667s;
}
.myarrow.outer-9 {
  animation-delay: -0.75s;
}
.myarrow.outer-10 {
  animation-delay: -0.83333333s;
}
.myarrow.outer-11 {
  animation-delay: -0.91666667s;
}
.myarrow.outer-12 {
  animation-delay: -1s;
}
.myarrow.outer-13 {
  animation-delay: -1.08333333s;
}
.myarrow.outer-14 {
  animation-delay: -1.16666667s;
}
.myarrow.outer-15 {
  animation-delay: -1.25s;
}
.myarrow.outer-16 {
  animation-delay: -1.33333333s;
}
.myarrow.outer-17 {
  animation-delay: -1.41666667s;
}
.myarrow.outer-18 {
  animation-delay: -1.5s;
}
.myarrow.inner-1 {
  animation-delay: -0.25s;
}
.myarrow.inner-2 {
  animation-delay: -0.5s;
}
.myarrow.inner-3 {
  animation-delay: -0.75s;
}
.myarrow.inner-4 {
  animation-delay: -1s;
}
.myarrow.inner-5 {
  animation-delay: -1.25s;
}
.myarrow.inner-6 {
  animation-delay: -1.5s;
}

@keyframes blink {
  0% {
    opacity: 0.1;
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0.1;
  }
}

.progress 
{
 position: fixed;
 left: 0px;
 top: 0px;
 width: 100%;
 height: 100%;
 z-index: 9999;
 background-color: #F2F2F2;
}
.bar 
{ 
  background-color: #819FF7; 
  width:0%; 
  height:5px; 
  border-radius: 3px; 
}
.percent 
{ 
  position:absolute; 
  display:inline-block; 
  top:3px; 
  left:48%; 
}
#wrapper
{
  width:200px;
  padding:0px;
  margin:0px auto;
  font-family:helvetica;
  text-align:center;
}