* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

html {
  font-size: 16px; }

body {
  min-height: 100vh;
  font-family: sans-serif;
  -webkit-font-smoothing: antialiased; }

li {
  list-style-type: none; }

a,
button {
  color: inherit; }

a {
  text-decoration: none; }

button {
  overflow: visible;
  border: 0;
  font: inherit;
  -webkit-font-smoothing: inherit;
  letter-spacing: inherit;
  background: none;
  cursor: pointer; }

strong {
  font-weight: bold; }

body {
  height: 100vh;
  width: 100vw;
  overflow: hidden; }

p {
  max-width: 70%;
  margin-bottom: .5rem;
  padding: .5rem 0;
  color: #eee;
  font: 1.4rem "Raleway";
  line-height: 1.4;
  border-bottom: 1px solid #eee; }
  @media screen and (max-width: 700px) {
    p {
      max-width: 100%;
      color: #222;
      font-size: 1.3rem;
      border: none; } }
  @media screen and (max-width: 500px) {
    p {
      font-size: 1.1rem; } }

.greeting {
  max-width: 100%;
  font-size: 1.6rem;
  margin: 0;
  padding: .5rem;
  padding-bottom: 1rem;
  text-align: center;
  border: none; }
  .greeting.smaller {
    font-size: 1.3rem; }
  @media screen and (max-width: 700px) {
    .greeting {
      max-width: 100%;
      color: #222;
      border-bottom: 1px solid #1E2327; } }
  @media screen and (max-width: 500px) {
    .greeting {
      font-size: 1.4rem; } }

.note {
  font: 1.3rem "Quicksand";
  color: #ba9bbe;
  max-width: 100%;
  display: inline-block;
  padding: 0;
  padding-left: 1rem;
  margin: 0;
  border: none;
  text-align: left; }
  .note.smaller {
    font-size: 1.3rem; }
  @media screen and (max-width: 700px) {
    .note {
      font-size: 1.2rem;
      padding: 5px;
      color: #222;
      background: 2px 2px #ba9bbe; } }

.form-wrapper {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden; }

.small-form-wrapper {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(238, 238, 238, 0.3);
  margin-bottom: .5rem; }

.rsvp-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #eee;
  padding: 0 .5rem; }
  .rsvp-form div {
    flex: 1;
    text-align: center; }
  .rsvp-form .radio-wrapper {
    display: block;
    width: 60%;
    margin-bottom: .5rem;
    text-align: left; }
    .rsvp-form .radio-wrapper label {
      padding-left: 1rem; }
  .rsvp-form .radio-wrapper-small {
    display: flex;
    width: 100%;
    padding: 10px .5rem;
    text-align: left;
    border-bottom: 1px solid rgba(238, 238, 238, 0.3); }
    @media screen and (max-width: 700px) {
      .rsvp-form .radio-wrapper-small {
        border-bottom: 1px solid #1E2327; } }
    .rsvp-form .radio-wrapper-small .radio-choice {
      flex: 1;
      text-align: left;
      max-width: 30%; }
      @media screen and (max-width: 700px) {
        .rsvp-form .radio-wrapper-small .radio-choice {
          flex: 1 1;
          max-width: 100%;
          text-align: center; }
          .rsvp-form .radio-wrapper-small .radio-choice label {
            display: block; } }

@media screen and (max-width: 700px) {
  input {
    padding: 0;
    font: 1rem "Raleway";
    color: #222; } }
input:not(.radio) {
  width: 90%;
  max-width: 500px;
  padding-left: 1rem;
  margin-top: .5rem;
  font: 3rem "Sacramento";
  color: #ba9bbe;
  background: rgba(231, 231, 231, 0.2);
  border: 1px solid #333; }
  @media screen and (max-width: 700px) {
    input:not(.radio) {
      background: none;
      padding-left: 1.5rem;
      font: 2.6rem "Raleway";
      color: #222;
      border: 1px solid #333; } }
  @media screen and (max-width: 500px) {
    input:not(.radio) {
      padding: .5rem;
      font-size: 2rem; } }
  @media screen and (max-width: 400px) {
    input:not(.radio) {
      font-size: 1.8rem; } }

@media screen and (min-width: 701px) {
  input::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    font: 1.6rem "Quicksand";
    color: #eee;
    line-height: 4rem; }
  input::-moz-placeholder {
    /* Firefox 19+ */
    font: 1.6rem "Quicksand";
    color: #eee;
    line-height: 4rem; }
  input:-ms-input-placeholder {
    /* IE 10+ */
    font: 1.6rem "Quicksand";
    color: #eee;
    line-height: 4rem; }
  input:-moz-placeholder {
    /* Firefox 18- */
    font: 1.6rem "Quicksand";
    color: #eee;
    line-height: 4rem; }
  input:checked + label {
    color: #eee; } }

label {
  font: 1.3rem "Raleway";
  color: rgba(238, 238, 238, 0.7);
  padding-left: .5rem; }
  @media screen and (max-width: 700px) {
    label {
      padding: 0;
      font: 1.1rem "Raleway";
      color: #222; } }
  @media screen and (max-width: 450px) {
    label {
      font: 1rem "Raleway"; } }

.rsvp-button {
  display: inline-block;
  align-self: flex-end;
  border: 1px solid #333;
  padding: 1rem 4rem;
  margin: 1rem auto .5rem;
  font: 1.6rem "Quicksand";
  color: #eee;
  text-align: center;
  text-transform: lowercase;
  background: rgba(231, 231, 231, 0.2);
  transition: .25s; }
  html:not(.is-touch) .rsvp-button:hover {
    background: rgba(231, 231, 231, 0.5); }
  @media screen and (max-width: 700px) {
    .rsvp-button {
      max-width: 250px;
      background: #346;
      font: 2rem "Quicksand";
      border: 1px solid black; }
      .rsvp-button:hover {
        background: #346 !important; } }
  @media screen and (max-width: 500px) {
    .rsvp-button {
      max-width: 450px;
      background: #346;
      font: 1.6rem "Quicksand";
      padding: .8rem 3rem;
      border: 1px solid black; }
      .rsvp-button:hover {
        background: #346 !important; } }
  @media screen and (max-width: 400px) {
    .rsvp-button {
      width: 75%;
      background: #346;
      font: 1.4rem "Quicksand";
      padding: .6rem 2rem;
      border: 1px solid black; }
      .rsvp-button:hover {
        background: #346 !important; } }

/*# sourceMappingURL=rsvp-style.css.map */