/* Base styles */
@font-face {
    font-family: 'Asthacy Reny';
    src: url('/static/fonts/Asthacy%20Reny.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Callient';
    src: url('/static/fonts/Callient.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'England Reality';
    src: url('/static/fonts/England%20Reality%20-%20OTF.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Hamilton';
    src: url('/static/fonts/Hamilton.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'HeritagesignatureRegular-DO4n9';
    src: url('/static/fonts/HeritagesignatureRegular-DO4n9.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Holistica';
    src: url('/static/fonts/Holistica.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'MspianistRegular-qZwyr';
    src: url('/static/fonts/MspianistRegular-qZwyr.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Optimistica Dreams';
    src: url('/static/fonts/Optimistica%20Dreams.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Puspita';
    src: url('/static/fonts/Puspita.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Freyatina Pelgona';
    src: url('/static/fonts/Freyatina%20Pelgona.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'LittleLove';
    src: url('/static/fonts/LittleLove%20Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}
#rowan {
    margin-left: 5px;
}
#last-qa {
    border-bottom: none;
}
body {
    font-family: "Baskerville", serif;
    font-weight: 100;
    font-style: normal;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: rgb(88, 95, 92);
    letter-spacing: 2px;
    font-size: 15.4px;
}

.login-container h3 {
    font-weight: lighter;
}

form {
    /* padding-right: 10%; */
    /* padding-bottom: 10%; */
    /* padding-left: 10%; */
    padding: 0 10% 10%;
}

.form-group {
    font-size: 25px;
    /* padding-bottom: 15%; */
    width: 100%;
}

input#password {
    width: 100%;
    height: 25px;
    margin: 50px 0px;
}

/* form .form-group {} */

main.login-container {
    text-align: center;
    padding: 4% 25%;
}

form button {
    font-family: "Baskerville Book BQ Regular";
    font-weight: 400;
    font-style: normal;
    line-height: 1.6;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 16.8px;
    display: block;
    width: 100%;
    /* vertical-align: middle; */
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    white-space: nowrap;
    padding: 12px;
    border-width: 1px;
    border-style: solid;
    -webkit-text-decoration: none;
    text-decoration: none;
    border-color: transparent;
    color: #fff;
    background-color: #8ba1c9;
    border-radius: 0;
}

.login-container h2 {
    font-weight: 100;
    text-align: center;
    border-bottom: 2px solid #87a1c7;
    margin-left: 25%;
    margin-right: 25%;
    font-style: italic;
    padding-bottom: 3%;
}

.site-header {
    text-align: center;
    /* padding: 20px 10px 5px; */
    color: rgb(139, 161, 201);
    font-family: "hamilton";
    font-weight: 100;
    
}

.site-title {
    display: flex;
    justify-content: center;
    align-items: center;
    /* margin-bottom: 20px; */
    font-weight: 100;
    font-size: 50px;
    /* margin:15px; */
    margin: 15px 0px 0px;
}


.title-flower {
    margin: 0 10px;
    max-width: 50px;
    height: auto;
}


/* .main-nav {
    position: relative;
} */
.site-title span {/* margin: -15px; */margin-bottom: 15px;margin: 10px 0px;}

.sticky-nav {
    background-color: white;
    color: rgb(88, 95, 92);
    padding: 15px 0px 20px;
    z-index: 2;
    position: relative;
}

.nav-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
/* .nav-list li {
    margin-bottom: 10px;
} */

.nav-list a {
    text-decoration: none;
    color: rgb(88, 95, 92);
    transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
    transition-duration: 400ms;
    transition-property: color;
}
.nav-list .current {
    color: rgb(139, 161, 201); 
}

.nav-list a:hover {
    color: rgb(139, 161, 201); 
}

/* Dropdown toggle button (hidden by default) */
.dropdown-toggle {
    display: none;
    /* background-color: rgb(179 179 179); */
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-family: "Baskerville", serif;
    font-size: 17px;
}

/* Main Content */
/* main {
    padding: 20px;
} */

.image-overlay {
    position: relative;
}

/* Hero Image Section */
.hero-image {
    /* width: 100vw;
    overflow: hidden;
    height: 100vw; */
    width: 120vw;
    overflow: hidden;
    height: 60vw;
    /* position: relative; */
}

.hero-image img {
    width: 100%;
    display: block;
    filter: brightness(75%);
    /* height: auto; */
    /* height: 100%; */
    object-fit: cover;
    object-position: 45% center;
}


/* .hero-image img {
    width: 100%;
    height: auto;
    display: block;
} */
/* .text-block h1, .text-block h2, .text-block h3 {
    left: 400px;
    position: absolute;
    z-index: 10;
    transform: translate(-50%, -50%);
    font-weight: 500;
    color: white;
}

.text-block h1{
    top: 420px;
    font-size: 20px;
}

.text-block h2{
    top: 475px;
    font-size: 80px;
    letter-spacing: normal;
}

.text-block h3 {
    top: 625px;
    font-size: 25px;
} */
.indiv-story h1 {
    font-weight: 100;
    font-size: 60px;
    font-family: 'hamilton';
    text-transform: capitalize;
    margin: 15px 0px -10px;
}

.indiv-story p, .indiv-story .list {
    /* width: 350px; */
    letter-spacing: normal;
    font-size: 20px;
    /* font-family: 'DM Sans'; */
    font-weight: 200;
    line-height: 1.64em;
    letter-spacing: normal;
    font-size: 20px;
    line-height: 1.75em;
    margin-bottom: 15px;
}

.indiv-story .list {
    margin-top: 5px;
}


.our-story-image {
    text-align: right;
    margin: 30px 25px;
}
.our-story-image img{
    width: 60%;
    /* max-width: 250px; */
    text-align: right;
}

.our-story p{
    text-align: center;
}

.our-story h2, .events-snapshot h2 {
    margin-bottom: -35px;
    text-transform: capitalize;
    font-family: "hamilton";
    font-weight: lighter;
    font-size: 40px;
    margin-top: 5px;
}
.our-story h3, .events-snapshot h3 {
    font-size: 50px;
    font-family: "baskerville";
    text-transform: uppercase;
    margin: 0;
    font-weight: lighter;
}

.events-snapshot h2 {
    margin-top: 1px;
    font-size: 4em;
}

.text-block {
    left: 10%;
    top: 25%;
    position: absolute;
    font-size: 7vw;
    margin-right: 10px;
    line-height: 1.6em;
    letter-spacing: .05em;
}

/* .text-block h2 {
    letter-spacing: .1em;

} */

.text-block h1, .text-block h2, .text-block h3 {
    font-weight: 500;
    color: white;
    font-family: 'hamilton';
    margin: 5px;
    /* text-transform: uppercase; */
    letter-spacing: normal;
}

.text-block h2 {
    font-size: 85px;
    line-height: 70px;
    margin-right: 1em;
}
.our-story-image {
    text-align: center;
}

.text-block h1, .text-block h3{
    /* font-size: 15px; */
    font-size: 4vw;
    margin: 20px 0px;
    font-family: 'baskerville';
    text-transform: capitalize;
    letter-spacing: 4px;
    /* font-style: italic; */
    text-align: center;
}

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

/* .text-block h2{
    letter-spacing: normal;
    font-size: 70px;
    margin: 5px;
} */

.date-location {
    display: flex;
    flex-direction: row;
    text-align: center;
    margin-top: 70px;
    margin-left: 20%;
    margin-right: 20%;
    align-items: center;
    justify-content: space-between;
    font-size: 40px;
    font-weight: 100;
}
.date-location p {
    padding: 70px;
    margin: 0px;
    padding-top: 25px;
    padding-bottom: 25px;
}
.date-location #first {
    border-right: 1px black solid;
}
.our-story-wrapper {
    padding: 10%;
    /* border-top: 1.5px grey solid; */
    color: rgb(88, 95, 92);
    /* display: flex; */
    display: grid;
    grid-template-rows: 1fr;
    align-items: center;
    /* background-color: #f2f5f8; */
}
/* .our-story-image {
    width: 50vw;
} */

#events {
    color: #ffffff;
}
#events:hover {
    color: #ffffff;
}
#events:after {
    background-color: #eaeaea;
}

.wedding-date-new {
    background-color: #a6bfcb;
    color: #ffffff;
    text-align: center;
    padding: 20%;
    /* font-size: 10%; */
}
.wedding-date-new h2 {
    margin: 0px 0px 25px;
    font-size: 10vh;
    font-family: "hamilton";
    /* margin-bottom: 0; */
    text-transform: capitalize;
    font-weight: 100;
    line-height: 1em;
    color: white;
}
.wedding-date-new #date {
    /* text-transform: uppercase; */
    font-size: 5vh;
    margin: 15px 0px 15px;
    /* font-family: "DM Sans"; */
    font-weight: 400;
}




.wedding-date-new #venue, .wedding-date-new #town {
    /* text-transform: uppercase; */
    margin: 0;
    font-family: 'DM Sans';
    font-weight: 200;
    font-size: 3vh;
}

.wedding-date,
.our-story {
    text-align: center;
    /* margin-top: 70px; */
    /* margin-left: 8%; */
    /* margin-right: 8%; */
}

.wedding-date h2 {
    font-size: 50px;
    /* margin-top: 10px; */
    font-weight: 100;
    margin: 15px;
}
.wedding-date p {
    text-transform: uppercase;
    font-size: 18px;
    font-weight: lighter;
}

.wedding-date hr {
    margin-top: 50px;
}

/* .our-story h2, .events-snapshot h2, .gallery h2 {
    font-size: 40px;
    font-family: "hamilton";
    font-weight:100;
    margin: 0px;
    margin-bottom: -35px;
} */

.events-snapshot h2, .gallery h2, .gallery h3, .events-snapshot h3 {
    text-align: center;
}

.our-story p {
    margin-bottom: 0;
    letter-spacing: normal;
    font-size: 20px;
    line-height: 1.75em;
}

.events-snapshot{
    padding: 0% 7%;
    text-align: center;
    /* background-color: #f2f5f8; */
}
.events-snapshot p {
    font-family: 'DM Sans';
    font-weight: 300;
}


/*
<section class="main-hero-banner">
<div class="main-hero-overlay"></div>
<div class=main-hero-title-outer>
    <h1 class="main-hero-title">Jayne & Rowan</h1>
</div>
</section>
*/
.main-hero-banner {
    background-image: url(/static/images/ourstoryimages/homepage-jaynero.png);
    background-position: 50% 25%;
    position: relative;
    background-size: cover;
    height: 66vh;
    display:flex;
    justify-content: center;
    align-items: center;
    justify-content: center;
    padding-left: 0;
    background-repeat: no-repeat;
}
.main-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.25);
    z-index: 0;
}
.main-hero-title-outer {
    position:relative;
    z-index: 1;
    text-align: center;

}
.main-hero-title {
    position: relative;
    z-index: 1;
    text-align: center;
    font-family: 'Hamilton';
    color: white;
    font-size: 15vh;
    font-weight: 100;
    line-height: 1em;
    margin-bottom: 50px;
}
.main-hero-h2 {
    font-weight: 100;
    text-transform: uppercase;
    color: white;
    font-size: 4vh;
    margin-top: 50px;
    text-align: center;
}

.button {
  font-size: 20px;
  color: #ffffff;
  /* font-family: 'DM Sans'; */
  /* font-weight: 800; */
  cursor: pointer;
  position: relative;
  border: none;
  background: none;
  /* text-transform: uppercase; */
  transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
  transition-duration: 400ms;
  transition-property: color;
  text-align: center;
  margin-top:70px;
  text-decoration: none;
  font-style: italic;
  /* text-underline-offset: 5px; */
  /* text-underline-position: unset; */
}

/* .button:focus,
.button:hover {
  color: #6a6a6a;
} */

.button:focus:after,
.button:hover:after {
  width: 100%;
  left: 0%;
}

.button:after {
  content: "";
  pointer-events: none;
  bottom: -5px;
  left: 50%;
  position: absolute;
  width: 0%;
  height: 1.5px;
  background-color: rgb(255 255 255);
  transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
  transition-duration: 400ms;
  transition-property: width, left;
}


.button-2 {
    border: 2px solid #87a1c7;
    padding: 10px;
    font-size: 12px;
    color: #87a1c7;
    font-family: 'DM Sans';
    font-weight: 800;
    cursor: pointer;
    position: relative;
    background: none;
    text-transform: uppercase;
    transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
    transition-duration: 400ms;
    transition-property: color;
    text-align: center;
    margin-top:70px;
    text-decoration: none;
}

.button-2:focus,
.button-2:hover {
  background-color: #87a1c7;
  border: 2px solid #87a1c7;
  color: white;
}


#full-story {
    margin: 50px 20px;
    padding-top: 100px;
}

