// Place all the styles related to the Welcome controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

#welcome-index-leader {
  background: linear-gradient(rgba(28, 13, 10, 0.4), rgba(28, 13, 10, 0.6)),
    image-url("jumbo.jpg") center center no-repeat;
  background-size: cover;
  height: 820px;

  * {
    color: rgba(255, 255, 255, 0.95);
  }

  h1 {
    margin-top: 200px;
  }

  .leader-date {
    font-size: 17px;
    letter-spacing: 4px;
    padding: 12pt;
    text-transform: uppercase;
  }
}

#welcome-index-when-where {
  h1 {
    padding: 3 * $spacer 0;
  }
}

#welcome-index-venue-leader {
  background: linear-gradient(rgba(28, 13, 10, 0.4), rgba(28, 13, 10, 0.6)),
    image-url("venue.jpg") center center no-repeat;
  background-size: cover;
  margin-top: 5 * $spacer;

  * {
    color: rgba(255, 255, 255, 0.95);
  }

  h1 {
    padding: 3 * $spacer 0;
  }
}

#welcome-index-venue {
  h2 {
    padding-top: 3 * $spacer;
    padding-bottom: $spacer;
    text-align: center;
  }

  p {
    text-align: justify;
  }
}

#welcome-index-wedding-plan-leader {
  background: linear-gradient(rgba(28, 13, 10, 0.4), rgba(28, 13, 10, 0.6)),
    image-url("plan.jpg") center center no-repeat;
  background-size: cover;
  margin-top: 5 * $spacer;

  * {
    color: rgba(255, 255, 255, 0.95);
  }

  h1 {
    padding: 3 * $spacer 0;
  }
}

#welcome-index-wedding-plan {
  h2 {
    padding-top: 3 * $spacer;
    padding-bottom: $spacer;
    text-align: center;
  }

  p {
    text-align: justify;
  }
}

#welcome-index-footer {
  background-color: #faebe3;
  margin-top: 5 * $spacer;

  #welcome-index-footer-cta {
    padding-top: 8 * $spacer;
    padding-bottom: 3 * $spacer;
  }

  #welcome-index-footer-credits {
    padding-top: 5 * $spacer;
    padding-bottom: 3 * $spacer;

    small {
      color: rgba(28, 13, 10, 0.4);
    }
  }
}
