* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -font-smoothing: antialiased;
  --black: #000;
  --white: #fff;
  --extra-light-gray: #f9f9f9;
  --light-gray: #d3d3d3;
  --dark-gray: #575759;
  --orange: #dd4814;
  --orange-faded: hsl(15, 70%, 94%);
  --red: #da4334;
  --green: #3ebf6a;
  --green-dark: #267340;
  --green-faded: rgba(62, 191, 106, .1);
}

body {
  scroll-behavior: smooth;
}

/* Custom container */
.container-fluid {
  position: relative;

  max-width: 960px;
  margin: 0 auto 4em;
  padding: 0 1em;
}

/* Custom container */
.container-wide {
  position: relative;

  max-width: 1400px;
  margin: 0 auto 4em;
  padding: 0 1em;
}

/*
TYPOGRAPHY
*/
h1,
h2,
h3 {
  line-height: 1.25;

  margin-top: 1.25em;
  margin-bottom: .25em;
}

h4,
h5,
h6 {
  margin-top: 1em;
  margin-bottom: .5em;
}

h1 {
  color: var(--black);
}
h2 {
  color: var(--black);
}
h3 {
  color: var(--dark-gray);
}
h4 {
  color: var(--green-dark);
}
h5 {
  color: var(--green-dark);
}
h6 {
  color: var(--dark-gray);
}

a.wordmark:hover,
.wordmark a:hover {
  text-decoration: none;
}

.well {
  display: inline-block;

  width: 100%;
  padding: .5em;
  overflow-x: scroll;

  color: var(--white);
  border: none;
  background: var(--black);
  -webkit-box-shadow: none;
          box-shadow: none;
}
.well pre,
.well code {
  margin: 0;

  color: var(--white);
  border: none;
  background: var(--black);
}

.underline {
  text-decoration: underline;
}

/*
NAVIGATION
*/

header {
  z-index: 1;

  width: 100%;
  margin: 0 auto;
  padding: 1em;
}

header .wordmark {
  position: absolute;

  display: inline-block;

  margin: .1em 0 0;
}

header a {
  -webkit-transition: all 85ms ease-in-out;
          transition: all 85ms ease-in-out;
}

header .wordmark a {
  padding: .5em;

  vertical-align: middle;
}

header nav ul {
  display: inline-block;

  margin: 0;

  text-transform: uppercase;
}

header nav .main {
  margin-left: 8em;
}

header nav li {
  display: inline-block;

  margin: .25em 1em;
}

header nav a {
  display: inline-block;

  padding: .5em .25em .25em;

  color: var(--black);
  border-bottom: 2px solid #eee;
}

header nav a:not(.btn):hover,
header nav a:not(.btn):focus {
  text-decoration: none;

  color: var(--orange);
  border-bottom: 2px solid var(--orange);
}

header nav .spacer {
  margin: 0 1em;
}

@media (max-width: 700px) {
  header {
      height: auto;
      padding: 0;

      text-align: center;
  }
  header .wordmark {
      top: .25em;
      right: 0;
      left: 0;

      margin: 0;
  }
  header nav {
      display: block;
      float: none;

      width: 100%;
      margin-left: auto;
      padding: 0;
  }
  header nav ul {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
      justify-content: space-evenly;
  }
  header nav .pull-right {
      float: none;
  }
  header nav .main {
      margin: 3.5em 0 0;
  }
  header nav li {
      margin: .5em .2em;
  }
  header nav a {
      padding: .25em;
  }
  header nav .spacer {
      display: none;
  }
}

#footer a {
  color: var(--dark-gray);
}

/*
Marketing pages
*/

.jumbotron-wide {
  margin: 6em auto;
}

.jumbotron {
  max-width: 920px;
  margin: 6em auto;

  text-align: center;
}

.jumbotron h1,
.jumbotron h2,
.jumbotron h3 {
  margin: 0 0 .25em;
}

.jumbotron .main-headline,
.jumbotron-wide .main-headline {
  min-height: 2.5em;
  height: auto;
  margin: 1em auto .5em;
}

.main-headline .underline {
  position: relative;
  border-bottom: 6px solid var(--orange);
  text-decoration: none;
}

