@import url(http://fonts.googleapis.com/css?family=Roboto:400,500,700,300,900);


/* GLOBAL STYLES 
----------------------------------------------------------- */

html {font-size: 100%;}

body {
	background: #FFF;
	font-size: 16px;
	font-size: 1rem;
	line-height: 1.5;
	font-weight: 400;
	color: #333;
	font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}


#stage {
	background: #FFF;
}

#content {
	background: rgba(50, 65, 70, 0.1);
}


	#stage .inner,
	#content .inner,
	footer .inner {
		display: block;
		position: relative;
		width: 960px;
		padding: 0 20px;
		margin: 0 auto;
	}
	
		section {
			padding: 40px 0;
			padding: 2.5rem 0;
		}


.cf:after {
	content: "";
	display: table;
	clear: both;
}





/* TYPO
----------------------------------------------------------- */



h1,h2,h3, h4, h5, h6, p {
	margin-bottom: 24px;
	margin-bottom: 1.5rem;
}

h1 {
	font-size: 6.4rem;
	line-height: 8rem;
	color: #A0BC41;
	font-weight: 300;
	letter-spacing: -0.2rem;
}

h2 {
	font-size: 2.75rem;
	line-height: 1.25;
	color: #324146;
	font-weight: 300;
	margin: 1.25rem 0 2.5rem 0;
}

h3 {
	font-size: 2.75rem;
	line-height: 1.25;
	color: #324146;
	font-weight: 300;
	letter-spacing: -1px;
	margin: 1.25rem 0 2.5rem 0;
}

h4 {
	font-size: 1.25rem;
	font-weight: 500;
}

p {
   -moz-hyphens: auto;
   -webkit-hyphens: auto;
   hyphens: auto; 
}

p.small {
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 10px;
	line-height: 1.25rem;
	margin-bottom: 20px;
	margin-bottom: 1.25rem;
	font-weight: 400;
}

strong{
	font-weight: 500;
}


/* LINKS & BUTTONS
----------------------------------------------------------- */


a {
    color: rgba(50, 65, 70, 0.5);
    text-decoration: none;
    transition: all 0.15s linear 0s;
}

a:hover {
	color: rgba(50, 65, 70,1);
}


a.button {
	display: block;
	background: -webkit-linear-gradient(bottom , rgba(255,255,255,0) 0%, rgba(255,255,255,0.15) 100%), #0bc1d3;
	background: -moz-linear-gradient(bottom , rgba(255,255,255,0) 0%, rgba(255,255,255,0.15) 100%), #0bc1d3;
	background: linear-gradient(to top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.15) 100%), #0bc1d3;
	color: #FFF;
	font-weight: bold;
	padding: 10px;
	box-shadow: 0 0 5px rgba(0,0,0,0.5);
	text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
	border-radius: 5px;
	text-align: center;
	margin-bottom: 20px;
}

a.button:hover {
	background: -webkit-linear-gradient(bottom , rgba(255,255,255,0) 0%, rgba(255,255,255,0.15) 100%), #ff9000;
	background: -moz-linear-gradient(bottom , rgba(255,255,255,0) 0%, rgba(255,255,255,0.15) 100%), #ff9000;
	background: linear-gradient(to top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.15) 100%), #ff9000;
}

a.button--disabled {
	background: linear-gradient(to top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.15) 100%), #DDD !important;
	color: #999 !important;
	box-shadow: 0 0 5px rgba(0,0,0,0.25);
	text-shadow: 1px 1px 0 rgba(255,255,255,.25);
}



/* LOGO
----------------------------------------------------------- */

img {
	display: block;
	position: relative;
}



/* LOGO
----------------------------------------------------------- */

a#logo {
	background: -webkit-linear-gradient(bottom , rgba(255,255,255,0) 0%, rgba(255,255,255,0.15) 100%), #324146;
	background: -moz-linear-gradient(bottom , rgba(255,255,255,0) 0%, rgba(255,255,255,0.15) 100%), #324146;
	background: linear-gradient(to top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.15) 100%), #324146;
	display: block;
	height: 80px;
	width: 300px;
	padding: 20px 0;
	position: relative;
}

	a#logo img {
		margin: 10px auto 0 auto;
	}



/* STAGE
----------------------------------------------------------- */

#stage .front {
	display: block;
	position: relative;
	z-index: 5;
}

#stage img.main {
	width: 100%;
}


#bigteaser {
	position: relative;
	padding: 1.25rem 0;
}


#signup {
	display: block;
	position: absolute;
	top: 70px;
	right: 0px;
	width: 260px;
	background: rgba(159,187,88,0.95);
	box-shadow: 0 0 1rem rgba(0,0,0,0.25);
	color: #FFF;
	padding: 20px 20px 0 20px;
	border-radius: 5px;
	z-index: 10;
	font-weight: bold;
}


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

#features {
	border-bottom: 1px dashed rgba(50, 65, 70, 0.2);
}

.featurelist {}

	.featurelist li {
		display: block;
		position: relative;
		float: left;
		width: 30%;
		margin-right: 5%;
	}
	
	.featurelist li.last {
		margin-right: 0;
	}
	
		.featurelist li img.icon {
			margin: 0 auto 2rem auto;
		}
		
		.featurelist li p {
			text-align: justify;
		}
	
	

/* ITEMS
----------------------------------------------------------- */	
	
.item {
	display: flex;
	box-sizing: border-box;
	margin-bottom: 40px;
	margin-bottom: 2.5rem;
}

.item__figure {
	box-sizing: border-box;
	width: 45%;
	padding-right: 1.25rem;
}

.item__figure img {
	display: block;
	width: 100%;
	box-shadow: 0 0 1rem rgba(0,0,0,0.25);
	border: 0.5rem solid #FFF;
	margin-bottom: 2.5rem;
}

.item__content {
	box-sizing: border-box;
	width: 55%;
	padding-left: 1.25rem;
}



.item__content h4 {
	box-sizing: border-box;
	display: block;
	position: relative;
	color: #A0BC41;
	background: rgba(255,255,255,0.75);
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
	border-radius: 0.25rem;
	padding: .75rem .75rem .75rem 0;
	width: 100%;
}





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

footer {
	background: -webkit-linear-gradient(bottom , rgba(0,0,0,0) 0%, rgba(0,0,0,0.15) 100%), #324146;
	background: -moz-linear-gradient(bottom , rgba(0,0,0,0) 0%, rgba(0,0,0,0.15) 100%), #324146;
	background: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.15) 100%), #324146;
	color: rgba(255,255,255,0.5);
	text-align: center;
}

	footer .inner {
		padding: 2rem 0;
	}
	
	#footer-navi {
		border-bottom: 1px dotted #37484f;
		font-size: 0.75rem;
	}
	
	footer p {
		font-size: 0.75rem;
		margin-bottom: 0;
	}
	
	footer small {
		display: inline-block;
		margin: 0 15px;
		line-height: 34px;
		opacity: 0.5;
		font-size: 0.75rem;
		vertical-align: top;
	}
	
	footer a.image {
		display: inline-block;
		margin: 0 15px;
		opacity: 0.5;
		line-height: 34px;
	}
	
		footer a.image img {
			display: inline-block;
			height: 34px;
		}
	
	a.image:hover {
		opacity: 1;
	}

	
	footer p a {color: #FFF; border-bottom: 1px solid rgba(255,255,255,0.2);}
	footer p a:hover {color: #0BC1D3;}