/* DEFAULT TAGS */

figure.element-interactive{margin:0;padding:0}

#body {
	overflow: hidden;
	overflow-x: hidden;
	color: #041f4a;
	font-family: "Display Sans", sans;
}

#section-1 p, #section-2 p, #section-3 p, #section-footer p {
	font-family: "Display Sans", sans;
}

h1, #section-1 h1, #section-2 h1, #section-3 h1, 
h2, #section-1 h2, #section-2 h2, #section-3 h2, 
h3, #section-1 h3, #section-2 h3, #section-3 h3,
h4, #section-1 h4, #section-2 h4, #section-3 h4,
h5, #section-1 h5, #section-2 h5, #section-3 h5 {
	display: inline-block;
	font-family: 'Guardian Egyptian Web', serif;
}
h1, #section-1 h1, #section-2 h1, #section-3 h1 {
	font-weight: 200;
	font-size: 55px;
}

h2, #section-1 h2, #section-2 h2, #section-3 h2 {
	font-weight: 200;
	font-size: 28px;
}

li, slide-box li {
	position: relative;
	list-style: none;
	font-family: "Display Sans", sans;
}

li::before {
	position: absolute;
	left: -15px;
	top: 6px;
	display: inline-block;
	content: '';
	border-radius: 0.375rem;
	height: 0.75rem;
	width: 0.75rem;
	margin-right: 0.5rem;
	background-color: #041f4a;
}

/* SECTION 1: SKY & CLOUDS */
#section-1 {
	position: relative;
	padding-top: 30px;
	padding-bottom: 50px;
	overflow: hidden;
	background: #7ab8e7 url(../images/sky-bg.png) repeat-x top left;
}

#section-1 .container {
	position: relative;
	z-index: 10;
	max-width: 640px;
}

#section-1 h1 {
	position: relative;
	z-index: 2;
	color: #ffffff;
}

#section-1 h1 span {
	line-height: 1.15;
	background-color: #ffe500;
	color: #000000;
}

.row-title .col {
	position: relative;
	font-family: "Display Sans", sans;
}

.graphic-bird {
	position: absolute; 
	z-index: 2;
	top: 75px;
	left: calc(50% - 465px);
}

.graphic-bird img {
	width: 230px;
}

.row-badging {
	padding-top: 20px;
}

.row-badging .col-6:first-child .inner {
	padding-bottom: 8px;
	border-top: 1px solid #121212;
	border-bottom: 1px solid #121212;
}

.row-badging .col-6:first-child .inner p {
	margin-bottom: 12px;
	font-family: "Display Sans", sans;
}

#section-1 .row-share {
	margin-top: 20px;
}

.row-share .col-4:first-child {
	align-self: flex-start;
}

.row-share .share-icon {
	display: inline-block;
}

.row-share .share-icon a {
	display: block;
	width: 32px;
	height: 32px;
	line-height: 10px;
	font-size: 0;
	border: 1px solid #ffffff;
	border-radius: 16px;
}

.row-share .share-icon a:hover {
	background-color: #041f4a;
	border-color: #041f4a;
}

.row-share .share-icon a:hover svg {
	fill: #ffffff;
}

/*
.row-share .share-icon-facebook a {

	background: url("../images/facebook.svg") no-repeat center center;
	background-size: 80%	
}

.row-share .share-icon-twitter a {
	background: url("../images/twitter.svg") no-repeat center center;
	background-size: 80%	
}

.row-share .share-icon-email a {
	background: url("../images/email.svg") no-repeat center center;
	background-size: 80%	
}
*/

.box-quote-fill {
	display: none;
	float: left;
}

.row-rethink {
	position: relative;
}

.row-rethink-a {
	padding-top: 16px;
}

.row-rethink-b .inner {
	padding-left: 106px;
}

.row-rethink h2 {
	margin-bottom: 10px;
}

.row-rethink a {
	color: #ffffff;
	text-decoration: underline;
}

.box-quote {
	position: absolute;
	top: 3px;
	left: -103px;
	width: 206px;
	padding: 9px 12px;
	background: #f1f8fc url(../images/box-quote-mark.png) no-repeat top left;
	background-position: 12px 12px;
	line-height: 24px;
	color: #000000;
	font-family: 'Guardian Egyptian Web', serif;
	font-weight: 200;
	font-size: 20px;
}

.box-quote p {
	text-indent: 30px;
	margin-bottom: 0;
	font-family: 'Guardian Egyptian Web', serif;
}
.box-quote cite {
	color: #00b2ff;
	font-style: italic;
	display: block;
	font-family: 'Guardian Egyptian Web', serif;
}

