.green {
  background-color: #d3f3e6;
}
.blue {
  background-color: #aad6fb;
}
.yellow {
  background-color: #fcf3b0;
}
.orange {
  background-color: #f6c6b4;
}
.pink {
  background-color: #ffaabf;
}
.purple {
  background-color: #daa9ff;
}
.turquoise {
  background-color: #b8ebe6;
}
.facebook {
  background-color: #0084ff;
}
.twitter {
  background-color: #1da0f2;
}
.instagram {
  background-color: #654dff;
}
.pressCoverage {
  max-height: 25px;
}
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
aside {
  float: right;
}
body {
  font-family: "Benton Sans", "Helvetica Neue", Sans-serif;
  color: #222;
  background-color: #f5f5f5;
  padding: 1rem 20px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1000px;
}
@media (max-width: smallViewport) {
  body {
    padding-left: 20px;
    padding-right: 20px;
  }
}
header {
  margin-top: 1rem;
  position: relative;
}
header .logo {
  vertical-align: middle;
  margin-right: 5px;
  width: 70px;
}
header .beta {
  position: absolute;
  font-size: 14px;
  right: 0;
  top: 0;
}
h1,
h2 {
  font-weight: bold;
  text-align: left;
}
h1 {
  font-size: 28px;
}
h2 {
  font-size: 23px;
}
h3,
h4 {
  font-size: 16px;
  display: inline-block;
  margin: 12px;
}
h5 {
  display: inline-block;
  padding: 3px;
  padding-bottom: 0px;
  padding-top: 2px;
  margin: 0px;
  margin-top: 3px;
  border-radius: 3px;
  background-color: #daa9ff;
  position: relative;
  top: -2px;
  color: #000;
  font-weight: bold;
  font-size: 70%;
}
p {
  line-height: 20px;
}
a {
  color: #222;
  text-decoration: none;
}
img,
video {
  max-width: 100%;
}
hr {
  background-color: #e5e5e5;
  height: 1px;
  border: none;
}
.hidden {
  display: none !important;
}
.bmiddle {
  margin-top: 1em;
}
main,
section {
  clear: both;
}
section,
article {
  margin-top: 1rem;
}
section {
  margin-top: 3rem;
}
section h2,
section h3 {
  display: inline-block;
  -webkit-transform: rotate(-1deg);
  transform: rotate(-1deg);
  z-index: 0;
  background-color: #fff;
  padding: 4px 8px;
  border-radius: 8px;
}
section h2 span,
section h3 span {
  display: inline-block;
  -webkit-transform: rotate(1deg);
  transform: rotate(1deg);
}
section .nobg {
  background-color: transparent !important;
}
section ul li a {
  color: #00f;
}
section h1,
section h2.introheader {
  padding: 0px;
}
section h1 span,
section h2.introheader span {
  display: inline-block;
  z-index: 0;
  padding: 2px 2px;
  border-radius: 8px;
  margin: 0 5px;
}
section h1 span span.highlight,
section h2.introheader span span.highlight {
  -webkit-transform: rotate(-1deg);
  transform: rotate(-1deg);
  padding: 2px 4px;
}
section h1 span span.highlight span,
section h2.introheader span span.highlight span {
  display: inline-block;
  -webkit-transform: rotate(1deg);
  transform: rotate(1deg);
}
section.intro {
  position: relative;
}
.example {
  margin-top: 14px;
}
article {
  position: relative;
  background-color: #fff;
  border-radius: 5px;
}
article h3,
article h4,
article p {
  margin-left: 12px;
  margin-right: 12px;
}
article h3 a,
article h4 a,
article p a {
  color: #00f;
}
article h3,
article h4 {
  background-color: transparent;
  padding: 0px;
}
article.press h3,
article.press h4 {
  background-color: transparent;
}
footer a {
  color: #3652d3;
}
footer a:hover {
  text-decoration: underline;
}
.input-group input {
  width: 60px;
  text-align: center;
  line-height: 18px;
  height: 31px;
  font-size: 1em;
  border: solid #222 2px;
  border-radius: 5px;
}
.input-group .html {
  position: relative;
  left: 6px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
  .input-group .html {
    top: 3px;
  }
}
@supports (-moz-appearance: none) {
  .input-group .html {
    top: 1px;
  }
}
.header-info a {
  color: #000;
  margin: 0 6px;
}
.use-cases p.summary,
.team-page p.summary,
.analytics p.summary {
  max-width: 420px;
  padding: 20px 0px;
}
@media (max-width: 968px) {
  .use-cases p.summary,
  .team-page p.summary,
  .analytics p.summary {
    padding-bottom: 12px;
  }
}
.head_summary {
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
  font-weight: bold;
}
.notification {
  text-align: left;
  position: absolute;
  background-color: #c3e2ff;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 8px;
  border-radius: 5px;
  -webkit-transition: 0.2s all;
  transition: 0.2s all;
  -webkit-transform: rotate(-5deg);
          transform: rotate(-5deg);
}
.notification:hover {
  -webkit-transform: rotate(0);
          transform: rotate(0);
}
.beta {
  font-weight: 600;
  background-color: #fcf3b0;
  padding: 3px;
}
.nav {
  margin-top: 1em;
  margin-bottom: 1em;
}
.nomargin {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}
@media (max-width: 968px) {
  .upcoming ul {
    display: inline;
  }
}
.button,
button {
  font-family: "Benton Sans", "Helvetica Neue", Sans-serif;
  text-align: left;
  font-size: 14px;
  line-height: 14px;
  font-weight: 600;
  background-color: #fff;
  border: solid #222 2px;
  display: inline-block;
  border-radius: 5px;
  padding: 6px 12px;
  cursor: pointer;
}
.button:hover,
button:hover {
  background-color: #eaeaea;
  text-decoration: none;
}
.button:active,
button:active,
.button.active,
button.active {
  background-color: #e8e8e8;
  color: #222;
}
.button.has-emoji,
button.has-emoji {
  padding-top: 5px;
  padding-bottom: 5px;
}
.button img,
button img {
  vertical-align: bottom;
}
.button-cta {
  font-family: "Benton Sans", "Helvetica Neue", Sans-serif;
  color: #222;
  background-color: #83ffcd;
  -webkit-box-shadow: 4px 4px 0 #222;
          box-shadow: 4px 4px 0 #222;
  margin-bottom: 2px;
  padding-bottom: 6px;
}
.button-cta:hover {
  background-color: #83ffcd;
  -webkit-box-shadow: 2px 2px 0 #222;
          box-shadow: 2px 2px 0 #222;
}
.button-cta:active {
  background-color: #83ffcd;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.button-snd-cta {
  font-family: "Benton Sans", "Helvetica Neue", Sans-serif;
  margin-left: 1em;
  -webkit-box-shadow: 4px 4px 0 #222;
          box-shadow: 4px 4px 0 #222;
  margin-bottom: 2px;
  padding-bottom: 6px;
}
.button-snd-cta:hover {
  -webkit-box-shadow: 2px 2px 0 #222;
          box-shadow: 2px 2px 0 #222;
}
.button-snd-cta:active {
  -webkit-box-shadow: none;
          box-shadow: none;
}
@media (max-width: 580px) {
  .button-snd-cta {
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-top: 1em;
  }
}
.button-small {
  font-family: "Benton Sans", "Helvetica Neue", Sans-serif;
  font-size: 12px;
  padding: 3px 8px;
  padding-top: 5px;
}
.button-small.has-emoji {
  padding-top: 3px;
  padding-bottom: 3px;
}
.button-small.has-emoji .status-badge {
  margin-right: 3px;
}
.button-small .loader {
  width: 15px;
  height: 15px;
  margin-right: 0;
}
.button-small .status-badge {
  display: inline;
  margin-left: 1px;
}
.emoji {
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: sub;
  background-repeat: no-repeat;
  background-size: contain;
}
.emoji.ambulance {
  background-image: url("https://cdn.glitch.com/cc880f8d-a84f-4909-b676-497522a8c625%2Fambulance.png?1522348095546");
}
.emoji.balloon {
  background-image: url("https://cdn.gomix.com/2bdfb3f8-05ef-4035-a06e-2043962a3a13%2Fballoon.png");
}
.emoji.bento-box {
  background-image: url("https://cdn.glitch.com/55f8497b-3334-43ca-851e-6c9780082244%2Fbento-box.png?1502469566743");
}
.emoji.bomb {
  background-image: url("https://cdn.glitch.com/f34c5d19-c958-40f6-b11f-7a4542a5ae5f%2Fbomb.png?1516646116574");
}
.emoji.carp_streamer {
  background-image: url("https://cdn.glitch.com/f7224274-1330-4022-a8f2-8ae09dbd68a8%2Fcarp_streamer.png?1495811307116");
}
.emoji.credit_card {
  background-image: url("https://cdn.glitch.com/c53fd895-ee00-4295-b111-7e024967a033%2Fcredit-card.png?1531500270157");
}
.emoji.dog-face {
  background-image: url("https://cdn.glitch.com/03736932-82dc-40e8-8dc7-93330c933143%2Fdog-face.png?1518194896589");
}
.emoji.eyes {
  background-image: url("https://cdn.glitch.com/9c72d8a2-2546-4c4c-9e97-2e6450752c11%2Feyes.png?1507674700306");
}
.emoji.facebook {
  background-image: url("https://cdn.gomix.com/2bdfb3f8-05ef-4035-a06e-2043962a3a13%2Ffacebook-logo.png");
  width: 15px;
  margin-left: 4px;
}
.emoji.fast-down {
  background-image: url("https://cdn.glitch.com/c53fd895-ee00-4295-b111-7e024967a033%2Ffast_down.png?1531842090363");
}
.emoji.fast-up {
  background-image: url("https://cdn.glitch.com/c53fd895-ee00-4295-b111-7e024967a033%2Ffast_up.png?1531842090613");
}
.emoji.herb {
  background-image: url("https://cdn.glitch.com/c53fd895-ee00-4295-b111-7e024967a033%2Fherb.png?1530822265585");
}
.emoji.microphone {
  background-image: url("https://cdn.glitch.com/9c72d8a2-2546-4c4c-9e97-2e6450752c11%2Fmicrophone.png?1507674704246");
}
.emoji.octocat {
  background-image: url("https://gomix.com/images/emojis/github-logo-light.svg");
  margin-left: 4px;
}
.emoji.sparkles {
  background-image: url("https://cdn.glitch.com/f7224274-1330-4022-a8f2-8ae09dbd68a8%2Fsparkles.png?1494859430570");
}
.emoji.pushpin {
  background-image: url("https://cdn.glitch.com/55f8497b-3334-43ca-851e-6c9780082244%2Fpushpin.png?1500918744339");
}
.emoji.thumbs_down {
  background-image: url("https://cdn.glitch.com/55f8497b-3334-43ca-851e-6c9780082244%2Fthumbs_down.png?1503415943993");
}
.emoji.thumbs_up {
  background-image: url("https://cdn.glitch.com/c53fd895-ee00-4295-b111-7e024967a033%2Fthumbs-up.png?1530883108902");
}
.emoji.framed_picture {
  background-image: url("https://cdn.glitch.com/f7224274-1330-4022-a8f2-8ae09dbd68a8%2Fframed_picture.png?1496341054682");
  margin-left: 2px;
  margin-bottom: 1px;
}
.emoji.sparkling_heart {
  background-image: url("https://cdn.glitch.com/f7224274-1330-4022-a8f2-8ae09dbd68a8%2Fsparkling_heart.png?1496347645716");
}
.emoji.wave {
  background-image: url("https://cdn.glitch.com/55f8497b-3334-43ca-851e-6c9780082244%2Fwave.png?1502123444938");
}
.emoji.rainbow {
  background-image: url("https://cdn.glitch.com/e5154318-7816-4ec9-a72a-a0e767031e99%2Frainbow.png?1533590257352");
}
.emoji.fishing_pole {
  background-image: url("https://cdn.glitch.com/55f8497b-3334-43ca-851e-6c9780082244%2Ffishing_pole.png?1503525896764");
}
.emoji.microphone {
  background-image: url("https://cdn.glitch.com/180b5e22-4649-4c71-9a21-2482eb557c8c%2Fmicrophone.png?1521056710182");
}
.emoji.diamond_small {
  background-image: url("https://cdn.glitch.com/180b5e22-4649-4c71-9a21-2482eb557c8c%2Fdiamond-small.svg?1521574997856");
}
.emoji.avatar {
  border-radius: 3px;
  margin-left: 2px;
}
.emoji.emoji-in-title {
  width: 20px;
  height: 20px;
  margin-left: 5px;
}
.about.intro {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  max-width: none;
  margin-top: 0;
  margin-bottom: 1em;
}
@media (max-width: 750px) {
  .about.intro {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
}
.about.intro .container.half {
  position: relative;
  width: 50%;
}
.about.intro h1.introheader {
  position: absolute;
  top: 0%;
  left: 22%;
  -webkit-transform: rotate(-5deg);
          transform: rotate(-5deg);
}
.about.intro p.subtitle {
  position: absolute;
  top: 45%;
  left: 10%;
  width: 60%;
}
.about.intro .container.half.introheader {
  background-image: url("https://cdn.glitch.com/d2b595e6-45a6-4ddc-8110-038cdb509b16%2Fabout-glitch-shape.svg?v=1560521674329");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  height: 300px;
  width: 80%;
}
@media (max-width: 750px) {
  .about.intro .container.half.introheader {
    margin-top: -30px;
    width: 80%;
  }
}
.about.intro .container.half.illustration {
  margin: 0 auto;
  width: 100%;
  height: -webkit-max-content;
  height: -moz-max-content;
  height: max-content;
  text-align: center;
}
.about.intro .container.half.illustration img {
  width: 100%;
}
@media (max-width: 750px) {
  .about.intro .container.half.illustration img {
    height: auto;
    margin-bottom: -30px;
  }
}
.creators {
  background: #fff;
  max-width: 100%;
  margin-top: 14px;
  padding: 15px 0px;
  text-align: center;
}
.creators article {
  border-radius: 5px;
  padding-left: 8px;
  display: contents !important;
}
.creators img {
  width: 45%;
  max-width: 210px;
  margin: 12px;
  margin-top: 0px;
  margin-left: 0px;
  border-radius: 5px;
}
.creators img:nth-of-type(even) {
  margin-right: 0;
}
.leads article img {
  max-width: 175px;
  margin: 12px;
  margin-bottom: 8px;
  margin-left: 0px;
  border-radius: 5px;
  max-height: 80px;
  margin-top: 0px;
}
.leads article span {
  display: inline-table;
}
.leads article span p {
  padding-top: 0px;
  margin-top: 0px;
}
.guide img {
  max-width: 31.6%;
  margin: 12px;
  margin-bottom: 8px;
  margin-left: 0px;
  border-radius: 5px;
}
.guide img:first-child {
  margin-left: 12px;
}
@media (max-width: 968px) {
  .guide article {
    display: none;
  }
}
.guide p,
.guide h2 {
  max-width: 500px;
  margin-right: auto;
}
.guide p {
  margin-left: 50px;
}
@media (max-width: 968px) {
  .guide p {
    margin-left: 0px;
  }
}
.nav {
  float: right;
}
.intro {
  margin-top: 3em;
  max-width: 520px;
  margin-right: auto;
}
.intro h1 {
  margin-bottom: 1em;
}
.intro .a {
  text-align: left;
}
.collaboration .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.collaboration article {
  width: calc(50% - 6px);
  margin-right: 12px;
}
.collaboration article:nth-of-type(even) {
  margin-right: 0;
}
@media (max-width: 580px) {
  .collaboration article {
    width: 100%;
    margin-right: 0;
  }
}
.collaboration p {
  margin: 12px;
  margin-top: 0;
  text-align: left;
}
.team-page,
.analytics {
  width: calc(50% - 20px);
  display: inline-block;
  vertical-align: top;
}
.team-page div,
.analytics div {
  border-radius: 5px;
}
.team-page h2,
.analytics h2,
.team-page .summary,
.analytics .summary {
  margin-bottom: 0;
  text-align: left;
}
.team-page h3,
.analytics h3 {
  -webkit-transform: rotate(-1deg);
          transform: rotate(-1deg);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-top: -10px;
  display: inherit;
  margin-left: 0;
  font-weight: 600;
}
.team-page .summary,
.analytics .summary {
  margin-left: 0;
  margin-top: 0px;
}
.team-page .container,
.analytics .container {
  position: relative;
}
.team-page article,
.analytics article {
  background-color: transparent;
  margin-top: 1em;
  width: calc(100% - 12px);
}
@media (max-width: 580px) {
  .team-page,
  .analytics {
    max-width: 100%;
    width: 100%;
    display: block;
  }
}
.team-page {
  margin-right: 25px;
}
.team-page .members {
  top: 26%;
  left: 50%;
}
.team-page .public {
  top: 55%;
  left: 21%;
}
.team-page .private {
  top: 64%;
  right: 24%;
}
.team-page .narrow {
  display: none;
}
@media (max-width: 580px) {
  .team-page .narrow {
    display: initial;
  }
  .team-page .wide {
    display: none;
  }
  .team-page .members {
    top: 18%;
    left: 59%;
  }
  .team-page .private {
    top: 76%;
    right: 11%;
  }
  .team-page .public {
    top: 48%;
    left: 18%;
  }
}
.analytics {
  margin-right: 0;
}
.analytics .activity {
  top: 36%;
  left: 34%;
}
.analytics .referrers {
  top: 61%;
  left: 20%;
}
.analytics .narrow {
  display: none;
}
@media (max-width: 580px) {
  .analytics .narrow {
    display: initial;
  }
  .analytics .wide {
    display: none;
  }
  .analytics .referrers {
    left: 34%;
    top: 58%;
  }
  .analytics .activity {
    left: 29%;
  }
}
.social-proof.companies .avatar {
  display: inline-block;
  max-width: 50px;
}
.social-proof p,
.social-proof h2 {
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
.social-proof .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.social-proof a,
.social-proof .a {
  width: calc(49.9% - 6px);
  margin-right: 12px;
}
.social-proof a:nth-of-type(2),
.social-proof .a:nth-of-type(2),
.social-proof a:nth-of-type(4),
.social-proof .a:nth-of-type(4) {
  margin-right: 0;
}
@media (max-width: 580px) {
  .social-proof a,
  .social-proof .a {
    width: 100%;
    margin: 0;
  }
  .social-proof a article,
  .social-proof .a article {
    margin-bottom: 0;
  }
}
.social-proof article.a {
  background-color: transparent !important;
}
.social-proof article.a .information {
  width: 100%;
}
.social-proof article.a .information p {
  text-align: left;
}
.social-proof article.a .information h3,
.social-proof article.a .information h4 {
  margin: 0px;
}
.social-proof article {
  -webkit-box-shadow: none;
          box-shadow: none;
  margin-bottom: 0;
}
.social-proof article .spotify {
  background-color: #cbf5e5;
}
.social-proof article .trello {
  background-color: #dbe5ea;
}
.social-proof article .slack {
  background-color: #ffd5c4;
}
.social-proof article .twitch {
  background-color: #efecfc;
}
.social-proof article .material {
  background-color: #aaede7;
}
.social-proof article .webdev {
  background-color: #aedfe3;
}
.social-proof article:hover button {
  -webkit-box-shadow: 2px 2px 0 #222;
          box-shadow: 2px 2px 0 #222;
}
.social-proof article p {
  text-align: left;
}
.social-proof .content {
  padding: 12px;
  background-color: #fff;
  border-radius: 5px;
}
.social-proof .avatar {
  display: block;
  width: auto;
  height: 80px;
  vertical-align: top;
  margin-bottom: 8px;
  margin-right: 8px;
  max-height: 80px;
}
.social-proof .information {
  display: inline-block;
  width: 80%;
}
.social-proof .information p {
  padding: 0;
  margin-top: 6px;
  margin-left: 0;
  margin-right: 0;
}
.social-proof .information p:last-child {
  margin-bottom: 0;
}
.social-proof .information .emoji {
  margin-left: 2px;
}
.social-proof .users {
  margin-top: 12px;
}
.social-proof .users img {
  display: inline-block;
  width: 32px;
  height: 32px;
}
.social-proof .users img:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.social-proof .users img:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
@media (max-width: 968px) {
  .social-proof .users {
    display: none;
  }
}
.social-proof .moreusers {
  margin-top: -6px;
}
.social-proof .moreusers img {
  display: inline-block;
  width: 32px;
  height: 32px;
}
.social-proof .moreusers img:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.social-proof .moreusers img:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
@media (max-width: 968px) {
  .social-proof .moreusers {
    display: none;
  }
}
.social-proof.contact p {
  margin-left: 50px;
}
.use-cases p,
.intro p {
  text-align: left;
  max-width: 520px;
  margin-left: 50px;
}
@media (max-width: 968px) {
  .use-cases p,
  .intro p {
    max-width: 100%;
    margin-left: 0px;
  }
}
.use-cases p a,
.intro p a {
  color: #00f;
}
.use-cases article,
.intro article {
  vertical-align: top;
  display: inline-block;
  width: calc(49.9% - 6px);
  margin-right: 12px;
}
.use-cases article:last-child,
.intro article:last-child,
.use-cases article:nth-of-type(even),
.intro article:nth-of-type(even) {
  margin-right: 0;
}
@media (max-width: 968px) {
  .use-cases article,
  .intro article {
    width: 100%;
    margin-right: 0;
  }
}
.use-cases article p,
.intro article p {
  margin: 12px;
  margin-top: 0;
  text-align: left;
}
.use-cases article .a,
.intro article .a {
  margin-top: 16px;
}
.use-cases .example,
.intro .example {
  margin-top: 0;
  padding-top: 0;
}
.use-cases .example img,
.intro .example img {
  margin-left: 5px;
  vertical-align: middle;
  width: 16px;
}
.press h3 {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
.outro {
  text-align: center;
}
.outro img {
  margin-top: 2rem;
  max-width: 340px;
}
footer .made-in-glitch {
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
}