/* ==|== homepage styles =====================================================
   Author: Hugh Guiney
   ========================================================================== */

#content
{
	width:100%
}

#home [role="main"] > .content
{
	background:#499bd1
}

#home [role="main"] > .content
,#trust > .content > .options
{
	max-width:100%;
	width:100%
}

#home [role="main"] > .content > .content
,[role="banner"] > .content
{
	max-width:87.75em;
	width:90%
}

#intro
{
   background:rgb(76,126,168) url(../../images/healthgraph/blue-grain-tile.png);
   background:
      radial-gradient(
         center,
         ellipse cover,
         hsla(0, 0%, 96%, 0.24) 0%,
         hsla(0, 0%, 96%, 0.24) 5%,
         hsla(0, 0%, 96%, 0.1) 40%,
         hsla(0, 0%, 96%, 0.03) 60%,
         hsla(0, 0%, 96%, 0) 70%,
         hsla(0, 0%, 96%, 0) 100%
      ),
      rgb(76,126,168) url(../../images/healthgraph/blue-grain-tile.png)
   ;
   
   border-bottom:1px solid hsla(208,44%,38%,.5);
   margin-bottom:3em
}

#intro > .content > aside
{
	border-bottom:1px solid hsla(0,0%,96%,.25)
}

#parent-site
{
	margin-top:1.5em;
	max-width:100%;
	width:100%
}

#parent-site > a:before
{
	font-weight:bold
}

#trust > .content > .options
{
	border-top:4px double hsla(0,0%,96%,.5)
}

#trust > .content > .options > li
{
	border-bottom:1px solid hsla(0,0%,96%,.5)
}

#trust > .content > .options > li > a
{
	display:inline-block;
	font-size:1.5em;
	height:100%;
	padding:1.5em 1.5em 1.5em 3em;
	text-decoration:none;
	transition-duration:.25s;
	transition-property:text-shadow;
	vertical-align:middle;
	white-space:nowrap;
	width:100%
}

#trust > .content > .options > li > a:before
{
	display:inline-block;
	margin-left:-3em;
	margin-right:.75em;
	vertical-align:middle
}

#trust > .content > .options > li > a:hover
{
	text-shadow:0 0 10px whiteSmoke;
	transition-duration:.25s;
	transition-property:text-shadow
}

#trust > .content > .options > li > a[href="//twitter.com/healthgraphapi"]:before
{
	content:url('../../images/healthgraph/bird.png')
}

#trust > .content > .options > li > a[href$="apps"]:before
{
	content:url('../../images/healthgraph/build.png')
}

#trust > .content > .options > li > a[href$="blog"]:before
{
	content:url('../../images/healthgraph/pen.png')
}

.hero
{
	padding:1.5em .75em
}

.hero > .cta > .options > li
{
	margin:.375em
}

.hero > .cta > .options > li > a
{
	background:hsl(208,44%,23%);
	border-radius:.3em;
	font-size:1.8rem;
	font-weight:bold;
	padding:1.8rem 4.5rem;
	transition-duration:.25s;
	transition-property:background-color
}

.hero > .cta > .options > li > a:hover
{
	background:hsl(208,44%,34.5%);
	transition-duration:.25s;
	transition-property:background-color
}

.hero > img
{
	margin:.75em 0
}

#get-like-button a:before
{
	content:url('../../images/healthgraph/heart-bubble.png')
}

body
{
	color:whiteSmoke;
}

/* ==|== media queries ======================================================
   Media Queries for Responsive Design.
   Override the primary ('mobile first') styles
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
	#parent-site
	{
		text-align:right
	}
	
	header p
	{
		text-align:inherit
	}
}

@media only screen and (min-width: 65em) {
	#benefits
	,#trust
	{
		margin-bottom:3em
	}
	
	#get-like-button
	{
		margin:0;
		padding-top:7em;
		text-align:left;
		z-index:0
	}
	
	#get-like-button > a
	{
		left:2em;
		position:relative
	}
	
	#trust > .content > .options > li
	{
		border-bottom:none;
		border-right:1px solid hsla(0,0%,96%,.5);
		margin:-.25em 0 0;
		width:33%
	}
	
	#trust > .content > .options > li:last-child
	{
		border-right:none
	}
	
	.hero
	{
		display:table;
		margin-bottom:0;
		margin-left:auto;
		margin-right:auto;
		position:relative;
		z-index:1
	}
	
	.hero > *
	{
		display:table-cell;
		vertical-align:top
	}
	
	.hero > .cta > .options
	{
		margin: 0;
		text-align: left;
	}
	
	.hero > .cta > .options > li
   {
      margin-left: 0;
   }
	
	.hero > .cta > hgroup > :first-child
	{
		font-size:3.6rem
	}
	
	.hero > .cta > hgroup
	{
		max-width:25em
	}
	
	.js .hero > .cta > hgroup
	{
		max-width:15em
	}
	
	.hero > img
	{
		margin-bottom:-11em
	}
}



body#home > div.content > aside {
   display: none;
}