html, body {
  font-family: Lato, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #0f0a21;
  background: #ededed url(../images/background.png) repeat;
  text-shadow: 0 1px 0 white;
  overflow-x: hidden; }

h1 {
  font-size: 40px;
  font-weight: 300;
  text-align: center;
  margin-bottom: 50px; }
  h1 em {
    font-style: italic;
    font-weight: 500; }

h3 {
  font-size: 18px; }

a, a:visited {
  color: #9f57cb;
  text-shadow: none;
  outline: none; }

#header, #content, #footer {
  width: 800px;
  margin: 0 auto; }

#header {
  height: 35px;
  padding: 20px 0;
  border-bottom: 1px solid #e0e0e0; }
  #header #logo {
    display: block;
    float: left;
    background: #ededed url(../images/logo.png) no-repeat 0 0;
    width: 124px;
    height: 35px;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
    text-indent: -9999px; }
    #header #logo:hover {
      background-color: #9f57cb; }
  #header nav ul {
    float: right;
    width: 320px; }
  #header nav li {
    float: left;
    height: 32px;
    margin-right: 15px; }
    #header nav li a {
      display: block;
      height: 32px;
      text-indent: -9999px;
      background: transparent url(../images/nav.png) no-repeat 0 0; }
  #header nav li#iphone {
    width: 63px; }
    #header nav li#iphone a {
      width: 63px; }
    #header nav li#iphone a:hover {
      background-position: 0 -40px; }
    #header nav li#iphone a:active {
      background-position: 0 -80px; }
  #header nav li#iphone a:active, #header nav li#iphone.active a {
    background-position: 0 -80px; }
  #header nav li#ipad {
    width: 51px; }
    #header nav li#ipad a {
      width: 51px;
      background-position: -71px 0; }
    #header nav li#ipad a:hover {
      background-position: -71px -40px; }
  #header nav li#ipad a:active, #header nav li#ipad.active a {
    background-position: -71px -80px; }
  #header nav li#android {
    width: 68px; }
    #header nav li#android a {
      width: 68px;
      background-position: -129px 0; }
    #header nav li#android a:hover {
      background-position: -129px -40px; }
  #header nav li#android a:active, #header nav li#android.active a {
    background-position: -129px -80px; }
  #header nav li#addons {
    width: 68px; }
    #header nav li#addons a {
      width: 68px;
      background-position: -203px 0; }
    #header nav li#addons a:hover {
      background-position: -203px -40px; }
  #header nav li#addons a:active, #header nav li#addons.active a {
    background-position: -203px -80px; }

#content {
  border-top: 1px solid #f0f0f0;
  padding: 50px 0;
  border-bottom: 1px solid #e0e0e0;
  min-height: 200px; }
  #content #swiper {
    position: relative; }
  #content.loading {
    background: transparent url(../images/spinner.gif) no-repeat 50% 60px; }
    #content.loading * {
      visibility: hidden; }
  #content .screenshot {
    display: block;
    margin: 0 auto 40px;
    height: 548px; }
  #content .get-the-app {
    display: inline-block;
    width: 220px;
    height: 50px; }
  #content .ios {
    margin: 0 0 50px 34px;
    width: 202;
    height: 60px;
    background: transparent url(../images/app_store.png) no-repeat 0 0; }
  #content .android {
    width: 172px;
    margin: 0 0 50px 49px;
    height: 60px;
    background: transparent url(../images/android_app_on_play_large.png) no-repeat 0 0; }
  #content .sale {
    background: transparent url(../images/get-the-app-sale.png) no-repeat 0 0; }
  #content .quote {
    width: 415px;
    margin: 0 auto 50px;
    background: #e1e1e1;
    border: 1px solid #dadada;
    padding: 8px 14px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px; }
    #content .quote p {
      margin: 0 0 5px; }
    #content .quote strong {
      text-align: right;
      display: block; }
  #content .description {
    width: 590px;
    margin: 0 auto; }
    #content .description ul {
      display: inline-block; }
      #content .description ul:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden; }
      #content .description ul li {
        float: left;
        width: 270px;
        margin: 0 50px 20px 0; }
      #content .description ul li:nth-child(even) {
        margin-right: 0; }
  #content .sites {
    width: 650px;
    margin: 0 auto; }
    #content .sites img {
      margin: 0 10px 0 10px; }
    #content .sites p {
      font-size: 18px;
      text-align: center;
      font-weight: bold;
      margin: 20px 10px; }
    #content .sites ul {
      display: inline-block; }
      #content .sites ul:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden; }
      #content .sites ul li {
        width: 140; }

#footer {
  border-top: 1px solid #f0f0f0;
  padding: 20px 0;
  height: 40px; }
  #footer #twitter #who, #footer #twitter #what {
    float: left; }
  #footer #twitter #who {
    background: transparent url(../images/bird.png) no-repeat 0 9px;
    padding: 9px 0 0 35px;
    margin: 0 10px 0 15px; }
  #footer #twitter #what {
    padding: 10px 6px 3px 16px;
    background: transparent url(../images/twitter-bg.png) no-repeat 0 0;
    width: 630px;
    height: 35px;
    font-size: 13px; }

@media (min-device-width:1024px) and (max-width:800px), screen and (max-device-width:480px) and (orientation:portrait), (min-device-width:481px) and (max-device-width:1024px) and (orientation:portrait) {
  nav {
    position: relative;
    width: 100%;
    float: none;
    height: 90px; }
    nav ul li {
      float: left;
      border-bottom: none;
      border-right: 1px solid #e6e6e6;
      width: 33.3%;
      height: 90px;
      text-align: center;
      margin-right: -1px; }
      nav ul li a {
        height: 90px;
        line-height: 90px; }
    nav ul li.active:after {
      display: none; }
    nav ul li.details {
      display: none; }

  .content {
    width: 100%;
    float: none;
    position: relative; }
    .content section.inner {
      padding: 0 6%; }
    .content .us ul li {
      width: 45%;
      min-width: 45%; } }
@media screen and (max-device-width:480px) and (orientation:landscape) {
  nav {
    position: relative;
    height: 100%;
    min-height: 100%; }
    nav ul {
      height: 100%; }
      nav ul li {
        height: 80px; }
        nav ul li a, nav ul li a:visited {
          height: 80px;
          line-height: 80px; }
      nav ul li.active {
        border-bottom: none; }

  .content .us ul li {
    width: 45%;
    min-width: 45%; } }