/* 01. FONT FACE ================================================== */

/*
@font-face {
	font-family: 'Janna-R';
	src: url('janna/jannaltregular.eot');
	src: url('janna/jannaltregular.eot?#iefix') format('embedded-opentype'),
	url('janna/jannaltregular.woff') format('woff'),
	url('janna/jannaltregular.ttf') format('truetype'),
	url('janna/jannaltregular.svg#jannaltregular') format('svg');
	font-weight: normal;
	font-style: normal;
}*/


	
/* 02. GENERALS SETTINGS ================================================== */



/* Container  */

.container {	
	z-index: 9999; /* IMPORTANT */
	position: relative;
	background: none;
	overflow: hidden;}



/* Clear floats of children */
.cbp-so-section:before,
.cbp-so-section:after {
	content: " ";
	display: table;
	padding:0px 0;}


.cbp-so-section:after {
	clear: both;}

/* Sides */
.cbp-so-side {
	width: 100%;
	margin: 0;
	padding: 3em 2%;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-perspective: 1000;
	perspective: 1000;
	-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
	-moz-transition: -moz-transform 0.5s, opacity 0.5s;
	transition: transform 0.5s, opacity 0.5s;}


body, html {
	direction:rtl;
    padding: 0;
    font-family: 'Janna-R', sans-serif;
    position: relative;
    height: 100%;
    -webkit-font-smoothing: antialiased;
    margin: 0;
    -webkit-transition: opacity 400ms;
    -moz-transition: opacity 400ms;
    transition: opacity 400ms;
}

body { 
	background: url('../images/bg.jpg');
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-attachment: fixed;
	-webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
	}

/* Selected text Color */

::-moz-selection {
    background: none;
    color: #5ac6ff;
}

::selection {
    background: none;
    color: #5ac6ff;
}

.centered {
    text-align: center;
}

b, strong {
    font-weight: 800;
}

/* Make a space */

.space {
    padding: 20px 0;
}


h1 {
    font-size: 65px;
    font-weight: normal;
    line-height: 45px;
    font-family: 'Janna-R', sans-serif;
    margin-top: 0.33em;
}

h2 {
    font-family: 'Janna-R', sans-serif;
    margin: 0.75em 0.75em 0.25em;
    font-size: 1.70em;
}


h3 {
    font: 55px 'Janna-R', sans-serif;
    font-weight: normal;
    padding-bottom: 25px;
    padding-top: 0px;
}

h4 {
    font: 32px 'Janna-R', sans-serif;
    font-weight: normal;
    padding-bottom: 0px;
}

h5 {
    font: 24px 'Janna-R', sans-serif;
    font-weight: normal;
    font-weight: 100;
    color:#FFF;
}


span {
    color: #303333;
    font: 1.5em 'Janna-R', sans-serif;
    opacity: 0.4;
    padding-top: 0px;
}

/* Link */

a {
    color: #FFF;
    text-decoration: none;
}

a:hover {
    color: #FFF;
}  
	
/* Paragrah */

p {
    font-family: 'Janna-R', sans-serif;
    font-weight: normal;
    color: rgba(255,255,255,0.80);
    line-height: 30px;
}

p a {
    border-bottom: 1px dotted #888;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}

p a:hover {
    border-bottom: 1px dotted #FFF;
}


/* Link with a border button */

.border-button {

    padding: 10px 35px 10px 35px;
    font-weight: normal;
    font-family: 'Janna-R', sans-serif;
    text-transform: uppercase;
    font-size: 12px;
    color:rgba(255,255,255,0.80);
    border: 1px solid rgba(255,255,255,0.40);
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}

.border-button:hover {
    border: 1px solid #FFF;
    color:#FFF;
}

/* Splash Buttons */
#splashbuttons { text-align: center; width: 100%; }
#splashbuttons a{ margin-left:20px; }
#sp-explore {
    padding: 10px 25px 10px 25px;
    font-weight: normal;
    font-family: 'Janna-R', sans-serif;
    font-size: 18px;
    color:white;
    border: 1px solid #fff;
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
}
#sp-explore:hover {
	background:#ea6153;
    border: 1px solid #ea6153;
    color:#fff;
}

#sp-join {
	background:#24add5;
    padding: 10px 25px 10px 25px;
    font-weight: normal;
    font-family: 'Janna-R', sans-serif;
    font-size: 18px;
    color:white;
    border: 1px solid #24add5;
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
}

#sp-join:hover {
	background:#fff;
    border: 1px solid #FFF;
    color:#24add5;
}
/* 03. NAVIGATION SETTINGS ================================================== */


