:root {
    --primary: #0C2C2E;
    --secondary: #A65E2B;
    --light: #E8F5E9;
    --dark: #0C2C2E;
}

h1,
.h1,
h2,
.h2,
.fw-bold {
    font-family: "Josefin Sans", "Lato";
    font-weight: 900 !important;
}

h3,
.h3,
h4,
.h4,
.fw-medium {
    font-weight: 600 !important;
}

h5,
.h5,
h6,
.h6,
.fw-semi-bold {
    font-weight: 500 !important;
}

body {
    font-family: "Josefin Sans";
    font-wieght: 200;
    font-size: 20px;
}

/*** Spinner ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}

/*** Navbar ***/
.navbar.sticky-top {
    top: -100px;
    transition: .5s;
}

.navbar .navbar-brand,
.navbar a.btn {
    height: 80px
}

.navbar .navbar-nav .nav-link {
    margin-right: 35px;
    padding: 25px 0;
    color: var(--primary);
    font-size: 18px;
    font-weight: 900;
    outline: none;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
    color: var(--secondary);
}

.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    vertical-align: middle;
    margin-left: 8px;
}

@media (max-width: 961px) {
    .navbar .navbar-nav .nav-link  {
        margin-right: 0;
        padding: 10px 0;
    }

    .navbar .navbar-nav {
        border-top: 1px solid #EEEEEE;
    }
}

@media (min-width: 961px) {
    .navbar .nav-item .dropdown-menu {
        display: block;
        border: none;
        margin-top: 0;
        top: 150%;
        opacity: 0;
        visibility: hidden;
        transition: .5s;
    }

    .navbar .nav-item:hover .dropdown-menu {
        top: 100%;
        visibility: visible;
        transition: .5s;
        opacity: 1;
    }
}

a.anchor {
    display: block;
    position: relative;
    top: -100px;
    visibility: hidden;
}


/*** Carousel ***/
.carousel-desk-img {
  display: block;
}

.carousel-mob-img {
  display: none;
}

@media (max-width: 961px) {
  .carousel-desk-img {
    display: none !important;
  }
  .carousel-mob-img {
    display: block;
  }
}

.carousel-caption {
    top: 15%;
    left: 0%;
    display: flex;
    text-align: left;
    z-index: 1;
}

@media (max-width: 961px) {
    .carousel-caption {
         display: none;
    }
}

.carousel-control-prev,
.carousel-control-next {
    width: 15%;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 5rem;
    height: 5rem;
}

@media (max-width: 961px) {
    #header-carousel .carousel-item {
        position: relative;
        min-height: 450px;
    }

    #header-carousel .carousel-item img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/*** Top Feature ***/
@media (min-width: 961px) {
    .top-feature {
        position: relative;
        margin-top: -80px;
        z-index: 1;
    }
}

.copyright {
    color: var(--light);
    background: var(--primary);
}

.copyright a {
    color: var(--light);
}

.copyright a:hover {
    color: var(--secondary);
}

/*** Date/Location (mobile only) ***/
#date-loc-mobile {
    display: none;
}
@media (max-width: 961px) {
    #date-loc-mobile {
         display: block;
    }
}

/*** RSVP Button (mobile only) ***/
#rsvp-mobile {
    display: none;
}
@media (max-width: 961px) {
    #rsvp-mobile {
         display: block;
    }
}

@media (max-width: 961px) {
    #desktop-only {
         display: none;
    }
}

#rsvp-button {
    color: white;
    font-weight: bold;
}

#rsvp_button_navbar {
    color: white;
    font-weight: bold;
}

#footer {
    font-size: 14px;
}

.google-maps {
    position: relative;
    padding-bottom: 75%; // This is the aspect ratio
    height: 0;
    overflow: hidden;
}
.google-maps iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}