#header {
	background-color:#fff;
	padding: 0;

    height: auto;
    overflow:auto;
	background-image: none;
	background-repeat: repeat-x;
	background-position: bottom;
}
#main, #content {background-color:#fff;
 position:relative;
 overflow:auto;
z-index:1;
}
img {border-style:none;}

a:link,  a:visited, a:hover, a:active{text-decoration:none;}
a:link {color:#09C;}
a:hover {color:#69C;}

a.services:link{text-decoration:none;z-index:2; position:relative;}
a#main:link,  a#main:visited, a#main:hover, a#main:active {text-decoration:none;z-index:1}

#intro {margin-top: 10px; margin-bottom:10px;}

#logo {position:relative;
       top:25px;
	   left:0px;}

body {
	font-size:100%;
	line-height: 1.5;
	font-family: 'Asap', sans-serif;
	margin:0;
	padding:0;
	background-color:#3684ff;
	
}

blockquote {
background:#e7eced;
border-left:10px solid #ccc;
margin:1.5em 10px;
padding:.5em 10px;
quotes:"\201C""\201D""\2018""\2019";
}
blockquote:before {
color:#ccc;
content:open-quote;
font-size:4em;
line-height:.1em;
margin-right:.25em;
vertical-align:-.4em;
}
blockquote p {
display:inline;
}

#strap {width:960px; margin:0; padding:0;
	background-color: #44484f;
background-image: url(../images/dark-noise.png);
background-repeat: repeat;}

.fl {float:left; margin:10px 0 0 0;}
.fr {float:right;margin:10px 0 0 0;}

.footer-icons {width:auto; margin:0 auto !important; display:block;}

.footer-icons p {display:inline; vertical-align:middle;}


.di {display:inline;}

#strap h2 {font-size:24px; color:#CCC;
padding:0 10px;
font-weight:300;}

#header h3 {font-size:24px;}

#footer p {float:none;
	font-family:Arial, Helvetica, sans-serif;
	font-size:90%; font-weight:normal;
	color:#fff;	margin-top:30px;}

#footer{background-color:#666;
z-index:2;
 width: auto;
    height: auto;
    overflow:auto;}

#footer img { 
float:none;
width:auto;
vertical-align: middle;
padding:0px;
margin: 10px;
}

h2, h3 {
font-family: ‘asap’, Arial, san-serif; font-weight: 400; 
	margin: 5px 0 5px 0;
	font-size:125%;

}

#main h3 {
	font-size:110%;
	margin-top:-45px;
width:auto;
	background-color:#CCC;
	padding: 4px;
	font-weight:normal;
	z-index:3;
	position:relative;
}

.plumber {width: 270px;
clear:both;}

 #content img,  #main img {
position:relative;
	z-index:2;}

/* Containers
----------------------------------------------------------------------------------------------------*/
.container_12, #wrapper {
	margin-left: auto;
	margin-right: auto;
	width: 960px;
	background-color:#fff;
	overflow:auto;}

	
#wrapper{margin-top:15px;}

/* Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------*/

.alpha {
	margin-left: 0 !important;
}

.omega {
	margin-right: 0 !important;
}



/* Grid >> Global
----------------------------------------------------------------------------------------------------*/
 
.grid_1, 
.grid_2, 
.grid_3, 
.grid_4, 
.grid_5, 
.grid_6, 
.grid_7, 
.grid_8, 
.grid_9, 
.grid_10, 
.grid_11,
.grid_12{
	display:inline;
	float: left;
	position: relative;
	margin-left: 10.0px;
	margin-right: 10.0px;
	background-color:#fff;

}


/* Grid >> 2 Columns
----------------------------------------------------------------------------------------------------*/

.container_12 .grid_1{
	width:60px;
}

.container_12 .grid_2{
	width:140px;
}

.container_12 .grid_3{
	width:220px;
}

.container_12 .grid_4{
	width:300px;
}

.container_12 .grid_5{
	width:380px;
}

.container_12 .grid_6{
	width:460px;
}

.container_12 .grid_7{
	width:540px;
}

.container_12 .grid_8{
	width:620px;
}

