@charset "utf-8";
/* CSS Document */
img {
    width: 100%;
	height:auto;

}
body {

	font-family: Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
}
p { font-size:18px; line-height:22px;}

/* container width. if device has a pixel width of 630px create css container */
@media screen and (min-width: 680px) {
.container {
	width: 84%;
	max-width: 980px;
	margin: 0 auto;
	padding: 0;
	
}
}

#header {
	background-color:#e1e6e6;
	width:100%;
	height:auto;
	
}
@media screen and (min-width: 680px) {
#footer {
	background-color:#e1e6e6;
	width:100%;
	height:60px;
	padding-top:12px;
	padding-bottom:12px;
}}
@media screen and (max-width: 680px) {
#footer {
	background-color:#e1e6e6;
	width:100%;
	height:110px;
	padding-top:12px;
	padding-bottom:12px;
}}
.navStrip {
	width:100%;
	background-color:#093678;
	height:auto;

}
.topnav {
	width:100%;
	height:auto;
	background-color:#093678;
	padding-top:8px;
	padding-bottom:8px;
}
.topnav a {
	color:#000;
	height:auto;
	font-size:24px;
	padding-right:32px;
	padding-left:4px;
	text-decoration:none;
	font-weight:bold;
	
}
.topnav a:hover {
	color:#FFF;
	height:auto;
	font-size:24px;
	padding-right:32px;
	padding-left:4px;
	text-decoration:none;
	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:not(:first-child) {display: none;}
  .topnav a.icon {
	  color:#FFF;
    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;
  }
} 

#adbox ul {
	display: inline-block;
	list-style: none;
	margin: 0 0 6px;
	padding: 0;
}
#adbox ul li {
	float: left;
	background: url(../images/separator.png) no-repeat left top;
	min-height: 110px;
	width: 300px;
	padding: 0 8px 0 8px;
	
}
#adbox ul li:first-child {
	background: none;
}
#adbox ul li > div {
	background: url(../images/bg-adbox-feature.png) no-repeat center top;
	padding: 10px 20px 0;
}
#adbox ul li > div h2 {
	letter-spacing: 1px;
}
#adbox ul li > div p {
	color: #2f2203;
	letter-spacing: 1px;
}
#adbox ul li > div p a {
	color: #2f2203;
	text-decoration: none;
}
h2, h3, h1 {
	color: #2f2203;
	font: 24px/24px 'Abel-Regular';
	letter-spacing: 1px;
	margin: 0 0 8px;
	text-transform: uppercase;
	
}
h2 span {
	color: #fc6700;
}
h3 {
	font-size: 20px;
	margin: 0;
	text-transform: none;
}
.main div h1 {
	font-size: 20px;
	margin: 0;
	text-transform: none;
}
p {
	color: #9b8d84;
	font: 14px/24px Arial, Helvetica, sans-serif;
	padding: 0 0 24px;
	margin: 0;
}
.largeBanner {width:100%; height:auto;}
.largeBanner img {
  max-height: 480px;
  max-width: 100%;
}

.separator {
	background: url(../images/divider.png) no-repeat center top;
	display: block;
	height: 2px;
	width:60%;
	margin: 0 auto;
	position: relative;
	padding-bottom:12px;
	
}
.main {
	padding:12px;
	width:62%;
	float:left;
}
.mainSide {
	padding:12px;
	width:30%;
	float:left;
}
@media screen and (max-width: 680px) {
.main {
	padding:2%;
	width:96%;
}
.mainSide {
	padding:2%;
	width:96%;
}
}
.frame {
	padding-top:8px;
	padding-bottom:4px;
}
/** features **/
#features {
	margin: 30px 0 12px;
}
#features p {
	padding: 0;
}
#features .more {
	margin: 0
}
#features ul {
	display: inline-block;
	list-style: none;
	width: 100%;
	margin: 18px 0 18px -10px;
	padding: 0;
}
#features ul li {
	float: left;
	width: 50%;
	margin: 0 10px 22px;
	padding: 0 10px 0 0;
}
@media screen and (min-width: 680px) {
.featuresBox {
	float:left;
	width:50%;
	padding-bottom:12px;
	padding-top:6px;
}}
@media screen and (max-width: 680px) {
.featuresBox {
	float:left;
	width:90%;
	padding-bottom:12px;
	padding-top:6px;
}}
.featuresImg {
	float:left;
	max-width:50%;
	margin:10px;
}
#connect a {
	background: url(../images/icons.png) no-repeat;
}
.more:hover, #connect a:hover {
	filter:alpha(opacity=80);
	opacity:0.8;
}
@media screen and (min-width: 680px) {
#footerLeft {
	float:left;
	width:70%;
}}
@media screen and (max-width: 680px) {
#footerLeft {
	float:left;
	width:90%;
	padding-bottom:12px;
	padding-left:2%;
}}
@media screen and (max-width: 680px) {
#connect {
	width:90%;
	float: left;
	display: inline-block;
	list-style: none;
	margin: 0;
	padding-bottom:20px;
}}
@media screen and (min-width: 680px) {
#connect {
	float: right;
	display: inline-block;
	list-style: none;
	margin: 0;
	padding: 0;
}}
#connect a {
	float: left;
	display: inline-block;
	height: 30px;
	width: 30px;
	margin: 0 15px;
	
}
#connect a.googleplus {
	background-position: 0 0;
}
#connect a.mail {
	background-position: 0 -40px;
}
#connect a.facebook {
	background-position: 0 -80px;
}
#connect a.twitter {
	background-position: 0 -120px;
}
.clear { clear:both;}

