/* http://meyerweb.com/eric/tools/css/reset/ 
    v2.0b1 | 201101 
    NOTE:WORK IN PROGRESS
    USE WITH CAUTION AND TEST WITH ABANDON */

html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary,
time,mark,audio,video{
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    font:inherit;
    vertical-align:baseline;
}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{
    display:block;
}
body{
    line-height:1;
}
ol,ul{
    list-style:none;
}
blockquote,q{
    quotes:none;
}
blockquote:before,blockquote:after,
q:before,q:after{
    content:’’;
    content:none;
}
/* remember to define visible focus styles! 
:focus{
    outline:?????;
} */

/* remember to highlight inserts somehow! */
ins{
    text-decoration:none;
}
del{
    text-decoration:line-through;
}

table{
    border-collapse:collapse;
    border-spacing:0;
}

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/* MAIN */

html, body {
	height: 100%;
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	color: #333344;
}

h1, h2, h3, h4, h5 {
	font-family:'alternate-gothic-no-1-d';
	text-transform: uppercase;
}

.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -140px; 
width: 1000px;
background: #fff;
}

a {
color: #00beff;
}

.id {
color: #00beff;
}

p {
line-height: 1.4;
}

hr {
margin: 0 40px;
height: 0;
border-top: 1px solid #e5e5e5;
border-left: 0;
border-right: 0;
border-bottom: 0;
}

/* HEADER */

header {
position: relative;
height: 140px;
}

header .logo {
background: url(../images/logo.png);
width: 290px;
height: 46px;
text-indent: -9999px;
position: absolute;
top: 47px;
left: 40px;
}

/* NAV */

nav {
position: absolute;
right: 40px;
top: 0px;
/* width: 270px; */
}

nav a {
/* font-family:'alternate-gothic-no-1-d'; */
text-transform: uppercase;
text-decoration: none;
font-size: 18px;
color: #555;
font-weight: bold;
}

nav span {
display: block;
float: left;
margin: 0 0 0 20px;
padding: 62px 0 0 0;
}

nav span:hover {
background: url(../images/marker.png) top center no-repeat;
}

nav span:hover a {
color: #00beff;
}

body#home nav span.home {
background: url(../images/marker.png) top center no-repeat;
}

body#home nav span.home a {
color: #00beff;
}

body#services nav span.services {
background: url(../images/marker.png) top center no-repeat;
}

body#services nav span.services a {
color: #00beff;
}

body#contact nav span.contact {
background: url(../images/marker.png) top center no-repeat;
}

body#contact nav span.contact a {
color: #00beff;
}

/* BANNER */

.banner-1 {
height: 200px;
padding: 40px;
background: url(../images/banner-2.jpg);
/* font-family:'UniversNextW04-220CondT'; */
position: relative;
}

.banner-2 {
height: 200px;
padding: 40px;
background: url(../images/banner-2.jpg);
/* font-family:'UniversNextW04-220CondT'; */
position: relative;
}

.banner-3 {
height: 200px;
padding: 40px;
background: url(../images/banner-3.jpg);
/* font-family:'UniversNextW04-220CondT'; */
position: relative;
}

.banner-1 p {
font-size: 41px;
color: #333;
line-height: 1.2;
letter-spacing: -1px;
background: #fefefe;
float: left;
padding: 15px 20px 7px 20px;
font-weight: 100;
}

.banner-1 a {
color: #fff !important;
}

.banner-2 p {
font-size: 41px;
line-height: 1.2;
letter-spacing: -1px;
background: #fefefe;
float: left;
padding: 15px 20px 7px 20px;
font-weight: 100;
}

.banner-1 p b, .banner-2 p b {
/* font-family:'UniversNextW04-520CondM'; */
}

.banner-3 p {
font-size: 41px;
color: #333;
line-height: 1.2;
letter-spacing: -1px;
background: #fff;
float: left;
padding: 15px 20px 7px 20px;
line-height: 44px;
font-weight: 100;
} 

/* MAIN PAGE INTRO */

.mobile-access {
display: none;
}

.intro {
padding: 40px;
}

.intro h1 {
font-size: 48px;
color: #555566;
margin: 0 0 15px 0;
}

.intro p {
margin: 24px 0 0 0;
}

.intro p:first-of-type {
color: #888899;
font-size: 24px;
margin: 0;
}

/* THREE REASONS */

.three-reasons {
padding: 40px;
}

.three-reasons h2 {
font-size: 36px;
margin: 0 0 18px 0;
}

.three-reasons h3 {
font-size: 30px;
margin: 0 0 12px 0;
}

.three-reasons .col3 {
float: left;
width: 31%;
margin: 0 0 0 3.5%;
font-size: 14px;
}

.three-reasons .col3:first-of-type {
margin: 0;
}

/* SERVICE PAGE */

.service-list {
}

.service-list ul {
list-style: square outside;
padding: 0 0 0 20px;
}

.service-list ul li {
margin: 0 0 8px 0;
line-height: 1.2;
}

/* FOOTER STYLES */

footer, .push {
height: 60px;
width: 920px;
padding: 40px;
margin: 0 auto;
}

footer {
background: #f2f2f2;
color: #888;
font-size: 12px;
}

