SeriouslyAwesome/democratictravelers

body.home.index {
  #home-map-object {
    max-width: 100%;
    overflow: hidden;
    min-height: rem(240);

    @include media($tablet) {
      min-height: 50%;
      height: 50%;
    }

    .leaflet-control-container, .leaflet-objects-pane {
      position: absolute;
      top: 0;
      z-index: 3;
    }

    .leaflet-control-container {
      display: none;
    }

    .leaflet-popup {
      background: white;
      padding: 1em;
      z-index: -100 !important;
      margin-top: -(rem(104/2));
      margin-left: 2em;

      &:before {
        content: "";
        position: absolute;
        left: -0.5em;
        top: 50%;
        margin-top: -0.55em;
        @include triangle(1em, white, left);
      }

      .leaflet-popup-close-button { display: none; }
      .leaflet-popup-content { padding-top: 0 !important; }
      h5, p {
        line-height: 1;
        margin-bottom: 0.5rem;
      }

      p a {
        // @include
      }
    }

    img {
      position: absolute;
      max-width: none;
      min-width: 0px;
    }
  }

  #blog-excerpt {
    padding: 2em;
    background: white none no-repeat center center;
    background-size: cover;
    position: relative;

    &:after {
      content: " ";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: transparentize($white, 0.25);
      z-index: 10;
    }

    & > div {
      position:relative;
      z-index: 100;
    }

    small,
    .post-meta { color: $dark-gray; }

    & > p:last-child {
      position: relative;
      text-align: right;
      margin-bottom: 0;
      z-index: 100;
    }

    @include media($tablet) {
      min-height: 50%;
      height: 50%;
      padding: 2em;
    }

    @include media($desktop) { padding: 6em 4em; }
  }

  #blog-hero {
    min-height: rem(300);


    @include media($tablet) {
      min-height: 33.333333333%;
      height: 33.333333333%;
    }
  }

  #home-content {
    @include media($tablet) {
      position: absolute;
      top: $baseline * 3;
      right: 0;
      bottom: $baseline * 2;
      left: 40%;
    }
  }

  #instagrams {
    @include media($tablet) {
      position: absolute;
      top: $baseline * 3;
      right: 60%;
      bottom: $baseline * 2;
      left: 0;
      max-width: 40%;
    }
  }
}