/* ----------------------------------------------------------------

01. Default style
02. Preloader style
03. Scrollbar style
04. Owl-Theme custom style
05. Navbar style
06. Page Header style
07. Slider style
08. Section & Title style
09. Welcome style
10. Bride & Groom style
11. Story style
12. Countdown style
13. Friends style
14. Story video style
15. Event style
16. When & Where style
17. Gallery style
18. Blog & Post style
19. Progress-wrap style
20. Gift Registry style
21. Insta style
22. Footer style
23. Media Query style
24. Overlay Effect Bg image

------------------------------------------------------------------- */


/* =======  Default style  ======= */
html,
body {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    font-smoothing: antialiased;
    overflow-x: hidden;
    color: #faf8f7;
}

body {
    font-family: 'Didact Gothic', sans-serif;
    font-size: 16px;
    line-height: 1.75em;
    font-weight: 400;
    color: #faf8f7;
}

/* typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Alex Brush', cursive;
    font-weight: 400;
    line-height: 1em;
    margin: 0 0 20px 0;
    color: #1b1b1b;
}

h1 {
    font-size: 40px;
}

h2 {
    font-size: 35px;
}

h3 {
    font-size: 30px;
}

h4 {
    font-size: 25px;
}

h5 {
    font-size: 20px;
}

h6 {
    font-size: 16px;
}

p {
    font-family: 'Didact Gothic', sans-serif;
    font-size: 16px;
    line-height: 1.75em;
    margin: 0 0 20px;
    color: #666;
    font-weight: 400;
}

/* lists */
ul {
    list-style-type: none;
}

