/*  */
/** ---------------------------------------- */
/** GIANT ICON */

#product-root-box {
	margin-top: 32px;
	margin-bottom: 40px;
	position: relative;
	width: 800px;
	height: 540px;
	font-size: 10pt;
}

#product-icon-wrapper {
	position: absolute;
	top: -0.5%;
	left: -3.5%;
	width: 62.5%;
	height: 100%;
}

#product-icon-wrapper img {
	/* 	500 × 540 */
	width: 100%;
	height: 100%;
}


/*  */
/** ---------------------------------------- */
/** PRODUCT SHEET */

#product-description-box {
	/* 	368 × 531 */
	position: absolute;
	top: 0%;
	left: 57.5%;
	width: 46%;
	height: 100%;
}

#product-description-box div {
	position: absolute;
}

#product-title {
	top: 3.9%;
	font-size: 3.75em;
}

.tint-4peaks #product-title {
	color: #FF71A5;
}

.tint-enzymex #product-title {
	color: #FFC000;
}

#product-subtitle {
	top: 17.9%;
	width: 65%;
	font-size: 2.0em;
	line-height: 1.16em;
	letter-spacing: -.018em;
}

#product-tagline {
	top: 32.2%;
	left: 0.5%;
	width: 80%;
	font-size: 1.1em;
	color: #ababab;
}

#product-blurb {
	top: 36%;
	left: 0.5%;
	width: 99.5%;
	font-size: 1.1em;
	line-height: 1.7em;
	letter-spacing: 0.005em;
	color: #ababab;
}

#product-extra {
	top: 53%;
	width: 99%;
	font-size: 1.1em;
	letter-spacing: -0.04em;
}
;

i.fa-apple {
	font-size: 1.53em;
	vertical-align: -2px;
	padding-right: 3px;
}

#product-quote {
	top: 81%;
	width: 94%;
	left: 0.5%;
	font-size: 1.1em;
	font-style: italic;
	line-height: 1.7em;
	letter-spacing: +0.005em;
}

#product-quote:before {
	content: '“ ';
}

#product-quote:after {
	content: ' ”';
}

#product-quote-author {
	top: 92%;
	width: 94%;
	left: 0.5%;
	font-size: 1.0em;
	letter-spacing: -0.03em;
	color: #ababab;
}

#product-download-button {
	text-align: center;
	vertical-align: middle;
	top: 65.4%;
	left: 0.4%;
	width: 30.4%;
	height: 8.6%;
	font-size: 1.2em;
	border-radius: 4px;
}

.tint-4peaks #product-download-button {
	background-color: #FF71A5;
}

.tint-enzymex #product-download-button {
	background-color: #FFC000;
}

/* button target extends outside the div rectangle: can't miss it!! */
#product-download-button a {
	display: block;
	position: absolute;
	left: -30%;
	top: -50%;
	width: 160%;
	height: 200%;
	z-index: 2;
}

#product-download-button:hover {
	background-color: white;
}

#product-download-button:hover a ~ div {
	color: black;
}

#product-download-button:active {
	background-color: black;
}

#product-download-button:active a ~ div {
	color: white;
}

.product-getit {
	position: absolute;
	top:16%;
	left: 0;
	right: 0;
	font-size: 1.04em;
	text-transform: uppercase;
	color: black;
}

.product-free {
	position: absolute;
	top:58%;
	left: 0;
	right: 0;
	font-size: 0.74em;
	text-transform: uppercase;
	color: black;
}

.product-getit:after {
	content: "get it";
}

.product-free:after {
	content: "free";
}

#product-info {
	text-align: center;
	vertical-align: middle;
	top: 65.4%;
	left: 33.1%;
	width: 60.5%;
	height: 8.6%;
	font-size: 1.2em;
	background-color: #3B3B3B;
	border-radius: 4px;
}

.product-version {
	position: absolute;
	top:27.5%;
	left: 11.5%;
	font-size: 1.3em;
	color: white;
}

.product-requirements {
	position: absolute;
	top: 42%;
	left: 40%;
	font-size: 0.8em;
	color: #ababab;
}

/*  */
/** ---------------------------------------- */
/** SCREENSHOTS */

.screenshot-row {
	position: relative;
	width: 800px;
	/*height: 382px;*/
	font-size: 10pt;
	margin-bottom: 10%;

	display: -webkit-flex;
	-webkit-flex-direction: row;
	-webkit-flex-wrap: nowrap;
	-webkit-justify-content: space-between;
	-webkit-align-items: flex-start;

	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: flex-start;
}

.screenshot-picture {
	/* size: 512 x 382 */
	position: relative;
	width: 64%;
	margin-top: 4.3%;
}

.screenshot-legend {
	position: relative;
	top: -5px;
	left: -0.5%;
	width: 28.5%;
	height: 100%;
	font-size: 1.16em;
	line-height: 1.6em;
	text-align: justify;
	overflow: hidden;
	color: #ababab;
}

.screenshot-legend h2 {
	font-size: 1.5em;
	margin-bottom: 0.4em;
}

.tint-4peaks h2 {
	color: #FF71A5;
}

.tint-enzymex h2 {
	color: #FFC000;
}

.left .screenshot-picture, .right .screenshot-legend {
	-webkit-order: 1;
	order: 1;
}

.right .screenshot-picture, .left .screenshot-legend {
	-webkit-order: 2;
	order: 2;
}

