/* 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; } body *{box-sizing: border-box} html{ scroll-behavior: smooth }

@font-face{
  font-family: 'Cako';
  font-weight: 800;
  src: url('../FONTS/Cako-Black.woff');
}

body{
  /* background-image: url('../MEDIA/patterns/leaf-pattern.svg'); */
  background-color: #FCFFFC;
  font-family: 'Montserrat', sans-serif;
}

/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::                                                                         ::::::::::::::::::::
::::::::::::::::::::  NAVIGATION                                                             ::::::::::::::::::::
::::::::::::::::::::                                                                         ::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

.nav-wrapper{}

nav{
  position: fixed;
  z-index: 100;
}

/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::  MOBILE                                                                 ::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

nav .mobile{
  display: flex;
    justify-content: space-between;
    align-items: center;
}

/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::  DESKTOP                                                                ::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

nav .desktop{
  display: none; /* TOGGLED BY MEDIA QUERY */
    justify-content: space-between;
    align-items: center;
}

/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::                                                                         ::::::::::::::::::::
::::::::::::::::::::  TOP                                                                    ::::::::::::::::::::
::::::::::::::::::::                                                                         ::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

nav.top{
  top: 0; left: 0;
  width: 100%;
}

@media all and (min-width: 700px){
  nav.top .mobile{ display: none }
  nav.top .desktop{ display: flex }
}

/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::  MOBILE                                                                 ::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

nav.top .mobile{
  width: 100%;
}

nav.top button.mobile-menu{
  border: none;
  background: none;
  padding: 8px;
  z-index: 999;

  transition: transform .1s linear;
}

nav.top button.mobile-menu .rect{
  width: 24px;
  height: 4px;
  background: #000;
  margin-bottom: 4px;

  transition: transform .2s linear;
}

nav.top button.mobile-menu .rect:last-of-type{
  margin-bottom: 0;
}

nav.top  .mobile[data-state='active'] button.mobile-menu{
  transform: rotate(180deg);
}

nav.top .mobile[data-state='active'] button.mobile-menu .rect:first-of-type{ transform: rotate(45deg) }
nav.top .mobile[data-state='active'] button.mobile-menu .rect:nth-of-type(2){ display: none }
nav.top .mobile[data-state='active'] button.mobile-menu .rect:last-of-type{ transform: rotate(-45deg) translate(5px, -6px) }

nav.top .mobile > ul{
  display: none;
    flex-direction: column;
    justify-content: center;
  position: absolute;
  top: 0px;
  right: 0px;
  padding-top: 56px;
  padding-bottom: 48px;
  background: #FCFFFC;
  font-size: 3em;
  font-family: 'Cako',serif;
}

nav.top .mobile > ul li{
  padding: 16px 16px 16px 48px;
  text-align: right;
}

nav.top .mobile > ul li a {
  text-decoration: none;
  color: #000;
}

nav.top  .mobile[data-state='active'] > ul{
  display: flex;
}

/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::  DESKTOP                                                                ::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

nav.top .desktop{}

nav.top .desktop ul{
  display: flex;
  padding: 16px;
  background: #FCFFFC;
}

nav.top .desktop ul li{
  margin-left: 16px;
  font-size: 1.25em;
}

nav.top .desktop ul li a{
  text-decoration: none;
  font-family: 'Montserrat', serif;
  color: #000;
}

/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::                                                                         ::::::::::::::::::::
::::::::::::::::::::  SECTIONS                                                               ::::::::::::::::::::
::::::::::::::::::::                                                                         ::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

section{
  width: 100%;
}

section .content-wrap{
  width: 100%;
    max-width: 1000px;
  margin: 0 auto;
  padding: 32px 16px;
}

section h2{
  font-family: 'Cako', serif;
  font-size: 4em;
  text-align: center;
  text-transform: lowercase;
}

