/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

button {
  display: inline-block;
  margin: 0;
  font-family: serif;
  line-height: 1.8;
  appearance: none;
  box-shadow: none;
  border-radius: 0; }

html {
  box-sizing: border-box; }

*, *:before, *:after {
  box-sizing: inherit; }

@font-face {
  font-family: 'latin_modern_roman_dunhil10Rg';
  src: url("./fonts/latinmodernromandunhill_10regular_macroman/lmromandunh10-regular-webfont.eot");
  src: url("./fonts/latinmodernromandunhill_10regular_macroman/lmromandunh10-regular-webfont.eot?#iefix") format("embedded-opentype"), url("./fonts/latinmodernromandunhill_10regular_macroman/lmromandunh10-regular-webfont.woff") format("woff"), url("./fonts/latinmodernromandunhill_10regular_macroman/lmromandunh10-regular-webfont.ttf") format("truetype"), url("./fonts/latinmodernromandunhill_10regular_macroman/lmromandunh10-regular-webfont.svg#latin_modern_roman_dunhil10Rg") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'SawasdeeRegular';
  src: url("./fonts/sawasdee-webfont/sawasdee-webfont.eot");
  src: url("./fonts/sawasdee-webfont/sawasdee-webfont.eot?#iefix") format("embedded-opentype"), url("./fonts/sawasdee-webfont/sawasdee-webfont.woff") format("woff"), url("./fonts/sawasdee-webfont/sawasdee-webfont.ttf") format("truetype"), url("./fonts/sawasdee-webfont/sawasdee-webfont.svg#SawasdeeRegular") format("svg");
  font-weight: normal;
  font-style: normal; }