#last {
    margin-bottom: 60px;
}

.events-snapshot h4 {
    font-size: 55px;
    font-weight: lighter;
    margin: 35px;
    /* text-transform: uppercase; */
    font-family: "Hamilton";
    line-height: 55px;
}

.events-snapshot-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin: 65px 0px 60px;
    row-gap: 35px;
    align-items: center;
}


.events-snapshot img {
    height: 100px;
    text-align: center;
}

#ceremony, #cocktail-hour, #reception {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 90%;
}



/* #ceremony >*, #cocktail-hour >*, #reception >*{
    margin:0; 
    font-family: 'DM Sans';
    font-size: 20px;
} */

h5 {
    font-family: 'DM Sans';
    font-weight: 300;
    font-size: 17.5px;
    margin-bottom: 20px;
    margin: 0;
    margin-top: 8px;
    line-height: normal;
    text-transform: uppercase;
}

h5#date {
    font-weight: 600;
}

p {
    font-size: 20px;
}

.wedding-party-content p {
    letter-spacing: 1px;
    font-family: 'DM Sans';
    font-weight: 250;
}



.events-snapshot p {
    text-align: center;
    font-size: 15px;
    margin-top: 20px;
    font-weight: 300;
    letter-spacing: .6px;
}

p#prompt {
    margin-top: 10px;
    font-size: 13px;
}