/* links */
a {
    color: #fff;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}

a:hover,
a:active,
a:focus {
    color: #fff;
    outline: none;
    text-decoration: none !important;
}

a:link {
    text-decoration: none;
}

a:focus {
    outline: none;
}

img {
    width: 100%;
    height: auto;
}

img {
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    color: #fff;
}

.bg-cream {
    background: #faf8f7;
}

.o-hidden {
    overflow: hidden;
}

.position-re {
    position: relative;
}

.full-width {
    width: 100%;
}

.bg-img {
    background-size: cover;
    background-repeat: no-repeat;
}

.pattern {
    background-repeat: repeat;
    background-size: auto;
}

.bold {
    font-weight: 600;
}

.count {
    font-family: 'Oswald', sans-serif;
}

.valign {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.v-middle {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0;
    -webkit-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
}

.v-bottom {
    position: absolute;
    width: 100%;
    bottom: 5%;
    left: 0;
    -webkit-transform: translate(0%, -5%);
    transform: translate(0%, -5%);
}

.js .animate-box {
    opacity: 0;
}

a[href^="tel"] {
    color: inherit;
    text-decoration: none;
}

.bg-fixed {
    background-attachment: fixed;
}

@media (max-width: 992px) {
    .bg-fixed {
        background-attachment: initial;
    }
}

.p-40 {
    padding: 40px;
}

.p-60 {
    padding: 60px;
}

.mt-60 {
    margin-top: 60px;
}

.mt-10 {
    margin-top: 10px;
}

.mt-20 {
    margin-top: 20px;
}

.mb-30 {
    margin-bottom: 30px;
}

.mb-60 {
    margin-bottom: 60px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-15 {
    margin-bottom: 15px;
}

.small,
small {
    font-size: 80%;
}

b,
strong {
    color: #1b1b1b;
}

/*** form element ***/
/* text field */
button,
input,
optgroup,
select,
textarea {
    font-family: 'Didact Gothic', sans-serif;
}

input[type="password"]:focus,
input[type="email"]:focus,
input[type="text"]:focus,
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus,
textarea:focus {
    outline: none;
    border: 1px solid #ececec;
}

input[type="password"],
input[type="email"],
input[type="text"],
input[type="file"],
textarea,
#message,
#search {
    max-width: 100%;
    margin-bottom: 15px;
    border: none;
    padding: 7px 15px;
    height: auto;
    background-color: #fff;
    -webkit-box-shadow: none;
    box-shadow: none;
    display: block;
    width: 100%;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.75em;
    color: #1b1b1b;
    background-image: none;
    border: 1px solid #ececec;
}

input:focus,
textarea:focus {
    border-bottom-width: 1px;
}

input[type="submit"],
input[type="reset"],
input[type="button"],
button {
    font-family: 'Didact Gothic', sans-serif;
    background: #055651;
    border: 1px solid #055651;
    color: #fff;
    padding: 12px 30px;
    margin: 0;
    font-weight: 400;
    position: relative;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-radius: 0px;
}

input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
button:hover {
    background-color: transparent;
    color: #1b1b1b;
}

select {
    padding: 10px;
    border-radius: 5px;
}

input[type="radio"],
input[type="checkbox"] {
    display: inline;
}

label {
    color: #777;
    transition: all .3s cubic-bezier(.64, .09, .08, 1);
    display: inline-block;
    -moz-appearance: none;
    display: inline-block;
    vertical-align: middle;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.75em;
    margin-bottom: 0;
}

input[type=radio]:after,
input[type=radio]:before {
    content: '';
    position: absolute;
    transition: all .3s cubic-bezier(.64, .09, .08, 1)
}

input[type=checkbox] {
    position: relative;
    cursor: pointer;
    margin: 5px 23px 15px 0px;
    ;
    -moz-appearance: none;
    -webkit-appearance: none;
    width: 12px;
}

input[type=checkbox]:before {
    content: '';
    width: 18px;
    height: 18px;
    border: 1px solid #ececec;
    background: #fff;
    position: absolute;
    top: 0px;
    margin-left: -1px;
}

input[type=checkbox]:after {
    font-family: 'themify';
    content: '\e64c';
    color: #055651;
    background: transparent;
    position: absolute;
    top: 1px;
    margin-left: -1px;
    left: 0;
    width: 18px;
    height: 18px;
    border: none;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .3s cubic-bezier(.64, .09, .08, 1);
    will-change: opacity;
    font-size: 12px;
}

input[type=checkbox]:checked:after {
    opacity: 1
}

input[type=radio] {
    position: relative;
    cursor: pointer;
    margin: 5px 20px 15px 0px;
    -moz-appearance: none;
    -webkit-appearance: none;
    width: 10px;
}

input[type=radio]:before {
    background-color: #fff;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid #ccc;
    display: inline-block;
    top: 0px;
    left: -4px;
    background-image: radial-gradient(circle, #055651 50%, #fff 70%);
    background-size: 0;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    will-change: background-size;
    z-index: 2;
}

input[type=radio]:after {
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%
}

input[type=radio]:checked:before {
    background-size: 14px 14px
}

.mb-15 {
    margin-bottom: 15px;
}

.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    background: transparent;
    border: none;
    border-bottom: 0px solid #e5e5e5;
    height: 54px;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    border-radius: 0;
    padding: 0;
    font-family: 'Didact Gothic', sans-serif;
    font-size: 18px;
    line-height: 1.75em;
    font-weight: 400;
}

.form-control:active,
.form-control:focus {
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: #fff;
    border: 1px solid #ececec;
}

#message {
    font-family: 'Didact Gothic', sans-serif;
    height: 130px;
    padding: 12px;
    border: 1px solid #ececec;
}


/* =======  Preloader Style  ======= */
.preloader {
    width: 100%;
    height: 100%;
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Heart */
.lds-heart {
    display: inline-block;
    position: relative;
    width: 64px;
    height: 64px;
    transform: rotate(45deg);
    transform-origin: 32px 32px;
}

.lds-heart div {
    top: 23px;
    left: 19px;
    position: absolute;
    width: 26px;
    height: 26px;
    background: #055651;
    animation: lds-heart 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}

.lds-heart div:after,
.lds-heart div:before {
    content: " ";
    position: absolute;
    display: block;
    width: 26px;
    height: 26px;
    background: #055651;
}

.lds-heart div:before {
    left: -17px;
    border-radius: 50% 0 0 50%;
}

.lds-heart div:after {
    top: -17px;
    border-radius: 50% 50% 0 0;
}

@keyframes lds-heart {
    0% {
        transform: scale(0.95);
    }

    5% {
        transform: scale(1.1);
    }

    39% {
        transform: scale(0.85);
    }

    45% {
        transform: scale(1);
    }

    60% {
        transform: scale(0.95);
    }

    100% {
        transform: scale(0.9);
    }
}


/* =======  Scrollbar style  ======= */
::-webkit-scrollbar {
    width: 0px;
}

::-webkit-scrollbar-track {
    background: #fff;
}

::-webkit-scrollbar-thumb {
    background: #1b1b1b;
}

::-webkit-scrollbar-thumb:hover {
    background: #1b1b1b;
}


/* =======  Owl-Theme custom style  ======= */
.owl-theme .owl-nav.disabled+.owl-dots {
    margin-top: 0px;
    line-height: .7;
    display: block;
}

.owl-theme .owl-dots .owl-dot span {
    width: 12px;
    height: 12px;
    margin: 0 3px;
    border-radius: 50%;
    background: #ececec;
    border: 1px solid #ececec;
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
    background: #055651;
    border: 1px solid #055651;
}


/* =======  Navbar style  ======= */
.navbar {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    background: transparent;
    z-index: 99;
    padding-right: 0;
    padding-left: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.navbar-toggler {
    outline: none;
}

.navbar .navbar-toggler-icon {
    color: #055651;

}

.navbar .navbar-nav .nav-link {
    font-family: 'Didact Gothic', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    margin: 3px;
    -webkit-transition: all .4s;
    transition: all .4s;
}

.navbar .navbar-nav .nav-link.black-color {
    color: #fff;
}

.navbar .navbar-nav .nav-link:hover {
    color: #055651;
}

.navbar .navbar-nav .active {
    color: #055651 !important;
}

/* Navbar cuando ya es sticky (al scrollear) */
.nav-scroll {
    background: #fff;
    position: fixed;
    top: 0;
    /* <-- importante: ya no -100px */
    left: 0;
    width: 100%;
    z-index: 9999;
    box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.03);
    transition: transform .35s ease, opacity .35s ease;
    transform: translateY(0);
    opacity: 1;
}

/* Estado oculto (cuando estás arriba del todo) */
.nav-scroll.nav-hidden {
    transform: translateY(-120%);
    /* <-- se esconde COMPLETO */
    opacity: 0;
    pointer-events: none;
}

.nav-scroll .navbar-toggler-icon {
    color: #055651;
}

.nav-scroll .navbar-nav .nav-link {
    color: #1b1b1b;
}

.nav-scroll .navbar-nav .active {
    color: #055651 !important;
}

.nav-scroll .navbar-nav .logo {
    padding: 15px 0;
    color: #666;
}

.nav-scroll .logo {
    width: 240px;
}

.nav-scroll .logo-img {
    margin-bottom: 0px;
}

.nav-scroll .logo-wrapper .logo h2 {
    font-family: 'Alex Brush', cursive;
    font-size: 36px;
    font-weight: 400;
    margin-bottom: 0px;
    display: block;
    width: 100%;
    position: relative;
    color: #1b1b1b;
    line-height: 1.25em;
    /*    display: none;*/
}

.nav-scroll .logo-wrapper .logo span {
    display: block;
    font-family: 'Alex Brush', cursive;
    font-size: 9px;
    color: #666;
    font-weight: 400;
    display: block;
    margin-top: 3px;
    line-height: 1.2em;
    margin-left: 5px;
    /*    display: none !important;*/
}

.nav-scroll .logo-wrapper {
    padding: 20px 0px;
}

.logo-wrapper {
    float: left;
    padding: 30px 0px;
}

.logo-wrapper .logo h2 {
    font-family: 'Alex Brush', cursive;
    font-size: 36px;
    font-weight: 400;
    display: block;
    width: 100%;
    position: relative;
    color: #fff;
    margin-bottom: 0;
}

.logo-wrapper .logo h2 a i {
    color: #fff;
    font-size: 20px;
    vertical-align: super;
}

.logo-wrapper .logo span {
    display: block;
    font-family: 'Didact Gothic', sans-serif;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #fff;
    font-weight: 400;
    display: block;
    margin-top: 5px;
    line-height: 1.5em;
}

.logo {
    padding: 0;
    text-align: center;
}

.logo-img {
    width: 270px;
}

.dropdown:hover .dropdown-menu,
.dropdown:hover .mega-menu {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.dropdown .nav-link {
    cursor: pointer;
}

.dropdown .nav-link i {
    padding-left: 1px;
    font-size: 9px;
}

.dropdown-item {
    position: relative;
}

.dropdown-item:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.dropdown-item span {
    display: block;
    cursor: pointer;
}

.dropdown-menu,
.sub-menu {
    display: block;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
    width: 200px;
    padding: 15px 10px;
    border-radius: 0;
    border: 0;
    background-color: #fff;
    -webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.05);
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.05);
    -webkit-transition: all .3s;
    transition: all .3s;
}

.dropdown-menu .dropdown-item,
.sub-menu .dropdown-item {
    padding: 5px 15px;
    font-family: 'Didact Gothic', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #1b1b1b;
    position: relative;
    -webkit-transition: all .4s;
    transition: all .4s;
    border-bottom: 1px solid rgba(0, 0, 0, 0.025);
    background-color: transparent;
}

.dropdown-menu .dropdown-item:last-child,
.sub-menu .dropdown-item:last-child {
    border-bottom: none;
}

.dropdown-menu .dropdown-item:hover,
.sub-menu .dropdown-item:hover {
    background: transparent;
    padding-left: 20px;
    color: #055651;
}

.dropdown-menu .dropdown-item a,
.sub-menu .dropdown-item a {
    display: block;
    color: #1b1b1b;
}

.dropdown-menu .dropdown-item a:hover,
.sub-menu .dropdown-item a:hover {
    color: #055651;
}

.dropdown-menu .dropdown-item a .badge,
.sub-menu .dropdown-item a .badge {
    margin-left: 10px;
    padding: 3px 5px 3px 5px;
    font-size: 8px;
    background: #055651;
    border: 1px solid #055651;
    top: 12px;
    border-radius: 0px;
    color: #1b1b1b;
    position: absolute;
    display: inline;
}

.dropdown-menu .dropdown-item i,
.sub-menu .dropdown-item i {
    padding: 13px 0 0 5px;
    font-size: 8px;
    float: right;
}

.dropdown-menu .dropdown-item em,
.sub-menu .dropdown-item em {
    font-size: 8px;
    background-color: #fff;
    padding: 2px 4px;
    color: #1b1b1b;
    border-radius: 2px;
    position: absolute;
    right: 10px;
    top: 5px;
}

.dropdown-menu.last {
    left: -30%;
}

.sub-menu {
    position: absolute;
    left: 100%;
    top: -5px;
}

.sub-menu.left {
    left: -100%;
    margin-left: -20px;
}

@media screen and (max-width: 767px) {
    .navbar {
        padding-right: 0px;
        padding-right: 0px;
        background: transparent;
    }

    .nav-scroll {
        background: #fff;
    }

    .logo-wrapper {
        float: left;
        padding: 15px;
    }

    .nav-scroll .logo-wrapper {
        padding: 15px;
        background-color: #fff;
    }
}

/* ======= Page Header style ======= */
.banner-header {
    padding: 200px 0;
    clear: both;
    width: 100%;
    display: block;
    background-position: center;
}

.banner-header h5 {
    color: #fff;
    font-size: 14px;
    font-family: 'Didact Gothic', sans-serif;
    font-weight: 400;
    margin-bottom: 15px;
    margin-top: 15px;
    letter-spacing: 5px;
    text-transform: uppercase;
}

.banner-header h5 a {
    color: #FFF;
}

.banner-header h1 {
    font-size: 60px;
    font-family: 'Alex Brush', cursive;
    font-weight: 400;
    color: #fff;
    position: relative;
    margin-bottom: 0px;
}


/* =======  Slider style  ======= */
.mary-hero .flexslider {
    border: none;
    z-index: 1;
    margin-bottom: 0;
    background: #fff;
}

.mary-hero .flexslider .slides {
    position: relative;
    overflow: hidden;
}

.mary-hero .flexslider .slides li {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom center;
    position: relative;
    min-height: 100vh;


}

.mary-hero .flexslider .flex-control-nav {
    bottom: 20px;
    z-index: 1000;
    right: 20px;
    float: right;
    width: auto;
}

.mary-hero .flexslider .flex-control-nav li {
    display: none;
    margin-bottom: 6px;
}

.mary-hero .flexslider .flex-control-nav li a {
    background: #fff;
    -webkit-box-shadow: none;
    box-shadow: none;
    width: 8px;
    height: 8px;
    cursor: pointer;
}

.mary-hero .flexslider .flex-control-nav li a.flex-active {
    cursor: pointer;
    background: #1b1b1b;
}

.mary-hero .flexslider .flex-direction-nav {
    display: none;
}

.mary-hero .flexslider .slider-text {
    display: table;
    opacity: 0;
    min-height: 100vh;
    padding: 0;
    z-index: 9;
}

.mary-hero .flexslider .slider-text>.slider-text-inner {
    display: table-cell;
    vertical-align: middle;
    min-height: 100vh;
    padding: 20px;
    position: relative;
}

.mary-hero .flexslider .slider-text>.slider-text-inner .desc {
    position: absolute;
    bottom: 0px;
    left: 0;
    padding: 20px;
    background: transparent;
}

@media screen and (max-width: 768px) {
    .mary-hero .flexslider .slider-text>.slider-text-inner {
        text-align: center;
    }
}

.mary-hero .flexslider .slider-text>.slider-text-inner h2,
.mary-hero .flexslider .slider-text>.slider-text-inner h2 {
    font-size: 120px;
    color: #fff;
    font-family: 'Alex Brush', cursive;
    font-weight: 400;
    margin: 0;
    line-height: 1.25em;
    text-align: center;
    margin-bottom: 0px;
}

.mary-hero .flexslider .slider-text>.slider-text-inner h6,
.mary-hero .flexslider .slider-text>.slider-text-inner h6 {
    font-size: 16px;
    color: #fff;
    font-family: 'Didact Gothic', sans-serif;
    text-transform: uppercase;
    font-weight: 400;
    margin: 0;
    letter-spacing: 5px;
}

@media screen and (max-width: 768px) {
    .mary-hero .flexslider .slider-text>.slider-text-inner h2 {
        font-size: 60px;
        line-height: 1em;
        margin-bottom: 15px;
    }

    .mary-hero .flexslider .slider-text>.slider-text-inner h6 {
        font-size: 12px;
    }
}

.mary-hero .flexslider .slider-text>.slider-text-inner .heading-section {
    font-size: 50px;
}

@media screen and (max-width: 768px) {
    .mary-hero .flexslider .slider-text>.slider-text-inner .heading-section {
        font-size: 30px;
    }
}

.mary-hero .flexslider .slider-text>.slider-text-inner p {
    color: #fff;
    font-size: 30px;
    font-weight: 400;
    font-family: 'Alex Brush', cursive;
    line-height: 1.5em;
    margin-bottom: 0px;
}

@media screen and (max-width: 768px) {
    .mary-hero .flexslider .slider-text>.slider-text-inner .btn {
        width: 100%;
    }
}


/* =======  Section & Title style  ======= */
.section-padding {
    padding: 100px 0;
    clear: both;
    width: 100%;
    display: block;
}

.section-paddinggg {
    padding: 34px 0;
    clear: both;
    width: 100%;
    display: block;
}

.section-banner {
    padding: 200px 0 100px 0;
    clear: both;
    width: 100%;
    display: block;
}

.section-title {
    color: #1b1b1b;
    font-family: 'Alex Brush', cursive;
    font-weight: 400;
    font-size: 60px;
    margin-bottom: 20px;
}

.section-title span {
    display: block;
}

.section-subtitle {
    display: block;
    color: #055651;
    font-size: 14px;
    font-weight: 400;
    font-family: 'Didact Gothic', sans-serif;
    margin-bottom: 10px;
    letter-spacing: 5px;
    text-transform: uppercase;
}

.rsvp h2 {
    color: #1b1b1b;
    font-family: 'Didact Gothic', sans-serif;
    font-weight: 400;
    font-size: 36px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.rsvp h6 {
    display: block;
    color: #055651;
    font-size: 15px;
    font-weight: 400;
    font-family: 'Didact Gothic', sans-serif;
    margin-bottom: 30px;
}

/* =======  Welcome style  ======= */
.welcome {
    position: relative;
    z-index: 20;
    text-align: center;
}

.welcome-mt {
    margin-top: -18% !important;
}

.welcome-image-wrapper {
    display: inline-block;
    vertical-align: top;
    max-width: 100%;
}

.welcome-image-wrapper .img:hover img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.welcome-image-wrapper .img {
    width: 250px;
    border: 12px solid rgba(255, 255, 255, 0.2);
    border-radius: 100%;
    margin-bottom: 30px;
    overflow: hidden;
}


/* =======  Bride & Groom style  ======= */
.bride-groom .item {
    padding: 0px;
    border-radius: 0px;
    position: relative;
    overflow: hidden;
}

.bride-groom .img {
    width: 190px;
    height: 190px;
    overflow: hidden;
    margin: 0 auto 20px;
}

.bride-groom .info h1 {
    text-align: center;
}

.bride-groom .info h6 {
    font-size: 16px;
    margin-bottom: 10px;
    font-family: 'Didact Gothic', sans-serif;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.bride-groom .info h6 i {
    color: #055651;
    font-size: 16px;
}

.bride-groom .info span {
    color: #055651;
    font-size: 24px;
    font-weight: 400;
    font-family: 'Alex Brush', cursive;
}

.bride-groom .info p {
    margin-top: 10px;
}

.bride-groom .info .social {
    margin-top: 10px;
}

.bride-groom .info .social a {
    text-align: center;
    width: 36px;
    height: 36px;
    line-height: 36px;
    border-radius: 50%;
    color: #666;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.06);
    margin-right: 5px;
    font-size: 12px;
    position: relative;
    display: inline-block;
}

.bride-groom .info .social a:hover {
    color: #fff;
    background: #b08c3f;
}

.bride-groom .toright .img {
    float: right;
}

.bride-groom .toright .info {
    margin-left: 0;
    margin-right: 160px;
    text-align: right;
}

.bride-groom .toright .info .social a {
    margin-right: 0;
    margin-left: 10px;
}

@media screen and (max-width: 991px) {
    .bride-groom .img {
        margin: auto;
        float: none !important;
    }

    .bride-groom .info {
        margin: 30px 0 0 0 !important;
    }

    .bride-groom .item,
    .bride-groom .toright .info {
        text-align: center;
    }
}


/* =======  Story style  ======= */
.story {
    position: relative;
}

.story:last-child {
    margin-bottom: 30px;
}

.story figure {
    margin: 0;
    position: relative;
    width: 66.666667%;
    margin-left: auto;
}

.story.left figure {
    margin-left: 0;
    margin-right: auto;
}

.story .caption {
    background: #faf8f7;
    position: absolute;
    left: 0;
    top: 50%;
    width: 50%;
    padding: 5% 5% 5% 5%;
    -ms-transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

.story.left .caption {
    left: auto;
    right: 0;
    background: #faf8f7;
    padding: 5% 5% 5% 5%;
}

.story .caption h4 {
    font-size: 40px;
    color: #1b1b1b;
    margin-bottom: 10px;
    font-family: 'Alex Brush', cursive;
}

.story .caption h6 {
    color: #055651;
    font-family: 'Didact Gothic', sans-serif;
    font-size: 12px;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 5px;
}

.story .caption p {
    margin-bottom: 0px;
}

@media (max-width: 991.98px) {
    .story figure {
        width: auto;
        margin: 0;
    }

    .story .caption {
        position: relative;
        left: 0;
        top: 0;
        width: auto;
        padding: 30px;
        -ms-transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    .story .caption h4 {
        font-size: 36px;
    }
}


/* =======  Countdown style  ======= */
#countdown {
    text-align: center;
}

#countdown .section-head {
    margin-bottom: 15px;
    z-index: 1;
}

#countdown .section-head span {
    display: block;
    position: relative;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 18px;
    color: #fff;
    margin-bottom: 5px;
}

#countdown .section-head h2 {
    color: #fff;
    font-weight: 400;
    font-size: 60px;
    margin-bottom: 0px;
}

#countdown .section-head h6 {
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 5px;
    text-transform: uppercase;
    font-family: 'Didact Gothic', sans-serif;
    margin-bottom: 10px;
}

