* {
  -webkit-font-smoothing: antialiased;
         -font-smoothing: antialiased;

  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;

  --black: #000;
  --white: #fff;
  --extra-light-gray: #f9f9f9;
  --light-gray: #d3d3d3;
  --dark-gray: #575759;
  --orange: #dd4814;
  --orange-faded: rgba(221, 72, 20, .1);
  --red: #da4334;
  --green: #3ebf6a;
  --green-dark: #267340;
  --green-faded: rgba(62, 191, 106, .1);
}

body {
  scroll-behavior: smooth;
}

/* Custom container */
.container-fluid {
  max-width: 960px;
  margin: 0 auto 4em;
  padding: 0 1em;
  position: relative;
}

/* Custom container */
.container-wide {
  max-width: 1400px;
  margin: 0 auto 4em;
  padding: 0 1em;
  position: relative;
}


/*
  TYPOGRAPHY
*/
h1,h2,h3 {
  line-height: 1.2;
  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;
  color: var(--white);
  background: var(--black);
  box-shadow: none;
  border: none;
}
.well pre,
.well code {
  margin: 0;
  border: none;
  color: var(--white);
  background: var(--black);
}

.jumbotron {
  margin: 8em auto;
  max-width: 720px;
}

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

.jumbotron p {
  color: var(--dark-gray);
}

.jumbotron {
  margin: 8em auto;
}

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

.jumbotron p {
  color: var(--dark-gray);
}

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


/*
  NAVIGATION
*/


header {
  width: 100%;
  margin: 0 auto;
  padding: 1em;
  z-index: 1;
}

header .wordmark {
  display: inline-block;
  position: absolute;
  margin: 0;
}

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

header .wordmark a {
  padding: .5em;
}

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 {
  color: var(--black);
  display: inline-block;
  padding: .5em .25em .25em;
  border-bottom: 2px solid transparent;
}

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 {
    margin: 0;
    top: .25em;
    left: 0;
    right: 0;
  }
  header nav {
    width: 100%;
    margin-left: auto;
    padding: 0;
    float: none;
    display: block;
  }
  header nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
  }
  header nav .pull-right { float: none; }
  header nav .main { margin: 3.5em 0 0; }
  header nav li { margin: .3em .15em; }
  header nav a { padding: .25em; }
  header nav .spacer { display: none; }
}

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


/*
  Landing page
*/

.main-header { margin-top: 4vw; }

.feature { min-height: 180px; }

.ngrok-demo {
  width: 100%;
  height: auto;
  position: relative;
  margin-top: 2em;
  overflow: visible;
  user-select: none;
}

.ngrok-demo g { transition: all 1250ms ease-in-out; }
.ngrok-demo text,
.ngrok-demo tspan {
  transition: opacity 125ms ease-in;
  font-family: UbuntuMono-Regular, "Ubuntu Mono", 'Ubuntu', monospace, Tahoma, sans-serif;
}

.ngrok-demo .browser,
.ngrok-demo .terminal {
  position: absolute;
  transform: translate(40px, 60px) skew(0deg, 0deg) rotate(0deg);
  transform-origin: center;
}
.ngrok-demo.spread-windows .browser { transform: translate(10px, 20px) skew(-1deg, 0deg) rotate(-1deg); }
.ngrok-demo.spread-windows .terminal { transform: translate(70px, 140px) skew(-1deg, 0deg) rotate(-1deg); }

.ngrok-demo .python-text .response { opacity: 0; }
.ngrok-demo .python-text.slide-up { transform: rotateX(-90deg); opacity: 0; }
.ngrok-demo .ngrok-text { opacity: 0; }
.ngrok-demo .ngrok-text.move-up { transform: translateY(-56px); }
.ngrok-demo .ngrok-text .response { opacity: 0; }
.ngrok-demo .terminal .show { opacity: 1; }

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


