/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Carattere&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

:root {
    --base-txt-black: #000000;
    --base-txt-white: #ffffff;
    
    --olive-green: #BAB86C;
    --beach-green: #2a7c6f;

    --box-shadow: rgba(0, 0, 0, 0.30);
    --base-divider: #f7f7f7;
}

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

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--base-txt-white);
    color: var(--base-txt-black);
    font-family: "Playfair Display", serif;
}

a {
    text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--beach-green);
}

input {
    cursor: pointer;
}

/* START OF HEADER */

header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    background-color: transparent;
    color: var(--base-txt-white);
    z-index: 100;
    -webkit-transition: background-color 0.4s ease, -webkit-box-shadow 0.4s ease;
    transition: background-color 0.4s ease, -webkit-box-shadow 0.4s ease;
    -o-transition: background-color 0.4s ease, box-shadow 0.4s ease;
    transition: background-color 0.4s ease, box-shadow 0.4s ease;
    transition: background-color 0.4s ease, box-shadow 0.4s ease, -webkit-box-shadow 0.4s ease;
}

header.scrolled {
  background-color: var(--beach-green);
  -webkit-box-shadow: 0 2px 8px var(--box-shadow);
          box-shadow: 0 2px 8px var(--box-shadow);
}

header .inner {
    padding: 24px 16px;
}

header .inner nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

header .inner nav .tc--logo h1 {
    color: var(--base-txt-white);
}

header .inner nav .tc--nav-menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 14px;
}

header .inner nav .tc--nav-menu .nav--lists {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-bottom: unset;
    gap: 24px;
}

header .inner nav .tc--nav-menu .nav--lists li {
    list-style: none;
}

header .inner nav .tc--nav-menu .nav--lists li a {
    color: var(--base-txt-white);
}

header .inner nav .tc--nav-menu .nav--close,
header .inner nav .nav--toggle {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    color:  var(--base-txt-white);
    font-size: 2rem;
    cursor: pointer;
}

header .inner nav .tc--nav-menu .nav--close {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
}


header .inner nav .tc--nav-menu .nav--close,
header .inner nav .nav--toggle {
    display: none;
}


/* Show menu */
header .inner nav .tc--nav-menu.show-menu {
    left: 0;
}

header .inner nav .tc--nav-menu.show-menu .nav--lists .nav--item {
    visibility: visible;
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0);
}

header .inner nav .tc--nav-menu .nav--lists .nav--item  {
    position: relative;
    font-size: 1rem;
    cursor: pointer;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-transition: opacity .4s;
    -o-transition: opacity .4s;
    transition: opacity .4s;
}
header .inner nav .tc--nav-menu .nav--lists .nav--item i {
    font-size: 1rem;
    position: absolute;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity .4s, visibility .4s;
    -o-transition: opacity .4s, visibility .4s;
    transition: opacity .4s, visibility .4s;       
}

header .inner nav .tc--nav-menu .nav--lists .nav--item span {
    position: relative;
    -webkit-transition: margin .4s;
    -o-transition: margin .4s;
    transition: margin .4s;
}

header .inner nav .tc--nav-menu .nav--lists .nav--item span:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0;
    height: 2px;
    background-color:  var(--base-txt-white);
    -webkit-transition: width .4s ease-out;
    -o-transition: width .4s ease-out;
    transition: width .4s ease-out;
}


/* END OF HEADER */

section {
    scroll-margin-top: 80px;
}

.tc--hero-section {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

.tc--hero-section video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    z-index: -2;
}

.tc--hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(104, 105, 110, 0.4);
  z-index: -1;
}

.tc--hero-section .tc--hero-text {
    width: 100%;
    position: absolute;
    bottom: 32px;
    left: 0;
    padding: 24px 16px;
}

.tc--hero-section .tc--hero-text .cursive--text {
  font-family: "Carattere", cursive;
  font-size: 42px;
}

.tc--hero-section .tc--hero-text p {
    color: var(--base-txt-white);
    font-size: 20px;
    margin-bottom: 8px;
}

.tc--our-story {
    position: relative;
}

.tc--our-story .inner {
    max-width: 1360px;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    gap: 16px;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 38px 16px;
}

