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

@font-face {
  font-family: 'fontello';
  src: url('fonts/fontello.eot?48549303');
  src: url('fonts/fontello.eot?48549303#iefix') format('embedded-opentype'),
       url('fonts/fontello.woff?48549303') format('woff'),
       url('fonts/fontello.ttf?48549303') format('truetype'),
       url('fonts/fontello.svg?48549303#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'fontello';
    src: url('fonts/fontello.svg?48549303#fontello') format('svg');
  }
}
*/
 
 [class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
 
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */
 
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
     
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
 
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
 
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
 
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
 
.icon-mail:before { content: '\e800'; } /* '' */
.icon-ok:before { content: '\e801'; } /* '' */
.icon-cancel:before { content: '\e802'; } /* '' */
.icon-cancel-circled:before { content: '\e803'; } /* '' */
.icon-help:before { content: '\e804'; } /* '' */
.icon-quote-left:before { content: '\e805'; } /* '' */
.icon-quote-right:before { content: '\e806'; } /* '' */
.icon-angle-left:before { content: '\e807'; } /* '' */
.icon-angle-right:before { content: '\e808'; } /* '' */
.icon-angle-up:before { content: '\e809'; } /* '' */
.icon-angle-down:before { content: '\e80a'; } /* '' */
.icon-cc-visa:before { content: '\e80b'; } /* '' */
.icon-cc-mastercard:before { content: '\e80c'; } /* '' */
.icon-cc-discover:before { content: '\e80d'; } /* '' */
.icon-cc-amex:before { content: '\e80e'; } /* '' */
.icon-desktop:before { content: '\e80f'; } /* '' */
.icon-brush:before { content: '\e810'; } /* '' */
.icon-chart-outline:before { content: '\e811'; } /* '' */
.icon-clipboard:before { content: '\e812'; } /* '' */
.icon-dot:before { content: '\e813'; } /* '' */
.icon-menu:before { content: '\e814'; } /* '' */

/*** Base Styles ***/

body, html{
	font-family: 'Open Sans', sans-serif;
	background-color: #1d1d1d;
	overflow-x: hidden;
	}

a{
	text-decoration:none;
	}
	a:hover{
		text-decoration:underline
		}
	
#mainbody{
	background-color:#fff;
	}
	
#logo{
	display:block;
	max-width: 225px;
	}

#header{
	padding:15px;
	position:relative
	}

img{
	width: 100%;
	}
	img.thumb{width:auto}
p{
	margin: 0;
	padding-bottom:20px
	}	
.content-width{
	max-width: 900px;
	margin: 0 auto
	}

	
.footer-top{
	background-color: #d5d5d5;
	border-top: 2px solid #8e8e8e
	}
	
#topbar{
	background-color: #1d1d1d;
	padding:8px;
	text-align:right
	}
	#topbar .item{
		color:#f1f1f1;
		display: inline-block
		}
	#topbar .address{
		font-size: 12px;
		display:none
		}

#nav{
	border: 1px solid #ccc;
	margin-top:10px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	padding:3px;
	overflow:hidden;
	-webkit-user-select: none;  
  	-moz-user-select: none;    
  	-ms-user-select: none;      
  	user-select: none;
	min-width: 240px;
	z-index: 999;
	background-color:#fff
	}	
	#nav.open{
		border-color: #999;
		}	
		#nav.open .icon-menu{
			color: #333
			}
	#nav ul{
		display:none;
		list-style:none;
		padding: 10px;
		padding-top: 0
		}
		#nav ul li{
			list-style:none;
			display: block
			}
			#nav ul li a{
				display: block;
				color: #3954a5;
				margin-top:7px;
				-webkit-border-radius: 3px;
				-moz-border-radius: 3px;
				border-radius: 3px;
				padding:6px 12px;
				background-color: #ecf1ff
				}
				#nav ul li a:hover{
					text-decoration: none
					}
	
.menu-btn{
	position: relative;
	padding: 5px
	}
	.menu-btn .menu-text{
		margin-left: 33px
		}
	.menu-btn .icon-menu{
		font-size: 25px;
		color: #666;
		position:absolute;
		margin: -6px 0 0 -3px
		}
	.menu-btn:hover{
		cursor: pointer
		}

