.limiter.limiter-big {
  width: 90%;
  max-width: 1300px;
}

.gallery-page {
  background-color:#1d334b !important;
}

.round-big {
  border-radius: 30px;
}

.leaflet-container a {
    color: #ffffff !important;
    font-weight: 400;
    text-decoration: none;
}

h3.midnight { color: #1d334b;}
/* utility */
.center-y { top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.center-x { text-align: center; left: 0; right: 0; margin-left: auto; margin-right: auto;}
.invisible { opacity: 0; pointer-events: none;}
.margin-n-50 { margin-right: -50px; }
.margin-n-50r { margin-left: -50px; }

.animate-delay {
  -webkit-transition:.125s .25s;
     -moz-transition:.125s .25s;
      -ms-transition:.125s .25s;
          transition:.125s .25s;
}
.dark-overlay {
  position: fixed;
  z-index: 150;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.js-pager {
  z-index: 30;
}
#js-map-gl, #js-map-raster {
    position: fixed;
    z-index: 200;
    top: 20px;
    left: 20px;
    height: calc(100vh - 40px);
    width: calc(100vw - 40px);
  /*  width: 100%;
    height: 100%;*/
}

.item::after {
  content: '';
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.0);

    -webkit-transition: all .3s ease-in;
    -moz-transition:    all .3s ease-in;
    -o-transition:      all .3s ease-in;
    -ms-transition:     all .3s ease-in;
    transition:         all .3s ease-in;
}
.item::before {
    content: "\e66f";
    font-family: icon;
    font-size: 80px;
    line-height: 100px;
    position: absolute;
    color: white;
    z-index: 2;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    width: 100%;
    text-align: center;
    top: 50%;
    margin-top: -50px;
    opacity: 0;

    -webkit-transition: all .3s ease-in;
    -moz-transition:    all .3s ease-in;
    -o-transition:      all .3s ease-in;
    -ms-transition:     all .3s ease-in;
    transition:         all .3s ease-in;
}
.item:hover::after {
    background-color: rgba(0, 0, 0, 0.3);
  }
.item:hover::before {
    opacity: 1;
}

.fill-canvas {
  background: #384044 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAQAAAAngNWGAAAAGElEQVR4AWNgkMECsQA6KxxVOFjdPaoQAAMRFeEKd2mnAAAAAElFTkSuQmCC');
  background-size:10px 10px;
}

.js-toggle-fullscreen {
    position: fixed;
    z-index: 215;
    top: 20px;
    right: 30px;
}

.info-block {
  z-index: 20;
  font:15px/20px 'Open Sans', sans-serif !important;
}


/* clearfix */
.container:before,
.container:after {
    content: "";
    display: table;
}
.container:after {
    clear: both;
}

.item {
  float: left;
  margin-bottom: 5px;
}
.item img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: bottom;
}
.first-item {
  clear: both;
}
/* remove margin bottom on last row */
.last-row, .last-row ~ .item {
  margin-bottom: 0;
}

/* layout */
.gallery-container {
  /* Height of browser - header (180px) and bottom margin (40px) */
  height: calc(100vh - 220px);
  min-height: 400px;
}

.fill-canvas {
  background: #384044 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAQAAAAngNWGAAAAGElEQVR4AWNgkMECsQA6KxxVOFjdPaoQAAMRFeEKd2mnAAAAAElFTkSuQmCC');
  background-size:10px 10px;
}

.map-container {
  /* override mapbox-gl.css */
  position: absolute;
  /* otherwise border-radius doesn't work */
  transform: translate3d(0,0,0);
}

.app-image {
  background-size: cover;
  background-position: 0 100%;
}

.app-browser:hover {
    box-shadow: 0 0 50px 0 rgba(0,0,0,0.3);
}

.legend-dot {
  width: 10px;
    height: 10px;
    display: block;
    float: left;
    margin-top: 5px;
    margin-right: 8px;
}

p.legend {
  margin-bottom: 2px;
  margin-top: 2px;
}