nav #logo {
    float: right;
    z-index: 99999;
}

nav {
    z-index: 999;
    width: 100%;
    height: 90px;
}


/* Some stylesheet reset */

#nav, #nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* The main navigation bar */

#nav {
    width: 100%;
 /* The menu will take the width of its container */;
}

#nav>li {
    float: left;
    position: relative;
	margin-top:15px;
}

/* The main navigation links */

#nav>li>a {
    display: block;
    font-size: 14px;
    font-weight: normal;
    color: #FFF;
    opacity: 1;
    text-decoration: none;
	border:1px solid #fff;
	padding:5px 10px 5px 10px;
	
	
}

/* The hover state of the links */

#nav li:hover a, #nav li .selected {
    color:black;
	background:white;
}

 
/* Navigation Fixed */ 
 
.splash-header {
	font-family: 'Janna-R', sans-serif;
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    z-index: 99999;
    height: 80px;
    overflow: hidden;
    -webkit-transition: height 0.6s;
    -moz-transition: height 0.6s;
    transition: height 0.6s;
}


.splash-header #logo img{
    padding: 40px 0px 0px 20px;
    max-width: 150px;
}

.splash-header #nav a {
    margin-top:20px;
}

/* Transitions */

.splash-header #logo,
.splash-header #nav a {
    -webkit-transition: all 0.6s;
    -moz-transition: all 0.6s;
    transition: all 0.6s;
}

/* Button Nav */
.splash-header .button {
    color: #5fd2f4;
    margin-top: -100px;
	margin-right:7px;
    padding: 5px 15px 5px 15px;
    background: none;
    font-weight: normal;
    float: left;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 14px;
    text-align: center;
	border:0px solid #5fd2f4;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

/* Button Share:hover */

.splash-header .button:hover {
    color: #FFF;
    background: #87d5fe;
}


/* Navigation effect on scroll down */

.splash-header.splash-header-shrink {
	height: 50px;
	float: left;
	background:rgba(22,24,30,0.9);
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

/* The button comes to the right place */

.splash-header.splash-header-shrink .button {
	margin-top:7px;
	display: block;
}

/* The links goes up */

.splash-header.splash-header-shrink #nav a, .splash-header.splash-header-shrink #logo{
	margin-top: -150px;
}



/* 04. PAGE 1 / HEADER SETTINGS ================================================== */
.page1 {
    
    height: 100%;
    position: relative;
}

.page1 h1 {
    color: #FFF;
    text-align: center;
    width: 100%;
}
.page1 h2 {
    text-align: center;
    padding: 0;
    margin-top: 40px;
    margin-bottom: 45px;
	color:#b0d9e1;
	line-height:1.3em;
}
/* Don't display the logo for Phone */

.logo-phone {display: none;}

.prlx { position:absolute; top:-50px; }
/* Huge Title */

.splashsc {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 100%;
    height: 350px;
}

/* Go down text & Button */

.go-down {
    position: absolute;
    left: 0;
    bottom: 30px;
    right: 0;
    text-align: center;
    margin: auto;
    width: 100%;
    height: 50px;
}

/* Social Ico */

.social-ico {
    float: left;
    margin-top: 40px;
} 



/* 05. PAGE 2 SETTINGS ================================================== */
.page2 {
    background:rgba(0,0,0,0.2);
	min-height:880px;
}

.page2 .row { padding-top: 50px; }


.page2 h3 {
    color: #FFF;
    font-weight: normal;
}

/* Image from right */

.iphone {
    bottom: 0;
    left: -70px;
    position: absolute;
    top: 3%;
}




/* 06. PAGE 3 SETTINGS ================================================== */



.page3 {
    background: none;
    z-index: 999;
    position: relative;
    padding: 20px 0;
    height: 880px;
}

.page3 .row { padding-top: 50px; }

.page3 h3 {
    color: #FFF;
}

/* Article */

.page3 .article {
    position: relative;
    z-index: 999;
    height: 100%;
}



/* 07. PAGE 4 SETTINGS ================================================== */



.page4 {
    background: rgba(25,28,35,0.5);
    z-index: 999;
    position: relative;
    padding: 90px 0;
}

.page4 h3 {
    color: #24add5;
	padding-bottom:0px;
}

.page4 h4 {
	color:#FFF;
}



.title{
	text-transform:uppercase;
}

.sub{
	margin:10px 0;
	color:rgba(255, 255, 255, 0.5);
	font-size:14px;
}

.textblock{
	line-height:21px;
}

.testblock{
	position:relative;
}



/* 09. PAGE 5 / SUBSCRIBE SETTINGS ================================================== */


.page5 {
     background: rgba(25,28,35,0.7);
    padding: 20px 0 0px 0;
	 z-index: 999;
    position: relative;
}

.page5 h3 {
    color: #24add5;
	padding-bottom:0px;
}

.page5 h4 ,.page6 h4 {
	color:#fff;
}


.page6 {
    padding: 20px 0 0px 0;
}


.navbt a:link {
	border-left:1px solid #313641;
}
form {
    overflow: hidden;
}
	
/* Mail Input Send */

#signup input {
    background-clip: padding-box;
    background-color: #FFF;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    border-radius: 3px;
    border: none;
    margin: 15px 0;
    color: #333;
    height: 50px;
    resize: none;
    font-size: 12px;
    padding: 9px 20px 8px;
    transition: all .3s ease-in-out;
    width: 98%;
}

