@import url('https://fonts.googleapis.com/css2?family=Amarante&family=Spectral:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');



.ff26{
	height: 100vh; 
	width: 100vw; 
		background: url(ff26/red-BG.jpg) repeat;
		background-color: #ee4e2b;
	position: absolute; 
	top: 0; 
	left: 0;
}

.ff26 h2, .ff26 h3, .ff26 h4, .ff26 h5{
	 font-family: "Amarante", serif;
  font-weight: 400;
  font-style: normal;
    color: #771b2a;  /* Fallback: assume this color ON TOP of image */
   background: url(ff26/maroon-texture-bg.jpg) no-repeat;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}


.ff26 a.btn{
	background: ;
}

.ff26 h2{
	font-weight: 700;
	margin-top: 20px;
	letter-spacing: -.02em;
	font-size: 68px;
}

.next h2{
	font-size: 58px;
}

.ff26 h3{
	font-size: 36px;
	line-height: 1.2em;
}


.ff26 p{
	  font-family: "Spectral", serif;
  font-weight: 700;
  font-style: normal;
  font-size: 22px;
	 color: #771b2a;  /* Fallback: assume this color ON TOP of image */
   background: url(ff26/maroon-texture-bg.jpg) no-repeat;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}



.ff26 .wrapper{
	z-index: 2;
	height: 100vh; 
	width: 100vw; 
	/*overflow: scroll;*/
	position: relative;
	background: 
	url(ff26/cloud.png) no-repeat, 
	url(ff26/cloud-2.png) no-repeat, url(ff26/burst.png) no-repeat;
	background-position: top right, bottom left, center;
	background-size: 60.7% auto, 60.7% auto, 50% auto;
}

.ff26 .wrapper:before{
	position: fixed;
	content: "";
	height: calc(100% - 246px);
	width: 69px;
	background: url(ff26/border-l.png);
	left: 0;
	top: 123px;
}

.ff26 .wrapper:after{
	position: fixed;
	content: "";
	height: calc(100% - 246px);
	width: 69px;
	background: url(ff26/border-r.png);
	right: 0;
	top: 123px;
}

.ff26 .frame-top{
	position: fixed;
	z-index: 10;
	width: 100vw;
	height: 123px;
	top: 0;
	left: 0;
	background: 
	url(ff26/corner-tl.png) no-repeat,
	url(ff26/corner-tr.png) no-repeat,
	url(ff26/border-t.png) repeat-x;
	background-position: top left, top right, top center;
}

.ff26 .frame-bottom{
	position: fixed;
	z-index: 10;
	width: 100vw;
	height: 123px;
	bottom: 0;
	left: 0;
	background: 
	url(ff26/corner-bl.png) no-repeat,
	url(ff26/corner-br.png) no-repeat,
	url(ff26/border-b.png) repeat-x;

	background-position: bottom left , bottom right, bottom 0px center;
}

.ff26 .hand-left{
	position: fixed;
	content: "";
	aspect-ratio: 680/694;
	height: 74.592522%;
	/*width: 33%;*/
	background: url(ff26/hand-left.png);
	background-size: 100%;
	/*left: -7.75%;*/
	right: 73%;
	/*top: 15.723873%;*/
	top: 17%;
	z-index: 3;
	animation: float 6s ease-in-out infinite;
}

.ff26 .hand-right{
	position: fixed;
	content: "";
	aspect-ratio: 727/702;
	/*width: 34%;*/
	height: 72.291467%;
	left: 72%;
	background: url(ff26/hand-right.png);
	background-size: 100%;
	/*right: -6.6%;*/
	top: 15%;

	z-index: 1;
	animation: float2 6s ease-in-out infinite;
}

@keyframes float {
	0% {
		transform: translatey(0%);
	}
	50% {
		transform: translatey(-5%);
	}
	100% {
		transform: translatey(0%);
	}
}

@keyframes float2 {
	0% {
		transform: translatey(0%);
	}
	50% {
		transform: translatey(5%);
	}
	100% {
		transform: translatey(0%);
	}
}

