@charset "UTF-8";
/* CSS Document */

/* CSS reset from http://meyerweb.com/eric/tools/css/reset/ */
@import url('reset.css');

/* Google Web Font */
@import url(http://fonts.googleapis.com/css?family=Cousine);
@import url(http://fonts.googleapis.com/css?family=Economica);
@import url(http://fonts.googleapis.com/css?family=Maven+Pro:400,700,500,900);

html {
	max-width: 100%;
	height: 100%;
}

body {
	max-width: 100%;
	min-height: 100%;
	height: 100%;
	font-family: 'Maven Pro', Helvetica, Arial, sans-serif;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.5em;
	color: #EEE;
	background-color: #F9F9F9;
	position: relative;
}

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

header {
	text-transform: uppercase;
	height: 184px;
	width: 100%;
	width: 100%;
	/* gradient generated at colorzilla.com */
	background: rgb(0,11,38); /* Old browsers */	
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMDBiMjYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDYxMDJiIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);	
	background: -moz-radial-gradient(center, ellipse cover,  rgba(0,11,38,1) 0%, rgba(6,16,43,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,11,38,1)), color-stop(100%,rgba(6,16,43,1))); /* Chrome,Safari4+ */
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,11,38,1) 0%,rgba(6,16,43,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-radial-gradient(center, ellipse cover,  rgba(0,11,38,1) 0%,rgba(6,16,43,1) 100%); /* Opera 12+ */
	background: -ms-radial-gradient(center, ellipse cover,  rgba(0,11,38,1) 0%,rgba(6,16,43,1) 100%); /* IE10+ */
	background: radial-gradient(ellipse at center,  rgba(0,11,38,1) 0%,rgba(6,16,43,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000b26', endColorstr='#06102b',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
}

header img {
	height: 82%;
	float: left;
	margin: 15px 2px 0 2em;
}

h1 {
	font-size: 4.8em;
	font-weight: 700;
	letter-spacing: 0;		
	float: left;
	margin-top: 1.78em;
}

h2 {
	font-size: 1.95em;
	font-weight: 700;
	letter-spacing: 0.31em;
	color: rgb(142,156,172);
	float: left;
	width: 80%;
	margin-top: 0.8em;
	margin-left: 2px;
}

/* 25+ years... banner */
header > a:first-child + h1 + h2 + div {
	background: #8E9CAC;
	padding: 30px 6px 0 6px;
	font-family: Cousine, Helvetica, sans-serif;
	line-height: 1em;
	height: 65px;
	width: 72px;
	margin-left: auto;
	margin-right: 3em;
	position: relative;
}

header > a:first-child + h1 + h2 + div:before {
	content: "";
	position: absolute;
	bottom: 0;
	right: 0;
	border-width: 16px 16px 0 0;
	border-style: solid;
	border-color: #8E9CAC rgb(0,11,38);
}

header > a:first-child + h1 + h2 + div > p:first-child {
	font-size: 3em;
	font-weight: 100;
	margin-bottom: 10px;
}

header > a:first-child + h1 + h2 + div > p:first-child + p {
	font-size: 11px;
}

header > h6 {
	display: block;
	position: absolute;
	top: 0;
	margin-top: 0.5em;
	text-transform: lowercase;
}

header > h6 > a {
	text-decoration: none;
	color: #85A826;	
}

header > h6 > a:hover {
	color: #FFF;	
}

header > a:first-child + h1 + h2 + div + h6 {
	right: 150px;	
}

header > a:first-child + h1 + h2 + div + h6 + h6 {
	right: 350px;	
}

@media screen and (max-width: 620px) {
	header > h6 {
		display: none;
	}
}

@media screen and (max-width: 500px) {
	header {
		height: 110px;
	}

	header img {
		height: 68%;
		float: left;
		margin: 15px 2px 0 2.5%;
	}

	h1 {
		margin-top: 35px;
	}

	h2 {
		display: block;
		width: auto;
	}

	header > a:first-child + h1 + h2 + div {
		margin-right: 2.5%;
	}
}

@media screen and (max-width: 410px) {
	header {
		height: 80px;
	}

	header img {
		margin-top: 4px;
		height: 80%;
	}

	h1 {
		font-size: 3em;
		margin-top: 30px;
	}

	h2 {
		font-size: 1.2em;
		padding-right: 40px;
		margin-top: 4px;
	}

	header > a:first-child + h1 + h2 + div {
		padding: 15px 6px 0 6px;
		height: 50px;
		width: 52px;
	}

	header > a:first-child + h1 + h2 + div > p:first-child {
		font-size: 2.3em;
		font-weight: 100;
		margin-bottom: 5px;
	}

	header > a:first-child + h1 + h2 + div > p:first-child + p {
		font-size: 8px;
		line-height: 9px;
	}

	header > a:first-child + h1 + h2 + div:before {
		border-width: 10px 10px 0 0;
	}
}

/* -------------------------------------- NAVIGATION --------------------------------------- */


nav {
	width: 100%;
	margin: 0;
	position: absolute;
	top: 174px;
}

nav li {
	font-size: 1.5em;
	text-transform: uppercase;
	text-align: center;
	width: 25%;
	padding: 0.5em 0 1.5em 0;
	float: left;
	margin-top: 10px;
	-webkit-transition: margin-top 0.1s;
	-ms-transition: margin-top 0.1s;
	-moz-transition: margin-top 0.1s;
	-o-transition: margin-top 0.1s;
	transition: margin-top 0.1s;
}

nav li::after {
	width: 0;
	height: 0;
	border-top: 50px solid transparent;
	border-left: 100px solid red;
	border-bottom: 50px solid transparent;	
} 

nav li:hover {
    margin-top: 0;
}

li.selected:hover {
	margin-top: 10px;
}

nav li:first-child {
	background: #F69B1D;
}

nav li:first-child + li {
	background: #1E3556;
}

nav li:first-child + li + li {
	background: #8E9CAC;
}

nav li:first-child + li + li + li {
	background: #85A826;
}

nav li:first-child + li + li + li + li {
	background: #E8E8E8;
}

nav li a {
	color: #EEE;
	text-decoration: none;
}

nav li:first-child + li + li + li + li a {
	color: #7F7F7F;
}

#mobileNav {
	position: absolute;
	top: 184px;
	left: 0;
	display: none;
	width: 100%;
	height: 60px;
	background-color: #85A826;
	z-index: 9999999;
}

#mobileNav > div {
	width: 42%;
	height: 100%;
	margin: 0;
	float: left;
}

#mobileNav > div + div + div {
	width: 16%;
}

