*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

html {
  width: 100%;
  height: 100%;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  height: 100%;
  color: #3c4147;
  font: 400 1em "Open Sans", sans-serif;
  cursor: default;
  overflow: auto;
}

pre,
code {
  font-size: .9em;
  font-family: Menlo, Monaco, Consolas, monospace;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
  font-weight: 700;
  font-family: Merriweather, serif
}

strong,
b {
  font-weight: 700;
}

a {
  color: #5c9df5;
  text-decoration: none;
  display: inline-block;
  -webkit-transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
     -moz-transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
          transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
}

a:hover,
a:active {
  color: #4788e0;
  background-color: #f5f5f7;
  text-shadow: 0 1px #fff;
}

header {
  height: 60px;
  line-height: 60px;
  background-color: rgba(255, 255, 255, .9);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.1),
              0 10px 24px rgba(0, 0, 0, 0.2);
  top: 0; left: 0; right: 0;
  position: absolute;
  z-index: 10;
}

nav {
  margin: 0 auto;
  max-width: 768px;
}

nav a {
  padding: 0 24px;
  text-shadow: 0 1px #fff;
}

nav img {
  top: -1px;
  margin-right: 8px;
  vertical-align: middle;
  position: relative;
}

.burg {
  height: 60px;
  padding: 20px 24px;
  position: absolute;
  right: 0; top: 0;
  display: none;
  z-index: 10;
}

.burg > i {
  width: 20px;
  height: 2px;
  margin-top: 4px;
  background-color: #5c9df5;
  -webkit-transition: background-color 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
     -moz-transition: background-color 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
          transition: background-color 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
  display: block;
}

.burg:hover > i {
  background-color: #4788e0;
}

@media (max-width: 580px) {
  nav {
    display: none;
    background-color: #fff;
    box-shadow: 0 6px 48px rgba(0, 0, 0, 0.3);
    -webkit-transition: transform 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
       -moz-transition: transform 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
            transition: transform 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    -webkit-transform: translateY(-150%);
       -moz-transform: translateY(-150%);
        -ms-transform: translateY(-150%);
            transform: translateY(-150%);
  }

  nav.in {
    -webkit-transform: translateY(0);
       -moz-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
  }

  nav > a {
    display: block;
  }

  nav > a:hover {
    background-color: #f5f5f7;
  }

  .burg {
    display: inline-block;
  }

  .nav-active,
  .burg:active + nav {
    display: block;
  }
}

.bigmap {
  min-height: 620px;
  position: relative;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.1),
              0 10px 24px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.map-container {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  will-change: transform;
}

.map-canvas {
  width: 100%;
  height: 100%;
}

.over-map {
  padding: 60px 0;
  text-align: center;
  position: relative;
}

.left-vs-right pre {
  margin-top: 0
}

.left-vs-right .hljs {
  color: #000;
  background-color: #fff;
}

.huro,
.left-example,
.right-example {
  display: inline-block;
  background-color: rgba(255,255,255,.75);
  border: 3px solid #3c4147;
}

.huro {
  font-size: 5em;
  padding: 0 40px 0;
}

@media (max-width: 480px) {
  .huro {
    font-size: 4em;
  }
}

.left-example,
.right-example {
  max-width: 49%;
  text-align: left;
}

.left-example {
  margin-right: 1%
}

@media (max-width: 768px) {
  .left-example,
  .right-example {
    margin: 0;
    max-width: 98%
  }

  .left-example {
    margin: 0 0 1em;
  }
}

.example-label {
  color: #fff;
  font-weight: bold;
  padding: 0 6px 0 16px;
  background-color: #3c4147;
  display: inline-block;
}

.hljs {
  padding: 1em 16px;
}

.doc {
  padding: 24px;
  margin: 0 auto;
  max-width: 768px;
}

.doc > h1 {
  color: #fff;
  margin-left: -24px;
  padding: 2px 12px 0 24px;
  background-color: #3c4147;
  display: inline-block;
}

.method {
  padding-bottom: 6px;
  border-bottom: 3px solid #eaeaea;
}

.method:not(:first-of-type) {
  margin-top: 2em
}

@media (max-width: 480px) {
  .method {
    font-size: 20px
  }
}

p,
li {
  line-height: 1.6
}

p > code {
  padding: 0 4px;
  border-radius: 1px;
  display: inline-block;
  background-color: #eaeaea;
  text-shadow: 0 1px #fff;
}

ul {
  margin: 1em 0;
  list-style-type: none;
}

ul.links {
  list-style-type: disc;
}

ul:not(.dense) li + li {
  margin-top: 1em
}

.example {
  margin-top: 2em
}

.doc .hljs {
  color: inherit;
  border-left: 3px solid #9cdae9;
  background-color: #f5f5f7;
}

.example > strong {
  color: #fff;
  padding: 0 4px;
  background-color: #3c4147;
}