/* Hacks and Mixins */
/* Variables */
/* Styles */
html, body {
  background: #0D0D0D;
  color: #999;
  font-family: helvetica-neue, helvetica, arial, sans-serif;
  font-size: 16px;
  margin: 0;
  padding: 0; }

.wrap {
  max-width: 1160px;
  padding: 40px;
  margin: 0 auto; }
  @media only screen and (max-width: 600px) {
    .wrap {
      padding: 20px; } }

.heart {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  margin-top: 5px; }
  .heart img {
    display: block; }

#header {
  background: #2D3843;
  background: #2D3843 url("img/header_bg.png") no-repeat 100% 0;
  background: url("img/header_bg.png") no-repeat 100% 0, radial-gradient(circle farthest-side at 90% 0%, #2D3843, #21282F);
  padding: 40px 40px 0 40px;
  margin-bottom: 20px;
  border-radius: 30px;
  overflow: hidden; }
  @media only screen and (max-width: 600px) {
    #header {
      padding: 20px 20px 0 20px; } }
  #header #platform {
    font-size: 23px;
    font-family: obvia, sans-serif;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.3);
    display: inline-block;
    padding: 5px 15px;
    border-radius: 30px;
    color: rgba(255, 255, 255, 0.3);
    float: right; }
    @media only screen and (max-width: 600px) {
      #header #platform {
        font-size: 18px;
        float: none;
        text-align: center;
        display: block;
        margin-bottom: 15px; } }
  #header .content {
    display: flex;
    align-items: flex-end;
    margin-top: 60px; }
    @media only screen and (max-width: 600px) {
      #header .content {
        flex-direction: column;
        align-items: center;
        text-align: center; } }
    #header .content .text {
      margin: 0 0 60px 40px;
      flex-grow: 1; }
      @media only screen and (max-width: 600px) {
        #header .content .text {
          margin-left: 0; } }
    #header .content .image {
      flex-grow: 2;
      text-align: center; }
      #header .content .image img {
        margin-left: -90px;
        display: block; }
        @media only screen and (max-width: 860px) {
          #header .content .image img {
            margin-left: -50px;
            width: 400px;
            height: auto; } }
        @media only screen and (max-width: 600px) {
          #header .content .image img {
            margin-left: 0;
            width: 260px; } }
    #header .content h1 {
      font-family: rift-soft, sans-serif;
      font-style: italic;
      font-size: 70px;
      font-weight: 600;
      color: #fff;
      line-height: 1em; }
      @media only screen and (max-width: 860px) {
        #header .content h1 {
          font-size: 60px; } }
      @media only screen and (max-width: 600px) {
        #header .content h1 {
          font-size: 46px; } }
    #header .content h2 {
      font-family: obvia, sans-serif;
      color: #FF576C;
      font-size: 30px;
      white-space: nowrap;
      margin-bottom: 30px; }
      @media only screen and (max-width: 860px) {
        #header .content h2 {
          font-size: 26px; } }
      @media only screen and (max-width: 600px) {
        #header .content h2 {
          font-size: 22px; } }

#primary-promo ul {
  max-width: 1160px;
  margin: 0 auto 40px auto; }
  #primary-promo ul li {
    background: #2E2E2E;
    background: #2E2E2E radial-gradient(circle farthest-side at 20% 0%, #2e2e2e, #161616);
    margin-bottom: 20px;
    padding: 20px 60px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center; }
    @media only screen and (max-width: 860px) {
      #primary-promo ul li {
        padding: 20px; } }
    @media only screen and (max-width: 600px) {
      #primary-promo ul li {
        flex-direction: column-reverse;
        text-align: center;
        padding: 40px 20px 20px 20px; } }
    #primary-promo ul li div {
      max-width: 400px;
      margin-left: 20px; }
      @media only screen and (max-width: 600px) {
        #primary-promo ul li div {
          margin-left: 0; } }
    #primary-promo ul li img {
      max-width: 400px;
      height: auto;
      display: block;
      margin-top: 40px; }
      @media only screen and (max-width: 860px) {
        #primary-promo ul li img {
          width: 300px; } }
      @media only screen and (max-width: 600px) {
        #primary-promo ul li img {
          width: 260px; } }
    #primary-promo ul li h3 {
      font-family: rift-soft, sans-serif;
      font-style: italic;
      font-size: 44px;
      font-weight: 400;
      color: #fff;
      line-height: 1em; }
      @media only screen and (max-width: 860px) {
        #primary-promo ul li h3 {
          font-size: 38px; } }
      @media only screen and (max-width: 600px) {
        #primary-promo ul li h3 {
          fot-size: 30px; } }
    #primary-promo ul li p {
      font-family: obvia, sans-serif;
      font-size: 20px;
      color: #999; }
      @media only screen and (max-width: 860px) {
        #primary-promo ul li p {
          font-size: 18px; } }