#countdown .section-head p {
    color: #FFF;
    font-size: 24px;
    margin-bottom: 0;
}

#countdown ul {
    margin-bottom: 0;
    padding: 0;
}

#countdown li {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    display: inline-block;
    font-size: 12px;
    list-style-type: none;
    padding: 15px;
    color: #fff;
    line-height: 4em;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 5px;
}

#countdown li span {
    display: block;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 70px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -1px;
}

@media all and (max-width: 768px) {
    #countdown li {
        font-size: 12px;
        padding: 15px;
    }

    #countdown li span {
        font-size: 60px;
    }

    .bg-img {
        background-position: 60%;
    }
}


/* =======  Banner style  ======= */
#banner {
    text-align: center;
}

#banner .section-head {
    margin-bottom: 15px;
    z-index: 1;
}

#banner .section-head span {
    display: block;
    position: relative;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 18px;
    color: #fff;
    margin-bottom: 5px;
}

#banner .section-head h2 {
    color: #fff;
    font-weight: 400;
    font-size: 60px;
    margin-bottom: 0px;
    line-height: 1em;
}

#banner .section-head h6 {
    margin-bottom: 5px;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 5px;
    text-transform: uppercase;
    font-family: 'Didact Gothic', sans-serif;
    margin-bottom: 10px;
}

