.header h1, .header h2, .header h3, .header h4, .header h5, .header h6, .header p {
    margin: 0;
    font-family: "BasicSans", sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
}

h1, h2, h3, h4, h5, h6, p, .link {
    font-family: "BasicSans", sans-serif;
    line-height: 1.1;
    letter-spacing: normal;
}

.large-text h2 {
    font-size: 3rem;
}

.large-text p {
    font-size: 1.5rem;
}

.header h1 {
    font-size: 5rem;
    font-weight: 600;
}

.secondary-content {
    background-color: #000 !important;
}

.secondary-content h3 {
    color: white !important;
}

.secondary-content h1 {
    color: white !important;
    font-size: 6rem;
}

.text-align-right {
    text-align: right;
}

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

.text-align-left {
    text-align: left;
}

.text-align-close-left {
    text-align: left;
    padding-left: 3rem !important;
}

.text-align-close-right {
    text-align: right;
    padding-right: 3rem !important;
}

.content-align-center {
    align-content: center;
}

.banner.style1 .content {
    max-width: none;
}

.grow-1 {
    flex-grow: 1;
}


@media screen and (orientation: portrait) and (max-width: 768px) {
    .header.banner.style1, .spotlight.location.style1, .spotlight.dress-code.style1 {
        flex-direction: column;
    }
}

@media screen and (orientation: portrait) and (min-width: 768px) {
    .banner.style1 .content, .location.style1 .content, .dress-code.style1 .content{
        width: 50%;
        max-width: 48rem;
    }

    .header.banner.style1, .spotlight.location.style1, .spotlight.dress-code.style1 {
        flex-direction: row;
    }

    .header.banner.style1.orient-right, .spotlight.location.style1.orient-right, .spotlight.dress-code.style1.orient-right {
        flex-direction: row-reverse;
    }
}

.header .super-title, .header .navigation, .header .navigation-inner, .header .hamburger {
    height: auto !important;
    mix-blend-mode: difference;
    z-index: 100;
}

.header .super-title {
    position: fixed;
    top: 1rem;
    left: 1.5rem;
    padding: 0 !important;
    width: auto !important
}

.header .navigation {
    position: fixed;
    top: 0;
    right: 0;
    padding: 1rem 1.5rem 1rem 1.5rem;
    width: 100%;
}

.header .navigation.active {
    background-color: #FFF;
    mix-blend-mode: normal;
    z-index: 90;
    border-color: rgba(0, 0, 0, 0.2);
    border-style: solid;
    border-bottom-width: 1px;
    animation: fadeEffect 0.5s;
}

.header .navigation, .header .navigation .navigation-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;;
}

.header .navigation .navigation-inner-wrapper {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.header .navigation .navigation-inner.navigation-left {
    justify-content: flex-end;
    flex-basis: 50%;
}

.header .navigation .navigation-inner.navigation-right {
    justify-content: flex-start;
    flex-basis: 50%;
}

.header .navigation .navigation-inner {
    padding: 0.25rem 0;
}

.header .navigation .navigation-inner h3, .header .navigation .navigation-inner h4 {
    padding: 0 1.5rem;
}

.header .navigation.active .navigation-inner, .header .navigation .navigation-inner h3, .header .navigation .navigation-inner h4 {
    border-color: rgba(255, 255, 255, 0.2);
    border-style: solid;
    border-right-width: 1px;
}

.header .navigation .navigation-inner h3:last-child, .header .navigation .navigation-inner h4:last-child {
    border-right-width: 0;
}

.header .super-title h3, .header .navigation-inner h3, .header .navigation-inner h4, .header .hamburger h3 {
    color: #fff;
}

.header .navigation h3, .header .navigation h4 {
    padding: 0 0 0 1.5rem;
    font-weight: 200;
}

.header .hamburger, .header .navigation-inner {
    animation: fadeEffect 0.5s;
    animation-direction: alternate;
}

.header .hamburger {
    flex-grow: 0;
}

@media screen and (max-width: 999px) {
    .header .navigation {
        padding-left: 4.5rem;
        text-align: center;
    }

    .header .navigation-inner {
        width: 100%;
        flex-direction: column;
    }

    .header .navigation .navigation-inner-wrapper {
        flex-grow: 1;
        flex-direction: column;
    }

    .header .navigation .navigation-inner h3, .header .navigation .navigation-inner h4 {
        padding: 1.5rem 0;
        border-right-width: 0;
        border-bottom-width: 1px;
        width: 60%;
    }

    .header .navigation #navigation-inner-left h4:first-child {
        padding-top: 0.5rem;
    }

    .header .navigation #navigation-inner-right h4:last-child {
        border-bottom-width: 0;
        padding-bottom: 0.5rem;
    }
}

.header .content {
    height: 100vh;
    align-content: right;
}

.zahrah {
    font-family: "Zahrah", serif !important;
    line-height: 0.8;
}