.ff26 .wrapper .content{
	position: absolute;
	width: calc(100vw - 138px);
	height: calc(100vh - 138px);
	top: 69px;
	left: 69px;
	overflow-x: hidden;
	overflow-y: scroll;
	z-index: 3;
}

.ff26 .wrapper .content:has(.thanks){
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
}



.ff-banner{
	height: 100%; 
	width: 100%;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
}


.ff-banner .card{
	margin: 0 auto;
	position: relative;
	aspect-ratio: 495/834;
	height: 79.961649%;
	perspective: 500px;
}

.ff-banner .card .con{
	 position: absolute;
  width: 100%;
  height: 100%;
  /*box-shadow: 0 0 15px rgba(0,0,0,0.1);*/

  transition: transform 1s;
  transform-style: preserve-3d;
}

.ff-banner .card:hover .con{
  transform: rotateY( 180deg ) ;
  transition: transform 0.5s;
}

.ff-banner .card .con .front,
.ff-banner .card .con .back {
  position: absolute;
  height: 100%;
  width: 100%;
  background: url(ff26/card.png);
  background-size: cover;
  backface-visibility: hidden;
}

.ff-banner .card .con .back {
  background: url(ff26/back.png);
  background-size: cover;
  transform: rotateY( 180deg );
}



.date{padding: 100px;}

.illo.cater{padding: 50px 100px; margin: 0 auto; max-width: 1000px;}

.next{padding: 100px;}

.illo.brew{padding: 50px 100px; margin: 0 auto; max-width: 850px;}

.illo.gin{padding: 50px 100px; margin: 0 auto; max-width: 750px;}

.rsvp{padding: 200px 100px 100px;}
.thanks {padding: 0 100px;}

.cards{
	max-width: 1000px;
	margin: 0 auto;
	padding: 30px;
	box-sizing: border-box;
	border: 8px solid #771b2a;
	border-radius: 1.5em;
	background-color: #d9d2b6;
	background-image: url(ff26/red.png);
	-webkit-box-shadow: -10px 10px 0px 5px #771b2a; 
box-shadow: -10px 10px 0px 5px #771b2a;
}

.skinny .cards{
	max-width: 850px;
}

.skinny p span{font-weight: 900;}

.cards .wrap{
	padding: 50px;
	box-sizing: border-box;
	border: 8px solid #771b2a;
	border-radius: 30px;
	corner-shape: notch;
	text-align: center;
	background-image: url(ff26/texture-beidge.png);
}

.cards .wrap:last-child { margin-bottom:0; }

.date .cards .wrap{
	background-color: #a6cbcb;
}

.rsvp .cards .wrap{
	background: url(ff26/fire-tl.png) no-repeat, url(ff26/fire-tr.png) no-repeat, url(ff26/texture-beidge.png) repeat;
	background-position: top -2.5% left -2.5%, top -2.5% right -2.5%, center;
	background-size: 25% auto, 25% auto, 100%;
	background-color: #a6cbcb;
}

.thanks .cards .wrap{
	background: url(ff26/fire-tl.png) no-repeat, url(ff26/fire-tr.png) no-repeat, url(ff26/texture-beidge.png) repeat;
	background-position: top -2.5% left -2.5%, top -2.5% right -2.5%, center;
	background-size: 15% auto, 15% auto, 100%;
	background-color: #a6cbcb;
}

.cards .wrap .copy{
	display: flex;
	flex-wrap: wrap;
	margin: 0 -2rem;
	background: url(ff26/cross-bar.png) no-repeat;
	background-size: 40%;
	background-position: center center;

}

.cards .wrap .copy .wrapy{
	width: 50%;
	box-sizing: border-box;
	padding: 3rem 2rem 2rem;
	height: 270px;

}


.date h2{
	font-size: 120px;
	line-height: 1.1em;
}

.rsvp .sun{
	width: 400px;
	margin: -280px auto 10px;
}

.thanks .sun{
	width: 300px;
	margin: -230px auto 15px;
}