.button {
	display: block;
	width: 96%;
	height: 50px;
}

.button, .navButton {
	margin: 3px auto 4px auto;
	border-top: 1px solid #CCC;
	border-right: 2px solid #444;
	border-left: 1px solid #CCC;
	border-bottom: 2px solid #444;
	border-radius: 5px;
	background-color: #85A826;
}

.button:hover, .navButton:hover {
	border-top: 2px solid #666666;
	border-right: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
	border-left: 2px solid #666666;
}

.button > img {
	display: block;
	height: 30px;
	width: auto;
	margin: 10px auto;
}

#mobileNav > div:first-child > .button > img {
	height: 20px;
	margin: 15px auto;
}

.navButton {
	display: block;
	width: 92%;
	height: 36px;
	border-radius: 5px;
	padding-top: 14px;
}

.navButton > div {
	display: block;
	width: 30px;
	height: 5px;
	border-radius: 3px;
	margin: 4px auto 0 auto;
	background-color: #F9F9F9;
}

.navButton:hover > div {
	background-color: #333;
}

.navButton > div:first-child {
	margin-top: 0;
}

#mobileNav ul {
	position: fixed;
	top: 0;
	right: -180px;
	background-color: #333;
	width: 180px;
	height: 100%;
}

#mobileNav ul > a {
	display: block;
	padding: 12px 0;
	width: 48px;
	margin: 5px 5px 0 auto;
	color: #FFF;
	text-align: center;
	text-decoration: none;
	font-size: 2em;
	font-weight: bolder;
}

#mobileNav ul > a:hover {
	color: #85A826;
}

#mobileNav ul > a:active {
	color: #85A826;
}

#mobileNav ul li {
	padding: 1em 0;
}

#mobileNav ul li:hover {
	background-color: #85A826;
}