.jumbotron .lead,
.jumbotron-wide .lead {
  max-width: 740px;
  margin: 0 auto 3em;

  color: var(--dark-gray);
}

@media (max-width: 700px) {
  .jumbotron {
      margin: 4em auto;
  }
}

.feature {
  min-height: 180px;
} /* The items on the old homepage and the FAQs on pricing/etc */

.use-case-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: row;
      flex-flow: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;

  max-width: 720px;
  margin: 8em auto 2em;
}

.use-case-list li {
  -webkit-box-flex: 1;
  -ms-flex: 1 320px;
      flex: 1 320px;

  min-width: 320px;
  max-width: 320px;
  margin: 1em;
  margin-bottom: 2em;
  padding: 1em;

  list-style: none;

  border: 1px solid var(--orange);
  border-radius: 10px;
  background: var(--orange-faded);
  -webkit-box-shadow: 0 5px 25px 3px var(--orange-faded);
          box-shadow: 0 5px 25px 3px var(--orange-faded);
}

.use-case-list h2 {
  line-height: 1.2;

  margin-top: 0;
  margin-bottom: .5em;

  color: var(--orange);
}

.use-case-list p {
  font-size: 1.25em;
  line-height: 1.6;
}

@media (max-width: 580px) {
  .use-case-list {
      max-width: 100%;

      grid-template-columns: 100%;
  }
  .use-case-list li {
      margin-right: 0;
  }
}

.use-cases {
  max-width: 760px;
  margin: 8em auto;
  padding: 0 1em;
}

.use-cases .row-fluid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: column nowrap;
      flex-flow: column nowrap;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
}

.use-case-list-2 {
  margin: 0 auto 4em;
}

.use-case-list-2 h1 {
  margin-bottom: .75em;

  text-align: center;
}

.use-case-list-2 li {
  font-size: 1.5em;
  line-height: 1.4;
}

.use-case-list-2 p {
  margin-bottom: 0;
}

/*
Container styles
*/

.card-container {
  min-width: 280px;
  width: calc(50% - 1em);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;

  padding: 1em;
  margin: 0 1em 1em 0;

  background-color: #fff;
  border: 1px solid var(--light-gray);
  border-bottom-width: 3px;
  border-radius: 10px;

  vertical-align: top;

  -webkit-transition: all 125ms ease-in-out;
  transition: all 125ms ease-in-out;
}

.card-container.wide {
  width: 100%;
}

.card-container h4 {
  margin: .5em auto 1em;
  color: var(--dark-gray);
}