@media (min-width: 600px){
  section .content-wrap{
    padding: 64px 32px;
  }

  section h2{
    font-size: 6em;
  }
}

/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::                                                                         ::::::::::::::::::::
::::::::::::::::::::  HERO                                                                   ::::::::::::::::::::
::::::::::::::::::::                                                                         ::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

section.hero{}

section.hero .content-wrap{
  min-height: 100vh;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
  padding-top: 64px;
}

section.hero .date-location{
  position: absolute;
  left: 32px;
  top: 0;
  writing-mode: vertical-rl;
  text-orientation: upright;
  text-transform: uppercase;
  letter-spacing: 2px;
  height: 100%;
  text-align: center;
}

section.hero .date-location span{
  margin: 8px 0;
}

section.hero .date-location span.bull{
  font-size: .75em;
}

section.hero .top{
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 100%;
  text-align: center;
}

section.hero .top img{
  position: relative;
  width: 80%;
  max-width: 400px;
  z-index: 10;
  margin-top: -64px;
}

h1{
  position: relative;
  font-size: 22vw;
  line-height:.75;
  font-family: 'Cako';
  z-index: 20;
}

h1 span{
  display: block;
  text-align: right;
}

h1 span:first-of-type{ font-size: 1em }
h1 span:last-of-type{ padding-right: .33em }

section.hero ul.links{
  margin-top: 64px;
  font-size: 1.25em;
  display: flex;
}

section.hero ul.links li{
  margin: 0 8px;
  border: 1px solid #000000;
    border-radius: 20px;
  padding: 8px 16px;
  font-size: .9em;
}

section.hero ul.links li a{
  color: #000;
  text-decoration: none;
}

section.hero ul.links li:hover{
  background: #000;
  color: #FCFFFC;
}

section.hero ul.links li:hover a{
  color :#FCFFFC
}

section.hero .story-guide{
  position: absolute;
  bottom: 32px; right: 32px;
}

@media (min-width: 1200px){
  h1{ font-size: 16vw }
}

@media (min-width: 1400px){
  h1{ font-size: 14em }
}

/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::                                                                         ::::::::::::::::::::
::::::::::::::::::::  DETAILS                                                                ::::::::::::::::::::
::::::::::::::::::::                                                                         ::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

section.details{}

section.details ul{
  margin-top: 64px;
  font-size: 1.125em;
}

section.details ul li{
  margin-bottom: 32px;
  display: flex;
    flex-wrap: wrap;
  line-height: 1.4;
}

section.details ul li h3{
  font-weight: 900;
  margin-right: 32px;
  width: 100%;
}

section.details ul li h3 > span{
  font-weight: 400;
  font-size: .9em;
  margin-left: 16px;
  display: block;
}

section.details ul li > span{
  width: 100%
}

@media (min-width: 800px){
  section.details ul li{ flex-wrap: nowrap }
  section.details ul li h3{
    margin-right: 32px;
    width: 25%;
  }
  section.details ul li > span{
    width: 75%
  }

  section.details ul li h3 > span{ margin-left: 0px;}
}

/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::                                                                         ::::::::::::::::::::
::::::::::::::::::::  TRAVEL                                                                 ::::::::::::::::::::
::::::::::::::::::::                                                                         ::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

section.travel .tabs,
section.locales .tabs{
  margin-top: 64px;
  margin-bottom: 32px;
  justify-content: flex-start;
}

section.travel .tabs button.tab,
section.locales .tabs button.tab{
  margin-right: 32px;
  font-weight: 900;
  font-size: 1.125em;
  background: none;
  border: none;
  font-family: 'Montserrat', sans-serif;
  padding-bottom: 8px;
}

section.travel .tabs button.tab[data-selected="true"],
section.locales .tabs button.tab[data-selected="true"]{
  border-bottom: 2px solid #000;
}

section.travel p,
section.locales p{
  margin-bottom: 16px;
  font-size: 1.125em;
  line-height: 1.4;
}