.box-quote::after {
	position: absolute;
	left: calc(50% - 14px);
	display: block;
	content: ' ';
	width: 27px;
	height: 38px;
	background: url("../images/box-quote-talk-bubble.png") no-repeat center center;
}


/*.graphic .graphic-bee {
	transition: opacity 5s ease-out;
}*/

.graphic-bee {
	position: absolute;
	z-index: 5;
	opacity: 0;
	left: calc(50% + 320px);
	top: 800px;
	transition: all 1.5s ease-out;
}

.graphic-bee img {
	position: absolute;
	left: 0;
	transform: translateX(150px);
	transition: all 1.5s ease-out;
}

.graphic-bee.appear__right {
	opacity: 1;
}

.graphic-bee.appear__right img {
	transform: translateX(0px);
}

.clouds {
	width: 100%;
	height: 100vh;
	overflow: hidden;
	position: absolute;
	z-index: 1;
	top: 57px;
}

.clouds .cloud {
	position: absolute; 
	/*opacity: 0;*/
	transition: transform 3s ease-out;
}

.clouds .cloud img {
	position: absolute;
	opacity: 0;
	transition: opacity 2s ease-in;
}

.cloud-trigger {
	margin:0; padding: 0;
	height: 1; width: 0;
}

.clouds .cloud-1 {
	top: 170px;
	left: calc(50% - 900px);
}
.cloud-trigger__1 {
	top: 170px;
	left: calc(50% - 900px);
}

.clouds .cloud-2 {
	top: 350px;
	right: calc(50% - 650px);
}

.cloud-trigger__2 {
	top: 350px;
	right: calc(50% - 650px);
}

.clouds .cloud-3 {
	top: 600px;
	left: calc(50% - 765px);
}

.cloud-trigger__3 {
	top: 600px;
	left: calc(50% - 765px);
}

.clouds .cloud-4 {
	top: 700px;
	left: calc(50% - 515px);
}

.cloud-trigger__4 {
	top: 700px;
	left: calc(50% - 515px);
}

.clouds .cloud-5 {
	top: 780px;
	right: calc(50% - 630px);
}

.cloud-trigger__5 {
	top: 780px;
	right: calc(50% - 630px);
}

.clouds .cloud-6 {
	top: 970px;
	right: calc(50% - 965px);
}

.cloud-trigger__6 {
	top: 970px;
	right: calc(50% - 965px);
}

.clouds .cloud-7 {
	top: 1075px;
	left: calc(50% - 900px);
}

.cloud-trigger__7 {
	top: 1075px;
	left: calc(50% - 900px);
}

.clouds .cloud-1 img,
.clouds .cloud-3 img,
.clouds .cloud-4 img,
.clouds .cloud-7 img {
	left: -25px;
}

.clouds .cloud-2 img,
.clouds .cloud-5 img,
.clouds .cloud-6 img {
	right: -25px;
}

.appear__left {
	transform: translateX(25px);

}

.appear__right {
	transform: translateX(-25px);
}

.clouds .cloud.appear__left img {
	opacity: .5;
}
.clouds .cloud.appear__right img {
	opacity: .5;
}

/* SECTION 2: FARM & DIRT */
#section-2 {
	position: relative;
	/*background-color: #7ab8e7*/
	background: #7ab8e7 url("../images/soil-fill-bg.png") repeat-x bottom center;
}

/*
#section-2 .soil-fill {
	position: absolute;
	bottom: 0;
	z-index: 1;
	width: 100%;
	height: 200px;
	background-color: #bd6e37;
}
*/

#section-2 .mobile-gap-filler {
	display: none;
	position: absolute;
	width: 100%;
	height: 60px;
	background-color: #bd6e37;
}

.farm-animation-stack {
	position: relative;
	z-index: 2;
	width: 100%;
	/*background-color: #7ab8e7;*/
}

.farm-animation-stack .stack-image {
	position: absolute;
	top: 0;
	width: 100%;
	opacity: 0;
	transition: all .4s ease-in-out;
    -moz-transition: opacity .4s ease-in-out;
    -webkit-transition: opacity .4s ease-in-out;
	
}

.farm-animation-stack .base {
	position: relative;
	z-index: 1;
	opacity: 1;
}

.farm-animation-stack .stack-image img {
	width: 100%;
}

.farm-animation-stack .arrow {
	z-index: 9;
	transform: translateY(-20px); 
	transition: all .5s ease-in;
	/*transition-delay: 1.5s;*/
}

.farm-animation-stack .arrow-down {
	width: 5%;
	left: 50%;
	top: 75%;
}

