/*  */
/** ---------------------------------------- */
/** HEADER */

/* splitting the title in 3 elements (left text, star, right text) so that the df star image is exactly in the middle of the page */

#df-header {
	margin-top: 3em;
}

#df-title {
	text-align: center;
	width: 100%;
	font-size: 1.5em;
}

#df-title-left, #df-title-right {
	display: inline-block;
	width: 30%;
}

#df-title-left {
	text-align: right;
}

#df-title-right {
	text-align: left;
}

#df-title-star {
	position: relative;
	top: 0.25em;
	width: 1.25em;
}

#df-subheader {
	text-align: center;
	font-size: 1.25em;
}

/*  */
/** ---------------------------------------- */
/** APP COLUMNS */

/* The 2-column layout is achieved using 2 x 50% float child divs. */

.df-manuscripts-column, .df-findings-column {
	float: right;
	width: 50%;
	padding: 0;
	margin: 0;
	overflow: hidden;
}

/* The bicolor background is created using a gradient on the parent element, so that it covers 100% of the height. */

.df-two-columns {
	display: inline-block;
	margin: 0;
	padding: 0;
	width: 100%;
	background: -webkit-linear-gradient(
	  left,
	  #A7DCEE   0%,
	  #A7DCEE  50%,
	  #9ACFE2  50%,
	  #9ACFE2 100%
	);
	background-image: -moz-linear-gradient(
	  left,
	  #A7DCEE   0%,
	  #A7DCEE  50%,
	  #9ACFE2  50%,
	  #9ACFE2 100%
	);
	background-image: -ms-linear-gradient(
	  left,
	  #A7DCEE   0%,
	  #A7DCEE  50%,
	  #9ACFE2  50%,
	  #9ACFE2 100%
	);
	background-image: -o-linear-gradient(
	  left,
	  #A7DCEE   0%,
	  #A7DCEE  50%,
	  #9ACFE2  50%,
	  #9ACFE2 100%
	);
}

#df-tweet {
	background: -webkit-linear-gradient(
	  left,
	  #CAEAF6   0%,
	  #CAEAF6  50%,
	  #C2E2ED  50%,
	  #C2E2ED 100%
	);
	background-image: -moz-linear-gradient(
	  left,
	  #CAEAF6   0%,
	  #CAEAF6  50%,
	  #C2E2ED  50%,
	  #C2E2ED 100%
	);
	background-image: -ms-linear-gradient(
	  left,
	  #CAEAF6   0%,
	  #CAEAF6  50%,
	  #C2E2ED  50%,
	  #C2E2ED 100%
	);
	background-image: -o-linear-gradient(
	  left,
	  #CAEAF6   0%,
	  #CAEAF6  50%,
	  #C2E2ED  50%,
	  #C2E2ED 100%
	);
}

/* font colors */

.df-two-columns {
	color: #2e2e2e;
}

.df-two-columns a {
	color: darkblue;
}

.df-two-columns a:hover {
	color: white;
}

.df-two-columns a:active {
	color: black;
}

/* When we need to align things again, we start a new two-columns div. They each have different spacing. */

#df-apps {
	margin-top: 2.5em;   /* 40px */
}

#df-downloads {
	padding-top: 1.5em;
	padding-bottom: 2.5em;
}

#df-screenshots {
	padding-top: 2.5em;
	padding-bottom: 2.5em;
	margin-top: -10px; /* WHY WE NEED THAT ???!!! */
	margin-bottom: -5px; /* WHY WE NEED THAT ???!!! */
}

#df-tweet {
	padding-top: 3.75em;      /* 60px */
	padding-bottom: 3.75em; 
	margin-bottom: 1.875em;   /* 30px */
}


/*  */
/** ---------------------------------------- */
/** TAGLINE & OFFER */

#df-tagline p {
	margin-top: 1em;
	text-align: center;
	font-size: 2.2em;
}

/* the circle offer is artificially moved up so that the rest of the content is correctly positioned without adjustments (e.g. the app icons below the offer) */
#df-offer {
	position: relative;
	margin-top: -1.25em;
	top: 3.75em;
	width: 14.5em; /* ~230 px */
	height: 14.5em;
	border-radius: 7.25em;
	background-color: #E5F2F9;
	border: 3px white solid;
	box-shadow: 0px 4px 4px hsla(0,0%,0%,0.2);
	text-align: center;
}

#df-offer-header {
	margin-top: 11%;
	padding-right: 5%;
}

#df-offer-df-logo {
	position: relative;
	top: 1.4em;
	left: 0.4em;
	width: 10em; /* 160 px */
}

#df-offer-header > span {
	font-size: 0.6em;
}

#df-offer-title {
	margin-top: 13%;
	font-size: 1.4em;
}

#df-offer-body {
	margin-top: 5%;
	font-size: 1.3em;
	color: #999;
}

#df-offer-subline {
	margin-top: 6%;
	font-size: 1.1em;
	color: #999;
}

.smallcaps {
	font-variant: small-caps;
}

#df-coupon {
	width: 100%;
	margin-top: 2%;
	text-align: center;
	color: #999;
}

#df-coupon p {
	font-size: 0.7em;
	line-height: 1.1em;
}

/*  */
/** ---------------------------------------- */
/** APP ICONS & FEATURES */

.df-app-icon {
	max-width: 512px;
	width: 100%;
}

.df-app-icon img {
	width: 100%;
}

.df-app-features {
	margin-top: -25px;
	max-width: 350px;
}


/* using li:before to customize the size of the bullet point */
.df-app-features ul{
	list-style: none;
	padding: 0;
	margin: 0;
}

.df-app-features li {
	padding-left: 1.3em;
	text-indent: -1.3em;
	padding-bottom: 1.6em;
	font-size: 1.0em;
	line-height: 1.3em;
}