/* #prompt {
    font-weight: bold;
} */



.gallery {
    padding: 5% 12% 5%;
    justify-items: center;
}

.gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;

}

img.landscape4 {
    grid-column: 2 / 3;
    grid-row: 6 / 7;
}

img.portrait6 {
    grid-column: 3 / 4;
    grid-row: 4 / 7;
}

img.portrait5 {
    grid-column: 1 / 2;
    grid-row: 5 / 8;
}

img.landscape3 {
    grid-column: 2 / 3;
    grid-row: 4 / 6;
}

img.portrait4 {
    grid-column: 1 / 2;
    grid-row: 3 / 5;
}

img.portrait2 {
    grid-column: 2 / 3;
    grid-row: 2 / 4;
}

img.portrait3 {
    grid-column: 3/4;
    grid-row: 2 / 4;
}

img.landscape2 {
    grid-column: 3/4;
    grid-row: 1/2;
}

img.landscape1 {
    grid-column: 2/3;
    grid-row: 1/2;
}

img.portrait1 {
    grid-column: 1/2;
    grid-row: 1/3;
}
.gift-registry-content p {
    /* padding: 15%; */
}


.lightbox {
    display: none;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    cursor: default;
}

.lightbox-content {
    display: block;
    margin: auto;
    max-width: 90%;
    max-height: 80%;
    object-fit: contain !important;
    margin-top: 7%;
    cursor: default !important;
}

