/* ==========================================================================
   variables
   ========================================================================== */

:root
{
	--max-width:			800em;
}



/* ==========================================================================
   main styles
   ========================================================================== */

html, body 					{ touch-action: pan-y; }
body.loaded 				{ height: auto; overflow: auto; }

main 						{ background: #ededed; position: relative; z-index: 2; }
.loaded main 				{ opacity: 1; }

section 					{ position: relative; max-width: var(--max-width); margin: 0 auto; }
section h2 					{ font-size: 4em; }
section div.bg 				{ position: fixed; z-index: 1; top: 0; left: 50%; transform: translateX(-50%); width: 100vw; max-width: var(--max-width); height: 100vh; }



section.s1 					{ width: 100vw; height: 300vh; overflow: hidden; z-index: 1; }

.s1 div.video-container1 	{ position: fixed; z-index: 1; top: 0; left: 0; width: 100vw; height: 100vh; }
.s1 video 					{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.s1 div.text 				{ position: fixed; top: 0; left: 0; z-index: 2; display: flex; align-items: center; justify-content: center; width: 100vw; height: 100vh; }
.s1 .text figure 			{ background: url(/wp-content/themes/mower/assets/baf/img/title-card-baf.svg) no-repeat 50% 50%; background-size: cover; width: 100%; height: 0; padding-bottom: 75%; max-width: 100vw; max-height: 100vh; position: relative; }

.s1 .text figure::before,
.s1 .text figure::after 	{ content: ''; display: block; position: absolute; background: #ededed; left: 0; width: 100%; height: calc(100vh - 100%); }
.s1 .text figure::before    { top: calc((99vh - 100%) * -1); }
.s1 .text figure::after 	{ bottom: calc((99vh - 100%) * -1); }

.s1 div.bg					{ background: rgba(0,0,0,.5); transition: opacity 1s; }
.s1 div.group 				{ transform: translateY(-50%); position: fixed; z-index: 2; top: 50%; left: 0; width: 100%; padding: 0 10%; }
.s1 h2 						{ font-family: 'blacker-pro-display', serif; line-height: 1; font-weight: 800; margin-bottom: 1em; text-align: center; color: #fff; opacity: 0; transition: transform 1s, opacity 1s; }
.s1 p 						{ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; font-size: 1.875em; line-height: 1.333; max-width: 33em; margin: 0 auto; text-align: center; color: #fff; opacity: 0; transition: transform 1s, opacity 1s; }
.s1 p em 					{ font-style: normal; font-weight: bolder; }



section.s2 					{ width: 100vw; height: 400vh; z-index: 2; opacity: 0; }
.s2 div.bg					{ background: #000; }
.s2 h2 						{ filter: blur(0); position: fixed; z-index: 2; top: 50%; left: 50%; width: 100%; max-width: 19.125em; transform: translate(-50%, -50%); color: #fff; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: bold; text-align: left; padding: 0 10%; text-indent: -0.5em; }
.s2 h2 div 					{ opacity: 0; }
.s2 h2 div:last-child 		{ margin-top: .125em; }
.s2 h3 						{ opacity: 0; filter: blur(20px); position: fixed; z-index: 2; top: 50%; left: 50%; width: 100%; max-width: 19.125em; transform: translate(-50%, -50%) scale(.75); color: #fff; font-family: 'blacker-pro-display', serif; font-size: 6em; text-align: center; padding: 0 10%; }



section.s3 					{ width: 100vw; height: 800vh; z-index: 3; opacity: 0; }
.s3 div.bg 					{ background: #ededed; }
.s3 figure 					{ position: fixed; z-index: 2; top: calc(50% + 5em); left: 0; width: 100%; transform: translateY(-50%); display: flex; flex-direction: column; justify-content: center; align-items: center; }
.s3 figcaption 				{ width: 100%; position: relative; }
.s3 figcaption h4 			{ opacity: 0; position: absolute; bottom: 0; left: 0; width: 100%; padding: 0 10%; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size: 2.5em; text-align: center; }
.s3 figure svg 				{ width: 90%; max-width: 50em; height: auto; margin-top: 1vh; }
.s3 figure svg path#heart 	{ opacity: 0; }



section.s4 					{ width: 100vw; height: 200vh; z-index: 4; opacity: 0; }
.s4 div.bg					{ background: #000; }
.s4 h2 						{ position: fixed; z-index: 2; top: 50%; left: 50%; width: 100%; transform: translate(-50%, -50%); color: #fff; font-family: 'blacker-pro-display', serif; line-height: 1.333; font-size: 3.5em; text-align: left; padding: 0 10%; }
.s4 h2 em 					{ background: rgb(236,0,140); background: linear-gradient(90deg, rgba(236,0,140,1) 0%, rgba(255,120,38,1) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-fill-color: transparent; white-space: nowrap; }



section.s5 					{ width: 100vw; height: 100vh; z-index: 5; background: #ededed; }
.s5 div.wrap 				{ position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 100%; height: 100%; }
.s5 h2 						{ position: absolute; top: 50%; transform: translateY(-50%); opacity: 0; width: 4.5em; line-height: 1.1; }
.s5 h2:first-of-type 		{ font-family: 'blacker-pro-display', Helvetica, Arial, sans-serif; font-weight: 500; left: 10%; }
.s5 h2:last-of-type 		{ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 900; right: 10%; }
.s5 h2 em 					{ background: rgb(236,0,140); background: linear-gradient(90deg, rgba(236,0,140,1) 0%, rgba(255,120,38,1) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-fill-color: transparent; }

.s5 figure.heart-brain  	{ position: absolute; top: 50%; transform: translateY(-50%); left: 0; width: 100%; height: auto; }
.s5 .heart-brain svg 		{ width: 100%; height: 100%; }



section.s6 					{ width: 100vw; min-height: 100vh; height: auto; z-index: 6; background: #ededed; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; }
.s6 figure.couple-selfie  	{ width: 100%; height: auto; position: relative; }
.s6 figcaption 				{ position: absolute; bottom: 16%; left: 0; width: 50%; padding: 0 5% 0 10%; }
.s6 h2 						{ opacity: 0; font-family: 'blacker-pro-display', serif; line-height: 1.1; font-size: 3em; margin-bottom: .5em; }
.s6 p 						{ opacity: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size: 2em; text-align: left; }


section.s7 					{ width: 100vw; min-height: 100vh; height: auto; z-index: 6; background: rgb(237,237,237); background: linear-gradient(180deg, rgba(237,237,237,1) 0%, rgba(237,237,237,1) 5%, rgba(255,200,63,1) 5%, rgba(237,237,237,1) 100%); display: flex; flex-direction: column; justify-content: flex-start; align-items: center; }
.s7 figure.magnet, .s7 figure.magnetic { width: 50%; max-width: 800px; position: relative; z-index: 2; }
.s7 .magnet img 			{ width: 100%; max-width: 100%; height: auto; }
.s7 figure.magnetic 		{ text-align: center; z-index: 1; }
.s7 .magnetic svg 			{ opacity: 0; width: 90%; position: relative; top: -28px; }
/*@-webkit-keyframes dash		{ to { stroke-dashoffset: 1000; } }*/
@keyframes dash				{ to { stroke-dashoffset: 1000; } }
.s7 .magnetic svg line 		{ -webkit-animation: dash 30s linear infinite; stroke-dasharray: 8; }
.s7 .magnetic figcaption	{ position: absolute; top: 0; left: 0; width: 100%; }
.s7 .magnetic figcaption h2	{ width: 100%; font-family: 'blacker-pro-display', serif; line-height: 4; transform: translateY(96px); text-align: center; }
.s7 figure.line1 			{ width: 4px; height: 500px; position: relative; top: -28px; }
.s7 .line1 svg				{ width: 100%; height: 100%; }
.s7 h2.art 					{ opacity: 0; font-family: 'blacker-pro-display', serif; line-height: 1.1; text-align: center; padding: .4375em 0; }
.s7 h2.art span:nth-child(1) { color: #eb0d8c; }
.s7 h2.art span:nth-child(2) { color: #53b167; }
.s7 h2.art span:nth-child(3) { color: #f37124; }
.s7 figure.line2 			{ width: 4px; height: 500px; }
.s7 .line2 svg				{ width: 100%; height: 100%; }


section.s9 					{ width: 100vw; height: 1000vh; z-index: 6; background: #ededed; }
.s9 div.video-container2 	{ background: #ededed; z-index: 6; width: 100vw; height: 100vh; overflow: hidden; transition: opacity .25s; }
.s9.ended div.video-container2 { opacity: 0; transition: opacity 2s; }
.s9 video 					{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

section.s10 				{ width: 100vw; height: auto; z-index: 6; background: rgb(237,237,237); display: flex; flex-direction: column; justify-content: flex-start; align-items: center; }
.s10 figure.lines-from-beaker { width: 48%; height: auto; margin-bottom: -1%; }
.s10 .lines-from-beaker svg	{ width: 100%; height: 100%; }
.s10 ul.header 				{ opacity: 0; width: 80%; display: flex; justify-content: space-between; }
.s10 .header li 			{ display: flex; flex-direction: column; justify-content: center; align-items: center; width: 33.33333%; }
.s10 .header li figure 		{ width: 50%; min-width: 70px; margin-bottom: 1rem; }
.s10 .header li figure svg 	{ width: 100%; height: auto; }
.s10 .header li h2 			{ font-size: 4.75vw; font-family: 'blacker-pro-display', serif; color: #000; }
.s10 .header li:nth-child(1) em { color: #eb0d8c; }
.s10 .header li:nth-child(2) em { color: #53b167; }
.s10 .header li:nth-child(3) em { color: #f37124; }
.s10 p 						{ opacity: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size: 2em; text-align: center; width: 80%; max-width: 36em; margin: 2em 0; }
.s10 ul.verticals 			{ opacity: 1; width: 80%; display: flex; justify-content: space-between; }
.s10 .verticals li 			{ display: flex; flex-direction: column; justify-content: center; align-items: center; width: 33.33333%; }
.s10 ul.verticals ul 		{ opacity: 1; width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; }
.s10 ul.verticals ul li 	{ opacity: 0; width: 100%; padding: 5% 5% 10%; }
.s10 ul.verticals li figure	{ width: 33.333333%; min-width: 4em; max-width: 10em; }
.s10 ul.verticals li figure svg text { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }

.s10 .verticals li figure 	{ width: 50%; min-width: 100px; }
.s10 .verticals li figure svg { width: 100%; height: auto; }


section.s11 				{ width: 100vw; height: auto; z-index: 6; background: rgb(237,237,237); display: flex; flex-direction: column; justify-content: flex-start; align-items: center; }
.s11 h3 					{ opacity: 0; transform: translateY(2em); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; font-size: 2em; text-align: center; margin: 2em 0 0; }
.s11 p 						{ opacity: 0; transform: translateY(2em); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size: 2em; text-align: center; width: 80%; max-width: 36em; margin: 0 0 2em; }
.s11 h2 					{ opacity: 0; transform: translateY(2em); font-family: 'blacker-pro-display', serif; line-height: 1.1; text-align: center; margin-bottom: .25em; }
.s11 figure 				{ width: 33.333333%; height: auto; }
.s11 figure svg 			{ width: 100%; height: 100%; }

section.ptf 				{ width: 100vw; height: auto; z-index: 6; background: #ededed; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; }
.ptf figure  				{ width: 50%; height: auto; position: relative; margin: 2em auto; }
.ptf h4 					{ opacity: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; font-size: 1.75em; text-align: center; line-height: 1.1; margin: 0 auto .25em; width: 80%; max-width: 30em; }
.ptf p 						{ opacity: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size: 1.75em; text-align: center;  margin: 0 auto; width: 80%; max-width: 30em; }

section.s18 				{ width: 100vw; height: auto; z-index: 6; background: #ededed; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; }
.s18 figure.couple  		{ width: 50%; height: auto; position: relative; margin: 2em auto 0; }
.s18 .couple figcaption 	{ position: absolute; width: 110%; top: 18%; left: 10%; }
.s18 .couple figcaption div	{ width: 100%; display: flex; }
.s18 .couple figcaption h2 	{ opacity: 0; transform: translateX(-1em); font-family: 'blacker-pro-display', serif; font-size: 3em; line-height: 1.1; margin-bottom: 84%; }
.s18 .couple figcaption h3 	{ opacity: 0; transform: translateX(2em); font-family: 'blacker-pro-display', serif; font-size: 4em; line-height: 1.1; margin-right: .25em; }
.s18 .couple figcaption p 	{ opacity: 0; transform: translateX(-3em); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 500; font-size: 1.5em; line-height: 1.1; text-align: left; }
.s18 figure.lasso  			{ width: 80%; padding-right: 4%; height: auto; position: relative; margin: 0 auto; }
.s18 .lasso figcaption 		{ opacity: 0; font-family: 'blacker-pro-display', serif; line-height: 1.1; font-size: 3em; position: absolute; width: 100%; top: 70%; left: 50%; text-align: center; transform: translate(-50%, -50%); }
.s18 .lasso + img 			{ position: relative; margin: 0 auto; width: 14vw; max-width: 200px; height: auto; top: -8vw; }
.s18 p.contact 				{ opacity: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size: 1.75em; line-height: 1.2; text-align: center; margin: 0 auto 2em; width: 80%; max-width: 24em; text-decoration: none; }
.s18 p.contact a:last-of-type { text-decoration: underline; }
.s18 p.footnote 			{ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size: .875em; line-height: 1.2; text-align: center; margin: 0 auto .5em; width: 80%; }

section.pad 				{ width: 100vw; height: 25vh; z-index: 6; background: #ededed; }


div.progress 				{ position: fixed; z-index: 100; left: 2vw; bottom: 4vw; width: 1px; height: 50vh; display: flex; justify-content: flex-start; background-color: #fff; }
div.progress::before,
div.progress::after 		{ content: ''; display: block; width: 5px; height: 5px; border-radius: 100%; position: absolute; left: -2px; }
div.progress::before 		{ background: #ec008c;  top: -2px; }
div.progress::after 		{ background: #fff; bottom: -2px; }
.progress span 				{ display: block; width: 100%; height: 0%; background-color: #ec008c; }
.progress.complete::after 	{ background: #ec008c; }

@keyframes bounce 			{ 0% { transform: translateY(0) } 50% { transform: translateY(-1em) } 100% { transform: translateY(0) } }

figure.arrow 				{ position: fixed; z-index: 100; left: calc(50% - 1em); bottom: 4vw; width: 2em; }
figure.arrow img 			{ width: 100%; height: auto; animation: bounce 1s infinite; }
figure.arrow figcaption 	{ position: absolute; top: -3em; left: 50%; white-space: nowrap; transform: translateX(-50%); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; font-size: .75em; line-height: 1; letter-spacing: .075em; color: #ec008c; }



/* ==========================================================================
   media queries
   ========================================================================== */

@media only screen and (max-width: 80em) /* below 1280px */
{
	.s5 h2 					{ font-size: 3.25em; }
	
	.s6 h2 					{ font-size: 2.5em; }
	.s6 p 					{ font-size: 1.75em; }
	
}

@media only screen and (max-width: 63em), only screen and (max-height: 42em) /* below 1008px wide or 672px tall */
{
	.s3 figcaption h4 		{ font-size: 2em; }
	.s3 figure svg 			{ max-width: 36em; }

	.s5 h2 					{ font-size: 3em; }
	.s5 h2:first-of-type 	{ left: 7.5%; }
	.s5 h2:last-of-type 	{ right: 7.5%; }
	
	.s6 h2 					{ font-size: 2.25em; }
	.s6 p 					{ font-size: 1.5em; }
	
	.s18 .lasso figcaption	{ font-size: 2.5em; }
}

@media only screen and (max-width: 48em) /* below 768px */
{
	section h2 				{ font-size: 3em; }
	
	.s1 p 					{ font-size: 1.75em; }
	
	.s2 h3 					{ font-size: 4em; }
	
	.s3 figcaption h4 		{ font-size: 1.75em; }
	
	.s4 h2 					{ font-size: 3em; }
	
	.s5 h2 					{ font-size: 3em; left: 0; right: 0; padding: 0 10%; width: 100%; text-align: center; }
	.s5 h2:first-of-type 	{ left: 0; top: 25%; }
	.s5 h2:last-of-type 	{ right: 0; top: auto; bottom: 20%; transform: translateY(50%); }
	
	.s6 h2 					{ font-size: 2em; }
	.s6 p 					{ font-size: 1.25em; }
	
	.s18 .couple figcaption h2 { font-size: 2.75em; margin-bottom: 84%; }
	.s18 .couple figcaption h3 { font-size: 3.5em; }
	.s18 .couple figcaption p { font-size: 1.375em; }
	.s18 .lasso figcaption	{ font-size: 2em; }
	.s18 p.footnote 		{ font-size: .75em; }
}

/* vertical considerations - short/squat screens */
@media only screen and (max-height: 42em), only screen and (min-width: 37.5em) /* below 1280px */
{
	.s5 h2 					{ font-size: 3.25em; }
	
	.s6 h2 					{ font-size: 2.5em; }
	.s6 p 					{ font-size: 1.75em; }
	
}

@media only screen and (max-width: 37.5em) /* below 600px */
{
	section h2 				{ font-size: 2em; }
	
	.s1 p 					{ font-size: 1.5em; }
	
	.s2 h3 					{ font-size: 3em; }
	
	.s3 figcaption h4  		{ font-size: 1.5em; }
	
	.s4 h2 					{ font-size: 2em; }
	.s5 h2 					{ font-size: 2em; }
	
	.s6 figure.couple-selfie { position: absolute; left: 0; top: 50%; width: 100%; transform: translateY(-50%); }
	.s6 figcaption 			{ bottom: 0; width: 58%; }
	.s6 h2 					{ font-size: 1.125em; }
	.s6 p 					{ font-size: .875em; }
	
	.s10 p					{ font-size: 1.5em; }
	
	.ptf h4 				{ font-size: 1.25em; }
	.ptf p 					{ font-size: 1.25em; }
	
	.s18 .couple figcaption h2 { font-size: 2.5em; margin-bottom: 84%; }
	.s18 .couple figcaption h3 { font-size: 3em; }
	.s18 .couple figcaption p { font-size: 1.125em; }
	.s18 .lasso figcaption	{ font-size: 1.25em; }
	.s18 .lasso + img + p	{ font-size: 1.125em; }
	
	
	div.progress 			{ opacity: 0; }
}

@media only screen and (max-width: 30em) /* below 480px */
{
	section 				{ padding-left: 5vw; padding-right: 5vw; }
	.s1 p 					{ font-size: 1.125em; }
	.s4 h2 					{ font-size: 1.5em; }
	.s5 h2 					{ font-size: 1.5em; }
	
	.s6 h2 					{ font-size: 1em; }
	.s6 p 					{ font-size: .75em; }
	
	.s10 p					{ font-size: 1.125em; }
	
	.s11 h3					{ font-size: 1.5em; }
	.s11 p					{ font-size: 1.125em; }
	
	.s11 h2 				{ }
	
	.s18 figure.couple 		{ width: 60%; }
	.s18 .couple figcaption	{ top: 17%; width: 120%; }
	.s18 .couple figcaption h2 { font-size: 1.5em; margin-bottom: 72%; }
	.s18 .couple figcaption h3 { font-size: 1.5em; }
	.s18 .couple figcaption p { font-size: .875em; }
	.s18 .lasso figcaption	{ top: 80%; }
	.s18 p.footnote 		{ font-size: .625em; }
}