#signup .button {
    background-clip: padding-box;
    background-color: #24add5;
    color: #FFF;
    border-radius: 4px;
    border: none;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
	font-family:'janna-R',Arial;
    font-size: 16px;
    cursor: pointer;
    margin: 15px 0;
    height: 50px;
    font-weight: normal;
    text-shadow: none;
    text-transform: uppercase;
    width: 85%;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

#signup .button:hover {
    color: #FFF;
    background: #87d5fe;
}

#signup .spam {
    font-size: 12px;
    padding: 0px 0 10px 0;
    color: #888;
}

 .footer {
	background:rgba(0,0,0,0.2);
	width:100%;
	padding:10px;
	text-align:center;
	font-size:13px;
}
 .footer i {
    font-size:5pt;
	margin:0 5px 0 5px;
}
 .footer a:hover{ 
	opacity:0.6; 
	-webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
/* Message if it's ok */

#signup .msg-ok {
	font-size: 12px;
    padding: 10px 0 10px 0;
    color: #888;
}



/* 10. PRELOADING  ================================================== */
    


/* Preloader Effect */

#preloader {
    background: url("../images/noise.png");
    bottom: 0;
    right: 0;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999999;
}

/* Preloading Animation */

#loading-animation {
    background-image: url("../images/load.gif") ;
    opacity: 0.7;
    background-position: center center;
    background-repeat: no-repeat;
    height: 200px;
    right: 50%;
    margin: -100px -100px 0 0;
    position: absolute;
    top: 50%;
    width: 200px;
    border-radius: 4px;
}


            
/* 11. MEDIA QUERIES  ============================================ */


@media screen and (max-width: 768px) {


.page2, .page3, .page4, .page5 {
	padding:0px 0;
	text-align: center;
	width: 100%;
}

h1 {font-size: 50px;}
h2 {font-size: 25px;}
h3 {font-size:32px;}

.iphone {display: none; }

.vdesk {display: block; }


.splashsc {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 100%;
    height: 550px;
    padding:20px;
}

.page2 .columns {
    position: relative;
    width: 100%;
}

.page3 {height: auto;}


	       
}

/* Media Queries for iPad in Portrait */

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
.iphone {
    bottom: 0;
    left: -180px;
    position: absolute;
    display: none;
    top: 3%;}

.page2 .row .six.columns { width: 100%;}

.page5 {padding: 40px 0;}

 }

/* Media Queries for iPad in Landscape */

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 

.iphone {
    bottom: 0;
    left: -180px;
    position: absolute;
    top: 3%;
}
	
}

/* Media Queries for iPhone */
@media screen and (max-width: 640px)  {
	h1 {font-size:23px; margin:15px 0 15px 0; line-height:25px;}
	h2,.page1 h2  {font-size:13px; margin:0 0 15px 0; line-height:auto;}
	#sp-explore,#sp-join { font-size:13px;  padding:5px; }
	.vdesk { display:block;}
	.logo-phone { display:none; }
	#nav>li>a { font-size:11px; padding:3px; color:#c8cdd5; border:1px solid #c8cdd5; }
	#logo img { width:127px; }
 }
  @media screen and (max-width: 640px) and (orientation : landscape) {
	.splashsc { height: 125px;} .varrow { display:none; }
  }
 @media screen and (max-width: 640px) and (orientation : portrait) {
	#sp-explore,#sp-join { display:block; margin-bottom:7px; }
	.splashsc { height: 250px;}
 }
 @media screen and (max-width: 640px) and (orientation : landscape) {
	h1 {font-size:35px; margin:0 0 15px 0; line-height:25px;}
	h2,.page1 h2  {font-size:20px; margin:0 0 15px 0; line-height:auto;}
 }