.rsvp h2{
	font-size: 150px;
	line-height: 1.1em;
	margin: 0;
}

.rsvp p{
	font-size: 40px;
	margin: 0 0 50px;
	
}

.date p{
	font-size: 36px;
	line-height: 1.4em;
	margin: 0 0 50px;
}

.date a{
	display: block;
	width: 220px;
	margin: 0 auto;
	transition: all ease .3s;
}

.date a:hover{
	transform: translatey(-10px);
	transition: all ease .3s;
}

.next .cards .wrap{
	background-color: #a5c97e;
}

.orn{
	aspect-ratio: 381/102;
	/*width: 350px;*/
	height: 50px;
	margin: 0 auto 10px;
	background: url(ff26/ornament.png);
	background-size: 100%;
}

.ff26 .button--primary{
	font-size: 0;
	background: url(ff26/submit.png);
	aspect-ratio: 1363/500;
	width: 250px;
	padding: 0;
	margin: 0;
	border-radius: none;
	background-size: 100%;
}

.ff26 .webform-submission-form .form-item:has(.required):before{color: #ee4e2b;}
.ff26 .webform-submission-form input[type="text"], 
.ff26 .webform-submission-form input[type="email"]{
	border-radius: 0;
	color: #771b2a;
	background: #d9d2b6;
	border: 5px solid #771b2a;
}

.ff26 .webform-submission-form input[type="text"]::placeholder,
 .ff26 .webform-submission-form input[type="email"]::placeholder{
  color: #771b2a;
  font-family: "Spectral", serif;
  font-weight: 700;
  font-style: normal;
  font-weight: 600;
  opacity: .75;
}

.js-webform-type-checkbox{display: flex;}

.js-webform-type-checkbox label{height: 50px; display: flex; flex-direction: column; justify-content: center; padding-left: 15px;
color: #781b2a;
 font-family: "Spectral", serif;
  font-weight: 700;
  font-style: normal;
  font-size: 24px;
}

.ff26 input[type="checkbox"]{
	 appearance: none;
  background-color: #d9d2b6;
  margin: 0;
  font: inherit;
  color: #771b2a;
	height: 50px;
	width: 50px;
  border: 5px solid #771b2a;
  transform: translateY(-0.075em);
  position: relative;
}

.ff26 input[type="checkbox"]::before {
  content: "";
  position: absolute;
  width: 40px;
  height: 40px;
  top: 0px;
  left: 0px;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  background: url(ff26/check.png);
  background-color: #ee4e2b;
  background-size: 80%;
  background-position: center;
  background-repeat: no-repeat;
}

.ff26 input[type="checkbox"]:checked::before {
  transform: scale(1);
}

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

	.ff26 .hand-left {height: 68%;}
	.ff26 .hand-right {height: 63%; left: 67%;}


}

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

	.ff26 .hand-left {height: 62%; right: 60%;}
	.ff26 .hand-right {height: 59%; left: 61%;}


}


@media screen and (max-width: 1300px){
	.date{padding: 80px;}
	.illo.cater{padding: 50px 80px;}
	.next{padding: 80px;}
	.illo.brew{padding: 50px 80px;}
	.rsvp{padding: 160px 80px 80px;}
	.thanks {padding: 0 80px;}

	.ff26 .frame-top{height: 89.13043478px; background-size: 89.13043478px, 89.13043478px, auto 50px;}
	.ff26 .frame-bottom{height: 89.13043478px; background-size: 89.13043478px, 89.13043478px, auto 50px;}
	.ff26 .wrapper:before{height: calc(100% - 178.26086957px); width: 50px; background-size: 50px auto; top: 89.13043478px;}
	.ff26 .wrapper:after{height: calc(100% - 178.26086957px); width: 50px; background-size: 50px auto; top: 89.13043478px;}
	.ff26 .wrapper .content{width: calc(100vw - 89.13043478px); height: calc(100vh - 89.13043478px); top: 50px; left: 50px;}
}

