@import url(//fonts.googleapis.com/css?family=Source+Sans+Pro);
@import url(//fonts.googleapis.com/css?family=Source+Sans+Pro:300);

body {
  font-family: 'Source Sans Pro', sans-serif;
  background-color: #fff;
  color: #333;   
}

body.ar {
  direction: rtl;
  unicode-bidi: embed;
  font-size: 16px;
  font-family: "Badiya LT W20", 'Droid Arabic Naskh', "Geeza Pro", Tahoma; 
  word-spacing: 0.15em;   
}

h2 {
  margin: 0.83em 0;
}


h1, h2, h3 {
  font-weight: 400;
}


.ar h1, .ar h2, .ar h3 {
  font-family: "Badiya LT W20";
  font-weight: bold;
}

.inner-page h2 {
	color: #000;
	margin-top:2em;
}

.inner-page h2:first-of-type {
	margin-top: 0.5em;

}

ul {
	list-style-type: circle;
}

code {
	color: #000;
	background: #fff;
	border-width: 1px 1px 2px 1px;
	border-style: solid;
	border-color: #CCC #AAA #888 #BBB;
	padding: 2px 6px;
	border-radius: 4px;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 0.7em;
	white-space: nowrap;
	display: inline-block;
	margin-bottom: 5px;
}

a {
  color: #1A82D1;
  text-decoration: none;
}

a:hover {
    background-image: linear-gradient(to top,
    rgba(26,130,209,0) 5%,
    rgba(26,130,209,.3) 5%,
    rgba(26,130,209,.3) 16%,
    rgba(26,130,209,0) 16%
    );
}

a.image-link:hover {
    background: none;
}

#logo-link:hover {
    background: none;

}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  color: inherit;
  border-bottom: 2px dashed #EAECC6;
}

.ar p {
  line-height: 1.8em;
}

hr {
	color: #ddd;
	border: 0 none;
	border-top: 1px solid #ddd;
}

#header {
  padding-top: 1.5em;
  padding-bottom: 1em;
  color: #aaa; 
}

#langs {
  text-align: right;
  font-family: "Menlo","Courier New", monospace;
}

#langs a {
    color: #aaa;
}

.ar #langs {
  text-align: left;
}

#header a.selected {
  color: #aaa;
}

.sep {
  -moz-transform: scale(2.0);
  -webkit-transform: scale(2.0);
   transform: scale(2.0);
  display: inline-block;
  color: #ddd;
  top: 2px;
  position: relative;
  font-weight: normal;
}

#main-menu {
	list-style-type: none;
	display: inline-block
}

#main-menu li {
	display: inline-block;
}

#main-menu li.selected a {
	color: #FFF;
	background: #1A82D1;
	padding: 2px 10px 4px 10px;
	border-radius: 4px;
}

#main-menu li:after {
	content: "#";
	  -moz-transform: scale(2.0);
  -webkit-transform: scale(2.0);
   transform: scale(2.0);
  display: inline-block;
  color: #eee;
  position: relative;
  font-weight: normal;
  padding-left: 1rem;
  padding-right: 0.8rem;
    pointer-events: none;
}

#main-menu li:last-child:after {
	display: none;
}

#hero {
	padding: 1em 0 2em 0;
}

#logo-container {
  height: 500px;
}

#katib-logo { 
	width: 128px;
}

.ar #katib-logo {
}

#tagline-row {
	margin-bottom: 1em;
}

#main-download-button {
    margin-top: 2em;
    margin-bottom: 3em;
}

#title {
	margin: 0;
  color: #111;
  font-size: 3em;
}

.ar #title {
  font-size: 3em;
}

#tagline-row h2 {
  margin-top: -20px;
  color:#798688;
  font-size:3em;
  font-weight: 200;
}

.ar #tagline-row h2 {
  font-weight: normal;
}

#what {
  border-top: 2px solid #1C2027; 
}

.dark-gradient {
  color: #F2F2F3;
  background: -webkit-linear-gradient(90deg, rgba(38, 45, 57, 1) 10%, rgba(24, 26, 29, 1) 90%);
  background:    -moz-linear-gradient(90deg, rgba(38, 45, 57, 1) 10%, rgba(24, 26, 29, 1) 90%);
  background:     -ms-linear-gradient(90deg, rgba(38, 45, 57, 1) 10%, rgba(24, 26, 29, 1) 90%);
  background:      -o-linear-gradient(90deg, rgba(38, 45, 57, 1) 10%, rgba(24, 26, 29, 1) 90%); 
  background:         linear-gradient(90deg, rgba(38, 45, 57, 1) 10%, rgba(24, 26, 29, 1) 90%);
}

#what-is { 
  margin-bottom: 0;
  margin-top: 0.83em;
}

.ar #what-is {
  font-weight: normal;
  font-size: 2em;
}

#description {
  font-weight: 300;
  font-size: 1em;
  margin-top: 1em;
  margin-bottom: 2em;
  color: #C1C6D1;
}

.ar #description {
  text-align: justify;
  font-size: 0.9em;
}


#badge-cell {
  text-align: center;
}

  #badge-cell .appstore-badge {
    margin-top: 1em;
    margin-bottom: 1em;
  }

@media only screen and (min-width: 40.063em) {
  #badge-cell {
    text-align: right;
  }

  #badge-cell .appstore-badge {
    margin-top: 4em;
    margin-bottom: 0;
  }

  .en  #badge-cell .appstore-badge {
    margin-top: 4em;
  }

  #katib-logo {
    margin-top: 3em;
  }

  .ar #description {
    width: 90%;
  }
}