#features ul {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding: 0 20px;
  justify-content: space-between; }
  @media only screen and (max-width: 600px) {
    #features ul {
      flex-direction: column;
      padding-left: 0; } }
  #features ul li {
    font-family: obvia, sans-serif;
    width: 44%;
    padding-left: 40px;
    padding-top: .2em;
    margin-bottom: 20px; }
    @media only screen and (max-width: 860px) {
      #features ul li {
        width: 40%; } }
    @media only screen and (max-width: 600px) {
      #features ul li {
        width: 95%; } }
    #features ul li h3 {
      font-size: 20px;
      color: #fff;
      font-weight: 600;
      margin-bottom: .1em; }
      @media only screen and (max-width: 860px) {
        #features ul li h3 {
          font-size: 18px; } }
    #features ul li p {
      font-size: 16px;
      color: #aaa;
      line-height: 1.5em; }
      @media only screen and (max-width: 860px) {
        #features ul li p {
          font-sdize: 14px; } }
  #features ul #favorites {
    background: url(img/favorites.png) no-repeat 0 0;
    background-size: 32px 32px; }
    @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
      #features ul #favorites {
        background-image: url("img/favorites@2x.png");
        background-size: 32px 32px; } }
  #features ul #email {
    background: url(img/email.png) no-repeat 0 0;
    background-size: 32px 32px; }
    @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
      #features ul #email {
        background-image: url("img/email@2x.png");
        background-size: 32px 32px; } }
  #features ul #scientific {
    background: url(img/scientific.png) no-repeat 0 0;
    background-size: 32px 32px; }
    @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
      #features ul #scientific {
        background-image: url("img/scientific@2x.png");
        background-size: 32px 32px; } }
  #features ul #icloud {
    background: url(img/icloud.png) no-repeat 0 0;
    background-size: 32px 32px; }
    @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
      #features ul #icloud {
        background-image: url("img/icloud@2x.png");
        background-size: 32px 32px; } }
  #features ul #currency {
    background: url(img/currency.png) no-repeat 0 0;
    background-size: 32px 32px; }
    @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
      #features ul #currency {
        background-image: url("img/currency@2x.png");
        background-size: 32px 32px; } }
  #features ul #round {
    background: url(img/round.png) no-repeat 0 0;
    background-size: 32px 32px; }
    @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
      #features ul #round {
        background-image: url("img/round@2x.png");
        background-size: 32px 32px; } }
  #features ul #constants {
    background: url(img/constants.png) no-repeat 0 0;
    background-size: 32px 32px; }
    @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
      #features ul #constants {
        background-image: url("img/constants@2x.png");
        background-size: 32px 32px; } }
  #features ul #ipad {
    background: url(img/ipad.png) no-repeat 0 0;
    background-size: 32px 32px; }
    @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
      #features ul #ipad {
        background-image: url("img/ipad@2x.png");
        background-size: 32px 32px; } }

#footer {
  font-family: obvia, sans-serif;
  text-align: center;
  position: relative; }
  #footer .appstore {
    margin: 0 0 100px 0;
    padding-top: 60px; }
  #footer #madeby {
    margin-bottom: 20px; }

/*# sourceMappingURL=stylesheet.css.map */