@charset "UTF-8";
/* Fonts
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@font-face {
  font-family: 'Open Sans';
  src: url("/fonts/OpenSans-Light.ttf");
  font-weight: 300;
  font-style: normal; }
@font-face {
  font-family: 'Open Sans';
  src: url("/fonts/OpenSans-LightItalic.ttf");
  font-weight: 300;
  font-style: italic; }
@font-face {
  font-family: 'Open Sans';
  src: url("/fonts/OpenSans-Regular.ttf");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'Open Sans';
  src: url("/fonts/OpenSans-Italic.ttf");
  font-weight: normal;
  font-style: italic; }
@font-face {
  font-family: 'Open Sans';
  src: url("/fonts/OpenSans-Semibold.ttf");
  font-weight: 600;
  font-style: normal; }
@font-face {
  font-family: 'Open Sans';
  src: url("/fonts/OpenSans-SemiboldItalic.ttf");
  font-weight: 600;
  font-style: italic; }
@font-face {
  font-family: 'Open Sans';
  src: url("/fonts/OpenSans-Bold.ttf");
  font-weight: bold;
  font-style: normal; }
@font-face {
  font-family: 'Open Sans';
  src: url("/fonts/OpenSans-BoldItalic.ttf");
  font-weight: bold;
  font-style: italic; }
@font-face {
  font-family: 'Open Sans';
  src: url("/fonts/OpenSans-ExtraBold.ttf");
  font-weight: 800;
  font-style: normal; }
@font-face {
  font-family: 'Open Sans';
  src: url("/fonts/OpenSans-ExtraBoldItalic.ttf");
  font-weight: 800;
  font-style: italic; }
/* Style
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.hidden {
  display: none; }

ul {
  list-style: inside square; }

body {
  color: #3f4444;
  background-color: #f9f9f9;
  font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; }

a {
  color: #d16014; }

a:hover {
  transition: color 0.5s ease-in-out;
  color: rgba(209, 96, 20, 0.75); }

a:active, a:focus {
  outline-style: none;
  -moz-outline-style: none; }

nav {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  font-weight: 500; }

.row.no-bottom-margin {
  margin-bottom: 1rem; }

#logo-wide {
  margin-top: 11px; }

header a,
header a:visited {
  text-decoration: none;
  color: #2da09a; }

header a.menu-item:hover,
header a.menu-item.current {
  border-bottom-width: 3px;
  border-bottom-color: #2da09a;
  border-bottom-style: solid;
  color: #2da09a; }

header ul {
  margin: 2px 0 0;
  padding: 0;
  font-size: 1.5rem;
  list-style-type: none;
  float: right; }

header ul li {
  display: inline;
  margin-left: 7px; }

nav #github-nav {
  background-color: #2da09a;
  color: white;
  border-radius: 5px;
  padding: 7px 14px; }

#logo:hover,
nav #github-nav:hover {
  text-decoration: none;
  opacity: 0.8;
  transition: opacity 0.5s ease-in-out; }

footer {
  padding-top: 40px;
  background-color: #2da09a;
  color: white;
  font-weight: 200;
  font-size: 18px; }

footer a,
footer a:hover {
  color: white; }

.octocat {
  display: inline-block;
  position: relative;
  top: -1px;
  width: 16px;
  height: 16px;
  background-image: url("/images/octocat.svg");
  margin-right: 10px; }

a.high-image-link,
a.wide-image-link {
  display: block;
  width: 100%;
  background-position: top center;
  background-size: cover; }

a.wide-image-link {
  height: 231px; }

a.high-image-link {
  height: 400px; }

h1#citysdk-linked-data-api {
  margin-top: 0; }

#apps ul {
  list-style-type: square; }

#layers {
  list-style-type: none; }

#layers li:first-child h4 {
  margin-top: 3rem; }

#apps h4,
#layers h4 {
  border-bottom: 3px solid #2da09a; }

#layers h4 {
  margin-top: 7rem; }

#layers h4 pre {
  display: inline; }

#layers table {
  width: 100%; }

#layers table tr td:first-child {
  width: 155px; }

#layers td > code:first-child {
  margin-left: -0.5rem; }

#layers td {
  border-bottom: none; }

#map {
  width: 100%;
  height: 700px; }

/* ANIMATION */
.transparant {
  opacity: 0; }

.visible {
  opacity: 1; }

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite; }

.animated.hinge {
  -webkit-animation-duration: 1s;
  animation-duration: 1s; }

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn; }