﻿html, body{
background-color: #fff;
font-family: 'Open Sans', sans-serif;
line-height: 130%;
color: #333;
font-weight:400;
margin: 0;
font-size:16px;
}
#container {
text-align: left;
margin: 0 auto;
max-width: 1200px;
background-color: #fff;
}
img.logo {
border: 0px;
margin: 50px 0 30px 0;
max-width: 327px;
}
.feature {
list-style-image:url('images/template/arrow.png');
line-height: 200%;
padding:0;
margin-left: 6%;
line-height: 150%;
}
#header {
margin: 0 3% 0 3%;
background-image: url('images/template/fire-protection.png');
background-repeat:no-repeat;
background-position: 100% 61px;
}
#navigation {
margin: 0 3% 0 3%;
background-color: #b90000;
padding: 0;
}
#content {
background-image: url('images/template/flame-logo-bg.png');
background-repeat: no-repeat;
background-position: 97% 2em;
margin: 3%;
border: solid #dbdbdb 1px;
padding: 2%;
border-radius: 10px;
font-size: 0.875em;
line-height: 140%;
overflow: hidden;
}
#guide {
margin: 3%;
border: solid #dbdbdb 1px;
padding: 2%;
border-radius: 10px;
font-size: 0.875em;
line-height: 140%;
overflow: hidden;
position:relative;
}
#extra {
margin: 3%;
border: solid #dbdbdb 1px;
padding: 2%;
border-radius: 10px;
font-size: 0.813em;
line-height: 140%;
}
#heading {
margin-bottom: 2%;
float: left;
position: relative;
width: 100%;
}
#pro {
padding: 0;
margin: 3%;
border: solid #dbdbdb 1px;
border-radius: 10px;
font-size: 0.813em;
line-height: 140%;
}
.pro1 {
padding: 2%;
float: left;
width: 66%;
position: relative;
}
.pro2 {
padding: 2%;
text-align: right;
float: left;
width: 26%;
position: relative;
}
img.imgRight{
float: right;
margin: 1em;
border: 0;
position: relative;
}
img.headingIMG {
float:left;
max-width:62px;
}
h1 {
font-size: 1.625em;
line-height: 140%;
font-weight: 400;
font-family: Oswald;
text-transform:uppercase;
}
h2 {
color: #b90000;
margin-top: 3%;
font-size: 1.375em;
line-height: 140%;
font-weight: 400;
font-family: Oswald;
text-transform:uppercase;
}
h3 {
color: #b90000;
font-size: 1.250em;
line-height: 140%;
font-weight: 400;
font-family: Oswald;
}
h4 {
text-transform:uppercase;
font-size: 0.875em;
line-height: 140%;
font-weight: 600;
}
#phone {
float:right;
margin-top:10px;
}
#footer {
margin: 0 3% 0 3%;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
font-size: 0.750em;
}
#endbanner1 {
background-color: #b90000;
margin: 6% 3% 0 3%; 
padding:  2% 3% 2% 3%;
font-size: 1.3em;
line-height: 140%;
color:#fff;
text-transform:uppercase;
}
#endbanner2 {
margin: 0 3% 0 3%; 
padding: 1% 3% 3% 3%;
}
#endbanner3 {
font-size: 12px;
border-top: solid 1px #b90000;
border-bottom: solid 1px #b90000;
padding:  1% 3% 1% 3%;
color: #333;
font-size: 0.813em; 
line-height: 140%;
margin: 0 3% 0 3%; 
}
#endbanner4 {
float:left;
width: 31.2%;
margin-top: 3%;
}
.endbanner5 {
font-family: 'Open Sans', sans-serif;
font-size: 0.813em;
line-height: 25px;
border: solid 1px #dbdbdb;
background-color: #fff;
padding: 0 3px 3px 3px;
margin-bottom: 2px;
color: #666;
width: 100%;
height: 20px;
}
.textarea {
font-family: 'Open Sans', sans-serif;
font-size: 0.813em;
line-height: 140%;
background-color: #fff;
color: #666;
border: solid 1px #dbdbdb;
float: left;
padding:3px;
overflow: auto;
width: 100%;
height: 100px;
}
.button {
float:left;
border: solid 1px #dbdbdb;
margin-top: 2px;
margin-bottom: 3%;
background-color: #fff;
cursor: pointer;
width: 75px;
height: 30px;
}
#endbanner6 {
float:left;
width: 31.2%;
text-align: center;
margin-top: 3%;
}
#endbanner7 {
float:left;
width: 31.2%;
margin-top: 3%;
}
#endbanner8 {
float:left;
margin-bottom: 15px;
width: 100%;
}
#navlast {
max-width:1200px;
text-align: center;
padding: 1% 0 1% 0;
border-bottom: solid 1px #dbdbdb;
margin: 0 3% 0 3%; 
}
a.last:link {
background-image:url('images/template/arrow.png');
background-repeat:no-repeat;
background-position: 0px 4px;
font-weight: normal;
color: #b90000;
font-size: 0.813em;
line-height: 140%;
text-align: center;
margin-left: auto; 
padding-left: 10px;
padding-right:15px;
text-decoration: none;
}
a.last:visited {
text-decoration: none;
}
a.last:active {
text-decoration: none;
}
a.last:hover {
color: #333;
text-decoration: none;
}
a.tel:link {
font-size: 1.692em;
float:left;
font-weight:bold;
color:#333;
margin:12px 0 0 15px;
text-decoration: none;
}
a.tel:visited {
text-decoration: none;
color: #3e454c;
}
a.tel:active {
text-decoration: none;
}
a.tel:hover {
color: #b90000;
text-decoration: none;
}
a:link, a:visited, a:active{
color: #b90000;
margin: 0px;
text-decoration: none;
letter-spacing: 0;
}
a:hover{
text-transform: none;
color: #3e454c;
}
strong {
font-weight: 600;
}
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  zoom: 1; /* ie 6/7 */
}
img {
width: 100%;
border: 0;
}
h1.headingtext {
float:left;
margin-left:1em;
}



