/* Hacks and Mixins */
/* Variables */
/* Styles */
body {
  background: #1A1A1A;
  font-family: helvetica-neue, helvetica, arial, sans-serif;
  font-size: 16px;
  text-align: center; }

strong {
  font-weight: 600; }

hr {
  height: 10px;
  border: 0;
  background: url("img/divider.svg") repeat-x 0 0;
  background-size: auto auto;
  margin: 40px 0; }

hr.dark {
  background-image: url("img/divider_dark.svg"); }

ol li {
  margin-bottom: 20px;
  list-style-type: decimal;
  list-style-position: outside;
  margin-left: 20px; }

.wrap {
  width: 80%;
  max-width: 800px;
  margin: 0 auto;
  text-align: left; }

#header {
  background: #1A1A1A url(img/header_bg.jpg) no-repeat 50% 50%;
  background-size: 100% auto; }
  @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) {
    #header {
      background-image: url("img/header_bg@2x.jpg");
      background-size: 100% auto; } }
  @media only screen and (max-width: 700px) {
    #header {
      background-size: 130% auto; } }
  @media only screen and (max-width: 420px) {
    #header {
      background-size: 200% auto; } }
  #header h1 {
    display: none; }
  #header .wrap {
    text-align: center;
    height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center; }
    @media only screen and (max-width: 700px) {
      #header .wrap {
        height: 500px; } }
    @media only screen and (max-width: 420px) {
      #header .wrap {
        height: 400px; } }
  #header #promo {
    align-self: flex-end;
    top: 0;
    position: absolute; }
  #header .logo {
    align-self: center; }
    #header .logo img {
      vertical-align: middle;
      margin: 20px 0; }
  #header h2 {
    font-size: 18px;
    font-weight: 300;
    margin: 0 20px;
    color: #aaa;
    display: inline-block; }
    #header h2 del {
      text-transform: strike-through; }
  #header .intro img {
    background: #808080;
    margin-right: 10px;
    vertical-align: middle; }
  #header p {
    font-size: 11px;
    letter-spacing: .5em;
    text-transform: uppercase;
    color: #808080;
    font-weight: 600;
    margin-top: 20px;
    flex-grow: 1; }

#apps {
  padding: 40px 0;
  background: #262626; }
  #apps .product {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 340px;
    margin: 20px 0;
    border: 20px solid #262626;
    border-image-source: url("img/app_border.png");
    border-image-slice: 20; }
    @media only screen and (max-width: 700px) {
      #apps .product {
        flex-direction: column;
        height: auto; } }
    @media only screen and (-webkit-min-device-pixel-ratio: 2) {
      #apps .product {
        border: 20px solid #262626;
        border-image-source: url(img/app_border@2x.png);
        border-image-slice: 40; } }
    #apps .product .icon {
      margin-right: 20px;
      width: 128px;
      height: 128px;
      min-width: 128px; }
      @media only screen and (max-width: 700px) {
        #apps .product .icon {
          margin-right: 0; } }
    #apps .product .app {
      width: 100%;
      margin-right: 10px; }
      @media only screen and (max-width: 700px) {
        #apps .product .app {
          text-align: center;
          margin-right: 0;
          margin-bottom: 20px; } }
      #apps .product .app h2 {
        font-size: 32px;
        font-weight: 600;
        color: #fff;
        line-height: 1.2em; }
      #apps .product .app h3 {
        font-size: 21px;
        font-weight: 300; }
    #apps .product .meta {
      width: 200px;
      min-width: 200px; }
      @media only screen and (max-width: 700px) {
        #apps .product .meta {
          width: auto;
          text-align: center; } }
      #apps .product .meta .star {
        position: absolute;
        margin-top: .5em;
        margin-left: 10px; }
      #apps .product .meta .promo {
        font-size: 21px;
        font-weight: 600;
        margin-bottom: 10px; }
        #apps .product .meta .promo a {
          border: 3px solid;
          display: inline-block;
          width: 120px;
          text-align: center;
          padding: 4px 0;
          border-radius: 30px;
          vertical-align: middle;
          -webkit-transition: color .2s ease-out; }
        #apps .product .meta .promo a:hover {
          color: #fff; }
      #apps .product .meta .help {
        font-size: 15px;
        margin: 0 0 5px 10px;
        text-align: left;
        width: 110px; }
        @media only screen and (max-width: 700px) {
          #apps .product .meta .help {
            margin: 0 auto 5px auto; } }
      #apps .product .meta a {
        text-decoration: none;
        display: inline-block;
        -webkit-transition: color .2s ease-out; }
        #apps .product .meta a img {
          margin-right: 5px;
          vertical-align: middle;
          -webkit-transition: background .2s ease-out; }
      #apps .product .meta a:hover {
        color: #fff; }
      #apps .product .meta a:hover img {
        background: #fff; }
  #apps .product.tweetbot h3, #apps .product.tweetbot a {
    color: #99C9FF; }
  #apps .product.tweetbot .help img {
    background: #99C9FF; }
  #apps .product.pastebot h3, #apps .product.pastebot a {
    color: #E6A15C; }
  #apps .product.pastebot .help img {
    background: #E6A15C; }
  #apps .product.calcbot h3, #apps .product.calcbot a {
    color: #B1B4BA; }
  #apps .product.calcbot .help img {
    background: #B1B4BA; }