.lightbox-caption {
    text-align: center;
    color: white;
    padding: 10px 0;
}

.close {
    position: absolute;
    right: 35px;
    color: #f1f1f1;
    font-size: 70px;
    /* font-weight: bold; */
    cursor: pointer;
    font-family: 'DM Sans';
}

.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: white;
    font-weight: 100;
    font-size: 20px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    -webkit-user-select: none;
    background-color: #3e3e3e;
    font-family: 'hamilton';
}

.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}
/* 
.faq-title, .events-title, .our-story-page-title, .wedding-party-title, .gift-registry-title, .travel-title, .gallery-title {
    text-align: center;
    font-size: 100px;
    padding-top: 15%;
    font-family: 'hamilton';
    padding-bottom: 15%;
    margin-bottom: 70px;
    color: white;
    font-weight: 100;
    text-transform: capitalize;
    padding-left:10px;
    padding-right:10px;
    line-height: 1em;
    letter-spacing: -4px;
}
.wedding-party-title, .events-title, .gallery-title, .travel-title {
    top: 20%;
    position: absolute;
    left: 30%;
    right: 30%;
    color: white;
} */

.events-content, .our-story-content, .wedding-party-content, .gift-registry-content, .travel-content {
    text-align: center;
    /* padding-bottom: 10%; */
    font-size: 2vw;
}

.getting-there {
    padding-top: 5%;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.25); /* Adjust the darkness level using opacity */
    z-index: 0;
}

.gallery-banner .overlay {
    background-color: rgba(0, 0, 0, 0.3); /* Adjust the darkness level using opacity */
}