.card-container img.featured {
  margin-top: 10px;
  padding: 4px;
  border: 1px solid var(--light-gray);
  border-radius: 5px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.card-container a img.featured:hover {
  border-color: var(--orange);
  -webkit-box-shadow: 0 0 5px var(--orange-faded);
          box-shadow: 0 0 5px var(--orange-faded);
}

.card-container p,
.card-container div {
  margin: 1em 0 0;
}

.callout-container {
  max-width: 540px;
  margin: 0 auto 1em;
  padding: 1em 1.5em;

  list-style: none;

  text-shadow: 1px 1px #fff;
  border: 2px solid var(--orange);
  border-bottom-width: 5px;
  border-radius: 15px;
  background-color: rgba(221, 72, 20, .05);
}

.callout-container strong {
  display: block;

  margin-bottom: .5em;

  font-size: 1.25em;
  text-align: center;

  color: var(--orange);
}

.callout-container p {
  color: var(--orange);
}

.callout-container a {
  text-decoration: underline;
}

.customer-logos {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: row wrap;
      flex-flow: row wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-pack: distribute;
  justify-content: space-around;

  margin: 4em auto .5em;
  padding: 0;

  list-style: none;
}

.customer-logos img {
  height: 30px;
  padding: 4px;
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
  opacity: .65;
  -webkit-transition: opacity 125ms ease-out;
          transition: opacity 125ms ease-out;
}

.customer-logos a {
  display: inline-block;
  -webkit-box-flex: 1;
  -ms-flex: 1 100px;
      flex: 1 100px;

  margin: .5em 1em;

  -webkit-transition: opacity 125ms ease-out;
          transition: opacity 125ms ease-out;
  text-decoration: none;
}

.customer-logos a:hover,
.customer-logos a:hover img {
  -webkit-filter: grayscale(0);
          filter: grayscale(0);
  opacity: 1;
}

.inspector-demo {
  display: block;
  max-width: 100%;
  width: 580px;
  margin: 1em auto;
  border: 1px solid var(--light-gray);
  border-radius: 5px;
}

.tweets {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: row wrap;
      flex-flow: row wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.tweets .card-container {
  display: inline-block;
  -webkit-box-flex: 1;
  -ms-flex: 1 320px;
      flex: 1 320px;

  min-width: 320px;
  max-width: 320px;
  margin: .75em;
  padding: 1em;

  text-align: left;
}

.tweets .avatar {
  width: 3em;
  height: 3em;
  margin-right: .5em;

  vertical-align: middle;

  border-radius: 50%;
}

.tweets .username {
  font-size: 1.5em;
  font-weight: bold;
}

.tweets p {
  font-size: 1.25em;
  line-height: 1.4;

  margin-top: .5em;
}

.wall-of-love.tweets p {
  margin-top: 0;
  margin-bottom: 1em;
}

/*
ngrok demo
*/

.ngrok-demo {
  position: relative;

  overflow: visible;

  width: 100%;
  max-width: 640px;
  height: auto;
  max-height: 540px;
  margin-top: 2em;

  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  pointer-events: none;

  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
}

.ngrok-demo g {
  -webkit-transition: all 1200ms cubic-bezier(.4, .54, .27, .99);
          transition: all 1200ms cubic-bezier(.4, .54, .27, .99);

  will-change: transform, opacity;
}
.ngrok-demo text,
.ngrok-demo tspan {
  font-family: UbuntuMono-Regular, 'Ubuntu Mono', 'Ubuntu', monospace, Tahoma,
  sans-serif;

  -webkit-transition: all 125ms ease-in-out;
          transition: all 125ms ease-in-out;

  will-change: transform, opacity;
}

.ngrok-demo .browser,
.ngrok-demo .terminal {
  position: absolute;

  -webkit-transform: translate(40px, 60px) skew(0deg, 0deg) rotate(0deg);
          transform: translate(40px, 60px) skew(0deg, 0deg) rotate(0deg);
  -webkit-transform-origin: center;
          transform-origin: center;
}
.ngrok-demo.spread-windows .browser {
  -webkit-transform: translate(10px, 20px) translate3d(0, 0, 0);
          transform: translate(10px, 20px) translate3d(0, 0, 0);
}
.ngrok-demo.spread-windows .terminal {
  -webkit-transform: translate(70px, 140px) translate3d(0, 0, 0);
          transform: translate(70px, 140px) translate3d(0, 0, 0);
}
.ngrok-demo .python-text {
  -webkit-transition: all 500ms ease-in-out;
          transition: all 500ms ease-in-out;
}
.ngrok-demo .python-text.slide-up {
  -webkit-transform: translateY(-25px) translate3d(0, 0, 0);
          transform: translateY(-25px) translate3d(0, 0, 0);

  opacity: 0;
}
.ngrok-demo .python-text .response {
  opacity: 0;

  fill-opacity: 0;
}
.ngrok-demo .ngrok-text {
  opacity: 0;
}
.ngrok-demo .ngrok-text.move-up {
  -webkit-transition-delay: 125ms;
          transition-delay: 125ms;
  -webkit-transform: translateY(-56px) translate3d(0, 0, 0);
          transform: translateY(-56px) translate3d(0, 0, 0);
}
.ngrok-demo .ngrok-text .response {
  opacity: 0;
}
.ngrok-demo .terminal .show {
  opacity: 1;

  fill-opacity: 1;
}
.ngrok-demo .browser .kates-site {
  -webkit-transition-delay: 250ms;
          transition-delay: 250ms;
  -webkit-transform: translate(100px, 74px) translate3d(0, 0, 0);
          transform: translate(100px, 74px) translate3d(0, 0, 0);

  opacity: 0;
}
.ngrok-demo .browser .kates-site.fade-in {
  -webkit-transform: translate(100px, 54px) translate3d(0, 0, 0);
          transform: translate(100px, 54px) translate3d(0, 0, 0);

  opacity: 1;
}

/*
DOCUMENTATION STYLES
*/

.docs-main nav {
  height: 3.5rem;

  border-bottom: 1px solid var(--light-gray);
}

.docs-main .container {
  width: calc(100vw - 360px);
  max-width: 740px;
  margin-left: 340px;
  padding: 0 2em;

  scroll-behavior: smooth;
}

.docs-main h2 {
  color: var(--orange);
}
.docs-main h2,
.docs-main h3 {
  margin-top: .5em;
  padding-top: .5em;
}

.docs-navigation li:first-of-type > h4 {
  margin-top: .5em;
}

@media (max-width: 700px) {
  .docs-main {
      position: relative;

      overflow: hidden;
  }
  .docs-main nav {
      height: auto;
      margin-bottom: 2em;

      border: none;
  }
  .docs-main .container {
      width: 100%;
      margin-left: auto;
      padding: 0;
  }
  .docs-main td code {
      white-space: normal;
      word-break: break-word;
  }
}

.docs-navigation {
  position:         sticky;
  position: -webkit-sticky;

  top: 1em;
  left: 1em;

  display: block;
  float: left;
  overflow-y: scroll;

  width: 300px;
  max-height: calc(100vh - 3em);
  margin-top: 2em;

  border: 1px solid var(--light-gray);
  border-radius: 10px;
  padding: 1em;
}

.docs-nav-toggle {
  display: none;
}

@media (max-width: 700px) {
  .docs-navigation {
      position: fixed;
      z-index: 3;
      top: inherit;
      right: 1em;
      bottom: 1em;
      left: 1em;

      overflow: hidden;

      width: calc(100vw - 2em);
      height: calc(100% - 6em);
      margin: 0;
      padding: 0 1em 1em;

      -webkit-transition: -webkit-transform 500ms cubic-bezier(.835, -.15, .125, .965),
      -webkit-box-shadow 250ms linear;
              transition: -webkit-transform 500ms cubic-bezier(.835, -.15, .125, .965),
      -webkit-box-shadow 250ms linear;
              transition:         transform 500ms cubic-bezier(.835, -.15, .125, .965),
      box-shadow 250ms linear;
              transition:         transform 500ms cubic-bezier(.835, -.15, .125, .965),
      box-shadow 250ms linear,
      -webkit-transform 500ms cubic-bezier(.835, -.15, .125, .965),
      -webkit-box-shadow 250ms linear;
      -webkit-transform: translateY(100vh) scale(.9);
              transform: translateY(100vh) scale(.9);

      border: 1px solid var(--light-gray);
      border-radius: 10px;
      background-color: var(--white);
      -webkit-box-shadow: 0 0 5em 125vh hsla(240, 0%, 27%, 0);
              box-shadow: 0 0 5em 125vh hsla(240, 0%, 27%, 0);

      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
  }
  .docs-nav-toggle {
      font-weight: bold;

      position: fixed;
      z-index: 4;
      top: .75em;
      right: .75em;

      display: inline-block;

      padding: .5em 1em;

      cursor: pointer;
      /*box-shadow: 0 0 .5em 0 hsla(240, 0%, 27%, .15);*/

      opacity: .9;
      border: 1px solid var(--light-gray);
      border-radius: 10px;
      background: var(--white);
  }
  .docs-navigation.active {
      overflow: scroll;

      -webkit-transition: -webkit-transform 500ms cubic-bezier(.835, -.15, .125, .965),
      -webkit-box-shadow 850ms ease-in-out;
              transition: -webkit-transform 500ms cubic-bezier(.835, -.15, .125, .965),
      -webkit-box-shadow 850ms ease-in-out;
              transition:         transform 500ms cubic-bezier(.835, -.15, .125, .965),
      box-shadow 850ms ease-in-out;
              transition:         transform 500ms cubic-bezier(.835, -.15, .125, .965),
      box-shadow 850ms ease-in-out,
      -webkit-transform 500ms cubic-bezier(.835, -.15, .125, .965),
      -webkit-box-shadow 850ms ease-in-out;
      -webkit-transform: translateY(0) scale(1);
              transform: translateY(0) scale(1);

      -webkit-box-shadow: 0 0 5em 125vh hsla(240, 0%, 27%, .65);
              box-shadow: 0 0 5em 125vh hsla(240, 0%, 27%, .65);
  }
  .docs-navigation.active + .docs-main {
      overflow: hidden;

      height: calc(100vh - 10em);

      pointer-events: none;
  }
  .docs-navigation li > a {
      line-height: 2;

      padding: .7em .25em;
  }
}

.docs-navigation li > a {
  color: var(--black);
}

.docs-navigation h2,
.docs-navigation h4 {
  margin: 1em 0 .25em;
}

.docs-main h3 code {
  font-size: 16px;

  color: var(--dark-green);
}

.docs-main .endpoint {
  display: inline-block;
  overflow: hidden;
}

.docs-main .endpoint .verb,
.docs-main .endpoint .path {
  display: inline-block;

  padding: .25em .5em;
}

.docs-main .endpoint .verb {
  color: var(--white);
  border: 1px solid var(--black);
  border-radius: .5em 0 0 .5em;
  background: var(--black);
}

.docs-main .endpoint .path {
  color: var(--black);
  border: 1px solid var(--light-gray);
  border-left: none;
  border-radius: 0 .5em .5em 0;
  background: var(--extra-light-gray);
}

.docs-main #footer {
  margin: 4em 0;
}

.signup-callout {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  padding: .75em 1em .25em;
  color: var(--dark-gray);
  background-color: var(--extra-light-gray);
  border-bottom: 1px solid var(--light-gray);
  z-index: 2;

  -webkit-transition: all 125ms ease-in-out;
  transition: all 125ms ease-in-out;
}

.signup-callout strong {
  display: block;
  color: var(--black);
  margin-bottom: 4px;
}

.signup-callout .underline {
  color: var(--orange);
}

.signup-callout:hover {
  text-decoration: none;
  color: var(--black);
  background-color: var(--orange-faded);
}

.docs-navigation .signup-callout { display: none; }

/*
  Download Instructions
*/

.download-signup-callout {
  display: block;
  margin: 1em auto 0;
  padding: .5em;

  text-align: center;
  text-decoration: none;
  color: var(--dark-gray);
  background-color: var(--extra-light-gray);
  border: 1px solid var(--light-gray);
  border-radius: 10px;

  -webkit-transition: all 125ms ease-in-out;
  transition: all 125ms ease-in-out;
}

.download-signup-callout .underline {
  color: var(--orange)
}

.download-signup-callout:hover {
  text-decoration: none;
  color: var(--orange);
  background-color: var(--orange-faded);
  border: 1px solid var(--orange);
}

.download-instructions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;

  margin: 0 auto 8em;
  padding: 0 2em;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;

  counter-reset: instructions;

  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}