/*
  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;
    border: none;
    margin-bottom: 2em;
  }
  .docs-main .container {
    width: 100%;
    margin-left: auto;
    padding: 0;
  }
  .docs-main td code {
    white-space: normal;
    word-break: break-word;
  }
}

.docs-navigation {
  width: 300px;
  max-height: calc(100vh - 2em);
  display: block;
  padding: 1em;
  position: sticky;
  position: -webkit-sticky;
  float: left;
  margin-top: 2em;
  top: 1em;
  left: 1em;
  border: 1px solid var(--light-gray);
  border-radius: 10px;
  overflow-y: scroll;
}

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

@media (max-width: 700px) {
  .docs-navigation {
    height: calc(100% - 6em);
    width: calc(100vw - 2em);
    margin: 0;
    padding: 0 1em 1em;
    position: fixed;
    top: inherit;
    bottom: 1em;
    left: 1em;
    right: 1em;

    background-color: var(--white);
    border: 1px solid var(--light-gray);
    border-radius: 10px;
    box-shadow: 0 0 5em 125vh hsla(240, 0%, 27%, 0);
    transform: translateY(100vh) scale(.9);
    transition: transform 500ms cubic-bezier(0.835, -0.15, 0.125, 0.965), box-shadow 250ms linear;

    overflow: hidden;
    z-index: 3;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }
  .docs-nav-toggle {
    display: inline-block;
    position: fixed;
    top: .75em;
    right: .75em;
    padding: .5em 1em;

    font-weight: bold;
    cursor: pointer;

    background: var(--white);
    border: 1px solid var(--light-gray);
    border-radius: 10px;
    /*box-shadow: 0 0 .5em 0 hsla(240, 0%, 27%, .15);*/
    opacity: .9;
    z-index: 4;
  }
  .docs-navigation.active {
    box-shadow: 0 0 5em 125vh hsla(240, 0%, 27%, 0.65);
    transform: translateY(0) scale(1);
    transition: transform 500ms cubic-bezier(0.835, -0.15, 0.125, 0.965), box-shadow 850ms ease-in-out;
    overflow: scroll;
  }
  .docs-navigation.active + .docs-main {
    height: calc(100vh - 10em);
    overflow: hidden;
    pointer-events: none;
  }
  .docs-navigation li > a {
    padding: .7em .25em;
    line-height: 2;
  }
}

.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);
  background: var(--black);
  border: 1px solid var(--black);
  border-radius: .5em 0 0 .5em;
}

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

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


/*
  Download buttons
*/

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

.download-buttons .primary {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  margin-bottom: .5em;
}

.download-buttons .primary a {
  flex: 1;
  display: flex;
  flex-flow: nowrap;
  height: 2.5em;
  margin: .25em;
  padding: .5em;
  align-items: center;
  justify-content: center;
  order: 2;
  font-size: 1.5em;
  font-weight: bold;
  color: var(--white);
  background-color: var(--orange);
  box-shadow: inset 0 -.2em 0 #ab4521;
  border-radius: 10px;
  opacity: .75;
  text-decoration: none;
  white-space: nowrap;
  transition: all 85ms ease-in-out;
}

.download-buttons .primary a:hover,
.download-buttons .primary a:focus {
  opacity: .85;
  transform: translateY(-2px);
}

.download-buttons .primary a:active {
  transform: translateY(2px);
}

.download-buttons .primary a:before {
  content: "";
  height: 1em;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAaCAYAAAC3g3x9AAAABGdBTUEAALGPC/xhBQAAAOhJREFUSA3tlFEOgyAMhmHn2IV4880beDNPpsdYxv6fACudBoia+LAmpaWWD2iKxlTEe++gS1RXSa9/jiCYIEttha0lECNzLETOtf/QgaPzP/BoBY25poboDNm8Q+s5sW6A/jZ9DMIEeWEcEzTGshHxEUHmJvk2PSLcRUqGyiB9AmE0jJ8KII8ud2NCgNJRsgVjblkqBPYSFW9741SKwu5ANVDOc2kKkJx0QOuwBG6AtsMaoP0wBX2LotHPPZryuiwAM5Qg6ty1+J7JuEb6McA9JHy+zmLgG3yedN31kv/hhNOtJ5yQjOkD2Y9b8/1va5sAAAAASUVORK5CYII=') no-repeat;
  width: 1em;
  background-size: contain;
  display: inline-block;
  vertical-align: middle;
  padding-right: .25em;
}

.download-buttons .download-btn.detected {
  opacity: 1;
  flex-grow: 2.5;
  order: 1;
  align-self: flex-start;
  height: 3.5em;
}

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

.download-btn {
  display: inline-block;
  margin: .25em;
  padding: .25em;
  color: var(--dark-gray);
  text-decoration: underline;
  border-radius: 5px;
}

.download-btn:hover,
.download-btn:focus {
  color: var(--orange);
  background-color: var(--orange-faded);
}

/*
  Pricing page
*/

.plan-picker { margin: 2em 0; }
.plan-picker h2 { margin-top: 1em; }
.plan-picker h3 { margin: 0; }
.plan-picker .plan { margin-bottom: 1em; }
.plan-picker .plan .main { text-align: center; margin-bottom: 2em; }
.plan-picker .main .btn { display: block; margin-top: 1em; }

.plan-picker .plan .main {
  padding: .5em;
  background-color: var(--white);
  border: 1px solid #ddd;
  border-radius: 10px;
  transition: all 150ms ease-in-out;
}

.plan-picker .plan.selected .main {
  color: var(--orange);
  background-color: var(--orange-faded);
  /*box-shadow: 0 3px 12px 3px rgba(238, 56, 0, .25);*/
  border: 2px solid var(--orange);
}

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

.plan-picker .feature-list { font-size: 1.25em; margin-bottom: 1em; }
.plan-picker .feature-list li { margin: .5em 0; }