.farm-animation-stack .arrow.visible {
	transform: translateY(0); 
}

.farm-animation-stack .cow {
	z-index: 9;
}

.farm-animation-stack .cover {
	z-index: 8;
	transform: scale(0, 0);
}

.farm-animation-stack .cover.visible {
	transform: scale(1, 1);
}

.farm-animation-stack .cover-1 {
	width: 18%;
	left: 2%;
	top: 50%;
	transition: all .5s ease;
	transition-delay: .2s;
}

.farm-animation-stack .cover-2 {
	width: 16.5%;
	left: 21%;
	top: 52%;
	transition: all .3s ease;
	transition-delay: .3s;
}

.farm-animation-stack .cover-3 {
	width: 23%;
	left: 40%;
	top: 50%;
	transition: all .3s ease;
}

.farm-animation-stack .cover-4 {
	width: 12%;
	right: 11%;
	top: 52%;
	transition: all .2s ease;
	transition-delay: .5s;
}

.farm-animation-stack .cover-5 {
	width: 3%;
	right: 0;
	top: 52%;
	transition: all .6s ease;
}

.farm-animation-stack .roots {
	z-index: 7;
}

.farm-animation-stack .birds {
	z-index: 1;
}

.farm-animation-stack .bees {
	z-index: 9;
	transform: translate(0px);
	transition: all .3s ease;
}

.farm-animation-stack .bee-1 {
	width: 3%;
	left: 48%;
	top: 33%;
}

.farm-animation-stack .bee-2 {
	width: 5%;
	left: 85%;
	top: 23%;
}

.farm-animation-stack .bees.bee-2.visible {
	transform: translate(-20px);
}

.farm-animation-stack .bees.bee-1.visible {
	transform: translate(20px);
}

.farm-animation-stack .plant {
	z-index: 5;
}

.farm-animation-stack .grub {
	z-index: 5;
}

.farm-animation-stack .worm {	z-index: 4;}

.farm-animation-stack .worm-curl {
	width: 4%;
	left: 48%;
	top: 61%;
	transform: translate(10px, 5px);
	transition: all .3s ease;
	transition-delay: .3s;
}

.farm-animation-stack .worm-flat {
	width: 8%;
	left: 18%;
	top: 62%;
	transform: translate(-5px, 15px);
	transition: all .2s ease;
}

.farm-animation-stack .worm.worm-flat.visible {
	transform: translate(0px);
}

.farm-animation-stack .worm.worm-curl.visible {
	transform: translate(0px);
}

.farm-animation-stack .soil {
	z-index: 2;
	transform: translateY(0px);
	transition: all .2s ease;
}

.farm-animation-stack .soil.visible {
	transform: translateY(-12px);
}

.farm-animation-stack .bees.visible,
.farm-animation-stack .arrow.visible,
.farm-animation-stack .cow.visible,
.farm-animation-stack .cover.visible,
.farm-animation-stack .roots.visible,
.farm-animation-stack .birds.visible,
.farm-animation-stack .plant.visible,
.farm-animation-stack .worm.visible,
.farm-animation-stack .grub.visible,
.farm-animation-stack .soil.visible {
	opacity: 1;
}

.slide-box {
	display: table;
	position: relative;
	margin-left: 40px;
	padding-bottom: 40vh;
	top: -550px;
	z-index: 1;
	width: 40%;
	opacity: 1;
	transition: opacity .4s ease-in-out;
    -moz-transition: opacity .4s ease-in-out;
    -webkit-transition: opacity .4s ease-in-out;
}

.slide-box-6.visible,
.slide-box-5.visible,
.slide-box-4.visible,
.slide-box-quote-3.visible,
.slide-box-3.visible,
.slide-box-quote-2.visible,
.slide-box-2.visible,
.slide-box-1.visible,
.slide-box-intro.visible {
	opacity: 1;
}

.slide-box .slide-box-inner {
	background-color: #ffffff;
}

.slide-box .inner {
	padding: 22px 25px;
}

.slide-box h3 {
	font-weight: 200;
	font-size: 28px;
	
}

.slide-box h3 span {
	background-color: #ffe500;
}

.slide-box h4 {
	font-weight: 500;
	font-size: 20px;
}
	
.slide-box .slide-num {
	display: table-cell;
	width: 15%;
	text-align: center;
	background-color: #ffe500; 
	font-family: 'Guardian Egyptian Web', serif;
	font-size: 65px;
	font-weight: 200;
}

.slide-box .slide-content {
	display: table-cell;
	width: 85%;
	vertical-align: top;
	padding-top: 6px;
}