#banner .section-head h1 {
    margin-bottom: 5px;
    color: #fff;
    font-size: 40px;
    font-weight: 400;
    text-transform: uppercase;
    font-family: 'Didact Gothic', sans-serif;
    margin-bottom: 20px;
}

#banner .section-head p {
    color: #FFF;
    font-size: 24px;
    margin-bottom: 0;
}


/* =======  Friends style  ======= */
.friends .item {
    position: relative;
    overflow: hidden;
    text-align: center;
    margin-bottom: 30px;
}

.friends .img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 15px;
    -webkit-transition: all .5s;
    transition: all .5s;

}

.friends .info {}

.friends .info h6 {
    font-size: 16px;
    margin-bottom: 0px;
    font-family: 'Didact Gothic', sans-serif;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.friends .info span {
    color: #055651;
    font-size: 22px;
    font-weight: 400;
    margin-bottom: 5px;
    font-family: 'Alex Brush', cursive;
}

.friends .info p {
    margin-bottom: 0;
}

.friends .toright .img {
    float: right;
}

.friends .toright .info {
    margin-left: 0;
    margin-right: 160px;
    text-align: right;
}

@media screen and (max-width: 991px) {

    .friends .item,
    .friends .toright .info {
        text-align: center;
    }

    .friends .img {
        margin: auto;
        float: none !important;
    }

    .friends .info {
        margin: 30px 0 0 0 !important;
    }
}


/* =======  Story video style  ======= */
.story-video .video-wrapper {
    overflow: hidden !important;
}

.story-video .video-wrapper .caption {
    margin-bottom: 30px;
}

.story-video .video-wrapper .caption .title {
    color: #fff;
    font-family: 'Alex Brush', cursive;
    font-weight: 400;
    font-size: 60px;
}

.story-video .video-wrapper .caption .subtitle {
    color: #fff;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 5px;
    font-weight: 400;
    font-family: 'Didact Gothic', sans-serif;
    margin-bottom: 10px;
}

.story-video .video-wrapper .vid {
    position: relative;
    z-index: 8;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
}

.story-video .video-wrapper .vid .vid-butn:hover .icon {
    color: #fff;
}

.story-video .video-wrapper .vid .vid-butn:hover .icon:before {
    -webkit-transform: scale(0);
    transform: scale(0);
}

.story-video .video-wrapper .vid .vid-butn .icon {
    color: #055651;
    width: 100px;
    height: 100px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    line-height: 100px;
    text-align: center;
    font-size: 30px;
    position: absolute;
    -webkit-transition: all .5s;
    transition: all .5s;
}

.story-video .video-wrapper .vid .vid-butn .icon:after {
    content: '';
    position: absolute;
    top: 5px;
    bottom: 5px;
    right: 5px;
    left: 5px;
    border: 1px solid #eee;
    border-radius: 50%;
    z-index: -1;
}

.story-video .video-wrapper .vid .vid-butn .icon:before {
    content: '';
    position: absolute;
    top: 5px;
    bottom: 5px;
    right: 5px;
    left: 5px;
    background: #fff;
    border-radius: 50%;
    z-index: -1;
    -webkit-transition: all 0.5s cubic-bezier(1, 0, 0, 1);
    transition: all 0.5s cubic-bezier(1, 0, 0, 1);
}


/* =======  Event style  ======= */
.events {
    position: relative;
}

.events:last-child {
    margin-bottom: 30px;
}

.events figure {
    margin: 0;
    position: relative;
    width: 66.666667%;
    margin-left: auto;
}

.events.left figure {
    margin-left: 0;
    margin-right: auto;
}

.events .caption {
    background: #faf8f7;
    position: absolute;
    left: 0;
    top: 50%;
    width: 50%;
    padding: 5% 5% 5% 5%;
    -ms-transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

.events.left .caption {
    left: auto;
    right: 0;
    background: #faf8f7;
    padding: 5% 5% 5% 5%;
}

.events .caption h4 {
    font-size: 40px;
    color: #1b1b1b;
    line-height: 1.25em;
    margin-bottom: 10px;
    font-family: 'Alex Brush', cursive;
}

.events .caption h6 {
    color: #055651;
    font-family: 'Didact Gothic', sans-serif;
    font-size: 12px;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 5px;
}

.events .caption p {
    margin-bottom: 0px;
}

@media (max-width: 991.98px) {
    .events figure {
        width: auto;
        margin: 0;
    }

    .events .caption {
        position: relative;
        left: 0;
        top: 0;
        width: auto;
        -ms-transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}


/* =======  When & Where style  ======= */
.when-where .img {
    position: relative;
    overflow: hidden;
}

.when-where .img:hover img {
    -webkit-filter: none;
    filter: none;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

.when-where .img img {
    -webkit-transition: all .5s;
    transition: all .5s;
}

.when-where .content {
    width: 100%;
    padding: 30px 45px;
}

.when-where .content .date {
    display: table-cell;
    position: relative;
    width: 80px;
    z-index: 2;
}

.when-where .content .date h3 {
    font-size: 75px;
    font-weight: 600;
    color: #055651;
    margin-bottom: 0px;
    font-family: 'Didact Gothic', sans-serif;
}

.when-where .content .date h6 {
    color: #666;
    letter-spacing: 3px;
    font-size: 12px;
    font-family: 'Didact Gothic', sans-serif;
    text-transform: uppercase;
}

.when-where .content .cont {
    display: table-cell;
    vertical-align: middle;
    padding-left: 30px;
}

.when-where .content .cont h4 {
    font-size: 40px;
    color: #1b1b1b;
    font-family: 'Alex Brush', cursive;
    margin-bottom: 10px;
}

.when-where .content .cont .cont-list {
    position: relative;
    display: block;
}

.when-where .content .cont .cont-list li {
    position: relative;
    display: flex;
    align-items: center;
}

.when-where .content .cont .cont-list li+li {
    margin-top: 5px;
}

.when-where .content .cont .cont-list li .icon span {
    font-size: 16px;
    color: #055651;
}

.when-where .content .cont .cont-list li .text {
    margin-left: 20px;
}

.when-where .content .cont .cont-list li .text p {
    margin: 0;
    font-size: 16px;
    color: #666;
}

.when-where .content .cont .cont-list li .text p a {
    font-size: 16px;
    color: #666;
    transition: all 500ms ease;
}

.when-where .content .cont .cont-list li .text p a:hover {
    color: #055651;
}

.when-where .content .cont p {
    margin-bottom: 10px;
}

.when-where .content .cont p i {
    color: #055651;
    font-size: 16px;
    margin-right: 5px;

}

.when-where .content .cont .more {
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #055651;
    padding-left: 40px;
    position: relative;
}

.when-where .content .cont .more:after {
    content: '';
    width: 30px;
    height: 1px;
    background: #055651;
    position: absolute;
    top: 50%;
    left: 0px;
}

.when-where .content .cont .more:hover {
    color: #1b1b1b;
}

.when-where .content .info h6 {
    font-size: 12px;
    letter-spacing: 5px;
    color: #055651;
    font-family: 'Didact Gothic', sans-serif;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.when-where .content .info .tags {
    color: #055651;
}

@media screen and (max-width: 1000px) {
    .when-where .content {
        padding: 0 30px;
        margin-top: 40px;
    }

    .when-where .content .cont h4 {
        line-height: 1em;
        font-size: 36px;
    }

    .order2 {
        -webkit-box-ordinal-group: 3 !important;
        -ms-flex-order: 2 !important;
        order: 2 !important;
    }

    .order1 {
        -webkit-box-ordinal-group: 2 !important;
        -ms-flex-order: 1 !important;
        order: 1 !important;
    }


}

@media screen and (max-width: 480px) {
    .when-where .content {
        padding: 0 15px;
    }

    .when-where .content .date {
        width: 60px;
    }

    .when-where .content .info .tags {
        margin: 5px 0 0;
    }

    .when-where .content .date h3 {
        font-size: 40px;
    }
}




/* =======  Gallery style  ======= */
.gallery-menu li a {
    cursor: pointer;
    display: block;
    color: #666;
    margin-bottom: 5px;
    padding: 5px 15px;
    transition: all 0.5s;
    margin-top: 5px;
    text-decoration: none;
}

.gallery-menu a.active,
.gallery-menu a:hover {
    color: #fff;
    background-color: #055651;
}

.gallery-item {
    position: relative;
    padding: 15px;
}

.gallery-box {
    overflow: hidden;
    position: relative;
}

.gallery-box .gallery-img {
    position: relative;
    overflow: hidden;
    border-radius: 0;
}

.gallery-box .gallery-img:after {
    content: " ";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 0;
    transition: all 0.27s cubic-bezier(0.3, 0.1, 0.58, 1);
}

.gallery-box .gallery-img>img {
    transition: all 0.3s cubic-bezier(0.3, 0.1, 0.58, 1);
    border-radius: 0;
}

.gallery-box .gallery-detail {
    opacity: 0;
    color: #FFF;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    overflow: hidden;
    transition: all 0.27s cubic-bezier(0.3, 0.1, 0.58, 1);
    text-align: center;
}

.gallery-box .gallery-detail h4 {
    font-family: 'Alex Brush', cursive;
    font-weight: 400;
    font-size: 24px;
    color: #fff;
}

.gallery-box .gallery-detail p {
    color: #fff;
}

.gallery-box:hover .gallery-detail {
    top: 50%;
    transform: translate(0, -50%);
    opacity: 1;
}

.gallery-box:hover .gallery-img:after {
    background: rgba(0, 0, 0, 0.4);
}

.gallery-box:hover .gallery-img>img {
    transform: scale(1.05);
}


/* ======= Blog style ======= */
.marybrian-blog .img {
    position: relative;
    overflow: hidden;
}

.marybrian-blog .img:hover img {
    -webkit-filter: none;
    filter: none;
    -webkit-transform: scale(1.09, 1.09);
    transform: scale(1.09, 1.09);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

.marybrian-blog .img img {
    -webkit-transition: all .5s;
    transition: all .5s;
}

.marybrian-blog .content {
    width: 100%;
    padding: 30px 30px;
}

.marybrian-blog .content .date {
    display: table-cell;
    position: relative;
    width: 95px;
    z-index: 2;
}

.marybrian-blog .content .date h1 {
    font-family: 'Didact Gothic', sans-serif;
    font-size: 70px;
    font-weight: 400;
    color: #055651;
    margin-bottom: 10px;
}

.marybrian-blog .content .date h6 {
    color: #666;
    letter-spacing: 3px;
    font-size: 12px;
    font-family: 'Didact Gothic', sans-serif;
    text-transform: uppercase;
    font-weight: 400;
    padding-right: 3px;
}

.marybrian-blog .content .cont {
    display: table-cell;
    vertical-align: middle;
    padding-left: 15px;
}

.marybrian-blog .content .cont h5 {
    margin: 15px 0;
    font-size: 45px;
    color: #1b1b1b;
    font-weight: 400;
    line-height: 1em;
}

.marybrian-blog .content .cont .more {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #666;
    padding-left: 50px;
    position: relative;
}

.marybrian-blog .content .cont .more:after {
    content: '';
    width: 40px;
    height: 1px;
    background: #055651;
    position: absolute;
    top: 50%;
    left: 0px;
}

.marybrian-blog .content .cont .more:hover {
    color: #055651;
}

.marybrian-blog .content .info h6 {
    font-size: 12px;
    letter-spacing: 3px;
    color: #666;
    font-family: 'Didact Gothic', sans-serif;
    text-transform: uppercase;
}

.marybrian-blog .content .info .tags {
    color: #055651;
}

@media screen and (max-width: 991px) {
    .marybrian-blog .content {
        padding: 0 30px;
        margin-top: 40px;
    }

    .marybrian-blog .content .cont h4 {
        line-height: 1.25em;
    }

    .order2 {
        -webkit-box-ordinal-group: 3 !important;
        -ms-flex-order: 2 !important;
        order: 2 !important;
    }

    .order1 {
        -webkit-box-ordinal-group: 2 !important;
        -ms-flex-order: 1 !important;
        order: 1 !important;
    }
}

@media screen and (max-width: 480px) {
    .marybrian-blog .content {
        padding: 0 15px;
    }

    .marybrian-blog .content .date {
        width: 60px;
    }

    .marybrian-blog .content .info .tags {
        margin: 5px 0 0;
    }

    .marybrian-blog .content .date h3 {
        font-size: 40px;
    }
}

/* ======= Blog & Post style ======= */
.blog .item {
    padding: 60px 30px;
    position: relative;
    background-size: cover;
    background-position: 50% 0% !important;
    margin-bottom: 30px;
}

.blog .item:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(12, 12, 12, 0.7);
}

.blog .item:hover:after {
    opacity: 0;
}

.blog .item:hover h5,
.blog .item:hover p,
.blog .item:hover span {
    color: #fff;
}

.blog .item:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    z-index: 1;
    -webkit-transition: all .4s;
    transition: all .4s;
}

.blog .item .content {
    position: relative;
    z-index: 7;
}

.blog .item h5 {
    font-size: 32px;
    line-height: 1.5em;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 30px;
}

.blog .item .info {
    margin-bottom: 15px;
}

.blog .item .info span {
    margin-right: 10px;
    font-family: 'Old Standard TT', serif;
    font-size: 12px;
    text-transform: uppercase;
    color: #AAA;
    font-weight: 400;
}

.blog .item .info span:last-child {
    margin: 0;
}

.blog .item .info span i {
    padding-right: 4px;
}

.blog .item p {
    margin-bottom: 30px;
}

.blog .item .more {
    font-weight: 500;
}

.blog .item .more:hover i {
    padding-left: 10px;
}

.blog .item .more i {
    padding-left: 2px;
    -webkit-transition: all .4s;
    transition: all .4s;
}

/* blog page post */
.blog-page .item {
    margin-bottom: 60px;
}

.blog-page .post-img {
    position: relative;
    overflow: hidden;
}

.blog-page .post-img a {
    display: block;
}

.blog-page .post-img img {
    -webkit-transition: all .4s;
    transition: all .4s;
}

.blog-page .post-cont {
    padding: 20px 0 0 0;
    background-color: #fff;
}

.blog-page .post-cont .tag,
.blog-page .post-cont .date {
    font-size: 12px;
    text-transform: uppercase;
    color: #055651;
    font-weight: 400;
    letter-spacing: 5px;
}

.blog-page .post-cont .tag:hover,
.blog-page .post-cont .date:hover {
    color: #055651;
}

.blog-page .post-cont h5 {
    font-size: 40px;
    margin-bottom: 15px;
    margin-top: 10px;
}

.blog-page .post-cont h5 a {
    color: #000;
}

.blog-page .post-cont h5 a:hover {
    color: #055651;
}

.blog-page .post-cont .info {
    margin-top: 0px;
    font-size: 12px;
    text-align: right;
}

.blog-page .post-cont .info a {
    font-size: 12px;
    color: #000;
}

.blog-page .post-cont .info a:last-of-type {
    float: right;
}

/* blog sidebar */
.blog-sidebar .widget {
    background: #faf8f7;
    padding: 30px;
    margin-bottom: 30px;
    overflow: hidden;
}

.blog-sidebar .widget ul {
    margin-bottom: 0;
    padding: 0;
}

.blog-sidebar .widget ul li {
    font-size: 15px;
    line-height: 1.5em;
    margin-bottom: 10px;
}

.blog-sidebar .widget ul li:hover {
    color: #055651;
}

.blog-sidebar .widget ul li a {
    color: #666;
}

.blog-sidebar .widget ul li a.active {
    color: #055651;
}

.blog-sidebar .widget ul li a:hover {
    color: #055651;
}

.blog-sidebar .widget ul li:last-child {
    margin-bottom: 0;
}

.blog-sidebar .widget ul li i {
    font-size: 9px;
    margin-right: 10px;
}

.blog-sidebar .widget .recent li {
    display: block;
    overflow: hidden;
}

.blog-sidebar .widget .recent .thum {
    width: 90px;
    overflow: hidden;
    float: left;
}

.blog-sidebar .widget .recent a {
    display: block;
    margin-left: 105px;
}

.blog-sidebar .widget-title {
    margin-bottom: 30px;
}

.blog-sidebar .widget-title h6 {
    padding-bottom: 0;
    border-bottom: 1px solid #f1eaea;
    font-size: 35px;
    line-height: 1.5em;
    margin-bottom: 15px;
}

.blog-sidebar .search form {
    position: relative;
}

.blog-sidebar .search form input {
    width: 100%;
    padding: 10px;
    border: 0;
    background: #fff;
    margin-bottom: 0;
}

.blog-sidebar .search form button {
    position: absolute;
    right: 0;
    top: 0;
    background-color: transparent;
    color: #000;
    border: 0;
    padding: 10px;
    cursor: pointer;
}

.blog-sidebar .tags li {
    margin: 3px !important;
    padding: 6px 16px;
    border: 1px solid #f1eaea;
    color: #666 !important;
    float: left;
}

.blog-sidebar ul.tags li a {
    font-size: 14px;
    color: #666;
}

.blog-sidebar ul.tags li:hover,
.blog-sidebar ul.tags li a:hover {
    color: #fff;
    background-color: #055651;
}

.blog-comment-section {
    padding-top: 60px;
    margin-bottom: 0px;
}

.blog-comment-section h5 {
    font-size: 27px;
}

.blog-post-comment-wrap {
    display: flex;
    margin-bottom: 60px;
}

.blog-user-comment {
    margin-right: 30px;
    flex: 0 0 auto;
}

.blog-user-comment img {
    border-radius: 100%;
    width: 120px;
}

.blog-user-content {
    margin-right: 26px;
}

.blog-user-content h3 {
    font-size: 27px;
    color: #000;
    margin: 0 0 15px;
}

.blog-user-content h3 span {
    font-size: 11px;
    color: #666;
    font-weight: 400;
    margin-left: 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: 'Nunito Sans', sans-serif;
}

.blog-repay {
    font-size: 13px;
    line-height: 1.75em;
    color: #000 !important;
    margin: 0;
    font-weight: 400;
}

/* pagination */
.blog-pagination-wrap {
    padding: 0;
    margin: 30px 0 0 0;
    text-align: center;
}

.blog-pagination-wrap li {
    display: inline-block;
    margin: 0 5px;
    border-radius: 100%;
    border: 1px solid #f5eeeb;
}

.blog-pagination-wrap li a {
    background: #fff;
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #666;
    font-weight: 300;
    border-radius: 100%;
}

.blog-pagination-wrap li a:hover {
    opacity: 1;
    text-decoration: none;
    background-color: #055651;
    border: 1px solid #055651;
    color: #fff;
}

.blog-pagination-wrap li a.active {
    background-color: #055651;
    border: 1px solid #055651;
    color: #fff;
}

.blog-pagination-wrap li a i {
    font-size: 11px;
}

@media screen and (max-width: 768px) {
    .blog-pagination-wrap {
        padding: 0 0 60px 0;
        margin: 0;
        text-align: center;
    }
}

/* post list */
.post-list {
    position: relative;
    display: block;
    padding: 0;
}

.post-list li {
    position: relative;
    display: flex;
    align-items: center;
}

.post-list li+li {
    margin-top: 10px;
}

.post-list li .icon {
    display: flex;
    align-items: center;
}

.post-list li .icon span {
    color: #055651;
    font-size: 12px;
}

.post-list li .text {
    margin-left: 12px;
}

.post-list li .text p {
    color: #666;
    font-weight: 400;
    margin: 0;
}

.itenerario-img {
    height: 64px;
    width: 64px;
}

/* =======  Progress-wrap style  ======= */
.progress-wrap {
    position: fixed;
    bottom: 30px;
    right: 30px;
    height: 44px;
    width: 44px;
    cursor: pointer;
    display: block;
    border-radius: 50px;
    -webkit-box-shadow: inset 0 0 0 1px rgba(130, 130, 130, 0.2);
    box-shadow: inset 0 0 0 1px rgba(130, 130, 130, 0.2);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
    -webkit-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    transition: all 400ms linear;
}

.progress-wrap.active-progress {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}

.progress-wrap::after {
    position: absolute;
    font-family: 'themify';
    content: '\e627';
    text-align: center;
    line-height: 44px;
    font-size: 13px;
    font-weight: normal;
    color: #666;
    left: 0;
    top: 0;
    height: 44px;
    width: 44px;
    cursor: pointer;
    display: block;
    z-index: 1;
    -webkit-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    transition: all 400ms linear;
}

.progress-wrap svg path {
    fill: none;
}

.progress-wrap svg.progress-circle path {
    stroke: #055651;
    stroke-width: 2;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    transition: all 400ms linear;
}

.progress-wrap {
    -webkit-box-shadow: inset 0 0 0 1px rgba(130, 130, 130, 0.2);
    box-shadow: inset 0 0 0 1px rgba(130, 130, 130, 0.2);
}

.progress-wrap::after {
    color: #055651;
}

.progress-wrap svg.progress-circle path {
    stroke: #055651;
}


/* =======  Gift Registry style  ======= */
.gift-registry {
    background-color: #fff;
    padding-top: 100px;
    padding-bottom: 100px;
    margin-bottom: -90px;
}

.gift-registry h2 {
    margin-bottom: 10px;
}

.gift-registry h6 {
    color: #055651;
}

.gift-registry a {
    color: #666;
}

.gift-registry .owl-carousel {
    margin: 30px 0;
}

.gift-registry .gift-registry-logo {
    opacity: 1;
    line-height: 0;
}

.gift-registry .gift-registry-logo:hover {
    opacity: 1;
}

.gift-registry img:hover {
    -webkit-filter: none;
    filter: none;
}

.gift-registry img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-transition: all .5s;
    transition: all .5s;
}


/* =======  Insta style  ======= */
.insta {
    margin-bottom: -120px;
}

.insta .flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 0;
    position: relative;
}

.insta .img {
    position: relative;
    padding: 0px;
}

.insta .img:hover i {
    opacity: 1;
}

.insta .img:hover:after {
    opacity: 0;
}

.insta .img:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    -webkit-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s;
    opacity: .0;
}

.insta .img i {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #fff;
    -webkit-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s;
    opacity: 0;
}

.insta .follow {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

.insta .follow .text-bg {
    background: #fff;
    padding: 15px 30px;
    color: #1b1b1b;
    font-size: 14px;
    z-index: 3;
}

.insta .follow .text-bg i {
    color: #055651;
    z-index: 1;
}

.insta .follow .text-bg span {
    position: relative;
    z-index: 2;
}


/* =======  Footer style  ======= */
#footer {
    background: #1b1b1b;
}

/* top footer */
.top-footer {
    padding: 120px 0 0 0;
}

.top-footer h2 {
    font-size: 60px;
    display: block;
    width: 100%;
    position: relative;
    color: #fff;
    letter-spacing: 0px;
    margin-bottom: 10px;
}

.top-footer h6 {
    font-family: 'Didact Gothic', sans-serif;
    color: #fff;
    margin-bottom: 0;
    text-transform: uppercase;
    letter-spacing: 5px;
    font-size: 12px;
}

/* sub footer */
.sub-footer {
    padding: 30px 0 10px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.03);
}

