html, body {margin: 0; padding: 0;}

body {font-family: 'Roboto Slab', Arial, Helvetica, sans-serif;; font-variant-ligatures: none; font-size: 100%;}

#width {position: fixed; top: 0; z-index: 20; padding: 0 3px; font-size: 11px; line-height: 14px; font-family: Arial, Helvetica, sans-serif; background-color: #FF0;}
a, a:visited, a:hover {outline: none; color: #2E3FE1;} a {text-decoration: underline; text-decoration-thickness: 1px; text-decoration-style: dotted; text-underline-offset: .13em; cursor: pointer;}
a, .ham {-webkit-tap-highlight-color: transparent);}
img {border: 0;} #phone a {white-space: nowrap;}
.phlink {color: inherit !important; text-decoration: none !important; white-space: nowrap;} .phlink:hover {cursor: text;}
.ham, .ham * {-webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation;}

/*====================================================*/

/*HEADER*/

#header, #header2 {width: 100%; height: 100%;}
#logo img, #logo2 img {display: block; width: 100%;}
#logotext {text-align: center; font-weight: 700; line-height: 1.15; padding: 15px 0 19px 0; text-shadow: 1px 1px 35px #000; font-size: 34px;}
#logotext div {font-size: .7em; font-weight: 400; padding-top: 10px;}

