app/scss/_weather.scss
#weather-results {

  bottom: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  will-change: transform, opacity;
  @include transform(translateY(10%));
  @include transition(transform .3s ease-in-out);

  &:before {
    background: linear-gradient(to top, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, 0) 70%);
    bottom: 0;
    content: " ";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 10;
  }

  #weather-container {
    bottom: 18%;
    left: 0;
    position: absolute;
    right: 0;
    top: 20%;
    z-index: 11;
  }

  .location {
    bottom: 30px;
    color: rgba(255, 255, 255, .9);
    display: block;
    font-size: 24px;
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
    z-index: 12;
  }

  &.show {
    opacity: 1;
    @include transform(translateY(0));
    @include animation(vanishIn .5s linear);
  }

  > h1 {
    padding-bottom: 20px;
    text-align: center;
  }

  ul {
    align-items: center;
    justify-content: center;
    margin: 0;
    overflow-x: auto;
    padding: 10px;
    @include display-flex;

    li {
      color: #fff;
      flex-basis: 200px;
      flex-grow: 0;
      flex-shrink: 0;
      list-style-type: none;
      margin: 10px 0;
      padding: 10px 0;
      @include border-radius(3px);
      @include transform(scale(.8));

      &.today {
        @include transform(scale(1));

        i {
          &.wi-wu-unknown,
          &.wi-wu-mostlysunny,
          &.wi-wu-sunny {
            @include animation(10s linear 0s infinite rotate);
          }
        }
      }

      .dow {
        color: #fff;
        font-size: 16px;
        font-weight: 700;
        line-height: .6em;
        margin: 20px 0;
        text-align: center;
        text-transform: uppercase;
      }

      .picture {
        height: 120px;
        text-align: center;
        @include border-radius(3px);

        i {
          color: #fff;
          font-size: 120px;
          margin: 20px auto;
          text-align: center;
          @include inline-block(bottom);
        }
      }

      .details {
        line-height: 0;
        padding: 20px 0;
        text-align: center;

        h1 {
          color: #fff;
          display: block;
          font-family: 'Helvetica Neue', 'Open-Bold', sans-serif;
          font-size: 50px;
          font-weight: bold;
          margin: 20px 0 0;

          span {
            position: relative;
            @include inline-block(baseline);
          }

          span:not(:first-child) {
            color: rgba(255,255,255, .5);
            font-size: 25px;
            padding-left: 10px;
          }

          small {
            color: rgba(#fff, .9);
            display: block;
            font-size: 16px;
            font-weight: 500;
            line-height: 1.5em;
            margin-top: 10px;
            min-height: 50px;
          }
        }

        &.unit-f h1 span:first-child {
          &:before {
            content: '°F';
            font-size: 12px;
            position: absolute;
            right: -12px;
            top: 9px;
          }
        }

        &.unit-c h1 span:first-child {
          &:before {
            content: '°C';
            font-size: 12px;
            position: absolute;
            right: -8px;
            top: 5px;
          }
        }

        .rating {
          height: 12px;

          img {
            height: 100%;
          }
        }
      }
    }
  }
}