.sub-footer p {
    font-family: 'Didact Gothic', sans-serif;
    font-size: 14px;
    color: #666;
}

.sub-footer p a:hover {
    color: #055651;
}


/* =======  Media Query style  ======= */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px !important;
    }
}

@media screen and (max-width: 991px) {
    .bg-fixed {
        background-attachment: scroll !important;
    }

    .navbar .logo {
        text-align: left;
        margin-left: 0px;
    }

    .nav-scroll .logo {
        width: 150px;
    }

    .logo-img {
        margin-bottom: 0px;
    }

    .navbar button {
        margin-right: 15px;
        outline: none !important;
        background: transparent;
        outline: none;
        color: #fff;
    }

    .navbar button:active,
    .navbar button:focus,
    .navbar button:hover {
        background: transparent;
        outline: none;
        color: #fff !important;

    }

    .nav-scroll button span i {
        color: #1b1b1b;
    }

    .navbar .container {
        max-width: 100%;
    }

    .navbar .navbar-collapse {
        max-height: 400px;
        overflow: auto;
        background: #fff;
        text-align: left;
        padding: 15px 30px 30px 15px
    }

    .navbar .nav-link {
        margin: 0px auto !important;
    }

    .navbar .navbar-nav .nav-link {
        color: #666;
    }

    .nav-scroll .navbar-collapse .nav-link {
        color: #666 !important;
    }

    .nav-scroll .navbar-collapse .active {
        color: #055651 !important;
    }

    .dropdown-menu {
        opacity: 1;
        visibility: visible;
        -webkit-transform: translateY(0);
        transform: translateY(0);
        width: 100%;
        display: none;
    }

    .dropdown-menu .sub-menu {
        position: static;
        margin-top: 0px;
        opacity: 1;
        visibility: visible;
        -webkit-transform: translateY(0);
        transform: translateY(0);
        width: 100%;
        display: none;
    }

    .dropdown:hover .dropdown-menu,
    .dropdown:hover .mega-menu {
        display: block;
    }

    .dropdown .dropdown-menu:hover .sub-menu {
        display: block;
    }

    .dropdown .mega-menu {
        width: 100%;
        position: static;
        opacity: 1;
        visibility: visible;
        -webkit-transform: translateY(0);
        transform: translateY(0);
        width: 100%;
        display: none;
    }

    .dropdown .mega-menu .dropdown-menu {
        border: 0;
        margin: 0;
    }

    .dropdown .mega-menu .dropdown-title {
        border-bottom-color: #666;
    }

    .dropdown-menu .dropdown-item,
    .sub-menu .dropdown-item {
        color: #666;
    }

    .section-title {
        font-size: 40px;
    }

    .story-video .video-wrapper .caption .title {
        font-size: 40px;
    }

    .events .caption h4 {
        font-size: 32px;
    }

    #banner .section-head h2 {
        font-size: 40px;
    }

    .top-footer h2 {
        font-size: 40px;
    }

    .insta {
        margin-bottom: 0px;
    }

    .top-footer {
        padding: 0px 0 0 0;
    }
}