#info {
  background: #fff;
  padding-top: 40px; }
  #info h2 {
    font-size: 27px;
    color: #FF0029;
    font-weight: 600;
    margin-bottom: 20px; }
  #info h3 {
    font-size: 17px;
    color: #1a1a1a;
    font-weight: 600;
    margin-bottom: 1em; }
  #info p {
    margin-bottom: 20px; }
  #info .container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    visibility: hidden; }
    #info .container .infobox {
      background: #f3f3f3;
      border: 0.5px solid rgba(0, 0, 0, 0.2);
      width: 80%;
      max-width: 500px;
      margin: 0 auto;
      border-radius: 10px;
      padding: 20px 20px 0 20px;
      position: absolute;
      box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.3); }
      #info .container .infobox a {
        color: #FF3E5D; }
      #info .container .infobox h3 {
        margin-right: 30px; }
      #info .container .infobox .close {
        position: absolute;
        top: 20px;
        right: 20px;
        z-index: 3;
        width: 32px;
        height: 32px; }
      #info .container .infobox ul {
        padding: 0;
        display: flex;
        flex-direction: row;
        justify-content: space-between; }
        @media only screen and (max-width: 420px) {
          #info .container .infobox ul {
            flex-direction: column; } }
        #info .container .infobox ul li {
          max-width: 45%;
          margin-bottom: 20px;
          text-align: center;
          padding: 5px;
          border: 1px solid #e3e3e3;
          background: #fff;
          border-radius: 8px;
          overflow: hidden; }
          @media only screen and (max-width: 420px) {
            #info .container .infobox ul li {
              max-width: 100%; } }
          #info .container .infobox ul li a img {
            display: block; }
  #info .container.visible {
    visibility: visible; }
  #info #thumbs {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start; }
    @media only screen and (max-width: 420px) {
      #info #thumbs {
        flex-direction: column; } }
    #info #thumbs li {
      width: 30%; }
      @media only screen and (max-width: 420px) {
        #info #thumbs li {
          width: 100%;
          margin-bottom: 20px; } }
    #info #thumbs a img {
      width: 100%;
      height: auto;
      display: block;
      background: #eee;
      border-radius: 12px;
      opacity: .9;
      -webkit-transition: opacity .2s ease-out; }
    #info #thumbs a:hover img {
      opacity: 1; }
  #info #faq {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: flex-start;
    padding-bottom: 40px; }
    #info #faq a {
      color: #FF3E5D; }
    @media only screen and (max-width: 420px) {
      #info #faq {
        flex-direction: column; } }
    #info #faq li {
      width: 48%;
      margin-bottom: 1em; }
      @media only screen and (max-width: 420px) {
        #info #faq li {
          width: 100%; } }
    #info #faq p {
      font-size: 15px;
      color: #4D4D4D;
      font-weight: 400;
      margin-bottom: 1em; }

#about {
  background: url(img/header2_bg.jpg) no-repeat 50% 0;
  background-size: 100% auto;
  padding-top: 80px; }
  @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) {
    #about {
      background-image: url("img/header2_bg@2x.jpg");
      background-size: 100% auto; } }
  #about h2 {
    font-size: 27px;
    font-weight: 300;
    color: #fff; }
    @media only screen and (max-width: 420px) {
      #about h2 {
        font-size: 21px; } }
  #about .wrap {
    text-align: center; }
  #about #portrait {
    width: 100%;
    max-width: 700px;
    height: auto; }
  #about #team {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: flex-start; }
    @media only screen and (max-width: 420px) {
      #about #team {
        flex-direction: column; } }
    #about #team li {
      width: 33%; }
      @media only screen and (max-width: 420px) {
        #about #team li {
          width: 100%;
          margin-top: 20px; } }
      #about #team li h3 {
        color: #fff;
        font-size: 17px;
        font-weight: 600; }
      #about #team li h4 {
        color: #b3b3b3;
        font-size: 15px;
        font-weight: 300; }
      #about #team li p {
        font-size: 15px;
        font-weight: 300; }
        #about #team li p a {
          color: #FF3E5D;
          text-decoration: none;
          -webkit-transition: color .2s ease-out; }
        #about #team li p a:hover {
          color: #fff; }
  #about #contact h2 {
    display: none; }
  #about #contact > img {
    display: block;
    margin: 0 auto 40px auto; }
  #about #contact ul {
    text-align: left;
    margin: 0 auto;
    display: inline-block; }
    #about #contact ul li {
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 10px; }
      #about #contact ul li a {
        color: #FF3E5D;
        text-decoration: none;
        display: inline-block;
        -webkit-transition: color .2s ease-out; }
        #about #contact ul li a img {
          margin-right: 5px;
          vertical-align: middle;
          background: #FF3E5D;
          -webkit-transition: background .2s ease-out; }
      #about #contact ul li a:hover {
        color: #fff; }
      #about #contact ul li a:hover img {
        background: #fff; }

#footer {
  padding-bottom: 20px; }
  #footer p {
    font-size: 13px;
    font-weight: 300;
    color: #808080; }
  #footer #flags li {
    display: inline-block;
    margin: 0 10px 10px 10px; }

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