.events-banner, .wedparty-banner, .travel-banner, .gallery-banner, .gift-registry-banner, .faq-banner {
    position: relative;
    background-size: cover;
    height: 500px;
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center; /* Centers vertically */
}
.events-banner {
    background-image: url(/static/images/venue/grassceremony.webp);
    background-position: center 50%;
}
.wedparty-banner {
    background-image: url('/static/images/venue/beachglass.jpeg');
    background-position: center 40%;
}
.travel-banner {
    background-image: url('/static/images/venue/beach.jpg');
    background-position: center 37%;
}
.gallery-banner {
    background-image: url('/static/images/venue/beachneedcrop.jpg');
    background-position: center 55%;
}
.gift-registry-banner {
    background-image: url('/static/images/venue/venuechairs.jpg');
    background-position: center 50%;
}
.faq-banner {
    background-image: url('/static/images/venue/birdssky.jpg');
    background-position: center 100%;
}

.events-title-outer, .wedparty-title-outer, .travel-title-outer, .gallery-title-outer, .gift-registry-title-outer, .faq-title-outer {
    position: relative;
    z-index: 1; /* Makes sure the text appears above the overlay */
    text-align: center;
}
.events-title, .wedding-party-title, .gallery-title, .travel-title, .gift-registry-title, .faq-title {
    text-align: center;
    font-size: 100px;
    padding-top: 15%;
    font-family: 'hamilton';
    padding-bottom: 15%;
    margin-bottom: 70px;
    color: white;
    font-weight: 100;
    text-transform: capitalize;
    padding-left:10px;
    padding-right:10px;
    line-height: 1em;
    letter-spacing: -4px;
    color: white;
}

.gift-registry-content {
    /* font-size: 1.2em; */
    padding: 80px 20%;
    letter-spacing: normal;
    display: flex;
    flex-direction: column;
    row-gap: 25px;
}

.wedding-party-content img {
    height: 250px;
}

.wedding-party-content h1 {
    font-weight: 100;
    /* text-transform: uppercase; */
    font-family: 'hamilton';
    font-size: 50px;
    margin: 0;
    margin-bottom: -15px;
}

.wedding-party-content h2 {
    font-size: 20px;
    font-weight: 100;
    text-transform: uppercase;
}
/* 
.bride {
    row-gap: 10%;
} */

.wedding-party-content {
    padding: 5% 12% 5%;
}

.bride section, .groom section {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* row-gap: 10%; */
    margin: 0px 0px 20px;
}

.bride img, .groom img {
    width: 50%;
}

.airport {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;
    padding-left: 10%;
    padding-right: 10%;
    align-items: center;
    /* column-gap: 50px; */
    padding-bottom: 3%;
    padding: 25px 10% 3%;
    justify-items: center;
}

.travel-content {
    font-weight: lighter;
}
.travel-content h1 {
    font-size: 35px;
    font-weight: lighter;
    /* font-family: 'hamilton'; */
    /* border-right: 1.5px solid #9a9a9a; */
    margin-left: 30%;
    margin-right: 30%;
    /* padding-bottom: 20px; */
    grid-row: 1 / 2;
    line-height: normal;
    text-transform: uppercase;
    /* font-style: italic; */
    letter-spacing: 5px;
    align-items: center;
    /* align-content: center; */
    padding-top: 0;
    /* padding-bottom: 25px; */
    color: rgb(88, 95, 92);
    text-align: center;
    border-bottom: 2px solid rgb(139, 161, 201);
    padding-bottom: 50px;
    margin-left: 10%;
    margin-right: 10%;
}


.airport img {
    width: 12%;
}

.accommodations {
    padding-top: 3%;
}
.accommodations img {
    width: 12%;
}

/* .travel-title {
    background-color: #475f84; 
    color: white;
} */
.travel-content h2 {
    font-size: 17.5px;
    font-weight: 600;
    text-transform: uppercase;
    font-family: 'DM Sans';
    /* color: rgb(139, 161, 201); */
}
.travel-content h3 {
    font-size: 20px;
    font-weight: 100;
}
.travel-content p {
    font-size: 16px;
    /* font-family: 'DM Sans'; */
    font-weight: 300;
    letter-spacing: 1px;
    margin-bottom: 30px;
}

footer p {
    font-size: 15px;
}
.hotel-grid {
    display: flex;
    flex-wrap: wrap;
    padding: 0% 10% 5%;
    column-gap: 60px;
    row-gap: 50px;
    /* flex-direction: row; */
    margin-bottom: 35px;
    justify-content: center;
}


.hotel-grid section{
    /* width: 30vw; */
    /* min-width: 30%; */
    flex: 1 1 300px;
    max-width: 350px;
    
}