/* =======  Overlay Effect Bg image  ======= */
[data-overlay-dark],
[data-overlay-light] {
    position: relative;
}

[data-overlay-dark] .container,
[data-overlay-light] .container {
    position: relative;
    z-index: 2;
}

[data-overlay-dark]:before,
[data-overlay-light]:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}

[data-overlay-dark]:before {
    background: #1b1b1b;
}

[data-overlay-light]:before {
    background: #fff;
}

[data-overlay-dark] h1,
[data-overlay-dark] h2,
[data-overlay-dark] h3,
[data-overlay-dark] h4,
[data-overlay-dark] h5,
[data-overlay-dark] h6,
[data-overlay-dark] span {
    color: #fff;
}

[data-overlay-dark] p {
    color: #bbb;
}

[data-overlay-dark="0"]:before,
[data-overlay-light="0"]:before {
    opacity: 0;
}

[data-overlay-dark="1"]:before,
[data-overlay-light="1"]:before {
    opacity: 0.1;
}

[data-overlay-dark="2"]:before,
[data-overlay-light="2"]:before {
    opacity: 0.2;
}

[data-overlay-dark="3"]:before,
[data-overlay-light="3"]:before {
    opacity: 0.3;
}

[data-overlay-dark="4"]:before,
[data-overlay-light="4"]:before {
    opacity: 0.4;
}

