/***** BEGIN RESET *****/
* {
    background:transparent;
    border:0;
    margin:0;
    padding:0;
    font-family:'roboto_condensedregular', Arial, sans-serif;
}
ol, ul {list-style: none;}
.clear {clear: both; height:0px; margin:0;}

/***** END RESET *****/
@font-face {
    font-family: 'roboto_condensedbold';
    src: url('../fonts/robotocondensed-bold-webfont.eot');
    src: url('../fonts/robotocondensed-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/robotocondensed-bold-webfont.woff2') format('woff2'),
         url('../fonts/robotocondensed-bold-webfont.woff') format('woff'),
         url('../fonts/robotocondensed-bold-webfont.ttf') format('truetype'),
         url('../fonts/robotocondensed-bold-webfont.svg#roboto_condensedbold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
   font-family: 'roboto_condensedregular';
    src: url('../fonts/RobotoCondensed-Regular-webfont.eot');
    src: url('../fonts/RobotoCondensed-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/RobotoCondensed-Regular-webfont.woff') format('woff'),
         url('../fonts/RobotoCondensed-Regular-webfont.ttf') format('truetype'),
         url('../fonts/RobotoCondensed-Regular-webfont.svg#roboto_condensedregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

h1 {font-family:'roboto_condensedbold', Arial, sans-serif; font-size:40px; text-align:center; color:#000; text-transform:uppercase;}
h2 {font-family:'roboto_condensedbold', Arial, sans-serif; color:#305c7a; font-size:28px; line-height:32px; text-transform:uppercase;}
h3 {font-family:'roboto_condensedbold', Arial, sans-serif; color:#919191; font-size:16px; text-align:right; line-height:22px; text-transform:uppercase;}
h4 {font-family:'roboto_condensedbold', Arial, sans-serif; color:#919191; font-size:16px; text-transform:uppercase;}
h5 {font-family:'roboto_condensedbold', Arial, sans-serif; color:#305c7a; font-size:28px; line-height:32px; padding-top:20px; text-align:center; text-transform:uppercase;}

.contact-info-heading h3{text-align:left!important;color:#000!important}

p {font-size:18px; line-height:24px;}

/***** Navigation *****/
#nav {
    position:relative;
    display:block;  
    z-index:9000;
    margin:0 auto 0 auto;
    padding:0 0 0 0;
    text-align:center;
}
  
#nav ul, nav li {
    list-style: none;  
    margin:0 0 0 0;
    padding:0 0 0 0;  
}
  
#nav ul li {
    display: block;
    position: relative;
    float:right;
    text-align:center;
}
  
#nav li ul {
    display: none;
}
  
#nav ul li a { /* appearance of the first-level links */
    display: block;
    text-decoration: none;
    color: #fff;
    font-weight:normal;
    font-size:16px;
    line-height:18px;
    transition:color .3s ease-in-out; -moz-transition:color .3s ease-in-out; -webkit-transition:color .3s ease-in-out;
    padding:8px 12px;  
    height: 1%;
    text-transform: uppercase;
    text-align:center;
    font-family:'roboto_condensedregular', Arial, sans-serif;
}
 
 
#nav ul li a:hover { /* appearance of the first-level links on hover */
    height: 1%; 
    color:#919191; 
}
  
  
  
#nav ul li li a { /* appearance of the sub-level links */
    width:215px;
    padding:8px 0 8px 15px;
    text-align:left;
    background:#090909;
    border-bottom:1px #333 solid;
    border-right: 1px solid #333;
    border-left: 1px solid #333;    
}
#nav ul li li a:hover { /* appearance of the sub-level links on hover */
    color:#fff; 
    background:#4b0000 url("../siteart/nav-ro-bg.jpg") repeat-x;     
}
  
  
  
/* Optional-use, Begin targeting styles of first and last links */
#nav ul li:last-child  { /* Optional-use, this targets last li */
    border-right:0;
}
#nav ul li:last-child a {
    border-right:0;  /* Optional-use, this targets last link */
}
#nav ul li:first-child  { /* Optional-use, this targets first li */
    border-left:0;
}
  
