/** ---------------------------------------- */
/** RESET */
/** ---------------------------------------- */

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0} 
*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

.group:before,
.group:before,
.group:after { content: ""; display: table;} 
.group:after { clear: both;}
.group { zoom: 1;}


/** ---------------------------------------- */
/** GENERIC */
/** ---------------------------------------- */

body {
	font: 16px/1 Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
	-webkit-font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
	height: 100%;
	color:#777;
}

p {
	line-height:1.8;
	margin: 15px 0;
}

strong {
	font-weight: 500;
	color: #444;
}

a {
	text-decoration:none;
	color:#5badf0;
}

div.center, p.center {
	margin-left: auto;
	margin-right: auto;
}

.wrapper {
	margin:0 auto;
	width: 90%;
	height: 100%;
	max-width: 1000px;
}

h3 {
	text-transform: uppercase;
}

section {
	padding-top: 20px;
	margin-bottom: 20px;
	overflow: hidden;
}
section h3 {
	text-align: center;
	font-size: 1.9em;
	line-height: 1.8em;
	color: rgb(0, 197, 255);
}
section h4 {
	font-weight: bold;
	font-size: 2.0em;
	margin: 20px 0 5px 0;
}
section header {
	margin-bottom: 40px;
}
section header p {
	font-size: 1.1em;
	line-height: 1.5em;
	max-width: 80%;
	margin: 0 auto;
	text-align: center;
}

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

#features {
}

.feature-row {
	position: relative;
	width: 100%;
	font-size: 10pt;
	margin: 0px;
	margin-bottom: 10%;

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

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

.feature-description {
	position: relative;
	width: 30%;
	overflow: hidden;
	-webkit-transition: .25s ease-in-out;
}

.feature-description h4 {
	font-size: 2.4em;
	line-height: 1.1em;
	margin-bottom: 0.5em;
}

.feature-description p {
	font-size: 1.2em;
	line-height: 1.4em;
}

p.dropbox_disclaimer {
	font-size: 0.9em;
}

.zoom .feature-description {
	opacity: 0.0;
}

.feature-screenshot {
	position: relative;
	width: 64%; /* 64% x 1000 = 640 px */
	cursor: -moz-zoom-in; 
	cursor: -webkit-zoom-in; 
	cursor: zoom-in;
}

.left .feature-screenshot, .right .feature-description {
	-webkit-order: 1;
	order: 1;
}

.right .feature-screenshot, .left .feature-description {
	-webkit-order: 2;
	order: 2;
}

.feature-screenshot img {
	position: relative;
	width: 137.5%; /* 64% x 137.5% = 88% */
	-webkit-transition: .25s ease-in-out;
}

.right .feature-screenshot img {
	margin-left: 0%;
}

.left .feature-screenshot img {
	margin-left: -37.5%;
}

.zoom.right .feature-screenshot img {
	margin-left: -46.875%;  /* 64% x (-37.5% - 9.375%) --> 6% from the right side of parent (half of 12%) */
}

.zoom.left .feature-screenshot img {
	margin-left: 9.375%;
}


.feature-screenshot.small img {
	width: 100%; /* 64% x 100% = 64% */
}

.right .feature-screenshot.small img {
	margin-left: 0%;
}

.left .feature-screenshot.small img {
	margin-left: 0%;
}

.zoom.right .feature-screenshot.small img {
	margin-left: -28.125%;  /* 64% x 28.125% --> 18% from the right side of parent (half of 12%) */
}

.zoom.left .feature-screenshot.small img {
	margin-left: 28.125%;
}

p.feature-callout-more {
	text-transform: uppercase;
	font-size: 0.8em;
	padding: 0;
	margin: 0;
	padding-top: 1.0em;
}
p.feature-callout {
	font-size: 1.3em;
	padding: 0;
	margin: 0;
}
p.feature-callout img {
	position: relative;
	width: 0.8em;
	top: 0.05em;
	margin: 0 0.4em;
}
/*
.feature-screenshot:hover .screenshot-slide-icon {
	position: absolute;
	top: 50%;
	width: 40px;
	height: 40px;
	margin-top: -20px;
	background-size: 100%;
	background-repeat: no-repeat;
	opacity: 0.2;
}

.left .screenshot-slide-icon {
	background-image: url(/static/images/screenshot-arrow-right@2x.png);
	right: 5%;
}

.right .screenshot-slide-icon {
	background-image: url(/static/images/screenshot-arrow-left@2x.png);
	left: 5%;
}

.feature-row.zoom .feature-screenshot .screenshot-slide-icon {
	opacity: 0.0;
}

*/

/** ---------------------------------------- */
/** NEWSLETTER */
/** ---------------------------------------- */

#newsletter {
	text-align: center;
	padding-top: 0;
}
section#newsletter header {
	margin-bottom: 10px;
}
#newsletter h4 {
	margin-bottom: 15px;
}
#newsletter button {
	padding: 4px 16px;
	background-color: rgb(25, 187, 255);
	color: white;
	border-radius: 30px;
	border: none;
	font-size: 1.2em;
	font-weight: normal;
}


/** ---------------------------------------- */
/** MEDIA QUERIES */
/** ---------------------------------------- */

@media only screen and (max-width: 1100px) {
	.wrapper {
		max-width: 900px;
	}
	.feature-row {
		font-size: 8.5pt;
	}
}

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

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

	.wrapper {
		max-width: 750px;
	}

	.feature-row {
		font-size: 9pt;
	}

}

@media screen and (max-width: 750px) {

	.feature-row {
		font-size: 8pt;
	}

}

@media screen and (max-width: 700px) {

	.feature-row {
		font-size: 7pt;
	}

}

/* iPhone 5S = 640 px */

@media screen and (max-width: 650px) {

	.feature-row {
		font-size: 7pt;
	}

	.feature-description {
		width: 50%;
	}

	.feature-screenshot {
		width: 50%;
	}

	.feature-screenshot img, .feature-screenshot.small img {
		width: 220%;
	}

	.right .feature-screenshot img, .right .feature-screenshot.small img {
		margin-left: 0%;
	}

	.left .feature-screenshot img, .left .feature-screenshot.small img {
		margin-left: -120%;
	}

	.zoom.right .feature-screenshot img, .zoom.right .feature-screenshot.small img {
		margin-left: -110%;
	}

	.zoom.left .feature-screenshot img, .zoom.left .feature-screenshot.small img {
		margin-left: -10%;
	}
	
}