.slide-box .slide-content ul {
	padding-left: 15px;
}

.slide-box.slide-box-quote .slide-box-inner {
	background: #ffffff url(../images/box-quote-mark.png) no-repeat top left;
	background-position: 25px 27px;
	line-height: 24px;
	color: #000000;
	font-family: 'Guardian Egyptian Web', serif;
	font-weight: 200;
	font-size: 20px;
}

#section-2 .slide-box.slide-box-quote p {
	font-family: 'Guardian Egyptian Web', serif;
}

.slide-box.slide-box-quote p {
	font-family: 'Guardian Egyptian Web', serif;
	text-indent: 30px;
	margin-bottom: 0;
}

.slide-box.slide-box-quote cite {
	color: #00b2ff;
	font-style: italic;
	display: block;
}

/* SECTION 3 */ 
#section-3 {
	padding-top: 12px;
	background: #fbf6ef url("../images/farm-bottom.png") no-repeat top center;
	background-size: contain;
}

#section-3 .container {
	position: relative;
	z-index: 10;
	max-width: 640px;
	border-left: 1px solid #3f464a;
	border-bottom: 1px solid #3f464a;
}

#section-3 .container.container-quote-interrupt {
	border-left: none;
	border-bottom: none;
	font-family: 'Guardian Egyptian Web', serif;
	font-size: 36px;
	line-height: 40px;
	font-weight: 600;
	padding-top: 10px;
	padding-bottom: 12px;
}

#section-3 .container.container-quote-interrupt cite {
	font-family: 'Guardian Egyptian Web', serif;
	color: #00b2ff;
	font-style: italic;
	display: block;
}

#section-3 .container.container-quote-interrupt .inner {
	background: url(../images/quote-interrupt-mark.png) no-repeat top left;
	background-position: 0 6px;
}

#section-3 .container.container-quote-interrupt .inner p {
	font-family: 'Guardian Egyptian Web', serif;
	text-indent: 50px;
	margin-bottom: 0;
}

#section-3 .container.container-quote-interrupt + .container
{
	border-top: 1px solid #3f464a;
	padding-top: 14px;
}

#section-3 .container-learn-more {
	background: #041f4a url("../images/learn-more-bg.png") no-repeat center left;
	background-position: 10px 10px;
	color: #ffffff;
	padding-top: 10px;
	padding-bottom: 10px;
	font-family: 'Guardian Egyptian Web', serif;
	font-weight: 600;
	font-size: 20px;
}

#section-3 .container-learn-more a {
	position: relative;
	text-decoration: underline;
	color: #90dcff;
	
}

#section-3 .container-learn-more a::after {
	content: ' ';
	position: absolute;
	right: -37px;
	top: 0px;
	width: 26px;
	height: 26px;
	background: url("../images/learn-more-link-bg.png") no-repeat center center;
	transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in-out;
}

#section-3 .container-learn-more a:hover::after {
	right: -47px;
}

#section-3 .container-learn-more .col {
	padding-left: 95px;
	font-family: "Display Sans", sans;
}

#section-3 h3 {
	font-size: 28px;
	
}

#section-3 h3 span {
	background-color: #ffe500;
}

#section-3 h4 {
	font-size: 20px;
	font-weight: 600;
}

#section-3 .row {
	font-family: "Display Sans", sans;
}

#section-3 .row-title,
#section-3 .row-content {
	padding-top: 50px;
	padding-bottom: 10px;
	font-family: "Display Sans", sans;
}

#section-3 .row-opener + .row-title,
#section-3 .row-opener + .row-content {
	padding-top: 12px;
}

#section-3 .row-content {
	padding-bottom: 10px;
}

#section-3 .row-content h4 {
	margin-bottom: 0;
}

#section-3 .row-content cite {
	color: #00b2ff;
}

.row-opener {
	padding-top: 90px;
}

.row-numbers big {
	display: block;
	font-family: 'Guardian Egyptian Web', serif;
	font-size: 48px;
	font-weight: 600;
	line-height: 48px;
}

.row-farm-quote .inner img {
	width: 180%;
	max-width: 950px;
	margin-left: -15px;
}

#section-3 .box-quote {
	left: -116px;
	background: #052962 url(../images/box-quote-mark.png) no-repeat top left;
	background-position: 12px 12px;
	color: #ffffff;
}

#section-3 .box-quote::after {
	background: url("../images/box-quote-talk-bubble-052962.png") no-repeat center center;
}

.row-numbers-bee {
	padding-bottom: 40px;
}

