@import url(https://fonts.googleapis.com/css?family=Alex+Brush|Cormorant|Italianno|Monsieur+La+Doulaise|Pacifico|Pinyon+Script);
@font-face { font-family: 'Playfair Display'; src: url("./fonts/PlayfairDisplay-Regular.ttf") format("truetype"); font-style: normal; }

:root {
	--text-color: #333333;
	--text-color-light: #333333A3;
    --primary-color: #00ABEE;
    --primary-color-light: #A9DAE3;
    --border-color: var(--primary-color-light);
}

h1 { height: 100%; padding: 100px 0 64px; color: var(--text-color); text-transform: none; display: flex; justify-content: center; align-items: center; font-family: "Playfair Display", sans-serif; font-size: 40px; font-weight: 500; line-height: 3.313rem; color: var(--text-color); text-align: center; }
.fixed-elements { position: fixed; z-index: -1; }
.link a:hover, a:active, a:focus { color: #036A7F; text-decoration: none; outline: none; line-height: 1.5rem; vertical-align: top; }
a { color: #036A7F; text-decoration: none; }

body { font-family: "Open Sans", sans-serif; font-weight: 500; font-size: 16px; line-height: 1.5rem; color: var(--text-color-light); }

@media only screen and (max-device-width: 1000px) {
    .hidden-mobile { display: none; }
    
}

.container.small { max-width: 792px; margin: 0 auto; padding: 0 24px; }
.container .couple-names { margin: 0; margin-top: 6rem; padding: 0 0 50px; font-size: 60px; display: flex; justify-content: center; align-items: center; font-family: "Playfair Display", sans-serif; font-weight: 500; line-height: 3.313rem; color: var(--text-color); text-align: center; }

.section--welcome .heading-image { max-width: 100%; height: 744px; margin: 50px 0 64px; background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: 20px; }
.section--welcome .date { margin-bottom: 30px; font-size: 40px; line-height: 3.313rem; display: flex; justify-content: center; align-items: center; font-family: "Playfair Display", sans-serif; font-size: 40px; font-weight: 500; line-height: 3.313rem; color: var(--text-color); text-align: center; }

.timer-countdown-container { display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; gap: 10px; color: var(--text-color-light); margin-bottom: 64px; }
.timer-countdown-container .timer-countdown-item { text-align: center; padding: 1em; list-style-type: none; text-transform: uppercase; }
.timer-countdown-container .timer-countdown-number { display: inline-block; font-size: 2.5em; }
.timer-countdown-container .timer-countdown-text { display: block; font-size: 1.25rem; }

.background--images .left-fixed-elements { top: 0; left: 0; width: 230px; height: 770px; }
.background--images .left-fixed-elements .left-bg,
.background--images .left-fixed-elements .left-flower { top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-size: contain; }
.background--images .left-fixed-elements .left-bg { background-image: url("./img/left-fixed-image-bg.png"); }
.background--images .left-fixed-elements .left-flower { background-image: url("./img/left-fixed-flowers.png"); background-position: top; position: absolute; }
.background--images .right-fixed-elements { top: 0; right: 0; width: 230px; height: 770px; }
.background--images .right-fixed-elements .right-bg,
.background--images .right-fixed-elements .right-flower { top: 0px; right: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-size: contain; }
.background--images .right-fixed-elements .right-bg { background-image: url("./img/right-fixed-image-bg.png"); background-position: top right; }
.background--images .right-fixed-elements .right-flower { background-image: url("./img/right-fixed-flowers.png"); background-position: top; }
.background--images .fixed-elements .fixed-flowers { position: absolute; }
.background--images .footer-image { display: block; max-width: 100%; margin: 0 auto; width: 732px; height: 190px; background-image: url("./img/footer-static-image.png"); background-repeat: no-repeat; background-size: contain; background-position: bottom center; }

.section-schedule .timeline-container,
.section-schedule .timeline-container .date-container { position: relative; }
.section-schedule .timeline-container .happy-end { margin-left: 60px }
.section-schedule .event-container { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 24px; position: relative; padding: 24px 0 24px; color: var(--text-color); }
.section-schedule .event-container .date { -ms-flex-positive: 1; flex-grow: 1; padding-left: 60px; }
.section-schedule .event-container .dayOfWeek { line-height: 2rem; }
.section-schedule .event-container .event-details { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; gap: 24px; -ms-flex-preferred-size: 50%; flex-basis: 50%; width: 100%; box-sizing: border-box; padding: 24px; border: 1px solid var(--border-color); border-radius: 10px; line-height: 1.5rem; }
.section-schedule .event-container .event-details .time-period { display: flex; align-items: center; gap: 14px; }
.section-schedule .event-container .event-details .event-border-hr { margin: 0; border: 1px solid var(--primary-color); }
.section-schedule .event-container .event-details .event-inner-circle { color: var(--text-color-light); }
.section-schedule .event-container .event-details .event-image { max-width: 100%; max-height: 181px; border-radius: 12px; object-fit: cover; object-position: top; }
.section-schedule .event-container .event-details .event-location {z-index: 1; color: #036A7F; text-decoration: none; display: flex;justify-content: space-between; overflow: hidden;}
.section-schedule .event-container .event-details .event-location-address {flex-grow: 1; white-space: nowrap;}
.section-schedule .event-container .event-details .event-location-image { width: 125px; max-height: 90px; margin-left: 1rem; object-fit: none; }
.section-schedule .event-container .event-details .event-description {margin: 0;color: var(--text-color-light);overflow-wrap: break-word;}
.section-schedule .event-container .event-details .event-inner-circle { background: rgba(174, 0, 0, 0.44); padding: 0.5rem 1rem; margin: -0.5rem; border-radius: 1rem; }
.section-schedule .event-container .event-details .event-inner-circle > p { padding: 0; margin: 0; }

.sub-headline,
.section-schedule .event-container .dayOfWeek,
.section-schedule .event-container .event-details .event-title { font-family: "Playfair Display", sans-serif; font-weight: 500; font-size: 24px; line-height: 2rem; color: var(--text-color); }

.section-schedule .timeline-container .date-container::before { content: ""; border-left: 2px dashed var(--primary-color-light); left: 0px; height: 0; position: absolute; bottom: 0; top: 2.5rem;; transform-origin: 0 0; transition: all 0.5s cubic-bezier(.55,.06,.68,.19); }
.section-schedule .timeline-container .date-container.revealed::before { height: 100%; }

.section-schedule .timeline-container .date-container.end::before { border: none; }
.section-schedule .event-container .date::before { content: ""; scale: 0.5; position: absolute; top: 28px; left: -11px; width: 24px; height: 24px; border: 2px solid #036A7F; border-radius: 50%; outline: 24px solid rgba(255, 255, 255, 0.5); background: var(--primary-color); color: transparent; transition: all 0.5s cubic-bezier(.55,.06,.68,.19); }
.section-schedule .date-container.end .event-container .date::before { top: 50%; transform: translateY(-50%); }
.section-schedule .timeline-container .date-container.revealed .date::before { scale: 1; background: #fff; outline: 12px solid rgba(255, 255, 255, 0.5); }
.section-schedule .timeline-container .date-container .next .date::before { background: #00ABEE; }
.section-schedule .timeline-container .date-container .history .date > div,
.section-schedule .timeline-container .date-container .history .event-details { opacity: 0.75; }

.card { gap: 24px;  margin-top: 0; margin-bottom: 24px; padding: 24px 24px 36px; border-radius: 10px; border: 1px solid var(--border-color); background: rgba(255, 255, 255, 0.5); }
.card .card-header { background: none; border-bottom: none; padding: 0; }
.card .card-header svg { margin-right: 1rem; }
.card .card-body { padding: 0; }
.card .card-body .card-title { font-family: "Playfair Display", sans-serif; font-weight: 500; font-size: 24px; line-height: 2rem; color: var(--text-color); margin-bottom: 2rem; }

@media (max-width: 1240px) {
	.background--images .left-fixed-elements {  max-width: 100%; }
	.background--images .left-flower,
	.background--images .right-fixed-elements { display: none; }
}

@media (max-width: 1000px) {
	.section--welcome .heading-image { height: 644px; }
	.section-schedule .timeline-container .date-container::before { border-color: var(--primary-color);}
}

@media (max-width: 736px) {
	.container .couple-names { padding: 15px; border-radius: 12px; background-color: #036A7F0A; font-size: 32px !important; line-height: 2.688rem !important; }
	.section--welcome .heading-image { height: 544px; }
}

@media (max-width: 680px) {
	.section--welcome .heading-image { height: 372px; }
	.section-schedule .event-container .date { width: 100%; padding: 24px !important; border-radius: 12px; background-color: #036A7F0A; text-align: center; box-sizing: border-box; }
	.section-schedule .event-container .event-details { flex-basis: 100%; margin-left: 24px; background: rgba(255, 255, 255, 0.5); border: 1px solid var(--primary-color-light); }
	.section-schedule .timeline-container .date-container .date::before { outline: 12px solid rgba(255, 255, 255, 0.5); }
	.section-schedule .timeline-container .date-container.revealed .date::before { outline: 6px solid rgba(255, 255, 255, 0.5); }
	.section-schedule .timeline-container .date-container::before { top: 5rem; }
	.section-schedule .event-container .date::before { top: 64px; }
	.background--images .footer-image { height: 190px; }
}

#global-loader { position: fixed; z-index: 50000; background: #fff; left: 0; top: 0; right: 0; bottom: 0; height: 100%; width: 100%; margin: 0 auto; text-align: center; }
#global-loader img { position: absolute; right: 0; bottom: 0; top: 43%; left: 0; margin: 0 auto; text-align: center; }

.section--gallery { margin-top: 3rem; }
.section--gallery .image-container { display: flex; flex: 1 1 auto; flex-wrap: wrap; min-width: 0; }
.section--gallery .card { padding: 0.5rem; gap: unset; margin-top: unset; margin-bottom: unset; border-radius: unset; border: unset; background: unset; overflow: hidden; display: flex; flex: 1 1 auto; }
.section--gallery .card:hover { cursor: pointer; }
@media (min-width: 0px) {
	.section--gallery .card { flex-basis: 100%; flex-grow: 0; max-width: 100%; }
}
@media (min-width: 600px) {
	.section--gallery .card { flex-basis: calc(50% - 0.75rem); flex-grow: 0; max-width: 50%; }
}
@media (min-width: 960px) {
	.section--gallery .card { flex-basis: calc(33.33333333333333% - 0.75rem); flex-grow: 0; max-width: 33.33333333333333%; }
}
@media (min-width: 1264px) {
	.section--gallery .card { flex-basis: calc(25% - 0.75rem); flex-grow: 0; max-width: 25%; }
	.section--gallery .container {  }
}

.image-wrapper:not(.lazyloaded, .lazyerror):has(img.lazyload) { background-image: url("./img/spinner.svg"); background-position: center; background-repeat: no-repeat; background-color: #dedede; }
.image-wrapper.lazyloaded { background-image: none; }
.image-wrapper.lazyerror { background-image: url("./img/error.svg"); background-position: center; background-repeat: no-repeat; }
.lazyloaded .lazyload { -webkit-transform: scale(1); transform: scale(1); }
.lazyload { display: block; min-height: 1px; opacity: 0; transition: all .3s ease-in-out; -webkit-transform: scale(.97); transform: scale(.97); }
.lazyloaded .lazyload { opacity: 1; }
.image-wrapper img { object-fit: contain; overflow: hidden; }
.image-wrapper img { margin: auto auto;  max-width: 100%; max-height: 100%; background-repeat: no-repeat; background-position: center; text-indent: 100%; white-space: nowrap; overflow: hidden;}
.image-wrapper.format_1x1 { text-align: center; position: relative; height: 0; padding-top: 100%;}
.image-wrapper.format_1x1 img { top: 0; left: 0;  object-fit: cover; position: absolute; }

.btn-download { position: absolute; cursor: pointer; box-sizing: content-box; width: 1em; height: 1em; padding: .25em .25em; background: transparent url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPgo8c3ZnIHdpZHRoPSIzMngiIGhlaWdodD0iMzJweCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMyAxNUMzIDE3LjgyODQgMyAxOS4yNDI2IDMuODc4NjggMjAuMTIxM0M0Ljc1NzM2IDIxIDYuMTcxNTcgMjEgOSAyMUgxNUMxNy44Mjg0IDIxIDE5LjI0MjYgMjEgMjAuMTIxMyAyMC4xMjEzQzIxIDE5LjI0MjYgMjEgMTcuODI4NCAyMSAxNSIgc3Ryb2tlPSIjMDM2QTdGIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik0xMiAzVjE2TTEyIDE2TDE2IDExLjYyNU0xMiAxNkw4IDExLjYyNSIgc3Ryb2tlPSIjMDM2QTdGIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPg==") center/1.5rem auto no-repeat; border: 0; border-radius: .25rem; }
.download span { margin-left: 1.75rem; }
.section--gallery .image-wrapper { width: 100%;  overflow: hidden; position: relative; }
.section--gallery .image-wrapper img { width: 100%;  }
.section--gallery .card:hover img { scale: 1.1 }
.section--gallery .card:hover .image-wrapper::before { opacity: .6; }
.section--gallery .card:hover .image-wrapper::after { opacity: 1; }
.section--gallery .image-wrapper::before { content: ''; z-index: 4; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(to left, #554346, #45505b) !important; opacity: 0; -webkit-transition: 0.2s opacity ease-in-out; transition: 0.2s opacity ease-in-out; }
.section--gallery .image-wrapper::after { content: "\f52a"; font-family: "bootstrap-icons" !important; font-size: 3rem !important; color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: .2s opacity ease-in-out; z-index: 5; }

#modal-gallery .carousel, #modal-gallery .carousel-inner, #modal-gallery .carousel-item, #modal-gallery .image-wrapper  { height: 100%; width: 100%; }
#modal-gallery .carousel { touch-action: pan-y pinch-zoom; }
#modal-gallery .modal-title  { transform: translateX(calc((32px + 1rem)/2)); flex-grow: 1 !important; text-align: center; pointer-events: none; }
.modal-header .btn-download{ position: relative; color: #036A7F; }
.modal-header .btn-close { background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23036A7F'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat; opacity: 1; }
#modal-gallery .image-wrapper .image  { background-repeat: no-repeat; background-size: contain; background-position: 50% 50%; }
#modal-gallery .carousel-control-next, #modal-gallery .carousel-control-prev { color: #000; font-size: 3rem; text-shadow: 0px 0px 5px #FFFFFF; }
#modal-gallery .carousel .carousel-item .image-wrapper { background-color: transparent; position: relative; }
#modal-gallery .carousel .carousel-item .image-wrapper img {  position: absolute; top: 50%; left: 50%; vertical-align: middle; transform: translate(-50%, -50%); }



.section-images .section--gallery { margin-top: 0rem; }
.section-images .section--gallery .image-container { margin-top: 0rem; gap: 1rem; }
.section-images .section--gallery .card { background: var(--border-color); border-radius: 5px; margin: 0; padding: 0; box-shadow: .2rem .2rem .5rem rgba(0,0,0,.4); }
.section-images .section--gallery .description { text-align: center; margin: 0.5rem 1rem; text-shadow: 0 0 .25em rgba(0,0,0,.25); color: var(--text-color); }