calraijintaiko/caltaiko

.banner-image {
  background-color: $dark-bg;
  margin-top: -3%;
  position: relative;

  @media #{$large-up} {
    img {
      filter: alpha(opacity = 40);
      opacity: .4;
      width: 100%;
      zoom: 1;
    }
  }

  .text {
    bottom: 15px;
    left: 0;
    position: absolute;
    right: 0;

    .subtitle {
      color: $hover-text-color;
      font-family: $header-font;
      font-size: 1.5rem;
      letter-spacing: 1px;
      margin-bottom: 0;
      text-transform: uppercase;
    }

    .title {
      color: $white;
      font-size: 4rem;
      margin-top: 0;
      text-transform: uppercase;
    }
  }

  &.static-page-banner {
    margin-bottom: 30px;

    @media #{$medium-only} {
      img {
        filter: alpha(opacity = 40);
        opacity: .4;
        width: 100%;
        zoom: 1;
      }
    }
  }
}

img.team-pic {
  border: 3px $main-color solid;
}

.performance-image {
  background-color: $dark-bg;
  border-bottom: 1px $border-color solid;
  position: relative;

  img {
    @include transition;
    display: block;
    position: relative;
    width: 100%;
    z-index: 1;
  }

  .text-link {
    @include transition($effect: color);
    color: $transparent;
    display: flex;
    flex-direction: column;
    font-family: 'Lato';
    height: 100%;
    justify-content: center;
    letter-spacing: 1px;
    position: absolute;
    text-align: center;
    text-decoration: none;
    top: 0;
    width: 100%;
    word-spacing: 2px;
    z-index: 0;
  }
}

.performance-image:hover {
  img {
    filter: alpha(opacity = 30);
    opacity: .3;
  }

  a.text-link {
    color: $white;
    z-index: 3;
  }
}