/*----- Global -----*/
@import url('https://fonts.googleapis.com/css?family=Tomorrow|Katibeh|Lemonada&display=swap');

*{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

html{
	font-family: Circular Std, 'sans-serif';
}
.section{
	background-image: url(../images/bg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}
.landing{
	/*background-image: url(https://i.gifer.com/95CW.gif);
	background-repeat: no-repeat;
	background-size: cover;*/
	height: 100vh;
	width: 100%;
	overflow-y: hidden;
	min-height: 600px;
	background: linear-gradient(131deg, rgba(105, 184, 200, 0.7), rgba(9, 55, 83, 0.7), rgba(105, 184, 200, 0.7));
    background-size: 600% 600%;
	-webkit-animation: AnimationName 12s ease infinite;
	-moz-animation: AnimationName 12s ease infinite;
	animation: AnimationName 12s ease infinite;
}

@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
h1{
	font-size: 3.1rem;
	margin-bottom: 10px;
	text-align: right;
	font-family: 'Katibeh', cursive;
}
p{
	font-size: 1.2rem;
	font-weight: 100;
	margin-bottom: 20px;
	opacity: 0.8;
	direction: rtl;
	text-align: justify;
	font-family: 'Lemonada', cursive;
}
a{
	font-size: 16px;
}
.btnDownload{
	background-color: #F2B705;
	border-radius: 100px;
	padding: 15px 20px;
	display: block;
	width: 160px;
	margin-top: 40px;
	text-align: center;
	float: right;
	font-size: 1.2rem;
}

/*----- Landing -----*/
.nav{
	padding-top: 3em;
}
.pages{
	float: right;
	text-align: right;
}

.pages a{
	text-decoration: none;
	color: white;
	font-size: 1.1rem;
	font-weight: lighter;
	margin: 0 10px;
	padding: 10px 20px;
	font-family: 'Tomorrow', sans-serif;
	vertical-align: middle;
	transition: all .5s ease-in-out;
}

.pages a:hover{
	background-color: #F2B705;
	border-radius: 100px;
	text-align: center;
}

.logo{
	width: 160px;
	vertical-align: middle;
}
.landingWrapper{
	width: 88%;
	margin: auto;
}
.landingContent{
	width: 88%;
	margin: 150px auto 0 auto;
	display: flex;
	

}
.landingContent	 > div{
	flex: 1 1;
}
/*.contentLeft{
	
}
.contentRight{
	flex: 1 1 ;
}*/
.iphoneHand{
	width: 541px;
	position: fixed;
	bottom:0px;
}
.contentRight h1, .contentRight p, .contentRight a{
	color: white;
	text-decoration: none;
}