.screenshot-picture img {
	position: absolute;
	top: -0.5%;
	left: 0%;
	width: 100%;

	/* http://stackoverflow.com/questions/3186688/drop-shadow-for-png-image-in-css */
	-webkit-filter: drop-shadow(10px 10px 30px hsla(0, 0%, 0%, 1.0));
	filter: drop-shadow(10px 10px 30px hsla(0, 0%, 0%, 1.0));
	-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=10, OffY=10, Color='#111')";
	/* http://creativeandcode.com/fix-css-filters-creating-blurry-images-on-retina/ */
	-webkit-transform: translateZ(0);
}


/*  */
/** ---------------------------------------- */
/** FEATURES */

#product-features {
	position: relative;
	width: 800px;
	font-size: 10pt;
	padding: 0;
	padding-top: 40px;
	margin-bottom: 60px;
	text-align: left;
}

.product-feature-column {
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: 30%;
	padding: 0px;
	margin: 0 -2px;
	text-align: left;
}

.product-feature-column:nth-child(2) {
	margin-left: 5%;
	margin-right: 5%;
}

.product-feature-title {
	position: relative;
	display: table;
	height: 36px;
	vertical-align: top;
	font-size: 1.4em;
	padding-left: 3.2em;
	margin-bottom: 1.9em;
}

.product-feature-title div {
	display: table-cell;
	vertical-align:middle;
}

.tint-4peaks .product-feature-title {
	color: #FF71A5;
}

.tint-enzymex .product-feature-title {
	color: #FFC000;
}

.product-feature-title img {
	position: absolute;
	top: 0px;
	left: 0.4em;
	height: 100%;
}

.product-feature-content {
	position: relative;
	display: inline-block;
	width: 100%;
}

.product-feature-content h3 {
	font-size: 1.3em;
	margin-bottom: 0.3em;
}

.product-feature-content p {
	font-size: 1.1em;
	line-height: 1.25em;
	margin-bottom: 1.25em;
	color: #B4B4B4;
}


/*  */
/** ---------------------------------------- */
/** ENDORSMENTS */

#endorsments-title {
	position: relative;
	width: 900px;
	text-align: center;
	color: #b4b4b4;
	font-size: 12pt;
}

#endorsments {
	position: relative;
	width: 900px;
	text-align: center;
	padding-top: 20px;
	padding-bottom: 60px;
}

.institute {
	display: inline-block;
	margin: 7px 18px;
}

/* https://stackoverflow.com/questions/18485378/vertically-centering-text-within-an-inline-block/24685032#24685032 */
.institute:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

/*  */
/** ---------------------------------------- */
/** MEDIA QUERY: 900 PX */

/* iPhone 6  = 750 px */
/* iPhone 6+ = 828 px */

@media screen and (max-width: 900px) {
	
	/* product box is 3/4 of the size */
	#product-root-box {
		margin-top: 32px;
		margin-bottom: 40px;
		width: 600px;
		height: 398px;
		font-size: 7.5pt;
	}

	/* screenshot box is 3/4 of the size */
	.screenshot-row {
		width: 600px;
		/*height: 287px;*/
		font-size: 7.5pt;
	}

	#product-features {
		width: 600px;
	}

	#endorsments-title {
		width: 700px;
	}

	#endorsments {
		width: 700px;
	}
}


/*   */
/** MEDIA QUERY: 700 PX */

/* iPhone 5S = 640 px */
@media screen and (max-width: 700px) {
	
	#product-root-box {
		margin-top: 50px;
		margin-bottom: 40px;
		width: 276px;
		height: 398px;
		font-size: 7.5pt;
	}

	/* was full size: 368 × 531 */
	/* now  3/4 size: 276 × 398 */
	#product-description-box {
		position: absolute;
		top: 0%;
		left: 0%;
		width: 100%;
		height: 100%;
	}
	
	#product-icon-wrapper {
		position: absolute;
		top: -7%;
		left: 56%;
		width: 55%;
		height: auto;
	}
	
	.screenshot-row {
		display: block;
		width: 300px;
		margin-bottom: 70px;
		height: auto;
		font-size: 7.5pt;
	}
	
	.left .screenshot-picture, .right .screenshot-legend, .right .screenshot-picture, .left .screenshot-legend {
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
	
	.screenshot-picture {
		/* size was: 512 x 382 */
		/* size  is: 300 x 382 */
		width: 300px;
		margin-bottom: 30px;
		text-align: center;
	}

	.screenshot-picture img {
		position: relative;
		width: 90%;
	}
	
	.screenshot-legend {
		width: 300px;
		font-size: 1.16em;
		line-height: 1.6em;
		margin-bottom: 10px;
	}

	#endorsments-wrapper {
		position: relative;
		width: 320px;
	}


	#product-features {
		width: 300px;
	}
	
	.product-feature-column:nth-child(n+0) {
		width: 100%;
		margin:0;
		margin-bottom: 10%;
	}

	#endorsments-title {
		width: 300px;
	}

	/* content within is scaled 50%, and thus the content is 320px wide, but the div itself is still 640px wide, with 160px of empty content on each side. Same for the height. */
	#endorsments {
		width: 640px;
		margin-left:-50%;
		margin-top: -40%;
		margin-bottom: -40%;
		-webkit-transform: scale(0.5);
	}
}