@import url('https://cdn.fonts.net/kit/35ab45b0-6404-4131-8235-3509191554ec/35ab45b0-6404-4131-8235-3509191554ec.css');

body { font-family:inherit !important; }/* fonts */
.powerfulls-hero {
	height:calc(24em + 33vw);
	background:#CBE6F9;
	position: relative;
	overflow:hidden;
}
.powerfulls-hero h1 {
	font-family: 'ColbyCondensedBlack';
	position:absolute;
	left:50%;
	top: 18%;
	margin:0;
	transform:translate(-50%,-50%);
	font-size: min(calc(1.5em + 3vw), 4.5em);
	color:transparent;
	filter: drop-shadow(0.05em 0.05em 0.5em #142d5499);
	text-transform:uppercase;
}


h2 {
	margin-bottom:2rem;
}

#powerfulls-hero-bg-1 {
	position:absolute;
	left:0; top:-2%;
	width:100%; 
	height:100%;
	background: url(./hero-bg.jpg) center / cover no-repeat;
	pointer-events: none;
}
#powerfulls-hero-bg-2 {
	background: url(./hero-mid.svg) center / cover no-repeat;
	position: absolute;
	left:0;
	top: 26%;
	width: 100%;
	height: 50vw;
	min-height: 70%;
	pointer-events: none;
	box-shadow:0 51vw 0 50vw #142d54;
}

.pf-nutrigrain-logo {
	font-size: 71%;
	width: 3em;
	height:2em;
	white-space: normal;
	padding: 0.2em;
	margin: -0.3em auto;
	background: url(/content/dam/NorthAmerica/nutrigrain/images/site/nutrigrain-logo.png) center / contain no-repeat;
	transform-origin:50% 90%;
}
.pf-powerfulls-logo {
	margin:auto;
	text-align:right;
	background:url(powerfulls-logo-lt.png) center / contain no-repeat;
	transform-origin:50% 10%;
}

.pf-powerfulls-logo span.pf-logo-lg  {
	padding: 0.25em 0.25em 0 0;
	transform: rotate(-4deg);
}
.pf-powerfulls-logo span.pf-logo-sm {
	font-size: 52%;
	white-space: normal;
	display:inline-block;
	width:6em;
	transform: rotate(-3deg);
	line-height: 0.8;
	position: relative;
	top: -0.345em;
}


.pf-bite-wrapper {
	position:absolute;
	top:0;
	left:50%;
	transform:translate(-50%,0);
	height:100%;
	width:100%;
	max-width:75em;
}
.pf-bite {
	font-size:min(calc(0.5em + 1vw), 1.5em);
	position:absolute; 
	left:50%;
	top:50%; 
}
.pf-bite::before {
	content:'';
	display: block;
	width:6em; height:6em;
	margin:-3em;
	background:url(./strawb2.png) center / contain no-repeat;
}
/* img assignment */
.pf-bite-1::before {
	font-size:60%;
}
.pf-bite-2::before {
	background:url(./strawb1.png) center / contain no-repeat;
}
.pf-bite-3::before  {
	background:url(./choc1.png) center / contain no-repeat;
}
.pf-bite-5::before  {
	background:url(./choc3.png) center / contain no-repeat;
}
.pf-bite-4::before  {
	font-size: 150%;
	background: url(./choc2.png) center / contain no-repeat;
	transform: rotate(200deg);
}
.pf-bite-6::before  {
	font-size:200%;
	background:url(./choc2.png) center / contain no-repeat;
	transform: rotate(106deg);
}
#pf-hero-chips::before  {
	background:url(./chips.png) center / contain no-repeat;
}
#pf-hero-oats::before  {
	background:url(./oats.png) center / contain no-repeat;
	font-size: 85%;
}
/* coordinates */
.pf-bite-1 {
	top: 9%;
	left: 14%;
	transform-origin:200% 50%;
}
.pf-bite-2 {
	top: 70%;
	left: 4%;
	transform-origin:200% 50%;
}
.pf-bite-3 {
	top: 14%;
	left: -9%;
	transform-origin:200% 50%;
}
.pf-bite-5 {
	top: 30%;
	left: 97%;
	transform-origin:-200% 50%;
}
.pf-bite-4 {
	top: 97%;
	left: 96%;
	transform-origin:-10em 50%;
}
.pf-bite-6 {
	top: 105%;
	left: 96%;
	margin-left: -7em;
	transform-origin:-15em 50%;
}
#pf-hero-oats {
	top: 74%;
	left: 22%;
}
#pf-hero-chips {
	top: 20%;
	left: 100%;
}


