/* ==========================================================================
   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;
	overflow: hidden;
}

.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(https://www.mower.com/wp-content/themes/mower/assets/img/title-card-ff.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 .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%;
}

.s18 img.round {
	border-radius: 50%;
}

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;
	}
}