@charset "utf-8";
/* CSS Document */
img {
    width: 100%;
    height:auto;
 
}
p {
	font-size:16px;
	line-height:20px;
}

html, body {
  height: 100%;
  margin: 0;
}
@media screen and (min-width: 680px) {
body {
    line-height: 1;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
  /* Location of the image */
   background-image: url(../images/background-photo.jpg);
   
  /* Background image is centered vertically and horizontally at all times */
  background-position: center center;
   
  /* Background image doesn't tile */
  background-repeat: no-repeat;
   
  /* Background image is fixed in the viewport so that it doesn't move when 
     the content's height is greater than the image's height */
  background-attachment: fixed;
   
  /* This is what makes the background image rescale based
     on the container's size */
  background-size: cover;
}}
@media screen and (min-width: 680px) {
body {
    line-height: 1;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
}
}
 
/* container width. if device has a pixel width of 630px create css container */
@media screen and (min-width: 680px) {
.container {
    width: 100%;
    max-width: 1200px;
    margin-left:auto;
    margin-right:auto;
    margin-top:80px;
     background-color:#FFF;
    min-height:100%;
    padding:1%;
	border:1px solid #aaa;
    box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
     
}
}
@media screen and (max-width: 680px) {
     
.container {
    width: 98%;
    margin:auto;
    padding:1%;
    border:0px;
     
}   
}
.headerLeft {
    float:left;
    width:42%;
    padding:1%;
	margin-top:-40px;
}
@media screen and (max-width: 680px) {
.headerLeft {
    float:left;
    width:96%;
    padding:1%;
}
     
}
.clear {clear:both;}
 
.topnav {
    width:54%;
    height:auto;
    padding-top:5%;
    padding-left:1%;
    float:right;
}
@media screen and (max-width: 680px) {
.topnav {
    width:96%;
    height:auto;
    padding-bottom:2%;
    padding-left:1%;
    float:left;
    padding-top:0%;
}   
}
.topnav a {
    color:#000;
    height:auto;
    font-size:20px;
    padding-right:18px;
    padding-left:4px;
    text-decoration:none;
    font-weight:bold;
     
}
.topnav a:hover {
    opacity:0.5;
}
 
.last {
    padding-right:-10px;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
}
 /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 960px) {
  .topnav a {display: none;}
  .topnav a.icon {
      color:#000;
    float: right;
    display: block;
  }
}
 
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 960px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
    padding-bottom:10px;
  }
} 
.bar {
    width: 30px;
  height: 4px;
  background-color:#000;
  margin: 4px 0;
}
#header {
    border:1px solid #000;
    height:auto;
    width:100%;
     
}

.frameHome {
	width:30%;
	float:left;
	margin:1.5%;
	background-color:#ccd1d4;
	height:auto;
	min-height:300px;
	border:1px solid #000;
	text-align:center;
	line-height:22px;
}
.frameHome a:hover {
	opacity:0.5;
}
@media screen and (max-width: 680px) {
	.frameHome {
	width:97%;
	float:left;
	margin:1.5%;
	background-color:#ccd1d4;
	height:auto;
	min-height:300px;
	border:1px solid #000;
	text-align:center;
}
}

.homeText {
	float:left;
	width:46%;
	margin:2%;
	font-size:16px;
	line-height:20px;
}
@media screen and (max-width: 680px) {
	.homeText {
	float:left;
	width:98%;
	margin:1%;
	font-size:16px;
	line-height:20px;
}}

.footerRight {
	float:right;
	width:48%;
	margin:1%;
	text-align:right;
	font-size:16px;
	line-height:20px;
}
.footerLeft {
	float:left;
	width:48%;
	margin:1%;
}
@media screen and (max-width: 680px) {
	.footerRight {
	float:right;
	width:98%;
	margin:1%;
	text-align:left;
}
.footerLeft {
	float:left;
	width:98%;
	margin:1%;
}}

.frame-img {
	margin:1%;
	max-height:280px;
	width:98%;
}
.frameHome h1 {
	font-size:18px;
}
.frameHome a {
	text-decoration:none;
	color:#000;
}
.frameHome a:visited {
	text-decoration:none;
	color:#000;
}

.googleReview {
    float: right;
    padding-right:10%;
    top: 20px;
}
.google-img {
    max-height: 60px;
    max-width: 120px;
}