.payment-forms{
	margin:0 auto;
	width: 215px;
	padding-bottom: 3px
	}		
.payment-forms ul{
	list-style:none;
	}
	.payment-forms ul li{
		display:inline-block;
		list-style:none;
		margin-left: 10px;
		font-size: 30px;
		color: #666
		}
		.payment-forms ul li:first-child{
			margin-left:0
			}

.footer-nav{
	padding-top:25px;
	text-align:center
	}			
.footer-nav ul{
	list-style: none;
	text-align:center
	}
	.footer-nav ul li{
		display:inline-block;
		margin-left: 15px
		}
		.footer-nav ul li:first-child{
			margin-left: 0
			}
		.footer-nav ul li a{
			text-decoration:none;
			color:#fff;
			font-size:14px
			}
			.footer-nav ul li a:hover{
				text-decoration:underline
				}
.footer-slogan{
	text-align:center;
	margin-top:25px;
	color:#fff;
	font-size: 22px
	}
	.footer-slogan span{
		display: inline-block
		}
	.footer-slogan .ico{
		font-size:18px;
		margin: 0 10px
		}
.copyright{
	text-align:center;
	color: #fff;
	margin-top:30px;
	font-size:12px;
	}
	
#hp-image{
 	position: relative
 	}
	.hp-contact-now{
		position:relative;
		background-color:#b2181b;
		height: 35px
		}
		.hp-contact-now img{
			display:none
			}
		.hp-contact-now a{
			display:block;
			position:absolute;
			color:#fff;
			text-align:center;
			line-height: 35px;
			width:100%;
			font-size:16px
			}
			
#callouts{
	background: url(/images/shadow-bottom.png) bottom center no-repeat;
	padding:15px 15px 40px 15px
	}
	#callouts .block{
		margin:0 auto;
		margin-top: 10px;
		padding-top:10px;
		border-top: 1px dotted #ccc;
		}
		#callouts .block:first-child{
			margin-top:0;
			padding-top: 0;
			border:none
			}
		#callouts .block .group{
			display:table;
			}
		#callouts .group .graphic{
			display:table-cell;
			vertical-align:middle
			}
		#callouts .group .desc{
			display:table-cell;
			vertical-align:middle;
			padding-left:10px
			}
			#callouts .group .desc span{
				display:block;
				font-size:13px
				}
				#callouts .group .desc span.title{
					text-transform:uppercase;
					font-weight:bold;
					font-size:14px
					}
	#callouts .group .graphic .wrap{
		background-color:#3954a5;
		display:block;
		width: 35px;
		height:35px;
		-webkit-border-radius: 35px;
		-moz-border-radius: 35px;
		border-radius: 35px;
		}
		#callouts .group .graphic .wrap span{
			position: absolute;
			color:#fff;
			margin: 3px 0 0 5px;
			font-size: 18px
			}
			
/** Homepage content styles **/

.hp-main-content{
	margin-top: 10px;
	padding:0 20px 20px 20px
	}
	.hp-main-content .leftcol{
		display:none
		}
.featured-products h2{
	font-size: 20px;
	font-weight: 400;
	line-height: 24px;
	margin: 0
	}
	.featuerd-products-wrap{
	
		}	
		.featured-product{
			margin-top: 15px
			}
			.featured-product a{
				display:block;
				text-decoration:none;
			}
			.featured-product h3{
				font-size: 16px;
				font-weight:400;
				color:#3954a5;
				margin:0
				}
			.featured-product a:hover{
				text-decoration:none
				}
			.featured-product img{
				border: 1px solid #ccc;
				margin-top: 10px
				}
.side-nav{
	margin-right:25px
	}
.side-nav ul{
	list-style:none;
	margin: 0;
	padding: 0
	}	
	.side-nav ul li{
		
		}
		.side-nav ul li a{
			color: #0d0d0d;
			display:block;
			padding: 5px;
			font-size: 14px
			}
			.side-nav ul li a:hover{
				color: #3954a5;
				}
				
#inner-banner{
	height: 50px;
	margin: 0 -2000px;
	padding: 0 2000px;
	background: url(../images/inner-banner.jpg) top center no-repeat #3954a5;
	margin-bottom:8px
	}
	#inner-banner .content{
		max-width: 900px;
		margin: 0 auto;
		position:relative
		}
	.page-title{
		font-weight:200;
		font-size: 28px;
		line-height: 49px;
		margin-left:25px;
		position:absolute;
		z-index:99;
		color:#fff
		}
	.inner-cta{
		display: none
		}