.download-instructions .card-container {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 calc(25% - 1.5em);
          flex: 1 1 calc(25% - 1.5em);
  min-width: 280px;
  max-width: 480px;
  margin: .5em;
}

.download-instructions h4 {
  text-align: center;
}

.download-instructions h4:before {
  counter-increment: instructions;
  content: counter(instructions);

  padding: 3px 8px;
  margin-right: .5em;

  color: var(--orange);
  background-color: var(--extra-light-gray);
  border: .1em solid var(--orange);

  border-radius: 2em
}

/*
Download buttons
*/

.download-buttons {
  margin: 1em auto 0;
  text-align: center;
}

.download-buttons .detected {
  font-size: 1.25em;
  font-weight: bold;

  max-width: 280px;
  margin: 0 auto .5em;
  padding: .75em .25em;

  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -ms-flex-align: center;
  -webkit-box-flex: 1;
  -ms-flex: 1;
      flex: 1;
  -ms-flex-flow: nowrap;
      flex-flow: nowrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-ordinal-group: 3;
  -ms-flex-order: 2;
  order: 2;

  -webkit-transition: all 85ms ease-in-out;
          transition: all 85ms ease-in-out;
  white-space: nowrap;
  text-decoration: none;

  color: #fff;
  color: var(--white);
  border-radius: 10px;
  background-color: #dd4814;
  background-color: var(--orange);
  -webkit-box-shadow: inset 0 -.2em 0 #ab4521;
          box-shadow: inset 0 -.2em 0 #ab4521;
}