footer img {
margin: 0 0 15px 0;
}

footer div {
color: #999;
line-height: 1.2;
}

/***** Contact Form Elements *****/

#contact h1, #contact h2 {
font-size: 24px;
margin: 0 0 1em 0;
}

.mobile-contact {
display: none;
}

.fields-col {
float: left;
width: 270px;
}

.message-col {
float: right;
width: 270px;
}

.action div {
padding: 15px;
background-color: #efefef; 
}

html[xmlns] .clear {
display: block;
}

* html .clear {
height: 1%;
}

#contactWrapper {
padding: 40px 0 40px 40px;
float: left;
width: 57%;
}

#contactWrapper h1 {
text-transform: uppercase; 
font-weight: bold;
}

#contactWrapper label {
display: block;
float: none;
font-size: 10px;
width: auto;
font-weight: bold;
margin-bottom: 3px;
color: #9999aa;
text-transform: uppercase;
}

#contactWrapper label.error {
display:block; 
float:none; 
font-size:10px; 
width:auto; 
font-weight: normal; 
margin-bottom: 0px; 
color: #bb3737; 
background: #fad6d6; 
margin-top: 5px; 
padding: 5px 7px;
transition: .3s;
-moz-transition: .3s; /* Firefox 4 */
-webkit-transition: .3s; /* Safari and Chrome */
-o-transition: .3s; /* Opera */
}

#contactWrapper label.checked {
display:none; 
background: none; 
border: 0px; 
margin-top: 0px; 
padding: 0px; 
text-indent: -5000px;
}

#contactWrapper em {
color: #00beff;
}

#contactWrapper .stage {
margin-bottom: 15px;
}

#contactWrapper .requiredNote {
margin: 20px 0px 20px; 
color: #9999aa; 
font-weight: bold;
font-size: 10px;
text-transform: uppercase;
clear: both;
}

#contactWrapper .success {
padding: 10px 15px; 
background: #f0ffc1; 
margin-bottom: 25px; 
color: #819934;
}

#contactWrapper>p {
margin: 0 0 30px 0;
}

#contactWrapper .success p {
margin: 0px;
}

form#contactform input[type=text], form#contactform textarea {
border: 1px solid #ecf6fa; 
padding:8px 12px; 
font-size:12px; 
color:#222; 
width: 244px; 
background: #ecf6fa; 
color: #333;
}

form#contactform textarea {
font:12px; 
padding: 12px;
height: 190px;
}

form#contactform input:focus, form#contactform textarea:focus {
outline: none; 
border: 1px solid #00beff;
box-shadow: 0 0 4px 0 #a3d4e5;
}

#submitButton {
display: block;
padding: 8px 12px;
clear: both;
float: right;
}

#submitButton {
background: #00beff;
border-radius: 3px;
color: #fff;
border: 0;
text-transform: uppercase;
font-size: 13px;
font-weight: bold;
cursor: pointer;
text-shadow: 0px 0px 3px #333;
padding: 9px 20px;
}

#submitButton:hover {

}

#submitButton:active {

}

.other-contact {
float: right;
width: 30%;
padding: 40px 40px 40px 0;
}

.other-contact table td {
padding: 0 0 10px 0;
line-height: 1.2;
}

.other-contact table td:first-child {
font-weight: bold;
padding: 0 10px 5px 0;
color: #777;
font-size: 13px;
text-transform: uppercase;
}

@media only screen and (max-width : 769px) {

/* HEADER */



.wrapper {
width: 100%;
}

header {
padding: 20px 0 0 0;
background: #f4f4f4;
height: 110px;
}

header .logo {
position: relative;
top: 0;
left: 0;
margin: 0 0 0 20px;
}

nav {
position: inherit;
width: 290px;
right: 0;
margin: 0 0 0 20px;
}

body#home nav span.home {background: none;}
body#services nav span.services {background: none;}
body#contact nav span.contact {background: none;}

nav span {
padding: 25px 0 0 0;
margin: 0 20px 0 0;
}

nav span:hover {
background: none;
}

.banner-1 {display: none;}
.banner-2 {display: none;}
.banner-3 {display: none;}

hr {
margin: 0 20px;
}



/* CONTENT */

.intro {
padding: 20px;
}

.three-reasons {
padding: 20px;
}

.intro h1 {
font-size: 30px;
}

.intro p:first-of-type {
font-size: 20px;
}

.mobile-access {
display: block;
}

.desktop-access {
display: none;
}

.three-reasons h2 {
font-size: 30px;
}

.three-reasons .col3 {
width: 100%;
margin: 0 0 20px 0;
}

.three-reasons .col3:first-of-type {
margin: 0 0 20px 0;
}

.three-reasons .service-list {
margin: 0 !important;
}

/* FOOTER */

footer, .push {
width: 100%;
padding: 40px 0;
}

footer img {
margin: 0 30px 15px 0;
}

footer div {
margin: 0 30px 0 30px;
}

footer>* {
margin: 0 0 0 30px;
}

/* CONTACT PAGE */

.other-contact {
float: none;
width: 100%;
padding: 20px 0 20px 20px;
}

.other-contact p {
margin: 0 0 20px 0;
}

#contactWrapper {
display: none;
}

.mobile-contact {
display: block;
}

}