.inner-content{
	min-height: 400px;
	}
.inner-content ul{
	margin: 0;
	padding:0;
	margin-left:30px;
	}
	.inner-content ul li{
		line-height:30px
		}
		
.rightcol .side-nav{
	-webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
	-moz-box-shadow:    0px 0px 5px 0px rgba(50, 50, 50, 0.75);
	box-shadow:         0px 0px 5px 0px rgba(50, 50, 50, 0.75);
	border: 1px solid #e1e1e1;
	margin-right:0;
	padding:15px;
	margin-top:20px
	}
	.rightcol .side-nav h3{
		margin:0;
		color: #333;
		font-weight: 400;
		font-size: 20px;
		line-height:24px;
		margin-bottom:15px
		}
		.rightcol .side-nav ul li{
			display:block;
			margin-top:3px;
			padding:3px;
			background-color: #d9e1f8;
			}
			
.breadcrumbs a,
.breadcrumbs a:visited{
	color: #3954a5;
	font-size:14px
	}
	.breadcrumbs{
		font-size: 14px;
		border: 1px dotted #ccc;
		border-left:none;
		border-right:none;
		padding:5px;
		margin-bottom:20px
		}

.gallery:after{
	clear:both;
	content: "";
  	display: table;
	}		
.gallery .gallery-thumb{
	display:block;
	border: 1px solid #ccc;
	padding: 2px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	float:left;
	margin: 0 10px 10px 0
	}
	.gallery .gallery-thumb:hover{
		border-color: #4c9afb
		}

#callouts{
	display:none
	}		
.home #callouts{
	display:table;
	}
	
.cols{

	}
	.cols:after{
		clear:both;
		content: "";
  		display: table;
		}	
.col{
	margin-bottom: 30px;
	}
	

#contactForm{
	display:block;
	position:relative
	}
#contactForm label{
	display:block;
	margin-bottom:4px
	}
#contactForm .field{
	margin-bottom:12px;
	}
#contactForm input,
#contactForm textarea{
	border: 1px solid #bac7ea;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	background-color:#e0e8ff;
	padding: 8px;
	width:75%;
	font-size:14px
	}
	#contactForm input.active,
	#contactForm textarea.active{
		border-color: #3954a5
		}
#contactForm .error input{
	border-color: #ff0000;
	}
#contactForm .error-txt{display:none; color: #ff0000; font-size:14px; margin-top:3px}
#contactForm .error .error-txt{display:block}
#contactForm textarea{
	height:75px;
	}
	
.success-msg{
	border: 1px solid #50c144;
	background-color:#a4fa9b;
	color: #1c8b10;
	padding: 10px;
	display:none
	}
	.success-msg p{
		padding-bottom:0;
		}
	
.overlay{
	background-color: #fff;
	position:absolute;
	display:none;
	z-index:9;
	width:100%;
	height:100%;
	filter: alpha(opacity=50);
  	opacity: 0.5;
	}

.processing .loading,
.processing .overlay{
	display:block
	}	
.loading{
	display:block;
	position:absolute;
	right: -60px;
	width:40px;
	height:40px;
	background: url('/images/loading.gif') center center no-repeat;
	margin: 15px 0 0 20px;
	display:none
	}

.submit-btn{
	display:inline-block; 
	position:relative
	}	
.submit-btn a{
	margin-top: 15px;
	display:inline-block;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	background-color: #3954a5;
	padding: 10px 15px;
	color:#fff
	}
	.submit-btn a:hover{
		background-color: #253b7c;
		text-decoration:none
		}

/*** END Base Styles ***/


@media only screen and (min-width:480px){

#logo{
	display:block;
	max-width: 249px;
	}

#topbar .address{
	display:inline-block;
	margin-left:15px
	}

}

@media only screen and (min-width:425px){

#nav{ 
	margin-top: -58px;
    min-width: 150px;
    position: absolute;
    right: 24px;
	}

.featured-products-wrap{
	margin: 0 -10px;
	}