/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::                                                                         ::::::::::::::::::::
::::::::::::::::::::  Q & A                                                                  ::::::::::::::::::::
::::::::::::::::::::                                                                         ::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

section.qa{

}

section.qa h2{
  margin-bottom: 72px;
}

section.qa p{
  margin-top: 32px;
  font-size: 1.125em;
  line-height: 1.4;
}

section.qa p span{
  font-weight: 900;
  display: block;
  margin-bottom: 8px;
}

/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::                                                                         ::::::::::::::::::::
::::::::::::::::::::  OUR STORY                                                              ::::::::::::::::::::
::::::::::::::::::::                                                                         ::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

section.story{

}

section.story p{
  font-size: 1.125em;
  margin-bottom: 32px;
  line-height: 1.5
}

section.story p:first-of-type{
  margin-top: 64px;
}


/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::                                                                         ::::::::::::::::::::
::::::::::::::::::::  RSVP FORM                                                              ::::::::::::::::::::
::::::::::::::::::::                                                                         ::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

section.rsvp{
  
}


section.rsvp .hidden-wrap{
  overflow: hidden;
  height: 0px;
  transition: height .2s linear;

}

section.rsvp .hidden-content{
  
}

section.rsvp form{
  font-size: .9em;
  letter-spacing: 1px;
  max-width: 1000px;
  margin: 64px auto 0 auto;
  padding: 16px;
  border: 1px solid #000;
}

section.rsvp form fieldset{
  margin-bottom: 40px;
}

section.rsvp form input[type='text']{
  background: none;
  padding: 8px;
  border: 1px solid #000;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.125em;
  letter-spacing: 1px;
}

section.rsvp form input[type='text']:focus{
  outline: none
}

section.rsvp form fieldset input[type='radio']{
  position: relative;
  flex-shrink: 0;
  appearance: none;
  background: none;
  margin: 0;
  width: 16px;
  height: 16px;
  border: 1px solid #000;
  border-radius: 50%;
  margin-right: 4px;
  transform: translateY(1px)
}

section.rsvp form fieldset input[type='radio']:checked::before{
  content: '';
  position: absolute;
  top: 1.5px; left: 1.5px;
  width: 11px;
  height: 11px;
  background: #000;
  border-radius: 50%;
}

section.rsvp form fieldset label{
  font-size: 1.125em;
  line-height: 1.4;
}

section.rsvp form fieldset legend{
  font-size: 1.125em;
  font-weight: 700;
  margin-bottom: 16px;
}

@media (min-width: 700px){
  section.rsvp form{
    padding: 32px;
  }
}

/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::  NAME                                                                   ::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

section.rsvp form fieldset.name label{
  font-weight: 700;
}

section.rsvp form fieldset.name label span{
  display: inline-block;
  font-weight: 400;
  margin-top: 8px;
}

section.rsvp form fieldset.name input{
  margin-top: 24px;
  width: 100%;
}

.autocomplete-wrap{
  position: relative;
}

.autocomplete-options{
  position: absolute;
  width: 100%;
  border: 1px solid #000;
    border-top: none;
  background: #FCFFFC;
  z-index: 100;
  font-size: 1.125em;
}

.autocomplete-options li{
  padding: 8px;
  border-bottom: 1px solid #000;
}

.autocomplete-options li:last-of-type{
  border-bottom: none;
}

.fake-name{
  display: none;
  font-weight: 900;
}

.fake-name.show{
  display: block;
  width: 100%;
  font-size: 1.125em;
}

.fake-name.show span{
  margin-top: 16px;
  display: block;
  width: 100%;
  border: 1px solid #000;
  padding: 8px;
  font-size: 1.125em;
  opacity: .7;
  font-weight: 400;
  margin-bottom: 40px;
}

.name-guest{
  display: none;
}

.name-guest.show{
  display: block;
}

