@import url("reset.css");
@import url("all.css");
@import url("webfonts.css");


html {-webkit-font-smoothing: antialiased;}

body {background: #fff; color: #000; font: 1em/1.5em 'Roboto', Arial, Helvetica, sans-serif;}

a {border: none; color: #000; text-decoration: none;}
a:hover {text-decoration: underline;}
a:focus {outline: none;}
img, a, a img {border: none;}
img {max-width: 100%; vertical-align: top;}/*  does not exceed the width of its container  */
.clear {clear: both;}
.hide {display: none;}
.rule {height: 1px; background: #eee; margin: 20px 0;}
.rule hr {display: none;}
.devnote {background: lightyellow; color: red; padding: 5px;}

/* Base OVERRIDES */
h1,h2,h3 {margin:1em 0;/* top & bottom margin based on font size */}
h1,h2,h3,h4,h5,h6,strong {font-weight:bold;/*bringing boldness back to headers and the strong element*/}
abbr,acronym {border-bottom:1px dotted #000; cursor:help;/*indicating to users that more info is available */}
em {font-style:italic;/*bringing italics back to the em element*/}
blockquote,ul,ol,dl {margin:1em;/*giving blockquotes and lists room to breath*/}
ol,ul,dl {margin-left:2em;/*bringing lists on to the page with breathing room */}
ol li {list-style: decimal outside;/*giving OL's LIs generated numbers*/}
ul li {list-style: disc outside;/*giving UL's LIs generated disc markers*/}
dl dd {margin-left:1em;/*providing spacing for definition terms*/}
table {font-size:inherit; font:100%;}
th,td {/*  border:1px solid #000;  */ padding:.5em;/*borders and padding to make the table readable*/}
th {font-weight:bold; text-align:center;/*distinguishing table headers from data cells*/}
caption {margin-bottom:.5em; text-align:center;/*coordinated margin to match cell's padding*/}
p,fieldset,table,pre {margin-bottom:1em;/*so things don't run into each other*/}
select, input, button, textarea {/*  font:99% arial,helvetica,clean,sans-serif;  */}
input, textarea, select {font-family:inherit; font-size:inherit; font-weight:inherit;}
/* +++++++++++++++++++++ */

.roboto {font-family: 'Roboto', sans-serif;}
.rgCD {font-family:"RightGrotesk-CompactDark",Helvetica,Arial,sans-serif;}

.basewrap {width: 100%; max-width: 1024px; margin: 0 auto; position: relative;}

h1, h2, h3, h4, h5, h6 {font-family:"RightGrotesk-CompactDark",Helvetica,Arial,sans-serif; margin: 0; letter-spacing: 0;}
h1 {}
h2 {}
h3 {}
h4 {}
h5 {}
h6 {}

/* Styles/Colors */
/*
RED [Buttons] #EC0F2A
RED 2 [Button Hover] #FF0000
ORANGE [Menu Hover Line] #FF6C00
YELLOW [BG Color] #FFDF68

*/

/* Masthead */
#masthead {background: #fff;}
#masthead .outer {}
#masthead .inner {}

#masthead #logo {text-align:center; width: 200px; margin: 20px auto;}
#masthead #logo a {display: block;}
#masthead #logo img {width: 100%;}
#masthead #logo span {visibility:hidden;}

#masthead ul li a { display: block;}

#masthead #utilNav {display:none;}
#utilNav.mobile {display:block;}

#masthead #utilNav ul {margin: 0; padding: 0; text-align:right;}
#masthead #utilNav ul li {list-style-type: none; display: block;}
#masthead #utilNav ul li a { text-decoration: none; padding: 14px 0px; }
#masthead #utilNav ul li.orderonline a {border: 1px solid #EC0F2A; background: #EC0F2A; color: #fff; text-transform: uppercase;  padding: 14px 40px;}
#masthead #utilNav ul li.orderonline a:hover {color: #fff; border: 1px solid #f00; background: #f00;}
#masthead #utilNav ul li.tel a {border: 1px solid #fff; background: #fff; color: #000; font-weight: 600; margin-left: 40px;}
#masthead #utilNav ul li.tel a:hover {color: #666;}
#masthead #utilNav a {display:block;  text-decoration:none;}
#masthead #utilNav i {padding-right: 5px;}

#masthead #mainNav ul {margin: 20px 0 0 0; padding: 0; text-align:center;}
#masthead #mainNav ul li {list-style-type: none; display: inline-block;}
#masthead #mainNav ul li a {text-decoration: none; border-bottom: 8px solid #fff; color: #000; font-size: 140%; padding: 10px 0px; margin: 0 20px;}
#masthead #mainNav ul li a.hot,
#masthead #mainNav ul li a:hover {border-bottom: 8px solid #FF6C00; color: #000;}

/*  response  */
@media screen and (min-width: 1200px) {
	#masthead .outer {}
	#masthead .inner {padding: 30px 0px;}

#masthead .left {float: left; width: 40%;}
#masthead .right {float: right; width: 45%;}

	#masthead #logo {text-align:left;margin-left: 40px;}
	#masthead #logo img {max-width: 200px;}
#masthead #utilNav {display:block;}
#utilNav.mobile {display:none;}

#masthead #mainNav ul {margin: 20px 0; padding: 0; text-align:right;}
#masthead #mainNav ul li {list-style-type: none; display: block;}
#masthead #mainNav ul li a {text-decoration: none; border-bottom: 8px solid #fff; color: #000; font-size: 140%; padding: 20px 0px; margin-left: 40px;}
#masthead #mainNav ul li a.hot,
#masthead #mainNav ul li a:hover {border-bottom: 8px solid #FF6C00; color: #000;}
	#masthead #utilNav ul li,
	#masthead #mainNav ul li {display: inline-block; margin-right: 5px;}

}

/* GLOBAL PAGE HERO Content Template */


/* HEADING */
#sHeading {background: tan;}
#sHeading .outer {}
#sHeading .inner {padding: 30px 20px;}
#sHeading .inner h1 {background: tomato; color:black; font-size: 2.625em; line-height: 44px; margin: 0; letter-spacing: 0;}

/*  response  */
@media screen and (min-width: 768px) {
	#sHeading {}
	#sHeading .outer {}
	#sHeading .inner {padding: 30px 0px;}
	#sHeading .inner h1 {color:blue; font-size: 2.75em; line-height: 46px;}
}
@media screen and (min-width: 1024px) {
	#sHeading {}
	#sHeading .outer {}
	#sHeading .inner {padding: 30px 0px;}
	#sHeading .inner h1 {color:red; font-size: 5.625em; line-height: 94px;}
}

/* GLOBAL Body Content Template */
#sBody {margin: 0px 0; background: #ddd;}
#sBody .outer {}
#sBody .inner {padding: 30px 20px; background: transparent;}

/*  response  */
@media screen and (min-width: 768px) {
	#sBody {margin: 0px 0; background: #ddd;}
	#sBody .outer {}
	#sBody .inner {padding: 30px 0px;}
}
@media screen and (min-width: 1024px) {
	#sBody {margin: 0px 0; background: #ddd;}
	#sBody .outer {}
	#sBody .inner {padding: 30px 0px;}
}

/* GLOBAL BLANK Content Template */
#sBlank {margin: 20px 0; background: lightblue;}
#sBlank .outer {}
#sBlank .inner {padding: 30px 20px; background: #ddd;}

/*  response  */
@media screen and (min-width: 768px) {
	#sBlank {margin: 20px 0; background: lightblue;}
	#sBlank .outer {}
	#sBlank .inner {padding: 30px 0px;}
}
@media screen and (min-width: 1024px) {
	#sBlank {margin: 20px 0; background: lightblue;}
	#sBlank .outer {}
	#sBlank .inner {padding: 30px 0px;}
}

/* GLOBAL BLANK/FULL Content Template */
#sBlankFull {margin: 10px 0; background: lightgray;}
#sBlankFull .outer {}
#sBlankFull .inner {padding: 30px 0px;}

/*  response  */
@media screen and (min-width: 768px) {
	#sBlankFull {margin: 10px 0; background: lightgray;}
	#sBlankFull .outer {}
	#sBlankFull .inner {padding: 30px 0px;}
}
@media screen and (min-width: 1024px) {
	#sBlankFull {margin: 10px 0; background: lightgray;}
	#sBlankFull .outer {}
	#sBlankFull .inner {padding: 30px 0px;}
}

/* Footer */