#mobileNav ul li:active {
	background-color: #F69B1D;
}

#mobileNav ul li a {
	display: block;
	text-decoration: none;
	color: #FFF;
	width: 100%;
	text-indent: 0.5em;
	text-transform: uppercase;
	font-weight: bolder;
}

@media screen and (max-width: 620px) {
	nav {
		display: none; 
	}

	#mobileNav {
		display: block;
	}
}

@media screen and (max-width: 500px) {
	#mobileNav {
		top: 110px;
	}	
}

@media screen and (max-width: 410px) {
	#mobileNav {
		top: 80px;
	}	
}

/* ---------------------------------------- CONTENT ------------------------------------------- */

body > header:first-child + nav + div + div {
	position: relative;
	margin-top: 36px;
	padding-top: 12px;
	background: #F9F9F9;
	clear: both;
	width: 100%;
	height: auto;
	z-index: 999999; 
	overflow: hidden;
}

body > header:first-child + nav + div + div > div {
	width: 960px;
	margin: 1em auto;	
}

@media screen and (max-width: 959px) {
	body > header:first-child + nav + div + div > div {
		width: 100%;
		margin: 1em 0;
	}
}

@media screen and (max-width: 620px) {
	body > header:first-child + nav + div + div {
		position: static;
		padding-top: 60px;
		margin-top: 0;
	}
}

/* ----------------------------------------- SERVICES --------------------------------------- */
#services {
	color: #999;
	font-size: 1.3em;
	height: 960px;
}

#services p {
	margin: 0 3%;
	line-height: 1.8em;
}

#services > p:first-child {
	line-height: 1.8em;
}

#services > div {
	width: 45%;
	float: left;
	margin: 1em 2.5%;
	margin-bottom: 2em;
	min-height: 820px;
	position: relative;
}

#services > div > div {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 98%;
	height: 100%;
}

#services div h3,
#services div h4,
#services div p,
#services div ul {
	margin: 1em;
}

#services div h3 {
	text-transform: uppercase;
	font-family: Cousine, Helvetica, sans-serif;
	font-weight: 100;
	font-size: 1.5em;
	line-height: 1em;

	margin: 0.5em 0 0 0.6em;
}

#services div h4 {
	color: #666666;	
}

#services div ul {
	list-style: outside;
	width: 80%;
	margin: 2em auto;
}

#services div li {
	line-height: 1.8em;	
}

#services div ul ul {
	margin: 0 2em;
}

#business > div {
	border: 4px solid  #B4B6B8;
}

#business h3 {
	color: #B4B6B8;	
}			

#specialty > div {
	border: 4px solid #F69B1D;
}

#specialty h3 {
	color: #F69B1D;
}

.corner {
	display: block;
	position: absolute;
	top: -8px;
	right: -4px;
	width: 50%;
	height: 60px;
	border-bottom: 4px solid #333;
	background-color: #F9F9F9;
}

.corner div {
	display: block;
	position: absolute;
	top: -5px;
	left: -18px;
	width: 25px;
	height: 64px;
	background-color: #F9F9F9;
	-webkit-transform: rotate(-30deg);
	-ms-transform: rotate(-30deg);
	-moz-transform: rotate(-30deg);
	-o-transform: rotate(-30deg);
	transform: rotate(-30deg);
}

#business .corner {
	border-bottom: 4px solid #B4B6B8;
}

#business .corner div,
#business .bottomCorner {
	border-left: 4px solid #B4B6B8;
}

#specialty .corner {
	border-bottom: 4px solid #F69B1D;
}

#specialty .corner div,
#specialty .bottomCorner {
	border-left: 4px solid #F69B1D;
}

.bottomCorner {
	display: block;
	width: 40px;
	height: 40px;
	position: absolute;
	right: -24px;
	bottom: -22px;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);	
	background-color: #F9F9F9;
}

@media screen and (max-width: 952px) {
	#services > div {
		width: 48%;
		margin: 1em 1%;
	}
}

@media screen and (max-width: 894px) {
	#services {
		height: 980px;
	}

	#services > div {
		width: 49%;
		margin: 1em 0.5%;
		min-height: 840px;
	}
}

