@font-face {
	font-family: 'Trajan Pro';
	src: url('fonts/TrajanPro-Bold.woff2') format('woff2'),
		url('fonts/TrajanPro-Bold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Trajan Pro';
	src: url('fonts/TrajanPro-Regular.woff2') format('woff2'),
		url('fonts/TrajanPro-Regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

* {
	box-sizing: border-box;
}

body {
	background-image: url('../images/bg_texture.png');
	background-image: image-set(url('../images/bg_texture.webp') type('image/webp'), url('../images/bg_texture.png') type('image/png'));
	font-family: 'Muli', sans-serif;
	color: #818492!important;
	line-height: 1.8;
	margin: 0;
	overflow-x: hidden;
}

/* OPTIONAL: prevent scrolling until reveal */
body:not(.opened) {
	overflow: hidden;
}

strong {
	color: #3a3a3a;
}


.panel {
	background-image: url('../images/bg_texture.png');
	background-image: image-set(url('../images/bg_texture.webp') type('image/webp'), url('../images/bg_texture.png') type('image/png'));
	position: fixed;
	top: 0;
	width: 51vw;
	height: 100vh;
	transition: transform 1.2s ease-out;
}

/*
.opened .panel{
box-shadow: 0 0 20px rgba(0,0,0,.25);
}
*/
/* LEFT PANEL */

.panel-left {
	left: 0;
	z-index: 8;
}

.panel-left:after,
.panel-right:after {
	background-image: url('../images/bg-line.png');
	background-image: image-set(url('../images/bg-line.webp') type('image/webp'), url('../images/bg-line.png') type('image/png'));
	content: '';
	position: absolute;
	top: 50%;
	height: 515px;
	width: 2px;
	background-position: right center;
	background-repeat: no-repeat;
	transform: translateY(-50%);
}

.panel-left:after {
	right: 0;
}

/* RIGHT PANEL */

.panel-right {
	right: 0;
	z-index: 7;
}

.panel-right:after {
	left: 0;
}

/* OPENED STATE */

.opened .panel-left {
	transform: translateX(calc(-120% - 120px));
}

.opened .panel-right {
	transform: translateX(calc(120% + 120px));
}

.reveal-btn {
	animation: clickMouse 2s infinite;
	position: absolute;
	top: 50%;
	left: 100%;
	transform: translate(-50%, -50%);
	font-size: 18px;
	border: none;
	color: white;
	cursor: pointer;
	z-index: 1;	
	background-image: url('../images/kp-logo.png');
	background-image: image-set(url('../images/kp-logo.webp') type('image/webp'), url('../images/kp-logo.png') type('image/png'));
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	width: 224px;
	height: 224px;
}

.reveal-cursor {
	animation: moveMouse 2s infinite;
	background-image: url('../images/cursor.png');
	background-image: image-set(url('../images/cursor.webp') type('image/webp'), url('../images/cursor.png') type('image/png'));
	height: 60px;
	width: 60px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
	top: 50%;
	left: 100%;
	z-index: 99;
	pointer-events: none;
}

.opened .reveal-cursor {
	display: none;
}

@keyframes clickMouse {
	70% {
		transform: translate(-50%, -50%) scale(1);
	}

	75% {
		transform: translate(-50%, -50%) scale(.9);
	}

	80% {
		transform: translate(-50%, -50%) scale(1);
	}
}

@keyframes moveMouse {
	0% {
		transform: translate(500px, 500px);
	}

	60% {
		transform: translate(0, 0);
	}

	70% {
		transform: translate(0, 0) scale(1);
	}

	75% {
		transform: translate(0, 0) scale(.9);
	}

	80% {
		transform: translate(0, 0) scale(1);
	}

	100% {
		transform: translate(0, 0);
	}
}




.flowers {
	background-image: url('../images/bg_texture.png');
	background-image: image-set(url('../images/bg_texture.webp') type('image/webp'), url('../images/bg_texture.png') type('image/png'));
	position: fixed;
	width: 100%;
	left: 0;
	z-index: 9;
	height: 184px;
}

/*
@media (max-width: 1280px) {
	.flowers {
		display: none;
	}
}
*/

/* .website-now .flowers{
	background-image: url('../images/bg_texture.png');
} */
.flowers img,
.flowers canvas {
	display: block;
	margin: 0 auto;
	max-width: 95%;
	height: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.flowers img {
	position: absolute;
}

.flowers-top {
	top: 0;
	transform: translateY(-15px);
}

.flowers-bottom {
	bottom: 0;
	transform: translateY(15px);
}

.opened .flowers-top {
	transform: translateY(-94px);
	transition: transform 1s ease-out;
}

.opened .flowers-bottom {
	transform: translateY(94px);
	transition: transform 1s ease-out;
}

/*  ======================  Wrapper Styles  ======================  */
.page-wrapper {
	min-height: 100vh;
	padding: 88px 0;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/*
@media (max-width: 1280px) {
	.page-wrapper {
		height: 100vh;
		padding: 0;
	}
}
*/
/*
body:before{
    content:"";
    position:absolute;
    top:0%;
    left:-30%;
    width:50%;
    height:100%;
    transform:skewX(25deg);

    background: linear-gradient(
        to right,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.1) 30%,
        rgba(255,255,255,0.95) 50%,
        rgba(255,255,255,0.1) 70%,
        rgba(255,255,255,0) 100%
    );

    filter: blur(2px);
    animation:shine 6s infinite;
}

@keyframes shine{
    0%{
        left:-30%;
    }
    100%{
        left:100%;
    }
}
	*/



/*  ======================  Logo Wrapper Styles  ======================  */
/*.logo-wrapper {
	left: 50%;
	opacity: 0;
	position: fixed;
	top: 50%;
	transform: translate(-50%, -50%) scale(.4);
	transition: transform 1.2s ease-out, opacity 1.2s ease-out;
	width: 300px;
}

.logo-wrapper:before {
	content: '';
	padding-top: 80.5%;
	display: block;
	width: 300px;
}

.logo-wrapper img {
	height: auto;
	left: 0;
	max-width: 100%;
	position: absolute;
	top: 0;
}

.opened .logo-wrapper {
	animation: setLogo 2.5s ease-out forwards;
}

@keyframes setLogo {
	40% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}

	80% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}

	99% {
		left: 50%;
		top: 50%;
		opacity: 0;
		transform: translate(-50%, -50%) scale(.4);
	}

	100% {
		left: -100%;
		top: -100%;
	}
}
*/
/*  ======================  Swiper Styles  ======================  */
.navigation,
.content-wrapper {
	opacity: 0;
	transition: transform .5s ease-out, opacity .5s ease-out;
	width: 100%;
}

.content-wrapper {
	transform: scale(.8);
	transform-origin: top center;
	max-width: 1280px;
	margin: 0 auto;
}

.content-wrapper>section {
	padding: 3em 1em;
}

.content-wrapper h1,
.content-wrapper h2 {
	display: inline-block;
	font-family: 'Great Vibes';
	font-size: 3em;
	font-weight: 700;
	background: radial-gradient(circle, rgba(227, 197, 70, 1) 0%, rgba(181, 140, 30, 1) 100%);
	background-clip: text;
	color: transparent;
	line-height: 1.25;
	margin: 0 0 .5em;
	max-width: max-content;
	padding: 0 1em;
}

.content-wrapper p {
	font-family: "Muli", sans-serif;
	font-size: 1em;
	margin: 1em 0;
}

hr {
	height: 0;
	margin: 20px;
	border: 0;
	border-top: 1px solid #eee;
}

.content-wrapper a {
	color: #b58c1d;
	display: inline-block;
	position: relative;
	text-decoration: none;
}

.content-wrapper a:after {
	background-color: rgba(181, 140, 30, 1);
	bottom: 0;
	content: '';
	height: 1px;
	left: 50%;
	position: absolute;
	width: 0;
}

.content-wrapper a:hover {
	color: rgba(158, 123, 28, 1);
}

.content-wrapper a:hover:after {
	transform: translateX(-50%);
	width: 100%;
}

.opened .content-wrapper {
	opacity: 1;
	transition-delay: .75s;
	transform: scale(1);
}

/*  ======================  Swiper Navigation Styles  ======================  */
.navigation {
	background-image: url('../images/bg_texture.png');
	background-image: image-set(url('../images/bg_texture.webp') type('image/webp'), url('../images/bg_texture.png') type('image/png'));
	box-shadow: 0 5px 5px rgba(0, 0, 0, .1);
	font-family: 'Trajan Pro';
	font-size: 1.25em;
	font-weight: 700;
	line-height: 60px;
	position: sticky;
	text-align: center;
	top: 88px;
	z-index: 99;
}

.navigation-spacer {
	height: 60px;
}

.opened .navigation {
	opacity: 1;
	transition-delay: .5s;
}

.navigation a {
	color: #b58c1d;
	display: inline-block;
	margin: 0 20px;
	position: relative;
	text-decoration: none;
}

.navigation a.active:after {
	bottom: 0;
	background-color: rgba(158, 123, 28, 1);
	content: '';
	display: block;
	height: 2px;
	left: 0;
	position: absolute;
	width: 100%;
}

.navigation a:hover,
.navigation a.active {
	color: rgba(158, 123, 28, 1);
	text-decoration: none;
}

@media (max-width: 900px) {
	.navigation {
		font-size: 1em;
	}
}

/*  ======================  Save the Sate Styles  ======================  */
.save-the-date {
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
}

.save-the-date h2 {
	font-size: 5rem;
	margin: 0;
}

.save-the-date h2 small {
	display: inline-block;
	font-size: 2.5rem;
	margin: 0 .25em;
}

.save-the-date h4 {
	font-family: 'Great Vibes';
	font-weight: 700;
	font-size: 1.5rem;
	margin: 0 auto 1em;
	max-width: max-content;
	position: relative;
}

.save-the-date h4:before,
.save-the-date h4:after {
	content: "";
	background-color: #b58c1d;
	width: 40px;
	height: 1px;
	position: absolute;
	left: -55px;
	top: 50%;
}

.save-the-date h4:after {
	left: auto;
	right: -55px;
}

.save-the-date #countdown {
	display: flex;
	flex-wrap: wrap;
	font-weight: 700;
	justify-content: center;
	overflow: hidden;
	text-align: center;
}

.save-the-date .cBox {
	align-items: center;
	background-image: url("../images/clock-bg.png");
	background-image: image-set(url('../images/clock-bg.webp') type('image/webp'), url('../images/clock-bg.png') type('image/png'));
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	display: flex;
	flex-direction: column;
	font-size: 1em;
	height: 127px;
	line-height: .75;
	justify-content: center;
	padding: 10px 0 0 7px;
	width: 125px;
	margin: 10px;
}

.save-the-date .cBox>div {
	color: #b58c1d;
	font-family: "Great Vibes", cursive;
	font-size: 2.5em;
	font-weight: 700;
}



/*  ======================  Save the Sate Styles  ======================  */
.travel {
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
}




/*  ======================  Wedding Itinerary Styles  ======================  */
.itinerary {
	text-align: center;
}

.itinerary .story-grids {
	background-color: #fff;
	max-width: 770px;
	margin: 0 auto;
	padding: 65px;
	-webkit-box-shadow: 0px 14px 36.21px 14.79px rgba(177, 154, 86, 0.09);
	box-shadow: 0px 14px 36.21px 14.79px rgba(177, 154, 86, 0.09);
	border-radius: 10px;
	position: relative;
}

.itinerary .story-grids+.story-grids {
	margin-top: 3em;
}

@media (max-width: 767px) {
	.itinerary .story-grids {
		padding: 65px 25px;
	}
}

.itinerary .story-grids:before {
	content: "";
	background-image: url("../images/story-left-flower.png");
	background-image: image-set(url('../images/story-left-flower.webp') type('image/webp'), url('../images/story-left-flower.png') type('image/png'));
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	width: 394px;
	height: 311px;
	position: absolute;
	left: -290px;
	top: 20%;
	z-index: -10;
}

.itinerary .story-grids:after {
	content: "";
	background-image: url("../images/story-right-flower.png");
	background-image: image-set(url('../images/story-right-flower.webp') type('image/webp'), url('../images/story-right-flower.png') type('image/png'));
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	width: 355px;
	height: 339px;
	position: absolute;
	right: -190px;
	top: 50%;
	z-index: -10;
}

@media (max-width: 1280px) {

	.itinerary .story-grids:before,
	.itinerary .story-grids:after {
		display: none;
	}
}

.itinerary h3 {
	font-family: "Great Vibes", cursive;
	font-size: 33px;
	font-size: 2.0625rem;
	line-height: 1.25;
	margin: 0 0 0.4em;
	color: rgba(181, 140, 30, 1);
}

@media (max-width: 991px) {
	.itinerary h3 {
		font-size: 28px;
		font-size: 1.75rem;
	}
}

.itinerary .story-grids .grid {
	background-image: url('../images/email-separator.jpg');
	background-image: image-set(url('../images/email-separator.webp') type('image/webp'), url('../images/email-separator.jpg') type('image/jpeg'));
	background-position: center bottom;
	background-repeat: no-repeat;
	position: relative;
	padding-bottom: 80px;
	margin-bottom: 60px;
}
.itinerary .story-grids .grid:last-of-type {
	background-image: none;
	padding-bottom: 55px;
	margin-bottom: 0;
}

@media (max-width: 767px) {
	.itinerary .story-grids .grid {
		padding-bottom: 75px;
		margin-bottom: 60px;
	}
}
/*
.itinerary .story-grids .grid:after {
	font-size: 1.4em;
	content: "\2661";
	position: absolute;
	left: 50%;
	bottom: 0;
	color: rgba(227, 197, 70, 1);
	transform: translateX(-50%);
}

.itinerary .story-grids .grid:before {
	content: "";
	background: rgba(227, 197, 70, 1);
	width: 1px;
	height: 45px;
	position: absolute;
	left: 50%;
	bottom: 25px;
	transform: translateX(-50%);
}

@media (max-width: 767px) {
	.itinerary .story-grids .grid:before {
		height: 25px;
		bottom: 15px;
	}
}

.itinerary .story-grids .grid:last-of-type {
	padding-bottom: 55px;
	margin-bottom: 0;
}

.itinerary .story-grids .grid:last-of-type:before,
.itinerary .story-grids .grid:last-of-type:after {
	display: none;
}
*/
.itinerary .itinerary-location-title {
	font-family: "Great Vibes", cursive;
	font-size: 2.5em;
	color: rgba(181, 140, 30, 1);
	font-weight: 700;
	margin-bottom: 1em;
	position: relative;
	padding-bottom: 5px;
}

.itinerary .itinerary-location-title:after,
.itinerary .itinerary-location-title:before {
	bottom: 0;
	content: '';
	border-bottom: 1px solid;
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
	width: 50px;
}

.itinerary .itinerary-location-title:after {
	bottom: 4px;
	width: 100px;
}

.itinerary .link-location a {
	display: inline-flex;
	align-items: center;
}

.itinerary .link-location svg {
	display: inline-block;
	fill: currentColor;
	height: 1.25em;
	margin-right: 5px;
	width: 1.25em;
}

/*  ======================  Coming Soon Page  ======================  */
.coming-soon {
	text-align: center;
}

.coming-soon .coming-soon-logo {
	display: block;
	margin: 0 auto 30px;
	max-width: 200px;
	height: auto;
}

.coming-soon h1 {
	font-family: 'Great Vibes', cursive;
	font-size: 4em;
	font-weight: 700;
	background: radial-gradient(circle, rgba(227, 197, 70, 1) 0%, rgba(181, 140, 30, 1) 100%);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	line-height: 1.25;
	margin: 0 0 .3em;
}

.coming-soon p {
	font-size: 1.1em;
	color: #818492;
	max-width: 480px;
	margin: 0 auto;
}

@media (max-width: 767px) {
	.coming-soon .coming-soon-inner {
		padding: 50px 25px;
	}

	.coming-soon h1 {
		font-size: 3em;
	}
}

/*  ======================  RSVP Form Styles  ======================  */
.rsvp-section {
	text-align: center;
}

.rsvp-section .rspv-form {
	background-color: #fff;
	max-width: 770px;
	margin: 0 auto;
	-webkit-box-shadow: 0px 14px 36.21px 14.79px rgba(134, 134, 134, 0.09);
	box-shadow: 0px 14px 36.21px 14.79px rgba(134, 134, 134, 0.09);
	position: relative;
	padding: 65px 80px;
}

.rsvp-section .rspv-form:before {
	content: "";
	width: calc(100% - 24px);
	height: calc(100% - 24px);
	position: absolute;
	left: 12px;
	top: 12px;
	background-color: white;
	opacity: 0.541;
	-webkit-box-shadow: 0px 14px 36.21px 14.79px rgba(134, 134, 134, 0.09);
	box-shadow: 0px 14px 36.21px 14.79px rgba(134, 134, 134, 0.09);
}

.rsvp-section .rspv-form .left-flower,
.rsvp-section .rspv-form .right-flower {
	background-image: url("../images/rsvp-left-flower.png");
	background-image: image-set(url('../images/rsvp-left-flower.webp') type('image/webp'), url('../images/rsvp-left-flower.jpg') type('image/jpeg'));
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	width: 491px;
	height: 546px;
	position: absolute;
	left: -150px;
	z-index: -10;
	bottom: -45px;
}

.rsvp-section .rspv-form .right-flower {
	background-image: url("../images/rsvp-right-flower.png");
	background-image: image-set(url('../images/rsvp-right-flower.webp') type('image/webp'), url('../images/rsvp-right-flower.jpg') type('image/jpeg'));
	left: auto;
	right: -150px;
}

@media (max-width: 1280px) {

	.rsvp-section .rspv-form .left-flower,
	.rsvp-section .rspv-form .right-flower {
		display: none;
	}
}

.rsvp-section h3,
.rsvp-section p {
	position: relative;
}

.rsvp-section h3 {
	font-family: "Great Vibes", cursive;
	background: radial-gradient(circle, rgba(227, 197, 70, 1) 0%, rgba(181, 140, 30, 1) 100%);
	background-clip: text;
	color: transparent;
	font-size: 3rem;
	font-weight: 700;
	margin: 0 0 .5em;
	line-height: 1.25;
}

@media (max-width: 767px) {
	.rsvp-section h3 {
		font-size: 35px;
		font-size: 2.1875rem;
	}
}

.rsvp-section p {
	margin: 0;
}

.rsvp-section .rsvp-deadline {
	color: rgba(158, 123, 28, 1);
	font-family: 'Trajan Pro';
	font-size: 22px;
	font-weight: 700;
	position: relative;
}


.rsvp-section .rsvp-success {
	color: #333;
	font-size: 18px;
	min-height: 460px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	z-index: 1;
}

.rsvp-section .rsvp-received {
	font-size: 1.25em;
	font-weight: 700;
	margin-bottom: 0;
}


.rsvp-section form {
	display: flex;
	flex-wrap: wrap;
	gap: 25px;
	position: relative;
	margin-top: 25px;
}

.rsvp-section form ::-webkit-input-placeholder {
	font-style: 16px;
	font-style: normal;
	color: #adb0bd;
}

.rsvp-section form :-moz-placeholder {
	font-style: 16px;
	font-style: normal;
	color: #adb0bd;
}

.rsvp-section form ::-moz-placeholder {
	font-style: 16px;
	font-style: normal;
	color: #adb0bd;
}

.rsvp-section form :-ms-input-placeholder {
	font-style: 16px;
	font-style: normal;
	color: #adb0bd;
}

.rsvp-section form select:invalid {
	font-style: 16px;
	font-style: normal;
	color: #adb0bd;
}

.rsvp-section .rsvp-error-msg {
	color: #c0392b;
	flex: 1 1 100%;
}

.rsvp-section .rsvp-field-error,
.detail-form .rsvp-field-error {
	display: block;
	width: 100%;
	color: #c0392b;
	font-size: 12px;
	margin-top: 4px;
}

.rsvp-section .rsvp-field-hint {
	display: block;
	width: 100%;
	color: #888;
	font-size: 12px;
	margin-top: 4px;
}

.rsvp-section .form-group.has-error .form-control {
	border-color: #c0392b;
}

.rsvp-section .form-group {
	text-align: left;
	flex: 1 1 calc(50% - 25px);
}

.rsvp-section .form-group-full {
	flex: 1 1 100%;
}

.rsvp-section .form-group-three-comun {
	display: flex;
	flex: 1 1 100%;
	flex-wrap: wrap;
	gap: 25px;
}

.rsvp-section .all-events .form-group-three-comun {
	margin-top: 25px;
}

.rsvp-section .form-group-three-comun>div {
	flex: 1 1 calc(33.33333% - 25px);
}

.rsvp-section .form-help-text,
.col-span-full.form-help-text {
	font-size: .8em;
	margin-top: .25em;
	text-align: left;
}

/*
.rsvp-section .california-events .form-help-text {
	margin-top: -24px;
}
*/
.col-span-full.form-help-text {
	margin-top: -12px;
}

.rsvp-section .form-group label {
	color: #000;
}

.rsvp-section form .check-group {
	display: flex;
	flex-wrap: wrap;
	gap: 5px 25px;
	flex: 1 1 100%;
	margin-top: 10px;
}

.rsvp-section form .check-option {
	color: #666;
	flex: 1 1 100%;
	/*flex: 1 1 calc(50% - 25px);*/
}

.rsvp-section form .check-option-all {
	border-top: 1px solid #e5e7eb;
	padding-top: 8px;
	margin-top: 4px;
}

.rsvp-section form .radio-group {
	display: flex;
	flex-wrap: wrap;
	gap: 5px 50px;
}

.rsvp-section form .radio-group label {
	display: inline-block;
}

.rsvp-section form .radio-group .radio-option {
	color: #666;
	/*flex: 1 1 calc(50% - 25px);*/
}

.rsvp-section form .radio-group .radio-option input {
	margin-right: 10px;
}

.rsvp-section form .submit-btn {
	text-align: center;
}

.rsvp-section form .theme-btn,
.detail-form .btn-primary,
.detail-form .btn-secondary {
	background: radial-gradient(circle, rgba(227, 197, 70, 1) 0%, rgba(181, 140, 30, 1) 100%);
	color: #fff;
	cursor: pointer;
	font-family: 'Trajan Pro';
	font-weight: bold;
	padding: 12px 30px;
	border-radius: 30px;
	text-transform: uppercase;
	outline: none;
	line-height: 1.5;
}

.detail-form .btn-secondary {
	background: none;
	border-color: rgba(181, 140, 30, 1);
	color: rgba(181, 140, 30, 1);
}

.detail-form .btn-primary:hover {
	background: radial-gradient(circle, rgba(181, 140, 30, 1) 0%, rgba(227, 197, 70, 1) 100%);
}

.detail-form .btn-secondary:hover {
	border-color: rgba(181, 140, 30, 1);
}

.rsvp-section form .theme-btn:hover {
	background: radial-gradient(circle, rgba(181, 140, 30, 1) 0%, rgba(227, 197, 70, 1) 100%);
}

.rsvp-section form input,
.rsvp-section form select,
.rsvp-section form textarea {
	background-color: #fffdf6;
	border: 1px solid #eee7cb;
	border-radius: 5px;
	color: #3a3a3a;
	width: 100%;
	padding: 6px 10px;
	font-size: 16px;
	line-height: 1.42857143;
}

.rsvp-section form input[type="checkbox"],
.rsvp-section form input[type="radio"] {
	width: auto;
}

.rsvp-section form textarea {
	height: 80px;
}

.rsvp-section form select {
	background-image: url(../images/select-icon.png);
	background-image: image-set(url('../images/select-icon.webp') type('image/webp'), url('../images/select-icon.png') type('image/png'));
	background-repeat: no-repeat;
	background-position: calc(100% - 15px) center;
	display: inline-block;
	appearance: none;
	cursor: pointer;
	padding-right: 30px;
}

.rsvp-section form input:focus,
.rsvp-section form select:focus,
.rsvp-section form textarea:focus {
	border-color: #b19a56;
	box-shadow: none;
	outline: 0;
}

.validate-rsvp-form #loader {
	display: none;
	margin-top: 10px;
	vertical-align: middle;
}

.validate-rsvp-form #loader i {
	font-size: 30px;
	font-size: 1.875rem;
	color: #b19a56;
	display: inline-block;
	animation: rotating linear 2s infinite;
	vertical-align: middle;
}

@keyframes rotating {
	from {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	to {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

.validate-rsvp-form label.error {
	color: red;
	margin: 5px 0 0 0;
}

.validate-rsvp-form #success,
.validate-rsvp-form #error {
	width: 100%;
	color: #fff;
	padding: 15px 10px;
	font-size: 16px;
	line-height: 1.25;
	text-align: center;
	display: none;
}

.validate-rsvp-form .success-error-message {
	margin: 15px 0 0;
}

.validate-rsvp-form #success {
	background-color: green;
	margin-bottom: 5px;
}

.validate-rsvp-form #error {
	background-color: red;
}


/*  ======================  RSVP Form Styles  ======================  */
.scroll-top {
	background-color: rgba(181, 140, 30, 1);
	border: 0;
	color: #fff;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	font-size: 22px;
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9999;
	cursor: pointer;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .25s ease, transform .25s ease;
}

.scroll-top.show {
	opacity: 1;
	transform: translateY(0);
}

.music-btn {
	background-color: rgba(181, 140, 30, 1);
	border: 0;
	color: #fff;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	font-size: 22px;
	position: fixed;
	left: 20px;
	bottom: 20px;
	z-index: 9999;
	cursor: pointer;
	padding: 12px;
}

.music-btn .music-off {
	display: block;
}

.music-btn .music-on {
	display: none;
}

.music-btn.muted .music-off {
	display: none;
}

.music-btn.muted .music-on {
	display: block;
}

/* ─── RSVP Floating Label ──────────────────────────────────────────────────── */
.rsvp-float-group {
	position: relative;
	margin-bottom: 32px;
}

.rsvp-float-input,
.rsvp-float-select {
	width: 100%;
	border: none;
	border-bottom: 1px solid rgba(0, 0, 0, 0.18);
	background: transparent;
	padding: 10px 0 6px;
	font-size: 15px;
	color: #444;
	outline: none;
	font-family: inherit;
	-webkit-appearance: none;
	appearance: none;
	border-radius: 0;
	transition: border-color 0.25s ease;
}

.rsvp-float-input:focus,
.rsvp-float-select:focus {
	border-bottom-color: #b19a56;
}

.rsvp-float-label {
	position: absolute;
	top: 10px;
	left: 0;
	color: #aaa;
	font-size: 15px;
	font-weight: normal;
	transition: top 0.2s ease, font-size 0.2s ease, color 0.2s ease, letter-spacing 0.2s ease;
	pointer-events: none;
	margin: 0;
	white-space: nowrap;
}

.rsvp-float-input:focus~.rsvp-float-label,
.rsvp-float-group.has-content .rsvp-float-label {
	top: -14px;
	font-size: 11px;
	color: #b19a56;
	letter-spacing: 0.6px;
	/*text-transform: uppercase;*/
}

.rsvp-float-bar {
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 2px;
	background: #b19a56;
	transition: width 0.3s ease;
}

.rsvp-float-input:focus~.rsvp-float-bar,
.rsvp-float-select:focus~.rsvp-float-bar {
	width: 100%;
}

/*
.rsvp-float-select-wrap {
	position: relative;
}
.rsvp-float-select-wrap::after {
	content: '▾';
	position: absolute;
	right: 4px;
	top: 8px;
	color: #aaa;
	pointer-events: none;
	font-size: 13px;
}
*/
.rsvp-required {
	color: #c0392b;
}

@media (min-width: 1280px) {
	.detail-form {
		display: flex;
		gap: 50px;
	}

	.detail-form .text-center {
		flex: 1 1 42%;
	}

	.detail-form .card {
		flex: 1 1 58%;
	}
}

.detail-form {
	padding: 0 15px;
}

.detail-form .card h3 {
	font-size: 1.5em;
}

.detail-form .btn-primary:focus,
.detail-form .btn-secondary:focus {
	box-shadow: none;
}

.progress-bar-wrapper {
	margin-bottom: 25px;
}

.progress-bar-wrapper .bg-primary-600 {
	background: radial-gradient(circle, rgba(227, 197, 70, 1) 0%, rgba(181, 140, 30, 1) 100%);
}

.progress-bar-wrapper .text-primary-600 {
	color: rgba(181, 140, 30, 1);
	font-weight: 700;
}

.detail-form .card .hover\:border-primary-300:hover {
	border-color: rgba(227, 197, 70, 1);
	background-color: #fffdf6;
}

.detail-form .card .border-primary-200 {
	border-color: #eee7cb;
}

.detail-form .card .bg-primary-50 {
	background-color: #fffdf6;
}

.detail-form .card .bg-primary-100 {
	background: rgba(0, 0, 0, .05);
}

.detail-form .card .border-primary-600 {
	border-color: rgba(181, 140, 30, 1);
}

.detail-form .card .bg-primary-600 {
	background-color: rgba(181, 140, 30, 1);
}

.detail-form .card .text-primary-600,
.detail-form .card .text-primary-800,
.detail-form .card .text-primary-700 {
	color: rgba(181, 140, 30, 1);
}

.detail-form .card .input {
	background-color: #fffdf6;
	border: 1px solid #eee7cb;
	border-radius: 5px;
	box-shadow: none;
	color: #3a3a3a;
	width: 100%;
	padding: 6px 10px;
	font-size: 16px;
	line-height: 1.42857143;
}

.detail-form .card textarea.input {
	height: 60px;
}

.MuiPopper-root {
	z-index: 99;
}

.MuiPickersSectionList-root,
.MuiInputAdornment-root {
	font-family: 'Muli', sans-serif;
	z-index: 1;
}

.MuiPickersSectionList-root span,
.MuiInputAdornment-root span {
	font-family: 'Muli', sans-serif;
}

.MuiFormControl-root .MuiPickersOutlinedInput-notchedOutline {
	background-color: #fffdf6;
	border-radius: 5px;
}

.MuiFormControl-root:hover .MuiPickersOutlinedInput-notchedOutline {
	border: 1px solid #eee7cb;
}

.MuiPickersOutlinedInput-notchedOutline {
	border: 1px solid #eee7cb;
	outline: 0;
}

.MuiFormControl-root.Mui-focused .MuiPickersOutlinedInput-notchedOutline {
	border-width: 1px;
	border-color: #b19a56 !important;
	box-shadow: none;
}

.detail-form .card .input-error {
	background-color: rgba(192, 57, 43, .05);
	border: 1px solid rgb(192, 57, 43);
}

.MuiFormControl-root .Mui-error .MuiPickersOutlinedInput-notchedOutline {
	background-color: rgba(192, 57, 43, .05);
	border: 1px solid rgb(192, 57, 43);
}

.MuiFormControl-root .Mui-error:hover .MuiPickersOutlinedInput-notchedOutline {
	border-color: rgb(192, 57, 43);
}

.card .MuiPickersSectionList-root {
	padding: 0;
}

.detail-form .card .input:focus {
	border-color: #b19a56;
	box-shadow: none;
	outline: 0;
}

.field-help-text {
	display: block;
	width: 100%;
	font-size: 12px;
	margin-top: 4px;
}

.rsvp-section form .iti__search-input {
	padding-left: 38px;
}

.form-group-highlight {
	background: linear-gradient(0deg, rgba(255, 255, 255, 1) 35%, rgba(158, 123, 28, .1) 100%);
	border: 2px solid #fff;
	border-radius: 10px;
	box-shadow: 0 0 15px rgba(0, 0, 0, .1);
	flex: 1 1 100%;
	padding: 1em;
	margin-bottom: .75em;
}

.form-group-highlight .form-group-full+.form-group-full {
	margin-top: 25px;
}

.event-attire {
	align-items: center;
	background: linear-gradient(0deg, rgba(255, 255, 255, 1) 35%, rgba(158, 123, 28, .1) 100%);
	border: 1px solid rgba(181, 140, 30, .3);
	color: #333;
	display: flex;
	font-size: 14px;
	gap: 30px;
	line-height: 1.3;
	padding: 10px 15px;
	text-align: left;
}


.event-attire .attire-title {
	background-image: url(../images/arrow-attire.png);	
	background-image: image-set(url('../images/arrow-attire.webp') type('image/webp'), url('../images/arrow-attire.png') type('image/png'));
	background-position: right center;
	background-repeat: no-repeat;
	background-size: 30px auto;
	color: rgba(181, 140, 30, 1);
	font-family: 'Great Vibes';
	font-size: 2em;
	padding-right: 50px;
	padding-top: .2em;
}

.event-attire .cta-wrapper a {
	background-color: #b58c1d;
	border-radius: 5px;
	color: #fff;
	padding: 5px 10px;
	text-decoration: none;
	white-space: nowrap;
}

.event-attire .cta-wrapper a:hover {
	background-color: #977516;
}

.event-attire .cta-wrapper a:after {
	display: none;
}

/*
.rsvp-section .form-group-highlight input {
	background-color: #fff;
}
*/

.detail-form-sidebar {
	padding: 20px 0;
}

@media screen and (min-width: 1280px) {
	.detail-form-sidebar {
		align-items: center;
		display: flex;
		max-height: calc(100vh - 176px);
		position: sticky;
		top: 88px;
	}
}

.rsvp-section .rsvp-idaho-note {
	text-align: center;
}

.rsvp-section form .iti {
	width: 100%;
}

.rsvp-section form .check-group label {
	align-items: flex-start;
	display: inline-flex;
	padding: 3px 0;
}

.rsvp-section form .check-group label>input {
	margin-top: .35em;
	margin-right: 10px;
}

@media (max-width: 1280px) {
	.reveal-btn {
		width: 175px;
		height: 175px;
	}

	.flowers {
		height: 100px;
	}

	.page-wrapper {
		padding: 50px 0;
	}

	.opened .flowers-top {
		transform: translateY(-50px);
	}

	.opened .flowers-bottom {
		transform: translateY(50px);
	}

	.navigation {
		top: 50px;
	}

	.rsvp-section .rspv-form {
		padding: 60px;
	}
}

@media (max-width: 767px) {
	.reveal-btn {
		width: 140px;
		height: 140px;
	}

	.flowers {
		display: none;
	}

	.page-wrapper {
		padding: 0;
	}

	.navigation {
		top: 0;
	}

	.save-the-date h2 {
		font-size: 4em;
	}

	.save-the-date h2 small {
		display: block;
	}

	.save-the-date .cBox {
		height: 122px;
		width: 120px;
	}

	.event-attire {
		flex-direction: column;
		gap: 15px;
		text-align: center;
	}

	.event-attire .attire-title {
		background: transparent;
		padding-right: 0;
	}

	.rsvp-section .rsvp-deadline {
		font-size: 18px;
	}

	.rsvp-section .rspv-form {
		padding: 30px 20px;
	}

	.form-group-highlight {
		padding: .5em;
	}

	.rsvp-section .form-group,
	.rsvp-section .form-group-three-comun>div {
		flex: 1 1 100%;
	}

	.rsvp-section form .theme-btn,
	.detail-form .btn-primary,
	.detail-form .btn-secondary {
		padding: 8px 15px;
	}

}