.faq-grid {
    display: grid;
    /* margin: 3% 15%; */
    width: fit-content;
    flex-wrap: wrap;
    /* flex-direction: row; */
    grid-template-columns: 1fr;
    /* text-align: center; */
    align-self: center;
    /* align-items: start; */
    column-gap: 5em;
    /* row-gap: 3em; */
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 50px;
    text-align: center;
    margin-top: 5%;
}

#town {
    margin-bottom: 50px !important;
}

.faq-grid .block {
    padding: 40px;
    border-bottom: 1px solid grey;
}
.question {
    font-size: 27px;
    /* margin-bottom: 25px; */
    line-height: 1em;
    font-weight: lighter;
    /* font-style: italic; */
    /* font-family: 'DM Sans'; */
    /* text-transform: uppercase; */
    /* border-bottom: 3px #87a1c7 solid; */
    padding-bottom: 25px;
    /* padding-left: 30px; */
    letter-spacing: 1px;
    }
.answer {
    font-family: "DM Sans";
    font-weight: 250;
    letter-spacing: 1px;
    font-size: 16px;
}

.indiv-story {
    display: flex;
    text-align: center;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: center;
    /* padding: 80px 20%; */
    column-gap: 150px;
    align-items: center;
    flex-direction: column;
    /* margin: 80px; */
    padding: 80px 20% 0px;
    column-width: 20px;
}

section.rowan {
    /* width: 150vw; */
}

section.jayne {
    /* width: 150vw; */
}
iframe {
    border: 0;
    max-width: 100%;
    text-align: center;
    margin-bottom: 12px;
    height: 400px
}
.airport section {
    max-width: 70vw;
}
.indiv-story img{
    text-align: center;
    width: 80vw;
    /* margin: 50px 10%; */
}

.registry-flex {
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    column-gap: 50px;
    /* padding: 50px 0px 100px; */
    flex-direction: column;
    row-gap: 40px;
}

.gift-registry-content p{
    /* font-size: .8em; */
    /* padding: 50px 15%; */
    letter-spacing: normal;
}

.block a {
    color: inherit;
}

.gift-registry-content .button-2 {
    font-size: 26px;
    font-weight: 500;
    margin: 0 12vw;
    /* font-size: 150%; */
}
/* Footer */
footer {
    text-align: center;
    padding: 20px;
    background-color: #f8f8f8;
}

.homebottom {
    display: none;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    /* margin-top: 7%; */
    /* margin-bottom: 7%; */
}
.big_only {
    display: none;
}




@media screen and (min-width: 768px) {

    .main-hero-banner {
        justify-content: left;
        padding-left: 10%;
        height: 80vh;
    }
    .main-hero-title {

    }
    .main-hero-h2 {text-align: left;margin-left: 10px;}
    /* .text-block {
        top: 40%;
        left: 10%;
    } */
     .homebottom {
        display:block;
     }

     .indiv-story {
        padding: 80px 20%
     }
     
     

    .text-block h1, .text-block h3 {
        margin: 15px;
       font-size: 3.5vw;
    }
    /* .text-block h2 {
        font-size: 45px;
    } */
    .travel-content h1 {
        margin-left: 35%;
        margin-right: 35%;
        
    }

    .indiv-story img {
        width: 40vw;
    }

    .wedding-date-new #date {
        margin: 20px;
    }
    .wedding-date-new {
        padding: 8%;
    }

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

        .main-hero-title {

    }
    .main-hero-h2 {
        
    }
    .nav-list {
        display: flex !important;
        justify-content: center;
    }

    /* .nav-list li {
        display: inline-block;
        margin: 0 10px;
    } */
    .nav-list li {
        display: inline-block;
        margin-right: 15px;
        margin-left: 15px;
    }

    .big_only {
        display: block;
    }
    .small_only {
        display: none;
    }

    /* .wedding-date h2 {
        font-size: 28px;
    }

    .our-story h2 {
        font-size: 26px;
    }

    main {
        max-width: 800px;
        margin: 0 auto;
    } */
    main { 
        max-width: none;
        padding: 0;
    }