.pf-hero-new {
	/* opacity:0; */
	transform-origin:100% 0%;
	/* transform:scale(0.8) translate(1em, 0); */
	/* transition:transform 0.25s, opacity 0.25s; */
}
.section--in-viewport .pf-hero-new span { 
	transform-origin:66% 33%;
	animation:heartbeat_new 2.5s infinite cubic-bezier(1,.19,.43,.83);
}
@keyframes heartbeat_new {
	0% { transform:scale(1); }
	10% { transform:scale(1.1); }
	35% { transform:scale(1); }
	50% { transform:scale(1.07); }
	85% { transform:scale(1); }
}




.pf-packs {
	position:absolute;
	left:50%;
	top: 65%;
	width: calc(30% + 10em);
	transform:translate(-50%,-50%);
	max-width: 36em;
}
.pf-packs::after {
	content:'';
	display:block;
	padding-top:100%;
}
.pf-packs::before {
	content:'';
	display:block;
	padding-top: 55%;
	position:absolute;
	width: 128%;
	margin: 33% -9%;
	background: radial-gradient(closest-side, #000f, #0000);
}
.pf-packs img {
	position:absolute; 
	width:100%; 
	top:0;
}
#pf-hero-pack1 {
	transform: scale(0.8);
	transform-origin: 50% 80%;
}
#pf-hero-pack2 {
	transform: scale(0.8);
	transform-origin: 50% 80%;
}



@media ( min-width:48em) {
	.powerfulls-hero {
		/* height:calc(32em + 33vw); */
		max-height: 58em;
		font-size:87.5%;
	}
	#powerfulls-hero-bg-2 {
		background-position:center top;
		background-size:cover;
		min-height:0;
		top: 50%;
		margin-top: -17vw;
	}
}





.pf-beep {
	position:absolute;
	left:100%;
	top:0;
	font-size: min(4vw, 1.5em);
	transform:rotate(-50deg);
	transform-origin: 0 100%;
	margin:-1em 0.5em;
	background:currentcolor;
	width:1.5em;
	height:0.2em;
	border-radius:0.1em;
}

.pf-beep::before,
.pf-beep::after {
	content:'';
	display:block;
	position:absolute; 
	top:0;
	background:currentcolor;
	transform-origin:-1em 0.1em ;
	transform:rotate(30deg);
	width:100%; height:100%; 
	border-radius:0.1em;
	opacity:0.6;
}
.pf-beep::after {
	transform:rotate(-30deg);
}

#pf-hero-beep1 {
	left:112%;
	top:5%;
	visibility:hidden;
}
#pf-hero-beep2 {
	transform: rotate(-225deg);
	top: 86%;
	left: 10%;
	color: #000;
}

.pf-benefits-row {
	display:flex;
	flex-wrap:wrap;
	justify-content:space-around;
	max-width:20em;
	margin:auto;
	align-items: center;
}

.powerfulls-benefits {
	margin: -7vw 0 0;
	overflow:hidden;
	position: relative;
}
.powerfulls-benefits img {
	width:100%; 
}
.powerfulls-benefits::before {
	pointer-events:none;
	background: #00224B;
	/* background: red; */
	content:'';
	display:block;
	height: 22vw;
	width: 140vw;
	margin: 1vw -33vw -14vw;
	border-radius: 100% 100%;
	/* position: absolute; */
}

::before {}

.powerfulls-benefits section {
	background:#00224B;
	padding: calc(2em + 0%) 5%;
	position: relative;
	color:#fff;
}
.pf-benefit {
	position: relative;
	flex-basis:45%;
}
#pf-benefit1 {
	flex-basis:75%;
	margin-bottom: 10%;
}
#pf-benefit1::after,
#pf-benefit2::before,
#pf-benefit3::after {
	content:'';
	display:block;
	padding-top: 86%;
	margin:6% 0;
}
#pf-benefit1::after {
	background: url(./choc1.png) top right / 67% auto no-repeat,
				url(./choc4.png) bottom left/ 58% auto no-repeat;
}
#pf-benefit2::before {
	background: url(./choc2.png) center / 70% auto no-repeat;
	transform: rotate(135deg);
}
#pf-benefit3::after {
	background: url(./choc3.png) center / 90% auto no-repeat
}


