@charset "UTF-8";
/* Hacks and Mixins */
/* Variables */
:root {
  --magic-number: 0.05255; /* tan(11°)/2 */
  --content-width: 100vw;
  --skew-padding: calc(var(--content-width) * var(--magic-number));
  --skew-margin: calc(var(--skew-padding) * -1);
}

/* Styles */
html {
  background: color(display-p3 0.114 0.114 0.125);
  font-family: "helvetica neue", helvetica, arial, sans-serif;
}

hr {
  display: none;
}

body {
  display: flex;
  flex-direction: column;
}
body section .container {
  padding: 0 0;
}
body section .wrap {
  margin: 0 auto;
  text-align: center;
  width: auto;
  max-width: 80vw;
}
body .disabled {
  opacity: 0.3;
}
body .disabled :hover {
  cursor: default;
}
body .note {
  font-style: italic;
  opacity: 0.7;
}
body #apps {
  padding-bottom: 8vw;
  background: rgb(3, 4, 7) url(img/header_bg.jpg) no-repeat 50% 0;
  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) {
  body #apps {
    background-image: url("img/header_bg@2x.jpg");
    background-size: 100% auto;
  }
}
@media only screen and (max-width : 600px) {
  body #apps {
    background-size: 120% auto;
  }
}
body #apps .tapbots-logo {
  width: 8vw;
  height: auto;
}
@media only screen and (max-width : 900px) {
  body #apps .tapbots-logo {
    width: 10vw;
  }
}
@media only screen and (max-width : 600px) {
  body #apps .tapbots-logo {
    width: 20vw;
    margin-top: 86vw;
  }
}
body #apps .tapbots-logo path {
  fill: color(display-p3 1 0.301 0.301);
}
body #apps h1 {
  display: none;
}
body #apps h2 {
  color: #fff;
  font-family: urbane,  helvetica neue , helvetica, arial, sans-serif;
  font-size: 6vw;
  line-height: 1em;
  font-weight: 600;
  margin-top: 63vw;
}
@media only screen and (max-width : 600px) {
  body #apps h2 {
    margin-top: 4vw;
    font-size: 10vw;
  }
}
body #apps p.subtitle {
  color: rgba(255, 255, 255, 0.8);
  font-size: 3vw;
  line-height: 1.3em;
  font-weight: 200;
  margin: 0 4vw 6vw 4vw;
}
@media only screen and (max-width : 600px) {
  body #apps p.subtitle {
    font-size: 6vw;
    margin: 0 0 10vw 0;
  }
}
body #apps ul {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}
@media only screen and (max-width : 600px) {
  body #apps ul {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}
body #apps ul li {
  padding: 0;
  width: 18.5vw;
  line-height: 1.5em;
  margin-bottom: 3vw;
  text-align: center;
}
@media only screen and (max-width : 600px) {
  body #apps ul li {
    width: 100%;
    border-top: 0.5px solid rgba(255, 255, 255, 0.3);
    padding-top: 10vw;
  }
}
body #apps ul li img {
  display: block;
  margin: 0 auto;
  width: 13vw;
  height: auto;
  margin-bottom: 1vw;
}
@media only screen and (max-width : 600px) {
  body #apps ul li img {
    width: 40vw;
  }
}
body #apps ul li h3 {
  font-family: urbane,  helvetica neue , helvetica, arial, sans-serif;
  font-size: 2vw;
  line-height: 1.2em;
  color: #fff;
  font-weight: 500;
}
@media only screen and (max-width : 900px) {
  body #apps ul li h3 {
    font-size: 2.5vw;
  }
}
@media only screen and (max-width : 600px) {
  body #apps ul li h3 {
    font-size: 8vw;
  }
}
body #apps ul li p {
  font-size: 1.5vw;
  line-height: 1.5em;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 300;
  margin-bottom: 1em;
  min-height: 2.65em;
}
@media only screen and (max-width : 900px) {
  body #apps ul li p {
    font-size: 2vw;
  }
}
@media only screen and (max-width : 600px) {
  body #apps ul li p {
    font-size: 5vw;
    min-height: auto;
  }
}
body #apps ul li .os {
  flex-direction: column;
  align-items: center;
  margin-bottom: 0;
}
body #apps ul li .os li {
  font-family: urbane,  helvetica neue , helvetica, arial, sans-serif;
  width: 12vw;
  margin-bottom: 0.9vw;
  font-size: 1.5vw;
  line-height: 1.5vw;
  font-weight: 600;
}
@media only screen and (max-width : 900px) {
  body #apps ul li .os li {
    font-size: 2vw;
  }
}
@media only screen and (max-width : 600px) {
  body #apps ul li .os li {
    width: 36vw;
    margin-bottom: 4vw;
    border: none;
    padding: 0;
  }
}
body #apps ul li .os li a {
  color: #fff;
  display: block;
  text-decoration: none;
  border-radius: 2vw;
  padding: 0.8vw 0;
  background: rgb(255, 53, 67);
  background: color(display-p3 1 0.302 0.302);
  transition: 0.1s ease-out;
}
@media only screen and (max-width : 900px) {
  body #apps ul li .os li a {
    padding: 1.5vw 0;
  }
}
@media only screen and (max-width : 600px) {
  body #apps ul li .os li a {
    font-size: 5vw;
    padding: 5vw 0;
    border-radius: 7vw;
  }
}
body #apps ul li .os li a:hover {
  transform: scale(1.1);
  background: rgb(255, 67, 80);
  background: color(display-p3 1 0.345 0.345);
}
body #apps ul li .os li.mac a {
  background: rgb(72, 98, 135);
}
body #apps ul li .os li.mac a:hover {
  background: rgb(88, 128, 185);
}
body #apps ul li .os li.disabled a:hover {
  transform: none;
}
body #apps ul li .links {
  flex-direction: column;
  align-items: center;
}
@media only screen and (max-width : 600px) {
  body #apps ul li .links {
    padding-bottom: 7vw;
  }
}
body #apps ul li .links li {
  text-align: left;
  width: 11vw;
  font-size: 1.2vw;
  margin-bottom: 0;
  line-height: 1.7em;
}
@media only screen and (max-width : 900px) {
  body #apps ul li .links li {
    font-size: 1.6vw;
    line-height: 2em;
  }
}
@media only screen and (max-width : 600px) {
  body #apps ul li .links li {
    font-size: 5vw;
    width: 32vw;
    border: none;
    padding: 0;
  }
}
body #apps ul li .links li a {
  display: flex;
  text-decoration: none;
  color: #858890;
  align-items: center;
  transition: 0.3s ease-in-out;
}
body #apps ul li .links li a svg {
  margin-right: 0.3vw;
  width: auto;
  height: 1.5vw;
}
body #apps ul li .links li a svg path {
  fill: #858890;
  transition: 0.3s ease-in-out;
}
@media only screen and (max-width : 600px) {
  body #apps ul li .links li a svg {
    height: 5vw;
    margin-right: 1vw;
  }
}
body #apps ul li .links li a:hover {
  color: #fff;
}
body #apps ul li .links li a:hover svg path {
  fill: #fff;
}
body #apps ul li .links li.disabled a:hover {
  color: #858890;
}
body #apps ul li .links li.disabled a:hover svg path {
  fill: #858890;
}
body #apps .wrap {
  padding: 7vw 0;
}
@media only screen and (max-width : 600px) {
  body #apps .wrap {
    text-align: left;
  }
}
body #about {
  background: url(img/grid.png) repeat 0 0;
  background-color: rgb(211, 73, 73);
  background-color: color(display-p3 0.827 0.286 0.286);
  transform: skewy(-6deg);
  padding: var(--skew-padding) 0;
  margin-top: var(--skew-margin);
}
body #about h3 {
  font-family: urbane,  helvetica neue , helvetica, arial, sans-serif;
  font-size: 6vw;
  line-height: 1em;
  margin-top: 1vw;
  font-weight: 600;
  color: #fff;
  margin-bottom: 2vw;
}
@media only screen and (max-width : 600px) {
  body #about h3 {
    font-size: 12vw;
    margin-top: 130vw;
    margin-bottom: 4vw;
  }
}
body #about p.subhead {
  font-family: urbane,  helvetica neue , helvetica, arial, sans-serif;
  font-size: 3vw;
  font-weight: 300;
  margin-bottom: 2vw;
  line-height: 1.2em;
  color: rgb(255, 179, 181);
  color: color(display-p3 1 0.718 0.718);
}
@media only screen and (max-width : 600px) {
  body #about p.subhead {
    font-size: 8vw;
    margin-bottom: 4vw;
  }
}
body #about p {
  font-size: 1.5vw;
  font-weight: 300;
  line-height: 1.5em;
  color: rgb(255, 179, 181);
  color: color(display-p3 1 0.718 0.718);
  margin-bottom: 4vw;
}
@media only screen and (max-width : 600px) {
  body #about p {
    font-size: 5vw;
    margin-bottom: 6vw;
  }
}
body #about ul {
  background: rgb(255, 72, 81);
  background: color(display-p3 0.933 0.345 0.345);
  border-radius: 3vw;
  padding: 1.5vw 2vw 1.5vw 1.5vw;
  width: 15vw;
}
@media only screen and (max-width : 600px) {
  body #about ul {
    width: 66vw;
    margin-bottom: 20vw;
    padding: 6vw 8vw 0 6vw;
    border-radius: 8vw;
  }
}
body #about ul li {
  clear: both;
}
body #about ul li img {
  float: left;
  margin-bottom: 1em;
  width: 4vw;
  height: auto;
  clip-path: circle();
}
@media only screen and (max-width : 600px) {
  body #about ul li img {
    width: 14vw;
    margin-bottom: 6vw;
  }
}
body #about ul li h4 {
  font-family: urbane,  helvetica neue , helvetica, arial, sans-serif;
  color: #fff;
  font-weight: 500;
  margin-left: 5vw;
  font-size: 1.4vw;
  line-height: 1em;
}
@media only screen and (max-width : 600px) {
  body #about ul li h4 {
    margin-left: 16vw;
    font-size: 4vw;
  }
}
body #about ul li .caption {
  color: rgb(255, 179, 181);
  color: color(display-p3 1 0.718 0.718);
  font-weight: 300;
  margin-left: 5vw;
  font-size: 1.2vw;
  line-height: 1em;
  margin-bottom: 0.5vw;
}
@media only screen and (max-width : 600px) {
  body #about ul li .caption {
    margin-left: 16vw;
    font-size: 4vw;
    margin-bottom: 1vw;
  }
}
body #about ul li p {
  margin-left: 5vw;
  margin-bottom: 0;
  font-size: 1.2vw;
  line-height: 1em;
}
@media only screen and (max-width : 600px) {
  body #about ul li p {
    margin-left: 16vw;
    font-size: 4vw;
    margin-bottom: 1vw;
  }
}
body #about ul li p a {
  color: rgb(255, 255, 100);
  text-decoration: none;
  display: flex;
  align-items: center;
  transition: 0.3s ease-out;
}
body #about ul li p a svg {
  margin-right: 0.3vw;
  width: 1.4vw;
  height: auto;
}
@media only screen and (max-width : 600px) {
  body #about ul li p a svg {
    margin-right: 1vw;
    width: 4vw;
  }
}
body #about ul li p a svg path {
  fill: rgb(255, 255, 100);
  fill: color(display-p3 1 1 0.49);
  transition: 0.3s ease-out;
}
body #about ul li p a:hover {
  color: #fff;
}
body #about ul li p a:hover svg path {
  fill: rgb(255, 255, 255);
}
body #about ul li:first-child {
  margin-bottom: 20px;
}
body #about #team {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
@media only screen and (max-width : 600px) {
  body #about #team {
    flex-direction: column;
  }
}
body #about #team .group {
  width: 39vw;
}
@media only screen and (max-width : 600px) {
  body #about #team .group {
    width: auto;
  }
}
body #about .container {
  display: flex;
  align-items: center;
  padding: 0 0;
  background: url(img/wrench.png) no-repeat 0 50%;
  background-size: 28vw auto;
  transform: skewy(6deg);
  min-height: 60vw;
}
@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) {
  body #about .container {
    background-image: url("img/wrench@2x.png");
    background-size: 28vw auto;
  }
}
@media only screen and (max-width : 600px) {
  body #about .container {
    background-position: 0 5%;
    background-size: 65vw auto;
  }
}
@media only screen and (max-width : 600px) and (min--moz-device-pixel-ratio: 1.3), only screen and (max-width : 600px) and (-o-min-device-pixel-ratio: 2.6/2), only screen and (max-width : 600px) and (-webkit-min-device-pixel-ratio: 1.3), only screen and (max-width : 600px) and (min-device-pixel-ratio: 1.3), only screen and (max-width : 600px) and (min-resolution: 1.3dppx) {
  body #about .container {
    background-image: url("img/wrench@2x.png");
    background-size: 65vw auto;
  }
}
body #about .container .wrap {
  text-align: left;
  width: 59.5vw;
  margin: 0 0 0 30.5vw;
}
@media only screen and (max-width : 600px) {
  body #about .container .wrap {
    width: auto;
    margin: auto;
  }
}
body #help {
  background-color: #fff;
  transform: skewY(-6deg);
  padding: var(--skew-padding) 0;
  margin: var(--skew-margin) 0;
}
body #help .container {
  background: url(img/truck.jpg) no-repeat 100% 50%;
  background-size: 100% auto;
  transform: skewY(6deg);
  padding: 6vw 0;
  text-align: left;
}
@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) {
  body #help .container {
    background-image: url("img/truck@2x.jpg");
    background-size: 100% auto;
  }
}
@media only screen and (max-width : 600px) {
  body #help .container {
    background-position: 100% 130%;
    background-size: 150% auto;
  }
}
body #help .container .wrap {
  text-align: left;
  max-width: 80vw;
  margin: 0 0 0 10vw;
}
body #help .container h3 {
  font-family: urbane,  helvetica neue , helvetica, arial, sans-serif;
  font-size: 7vw;
  line-height: 1em;
  font-weight: 600;
  color: rgb(255, 53, 67);
  color: color(display-p3 1 0.302 0.302);
  margin-bottom: 2vw;
}
@media only screen and (max-width : 600px) {
  body #help .container h3 {
    font-size: 11vw;
    margin-top: 5vw;
  }
}
body #help .container h4 {
  font-family: urbane,  helvetica neue , helvetica, arial, sans-serif;
  font-size: 2vw;
  line-height: 1.5em;
  font-weight: 500;
  color: #606060;
  margin-bottom: 2vw;
}
@media only screen and (max-width : 900px) {
  body #help .container h4 {
    font-size: 2.5vw;
  }
}
@media only screen and (max-width : 600px) {
  body #help .container h4 {
    font-size: 5vw;
  }
}
body #help .container p {
  font-size: 1.5vw;
  color: #5F5F5F;
  font-weight: 300;
  line-height: 1.5em;
}
@media only screen and (max-width : 900px) {
  body #help .container p {
    font-size: 2vw;
    margin-right: 20vw;
  }
}
@media only screen and (max-width : 600px) {
  body #help .container p {
    font-size: 5vw;
    margin-right: 0;
    margin-bottom: 55vw;
  }
}
body #help .container p a {
  color: #3A3A3A;
  font-weight: 400;
  text-decoration: none;
  transition: 0.3s ease-out;
}
body #help .container p a svg {
  vertical-align: middle;
  height: 2vw;
  width: auto;
  margin: 0 0 0 0.2vw;
}
body #help .container p a svg path {
  fill: #3A3A3A;
  transition: 0.3s ease-out;
}
@media only screen and (max-width : 600px) {
  body #help .container p a svg {
    height: 5vw;
  }
}
body #help .container p a:hover {
  color: #8b8b8b;
}
body #help .container p a:hover svg path {
  fill: #8b8b8b;
}
body #help .container ul {
  margin-bottom: 2vw;
}
@media only screen and (max-width : 600px) {
  body #help .container ul {
    margin-bottom: 6vw;
  }
}
body #help .container ul li {
  line-height: 1.5em;
  font-size: 1.5vw;
  font-weight: 400;
  margin-bottom: 1vw;
  margin-left: 1vw;
}
@media only screen and (max-width : 900px) {
  body #help .container ul li {
    font-size: 2vw;
  }
}
@media only screen and (max-width : 600px) {
  body #help .container ul li {
    font-size: 4vw;
    margin-bottom: 1.5vw;
  }
}
body #help .container ul li a {
  display: flex;
  width: 15vw;
  align-items: center;
  justify-content: flex-start;
  color: rgb(52, 167, 182);
  text-decoration: none;
  transition: 0.3s ease-out;
}
@media only screen and (max-width : 900px) {
  body #help .container ul li a {
    width: 20vw;
  }
}
@media only screen and (max-width : 600px) {
  body #help .container ul li a {
    width: 40vw;
  }
}
body #help .container ul li a img {
  max-width: 32px;
  max-height: 32px;
  width: 2vw;
  height: auto;
  margin-right: 0.5vw;
}
@media only screen and (max-width : 600px) {
  body #help .container ul li a img {
    width: 5vw;
    margin-right: 2vw;
  }
}
body #help .container ul li a:hover {
  color: rgb(11, 209, 231);
}
body #help .container ul.tweet img {
  clip-path: circle();
}
body #footer {
  padding-top: 25vw;
  background: url(img/blueprint.jpg) no-repeat 50% 0;
  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) {
  body #footer {
    background-image: url("img/blueprint@2x.jpg");
    background-size: 100% auto;
  }
}
body #footer .container {
  display: flex;
  align-items: flex-end;
  padding-bottom: 2vw;
}
body #footer .container svg {
  width: auto;
  height: 4vw;
  margin-bottom: 20px;
}
@media only screen and (max-width : 900px) {
  body #footer .container svg {
    height: 5vw;
  }
}
@media only screen and (max-width : 600px) {
  body #footer .container svg {
    height: 10vw;
  }
}
body #footer .container svg path {
  fill: #fff;
}
body #footer .container p {
  font-size: 1.5vw;
  font-weight: 300;
  line-height: 1.5em;
  color: #6E7787;
  margin-bottom: 1vw;
}
@media only screen and (max-width : 900px) {
  body #footer .container p {
    font-size: 2vw;
  }
}
@media only screen and (max-width : 600px) {
  body #footer .container p {
    font-size: 3.5vw;
    margin-bottom: 2vw;
  }
}
body #footer .container ul li {
  display: inline-block;
  margin: 0 1vw;
  font-size: 1.5vw;
  line-height: 1em;
}
@media only screen and (max-width : 600px) {
  body #footer .container ul li {
    display: block;
    text-align: center;
  }
}
@media only screen and (max-width : 900px) {
  body #footer .container ul li {
    font-size: 2vw;
  }
}
@media only screen and (max-width : 600px) {
  body #footer .container ul li {
    font-size: 3.5vw;
  }
}
body #footer .container ul li a {
  color: rgb(255, 53, 67);
  color: color(display-p3 1 0.302 0.302);
  text-decoration: none;
  display: flex;
  white-space: nowrap;
  transition: 0.3s ease-out;
}
body #footer .container ul li a svg {
  margin-right: 0.5vw;
  width: auto;
  height: 1.5vw;
}
@media only screen and (max-width : 900px) {
  body #footer .container ul li a svg {
    height: 2vw;
  }
}
@media only screen and (max-width : 600px) {
  body #footer .container ul li a svg {
    height: 3.5vw;
    margin-right: 1vw;
  }
}
body #footer .container ul li a svg path {
  fill: rgb(255, 53, 67);
  fill: color(display-p3 1 0.302 0.302);
  transition: 0.3s ease-out;
}
body #footer .container ul li a:hover {
  color: #fff;
}
body #footer .container ul li a:hover svg path {
  fill: #fff;
}

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