.home {
  main {
    padding: 0;

    .container {
      max-width: 100%;
      width: 100%;
    }
  }
}
.intro {
  @include breakpoint($breakpoint-xl) {
    height: 500px;
  }
  background-color: $background-color-subtle;
  background: url(crawl-intro-bg.png) no-repeat;
  background-size: cover;
  height: 300px;
  @include breakpoint($breakpoint-xl) {
    font-size: 1.5em;
  }


  .intro-text {
    text-align: center;
    padding-top: 6em;
    margin: 0 auto;

    h1 {
      color: #fff;
    }
    h2 {
      @include heading-3;
      font-weight: 100;
      color: #fff;
    }
  }
}

.coming-up-next, .crawl-after-dark {
  @include clearfix;

  .up-next-bg {
    background: url(crawl-up-next-bg.png) no-repeat;
    background-size: cover;
  }

  .up-next-header {
    @include container;
    height: 200px;
    padding-top: 7em;
  }
  .next-events, .after-dark-events {
    @include container;
    padding: 2em 0;

    h2 {
      @include heading-4;
    }

    .up-next-event {
      position: relative;
      margin-bottom: 5em;
      @include column(12);
      @include breakpoint($breakpoint-l) {
        @include column(6);
      }
      .up-next-info {
        padding: 2em;
        color: $background-color;
        width: 100%;
        background-color: rgba(0,0,0,0.5);
        text-align: left;

        @include breakpoint($breakpoint-xl) {
          position: absolute;
          bottom: 0;
        }


        .title {
          @include heading-2;
          font-weight: normal;
          color: white;
        }
        .time, .locations {
          font-weight: 100;
          color: white;
          display: inline;
          @include breakpoint($breakpoint-l) {
            font-size: 1.4em;
          }
        }
      }
      &:hover {
        text-decoration: none;
      }
    }

    .up-next-events {
      @include column(12);
      @include breakpoint($breakpoint-l) {
        @include column(6);
        @include last;
      }
      @include divider-bottom;
      .title a {
        @include heading-2;
        color: $link-color;
      }
      .time {
        font-size: 1.4em
      }
    }
  }
}

.crawl-after-dark {
  background-color: $link-color;
  .after-dark-bg {
    background: url(crawl-after-dark-bg.png) no-repeat $link-color;
    background-size: cover;
  }
  .after-dark-header {
    @include container;
    height: 200px;
    padding-top: 7em;
  }
  .after-dark-events {
    padding: 2em 0;
    .up-next-events {
      .title a {
        color: #fff;

      }
    }
    .up-next-event {
      img {
        width: 100%;
      }
    }
  }
}

.get-map {
  background: url(crawl-map.png) no-repeat;
  background-size: cover;
  height: 200px;
  margin-bottom: 3em;
  .map {
    text-align: center;
    font-size: 1.5em;
    padding-top: 2em;
    h1 {
      color: #fff;
    }

  }
}

.social-feed .post-text {
  color: #fff;
}

.section-wrapper {
  @include container;
  h1 {
    font-size: 3em;
  }

  .social-icons {

    .instagram-icon, .facebook-icon, .twitter-icon {
      display: inline-block;
      margin-left: .8em;
      height: 34px;
      width: 34px;
    }

    .instagram-icon {
      background: url(crawl-instagram-bg.svg) no-repeat;
    }

    .twitter-icon {
      background: url(crawl-twitter-bg.svg) no-repeat;
    }
  }
}