.jumbotron .download-btn.detected {
  font-size: 1.5em;
  max-width: 420px;
  margin: 0 auto 1em;
  padding: 1.25em 2em;
}

.download-buttons .detected:hover,
.download-buttons .detected:focus {
  color: #fff;
  color: var(--white);
  background-color: #dd4814;
  background-color: var(--orange);
  opacity: .85;

  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
}

.download-buttons .detected:active {
  -webkit-transform: translateY(1px);
          transform: translateY(1px);
}

.download-buttons .detected:before {
  display: inline-block;

  width: 1em;
  height: 1em;
  padding-right: .25em;

  content: '';
  vertical-align: middle;

  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAaCAYAAAC3g3x9AAAABGdBTUEAALGPC/xhBQAAAOhJREFUSA3tlFEOgyAMhmHn2IV4880beDNPpsdYxv6fACudBoia+LAmpaWWD2iKxlTEe++gS1RXSa9/jiCYIEttha0lECNzLETOtf/QgaPzP/BoBY25poboDNm8Q+s5sW6A/jZ9DMIEeWEcEzTGshHxEUHmJvk2PSLcRUqGyiB9AmE0jJ8KII8ud2NCgNJRsgVjblkqBPYSFW9741SKwu5ANVDOc2kKkJx0QOuwBG6AtsMaoP0wBX2LotHPPZryuiwAM5Qg6ty1+J7JuEb6McA9JHy+zmLgG3yedN31kv/hhNOtJ5yQjOkD2Y9b8/1va5sAAAAASUVORK5CYII=')
  no-repeat;
  background-size: contain;
}