@media screen and (max-width: 790px) {
	#services {
		height: 1200px;
	}

	#services > div {
		width: 49%;
		margin: 1em 0.5%;
		min-height: 1000px;
	}
}

@media screen and (max-width: 640px) {
	#services {
		height: auto;
		padding-bottom: 20px;
	}

	#services > div {
		float: none;
		width: 96%;
		margin: 20px auto;
		min-height: 0;
	}

	#services > div > div {
		position: static;
	}

	.corner {
		right: 3px;
	}

	.corner div {
		height: 60px;
		top: -1px;
	}

	.bottomCorner {
		right: -17px;
		bottom: -19px;
	}
}

@media screen and (max-width: 548px) {
	.corner {
		right: 2px;
	}
}

@media screen and (max-width: 500px) {
	.bottomCorner {
		right: -20px;
	}
}

@media screen and (max-width: 475px) {
	.corner {
		right: 0;
	}
}

@media screen and (max-width: 399px) {
	#services div h3 {
		font-size: 1.2em;
	}

	.corner {
		right: -1px;
	}

	.bottomCorner {
		right: -22px;
	}
}


/* ------------------------------------ WHAT TO DO BEFORE YOU CALL --------------------------- */
#helpWrapper {
	padding-bottom: 30px;
}

#help {
	color: #58595B;
	font-size: 1.3em;
	line-height: 1.5em;
	padding-bottom: 30px;
}

#help > p {
	color: #1E3556;
	float: left;
	width: 45%;
	margin: 1.5em 2.5%;
}

#help > p > a {
	color: #1E3556;
	font-weight: bold;	
}

#help > div {
	width: 100%;
	clear: both;
}

#help > div > div {
	margin: 1em 2.5%;
	width: 45%;
	/*height: 17em;*/
	height: auto;
	float: left;
}

/* tip number container */
#help > div > div > div {
	background: #8E9CAC;
	color: #FFF;
	display: block;
	width: 3.5em;
	padding-right: 1.5em;
	text-align: right;
	float: left;
	padding-top: 0;
	height: 1.4em;
}

#help > div > div > div > h5 {
	text-transform: uppercase;
	font-size: 0.8em;
}

/* tip number corners */
#help > div > div > div > div {
	width: 0.6em;
	height: 1.5em;
	color: #FFF;
	float: left;
	position: relative;
	z-index: 9999;
}

#help > div > div > div > h5:first-child + div {
	display: block;
	-webkit-transform: rotate(-20deg);
	-ms-transform: rotate(-20deg);
	-moz-transform: rotate(-20deg);
	-o-transform: rotate(-20deg);
	transform: rotate(-20deg);
	position: relative;
	left: 4.5em;
	bottom: 2.37em;
	background-color: #F9F9F9;
}

#help > div > div > div > h5:first-child + div + div {
	display: block;
	-webkit-transform: rotate(20deg);
	-ms-transform: rotate(20deg);
	-moz-transform: rotate(20deg);
	-o-transform: rotate(20deg);
	transform: rotate(20deg);
	position: relative;
	left: 3.97em;
	bottom: 0.87em;	
	background-color: #F9F9F9;
}

#help > div > div > p {
	font-weight: 100;
	width: 75%;
	float: left;
	margin-left: 1em;
}

@media screen and (max-width: 830px) {
	#help > div > div > p {
		padding-top: 20px;
	}
}

@media screen and (max-width: 670px) {
	#help > p:first-child {
		margin: 0 2.5% 1.5em 2.5%;
	}

	#help > p {
		width: 95%;
		float: none;
	}

	#help > div > div {
		width: 95%;
		clear: left;
	}
}

@media screen and (max-width: 620px) {
	#helpWrapper {
		margin-top: 0;
	}
}

@media screen and (max-width: 480px) {
	#help > div > div > div {
		float: none;
	}

	#help > div > div > p {
		width: 100%;
		clear: left;
		margin: 0;
		padding-top: 0;
	}

}

/* ----------------------------------------- RATES ------------------------------------------- */
#ratesWrapper {
	padding: 12px 0;
}

#rates, #plans {
	color: #8E9CAC;
	position: relative;

}

#rates h3 {
	font-size: 1.5em;
	font-weight: 100;
	width: 95%;
	margin: 0.5em auto;	
}