.tc--our-story .inner .img--left {
    width: 100%;
    max-width: 980px;
    background-image: url('../images/our/sunset.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 70vh;
    border-radius: 8px;
    z-index: 2;
}

.tc--our-story .inner .content--right {
    max-width: 980px;
    margin: 0 auto;
    text-align: justify;
}

.tc--our-story .inner .content--right h2 {
    font-size: 38px;
    text-transform: capitalize;
    text-align: center;
    margin-bottom: 18px;
}

.tc--our-story .inner .content--right .content--divider {
    text-align: center;
    margin-bottom: 32px;
}

.tc--our-story .inner .content--right .content--divider img {
    width: 10%;
}

.tc--our-story .inner .content--right p {
    margin-bottom: 12px;
}

.tc--our-story .inner .content--right .story--content {
    text-align: center;
}

/* COUNTDOWN */

.tc--hero-countdown {
    margin-bottom: 24px;
}

.tc--hero-countdown .inner {
    max-width: 980px;
    margin:  0 auto;
    padding: 12px 16px;
}

.tc--hero-countdown .inner .container {
    text-align: center;
}

.tc--hero-countdown .inner .container h1 {
    font-weight: 400;
    margin-bottom: 8px;
}

.tc--hero-countdown .inner .container .headline--description {
    margin-bottom: 42px;
    font-size: 14px;
    font-weight: 400;
}

.tc--hero-countdown .inner .container #countdown ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 50px;
}

.tc--hero-countdown .inner .container #countdown ul li {
    list-style: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.tc--hero-countdown .inner .container #countdown ul li .top {
    font-size: 42px;
}

.tc--venue {
    margin-bottom: 32px;
}

.tc--venue .inner {
    max-width: 980px;
    margin: 0 auto;
    padding: 38px 16px;
}

.tc--venue .inner .content--divider img {
    width: 100%;
    margin-bottom: 24px;
}

.tc--venue .inner .content--divider h2 {
    font-size: 38px;
    text-transform: capitalize;
    text-align: center;
    margin-bottom: 24px;
}

.tc--venue .inner .content--venue {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 16px;
}

.tc--venue .inner .content--venue .venue--content-left h3,
.tc--venue .inner .content--venue .venue--content-left p,
.tc--venue .inner .content--venue .venue--content-right h3,
.tc--venue .inner .content--venue .venue--content-right p {
    margin-bottom: 12px;
    text-align: center;
}

.tc--venue .inner .content--venue .venue--content-left .content--iframe-church,
.tc--venue .inner .content--venue .venue--content-right .content--iframe-resort {
    margin-bottom: 24px;
}

.content--venue .venue--content-left .pswp-gallery,
.content--venue .venue--content-right .pswp-gallery {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 12px;
}

.content--venue .venue--content-left .pswp-gallery a img,
.content--venue .venue--content-right .pswp-gallery a img {
    width: 100%;       
    height: 120px;     
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 4px;
}



.col--divider {
    width: 100%;
    margin: 32px auto;
    height: 2px;
    background-color: var(--base-divider);
}

#inline-gallery-container,
#inline-gallery-container2 {
    width: 100%;
    height: 0;
    padding-bottom: 50%;
}

.tc--playlist {
    width: 100%;
    background: url('../images/our/our3.webp');
    background-repeat: no-repeat;
    background-size: cover;
      -webkit-background-size: cover;
      -moz-background-size: cover;
    -o-background-size: cover;
    background-attachment: fixed;
    position: relative;
}

.tc--playlist:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(104, 105, 110, 0.4);
    z-index: 1;
}

.tc--playlist .inner {
    position: relative;
    max-width: 980px;
    margin: 0 auto;
    padding: 100px 16px;
    z-index: 9;
}

.tc--playlist .inner iframe {
    position: relative;
    z-index: 3;
}

/* ACCORDION */

.tc--faq {
    position: relative;
    padding: 38px 16px;
}

.tc--faq .inner {
    position: relative;
    max-width: 980px;
    margin: 0 auto;
}

.tc--faq:before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../images/bg/abstract.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
      -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
    opacity: 0.2;
}

.tc--faq .inner .content--divider img {
    width: 10%;
}

.tc--faq .inner h2,
.tc--faq .inner .content--divider {
    text-align: center;
}

.tc--faq .inner .content--divider {
    margin-bottom: 32px;
}

.accordion-button:not(.collapsed) {
    background-color: var(--base-divider);
    color: var(--beach-green);
    font-weight: 700;
}