/* Optional-use, cancells out border for subnav li containers*/
#nav ul li li:last-child  {
    border-left:0;
    border-right:0;
}
#nav ul li li:last-child a {
    border-right:0;
}
#nav ul li li:first-child  {
    border-left:0;
    border-right:0;
}
/* Optional-use, End targeting styles of first and last links */
  
/* Unless needing to do something extra or experimental, DON'T edit these positioning styles below! */
#nav ul ul {
    display: none;
    position: absolute; 
    top:100%;
    left:0;
}
  
#nav ul ul ul {
    position: absolute; 
    left: 100%;
    top:0; 
}
  
#nav ul li:hover > ul {  
    display: block;
    line-height:18px; /* make sure your line-height always matches that of your main link styles!*/
    z-index: 100;
    background:#4b0000; /* make sure your background color always matches your link styles!*/
}
  
#nav ul ul li {
    float: none; 
    position: relative;
}

/******** Basic Styles ********/
.show-menu-for-mobile {display:none;}  /* At most larger screen widths, the burger icon for the mobile menu won't be displayed. */
body {background:#305d7b; overflow-x:hidden;}
#site-width {max-width:1400px; width:100%; margin:0 auto; padding:10px 0; transform: skew(0deg, -3deg);}
#inventorywrap {max-width:1400px; width:100%; margin:0 auto; padding:10px 0 75px 0;}
.inventorywrap {max-width:1020px; width:100%; margin:0 auto; padding:10px 0;}
.inventoryframe {width:100%; max-width:1020px; margin:0 auto;}

/*--------Search Bar Styles--------*/
.searchform {
	width:75%;
	margin:10px auto;
	padding:0 0 5px 0; 
	color:#000;
}

.searchform input.search-box {
	width:100%;
	margin:10px auto 5px auto;
	color:#000;
	font-size:14px;
	background:#fff;
	padding:8px 5px 8px 8px;
	text-transform:uppercase;
	border:1px #305d7b solid;	
	font-family:'roboto_condensedregular', Arial, sans-serif;
	-moz-box-shadow: inset 0 -1px 1px rgba(0,0,0,0.5);
	 -webkit-box-shadow: inset 0 -1px 1px rgba(0,0,0,0.5);
	 box-shadow: inset 0 -1px 1px rgba(0,0,0,0.5);

}

.searchform .search-btn {
	width:55%;
	margin:0 auto;
	color:#fff;
	font-size:18px;	
	padding:6px 0px;
	text-align:center;
	margin:2px 0 0 10px;
	background:#919191;
	border:1px #305d7b solid;	
	text-transform:uppercase;
	font-family:'roboto_condensedbold', Arial, sans-serif;
	-moz-box-shadow: inset 0 -1px 1px rgba(0,0,0,0.5);
 	-webkit-box-shadow: inset 0 -1px 1px rgba(0,0,0,0.5);
 	box-shadow: inset 0 -1px 1px rgba(0,0,0,0.5);

}

.searchform .search-btn:hover {
	background:#7F7F7F;
	color:#fff;
}

#white-block {background:#fff;}


/******** Header Styles ********/
header {
	background: #326181; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#326181, #305d7b); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#326181, #305d7b); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#326181, #305d7b); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#326181, #305d7b); /* Standard syntax */
	transform: skew(0deg, 3deg);
  	margin-top: -100px;
	padding:100px 0 50px 0;
	z-index:9999999;
}
  
#headercontent {max-width:1400px; width:100%; margin:0 auto; padding:10px 0; transform: skew(0deg, -3deg);}
.line {border-top:1px solid #fff; width:100%; margin:5px 0 10px 0;}
.logo {float:left; width:400px; padding-top:20px;}
.navwrap {float:right; width: calc(100% - 400px); text-align:right; margin-top:60px;}

header a {color:#919191;text-decoration:none;}

/******** Content Styles ********/
#middle {
	background: #326181; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#326181, #305d7b); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#326181, #305d7b); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#326181, #305d7b); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#326181, #305d7b); /* Standard syntax */
	transform: skew(0deg, 3deg);
	padding:75px 0 150px 0;
	z-index:9999999;
	margin-top:-50px;
	color:#fff;
	text-align:center;
    overflow:auto!important;
    display:block!important
}

#middleinventory {
	background: #326181; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#326181, #305d7b); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#326181, #305d7b); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#326181, #305d7b); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#326181, #305d7b); /* Standard syntax */
	padding:50px 0 0 0;
	z-index:9999999;
	margin-top:-50px;
	color:#fff;
    overflow:auto!important;
    display:block!important
}

#middlecontent {
	background: #fff; /* For browsers that do not support gradients */
	transform: skew(0deg, 3deg);
	padding:30px 0 50px 0;
	z-index:9999999;
	margin-top:-50px;
	color:#000;
	text-align:center;
    overflow:auto!important;
    display:block!important
}