#rates h4 {
	font-size: 1.5em;
	font-weight: 100;
	padding-top: 1em;
	text-indent: 1.3em;
	width: 100%;
	height: 2em;
}

#rates > h3:first-child + h4,
#rates > h3:first-child + h4 + p + h4 + p + h4,
#rates > h3:first-child + h4 + p + h4 + p + h4 + p + h4 + p + h4 {
	background: #8E9CAC;
	color: #EEE;	
}

#rates strong {
	font-weight: 600;	
}

#rates p {
	position: absolute;
	right: 0;
	font-size: 1.9em;
	font-family: Helvetica, Arial, sans-serif;
	padding: 0.4em 1.6em 0 0;
	width: 2em;
	height: 1.5em;
	text-align: center;
}

#rates > h3:first-child + h4 + p {
	top: 36px;
	color: #EEE;
}

#rates > h3:first-child + h4 + p + h4 + p {
	top: 90px;
}

#rates > h3:first-child + h4 + p + h4 + p + h4 + p {
	top: 144px;
	color: #EEE;
}

#rates > h3:first-child + h4 + p + h4 + p + h4 + p + h4 + p {
	top: 198px;
}

#rates > h3:first-child + h4 + p + h4 + p + h4 + p + h4 + p + h4 + p {
	top: 252px;
	color: #EEE;
	width: 6em;
	padding-right: 0.5em;
}

#rates p span {
	font-size: 0.6em;
	font-weight: 100;	
}

#plans {
	margin-bottom: 20px;
}

#plans div {
	width: 33.333%;
	float: left;
	position: relative;
}

#plans div div {
	width: 294px;
	height: 312px;
	border: 5px solid #8E9CAC;
	font-family: Helvetica, Arial, sans-serif;
	padding: 1em 0 2em 0;
	position: relative;
}

#monthly_plan > div {
	margin: 0 auto 0 0;	
}

#flex_plan > div {
	float: none;
	margin: 0 auto;
	margin-bottom: 20px;
}

#phone_support > div {
	float: right;
}

#plans img {
	width: 40%;

	margin: 0 1em;
}

#plans div div h1 {
	font-family: Economica, Helvetica, sans-serif;	
	font-size: 1.8em;
	line-height: 1.3em;
	width: 45%;
	float: right;
	margin-top: 2em;
}

#plans div div h2 {
	font-size: 1.3em;
	letter-spacing: normal;
	color: #444;
	width: 100%;
	margin-left: 12px;
	margin-bottom: 12px;
}

#plans div div p {
	font-size: 1.3em;
	font-weight: lighter;
	color: #888;

	margin: 1em 12px 0 12px;
}

#plans div div .price {
	font-size: 2em;
	font-family: Verdana, Geneva, sans-serif;
	font-weight: normal;
	color: #8E9CAC;
	display: block;
	width: auto;
	position: absolute;
	bottom: 24px;
	left: 0;
}

#plans div div .price span {
	font-size: 18px;
	font-weight: lighter;
}

#ratesWrapper small {
	display: block;
	width: 960px;
	margin: 0.5em auto;
	font-size: 1.4em;
	font-weight: lighter;
	color: #888;
	clear: both;
}

@media screen and (max-width: 960px) {
	#plans > div > div {
		float: none;
		width: 90%;
		margin: 1em auto;
	}

	#ratesWrapper small {
		width: 95%;
	}
}

@media screen and (max-width: 820px) {
	#plans > div > div {
		height: 360px;
	}

	#plans div div h1 {
		margin-top: 1em;
		height: 84px;
	}
}

@media screen and (max-width: 800px) {
	#rates h3 {
		width: 90%;
	}

	#rates h4 {
		height: auto;
		width: 80%;
		padding-left: 5%;
		padding-right: 15%;
		padding-bottom: 14px;
		text-indent: 0;
	}

	#rates > h3:first-child + h4 + p {
		top: 34px;
		color: #EEE;
	}

	#rates > h3:first-child + h4 + p + h4 + p {
		top: 94px;
	}

	#rates > h3:first-child + h4 + p + h4 + p + h4 + p {
		top: 152px;
	}

	#rates > h3:first-child + h4 + p + h4 + p + h4 + p + h4 + p {
		top: 202px;
	}

	#rates > h3:first-child + h4 + p + h4 + p + h4 + p + h4 + p + h4 {
		width: 70%;
		padding-right: 25%;
	}
}