.container_12 .grid_9{
	width:700px;
}

.container_12 .grid_10{
	width:780px;
}

.container_12 .grid_11{
	width:860px;
}

.container_12 .grid_12{
	width:940px;
}





/* Prefix Extra Space >> 2 Columns
----------------------------------------------------------------------------------------------------*/

    .container_12 .prefix_1 {
	padding-left:80px;
}

    .container_12 .prefix_2 {
	padding-left:160px;
}

    .container_12 .prefix_3 {
	padding-left:240px;
}

    .container_12 .prefix_4 {
	padding-left:320px;
}

    .container_12 .prefix_5 {
	padding-left:400px;
}

    .container_12 .prefix_6 {
	padding-left:480px;
}

    .container_12 .prefix_7 {
	padding-left:560px;
}

    .container_12 .prefix_8 {
	padding-left:640px;
}

    .container_12 .prefix_9 {
	padding-left:720px;
}

    .container_12 .prefix_10 {
	padding-left:800px;
}

    .container_12 .prefix_11 {
	padding-left:880px;
}



/* Suffix Extra Space >> 2 Columns
----------------------------------------------------------------------------------------------------*/

    .container_12 .suffix_1 {
	padding-right:80px;
}

    .container_12 .suffix_2 {
	padding-right:160px;
}

    .container_12 .suffix_3 {
	padding-right:240px;
}

    .container_12 .suffix_4 {
	padding-right:320px;
}

    .container_12 .suffix_5 {
	padding-right:400px;
}

    .container_12 .suffix_6 {
	padding-right:480px;
}

    .container_12 .suffix_7 {
	padding-right:560px;
}

    .container_12 .suffix_8 {
	padding-right:640px;
}

    .container_12 .suffix_9 {
	padding-right:720px;
}

    .container_12 .suffix_10 {
	padding-right:800px;
}

    .container_12 .suffix_11 {
	padding-right:880px;
}



/* Push Space >> 2 Columns
----------------------------------------------------------------------------------------------------*/

    .container_12 .push_1 {
	left:80px;
}

    .container_12 .push_2 {
	left:160px;
}

    .container_12 .push_3 {
	left:240px;
}

    .container_12 .push_4 {
	left:320px;
}

    .container_12 .push_5 {
	left:400px;
}

    .container_12 .push_6 {
	left:480px;
}

    .container_12 .push_7 {
	left:560px;
}

    .container_12 .push_8 {
	left:640px;
}

    .container_12 .push_9 {
	left:720px;
}

    .container_12 .push_10 {
	left:800px;
}

    .container_12 .push_11 {
	left:880px;
}





/* Pull Space >> 2 Columns
----------------------------------------------------------------------------------------------------*/

    .container_12 .pull_1 {
	right:80px;
}

    .container_12 .pull_2 {
	right:160px;
}

    .container_12 .pull_3 {
	right:240px;
}

    .container_12 .pull_4 {
	right:320px;
}

    .container_12 .pull_5 {
	right:400px;
}

    .container_12 .pull_6 {
	right:480px;
}

    .container_12 .pull_7 {
	right:560px;
}

    .container_12 .pull_8 {
	right:640px;
}

    .container_12 .pull_9 {
	right:720px;
}

    .container_12 .pull_10 {
	right:800px;
}

    .container_12 .pull_11 {
	right:880px;
}




/* Clear Floated Elements
----------------------------------------------------------------------------------------------------*/


.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}


.clearfix:after {
	clear: both;
	content: ' ';
	display: block;
	font-size: 0;
	line-height: 0;
	visibility: hidden;
	width: 0;
	height: 0;
}

.clearfix {
	display: inline-block;
}

* html .clearfix {
	height: 1%;
}

.clearfix {
	display: block;
}

.mt_10 {margin-top:10px}
.mt_20 {margin-top:20px}
.mb_5 {margin-bottom:5px}
.mb_15 {margin-bottom:15px}
.bp_strap {
	
	color:#fff;
	padding:0;
	margin:0 10px;
	background-repeat: no-repeat;
	overflow:hidden;
	background-color:#333;
	display-block}
	
	.bp_strap  p {padding: 0 10px;}
	