.appstore-badge  {
	width: 260px;
  -webkit-transition: all linear 0.09s; 
  -moz-transition: all linear 0.09s; 
  transition: all linear 0.09s; 
}

.requires-note {
  color: rgba(193, 198, 209, 0.85);
  text-align: center;
  font-weight: 300;
  font-size: 0.9rem;
  padding-top: 0.5em;
  padding-bottom: 1em;
}

.ar .requires-note {
  font-size: 0.8rem;
}

@media only screen and (min-width: 40.063em) {
  .requires-note {
      padding-bottom: 0;
      padding-left: 3rem;
  }
}

.appstore-badge:hover {
  -webkit-transform: scale(1.03);
  -moz-transform: scale(1.03);
  transform: scale(1.03);
}

#screens {
	position: relative;
  height: 460px;
  left: auto;
  text-align: center;
}

.ar #screens {
  left: auto;
  right: auto;
}

.screen {
	position: absolute;
	/*top: 15px;*/
/* 	width: 400px; */
    box-sizing: content-box;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;

}

.screen-1 { 
  position: relative;
	left: auto;
  top: auto;
  z-index: -1;
  width: 450px;
    box-shadow:  -10px 5px 30px 0px rgba(30, 30, 30, 0.2);
}

.ar .screen-1 {
  left: auto;
  right: auto;
}

.screen-2 { 
	left: 425px;
  width: 512px;
  z-index: -1;
  box-shadow:  0 0 25px 0px rgba(30, 30, 30, 0.2);
}

.ar .screen-2 {
  left: auto;
  right: 425px;
}


@media only screen and (min-width: 40.063em) {
  #screens {
   /*left: 140px;*/
  }
  .ar #screens {
  left: auto;
  /*right: 140px;*/
}

  .screen-1 { 
    position: absolute;
    left: 25px;
    top: 77px;
    z-index: -1;
  }

  .ar .screen-1 {
    left: auto;
    right: 25px;
  }
}


#benefits {
  color: #222;
  margin: 0.83em 0 0 0;
}

.ar #benefits {
  font-size: 2em;
  font-weight: normal;
}

.inner-page #misc {
    margin-top: 5em;
}

#features, .inner-page #misc {
  box-shadow: 0 -2px 15px rgba(0,0,0,0.5);
	padding: 0 0 1.4em 0;

	border-top: 3px solid #5BCFCB;
	border-bottom: 5px solid #EAECC6;
	color: #4a4a4a;

  background: -webkit-linear-gradient(0deg, #5BCFCB  10%, #EAECC6 90%);
  background:    -moz-linear-gradient(90deg, #5BCFCB  10%, #EAECC6 90%);
  background:     -ms-linear-gradient(90deg, #5BCFCB  10%, #EAECC6 90%);
  background:      -o-linear-gradient(90deg, #5BCFCB  10%, #EAECC6 90%);
  background:         linear-gradient(90deg, #5BCFCB  10%, #EAECC6 90%);
}

.ar #features, .ar.inner-page #misc  {
  background: -webkit-linear-gradient(0deg, #EAECC6  10%, #5BCFCB 90%);
  background:    -moz-linear-gradient(90deg, #EAECC6  10%, #5BCFCB 90%);
  background:     -ms-linear-gradient(90deg, #EAECC6  10%, #5BCFCB 90%);
  background:      -o-linear-gradient(90deg, #EAECC6  10%, #5BCFCB 90%);
  background:         linear-gradient(90deg, #EAECC6  10%, #5BCFCB 90%);
}

.topic-list {
    list-style-type: none;
    padding-left: 0;
    padding-right: 0;
    margin-top: 0;
}

.topic-list > li {
    padding: 20px 0 18px;
    width: 100%;
    position: relative;
    border-bottom: 1px solid #e8e8e8;
}

.topic-list > li > a {
    display: inline-block;
}

.feature-row h3 {
	color: #000;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.5em;
}

.ar .feature-row h3 {
  margin-bottom: 0.4em;
  font-size: 1.8em;
  font-weight: normal;
}

.feature-row p {
  margin-top: 0.2em;
  font-weight: 300;
}

.columns .feature-row {
  padding-top: 1em;
  padding-bottom: 3.5em;
}

.converge-start {
  text-align: right;
}

.converge-end {
  text-align: left;
}

.feature-shot {
  width: 300px;
  vertical-align: middle;
  border-radius: 6px;
  box-sizing: content-box;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  border: 3px rgba(115, 163, 161, 0.3) solid
}

.ar .feature-shot {
  margin-top: 0.7em;
}

#misc {
  margin-top: 2rem;
  text-align: center;
}

.inner-page #misc h2 {
	color: #000;
}


#footer {
  margin-top: 4rem;
  padding-top: 1rem;
  padding-bottom: 2rem;
  color: #6A6B6B;
  border-bottom: 5px solid #EAECC6;
  border-top: 1px solid #DEDEDE;
}

.inner-page #footer {
	border-top: 0;
	margin-top: 3rem;
}

#footer-logo { 
  width: 100px;
  padding-right: 1rem;
  float: left;
  box-sizing: content-box;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
}

.ar #footer-logo {
   padding-right: 0;
   padding-left: 1rem;
  float: right;
}

#footer p {
  margin: 0.2rem 0;
}

.legalese {
  font-size: 0.8rem;
  color: #999;
}

.ar .legalese {
  text-align: right;
  direction: ltr;
}

.help-page-badge {
   position: relative; top: 2em
}

.en .help-page-badge {
  float: right;right: 1em;
}

.ar .help-page-badge {
  float: left;
  left: 1em;
}