/* Defaults ==================================== */

	html {
		height:100%	
	}

	body {
		height:100%;
		color: #777; 
		font-family: 'Open Sans', sans-serif;
		font-weight: 300;
		padding:0;
		margin:0;
		font-size:14px;
		line-height:1.6em;
		background: #1778a9 url(background.jpg) fixed center center;	
		background-size: 100% 100%;
		height:100%;
	}
	
/* Typography ==================================== */
	
	h1, h2, h3, h4, h5, h6 {
		margin:0 0 1em;
		padding:0; 
		font-weight: 300;
		color:#444;
		font-family: 'Open Sans', sans-serif;
	}
	
	h1 { font-size: 3em; line-height:1.2em; margin:0 0 .8em; }
	h2 { font-size: 1.8em; line-height:1.4em; margin:0 0 .8em;  }
	h3 { font-size: 1.4em; line-height:1.4em; }
	h4 { font-size: 1.2em; line-height:1.4em; }
	h5 { font-size: 1.1em; line-height:1.4em; }
	h6 { font-size: 1em; line-height:1.2em; }
	
	h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
		text-decoration: none
	}	 
	
	p { 
		padding:0 0 1em;
		margin:0;
	}
	
	a {
		color: #fff;
	} 
	
	a.btn, a.btn:visited { 
		-webkit-appearance: none;
		border: 0;
		padding:1em 1.5em;
		margin:0 1em 1em 0;
		font-size:1em;
		line-height:4em; 
		border: solid 1px #226eac; 
		color:#fff;
		text-shadow: 0px -1px rgba(0, 0, 0, 0.2); 		
  		-webkit-border-radius: 4px; 
  		-moz-border-radius: 4px; 
  		border-radius: 4px; 	
		text-decoration: none;	
		background-color: #53c5e1; 
		background-image: -webkit-gradient(linear, left top, left bottom, from(#53c5e1), to(#3aa2cb));
 		background-image: -webkit-linear-gradient(top, #53c5e1, #3aa2cb);
 		background-image: -moz-linear-gradient(top, #53c5e1, #3aa2cb);
 		background-image: -ms-linear-gradient(top, #53c5e1, #3aa2cb);
 		background-image: -o-linear-gradient(top, #53c5e1, #3aa2cb); 
	}
	
	a.btn:hover {
		-webkit-appearance: none;
		background:#168cce;	
	}
	
	img {
		border:0;	
	}
	
	.clearfix {
		clear: both	
	} 
	
	.clear-sml {
		display: none
	}
	
	.align-center {
		text-align: center
	} 
	
	.align-left {
		text-align: left
	} 
	
	.align-right {
		text-align: right
	}
	
 
	 
/* Structure and containers ==================================== */

	section {
		padding:20px
	} 
	
	.left {
		position: fixed;
		top:0;
		left:0;
		bottom:0;
		float: left;
		width:50%;
		background:#fff;	
  		-moz-box-shadow:    0 0 5px 5px rgba(0, 0, 0, 0.08);
  		-webkit-box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.08);
  		box-shadow:         0 0 5px 5px rgba(0, 0, 0, 0.08);		
	}

	.left section {
		text-align: center;
		width:60%;
		margin: 0 auto;
  		display: none
	}

	.left section h1 {
		font-weight:700;
		text-transform: uppercase;
		margin:0 0 20px
	}
		
	.right {
		float: right;
		width:50%;
	}	
	
	.right section {
  		display: none
	}

	.right .narrow {
		margin: 0 auto;
		width:60%
	}

	.right .wide {
		margin: 0 auto;
		width:80%;
		
	}

	.right .form-box {
		background:#fff;
		padding:20px;	
	}

	.right .title {
		color:#fff;
		margin-bottom:20px;
	}

	.right .title p {
		margin:0;
		padding:0;
	}

	.right .title h2 {
		color:#fff;
		font-weight:400;
		text-transform: uppercase;
		font-size:2em;
		margin:0;
		padding:0;
	}

	.right .title h1 {
		color:#fff;
		font-weight:400;
		text-transform: uppercase;
		font-size:2.5em;
		margin:0 0 .4em;
		padding:0;
	}

	.right .title p {
		color: rgba(255,255,255, 0.8);
	}
	
	.right img.phone {
		height:560px;
		width:300px;	
	}
	
	.padded {
		padding:4em	!important
	}
	
/* Responsive options  ==================================== */
	
	@media screen and (max-width: 50em) { 
	
		.left, .right {
			width:100%;
			position: relative
		}
	
		.left section {
			text-align: center;
			width:80%
		}
	
		.right .narrow { 
			width:100%
		}
	
		.right .wide { 
			width:100%
		}
		
		.hamburger { 
			right: 20px;	 
		} 
		
		.clear-sml {
			clear: both;
			display: block
		}
	}