/* -----  basic columns ----- */
.columns {
	display:flex;
	flex-flow:column nowrap;
	gap:0;
}

@media screen and (min-width:768px) {
	.columns {
		--col-gap-padding: 40px;

		flex-flow:row nowrap;
	}

   .columns .col  {
      flex: 0 0 50%;
   }

   .section-party .columns .col:nth-child(odd),
   .section-about .columns .col:nth-child(odd) {
		padding-right:var(--col-gap-padding);
   }

   .section-party .columns .col:nth-child(even),
   .section-about .columns .col:nth-child(even) {
		padding-left:var(--col-gap-padding);
		border-left: var(--gd-bb-neon) solid 1px;
   }

   .details .columns {
		--col-gap-padding: 20px;
	}
}

@media screen and (min-width:992px) {
	.columns {
		--col-gap-padding: 60px;
	}

	
}


/* ----- end columns ----- */


.site-main > [class*="section"] {
	z-index:1;
	position:relative;
}

.site-main > [class*="section"] + [class*="section"] {
	margin-top:150px;
}






/* ----------------------------------------------------------------- SPECIFIC PAGES  ----------------------------------------------------------------- */


/* ----- BACKGROUND ----- */
.bg-ever-after {
	left:50%;
	top:0;
	transform:translateX(-50%);
	position:fixed;
	width:120vw;
	height:calc(100vh + 100px);
	z-index:0;
	background-color:#000;
	background-image:url("../images/general/hero-ever-after-filter.jpg?v=3");
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center center;
	transition:all 2s ease-out;
	filter:brightness(100%);
}


.far-away .bg-ever-after {
	width:100vw;
	height:calc(100vh + 60px);
	opacity:0.5;
	filter: contrast(110%);
}

body.loading .bg-ever-after {
	width:100vw;
	height:calc(100vh + 60px);
	filter:brightness(10%);
}



@supports (height: 100dvh) {
	body.loading .bg-ever-after, 
	.far-away .bg-ever-after  {
    	height:100dvh;
  }   
}

/* -------------- BREAK POINT -------------- */
@media screen and (min-height: 1400px), (min-width: 1400px) {
	.bg-ever-after {
		background-image:url("../images/general/hero-ever-after-filter-xl.jpg?v=3");
	}
}




/* ----- SECTION CONTENT ----- */
.section-bg {
	--section-radius:10px;

	background-color:var(--gd-bb-pink);
}

section:not(.section-party, .section-about, .section-donate) .section-bg {
	border-radius:var(--section-radius);
}


.section-hero {
	width:100%;
	position:relative;	
}

.section-content {
	padding: 80px var(--gd-site-padding-horizontal);
}

/* ----- HOME ----- */
.section-home {
	height:100vh;
	min-height:450px;
}

@supports (height: 100svh) {
	.section-home {
    	height:100svh;
  }   
}


.logo-ever-after {
	position:absolute;
	width:100%;
	top:45%;
	left:50%;
	transform:translate(-50%, -50%);
	max-width:500px;
	transition:all var(--gd-transition-timing);
}


/* ----- TAG LINE ----- */

.tag-line {
	position:absolute;
	width:100%;
	left:0;
	bottom:50px;
	padding:0 5%;
	color:var(--gd-font-color-ltr);
	font-family:var(--gd-font-family-sans-serif);
	font-size:16px;
	line-height:1.2;
	text-align:center;
	text-shadow: 
		0 0 20px rgb(0 0 0 / 100%),
		/* 0 0 20px rgb(0 0 0 / 100%), */
		/* 0 0 30px rgb(0 0 0 / 100%), */
    	0 0 40px rgb(0 0 0 / 100%);
}


.tag-line .years {
	font-size:26px;
}


.tag-line .scroll-down {
	color:var(--gd-button-color-default);
	margin-top:20px;
	display:inline-block;
	font-size:36px;
}

.tag-line .scroll-down:hover,
.tag-line .scroll-down:focus-visible {
	color:var(--gd-button-color-hover);
}


/* ----- THE PARTY ----- */

.section-party [class*="gd-heading"],
.section-wear [class*="gd-heading"],
.section-auction [class*="gd-heading"],
.section-about [class*="heading"]  {
	text-align:center;
}