.row-closer .image-fill {
	float: left;
	display: none;
	margin-left: -15px;
}

.row-closer .image-fill img {
	-webkit-transform: scaleX(-1);
  	transform: scaleX(-1);
  	width: 200px;
}

.rg-bee {
	position: absolute;
	top: 0;
	right: -12px;
	opacity: 0;
	transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in-out;
}

.rg-bee img {
	position: relative;
	left: 40px;
}

.rg-worm {
	position: absolute;
	bottom: -55px;
	left: -130px;
}

.rg-cow {
	position: absolute;
	left: -338px;
	opacity: 0;
	transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in-out;
}

.rg-bee.visible,
.rg-cow.visible {
	opacity: 1;
}

.info {
	position: relative;
}

.info .icon {
	display: block;
	width: 32px;
	height: 32px;
	background: url("../images/info-icon.png") no-repeat center center;
	font-size: 0;
}

.info .panel {
	display: none;
	position: absolute;
	left: 42px;
	top: 0;
	padding: 4px 6px;
	background-color: #041f4a;
	color: #ffffff;
}

.info .panel span {
	color: #ffe500;
}

/* SECTION FOOTER */
#section-footer {
	padding-top: 12px;
	background: #fbf6ef url("../images/footer-bg.png") no-repeat top center;
	background-size: cover;
	font-size: 14px;
}

#section-footer .container {
	position: relative;
	z-index: 10;
	max-width: 640px;
	font-family: "Display Sans", sans;
}

#section-footer .row-share {
	margin-top: 10px;
	padding-bottom: 20px;
}

#section-footer .row-share .share-icon a {
	border-color: #05204b;
}


@media only screen 
  and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2),
(min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2),
(min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), 
(min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3),
(min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2),
(max-width: 767px) {

	.graphic-bee {
		top: 1000px;
	}

/*	.graphic-bee img {
		position: absolute;
		left: 0;
		transform: translateX(100px);
	}

	.graphic-bee.appear__right img {
		transform: translateX(10px);
	}*/

	.graphic-bird {
		left: auto;
		top: 415px;
		right: -160px;
	}
	
	.graphic-bird img {
		width: 100%;
	}
	
	.box-quote {
		left: 15px;
		width: 200px;
	}

	.box-quote::after {
		left: 15px;
		transform: scaleX(-1);
	}
	
	.box-quote-fill {
		display: block;
	}
	
	.row-rethink-b .inner {
		padding-left: 10px;
	}
	
	.graphic-bee {
		left: calc(50% + 100px);
	}
	
	.cloud-trigger__1 {
		top: 750px;
		left: calc(50% - 605px);
	}

	.clouds .cloud-1 {
		top: 750px;
		left: calc(50% - 605px);
	}
	
	.clouds .cloud-2 {
		top: 500px;
	}
	
	.clouds .cloud-7 {
		top: 1400px;
	}
	
	.slide-box {
		margin-left: 15px;
		width: calc(100% - 30px);
		top: -200px;
	}
	
	#section-2 .mobile-gap-filler {
		display: block;
	}
	
	#section-3 .container {
		border-left: none;
	}
	
	.row-farm-quote {
		height: 100px;
		height: auto;
		overflow: hidden;
	}
	
	.row-farm-quote .inner {
		/*position: absolute;*/
		position: relative;
		left: -15px;
		/*overflow-x: hidden;*/
	}

	.row-farm-quote .inner img {
		width: 160%
	}
	
	.row-numbers-bee {
		padding-bottom: 0;
	}
	
	.row-numbers .col-md-4,
	.row-numbers .col-md-6 {
		margin-bottom: 30px;
	}

/*	#section-3 .row-farm-quote .box-quote {
		position: relative;
		left: 0;
		margin-top: 100px;
		margin-left: -15px;
	}
	
	.row-farm-quote .inner {
		overflow-x: visible;
	}*/
	
	.rg-worm {
		position: relative;
		left: 0;
		bottom: 0;
	}

	.rg-bee {
		right: 35px;
		top: -15px;
		width: 80px;
	}

	.rg-bee img {
		width: 80px;
	}
	
	.rg-cow {
		display: none;
	}
	
	.row-closer .image-fill {
		display: block;
	}
}

@media only screen 
	(min-device-width: 1300px) and (-webkit-min-device-pixel-ratio: 1),
	(min-device-width: 1300px) and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi),
	(min-width: 1300px) {

	/*	
   	.slide-box {
   		top: -900px;
   	}
		*/

   	.row-farm-quote .inner img {
   		width: 180%;
   		max-width: 950px;
   	}

}