@font-face {
	font-family: Avenir;
	src: url("fonts/AvenirNextLTPro-Regular.otf") format("opentype");
}

@font-face {
	font-family: Avenir;
	font-weight: bold;
	src: url("fonts/AvenirNextLTPro-Bold.otf") format("opentype");
}
*, * {
	padding:0px;
	font-weight:normal;
}
html, body {
	font-family: Avenir;
	padding:0;
	margin:0;
	height:100%;
    max-height: 100%;
	font-size:16px;
	color:#353535;
}
a:link,
a:visited,
a:active {
	color:#2c5a79;
	text-decoration:none;
}
#content {
	width:100%;
	height:100%;
}
#right-side,
#left-side {
	text-align:center;
	height:100%;
	width:50%;
}
/* LEFT SIDE - title & form */
#left-side {
	width:50%;
	background-color:#f3f8fb;
	float:left;
	left:0;
}
#left-side .wrapper {
	height:85%;
	width:350px;	
	left:10%;
	position:relative;
	margin:15% auto 0 auto;
}
#left-side #top {
	height:30%;
}
#left-side h1,
#left-side h2,
#left-side #top img {
	float:left;
}
#left-side h1, 
#left-side h2 {
	display:inline;
	margin:5px 0 0 20px;
}
#left-side h1 {
	font-size:30px;
	font-weight:bold;
	color:#54acde;
}
#left-side h2 {
	font-size:16px;
	font-weight:normal;
}
/* subscribe form */
form {
	text-align:left;
}
form .form-wrapper {
	border: 1px solid #c7deee;
    border-radius: 5px;
	background-color:#FFF;
	width:325px;
	height:50px;
}
form input {
	color:#2c5a79;
	height:48px;
	border:none;
}
form input#email {
	width:210px;
	font-size:14px;
	padding-left:10px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
form input#submit {
	height:48px;
	margin-top:1px;
	border:none;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
	background-color:#c7deee;
	width:100px;
}
#confirm-results,
#signup-results {
	width:100%;
	text-align:center;
	border-radius:3px;
	border:2px solid #54acde;
	background-color:#EEE;
	color:#2c5a79;
	padding:10px 0px;
}
#confirm-results {
	height:auto;
	padding:25px 0px;
}
/* FOOTER */
#left-side #bottom {
	position:absolute;
	bottom:10px;
	width:100%;
}
#left-side #bottom p a {
	color:#353535;
}
#right-side {
	float:right;
}
#right-side .wrapper {
	width:100%;
	height:90%;
	margin-top:5%;
	position:relative;
	right:10%;
	background:url(../images/iphone.png) top center no-repeat;
	background-size:contain;
}
.clearfix {
	clear:both;
	font-size:0px;
	line-height:0px;
}

/* SMALLER SCREENS */
@media screen and (max-width: 800px) {
	
	#left-side,
	#right-side {
		width:100%;
	}
	#left-side .wrapper,
	#right-side .wrapper {
		right:0;
		left:0;		
	}
}