.section-party .anchor-offset {
	position:relative;
	height:0;
	top:150px;
}

.curve-header,
.curve-footer {
	width:100%;
	display:flex;
	flex-flow:row nowrap;
	height:50px;
	overflow:hidden;
}

.curve-header > div,
.curve-footer > div {
	height:100%;
	background-color:var(--gd-bb-pink);
	width:50%;
}


.curve-header .curve-left {
	border-top-right-radius:500px;
}

.curve-header .curve-right {
	border-top-left-radius:500px;
}

.curve-footer .curve-left {
	border-bottom-right-radius:500px;
}

.curve-footer .curve-right {
	border-bottom-left-radius:500px;
}


.section-party .gd-button {
	min-width:180px;
}

.section-party .section-bg {
	border-bottom-left-radius: var(--section-radius);
	border-bottom-right-radius: var(--section-radius);
}

.illumination {
	display:block;
	float:left;
	margin:-10px 5px 3px 0;
	border:#000 solid 1px;
	border-color:var(--gd-bb-burgundy);
	min-width:45px;
	min-height:55px;
	padding:7px 10px 0;
	line-height:45px;
	text-align:center;
	font-size:32px;
	background-image:url("../images/general/illumination-color.png");
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center center;
	color:var(--gd-bb-neon);

}


.section-party .book {
	width:75%;
	max-width:600px;
	margin:0 auto 20px;
	position:relative;
	z-index:1;
}

.section-party .page-1 {
	position:absolute;
	width:50%;
	max-width:200px;
	bottom:30%;
	left:85%;
	z-index:1;
}

.section-party .page-2 {
	position:absolute;
	width:35%;
	max-width:200px;
	top:60%;
	right:90%;
	z-index:0;
}

.section-party .page-3 {
	position:absolute;
	width:40%;
	max-width:220px;
	left:75%;
	top:70%;
	z-index:0;
}

.section-party .apple {
	width:50%;
	max-width:220px;
	margin:60px auto 0;
}

.section-party .details {
	text-align:center;
	margin:40px 0;
}

.section-party .details  .logo-inline {
	width:100%;
	max-width:450px;
	margin:0 auto;
	filter: brightness(0);
}

.section-party .details > span {
	display:block;
}


.section-party .details .columns  p {
	margin:0;
}



/* ----- WHAT TO WEAR ----- */
.section-wear .painting-1 {
	width:75%;
	max-width:450px;
	margin:0 0 20px;
}


.section-wear .painting-2 {
	position:absolute;
	z-index:1;
	left:90%;
	top:200px;
	width:75%;
	max-width:500px;
}

/* ------ BANNER ----- */
.section-style .container-width,
.section-vibes .container-width {
	position:relative;
}

.section-style .section-bg,
.section-vibes .section-bg {
	background-color:transparent;
	overflow:hidden;
}

/* ----- AUCTION ----- */
.site-main  > [class*="section"] + .section-ornament {
	position:relative;
	z-index:2;
	margin:0;
}

.site-main > .section-ornament + [class*="section"] {
	margin-top:0;
}

.section-ornament .container-width {
	height:150px;
	position:relative;
}

.section-ornament .crown {
	position:absolute;
	right:calc(50% - 75px);
	width:150px;
	top:20px;
}


.section-auction .treasure {
	width:75%;
	max-width:500px;
	margin-left:auto;
}



/* ----- SPONSORS ----- */
.section-sponsors {
	text-align:center;
}

/*
.section-sponsors .sponsors-container {
	background-color:#fff;
	border-radius:4px;
	padding:40px 20px 150px 20px;
}
*/

.section-sponsors .section-content {
	padding: 80px var(--gd-site-padding-horizontal) var(--gd-site-padding-horizontal) var(--gd-site-padding-horizontal);
}

.section-sponsors .statue {
	width:75%;
	max-width:600px;
	margin:0 auto;
}



ul.sponsors {
	list-style:none;
	margin:0 0 20px;
	padding:0;
	text-align:center;
}

ul.sponsors li {
	display:inline-block;
	width:50%;
	max-width:220px;
	padding:10px;
}

ul.sponsors li a {
	display:block;
	width:100%;
}