#pf-benefit1 .pf-beep {
	transform: rotate(-140deg);
	left: 21%;
	top: 53%;
}
#pf-benefit2 .pf-beep {
	transform: rotate(-40deg);
	left: 69%;
	top: 13%;
}
#pf-benefit3 .pf-beep {
	transform: rotate(-20deg);
	left: 94%;
	top: 60%;
}
#pf-benefit1-text {
	transform-origin:50% 170%;
}
#pf-benefit2-text {
	transform-origin:50% -170%;
}
#pf-benefit3-text {
	transform-origin:50% 170%;
}
#benefits-trigger {
	position: absolute;
	top: 30vw;
}
.button-wrapper {
	text-align:center;
}

.powerfulls-benefits .button-cta {
	font-size:1.25em;
	margin:2em 0;
}



@media ( min-width:48em) {
	#benefits-trigger {
		top: 10vw;
	}
	.pf-benefits-row {
		max-width:58em;
		/* margin-bottom: 2em; */
	}
	.pf-benefit {
		flex-basis: 23%;
	}
	#pf-benefit1 {
		flex-basis: 30%;
		margin: 0;
	}
	.powerfulls-benefits .button-cta {
		font-size:1.25em;
		margin: 2em 0 4em;
	}
}


.powerfulls-hanger::before {
	pointer-events:none;
	content:'';
	display:block;
	height: 25vw;
	background:url(./swoosh.svg) center top / 140% auto no-repeat;
	width:100%;
}


.powerfulls-hanger {
	margin-top: -25vw;
	overflow: hidden;
	position:relative;
	text-align:center;
	position:relative;
	padding-bottom: calc(12vw + 2em);
	pointer-events: none;
}
.powerfulls-hanger section {
	background:#00224B;
	box-shadow:0 24em 0 #00224B;
	color:#fff;
	pointer-events: auto;
}
.powerfulls-hanger img {
	margin:auto;
	max-width:75em;
	width: 100%;
}
.powerfulls-hanger .content_wrapper {
	padding:2em 0 2em;
}

.powerfulls-hanger p {
	max-width:48em;
	margin:2rem auto;
}
.powerfulls-hanger p a {
	text-decoration:underline
}

.powerfulls-hanger .pf-funky-p {
	font-family: "ColbyCondensedBlack";
	font-size:1.5em;
	max-width:32rem;
}

#hanger-trigger {
	position:absolute;
	top:20vw; 
}

@media (min-width:48em) {
	#hanger-trigger {
		top:6em; 
	}
	.powerfulls-hanger {
		margin-top: -18vw;
	}
	.powerfulls-hanger::before {
		background: url(./swoosh.svg) center top 5vw / 100% auto no-repeat;
	}
}












.powerfulls-lifestyle {
	position: relative;
	margin: -25vw 0 0;
	overflow: hidden;
	font-weight: normal;
	font-family: "ColbyCondensedBlack";
	line-height: 1;
}
.powerfulls-lifestyle section {
	background:#000C24;
	color:#fff;
	box-shadow:0 12em 0 0 #000C24;
	padding: calc(2em + 4vw) 0 calc(4em + 6vw);
	position: relative;
}
.powerfulls-lifestyle-card {
	display:block;
	max-width: 20em;
	margin:2em auto;
	border-radius:1em;
	overflow:hidden;
	position:relative;
}
.powerfulls-lifestyle::before {
	pointer-events:none;
	content:'';
	display:block;
	height:25vw;
	width:150vw;
	margin:0 -5vw ;
	border-radius:0 0 100% 100%;
	position: relative;
	box-shadow:0 50vw 0 50vw #000C24;
	/* #002d5d */
}