#middlecontent-inv {
	background: #fff; /* For browsers that do not support gradients */
	transform: skew(0deg, 3deg);
	padding:30px 0 50px 0;
	z-index:9999999;
	margin-top:-50px;
	color:#000;
    overflow:auto!important;
    display:block!important
}


#middle a {color:#fff; text-decoration:none;}
#middle a:hover {color:#919191;}


#middlecontent a {color:#305d7b; text-decoration:none;}
#middlecontent a:hover {color:#919191;}

#iconwrap {width:100%; max-width:1400px; margin:-53px auto 0 auto; padding-bottom:40px; text-align:center; background:#fff;}
.icon {float:left; width:23%; text-align:center; margin:0 10px; z-index:9999999999; position:relative;}
.icon img {z-index:9999999999;}
.icontext {border:1px solid #c8bd9a; margin-top:10px; padding:15px 20px 15px 20px; height:184px;}

/* Grow */
.hvr-grow {
    display: inline-block;
    vertical-align: middle;
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    transition-duration: 0.3s;
    transition-property: transform;
}

.hvr-grow:hover,
.hvr-grow:focus,
.hvr-grow:active {
    transform: scale(1.1);
}

#formpage {
vertical-align:top;
}

#formpage div {
vertical-align:top;
padding:8px 5px;
}

#formpage input {
	padding:6px 5px;
	border:1px solid #8e8d8d;
	font-family:'roboto_condensedregular', Arial, sans-serif;
	color:#8e8d8d;
	font-size:12px;
}

#formpage textarea {
	padding:6px 5px;
	border:1px solid #8e8d8d;
	font-family:'roboto_condensedregular', Arial, sans-serif;
	color:#8e8d8d;
	font-size:12px;
}

 
/* selects have similar styles to input & textarea fields, but with no padding. Text in a dropdown select is positioned differently */
#formpage select {
	border:1px solid #8e8d8d;
	font-family:'roboto_condensedregular', Arial, sans-serif;
	color:#000;
	vertical-align:middle;
	font-size:12px;
	line-height:normal;
	padding:5px;
}

.formfieldfirst {float:left; width:22%;}
.formfield {float:left; width:22%; margin-left:2%;}
.formfieldlast {float:left; width:46.8%;}

#formpage input  {
    width:100%;
	background:#fff;
}
 
#formpage input.larger  {
    width:100%;
	background:#fff;
}

#formpage textarea {
    width:100%;
	background:#fff;
	height:60px;
}

/* focus states of various types of fields */

#formpage input:focus,
#formpage textarea:focus,
#formpage select:focus {
	background:#fff; 
	color:#000;
	border:1px solid #000;
	outline-style:none;
}
#formpage input.radio:focus,
#formpage input.checkbox:focus {
	background:none; 
	border:0;
	outline-style:none;
}
 
#formpage input.button,
#formpage input.button:focus {
    width:200px; 
    margin:0;
    padding:7px 0;
    background:#919191 url('../siteart/submit_btn.jpg') repeat-x;
    border:2px #919191 solid;
    font-size:14px;
	line-height:14px;
	font-weight:bold;
    color:#fff;
	text-shadow: 1px 1px 1px rgba(0,0,0,.4);
	font-family:'roboto_condensedregular', Arial, sans-serif;
}
#formpage input.button:hover {
	background:#7F7F7F;
	color:#fff;
	text-shadow:none;
	border:2px #7F7F7F solid;
}
 
.search-type{margin:5px!important}
.search-type input {margin-right:5px!important}