p.description {
    margin-bottom: 10px;
}

/* interaction */
.gallery-container.active {
  z-index: 10;
  height: auto;
  position: fixed;
  left: 20px;
  background: black;
  top: 20px;
  right: 20px;
  bottom: 20px;
  box-shadow: 0 0 0 40px black;
  min-height: 0;
}

.gallery-item {
  /*display: none;*/
}

.gallery-item.active {
  display: block;
}

.gallery-drawer {
  opacity: 0;
  pointer-events: none;
  height: 100%;
}

.gallery-drawer.active {
  opacity: 1;
  z-index: 2;
  pointer-events: all;
}

.button-wrap.active { z-index: 1; }
.button-wrap.active .button { background-color: rgba(0,0,0,.25); }
.button-wrap.active .button:hover { background-color: rgba(0,0,0,.5); }
.button-wrap-right.active { margin-right: 10px; }
.button-wrap-left.active { margin-left: 10px; }

/* mapbox-gl.css overrides */
.mapboxgl-ctrl-group {
  border-width: 0;
}

.mapboxgl-ctrl-bottom-right {
  bottom: 10px;
  right: 10px;
  width: auto;
  z-index: 25;
}

.mapboxgl-ctrl.mapboxgl-ctrl-attrib {
  display: inline-block;
  z-index: 10;
  padding: 0 5px;
  border-radius: 15px;
  font-size: 10px;
  background: rgba(0,0,0,.5);
  float: none;
}

.mapboxgl-ctrl-attrib a {
  color: rgba(255,255,255,.5);
}

.mapboxgl-ctrl-attrib a:hover {
  color: white;
}

.show-in-active { display: none; }
.active > .show-in-active {
  display: block;
}

.slide-is-transitioning {
  -webkit-animation: fadeoutin 1s;
  -o-animation: fadeoutin 1s;
  -ms-animation: fadeoutin 1s;
  animation: fadeoutin 1s;
}

@-webkit-keyframes fadeoutin {
    0% { opacity: 1; }
   25% { opacity: 0; }
   75% { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes fadeoutin {
    0% { opacity: 1; }
   25% { opacity: 0; }
   75% { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes fadeoutin {
    0% { opacity: 1; }
   25% { opacity: 0; }
   75% { opacity: 0; }
  100% { opacity: 1; }
}
@-ms-keyframes fadeoutin {
    0% { opacity: 1; }
   25% { opacity: 0; }
   75% { opacity: 0; }
  100% { opacity: 1; }
}
@-keyframes fadeoutin {
    0% { opacity: 1; }
   25% { opacity: 0; }
   75% { opacity: 0; }
  100% { opacity: 1; }
}

/* Guides + Pricing */

.img-guides { max-width: 160px; }

.pricing .col6 { max-width: none; }

@media only screen and (max-width: 960px) {
  .pricing .col6 { width: 100%;}
}

@media only screen and (min-width: 400px) and (max-width: 640px) {
  .icon-1.dot.contain.col2
  {
    width: 20%;
  }
  .icon-1 + .col10 {
    width: 75%;
    margin-left: 5%;
  }
}


/* small screens */
@media only screen and (max-width:900px) {
  .button-wrap { z-index: 1; }
  .button-wrap .button.quiet { background-color: rgba(0,0,0,.25); }
  .button-wrap .button.quiet:hover { background-color: rgba(0,0,0,.5); }
  .button-wrap-right { margin-right: 10px; }
  .button-wrap-left { margin-left: 10px; }
}

@media only screen and (max-width:640px) {
   #js-map-gl {
      top: 70px;
      height: calc(100vh - 80px);
  }
  .js-toggle-fullscreen {
    top: 70px;
  }
  .mapboxgl-ctrl.mapboxgl-ctrl-attrib {
    display: none;
  }
  .info-block {
    width: 95%;
    margin-left: 2.5%;
    margin-right: 2.5%;
}
}