[data-overlay-dark="5"]:before,
[data-overlay-light="5"]:before {
    opacity: 0.5;
}

[data-overlay-dark="6"]:before,
[data-overlay-light="6"]:before {
    opacity: 0.6;
}

[data-overlay-dark="7"]:before,
[data-overlay-light="7"]:before {
    opacity: 0.7;
}

[data-overlay-dark="8"]:before,
[data-overlay-light="8"]:before {
    opacity: 0.8;
}

[data-overlay-dark="9"]:before,
[data-overlay-light="9"]:before {
    opacity: 0.9;
}

[data-overlay-dark="10"]:before,
[data-overlay-light="10"]:before {
    opacity: 1;
}


/* =========================================================================
   RSVP panel
   ========================================================================= */

/* The translucent white sits on the panel background, not on the element, so
   the copy stays fully opaque and readable over the photo behind it.
   (It used to be `style="opacity: .7"` on the whole column, which faded the
   text along with the box.) */
.rsvp-card {
    background-color: rgba(255, 255, 255, 0.85);
}

.rsvp-phone {
    font-size: larger;
}

/* the site already ships a[href^="tel"] { color: inherit }, so the numbers
   read as text on desktop and are tappable on a phone */
.rsvp-phone a {
    text-decoration: none;
    border-bottom: 1px solid rgba(5, 86, 81, 0.35);
}

.rsvp-phone a:hover,
.rsvp-phone a:focus {
    color: #055651;
}

/* =========================================================================
   Dress code details + Pinterest board (Código de Vestimenta section)
   ========================================================================= */

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

.dress-code p,
.dress-code li {
    font-family: 'Didact Gothic', sans-serif;
    font-size: 17px;
    line-height: 1.8;
    color: #666;
}

.dress-code strong {
    color: #055651;
}

.dress-code-list {
    list-style: none;
    margin: 18px 0;
    padding: 0;
}

.dress-code-list li {
    margin-bottom: 8px;
}

.dress-code-note {
    margin-top: 18px;
    font-style: italic;
    color: #055651;
}

/* The Pinterest widget renders at a fixed pixel width inside its own iframe,
   so it cannot inherit page styles. The wrapper keeps it centred and lets it
   scroll rather than overflow when the board is wider than the screen. */
.pinterest-embed {
    max-width: 100%;
    margin: 10px auto 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* fallback link shown when the widget cannot load (offline, file://, blocked) */
.pinterest-embed > a {
    color: #055651;
    font-family: 'Didact Gothic', sans-serif;
}

@media screen and (max-width: 767px) {
    .dress-code p,
    .dress-code li {
        font-size: 15px;
    }
}

/* =========================================================================
   Wedding Invitation — themeable stylesheet
   Everything you'd want to re-skin lives in the :root variables below.
   Swap colors, fonts, or sizes there and the whole card updates.
   ========================================================================= */

:root {
  /* ---- Colors -------------------------------------------------------- */
  /* Deep teal / gold palette. The paper stays warm cream and the wax seal
     stays gold - both read as intended against the teal. */
  --color-bg: #faf5ec;              /* paper background */
  --color-envelope: #055651;        /* envelope front color (deep teal) */
  --color-envelope-shade: #033532;  /* envelope fold/crease shade (darker teal) */
  --color-envelope-shadow: rgba(3, 22, 21, 0.55);
  --color-text: #055651;            /* headings, script text, accents (teal) */
  --color-text-soft: #1b6a65;       /* body copy (teal, slightly softer) */
  --color-gold-light: #f6e6bd;      /* wax seal highlight (warm gold, light) */
  --color-gold: #cc9e52;            /* wax seal base (gold/brass) */
  --color-gold-dark: #6b4a1f;       /* wax seal shadow / monogram ink (bronze) */

  /* ---- Fonts ----------------------------------------------------------
     Loaded from Google Fonts in the HTML <head>. Swap the family names
     here (and the matching <link>) to re-theme typography.            */
  --font-script: 'Alex Brush', cursive;   /* names, "Itinerario" */
  --font-display: 'Playfair Display', serif; /* big "14", numerals */
  --font-body: 'EB Garamond', serif;      /* paragraphs, labels, times */

  /* ---- Sizing ---------------------------------------------------------- */
  --card-max-width: 480px;
}

/* ---- Reset / base ------------------------------------------------------ */
.invitation * {
  box-sizing: border-box;
}

.invitation {
  max-width: var(--card-max-width);
  margin: 0 auto;
  background-color: var(--color-bg);
  /* subtle paper-grain texture, purely CSS, no image assets required */
  background-image:
    radial-gradient(rgba(0, 0, 0, 0.035) 1px, transparent 1px),
    radial-gradient(rgba(0, 0, 0, 0.025) 1px, transparent 1px);
  background-size: 3px 3px, 5px 5px;
  background-position: 0 0, 2px 2px;
  color: var(--color-text-soft);
  font-family: var(--font-body);
  text-align: center;
  padding: 0 0 56px;
  overflow: hidden;
}

/* =========================================================================
   Envelope + wax seal (pure CSS/SVG, no raster image)
   ========================================================================= */

/* The envelope sits inside a cream margin, like the printed card in the design. */
.envelope-wrap {
  padding: 44px 34px 0;
}

.envelope-frame {
  position: relative;
  width: 100%;
  padding-top: 66%; /* aspect ratio for the envelope block */
  background-color: var(--color-envelope);
  /* velvet-like sheen + faint brocade texture, pure CSS, no image assets */
  background-image:
    radial-gradient(ellipse at 50% 18%, rgba(255, 255, 255, 0.14), transparent 62%),
    radial-gradient(ellipse at 50% 110%, rgba(0, 0, 0, 0.35), transparent 60%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.035) 0.9px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.04) 0.9px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 11px 11px, 16px 16px;
  background-position: 0 0, 0 0, 0 0, 5px 8px;
  box-shadow: 0 10px 26px rgba(4, 42, 39, 0.28);
  overflow: hidden;
}

.envelope-frame svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.envelope-fold {
  fill: none;
  stroke: var(--color-envelope-shadow);
  stroke-width: 1.6;
}

.envelope-flap {
  fill: var(--color-envelope-shade);
  opacity: 0.22;
}

.wax-seal {
  position: absolute;
  top: 58%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 94px;
  height: 94px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--color-gold-light), var(--color-gold) 55%, var(--color-gold-dark) 100%);
  box-shadow:
    0 3px 6px rgba(0, 0, 0, 0.35),
    inset 0 0 0 3px rgba(255, 255, 255, 0.15),
    inset 0 -4px 8px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wax-seal::before {
  /* wax-stamped ridge ring */
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1px dashed rgba(0, 0, 0, 0.18);
}

