::selection { background: #fdf7a3; color: #222 }
::-moz-selection { background: #fdf7a3; color: #222}

.cyan15-to-navy {background: linear-gradient(180deg, #D9F3FA 35%, #051E51 35%);}
.navy {background-color: #051e51;}
.white {background-color: #fff;}
.beige {background-color: #f6f5ed;}
.cyan5 {background-color: #f2fbfd;}
.cyan5-to-white {background: linear-gradient(180deg, #f2fbfd 40%, #ffffff 40%);}
.white-to-beige {background: linear-gradient(180deg, #fff 17%, #f6f5ed 17%);}

.beige-to-white {background: linear-gradient(180deg, #f6f5ed 150px, #fff 150px);}



.image1 {}
.image1-small {padding-top: 3%;}
.image2 {padding: 1% 0 6% 0}
.image2-small {padding: 4% 0 8% 0}

.image3 {}
.image4 {padding-top: 0.5%}
.image5 {}
.image6 {}
.image7 {}
.image8 {}
.image9 {padding: 4% 0 6% 0}



/* JSON icons */
.white .full-col {
	padding: 1% 0 3% 6%;
}

.flex-container {
	display: flex;
	flex-direction: row;
	padding: 0 0 10% 5%;
	width: 85%;
  }
  
.animation1, .animation2, .animation3 {
	flex: 1;
	padding: 0;
	padding-right: 5%;
	max-width: 26%;
  }

img.iconheader {
	width: 50%;
	margin-left: -1%;

}

img.icontitle {
	width: 85%;
	max-width: 210px;
	padding: 10% 0 0 1.5%;
}

.two-three {
	padding-bottom: 2%;
}

.description {
	max-width: 810px;
}

.white .description {
	padding-top: 8%;
	padding-bottom: 2%;
}

blockquote {
	margin-top: 0;
	padding-bottom: 2%;
}

blockquote h3:first-child {
	text-indent: 0;
}




.full-36 {
	position: relative;
	z-index: 1;
}


.end {
	display: flex;
	flex-direction: row;
	position: relative;
	min-height: 700px;
	overflow: hidden;

}

.end .description {
	padding-right: 0;
	margin-right: 0;
	position: relative;
	width: 58%;
	max-width: 810px;
	padding-top: calc(150px + 6%);
}

.tape {
	width: 45%;
	position: absolute;
	right: 0;
}



@media only screen and (min-width: 1401px) and (max-width: 10000px) {
	.end {min-height: 800px;}
}


@media only screen and (min-width: 1160px) and (max-width: 1400px) {
	.end {min-height: 700px;}
}


@media only screen and (min-width: 970px) and (max-width: 1159px) {

	.end {min-height: 640px;}

	.end .description {
		width: 52%;
		padding-top: calc(150px + 5%);
	}
	.tape {
		width: 50%;
	}
}

@media only screen and (min-width: 849px) and (max-width: 969px) {

	.beige-to-white {background: linear-gradient(180deg, #f6f5ed 130px, #fff 130px);}

	.end {min-height: 730px;}

	.end .description {
		width: 49%;
		padding-top: calc(130px + 5%);
	}

	.tape {
		width: 65%;
		right: -10px;
		top: 30px;
	}
}


@media only screen and (min-width: 780px) and (max-width: 848px) {

	.beige-to-white {background: linear-gradient(180deg, #f6f5ed 100px, #fff 100px);}

	.end .description {
		width: 43%;
		padding-top: calc(100px + 5%);
	}

	.tape {
		width: 70%;
		right: -10px;

	}
}


@media only screen and (min-width: 730px) and (max-width: 779px) {

	.beige-to-white {background: linear-gradient(180deg, #f6f5ed 100px, #fff 100px);}

	.end .description {
		width: 42%;
		padding-top: calc(100px + 5%);
	}

	.tape {
		width: 73%;
	}

}

@media only screen and (min-width: 670px) and (max-width: 729px) {

	.beige-to-white {background: linear-gradient(180deg, #f6f5ed 100px, #fff 100px);}

		.end {min-height: 740px;}


	.end .description {
		width: 45%;
		padding-top: calc(100px + 6%);
	}

	.tape {
		width: 90%;
		right: -110px;
	}
}



@media only screen and (min-width: 610px) and (max-width: 669px) {

	.beige-to-white {background: linear-gradient(180deg, #f6f5ed 100px, #fff 100px);}

	.end {min-height: 740px;}


	.end .description {
		width: 45%;
		padding-top: calc(100px + 6%);
	}

	.tape {
		width: 100%;
		right: -120px;
	}
}



@media only screen and (min-width: 461px) and (max-width: 609px) {

	.beige-to-white {background: linear-gradient(180deg, #f6f5ed 20%, #fff 20%);}

	.end {
		flex-direction: column;
	}

	.end .description {
		width: 88%;
		padding-top: 6%;
		padding-bottom: 12%;
		flex: 1;
		order: 1;
	}

	.tape {
		width: 75%;
		flex: 1;
		position: relative;
		align-self: flex-end;
	}
}




@media only screen and (min-width: 100px) and (max-width: 460px) {

	.beige-to-white {background: linear-gradient(180deg, #f6f5ed 10%, #fff 10%);}

	.end {
		flex-direction: column;
	}

	.end .description {
		width: 88%;
		padding-top: 10%;
		padding-bottom: 12%;
		flex: 1;
		order: 1;
	}

	.tape {
		width: 85%;
		flex: 1;
		position: relative;
		align-self: flex-end;
	}
}



@media only screen and (min-width: 850px) and (max-width: 10000px) {

	blockquote h3 {
		font-size: 28px;
		line-height: 40px;
		letter-spacing: -0.035em;
		margin-bottom: 24px;
		-webkit-font-smoothing: antialiased;
	  	-moz-osx-font-smoothing: grayscale;
	  	}
}

@media only screen and (min-width: 620px) and (max-width: 1120px) {
	.prev {
		max-width: 90%;
	}

}



@media only screen and (min-width: 200px) and (max-width: 599px) {

	.white .description {
		padding-top: 15%;
		padding-bottom: 3%;
	}

	.image3-small {
		padding-bottom: 6%;
	}

	.image5-small {
		padding-top: 4%;
		padding-bottom: 0;
	}

	blockquote {
		padding-top: 3%;
		padding-bottom: 12%;
	}

	.image6-small {
		padding: 6% 0;
	}
	.image9-small {
		padding: 4% 0 8% 0;
	}

}



@media only screen and (min-width: 541px) and (max-width: 920px) {

	/* JSON icons */
	.white .full-col {
		padding: 1% 0 2% 6%;
	}

	.flex-container {
		display: flex;
		flex-direction: row;
		padding: 0 0 3% 3%;
		width: 88%;
	}
	
	.animation1, .animation2, .animation3 {
		flex: 1;
		padding: 0 0 8% 3%;
		width: 77%;
		max-width: 300px;
	}


	img.iconheader {
		width: 60%;
		margin-left: -1%;
	}

	img.icontitle {
		width: 95%;
		max-width: 210px;
		padding: 10% 0 0 1.5%;
	}
}



@media only screen and (min-width: 200px) and (max-width: 540px) {

	/* JSON icons */
	.white .full-col {
		padding: 6% 0 2% 10%;
	}

	.flex-container {
		display: flex;
		flex-direction: column;
		padding: 0 0 10% 5%;
		width: 80%;
	}
	
	.animation1, .animation2, .animation3 {
		flex: 1;
		padding: 0 0 8% 6%;
		width: 80%;
		max-width: 300px;
	}

	img.iconheader {
		width: 80%;
		margin-left: 0;
	}

	img.icontitle {
		width: 85%;
		max-width: 210px;
		padding: 10% 0 0 1.5%;
	}
}