.download-buttons .detected span:before {
  content: 'Download for ';
}

.download-btn {
  display: inline-block;

  font-size: 12px;
  padding: .25em .5em;

  text-decoration: underline;

  color: var(--dark-gray);
  border-radius: 5px;
}

.download-btn:hover,
.download-btn:focus {
  color: #dd4814;
  color: var(--orange);
  background-color: rgba(221, 72, 20, .1);
  background-color: var(--orange-faded);
}

/*
Pricing page
*/

.plan-picker {
  margin: 2em 0;
}

.plan-picker .row-fluid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: row wrap;
      flex-flow: row wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.plan-picker h2 {
  margin-top: 1em;
}

.plan-picker h3 {
  margin: 0;
}

.plan-picker .plan {
  -webkit-box-flex: 1;
  -ms-flex: 1 280px;
      flex: 1 280px;

  min-width: 280px;
  max-width: 360px;
  margin-bottom: 4em;
}

.plan-picker .plan .main {
  padding: .5em;

  -webkit-transition: all 150ms ease-in-out;
          transition: all 150ms ease-in-out;
  text-align: center;

  border: 1px solid #ddd;
  border-radius: 10px 10px 0 0;
  background-color: var(--white);
}

.plan-picker .main .btn {
  display: block;

  margin-top: 1em;
}

.plan-picker .plan.selected .main {
  color: var(--orange);
  border: 2px solid var(--orange);
  background-color: var(--orange-faded);
}

.plan-picker .plan.selected h3 {
  color: var(--orange);
}

.plan-picker .feature-list {
  font-size: 1.25em;

  margin: 0;
  padding: 1em;

  background-color: var(--extra-light-gray);
}

.plan-picker .feature-list:last-of-type {
  border-radius: 0 0 10px 10px;
}

.plan-picker .feature-list li {
  margin: .5em 0;
}

.terminal-prompt::before {
  content: "$ ";
  font-weight: bold;
}

.equivalent {
  color: #aaa;
}

img.thumbnail {
    max-height: 480px;
}