ul.sponsors.presenting li,
ul.sponsors.impact li {
	width:66.66%;
	max-width:250px;
}

ul.sponsors li.xl {
	width:100%;
	max-width:500px;
}



/* ----- COMMITTEE ----- */
.section-ornament .butterfly-top {
	position:absolute;
	width:25%;
	max-width:100px;
	left:45%;
}

.section-ornament .butterfly-left {
	position:absolute;
	width:30%;
	max-width:150px;
	left:13%;
	bottom:0;
}

.section-committee .butterfly-right {
	position:absolute;
	width:40%;
	top:100px;
	max-width:250px;
	left:90%;	
}

.section-committee .petal-left {
	position:absolute;
	width:25%;
	max-width:100px;
	right:95%;
	
}


.section-committee {
	text-align:center;
}

.section-committee .flowers {
	width:50%;
	max-width:400px;
	border-top-left-radius:var(--section-radius);
}

.committee-list {
	list-style:none;
	margin:0 auto 20px;
	padding:0;
	column-gap:30px;
}

.committee-list.inline-cols-2 {
	max-width:500px;
	columns: 2 150px;
}

.committee-list.inline-cols-4 {
	columns: 4 200px;
}


/* ---- ABOUT ----- */
.section-about .section-hero {
	overflow:hidden;
}

.section-about .disco-ball {
	width:60%;
	max-width:300px;
	margin:0 auto;
}





.section-about .logo-boobyball  {
	margin:0 auto;
	width:70px;
}


.section-about .logo-rethink {
	margin:0 auto;
	width:150px;
}



.section-about .contact-us {
	margin-top:60px;
	text-align:center;
}


.section-about .columns {
	gap:40px 0;
}


/* ----- DONATE ----- */
.site-main > [class*="section"] + .section-donate {
	text-align:center;
	margin:0;
}


.section-donate .section-content {
	padding:40px var(--gd-site-padding-horizontal);
}


.section-donate .section-bg {
	border-radius:0;
	background-color:#feb9df;
}


.section-donate .logo-bb-rethink {
	width:80%;
	max-width:300px;
	margin:40px auto;
}


/* -------------------------------- BREAK POINT ------------------------------------ */
@media screen and (min-width:768px) {
	/* ----- BACKGROUND ----- */
	.logo-ever-after {
		max-width:none;
		min-width:500px;
		width:50%;
	}


	/* ----- TAG LINE ----- */

	.tag-line {
		font-size:18px;
	}

	.tag-line .years {
		font-size:34px;
	}

	.tag-line .year-2 {
		font-size:42px;
	}

	.tag-line .year-5 {
		font-size:42px;
	}



	/* ----- THE PARTY ----- */
	.curve-header,
	.curve-footer {
		height:80px;
	}

	.section-party .details {
		text-align:center;
	}



	.section-party .details .columns {
		max-width:600px;
		margin:0 auto;
		text-align:left;
	}

	.section-party .details .columns .col:nth-child(even) {
		text-align:right;
		border-left:0;
	}

	.section-party .page-1 {
		left:80%;
	}


	.section-party .page-2 {
		right:75%;
	}

	.section-party .page-3 {
		left:72%;
	}

	/* ------ BANNER ----- */
	.section-vibes .section-bg {
		width:29%;
		right:0;
		top:-115px;
		position:absolute;
	}

	.section-style .section-bg {
		width:29%;
		left:0;
		top:-115px;
		position:absolute;
	}

	/* ----- WHAT TO WEAR ----- */

	.section-wear .section-bg {
		margin-left:auto;
		width:66%;
	}


	/* ----- AUCTION ----- */

	.section-auction .section-bg {
		width:66%;
	}



	/* ----- SPONSORS ----- */
	.section-ornament .crown {
		right:calc(50% - 100px);
		width:200px;
	}


	ul.sponsors li {
		width:33.33%;
	}

	/* ----- COMMITEE ----- */
	.section-committee .section-bg {
		margin:0 auto;
		width:66%;
	}

	.section-ornament .butterfly-right {
		left:60%
	}

	/* ----- ABOUT ----- */
	.section-about .logo-boobyball,
	.section-about .logo-rethink {
		height:100px;
	}

	.section-about .logo-rethink {
		padding-top:20px;
	}


}