.powerfulls-lifestyle-overlay {
	padding: 7% 0 0 59%;
	position:absolute;
	left:0;
	top:0;
	font-size:1.66em;
	filter:drop-shadow(0.05em 0.05em 0.09em #0009);
}

.powerfulls-lifestyle-overlay img {
	max-width:none;
	width: 185%;
	margin-left: -100%;
	margin-bottom: 5%; 
}

.powerfulls-lifestyle-head {
	font-size: 1.4em;
	max-width: 21rem;
	margin:auto;
	text-align:center;
	transform-origin:10em 50%;
}
.powerfulls-lifestyle-head img {
	width: 23rem;
	margin: 0 0 0 -0.1em;
	max-width: none;
}
@media (min-width:48em) {
	.powerfulls-lifestyle-head {
		display:flex;
		justify-content:center;
		align-items:center;
		max-width:none;
		text-align: left;
		gap:2rem; 
		margin:0 auto;
		max-width:36em;
		font-size:min(2.33vw, 1.66em);
	}
	.powerfulls-lifestyle-head img {
		width:12em;
	}
	.powerfulls-lifestyle-row {
		display:flex;
		justify-content:center;
		gap:2em;
		padding: 0 1em;
	}
	.powerfulls-lifestyle-card {
		max-width: 24em;
	} 
	.powerfulls-lifestyle-overlay {
		font-size:min(3vw, 2em);
	}
	#lifestyle-trigger2 {
		position:absolute;
		margin-top:15%;
	}
	#lifestyle-trigger3 {
		position:absolute;
		margin-top:30%;
	}
} 

[id*="trigger"] {
	height:0;
	overflow:hidden;
}


#reviews-trigger1 {
	position:relative;
	top:10vw;
}
#reviews-trigger2 {
	position:relative;
	top:10vw;
}

.powerfulls-reviews {
	position:relative;
	overflow: hidden;
	margin-top: -25vw;
	padding-bottom:calc(6vw + 2em);
	pointer-events: none;
}
.powerfulls-reviews-cta {
	text-align:center;
}

.powerfulls-reviews section {
	background:#CBE6F9;
	padding: 1em 0 4em;
	position: relative;
	box-shadow:0 24em 0 0 #CBE6F9;
	pointer-events: auto;
}
.powerfulls-reviews::before {
	pointer-events:none;
	content:'';
	display:block;
	height:25vw;
	width:150vw;
	margin:0 -5vw ;
	border-radius:0 0 100% 100%;
	position: relative;
	box-shadow:0 50vw 0 50vw #CBE6F9;
	/* #002d5d */
}

.powerfulls-reviews-stars img {
	display:inline-block;
	width:2em;
}
.powerfulls-reviews-card {
	display:block;
	max-width: 24em;
	margin:1em auto;
	color:#002d5d;
	background:#FFFFFF;
	overflow:hidden;
	border:1px solid #707070;
	border-radius:2em;
	max-width: 24em;
	margin:1em auto;
}
.powerfulls-reviews-description {
	padding:1em 2em;
	text-align:center;
}
@media (min-width:48em) {
	

	.powerfulls-reviews-card {
		max-width: 24em;
		margin:1em 0;
		flex-basis:50%;
	}
	.powerfulls-reviews-row {
		display:flex;
		justify-content:center;
		gap:2em;
		padding: 0 1em;
	}
} 







.button-cta {
	position:relative;
	z-index:2;
}
.powerfulls-benefits .button-cta:focus,
.powerfulls-hanger .button-cta:focus {
	outline-color:#92d9f8
}
.powerfulls-locator {
	overflow:hidden;
	margin-top: -12vw;
}

.powerfulls-reviews-stars {
	display:block;
}

.powerfulls-locator section {
	background: #CBE6F9;
	/* box-shadow:0 12em 0 0 #000C24; */
	padding-bottom: max(5vw, 10vh);
	position: relative;
}
.powerfulls-locator::before {
	pointer-events:none;
	content:'';
	background: #CBE6F9;
	display:block;
	height:25vw;
	width: 125vw;
	margin: 0vw -23vw -17vw;
	border-radius: 100% 100%;
	position: relative;
}

.pf-locator-wrapper {
	min-height:24em;
	background:#fff;
	border-radius:1em;
	padding:1em;
}

@media (min-width:48em) {
	
}