@media (max-width: 968px) {#header2 {border: 4px solid #000;}}
@media (max-width: 615px) {#logotext {font-size: 32px;}}
@media (min-width: 701px) {
#logo2 {display: none;} #logo {width: 30%;}
#toppic {width: 70%; height: 100%; background-image: url("images/toppic.jpg"); background-repeat: no-repeat; background-position: 50%; height: 100%; background-size: cover;}
#toppic img {display: none;}
}
@media (max-width: 700px) {
#header, #header2 {border: 6px solid #000;}
#header {border-top: none !important; border-bottom: none !important;}
#logo {display: none;} #logo2 {width: 35%; border-right: 6px solid #000;}
#logotext {width: 65%; padding: 0 0 10px 0;}
#toppic img {width: 100%; display: block;}
#bodybord {border: 0 solid #FFF !important;}
}
@media (max-width: 470px) {
#logotext {font-size: 28px;} #header, #header2 {border: 4px solid #000;} #logo2 {border-right: 4px solid #000;}
}
@media (max-width: 440px) and (min-width: 361px) {#logotext {font-size: 6.5vw;}}
@media (max-width: 360px) {
#logotext {padding: 0 0 3px 0; font-size: 24px; line-height: 1.25; width: 55%;}
#logotext span {display: block;} #logotext div {display: none;}
#logo2 {border-right: none; width: 45%;} #logo2 img {border-right: 4px solid #000;}
}
@media (max-width: 320px) {#logotext {font-size: 22px;}}

#social {position: absolute; top: 9px; right: 7px;} #social img {width: 28px; height: 28px;}

@media (max-width: 520px) {#social img {width: 24px; height: 24px;} #social {top: 11px;}}

/*-----------------------------------------------*/

/*MENU*/

#lines, #menu, #nav li a {margin: 0; padding: 0;}
#nav li, #nav li a {list-style-type: none; vertical-align: middle;}

#nav {position: relative; z-index: 3; text-align: center; padding-right: 4px;}
#menu {display: none;}
#nav li a {width: 100%; font-size: 20px; font-weight: 400; text-decoration: none; height: 45px; display: table-cell; text-align: center; cursor: pointer; text-transform: uppercase; transition: 0.3s; -webkit-transition: 0.3s;}
#nav li a.selected {cursor: text;}
@media (min-width: 391px) { 
#lines-container {display: none;} #menu {display: inline;}
#nav li {display: inline-block; margin-right: -4px;} #nav li a {padding: 0 18px 0 18px;}
}
@media (max-width: 450px) and (min-width: 391px) {#nav li a {padding: 0 12px 0 12px; font-size: 18px;}}
@media (max-width: 390px) {
#nav li a, #nav #menu {width: 100%;}
#nav {text-align: center; padding-right: 0;}
#nav #menu {text-align: center; left: 0; right: 0; position: absolute; margin: 0 auto; box-shadow: 0px 2px 7px -1px #000000;}
#nav li a {display: block; height: 34px; padding: 10px 0 0 0; font-size: 17px;}
#lines-container {display: inline-block; width: 38px; height: 32px; cursor: pointer; margin: 12px auto 0 auto;}
#lines {display: block;}
#lines li {height: 4px; background: #fff; content: ""; position: relative; transition: 0.25s ease-in-out;}
#lines li:nth-child(1) {top: 0;} #lines li:nth-child(2) {top: 6px;} #lines li:nth-child(3) {top: 12px;}
.hidden {opacity: 0;}
.rot45deg {transform: rotate(45deg); top: 10px !important;} .rot-45deg {transform: rotate(-45deg);}
}

/*-----------------------------------------------*/

/*BODY AREA*/

#bodyback {position: relative; margin: 0 auto auto auto; padding: 0;}
#bodybord {border: 9px solid #FFF;}
#bodyarea {padding: 20px 25px 25px 25px;}
#bodyarea, h1 {font-size: 19px !important; line-height: 1.5; font-weight: 400 !important;}

@media (min-width: 965px) {#bodyback {max-width: 950px;} #bodyshad {box-shadow: 0 0 20px 6px #000;}}
#bodyhead {font-size: 1.5em; line-height: 1.25; font-weight: 700; text-align: center;}
.heading {font-size: 1.2em; font-weight: 700; text-transform: uppercase;}

@media (max-width: 480px) {#bodyarea {padding: 15px 20px 25px 20px;} #bodyarea, h1 {font-size: 18px !important;}}
@media (max-width: 360px) {#bodyarea {padding: 15px 17px 25px 17px;} #bodyarea, h1 {font-size: 17px !important;}}

/*-----------------------------------------------*/

/*BOTTOM AREA*/

#bottomarea {font-size: 14px; line-height: 1.5; padding-bottom: 17px; text-align: center;}
#btm_menu {padding: 10px; margin-bottom: 7px; font-size: 17px;}
#btm_menu a {text-transform: uppercase; text-decoration: none;}
#btm_menu a:hover {text-decoration: underline;} #btm_menu .line {padding: 0 10px;}
.copy, .serving, .web {margin-top: 15px;} .copy {padding: 0 20px;}
@media (max-width: 400px) {.serving span, .web a {display: block;}}
@media (max-width: 420px) {#btm_menu .line {padding: 0 5px; visibility: hidden;}}

@media (max-width: 375px) {
#btm_menu {padding: 5px; line-height: 2.5;} #btm_menu a {display: block;} #btm_menu .line {display: none;}
}
.tb {font-style: italic; text-decoration: none;} .tb:hover {text-decoration: underline;}

/*====================================================*/


/*COLORS*/

body {background: #000 url('back.jpg') repeat !important; color: #000;}
.tax, .tax a {color: #000 !important; white-space: nowrap;}

a, a:visited, a:hover {color: #00F;} #phone, #phone a {color: #444;}

#header {background: #000;} #logotext {color: #FFF;}
#bodyarea {background: #FFF;} #bodyhead, .heading {color: #000;}

#nav, #menu, #nav li a.selected:hover {background-color: #000;}
#nav, #nav li a, #nav li a:hover {color: #FFFFFF;}
#nav li a.selected, #nav li a.selected:hover {color: #999; font-weight: 700; font-size: 1.25em;}
#nav li a:hover {background-color: #444;}
@media (max-width: 390px) {#menu li {border-top: 1px solid #555;}}

#bottomarea, #bottomarea a, #btm_menu a, .ph2, .ph2 a, .tb {color: #FFF !important;}
#btm_menu {color: #BBB; background-color: #444;}
#bottomarea {background-color: #000;}