$default-color: #00bcd4; 
$card-padding: 8px;
$card-color: #FFF;
$font-color: #fff;
$footer-font-color: #000;
$card-link-color: #ffab2e;
$card-link-hover: #ffcc35;

.card {
  @include border-radius(2px);
	margin-top: 10px;
  h1 {
    font-size: 1.71rem;
		color: $font-color;
  }
  h2 {
    font-size: 1.14rem;
		color: $font-color;
  }
  h3 {
    font-size: 1rem;
		color: $font-color;
  }
	p {
		font-size: 0.8rem;
		color: $font-color;
	}
  @extend .z-depth-1;


  .card-content {
    position: relative;
    overflow: hidden;
    padding: $gutter-width;

    // Image background for content
    img {
      @include border-radius(2px 2px 0 0);
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      width: 100%;
      z-index: -1;
    }
  }

  .card-footer {
    background-color: $card-color;
    padding: 2px $gutter-width $card-padding $gutter-width;
    @include border-radius(0 0 2px 2px);
    margin-bottom:30px;
    h1, h2, h3, p {
      color: $footer-font-color;
    }
  }

  a.card-action {
    margin-right:20%;
    color: $card-link-color;
    
    &:hover { color: $card-link-hover; }
  }

}