@media screen and (max-width: 1200px){
	.cards .wrap .copy{background: unset;}
	.cards .wrap .copy .wrapy{height: unset; padding: 2rem;}
}


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

	.ff26 .frame-top{height: 53.47826087px; background-size: 53.47826087px, 53.47826087px, auto 30px;}
	.ff26 .frame-bottom{height: 53.47826087px; background-size: 53.47826087px, 53.47826087px, auto 30px;}
	.ff26 .wrapper:before{height: calc(100% - 106.95652174px); width: 30px; background-size: 30px auto; top: 53.47826087px;}
	.ff26 .wrapper:after{height: calc(100% - 106.95652174px); width: 30px; background-size: 30px auto; top: 53.47826087px;}

	.ff26 .wrapper .content{width: calc(100vw - 60px); height: calc(100vh - 60px); top: 30px; left: 30px;}

	.ff-banner{display: block; padding: 60px 0 0; height: unset; width: unset;}

	.ff-banner .card {height: unset; width: 90%; max-width: 500px;}

	.cards .wrap .copy{display: block; margin: 0;}
	.cards .wrap .copy .wrapy{padding: 0; width: 100%;}


	.ff26 .wrapper{background-size: 90% auto, 90% auto, 80% auto;}
	.ff26 .hand-left{aspect-ratio: 689/388; background: url(ff26/hand-mob-left.png); width: 55%; height: unset; background-size: 100%; right: unset; right: unset; left: -16%; top: 8%;}
	.ff26 .hand-right{aspect-ratio: 989/687; background: url(ff26/hand-mob-right.png); height: unset; width: 55%; top: unset; bottom: 7%; right: -13%; background-size: 100%;}

	.date{padding: 60px 30px;}
	.illo.cater{padding: 50px 30px;}
	.next{padding: 60px 30px;}
	.illo.brew{padding: 60px 30px;}
	.rsvp{padding: 120px 30px 60px;}
	.thanks {padding: 0 30px;}

	.rsvp .sun {
    width: 300px;
    margin: -230px auto 10px;}

    .cards { border-width: 5px; box-shadow: -5px 5px 0px 5px #771b2a; padding: 15px;}
    .date .cards .wrap{padding: 30px; border-width: 5px; border-radius: 15px}

    .orn {height: 40px; margin: 0 auto;}

    .date h2 {font-size: 90px;}
    .date p{font-size: 30px; margin: 0 0 30px;}
    .date a{width: 180px;}


    .ff26 h2{font-size: 48px;}




}


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

	.thanks .sun {width: 200px; margin: -130px auto 0px;}
	

	/*.ff-banner .card {width: 500px; height: unset; padding: 0 10px;}*/


}

@media screen and (max-width: 500px){
	.ff26 .frame-top{height: 35.65217391px; background-size: 35.65217391px, 35.65217391px, auto 20px;}
	.ff26 .frame-bottom{height: 35.65217391px; background-size: 35.65217391px, 35.65217391px, auto 20px;}
		.ff26 .wrapper:before,
		.ff26 .wrapper:after{height: calc(100% - 71.30434783px); width: 20px; background-size: 20px auto; top: 35.65217391px;}
			.ff26 .wrapper .content{height: calc(100vh - 40px); top: 20px;}


		.ff26 h2{font-size: 40px;}

		.cards { border-width: 3px; box-shadow: none; padding: 10px;}
    .cards .wrap{padding: 20px; border-width: 3px; border-radius: 10px}

		.date{padding: 50px 0;}

		.illo.cater,
		.illo.brew,
		.illo.gin{padding: 0;}

		.thanks {padding: 0 0px;}

		.next{padding: 50px 0;}

		.rsvp{padding: 90px 0 50px}

		.orn{height: 30px;}
		.date h2 {font-size: 60px; margin: 0 0 15px;}

		.rsvp .sun{width: 200px; margin: -130px auto 0px;}
		.rsvp h2 {font-size: 80px;}
		.rsvp p{font-size: 24px; margin: 0 0 30px;}
		    .date a {width: 150px;}

		.ff26 .button--primary {width: 170px}







}