/* Fix the width of the body */
body {
min-width: 960px;
margin:auto;

}

/* Wrapper */
.row {
width:960px;
margin:auto;
}

/* Column margins */
.col_12, /* full width */
.col_9, /* 3/4 width */
.col_8, /* 2/3 width */
.col_6, /* half width */
.col_4, /* 1/3 width */
.col_3 /* 1/4 width */
{
margin-left: 10px;
margin-right: 10px;
display: inline;
float: left;
}

/* First and Last */
.first {
margin-left:0;
}

.last {
margin-right:0;
}

/* Column widths taking into account the margins */
.col_12 {width:940px;}
.col_9 {width:620px;}
.col_8 {width:700px;}
.col_6 {width:460px;}
.col_4 {width:220px;}
.col_3 {width:300px;}

img {width:100%;}





.mytopnav {
  overflow: hidden;
  background-color: none;
  border-top: 6px solid #fff;


}

.mytopnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 8px 16px;
  text-decoration: none;
  font-size: 17px;

}


.mytopnav a:hover {
  background-color: #69d6fa;
  color: black;
}

.mytopnav .icon {
  display: none;
}


.mynavfull {width:960px;   background-image: url(../images/nav-bk-v5.png); background-image-repeat: none;
   overflow:hidden; }

.bp img {width:auto; height:auto;}


 .gallery {
        list-style: none;
        overflow: hidden;
        padding: 0;
        margin: 0;
    }
    
    .gallery li {
        float: left;
        margin: 4px;
    }

/*****************/
/* MEDIA QUERIES */
/*****************/

/* Tablet Screen Sizes */
@media only screen and (min-width: 768px) and (max-width: 959px) {
/* Resize the body */
body {min-width:767px;}

/* Resize the row */
.row {width:767px;}

/* Resize the columns */
.col_12 {width:748px;}
.col_9 {width:492px;}
.col_8 {width:556px;}
.col_6 {width:364px;}
.col_4 {width:172px;}
.col_3 {width:236px;}

}

/* Mobile Landscape Screen Sizes */
@media only screen and (min-width: 480px) and (max-width: 767px) {
/* Resize the body */
body {min-width:479px;}

/* Resize the row */
.row {width:479px;}

/* Resize the columns */
.col_12 {width:460px;}
.col_9 {width:225px;}
.col_8 {width:225px;}
.col_6 {width:225px;}
.col_4 {width:225px; margin-left:0px;}
.col_3 {width:225px; margin-left:0px;}

/* Fix the .last issue */
.last {
margin-left:0;
margin-right:10px;
}

}


 /* 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: 600px) {
  .mytopnav a:not(:first-child) {display: none;}
  .mytopnav a.icon {
    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: 600px) {
  .mytopnav.responsive {position: relative;
    }
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .mytopnav.responsive a {
	padding: 8px 16px;
    float: none;
    display: block;
    text-align: left;
	border-bottom: 1px solid #fff;
  }
} 




/* Mobile Portrate Screen Sizes */
@media only screen and (max-width: 479px) {
/* Resize the body */
body {min-width:320px;}

.responsive  {
  width: 290px;
  height: auto;
    position: relative;
    z-index: 2;
}

.responsive, .responsive1, .responsive2, .responsive3, .responsive4 {
  width: 290px;
  height: auto;
  
}

.bp img, #main h3, h1  { margin-left:10px;}
.mynavfull {width:320px !important;}

.footer-icons p {display:block; vertical-align:middle; text-align:left;}

	.bp_strap  p {padding: 0 10px; text-align:center}
	
	p, h3 {padding: 10px;}
	
#header {
	
	height:180px;
	max-height:180px;}


/* Resize the row */
.row {width:320px;}

/* Resize the columns */
.col_12 {width:300px;}
.col_9 {width:300px;}
.col_8 {width:300px;}
.col_6 {width:300px;}
.col_4 {width:300px; margin-left:0px;}
.col_3 {width:300px; margin-left:0px;}

/* Fix the .last issue */
.last {
margin-left:0;
margin-right:10px;
}
}