.wax-seal-monogram {
  position: relative;
  width: 100%;
  height: 100%;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-gold-dark);
}

.wax-seal-monogram .initial-left,
.wax-seal-monogram .amp,
.wax-seal-monogram .initial-right {
  position: absolute;
  transform: translate(-50%, -50%);
}

.wax-seal-monogram .initial-left {
  top: 30%;
  left: 32%;
  font-size: 32px;
}

.wax-seal-monogram .amp {
  top: 50%;
  left: 49%;
  font-size: 22px;
}

.wax-seal-monogram .initial-right {
  top: 66%;
  left: 65%;
  font-size: 32px;
}

/* =========================================================================
   Couple names
   ========================================================================= */

.names {
  margin-top: 40px;
  padding: 0 24px;
}

.names .script-line {
  font-family: var(--font-script);
  color: var(--color-text);
  font-size: 46px;
  line-height: 1.2;
  display: block;
}

.names .ampersand {
  font-size: 60px;
  line-height: 1;
  margin: 10px 0 4px;
  opacity: 0.92;
}

/* =========================================================================
   Intro paragraph
   ========================================================================= */

.intro {
  margin: 18px auto 0;
  padding: 0 40px;
  max-width: 400px;
  color: var(--color-text-soft);
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.5;
  letter-spacing: 0.2px;
}

/* =========================================================================
   Date block: SÁBADO — 14 — FEBRERO / 2026
   ========================================================================= */

.date-block {
  margin-top: 56px;
}

.date-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 0 34px;
}

.date-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-body);
  font-size: 15px;
  letter-spacing: 4px;
  text-indent: 4px; /* balances the trailing letter-spacing so text stays centred */
  font-weight: 500;
  text-transform: uppercase;
  color: var(--color-text);
}

.date-label::before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: var(--color-text);
  opacity: 0.85;
  margin-bottom: 10px;
}

.date-day {
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 400;
  color: var(--color-text);
  line-height: 1;
  padding-bottom: 4px;
}

.date-year {
  margin-top: 16px;
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: 2px;
  color: var(--color-text);
}

.location {
  margin: 30px 0 0;
  color: var(--color-text-soft);
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.4;
  letter-spacing: 0.5px;
}

/* =========================================================================
   Itinerary
   ========================================================================= */

.itinerary {
  margin-top: 56px;
  padding: 0 36px 0 28px;
}

.itinerary-title {
  font-family: var(--font-script);
  color: var(--color-text);
  font-size: 40px;
  margin-bottom: 28px;
}

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  text-align: left;
}

.timeline-item {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 12px 0 22px;
  position: relative;
}

/* vertical rule linking one event to the next (hidden on the last one) */
.timeline-item::before {
  content: "";
  position: absolute;
  left: 19px; /* centred on the 40px icon column */
  top: 58px;
  bottom: -4px;
  width: 1px;
  background: var(--color-text);
  opacity: 0.4;
}

.timeline-item:last-child {
  padding-bottom: 4px;
}

.timeline-item:last-child::before {
  display: none;
}

.timeline-icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  position: relative;
  z-index: 1;
}

.timeline-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

.timeline-content {
  padding-top: 2px;
}

.timeline-time {
  margin: 0 0 2px;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 2.2px;
  text-transform: uppercase;
}

.timeline-event {
  display: block;
  margin: 2px 0 4px;
  font-family: var(--font-script);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.05;
  text-transform: none;
  color: var(--color-text);
}

.timeline-desc {
  margin: 0;
  color: var(--color-text-soft);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
  /* hanging indent: wrapped lines align with the text, not under the pin */
  padding-left: 18px;
  text-indent: -18px;
}

/* Optional per-event note: dress code, transport, "solo adultos", etc.
   Sits under the venue and reads as a quiet aside, so it never competes
   with the event name. */
.timeline-note {
  margin: 6px 0 0;
  color: var(--color-text-soft);
  font-family: var(--font-body);
  font-style: italic;
  font-size: 15px;
  line-height: 1.45;
  opacity: 0.85;
}

/* The venue itself is the map link: same type as the rest of the line,
   with a hairline underline and a small pin so it reads as tappable. */
.invitation .timeline-place,
.invitation .timeline-place:link,
.invitation .timeline-place:visited {
  color: var(--color-text-soft);
  text-decoration: none;
  text-decoration-color: rgba(27, 106, 101, 0.35);
  transition: color 0.25s;
}

.invitation .timeline-place:hover,
.invitation .timeline-place:focus,
.invitation .timeline-place:active {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The pin leads the line, so the venue reads as a map link without an underline.
   Scoped to .timeline-desc, not .timeline-place: an event with `place` but no
   `map` renders the pin outside the <a>, and it must be styled there too. */
.invitation .timeline-desc .pin {
  width: 13px;
  height: 13px;
  margin-right: 5px;
  vertical-align: -1.5px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.75;
  transition: opacity 0.25s;
}

.invitation .timeline-place:hover .pin,
.invitation .timeline-place:focus .pin {
  opacity: 1;
}

/* =========================================================================
   Small screens
   ========================================================================= */

@media (max-width: 420px) {
  .envelope-wrap { padding: 32px 22px 0; }
  .wax-seal { width: 78px; height: 78px; }
  .wax-seal-monogram .initial-left,
  .wax-seal-monogram .initial-right { font-size: 27px; }
  .wax-seal-monogram .amp { font-size: 18px; }
  .names .script-line { font-size: 38px; }
  .names .ampersand { font-size: 50px; }
  .intro { font-size: 16px; padding: 0 26px; }
  .date-row { gap: 12px; padding: 0 22px; }
  .date-label { font-size: 13px; letter-spacing: 2.5px; text-indent: 2.5px; }
  .date-day { font-size: 54px; }
  .date-year { font-size: 21px; }
  .itinerary { padding: 0 22px 0 18px; }
  .timeline-event { font-size: 28px; }
  .timeline-desc { font-size: 14px; }
  .timeline-note { font-size: 13px; }
}

/* =========================================================================
   Invitation — site-integration guard
   The block above is the invitation's own stylesheet, copied unchanged.
   The two rules below only undo site-wide defaults declared higher up in
   THIS file, so invitacion.html matches the standalone reference card.
   They restyle nothing on their own.
   ========================================================================= */

/* the global `h1..h6 { margin: 0 0 20px }` rule would eat the heading's
   browser-default top margin */
.invitation .itinerary-title {
  margin-top: 0.83em;
}

/* the global `a:hover, a:active, a:focus { text-decoration: none !important }`
   rule would win over the venue link's hover underline */
.invitation .timeline-place:hover,
.invitation .timeline-place:focus,
.invitation .timeline-place:active {
  text-decoration: underline !important;
}