@media screen and (max-width: 700px) {
	#plans #phone_support div .price {
		font-size: 1.5em;
	}
}

@media screen and (max-width: 620px) {
	#ratesWrapper {
		padding-top: 60px;
	}

	#plans {
		margin-top: 50px;
	}

	#plans > div {
		float: none;
		width: 95%;
		margin: 12px auto;
	}

	#plans #phone_support div .price {
		font-size: 2em;
	}

}

@media screen and (max-width: 590px) {
	#rates > h3:first-child + h4 + p + h4 + p + h4 + p + h4 + p + h4 + p {
		top: 262px;
	}
}

@media screen and (max-width: 562px) {
	#rates h4 {
		width: 70%;
		padding-left: 5%;
		padding-right: 25%;
	}

	#rates > h3:first-child + h4 + p {
		top: 44px;
	}

	#rates > h3:first-child + h4 + p + h4 + p {
		top: 112px;
	}

	#rates > h3:first-child + h4 + p + h4 + p + h4 + p {
		top: 172px;
	}

	#rates > h3:first-child + h4 + p + h4 + p + h4 + p + h4 + p {
		top: 222px;
	}

	#rates > h3:first-child + h4 + p + h4 + p + h4 + p + h4 + p + h4 + p {
		top: 280px;
	}
}

@media screen and (max-width: 520px) {
	#rates > h3:first-child + h4 + p + h4 + p + h4 + p {
		top: 178px;
	}

	#rates > h3:first-child + h4 + p + h4 + p + h4 + p + h4 + p {
		top: 238px;
	}

	#rates > h3:first-child + h4 + p + h4 + p + h4 + p + h4 + p + h4 + p {
		top: 298px;
	}
}

@media screen and (max-width: 509px) {
	#rates > h3:first-child + h4 + p + h4 + p {
		top: 118px;
	}

	#rates > h3:first-child + h4 + p + h4 + p + h4 + p {
		top: 196px;
	}

	#rates > h3:first-child + h4 + p + h4 + p + h4 + p + h4 + p {
		top: 256px;
	}

	#rates > h3:first-child + h4 + p + h4 + p + h4 + p + h4 + p + h4 {
		width: 60%;
		padding-right: 35%;
	}

	#rates > h3:first-child + h4 + p + h4 + p + h4 + p + h4 + p + h4 + p {
		top: 312px;
	}

	#plans > div > div {
		height: 320px;
	}
}

@media screen and (max-width: 400px) {
	#rates > h3:first-child + h4 + p + h4 + p + h4 + p + h4 + p {
		top: 256px;
	}

	#rates > h3:first-child + h4 + p + h4 + p + h4 + p + h4 + p + h4 {
		width: 50%;
		padding-right: 45%;
	}

	#rates > h3:first-child + h4 + p + h4 + p + h4 + p + h4 + p + h4 + p {
		top: 324px;
	}
}

@media screen and (max-width: 380px) {
	#rates h4 {
		width: 65%;
		padding-left: 5%;
		padding-right: 30%;
	}

	#rates > h3:first-child + h4 + p {
		top: 48px;
	}

	#rates > h3:first-child + h4 + p + h4 + p {
		top: 156px;
	}

	#rates > h3:first-child + h4 + p + h4 + p + h4 + p {
		top: 258px;
	}

	#rates > h3:first-child + h4 + p + h4 + p + h4 + p + h4 + p {
		top: 328px;
	}

	#rates > h3:first-child + h4 + p + h4 + p + h4 + p + h4 + p + h4 + p {
		top: 394px;
	}

	#plans > div > div {
		height: 300px;
	}
}
/* --------------------------------------- CONTACTUS ----------------------------------------- */
#contactusWrapper {
	background-color: #F9F9F9;
	padding-top: 18px;
}

#contactus > div {
	width: 49%;	
	float: left;
	margin: 0 auto 2em auto;
}

#contactus div h3 {
	font-size: 2.5em;
	margin: 1.1em;
	margin-bottom: 2em;
	color: #7F7F7F;	
	text-transform: uppercase;
}