.accordion-button::after {
        color: var(--base-txt-white);
}

.accordion .accordion-item {
    margin-bottom: 12px;
    border-top: 1px solid #dee2e6;
}

.accordion-body {
    color: var(--beach-green);
}

/* END OF ACCORDION */

/* ENTOURAGE */

.entourage {
    position: relative;
    padding: 48px 16px;
}

.entourage:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../images/bg/entourage.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    opacity: .1;
    z-index: -1;
}

.entourage .inner {
    max-width: 980px;
    margin: 0 auto;
}

.entourage .inner .entourage--code-flex .entourage--code h3 {
    text-align: center;
    margin-bottom: 24px;
}

.content--parent .flex--content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.content--parent .flex--content p {
    text-align: center;
    margin-bottom: 8px;
}

.content--parent .flex--content-primary {
    text-align: center;
}

.content--parent .flex--content-primary .content--primary {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.content--parent .flex--content-primary .content--primary p {
    margin-bottom: 8px;
}

.content--parent .flex--content .left--content .entourage--title,
.content--parent .flex--content .right--content .entourage--title {
    font-size: 20px;
}

.flex--content-primary .flex--content-single {
    margin-bottom: 24px;
}

.flex--content-primary .flex--content-single p {
    margin-bottom: 8px;
}

.flex--content-primary .flex--content-single p:first-child {
    font-weight: 500;
    margin-bottom: 4px;
    color: var(--beach-green);
}

.heading--clr-txt {
    color: var(--beach-green);
    font-weight: 500;
}

.sub--title-spec {
    font-size: 14px;
    color: var(--beach-green);
}

.content--box {
    margin-bottom: 42px;
}

/* END OF ENTOURAGE */

/* TIMELINE */

.timeline {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin: 0 auto;
  position: relative;
  padding: 38px 16px;
}

.timeline .inner {
  max-width: 980px;
  margin: 0 auto;
}

.timeline .content--divider {
    text-align: center;
    margin-bottom: 24px;
}

.timeline .content--divider img {
    width: 10%;
}

.timeline h2 {
    text-align: center;
    font-size: 38px;
    margin-bottom: 18px;
}

.timeline .inner .timeline--text {
  text-align: center;
}

.time--flex-items {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 30px;

  margin-bottom: 24px;
}

.time--flex-items .itenerary--items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 8px;

  text-align: center;
}

.time--flex-items .itenerary--items .item--ceremony {
    border: 1px solid #444;
    border-radius: 4px;
    padding: 16px 8px;

    width: 185px;
    height: auto;
    -o-object-fit: contain;
       object-fit: contain;
}

.time--flex-items .itenerary--items .item--ceremony img {
  margin-bottom: 12px;
  width: 80px;
}

.time--flex-items .itenerary--items .item--ceremony p {
  font-size: 18px;
}

.time--flex-items .itenerary--items .item--ceremony span {
  font-size: 14px;
}

/* END OF TIMELINE */


/* DRESS CODE */

.dress--code {
    padding: 38px 16px;
}

.dress--code .inner {
    max-width: 980px;
    margin: 0 auto;
}

.dress--code .inner h2 {
    text-align: center;
    font-size: 38px;
    margin-bottom: 18px;
}

.dress--code .inner .content--divider {
    text-align: center;
    margin-bottom: 28px;
}

.dress--code .inner .content--divider img {
    width: 10%;
}

.dress--code-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    gap: 8px;
}

.dress--code-flex h3 {
    text-transform: uppercase;
    font-size: 24px;
    margin-bottom: 14px;
}

.dress--code-flex .sponsors,
.dress--code-flex .groomsmen,
.dress--code-flex .bridesmaid,
.dress--code-flex .guest {
    margin-bottom: 14px;
}

.color--code {
    text-align: center;
}

.color--code p {
    margin-bottom: 24px;
}

.color--code .color--item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 8px;
}

.color--code .color {
    width: 70px;
    height: 70px;
    border-radius: 200px;
}

.color--code .clr--1 {
    background-color: #846C51;
}

.color--code .clr--2 {
    background-color: #AD9F8C;
}

.color--code .clr--3 {
    background-color: #C7BFB4;
}

.color--code .clr--4 {
    background-color: #EFE7D9;
}