.facebook {
	padding-right:10%;
	top:20px;
    float: right;
}
.facebook-logo {
	max-height:40px;
	max-width:40px;
}
@media screen and (max-width: 680px) {
	.facebook {
	padding-left:75%;
	top:20px;
}}
.contactLeft {
	float:left;
	width:38%;
	padding:1%;
}
.contactRight {
	float:right;
	width:58%;
	padding:1%;
}
@media screen and (max-width: 680px) {
.contactLeft {
	float:left;
	width:98%;
	padding:1%;
}
.contactRight {
	float:right;
	width:98%;
	padding:1%;
}}
.green {
	color:#060;
}
.red {
	color:#F00;
}
.error { color:#F00; padding-left:30px; font-size:12px;}
.contact_form :focus {outline: none;}
.contact_form ul {
    width:96%;
    list-style-type:none;
    list-style-position:outside;
    margin:0px;
    padding:0px;
}
.contact_form li{
    padding:12px; 
    border-bottom:1px solid #eee;
    position:relative;
}
.contact_form li:first-child {
    border-bottom:1px solid #777;
}
.contact_form h2 {
    margin:0;
    display: inline;
}
.required_notification {
    color:#d45252; 
    margin:-8px 8px 5px 5px; 
    display:inline;
    float:right;
}
.contact_form label {
    width:150px;
	    margin-top: 3px;
    display:inline-block;
    float:left;
    padding:3px;
}
.contact_form input {
    height:20px; 
    width:220px; 
    padding:5px 8px;
}
@media screen and (min-width: 680px) {
.contact_form textarea {padding:8px; width:300px;}}
@media screen and (max-width: 680px) {
.contact_form textarea {padding:8px; width:220px;}}
.contact_form button {margin-left:156px;}
.contact_form input, .contact_form textarea { 
    border:1px solid #aaa;
    box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
    border-radius:2px;
}
.contact_form input:focus, .contact_form textarea:focus {
    background: #fff; 
    border:1px solid #555; 
    box-shadow: 0 0 3px #aaa; 
}
.contact_form input:focus, .contact_form textarea:focus { /* add this to the already existing style */
    padding-right:70px;
}
.contact_form input, .contact_form textarea { /* add this to the already existing style */
    -moz-transition: padding .25s; 
    -webkit-transition: padding .25s; 
    -o-transition: padding .25s;
    transition: padding .25s;
}
.contact_form input, .contact_form textarea {
    padding-right:30px;
}
.contact_form ::-webkit-validation-bubble-message {
    padding: 1em;
}
.contact_form { 
color: #2a4f5e;
	font-size: 14px;
	line-height:20px;
}
.contact_submit input[type=submit] {
    width: 140px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
	text-align:center;
	color:#FFF;;
	height:30px;
	margin-top:-4px;
	line-height: 26px;
	margin-top:2px;
}
.submit_right {
	float:right;
	padding-right:30%;
	padding-bottom:50px;
}
.policy-bee {
	float:left;
	max-height:100px;
	max-width:100px;
	margin:2%;
}
.fast-track {
	max-height:130px;
	max-width:300px;
	margin:2%;
	float:left;
}
.center {
	text-align:center;
}
.aboutLeft {
	float:left;
	margin:2%;
	width:45%;
}
@media screen and (max-width: 680px) {	
.aboutLeft {
	float:left;
	margin:2%;
	width:96%;
}}

.aboutLeft ul {
	font-size:16px;
	line-height:20px;
}
.testImages {
	float:left;
	width:18%;
	margin:1%;
}
@media screen and (max-width: 680px) {
.testImages {
	float:left;
	width:43%;
	margin:1%;
}	
}

.floatRight {
	float:right;
	margin:1%;
	max-width:32%;
}
@media screen and (max-width: 680px) {
	.floatRight {
	
	margin:2%;
	max-width:96%;
}}

.servicesBlock {
	width:30%;
	float:left;
	margin:1.5%;
	background-color:#ccd1d4;
	height:auto;
	min-height:330px;
	border:1px solid #000;
	text-align:center;
	line-height:22px;
}
@media screen and (max-width: 680px) {
	.servicesBlock {
	width:97%;
	float:left;
	margin:1.5%;
	background-color:#ccd1d4;
	height:auto;
	min-height:300px;
	border:1px solid #000;
	text-align:center;
}
}