body {
  width: 100%;
  background: #e0e0e0; }

#invitation {
  background: #fff;
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 1000px;
  border-left: 3px solid #417975;
  border-right: 3px solid #417975; }
  #invitation .faces-container {
    width: 100%;
    background: #fdd930;
    padding: 2em 0; }
    @media (min-width: 0px) and (max-width: 600px) {
      #invitation .faces-container {
        padding: 0.5em 0; } }
  #invitation .banner-container {
    width: 100%;
    background: #fff;
    padding: 2em 0; }
    @media (min-width: 0px) and (max-width: 600px) {
      #invitation .banner-container {
        padding: 1em 0; } }
    #invitation .banner-container img.invite-you-to {
      width: 75%; }
      @media (min-width: 0px) and (max-width: 600px) {
        #invitation .banner-container img.invite-you-to {
          width: 90%; } }
  #invitation .crest-container {
    width: 100%;
    background: #fdd930;
    padding: 2em 0; }
    #invitation .crest-container img.crest {
      max-width: 70%;
      width: 315px;
      position: relative;
      left: 50%;
      -webkit-transform: translateX(-50%);
              transform: translateX(-50%); }
  #invitation .info-container {
    width: 100%;
    font-family: 'Georgia', 'Times', 'Times New Roma', serif;
    line-height: normal;
    font-size: 14pt;
    padding: 2em 2.5em; }
    #invitation .info-container p {
      margin-bottom: 1em;
      line-height: 150%; }
    #invitation .info-container p:last-child {
      margin-bottom: 0.5em; }
    #invitation .info-container h2 {
      font-family: 'Sawasdee', 'SawasdeeRegular', sans-serif;
      font-size: 24pt;
      line-height: 1.5em;
      margin: 1em 0;
      font-size: 30pt;
      font-weight: bold; }
      @media (min-width: 0px) and (max-width: 600px) {
        #invitation .info-container h2 {
          font-size: 20pt; } }
    #invitation .info-container h3 {
      font-family: 'Sawasdee', 'SawasdeeRegular', sans-serif;
      font-size: 24pt;
      line-height: 1.5em;
      margin: 0.8em 0;
      font-size: 24pt;
      font-weight: bold; }
      @media (min-width: 0px) and (max-width: 600px) {
        #invitation .info-container h3 {
          font-size: 20pt; } }
    #invitation .info-container h4 {
      font-family: 'Sawasdee', 'SawasdeeRegular', sans-serif;
      font-size: 24pt;
      line-height: 1.5em;
      margin: 0.6em 0;
      font-size: 20pt;
      font-weight: bold; }
      @media (min-width: 0px) and (max-width: 600px) {
        #invitation .info-container h4 {
          font-size: 20pt; } }
    #invitation .info-container:nth-child(odd) {
      background: #d2e7e5; }
      #invitation .info-container:nth-child(odd) p {
        color: #222; }
      #invitation .info-container:nth-child(odd) h1, #invitation .info-container:nth-child(odd) h2, #invitation .info-container:nth-child(odd) h3, #invitation .info-container:nth-child(odd) h4, #invitation .info-container:nth-child(odd) h5, #invitation .info-container:nth-child(odd) h6 {
        color: #000; }
      #invitation .info-container:nth-child(odd) a, #invitation .info-container:nth-child(odd) a:visited {
        color: #444; }
      #invitation .info-container:nth-child(odd) a:hover {
        color: #666; }
    #invitation .info-container:nth-child(even) {
      background: #feec95;
      color: black; }
      #invitation .info-container:nth-child(even) a, #invitation .info-container:nth-child(even) a:visited {
        color: #444; }
      #invitation .info-container:nth-child(even) a:hover {
        color: #666; }
  #invitation .footer-container {
    width: 100%;
    font-family: 'Georgia', 'Times', 'Times New Roma', serif;
    line-height: normal;
    background: #feec95;
    color: black;
    font-size: 12pt;
    padding: 2em 2em; }
    #invitation .footer-container a, #invitation .footer-container a:visited {
      color: #444; }
    #invitation .footer-container a:hover {
      color: #666; }
    #invitation .footer-container p {
      margin-bottom: 1em; }
    #invitation .footer-container p:last-child {
      margin-bottom: 0; }
  #invitation img.fwc {
    width: 70%;
    position: relative;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    margin: 0 0; }
    @media (min-width: 0px) and (max-width: 600px) {
      #invitation img.fwc {
        width: 95%; } }
  #invitation > span {
    width: 100%;
    text-align: center;
    display: block;
    margin: 0 auto;
    padding: 0.5em;
    position: relative;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%); }
  #invitation .details {
    font-family: 'Sawasdee', 'SawasdeeRegular', sans-serif;
    font-size: 20pt;
    line-height: normal;
    padding: 0 0.5em;
    text-align: center;
    line-height: 130%; }
    #invitation .details a, #invitation .details a:visited {
      color: #fff;
      text-decoration: none; }
    #invitation .details a:hover, #invitation .details a:active {
      color: #ddd;
      text-decoration: underline; }
    #invitation .details strong {
      line-height: 300%;
      font-weight: bold; }
    #invitation .details .nobr {
      white-space: nowrap; }
    #invitation .details .vspace {
      display: block;
      height: 0.1em; }
      @media (min-width: 0px) and (max-width: 600px) {
        #invitation .details .vspace {
          height: 0.5em; } }
  #invitation .sauvies {
    margin-top: 2em; }
  #invitation .date {
    margin-top: 2em; }
  #invitation .rsvp {
    background: #417975;
    color: white;
    overflow: hidden;
    position: relative; }
    #invitation .rsvp p {
      padding: 1em 0;
      text-align: center;
      font-family: 'Sawasdee', 'SawasdeeRegular', sans-serif;
      font-size: 32pt; }
      @media (min-width: 0px) and (max-width: 600px) {
        #invitation .rsvp p {
          font-size: 20pt; } }
    #invitation .rsvp .buttons {
      margin: 0 auto;
      width: 60%; }
      @media (min-width: 0px) and (max-width: 600px) {
        #invitation .rsvp .buttons {
          width: 80%; } }
      #invitation .rsvp .buttons button {
        font-family: 'Sawasdee', 'SawasdeeRegular', sans-serif;
        font-size: 32pt;
        line-height: normal;
        border: solid 3px white;
        color: white;
        background: transparent;
        margin: 1em auto;
        padding: 0.5em 1em;
        cursor: pointer;
        display: block;
        width: 80%; }
        @media (min-width: 0px) and (max-width: 600px) {
          #invitation .rsvp .buttons button {
            font-size: 20pt; } }
        #invitation .rsvp .buttons button:hover {
          background: rgba(255, 255, 255, 0.4); }
    #invitation .rsvp .form-container {
      position: relative; }
    #invitation .rsvp form {
      display: none;
      font-family: 'Sawasdee', 'SawasdeeRegular', sans-serif;
      font-size: 24pt;
      line-height: 1.5em;
      visibility: visible;
      opacity: 1; }
      @media (min-width: 0px) and (max-width: 600px) {
        #invitation .rsvp form {
          font-size: 20pt; } }
      #invitation .rsvp form label {
        display: block;
        text-align: center; }
      #invitation .rsvp form textarea, #invitation .rsvp form input {
        display: block;
        margin: 0 auto; }
      #invitation .rsvp form textarea, #invitation .rsvp form input[type=text] {
        font-family: 'Sawasdee', 'SawasdeeRegular', sans-serif;
        font-size: 14pt;
        width: 90%;
        padding: 0.5em; }
        @media (min-width: 0px) and (max-width: 600px) {
          #invitation .rsvp form textarea, #invitation .rsvp form input[type=text] {
            font-size: 14pt; } }
      #invitation .rsvp form textarea {
        height: 15em; }
        @media (min-width: 0px) and (max-width: 600px) {
          #invitation .rsvp form textarea {
            height: 7em; } }
      #invitation .rsvp form label {
        font-size: 14pt;
        text-align: left;
        font-style: italic;
        line-height: 150%;
        padding: 1em 5% 0.5em 5%; }
        @media (min-width: 0px) and (max-width: 600px) {
          #invitation .rsvp form label {
            font-size: 12pt; } }
      #invitation .rsvp form input[type=submit] {
        font-family: 'Sawasdee', 'SawasdeeRegular', sans-serif;
        font-size: 32pt;
        line-height: normal;
        border: solid 3px white;
        color: white;
        background: transparent;
        margin: 1em auto;
        padding: 0.5em 1em;
        cursor: pointer; }
        @media (min-width: 0px) and (max-width: 600px) {
          #invitation .rsvp form input[type=submit] {
            font-size: 20pt; } }
        #invitation .rsvp form input[type=submit]:hover {
          background: rgba(255, 255, 255, 0.4); }
      #invitation .rsvp form.done {
        transition-property: opacity;
        transition-duration: 1.0s;
        opacity: 0; }
    #invitation .rsvp .thanks {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translateY(-50%) translateX(-50%);
              transform: translateY(-50%) translateX(-50%);
      line-height: 250%;
      display: none;
      opacity: 0.0; }
      @media (min-width: 0px) and (max-width: 600px) {
        #invitation .rsvp .thanks {
          width: 90%; } }
      #invitation .rsvp .thanks.show {
        display: block;
        transition-property: opacity;
        transition-duration: 0.5s;
        opacity: 1; }
      #invitation .rsvp .thanks p {
        font-size: 20pt; }
/*# sourceMappingURL=compiled-style.css.map */