.name-guest label{
  width: 100%;
  font-weight: 900;
}

.name-guest input{
  width: 100%;
  margin-top: 16px;
}

/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::  RSVP CHOICE                                                            ::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

section.rsvp form fieldset.rsvp-choice{
  display: flex;
    flex-wrap: wrap;
}

section.rsvp form fieldset.rsvp-choice > div{ width: 100% }

section.rsvp form fieldset.rsvp-choice > div:first-of-type{
  margin-bottom: 8px;
}

@media (min-width: 600px){
  section.rsvp form fieldset.rsvp-choice > div{ width: auto }
  section.rsvp form fieldset.rsvp-choice > div:first-of-type{ margin-right: 80px; margin-bottom: 0; }
}

/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::  FOOD                                                                   ::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

section.rsvp form fieldset.food fieldset.main{
  display: flex;
  flex-wrap: wrap;
}

section.rsvp form fieldset.food fieldset.main > div{
  width: 100%;
  display: flex;
  margin-bottom: 8px;
}

section.rsvp form fieldset.food fieldset.main > div:first-of-type,
section.rsvp form fieldset.food fieldset.main > div:nth-of-type(3){
  padding-right: 12px;
}

section.rsvp form fieldset.food fieldset.main > div:nth-of-type(2n){
  transform: translate(0px);
}

section.rsvp form fieldset.food fieldset.main label{
  font-size: 1em;
  letter-spacing: 0px;
}

section.rsvp form fieldset.food input[type='radio']{
  margin-right: 8px;
}

section.rsvp form fieldset.food .sides-note{
  margin-top: 8px;
  font-style: oblique;
  line-height: 1.4;
}

section.rsvp form fieldset.food fieldset.restrictions{ margin-bottom: 0 }
section.rsvp form fieldset.food fieldset.restrictions label{
  font-weight: 700;
}

section.rsvp form fieldset.food fieldset.restrictions input{
  width: 100%;
  margin-top: 8px;
}

@media (min-width: 800px){
  section.rsvp form fieldset.food fieldset.main > div{ width: 50% }
  section.rsvp form fieldset.food fieldset.main > div:nth-of-type(2n){ transform: translate(8px) }
}

/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::  PLUS ONE                                                               ::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
fieldset.plus-one-choice{
  display: none;
}

fieldset.plus-one-choice.show{ display: flex; }

section.rsvp form fieldset.plus-one-choice > div{
  display: flex;
}

section.rsvp form fieldset.plus-one-choice > div:first-of-type{
  margin-right: 64px;
}

/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::  ACTIONS                                                                ::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

section.rsvp form fieldset.actions{ margin-bottom: 0 }

section.rsvp form fieldset.actions button{
  background: none;
  border: 1px solid #000;
  padding: 8px 16px;
  border-radius: 4px;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.125em;
  margin-right: 16px;
}

section.rsvp form fieldset.actions button.submit-button{
  opacity: .5;
}

section.rsvp form fieldset.actions button.submit-button.valid{
  opacity: 1;
}

section.rsvp form fieldset.actions button.submit-button.valid:hover,
section.rsvp form fieldset.actions button.not-coming-submit:hover{
  background: #000;
  color: #FCFFFC;
}

/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::  SUCCESS PAGE                                                           ::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

section.rsvp form .success-page,
section.rsvp form .error-page{
  display: none;
}

section.rsvp form .success-page.show,
section.rsvp form .error-page.show{
  display: flex;
    align-items: center;
    justify-content: center;
  flex-direction: column;
}

section.rsvp form .success-page h2,
section.rsvp form .error-page h2{
  font-size: 3rem;
  margin-bottom: 32px;
}

section.rsvp form .success-page p,
section.rsvp form .error-page p{
  font-size: 1.125em;
  margin-top: 8px;
}

footer{
  min-height: 100px;
}

footer p{
  color: #FCFFFC;
}