#contactus > div > h3:first-child + div {
	border: 3px solid #8E9CAC;
	height: 60px;
	width: 86%;
	margin: auto; 
	padding-top: 0.9em;
}

#contactus h4 {
	font-size: 1.5em;
	font-weight: 500;
	display: block;
	width: 90%;
	margin: 0.2em 0;
	color: #7F7F7F;
	padding: 0 5%;
	text-transform: uppercase;
	position: relative;
}

#contactus h4 a {
	text-decoration: none;
	color: #B4B6BB;
	font-size: 1em;	
	text-transform: uppercase;
	position: absolute;
	right: 5%;
}

#contactus h4 a:hover {
	color: #F69B1D;	
}

/* social buttons */
#contactus > div > div + div {
	width: 90%;
	height: auto;
	margin-left: 5%;
	margin-top: 5em;	
	overflow: hidden;
	position: relative;
}

#contactus > div > div > div {
	width: 33.3%;
	float: left;
}

#contactus > div > div > div > a {
	display: block;
	position: relative;
	text-decoration: none;
	height: auto;
	width: auto;
	margin: 0 auto;
}

#contactus > div > div > div > a > img {
	display: block;
	width: 90%;
	height: auto;
	margin: 0 auto;
}

#contactus > div > div > div > a > p {
	height: 1.5em;
	width: 100%;
	padding-top: 0.5em;
	font-size: 1.5em;
	color: #333;
	background: #FFF;
	opacity: 0.6;
	position: absolute;
	bottom: -2em;
	text-align: center;
	-webkit-transition: bottom 0.3s;
	-ms-transition: bottom 0.3s;
	-moz-transition: bottom 0.3s;
	-o-transition: bottom 0.3s;
	transition: bottom 0.3s;
}

#contactus > div > div > div > a:hover > p {
	bottom: 0;
}

#contactus > div > div + div > img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
}

/* right div */
#contactusWrapper div form {
	position: relative;
	width: 80%;
	margin: 1em auto;
	padding: 1.5em;
}

#contactus div form label {
	background: none;
	color: #7F7F7F;
	display: block;
	width: 110px;
	font-size: 16px;
	font-weight: normal;
}

#contactus > div form input,
#contactus > div form textarea {
	width: 99%;
	margin: 0.5em 0 1em 0;
	padding: 0.7em;
	border: 0.2em solid #8E9CAC;
	font-size: 1.3em;
	background: none;
}

#contactus > div form textarea {
	margin-bottom: 0.5em;	
}

#contactus #testLabel {
	width: 200px;
}

#contactus form input[type="submit"] {
	width: 8em;
	color: #8E9CAC;
	border-radius: 7px;	
	background: none;
}

#contactus form input[type="submit"]:hover {
	background: #8E9CAC;
	color: #FFF;
	cursor: pointer;
}

#contactus form small {
	position: absolute;
	color: #85A826;
	margin-left: 110px;
	margin-bottom: 10px;
}

#err_name {
	top: 18px;
}

#err_email {
	top: 192px;
}

#err_message {
	top: 268px;
}

#err_test {
	left: 100px;
	top: 452px;
}

@media screen and (max-width: 875px) {
	/*#contactus > div > div + div {
		width: 30%;
		margin-left: 3%;
	}*/
}

@media screen and (max-width: 700px) {
	#contactus > div > div > a > p {
		height: 2.5em;
		bottom: -3em;
	}
}

@media screen and (max-width: 690px && min-width: 621px) {
	#contactus h4 {
		width: auto;
		margin-bottom: 2em;
	}

	#contactus h4 a {
		position: static;
		width: 100%;
		float: left;
		clear: both;
	}

	#contactus > div > h3:first-child + div {
		height: auto;
	}
}

@media screen and (max-width: 650px) {
	#contactus div h3 {
		line-height: 1.1em;
	}
}