/* main.login-container {
    text-align: center;
} */
    .sticky-nav {
        position: sticky;
        top: 0;
        z-index: 100;
        /* background-color: white;
        padding: 15px; */
    }
    .site-title span {
    }
 
    .hero-image {
        margin-left: 0;
        margin-right: 0;
        height: 50vw;
    }
 
    .wedding-date,
    .our-story {
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
        /* margin-bottom: 100px; */
        padding: 0 20px;
    }

    .our-story p{
        text-align: left;
    }

    .text-block h1, .text-block h3 {
        font-size: 2.5vw;
    }
    .text-block h2 {
        font-size: 80px;
    }

    .text-block {
        top: 38%;
    }



    .our-story-image {
        /* text-align: right;
        margin-right: 15%; */
        display: flex;
        justify-content: center;
    }
    .our-story-image img{
        width: 30vw;
        text-align: right;
        /* width: 60%; */
        max-width: 370px;
    }

    .indiv-story {
        flex-direction: row;
        align-items: stretch;
        padding: 80px 10%;
        column-gap: 50px;
    }

    .faq-title, .events-title, .our-story-page-title, .wedding-party-title, .gift-registry-title, .travel-title, .gallery-title {
        /* padding-top: 7%; */
        /* padding-bottom: 7%; */
    }


    .faq-grid {
        grid-template-columns: 1fr;
    }

    .airport {
        grid-template-columns: 1fr 1fr;
        column-gap: 50px;
        justify-items: center;
    }
    .plane-info {
        padding: 0px 50px;
        /* border-left: 2px #87a1c7 solid; */
    }
    .hotel-grid {
        border-left: 2px #87a1c7 solid;
        padding: 5%;
        padding-top: 1%;
    }

    .registry-flex {
        /* flex-direction: row; */
    }

    .indiv-story img {
        width: 20vw;
    }

    .wedding-party-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(5, 1fr);
        column-gap: 70px;
        align-items: stretch;
        row-gap: 50px;
    }
    #last-bridesmaid {
        grid-column: 1 / 3;
        padding: 0% 26%;
    }
    .gallery {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: auto 15fr 35fr auto;
        
        row-gap: 20px;
        column-gap: 20px;
    }
    
    
}

/* Mobile styles (default) */
@media screen and (max-width: 767px) {
    .dropdown-toggle {
        display: block;
        width: 33%;
        text-align: right;
        /* margin-left: 33%; */
        width: 7vw;
        margin-left: 80%;
        margin-top: -75px;
    }

    /* .nav-list {
        display: none;
        background-color: #f9f9f9;
        position: absolute;
        width: 100%;
        left: 0;
        top: 100%;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    } */
    .nav-list { 
        display: none; 
        background-color: #f9f9f9; 
        position: absolute; 
        width: 100%; 
        left: 0; 
        /* top: 100%;  */
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        z-index: 1; 
        
    }

    .nav-list.show {
        display: block;
    }

    /* .nav-list li {
        display: block;
        text-align: left;
    } */
    .nav-list li { 
        display: block; 
        text-align: left; 
        margin-bottom: 0; 
    }

    /* .nav-list a {
        display: block;
        padding: 10px 15px;
    } */
    .nav-list a { 
        display: block; 
        padding: 10px 15px; 
        border-bottom: 1px solid #ddd;
        color: #333;
      }
      
      .nav-list a:hover{
        background-color:#f0f0f0;
      }

      
}

/* Tablet and desktop styles */
/* @media screen and (min-width: 768px) {

    
    
} */

/* Large desktop styles */
@media screen and (min-width: 1200px) {
    /* .site-title {
        font-size: 36px;
    } */
    .main-hero-title {

    }
    .main-hero-h2 {
        
    }
    .title-flower {
        max-width: 60px;
    }
    .our-story-wrapper {
        grid-template-columns: 1fr 1.5fr;
        padding: 70px 100px;
    }

    /* .wedding-date h2 {
        font-size: 100px; */
        /* font-family: 'hamilton';
    } */

    /* .our-story h2 {
        font-size: 30px;
    } */

    /* main {
        max-width: 1000px;
    } */
    /* .hero-image {
        height: 50vw;
    }
     */
    .hero-image img {
        object-position: 50% center;
        width: 90%;
    }

    .text-block h2 {
        font-size: 120px;
    }

    .faq-grid {
        margin-left: 15%;
        margin-right: 15%;
    }

    .events-snapshot-wrapper {
        flex-direction: row;
        align-items: flex-start;
    }


    #ceremony, #cocktail-hour, #reception {
        width: 28%;
    }

    .indiv-story {
        column-gap: 150px;
        padding: 70px 17%;
    }

section.rowan {
    width: 150vw;
}

section.jayne {
    width: 140vw;
}

}