.df-app-features li:before {
	content: '\2022';
	font-size: 1.2em;
	margin-right: 0.8em;
}

.df-findings-column .df-app-features li {
	padding-bottom: 1.3em;
}

/*  */
/** ---------------------------------------- */
/** APP DOWNLOAD */

#df-downloads {
	text-align: center;
}

.df-button {
	position: relative; /* necessary for the enclosed <a> to use absolute position and cover the div */
/*	display: inline-block;
*/	width: 170px;
	max-width: 80%;
	padding: 4px 0px;
	margin-top: 1.2em;
	text-align: center;
	text-transform: uppercase;
	border: 3px white solid;
	border-radius: 8px;
	color: white;
}

.df-button:nth-child(1) {
	margin-top: -0em;
}

/* button target covers the parent div */
.df-button a {
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 100;
}

.df-manuscripts-column > .df-button:nth-child(1) {
	background: #FE5D00;
}

.df-findings-column > .df-button:nth-child(1) {
	background: #FFAA00;
}

.df-manuscripts-column > .df-button:nth-child(2) {
	background: #BE3604;
}

.df-findings-column > .df-button:nth-child(2) {
	background: #ED9008;
}

.df-button p:nth-child(1) {
	font-size: 1.0em;
	line-height: 1.3em;
}

.df-button p:nth-child(2) {
	font-size: 0.7em;
}

.df-app-availability {
	font-size: 0.9em;
	color: #666;
	padding: 1.4em;
	text-align: center;
}


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

/* most of the css on the parent divs is to make the height equal to the width while allowing some resizing to go on. For this, we use 'width and 'padding-bottom' of 100% on the child div. The percentages are both based on the width of the parent, which itself has a variable width (and a max width as well). The img child has to use 'absolute' positioning so that the div 'height' remains at 0, and only 'padding-bottom' contributes to the final height. */

.df-screenshot-center {
	text-align: center;
}

.df-app-screenshots {
	display: inline-block;
	width: 81%;
	max-width: 600px;
	background-color: white;
	border-radius: 8px;
	border: 3px white solid;
}

.df-app-screenshots > div {
	position: relative;
	overflow: hidden;
	width: 100%;
	padding-bottom: 100%;
	cursor: pointer;
}

.df-app-screenshots img {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	border-radius: 4px;
}

.df-screenshots-nav {
	position: relative;
	/*background: green;*/
}

.df-screenshots-nav > a {
	position: relative;
	display: inline-block;
	padding: 10px 4px;
	/*background: red;*/
}

.df-screenshots-nav > a > span {
	position: relative;
	display: inline-block;
	width: 8px;
	height: 8px;
	border: 1px solid white;
	border-radius: 4px;
}

.df-screenshots-nav > a.selected span {
	background: white;
}

.df-findings-column .df-app-screenshots img {
	width: 100%;
}

.df-manuscripts-column .df-app-screenshots img {
	width: 100%;
}


/*  */
/** ---------------------------------------- */
/** TWEET */

#df-tweet {
	text-align: center;
}
#df-tweet-wrapper {
	display:inline-block;
	padding-left: 10px;
	padding-right: 10px;
	border-radius: 4px;
	box-shadow: 0px 4px 4px hsla(0,0%,0%,0.2);
	border: 3px white solid;
	background: #E5F2F9;
	max-width: 90%;
}

#df-tweet-wrapper iframe {
}


/*  */
/** ---------------------------------------- */
/** FOOTER */

/* Using the '.tint-df' class to adjust spacing and size a bit just for DF.*/ 

/* The dimensions used here are slightly larger than in Marcello's mockup, but it's a pragmatic choice: these are also the dimensions set at the next increment for smaller screens for responsiveness, see 'style.css' @media queries. This way, we don't have to adjust also those media queries: the first transition to smaller screen is already done. */

.tint-df #learn-more-wrapper {
	margin-top: 0px;
}

@media screen and (min-width: 900px) {
	/* Logo at 2/3 the size. */
	.tint-df #logo-header {
		width: 300px;
		height: 148px;
	}

	/* Narrower 'learn more' block. */

	.tint-df #learn-more-wrapper {
		width: 670px;
	}

	.tint-df #learn-more {
		width: 660px;
	}
}



/*  */
/** ---------------------------------------- */


/** MEDIA QUERY: 1600 PX */

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

	#df-offer {
		font-size: 0.8em;
	}
	
	#df-tagline p {
		font-size: 1.9em;
	}

	.df-app-icon {
		padding-top: 40px;
	}
	
	.df-app-features {
		margin-top: -10px;
		max-width: 220px;
	}
	
	.df-screenshots-nav > a {
		padding: 10px 7px;
	}
	
	.df-screenshots-nav > a > span {
		width: 12px;
		height: 12px;
		border-radius: 6px;
	}

	.df-app-screenshots img {
		border-radius: 6px;
	}
}

@media screen and (max-width: 600px) {
	#df-tagline p {
		font-size: 1.4em;
	}
}

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

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

@media screen and (max-width: 450px) {
	
	#df-header, #df-apps, #df-tweet {
		font-size: 12px;
	}

	#df-tagline p {
		font-size: 1.4em;
	}

	.df-app-icon img {
		width: 130%;
		margin-left: -15%;
	}

	.df-app-features {
		max-width: 170px;
	}

}


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

/* iPhone 5S = 640 px */
@media screen and (max-width: 350px) {
	#df-header, #df-apps, #df-tweet {
		font-size: 9px;
	}

	#df-downloads, #df-screenshots {
		font-size: 12px;
	}

	.df-app-features {
		max-width: 120px;
	}
}