.basic-sans {
    font-family: "BasicSans", sans-serif !important;
}

body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #074367;
    mix-blend-mode: screen;
    z-index: 100;
    pointer-events: none;
}

.spotlight.location .image.secondary-content img, .spotlight.dress-code .image.secondary-content img, .spotlight.gifts .image.secondary-content img, .spotlight.gallery-upload .image.secondary-content img{
    position: static;
    padding: 6rem;
    object-fit: contain;
}

.spotlight.schedule .image.secondary-content img {
    position: static
}

.inverted-img img {
    filter: invert(100%);
    --webkit-filter: invert(100%);
}

#rsvp_form_fields section {
    width: 100%;
}

#rsvp_form_fields section .content {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 0.5rem;
}


#rsvp_form_fields header {
    padding: 1.5rem 0 0 1.5rem;
}

#rsvp_form_fields_guests {
    display: flex;
    flex-wrap: wrap;
}

.full-header>header, .full-width {
    width: 100%;
    display: block;
}

#rsvp_form .fields {
    display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: calc(100% + 3rem);
}

#rsvp_form .fields .field {
    -moz-flex-grow: 0;
    -webkit-flex-grow: 0;
    -ms-flex-grow: 0;
    flex-grow: 0;
    -moz-flex-shrink: 0;
    -webkit-flex-shrink: 0;
    -ms-flex-shrink: 0;
    flex-shrink: 0;
    padding: 1.5rem 0 0 1.5rem;
    width: calc(100% - 1.5rem);
}

#rsvp_form .fields .field.half {
    width: calc(50% - 0.75rem)
}

#rsvp_form .fields .field.third {
    width: calc(100%/3 - 0.5rem)
}

#rsvp_form .fields .field.quarter {
    width: calc(25% - 0.375rem)
}

@media screen and (max-width: 480px) {
    form>.fields {
        width:calc(100% + 3rem);
        margin: -1.5rem 0 2rem -1.5rem
    }

    form>.fields>.field {
        padding: 1.5rem 0 0 1.5rem;
        width: calc(100% - 1.5rem)
    }

    form>.fields>.field.half {
        width: calc(100% - 1.5rem)
    }

    form>.fields>.field.third {
        width: calc(100% - 1.5rem)
    }

    form>.fields>.field.quarter {
        width: calc(100% - 1.5rem)
    }
}
#saturday_evening {
    border-top: 0;
}

#weekend-accomodation .spotlight {
    display: flex;
    flex-direction: row-reverse;
    padding: 3rem 0 0 1.5rem;
}

#weekend-accomodation .spotlight.orient-left {
    flex-direction: row;
}

#weekend-accomodation .spotlight .image img {
    -moz-object-fit: cover;
    -webkit-object-fit: cover;
    -ms-object-fit: cover;
    object-fit: cover;
    -moz-object-position: center;
    -webkit-object-position: center;
    -ms-object-position: center;
    object-position: center;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    z-index: 200;
}

#weekend-accomodation .spotlight .content {
    width: 65%;
    min-height: 15rem;
}

#weekend-accomodation .spotlight .image {
    width: 35%;
    background: none;
}

@media screen and (max-width: 768px) {
    #weekend-accomodation .spotlight .content  {
        width: 100%;
    }

    #weekend-accomodation .spotlight .image {
        width: 100%;
        padding: 0 1.5rem;
    }

    #weekend-accomodation .spotlight, #weekend-accomodation .spotlight.orient-left {
        flex-direction: column-reverse;
    }

    #weekend-accomodation .spotlight .image img {
        position: relative;
    }
}

.tab-links {
    margin: 1.5rem;
}

.tab-links>.inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding-bottom: 1.5rem;
}

.tab-links>.inner>button {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
    border-color: rgba(0, 0, 0, 0.2);
    border-style: solid;
    border-left-width: 1px;
    border-bottom-width: 1px;
    padding: 1.5rem 1.5rem 0.5rem 1.5rem;
    border-radius: 0;
    box-shadow: none;
    height: auto;
    color: #83718F !important;
    font-weight: 200;
}

.tab-links>.inner>button:first-child {
    border-left-width: 0;
}

.tab-links>.inner>button:hover, .tab-links>.inner>button:active, .tab-links>.inner>button.active  {
    border-bottom-width: 2px;
    color: #000 !important;
    font-weight: 400;
}

.tab-links>.inner>button h4 {
    color: inherit;
    font-weight: inherit;
}

.tab-content {
    animation: fadeEffect 2s;
}

@media screen and (max-width: 768px) {
    .tab-links>.inner {
        flex-direction: column;
    }

    .tab-links>.inner>button {
        border-left-width: 0;
        width: 100%;
    }

    .tab-links>.inner>button:last-child {
        border-bottom-width: 0;
    }
}

/* Go from zero to full opacity */
@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
  }