.featured-products-wrap:after{
	clear:both;
	content: "";
  	display: table;
	}	
.featured-product{
	float:left;
	width:50%;
	}
	.featured-product a{
		padding: 0 10px
		}

}

@media only screen and (min-width:660px){

#nav{
	border: none;
	margin-top: -63px;
	background: none
	}
	#nav .menu-btn{
		display:none
		}
	#nav ul{
		display: block !important;
		}
		#nav ul li{
			display: inline-block
			}
			#nav ul li a{
				background-color: #fff
				}
				
.hp-contact-now{
	position:absolute;
	background:none;
	right: 15px
	}
	.hp-contact-now img{
		display:block
		}
	.hp-contact-now a{
		line-height: 51px;
		font-size:18px
		}
#callouts{
	display:block
	}
#callouts{
	min-height: 80px;
	margin: 0 10px;
	padding-left:0;
	padding-right:0;
	display:table
	}		
#callouts .block{
	display:table-cell;
	vertical-align:middle;
	padding: 0 12px;
	padding-top:0;
	border:none;
	}
	#callouts .block:first-child{
		}
#callouts .group .graphic .wrap{
	width: 45px;
	height:45px;
	}
	#callouts .group .graphic .wrap span{
		margin: 4px 0 0 6px;
		font-size: 24px
		}

.hp-main-content{
	display:table;
	width: 100%;
	padding:0;
	padding-bottom:20px
	}
	.hp-main-content .leftcol{
		display:table-cell;
		vertical-align:top;
		width: 190px;
		padding-left:15px;
		padding-top:8px;
		background: rgba(241,111,92,1);
		background: -moz-linear-gradient(left, rgba(241,111,92,1) 0%, rgba(246,41,12,1) 0%, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 13%, rgba(244,244,244,1) 100%);
		background: -webkit-gradient(left top, right top, color-stop(0%, rgba(241,111,92,1)), color-stop(0%, rgba(246,41,12,1)), color-stop(0%, rgba(255,255,255,1)), color-stop(13%, rgba(255,255,255,1)), color-stop(100%, rgba(244,244,244,1)));
		background: -webkit-linear-gradient(left, rgba(241,111,92,1) 0%, rgba(246,41,12,1) 0%, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 13%, rgba(244,244,244,1) 100%);
		background: -o-linear-gradient(left, rgba(241,111,92,1) 0%, rgba(246,41,12,1) 0%, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 13%, rgba(244,244,244,1) 100%);
		background: -ms-linear-gradient(left, rgba(241,111,92,1) 0%, rgba(246,41,12,1) 0%, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 13%, rgba(244,244,244,1) 100%);
		background: linear-gradient(to right, rgba(241,111,92,1) 0%, rgba(246,41,12,1) 0%, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 13%, rgba(244,244,244,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f16f5c', endColorstr='#f4f4f4', GradientType=1 );
		border-right: solid 3px #d4d4d4;
		}	
	.hp-main-content .rightcol{
		display:table-cell;
		vertical-align: top;
		padding-right:15px;
		padding-left: 25px
		}	
.inner-cta{
	position: absolute;
	right:20px;
	display: block;
	margin-top: 9px;
	}
	.inner-cta a{
		display:block;
		background-color:#879ad1;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
		color: #fff;
		padding: 5px 10px
		}	
		.inner-cta a:hover{
			text-decoration: none;
			background-color:#657cbe
			}
			
.rightcol .side-nav{
	display:none
	}

.cols{
	padding: 0 10px;
	margin-top: 10px
	}
.col{
	float: left
	}
	.col .content{
		padding: 0 15px;
		}
	.width-60{
		width: 60%
		}
	.width-40{
		width: 40%
		}
		
}

@media only screen and (min-width:820px){

#nav ul li{
	margin-left: 35px
	}
	#nav ul li a{
		padding: 6px 22px;
		}
		#nav ul li a:hover{
			background-color: #ecf1ff
			}

.featured-product{
	width:33%;
	}
	.featured-product:hover{
		background-color:#d4ddfb;
		}
		
#inner-banner{
	height: 75px;
	}
	#inner-banner .content{
		}
	.page-title{	
		font-size: 36px;
		line-height: 70px;
		}
		
.inner-cta{
	margin-top: 21px
	}

}