/* -------------------------------- BREAK POINT ------------------------------------ */
@media screen and (min-width:992px) {
	/* ----- PADDING ----- */
	.section-wear .container-width,
	.section-auction  .container-width,
	.section-sponsors .container-width,
	.section-committee .container-width  {
		padding:0 var(--gd-site-padding-horizontal);
	}


	/* ----- HOME ----- */
	.section-home  {
		min-height:550px;
	}

	/* ----- BANNER ----- */
	.section-vibes .section-bg {
		width:25%;
		right:var(--gd-site-padding-horizontal);
	}

	.section-style .section-bg {
		width:25%;
		left:var(--gd-site-padding-horizontal);
	}


	/* ----- WHAT TO WEAR ----- */
	.section-wear .section-bg,
	.section-auction .section-bg,
	.section-committee .section-bg {
		width:70%;
	}


	

	/* ----- SPONSORS ----- */
	ul.sponsors li {
		width:25%;
	}

}

@media screen and (min-height:600px) {
	.logo-ever-after {
		top:calc(45% + 50px);
	}
}

/* -------------------------------- BREAK POINT ------------------------------------ */
@media screen and (min-width:1200px) {
	/* ----- HOME ----- */
	.section-home {
		min-height:600px;
	}

}



















/* ------------ LOADER --------------- */

/* loader */
.loader {
   position:fixed;
   inset:0;
   height:100vh;
   z-index:9999;
   perspective:2000px;
   perspective-origin:right center;
   pointer-events:none;
}

@supports (height: 100dvh) {
	.loader  {
    	height:100dvh;
  }   
}


.loader-wrapper {
   width:100%;
   height:100%;
   padding:40px 0;
   min-width:280px;
   min-height:300px;
   background-color:#ff4caf;
   display:flex;
   flex-direction:column;
   align-items:center;
   justify-content:center;
   transform-origin:left center;
   transform:rotateY(0deg);

	/* Explicitly list only the properties that should animate.
		transition:all causes border-image and pointer-events to
		also transition, which can produce a shake on the first frame. */
	transition-property: transform;
	transition-duration: 1s;
	transition-timing-function: linear;

	/* Pre-promote to a GPU compositing layer so there's no
		promotion flash when the 3D rotation begins. */
	will-change: transform;
	pointer-events:all;
	border:transparent solid 100px;
	border-image-repeat: repeat;
	border-image-slice: 25%;
	border-image-source:url("../images/general/book-border.png");
	background-image:url("../images/general/book-cover-bg.jpg");
	background-repeat:repeat;
	background-size:300px;
	background-position:center center;
	background-origin: border-box;
}

.loader-group {
	width:100%;
}

.loader-wrapper .bb-presents {
	width:60%;
	max-width:120px;
	margin:0 auto 20px;
}

.loader-wrapper .bb-presents svg {
	display:block;
	width:100%;
}

body:not(.loading) .loader-wrapper {
   transform:rotateY(-90deg);
   pointer-events:none;
}

.loader-bar-track {
   width:100%;
   max-width:150px;
   margin: 20px auto;
   height:3px;
   background-color:rgb(255 255 255 / 40%);
   border-radius:999px;
   overflow:hidden;
}

.loader-bar {
   height:100%;
   width:0%;
   background-color:#fff;
   border-radius:999px;
   transition:width 0.4s ease;
}


/* book cover shadow */
.book-cover-shadow {
	z-index:9998;
	position:fixed;
	inset:0;
	height:calc(100vh + 100px);
	background:linear-gradient(to right, rgb(0 0 0 / 70%) 80%, transparent 100%);
	transform-origin:left center;
	transform:scaleX(1);
	opacity:1;
	will-change: transform, opacity;
	transition:transform 0.8s ease-in, opacity 0.8s ease-in;
	transition-delay:0.1s;
}

body:not(.loading) .book-cover-shadow {
	transform:scaleX(0);
	opacity:0;
}


/* -------------- BREAK POINT -------------- */
@media screen and (min-width:768px) {
	.book-cover-shadow {
		transition:transform 1s ease-in, opacity 1s ease-in;
		transition-delay:0.4s;
	}
}