/* Start Menu */

ul.nav {
margin: 0; padding: 0;
}
.toggleMenu {
background-image: url('images/template/click-to-open-menu.png');
background-repeat:no-repeat;
background-position: 10px 10px;
display:none;
background-color: #b90000;
color: #fff;
height:50px;
width:100%;
}
.nav {
list-style: none;
*zoom: 1;
background:#b90000;
line-height: 70px;
}
.nav:before,
.nav:after {
content: " "; 
display: table; 
}
.nav:after {
clear: both;
}
.nav ul {
list-style: none;
margin: 0; padding: 0;
}
.nav li {
position: relative;
outline: solid 1px #fff;
width: 14.28%;
text-align:center;
}
.nav li a:hover {
background-color: #3e454c;
}
.nav > li {
float: left;
}
.nav > li > .parent {
background-image: url("images/template/downArrow.png");
background-repeat: no-repeat;
background-position: 50% 80%;
}
.nav > li > a {
background:#b90000;
display: block;
color:#fff;
font-size: 1em;
text-decoration: none;
}
.nav li ul {
position: absolute;
left: -9999px;
}
.nav > li.hover > ul {
left: 0;
}
.nav li li.hover ul {
left: 100%;
top: 0;
}
.nav li li a {
display: block;
background: #fff;
position: relative;
z-index:100;
color:#333;
font-size: 0.875em;
text-decoration: none;
}
.nav li li a:hover {
display: block;
background: #eee;
color:#000;
font-weight:600;
}
.nav li li {
width: 250px;
line-height:30px;
text-align: left;
text-indent: 15px;
}

/* End Menu */

/* Start Tablets Breakpoint */

@media screen and (min-width: 481px) and (max-width: 768px) {

/* Start Menu */
.active {
display: block;
}
.nav > li {
float: none;
width: 100%;
line-height: 50px;
text-align: left;
text-indent: 15px;
}
.nav > li > .parent {
background-position: 95% 50%;
}
.nav li li .parent {
background-image: url("images/template/downArrow.png");
background-repeat: no-repeat;
background-position: 95% 50%;
}
.nav ul {
display: block;
width: 100%;
}
.nav > li.hover > ul , .nav li li.hover ul {
position: static;
}
.nav li li {
width: 100%;
line-height:30px;
opacity:1;
}


/* End Menu */

img {
width:100%;
}
#endbanner4, #endbanner7 {
width: 100%;
}
#endbanner6 {
display: none;
}
#phone {
display: none;
}

} /* End Tablets Breakpoint */


/* Start Mobile Breakpoint */

@media only screen and (max-width: 480px) {
 
/* Start Menu */
.active {
display: block;
}
.nav > li {
float: none;
width: 100%;
line-height: 50px;
text-align: left;
text-indent: 15px;
}
.nav > li > .parent {
background-position: 95% 50%;
}
.nav li li .parent {
background-image: url("images/template/downArrow.png");
background-repeat: no-repeat;
background-position: 95% 50%;
}
.nav ul {
display: block;
width: 100%;
}
.nav > li.hover > ul , .nav li li.hover ul {
position: static;
}
.nav li li {
width: 100%;
line-height:30px;
opacity:1;
}
.nav li li a {
font-size: 1em;
}

/* End Menu */

img {
width:100%;
}
h1 {
font-size: 1.2em;
}
a.tel:link {
font-size: 1.2em;
}
#endbanner4, #endbanner7 {
width: 100%;
}
#endbanner6 {
display: none;
}
#header {
background-image: none;
}
#phone {
display: none;
}
img.logo {
margin: 6% 0 6% 0;
width: 100%;
}
#endbanner1 {
font-size: 1em;
line-height: 20px;
text-transform:none;
margin: 6% 3% 3% 3%;
}
#endbanner7 {
margin-top:6%;
}
.endbanner5 {
line-height: 30px;
height: 25px;
}
#content {
background-image: none;
font-size: 1em;
}
#guide {
font-size: 1em;
}
#pro {
font-size: 1em;
}
img.headingIMG {
display: none;
}
h1.headingtext {
margin-left: 0;
}

} /* End Mobile Breakpoint */
