/* for plain text next to an input field, if not using a table structure */
#formpage label.basic {
    color:#fff;
    font-size:12px;
    text-align:left;
}
#formpage label.checkbox {
  /*  color:#212121;*/
    font-size:13px;
    text-align:left;
    display:inline;
    padding:0;
}
 

/*control the Captcha */

.CaptchaPanel {
margin:0 0 0 0 !important;
padding:0 0 0 0 !important;
text-align: center;
line-height:normal !important;
}

.CaptchaImagePanel {
margin:0 0 0 0;
padding:0 0 0 0;
}

.CaptchaMessagePanel {
padding:0 0 0 0 !important;
margin:0 0 0 0 !important;
font-weight:normal !important;
font-size:12px;
line-height:14px;
}

.CaptchaAnswerPanel {
margin:0 0 0 0;
padding:2px 0px 2px 0px !important;
}

.CaptchaWhatsThisPanel {
	line-height:0;
	margin:0 0 0 0;
	padding:8px 0 8px 0 !important;
}
.CaptchaWhatsThisPanel a {color:#fff;}
.CaptchaWhatsThisPanel a:hover {text-decoration:none;} 
.captchafield {width:30%; margin:0 auto;}
 
#footerimage img {width:100%;}

/******** Footer Styles ********/
footer {
	background: #326181; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#326181, #305d7b); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#326181, #305d7b); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#326181, #305d7b); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#326181, #305d7b); /* Standard syntax */
	transform: skew(0deg, 3deg);
	padding:50px 0 0 0;
	color:#fff;
	margin-top:-55px;
}

footer a {color:#fff; text-decoration:none; font-size:13px; margin-top:5px;}
footer a:hover {color:#919191;}
#footernav {padding:10px 0;}

a.footerlink:link, a.footerlink:visited, a.footerlink:active{text-decoration:underline; font-family:'roboto_condensedregular', Arial, sans-serif; font-size:13px; color:#fff;}
a.footerlink:hover {text-decoration:none; font-family:'roboto_condensedregular', Arial, sans-serif; font-size:13px; color:#919191;}

.footertext{font-family:'roboto_condensedregular', Arial, sans-serif; font-size:13px; color:#fff;}

.smallfootertext{font-family:'roboto_condensedregular', Arial, sans-serif; font-size:10px; color:#fff;}

.divfooter {width:560px; text-align:left; padding-bottom:10px;}




/************************************************ Responsive Styles **/

@media screen and (max-width: 1480px) and (min-width:1300px) {
.show-menu-for-mobile {display:none;}
#headercontent {width:95%;}
#site-width {width:90%;}
#inventorywrap {width:90%;}



#iconwrap {width:90%; margin:0 auto;}
}

@media screen and (max-width: 1299px) and (min-width:1024px) {
.show-menu-for-mobile {display:none;}
#headercontent {width:95%;}
#nav ul li a { font-size:14px; padding:8px 8px;}
.logo {width:33%;}
.logo img {width:100%;}
.navwrap {width:63%;}
#site-width {width:90%;}
#middle {padding-bottom:50px;}
#inventorywrap {width:90%;}


#iconwrap {width:90%; margin:0 auto;}
#iconwrap img {width:90%;}
.icon {width:22%;}
.icontext {height:300px;}
h2{font-size:24px;}


}


@media screen and (max-width: 1023px) and (min-width:755px) {
.show-menu-for-mobile {display: block;}
.hide-for-mobile {display:none;}
.hide {display:none;}

#headercontent {width:95%;}
header {padding-bottom:50px;}
.logo {width:45%;}
.logo img {width:100%;}
.navwrap {width:50%; margin-top:40px;}
#site-width {width:90%;}
#middle {padding:50px 0;}
#middlecontent {padding:100px 0; margin-top:10px;}
#middlecontent-inv {padding:100px 0; margin-top:10px;}
#inventorywrap {width:90%;}

.formfieldfirst {width:100%;}
.formfield {width:100%; margin:0 auto;}
.formfieldlast {width:100%; margin:0 auto;}
.captchafield {width:50%; margin:0 auto;}

#iconwrap {width:90%; margin:0 auto;}
#iconwrap img {width:90%;}
.icon {width:22%;}
.icontext {height:275px; padding:10px;}
h1{font-size:30px; line-height:36px;}
h2{font-size:16px; line-height:20px;}
h3{font-size:14px; line-height:20px;}
h4{font-size:14px; line-height:20px;}
p{font-size:16px; line-height:20px;}

/******************styles for the main site navigation during mobile display*************/
#navicon {
	float: right;
	font-size: 32px;
	font-size: 2em;
	text-decoration: none;
	position: relative;
	z-index: 99999999999999999;
	margin: 0.25rem 0 0 0.5rem;
	color:#fff;
}
#nav  {display:none;}

}



@media screen and (max-width: 754px) and (min-width:521px) {
.show-menu-for-mobile {display: block;}
.hide-for-mobile {display:none;}
.hide {display:none;}

#headercontent {width:95%;}
header {padding-bottom:50px;}
.logo {width:37%; padding:10px 0;}
.logo img {width:100%;}
.navwrap {width:58%; margin-top:5px;}
#site-width {width:90%;}
#middle {padding:50px 0; margin-top:0;}
#middlecontent {padding:100px 0; margin-top:10px;}
#middlecontent-inv {padding:100px 0; margin-top:10px;}
#inventorywrap {width:90%;}

.formfieldfirst {width:100%;}
.formfield {width:100%; margin:0 auto;}
.formfieldlast {width:100%; margin:0 auto;}
.captchafield {width:75%; margin:0 auto;}
#iconwrap {width:75%; margin:0 auto; text-align:center;}
#iconwrap img {width:50%; margin:0 auto; text-align:center;}
.icon {width:100%; margin:10px auto; text-align:center;}
.icontext {height:auto; padding:10px;}
h1{font-size:30px; line-height:36px;}
h3{font-size:12px; line-height:20px;}
h4{font-size:12px; line-height:20px;}

footer a {font-size:12px;}
/******************styles for the main site navigation during mobile display*************/
#navicon {
	float: right;
	font-size: 32px;
	font-size: 2em;
	text-decoration: none;
	position: relative;
	z-index: 99999999999999999;
	margin: 0.25rem 0 0 0.5rem;
	color:#fff;
}
#nav  {display:none;}
}
 
 

@media screen and (max-width: 520px){
.show-menu-for-mobile {display: block;}
.hide-for-mobile {display:none;}
.hide {display:none;}

#headercontent {width:95%;}
header {padding-bottom:50px;}
.logo {width:90%; margin:0 auto; float:none;}
.logo img {width:100%;}
.navwrap {width:100%; float:none; margin-top:-20px;}
#site-width {width:90%; transform: skew(0deg, 0deg);}
#middle {padding:50px 0; margin-top:0; transform: skew(0deg, 0deg);}
#middlecontent {padding:50px 0; margin-top:10px; transform: skew(0deg, 0deg);}
#middlecontent-inv {padding:50px 0; margin-top:10px; transform: skew(0deg, 0deg);}
#inventorywrap {width:90%;}
.formfieldfirst {width:95%;}
.formfield {width:95%; margin:0 auto;}
.formfieldlast {width:95%; margin:0 auto;}
.prodimage {width:100%; margin:0 auto;}
.prodimage img {width:100%;}
.captchafield {width:90%; margin:0 auto;}
#iconwrap {width:90%; margin:0 auto; text-align:center;}
#iconwrap img {width:50%; margin:0 auto; text-align:center;}
.icon {width:100%; margin:10px auto; text-align:center;}
.icontext {height:auto; padding:10px;}
h1{font-size:24px; line-height:36px;}
h2{font-size:18px; line-height:20px;}
h3{font-size:11px; line-height:20px;}
h4{font-size:12px; line-height:20px; text-align:center;}

footer {margin-top:-15px; text-align:center; transform: skew(0deg, 0deg);}
.divfooter {text-align:center; width:90%; margin:0 auto;}
/******************styles for the main site navigation during mobile display*************/
#navicon {
	float: left;
	font-size: 32px;
	font-size: 2em;
	text-decoration: none;
	position: relative;
	z-index: 99999999999999999;
	margin: 0.25rem 0 0 0.5rem;
	color:#fff;
}
#nav  {display:none;}
}