.color--code .clr--5 {
    background-color: #FEFFF1;
    display: none;
}

/* END OF DRESS CODE */

.tc--rsvp {
    position: relative;
}

.tc--rsvp::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../images/divider/vector-leaves.png");
    background-repeat: no-repeat;
    background-position: left;
    background-size: contain; 
    opacity: 0.1;             
    z-index: -1;             
}

.tc--rsvp .inner {
    max-width: 980px;
    margin: 0 auto;
    padding: 38px 16px;
}

.tc--rsvp .inner h3 {
    font-size: 48px;
    text-align: center;
    margin-bottom: 38px;
}

.tc--rsvp .inner p {
    margin-bottom: 32px;
    line-height: 1.8;
    text-align: center;
}

.tc--rsvp .inner form {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

.tc--rsvp .inner form .input--design {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 20px;
    margin-bottom: 24px;
}

.tc--rsvp .inner form .input--design div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.tc--rsvp .inner form .input--design div label,
.tc--rsvp .inner form .input--email div label {
    margin-bottom: 12px;
}

.tc--rsvp .inner form .input--design div input {
    padding: 12px 8px;
    width: 290px;
}

.tc--rsvp .inner form .input--email {
    width: 100%;
    margin-bottom: 32px;
}

.tc--rsvp .inner form .input--email div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.tc--rsvp .inner form .input--email div input {
    padding: 12px 8px;
}

.tc--rsvp .inner form .attending--design,
.tc--rsvp .inner form  .ceremony--design {
    margin-bottom: 24px;
}

.tc--rsvp .inner form .attending--design .attending--opt,
.tc--rsvp .inner form  .ceremony--design  .ceremony--opt {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 12px;
}

.tc--rsvp .inner form .attending--design .attending--opt label {
    border: 1px solid #111;
    border-radius: 4px;
    padding: 24px 16px;
    width: 50%;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 2px;
}

.tc--rsvp .inner form  .ceremony--design .ceremony--opt label {
    border: 1px solid #111;
    padding: 24px 16px;
    width: 50%;
    border-radius: 4px;

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 4px;
}

.tc--rsvp .inner form .cta--design button {
    display: block;
    color: #2A7B6F;
    outline: 1px solid #111;
    border: none;
    border-radius: 4px;
    background-color: transparent;
    font-size: 16px;
    padding: 24px 16px;
    cursor: pointer;
    width: 100%;
    text-transform: uppercase;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

footer .inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 25px 100px;
}

footer .inner p {
    margin-bottom: unset;
}

/* ----- Breakpoints ----- */

@media screen and (max-width: 1150px) {
    header .inner nav .tc--nav-menu {
        position: fixed;
        left: -100%;
        top: 0;
        background-color: #2a7b6f;
        width: 100%;
        height: 100%;
        padding: 24px 16px;

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
        -webkit-transition: left .3s ease-in-out;
        -o-transition: left .3s ease-in-out;
        transition: left .3s ease-in-out;
        z-index: 101;
    }

    header .inner nav .tc--nav-menu .nav--lists {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    header .inner nav .tc--nav-menu .nav--lists .nav--item {
        position: relative;
        font-size: 22px;

        display: -webkit-inline-box;

        display: -ms-inline-flexbox;

        display: inline-flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-transition: opacity .4s;
        -o-transition: opacity .4s;
        transition: opacity .4s;
    }

    header .inner nav .tc--nav-menu .nav--lists .nav--item i {
        font-size: 1.5rem;
        position: absolute;
        opacity: 0;
        visibility: hidden;
        -webkit-transition: opacity .4s, visibility .4s;
        -o-transition: opacity .4s, visibility .4s;
        transition: opacity .4s, visibility .4s;       
    }

    header .inner nav .tc--nav-menu .nav--lists .nav--item span {
        position: relative;
        -webkit-transition: margin .4s;
        -o-transition: margin .4s;
        transition: margin .4s;
    }

    header .inner nav .tc--nav-menu .nav--lists .nav--item span:after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -6px;
        width: 0;
        height: 2px;
        background-color: #fff;
        -webkit-transition: width .4s ease-out;
        -o-transition: width .4s ease-out;
        transition: width .4s ease-out;
    }

    header .inner nav .nav--toggle {
        position: absolute;
        top: 1rem;
        right: 1.5rem;
        font-size: 24px;
        cursor: pointer;
    }

    header .inner nav .tc--nav-menu .nav--close,
    header .inner nav .nav--toggle  {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex; 
        font-size: 2rem;
    }

    header .inner nav .tc--nav-menu .nav--lists .nav--item {
        -webkit-transform: translateX(-150px);
            -ms-transform: translateX(-150px);
                transform: translateX(-150px);
        visibility: hidden;
        -webkit-transition: visibility .4s, -webkit-transform .4s ease-out;
        transition: visibility .4s, -webkit-transform .4s ease-out;
        -o-transition: transform .4s ease-out, visibility .4s;
        transition: transform .4s ease-out, visibility .4s;
        transition: transform .4s ease-out, visibility .4s, -webkit-transform .4s ease-out;
    }

    header .inner nav .tc--nav-menu .nav--lists .nav--item:nth-child(1) {
        -webkit-transition-delay: .1s;
             -o-transition-delay: .1s;
                transition-delay: .1s;
    }
    header .inner nav .tc--nav-menu .nav--lists .nav--item:nth-child(2) {
        -webkit-transition-delay: .2s;
             -o-transition-delay: .2s;
                transition-delay: .2s;
    }
    header .inner nav .tc--nav-menu .nav--lists .nav--item:nth-child(3) {
        -webkit-transition-delay: .3s;
             -o-transition-delay: .3s;
                transition-delay: .3s;
    }
    header .inner nav .tc--nav-menu .nav--lists .nav--item:nth-child(4) {
        -webkit-transition-delay: .4s;
             -o-transition-delay: .4s;
                transition-delay: .4s;
    }
    header .inner nav .tc--nav-menu .nav--lists .nav--item:nth-child(5) {
        -webkit-transition-delay: .5s;
             -o-transition-delay: .5s;
                transition-delay: .5s;
    }
    header .inner nav .tc--nav-menu .nav--lists .nav--item:nth-child(6) {
        -webkit-transition-delay: .6s;
             -o-transition-delay: .6s;
                transition-delay: .6s;
    }
    header .inner nav .tc--nav-menu .nav--lists .nav--item:nth-child(7) {
        -webkit-transition-delay: .7s;
             -o-transition-delay: .7s;
                transition-delay: .7s;
    }

}

/* Tablet - max width 1023px */
@media (max-width: 1023px) {
    .tc--hero-section {
        height: 80vh;
    }

    .tc--playlist {
        background-attachment: unset;
        background-size: cover;
        background-position: 100% 40%;
    } 

    .tc--faq:before {
        background-attachment: unset;
        background-size: cover;
    }
}

/* Mobile portrait - max width 767px */
@media (max-width: 767px) {

    /* HEADER */
    header .inner nav .tc--logo h1 {
        font-size: 22px;
    }

    .tc--hero-section {
        height: 70vh;
    }

    /* STORY */
    .tc--our-story .inner .content--right h2 {
        font-size: 22px;
    }

    .tc--our-story .inner .content--right .content--divider img {
        width: 14%;
    }

    .tc--our-story .inner .content--right p {
        font-size: 14px;
    }

    .tc--our-story .inner .img--left {
        height: 50vh;
    }

    /* COUNTDOWN */
    .tc--hero-countdown .inner .container h1 {
        font-size: 24px;
    }

    .tc--hero-countdown .inner .container #countdown ul {
        gap: 14px;
        padding-left: 0;
    }

    /* VENUE */

    .tc--venue .inner .content--divider img {
        width: 100%;
    }

    .tc--venue .inner .content--divider h2 {
        font-size: 22px;
    }

    .tc--venue .inner .content--venue .venue--content-left h3,
    .tc--venue .inner .content--venue .venue--content-right h3 {
        font-size: 18px;
    }

    .tc--venue .inner .content--venue .venue--content-left p,
    .tc--venue .inner .content--venue .venue--content-right p {
        font-size: 14px;
        margin-bottom: 8px;
    }

    .content--venue .venue--content-left .pswp-gallery a img,
    .content--venue .venue--content-right .pswp-gallery a img  {
        height: 70px;
    }

    /* PLAYLIST */
    .tc--playlist {
        background-position: center center;
    }

    .tc--playlist .inner iframe {
        width: 100%;
    }

    /* TIMELINE */
    .timeline .inner h2 {
        font-size: 22px;
    }

    .timeline .content--divider img {
        width: 12%;
    }

    /* PROGRAM */
    .time--flex-items .itenerary--items .item--ceremony img {
        width: 60px;
    }

    .time--flex-items .itenerary--items .item--ceremony {
        width: 140px;
    }

    .time--flex-items .itenerary--items .item--ceremony p {
        margin-bottom: 2px;
    }

    .timeline--text p {
        font-size: 14px;
    }

    /* ENTOURAGE */

    .entourage {
        padding: 24px 8px;
    }

    .entourage .inner .entourage--code-flex .entourage--code h3 {
        font-size: 22px;
    }

    .content--parent .flex--content .left--content .entourage--title,
    .content--parent .flex--content .right--content .entourage--title,
    .flex--content-primary content--box {
        font-size: 16px;
    }

    .content--parent .flex--content p,
    .content--parent .flex--content-primary .content--primary p,
    .flex--content-primary .flex--content-single p {
        font-size: 14px;
    }

    .flex--content-primary content--box h4 {
        font-size: 22px;
    }

    /* END OF ENTOURAGE */

    /* DRESSCODE */
    .dress--code-flex {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }

    .dress--code-flex .attire--code {
        text-align: center;
    }

    .dress--code .inner h2 {
        font-size: 22px;
    }

    .dress--code-flex h3 {
        font-size: 20px;
    }

    .dress--code-flex h4 {
        font-size: 18px;
    }

    .dress--code .inner .content--divider img {
        width: 12%;
    }

    /* PLAYLIST */
    .tc--playlist {
        background-attachment: unset;
        background-size: cover;
    }

    .tc--playlist .inner {
        padding: 200px 16px 0px 16px;
    }

    /* FAQ */
    .tc--faq:before {
        background-attachment: unset;
        background-size: cover;
    }

    .tc--faq .inner h2 {
        font-size: 22px;
    }

    .tc--faq .inner .content--divider {
        width: 12%;
    }

    /* RSVP */

    .tc--rsvp .inner h3 {
        font-size: 22px;
    }

    .tc--rsvp .inner p {
        font-size: 14px;
    }

    .tc--rsvp .inner form .input--design {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    .tc--rsvp .inner form .input--design div input {
        width: 100%;
    }

    .tc--rsvp .inner form .attending--design .attending--opt label {
        padding: 8px;
        font-size: 14px;
    }

    .tc--rsvp .inner form .ceremony--design .ceremony--opt label {
        padding: 8px;
        font-size: 14px;
    }

    footer .inner {
        padding: 24px 16px;
    }

    footer .inner h2 {
        font-size: 20px;
        margin-bottom: unset;
    }

    footer .inner p {
        font-size: 12px;
    }
}


/* Mobile small - max width 375px */
@media (max-width: 375px) {

    /* body { min-width: 375px; }*/

    header {
        width: 100%;
    }

    /* HERO */

    .tc--hero-section {
        height: 60vh;
    }

    .tc--hero-section .tc--hero-text {
        bottom: 0;
        padding: 12px 8px;
    }

    .tc--hero-section .tc--hero-text .cursive--text {
        font-size: 24px;
    }

    .tc--hero-section .tc--hero-text p {
        font-size: 14px;
    }

    /* ENTOURAGE */

    .content--parent .flex--content p, .content--parent .flex--content-primary .content--primary p, .flex--content-primary .flex--content-single p {
        font-size: 12px;
    }

    /* END OF ENTOURAGE */

    
}

@media (hover:hover) {

    /* HEADER */

    header .inner nav .tc--nav-menu .nav--lists .nav--item:hover span {
        margin-left: 1.8rem;
    }

    header .inner nav .tc--nav-menu .nav--lists .nav--item:hover i {
        opacity: 1;
        visibility: visible;
    }

    header .inner nav .tc--nav-menu .nav--lists .nav--item:hover span:after {
        width: 100%;
    }

    header .inner nav .tc--nav-menu .nav--lists:has(.nav--item:hover) .nav--item:not(:hover) {
        opacity: .4;
    }    

    /* END OF HEADER */

    .tc--rsvp .inner form .cta--design button:hover {
        background-color: rgb(42,124,111);
        color: #fff;
        border: none;
        outline: none;
    }
}