*{margin:0;	padding:0;}
body{
	font-size:14px;
	color:#515151;
	background:url('bg.jpg') no-repeat center top #e5e5e5;
	font-family:'kufi',tahoma, Helvetica, sans-serif;
	direction:rtl;
height:100vh;
overflow:hidden;
}
@font-face {
    font-family: 'kufi';
    src: url('/font/DroidArabicKufi.eot') format('eot'),
    url('/font/DroidArabicKufi.woff') format('woff'),
    url('/font/DroidArabicKufi.ttf') format('truetype');
    font-weight: normal;
}
#head{height:20vh;margin-top:30px;width:100%;}
h2{font-size:20px;font-weight:normal;font-family:'kufi',tahoma;float:right;margin-right:20px;width:50%}
h2 a{color:#222;}
h2 a:hover{color:#299ee7;text-decoration:none;}
#logoh1{background:url('logo.png') no-repeat;text-indent:-9999px;width:45%;height:80px;margin-left:5px;float:left;}
#page{	width:98%;height:100%;	margin:0 auto;	position:relative;}
#phoneCarousel{margin:35vh auto 0 auto;width:100%;height:30vh;}
#phoneCarousel .arrow{
	/* The two arrows */
	width:44px;
	height:88px;
	background:url('arrows.png') no-repeat;
	position:absolute;
	top:50%;
	margin-top:-22px;
	left:2%;
	cursor:pointer;
}
#phoneCarousel .next{background-position:right top;	left:auto;	right:2%;}
#phoneCarousel .arrow:hover{	background-position:left bottom;}
#phoneCarousel .next:hover{	background-position:right bottom;}




#stage{
	/* The stage contains the animated phone images */
	right:10%;
	position:absolute;
	width:80%;
}

#stage img{
	/* Hiding all the images by default */
	display:none;
	width:400px;
	height:425px;
	transition:all 0.5s;
}
#stage img:hover{
	/* Hiding all the images by default */
             transform:scale(1.1,1.1);
             transition:all 0.5s;
}

#stage .default{
	/*	This class is applied only to the iphone img by default
		and it is the only one visible if JS is disabled */
	display:block;
	left:30%;
	margin-left:-135px;
	position:absolute;
}

#stage .animationReady{
	/* This class is assigned to the images on load */
	display:block;
	position:absolute;
	top:0;
	left:0;
}

.text{	margin-top:70px;width:700px;}

.text p,
.text h3{
	padding-bottom:15px;
	line-height:1.4;
	text-align:justify;
}

.text h3{	font-size:30px;}
.text p{	font-size:20px;}

.thumb{	float:left;margin-right:40px;}

.availableAppStore{float:right;}

#thanks{
	color:#aaa;
	font-size:12px;
	text-align:center;
	padding-top:10px;
	padding-bottom:10px;
	border-top:6px solid #0067a2;
	background:rgba(255,255,255,0.4);
	position:relative;
	bottom:0;
	width:100%;
}
#thanks a{ color: #888;}

a, a:visited {
	text-decoration:none;
	outline:none;
}

a:hover{	text-decoration:underline;}
a img{	border:none;}
.footer-lg-link{padding:2px 3px;color:#666;}
.footer-lg-link active{background:#00559c;color:#fff;}
.footer-lg-link inactive{background:#eee;color:#666;border:1px #ccc solid;}

@media screen and (max-width:980px){
h2{font-size:90%;}
#head{height:15vh;margin-top:10px;width:100%;}
#phoneCarousel{margin:30vh auto 0 auto;height:40vh;}
#stage{width:60%;right:30%;}
#stage img{width:200px !important;height:217px !important;margin-left:0px !important;}
}
@media screen and (max-width:650px){
#logoh1{width:48%;}
h2{font-size:90%;width:48%;margin-right:10px;margin-top:30px;}
#head{height:15vh;margin-top:10px;}
#phoneCarousel{margin:30vh auto 0 auto;width:80%;}
#stage{width:40%;right:0%;}
#stage img{margin-left:20px !important;}
}

@media screen and (max-width:480px){
#logoh1{width:60%;}
h2{font-size:90%;width:35%;}
#head{height:15vh;margin-top:10px;width:100%;}
#phoneCarousel{margin:30vh auto 0 auto;width:80%;}
#stage{width:40%;right:0%;}
#stage img{width:180px !important;height:196px !important;margin-left:0px !important;}
}