.aboutLeft {
	float:left;
	width:46%;
	padding:2%;
}

.aboutRight {
	float:left;
	width:46%;
	padding:2%;
	
}
@media screen and (max-width: 680px) {
	.aboutLeft {
	float:left;
	width:90%;
	padding:2%;
}

.aboutRight {
	float:left;
	width:90%;
	padding:2%;
	
}}

.box {
	background-color:#e1e6e6;
	border-radius: 12px;
	padding:12px;
	width:100%;
	margin-bottom:16px;
}
.servicesLeft {
	background: url(../images/dash.png) repeat-y right top;
	min-height: 500px;
	float:left;
	width:66%;
	padding:2%;
}

.servicesRight {
	float:left;
	width:26%;
	padding:2%;
	
}
@media screen and (max-width: 680px) {
.servicesLeft {
	background:none;
	float:left;
	width:90%;
	padding:2%;
}

.servicesRight {
	float:left;
	width:90%;
	padding:2%;
	
}}
.heading1 {
	background: url(../images/interface.png) no-repeat;
}

.heading1 {
	background-position: -258px -60px;
	height: 54px;
	line-height: 54px;
	width: 240px;
	margin: 0 auto;
	text-align: center;
	text-shadow: 0 1px #fff;
}
.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_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;
}
.red {
	color:#F00;
}
.error { color:#F00; padding-left:30px; font-size:12px;}
.faq-list {
	list-style: none;
	padding: 5px;
	margin-bottom:18px;
}
.faq-list li {
	
	margin-bottom:18px;
}
.headerings {
	padding-left:2%;
	padding-right:2%;
}
.floatImgLeft {
	float:left;
	padding-right:12px;
	padding-bottom:12px;
}
.minHeight {
	min-height:500px;
}
div.gallery {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
	width:auto;
}

div.gallery:hover {
    border: 1px solid #777;
}

div.gallery img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}
.center {
	text-align:center;
}
.right {
	padding-left:70%;
	font-weight:bold;
	padding-top:3px;
}
.serviceBlock {
	float:left;
	width:40%;
	padding:2%;
	border-radius: 25px;
    border: 2px solid #000;
	margin:2%;
	height:450px;
	
}
@media screen and (max-width: 680px) {
.serviceBlock {
	float:left;
	width:92%;
	padding:2%;
	border-radius: 25px;
    border: 2px solid #000;
	margin:2%;
	height:auto;
	
}	}
@media screen and (max-width: 680px) {
	.bodyText {
		width:96%;
		padding:2%;
	}}

.serviceBlock a {
	color:#2f2203;
	text-decoration:none;
}
.serviceBlock a:hover {
	color:#2f2203;
	text-decoration:none;
	opacity:0.5;
}
.floatLeft {
	float:left;
	padding:2%;
	max-width:400px;
	max-height:300px;
}
.floatRight {
	float:right;
	padding:2%;
	max-width:400px;
	max-height:300px;
}
li {
	margin:5px;
}
.subServiceBlock {
	float:left;
	width:18%;
	padding:2%;
	border-radius: 25px;
    border: 2px solid #000;
	margin:1%;
	height:200px;
	
}
@media screen and (max-width: 680px) {
.subServiceBlock {
	float:left;
	width:92%;
	padding:2%;
	border-radius: 25px;
    border: 2px solid #000;
	margin:2%;
	height:auto;
	
}	}
.subServiceBlock a {
	color:#2f2203;
	text-decoration:none;
}
.subServiceBlock a:hover {
	color:#2f2203;
	text-decoration:none;
	opacity:0.5;
}

.galleryServiceBlock {
	float:left;
	width:26%;
	padding:2%;
	border-radius: 25px;
    border: 2px solid #000;
	margin:1%;
	height:220px;
	
}
@media screen and (max-width: 680px) {
.galleryServiceBlock {
	float:left;
	width:92%;
	padding:2%;
	border-radius: 25px;
    border: 2px solid #000;
	margin:2%;
	height:auto;
	
}	}

#linksBlock {
	width:100%;
	background-color:#cccccc;
	height:auto;
	min-height:100px;
	list-style-type: none;
    margin: 0;
    padding: 0;
	padding-bottom:12px;
	padding-top:7px;
}
#linksBlock h2 {
	padding-top:8px;
	padding-left:8px;
	color:2495ee;
}

#linksBlock li {
	display: inline-block;
    font-size: 14px;
    padding: 20px;
}