@media screen and (max-width: 620px) {
	#contactusWrapper {
		padding-top: 60px;
	}

	#contactus > div {
		width: 95%;
		margin: 0 2.5%;
		float: none;
	}

	#contactus div h3 {
		margin: 0 0 0.5em 7.5%;
	}

	#contactus > div > h3:first-child + div {
		border: 3px solid #8E9CAC;
		height: 60px;
		width: 90%;
		margin: auto; 
		padding-top: 0.9em;
	}

	#contactus h4 {
		font-size: 1.5em;
		font-weight: 500;
		display: block;
		width: 90%;
		margin: 0.2em 0;
		color: #7F7F7F;
		padding: 0 5%;
		text-transform: uppercase;
		position: relative;
	}

	#contactus h4 a {
		text-decoration: none;
		color: #B4B6BB;
		font-size: 1em;	
		text-transform: uppercase;
		position: absolute;
		right: 5%;
	}

	#contactus > div > div + div {
		margin-top: 2em;
	}

	#contactus > div > div > div > a > p {
		bottom: 0;
	}

	#contactusWrapper div form {
		width: 100%;
		margin: 30px 0;
		padding: 0;
	}

	#contactus div form label {
		width: 100%;
	}

	#contactus > div form input,
	#contactus > div form textarea {
		width: 95%;
		padding: 2.5%;
	}

	#contactus form small {
		position: static;
		margin-left: 0;
	}
}

@media screen and (max-width: 399px) {
	#contactus > div > h3:first-child + div {
		height: 50px;
	}

	#contactus h4 {
		font-size: 1.2em;
	}

	#contactus h4 a {
		font-size: 0.8em;
	}

	#contactus > div > div > div > a > p {
		height: 2.5em;
	}
}

/* ----------------------------------------- EMAIL -------------------------------------------- */
#emailWrapper {
	height: 100%;
}

#email {
	height: 100%;
}

#email > div {
	height: 100%;
	padding-top: 50px;
}

#email > div > p {
	width: 95%;
	font-size: 2em;
	color: #555;
	text-align: center;
	margin: 0 2.5% 6px 2.5%;
}

/* social buttons */
#email > div > div {
	width: 400px;
	height: auto;
	margin: 2em auto;	
	overflow: hidden;
	position: relative;
}

#email > div > div > div {
	width: 33.3%;
	float: left;
}

#email > div > div > div > a {
	display: block;
	position: relative;
	text-decoration: none;
	height: auto;
	width: auto;
	margin: 0 auto;
}

#email > div > div > div > a > img {
	display: block;
	width: 90%;
	height: auto;
	margin: 0 auto;
}

#email > div > div > div > a > p {
	height: 1.5em;
	width: 100%;
	padding-top: 0.5em;
	font-size: 1.5em;
	color: #333;
	background: #FFF;
	opacity: 0.6;
	position: absolute;
	bottom: -2em;
	text-align: center;
	-webkit-transition: bottom 0.3s;
	-ms-transition: bottom 0.3s;
	-moz-transition: bottom 0.3s;
	-o-transition: bottom 0.3s;
	transition: bottom 0.3s;
}

#email > div > div > div > a:hover > p {
	bottom: 0;
}

#email > div > div + div > img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
}

@media screen and (max-width: 400px) {
	#email > div > div {
		width: 95%;
	}
}

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

footer {
	float: left;
	clear: both;
	width: 100%;
	height: 100px;
	background-color: #666666;	
}

footer h5 {
	display: block;
	font-size: 1em;
	text-align: left;
	margin-left: 1em;
	margin-top: 1em;
	width: 300px;
	float: left;
	line-height: 1em;
}

footer h5 + h5 {
	clear: left;
	margin-top: 5px;
}

footer h6, footer > a {
	font-size: 1.5em;
	font-weight: lighter;
	text-align: center;
	margin: 0 1em;
	float: right;
	line-height: 18px;
}

footer a {
	color: #85A826;
	text-decoration: none;
}

footer a:hover {
	color: #F69B1D;
}

@media screen and (max-width: 850px) {
	footer h6, footer > a {
		margin-top: 0.5em;
		clear: left;
	}
}

@media screen and (max-width: 539px) {
	footer {
		height: auto;
	}

	footer h5, footer h6, footer > a {
		display: inline-block;
		width: 95%;
		margin: 0.5em 2.5%;
		float: none;
		text-align: left;
	}
}

@media screen and (max-width: 390px) {
	footer h5 + h5 {
		display: block;
		width: 150px;
	}
}