body {font-family: "Heebo", Arial, Helvetica, sans-serif; margin: 0; padding: 0;}

#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; z-index: 200;}

a, a:visited, a:hover {text-decoration: underline; outline: none;} img {border: 0;}
*:hover {-webkit-tap-highlight-color: transparent;}

.phlink {color: inherit !important; text-decoration: none !important; white-space: nowrap;} .phlink:hover {cursor: text;}

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

/*HEADER*/

#header {position: relative;}
#header table {position: relative; width: 100%;}
#logo img {width: 240px;}
#phone {text-align: center; font-size: 26px; line-height: 32px; font-weight: 500; vertical-align: top; text-align: right; padding-top: 10px !important}
#phone a {text-decoration: none;}
h1 {font-style: italic; font-weight: 400; text-align: center; font-size: 20px; line-height: 26px; margin: auto; font-family: 'Fira Sans', Helvetica, sans-serif; padding-right: 25px;}
h1 span {display: block;}

@media (max-width: 959px) {#header table {margin: 0 10px; width: 98%;}}
@media (max-width: 855px) {
#header table {width: 97%;} #logo img {width: 230px;} #phone {font-size: 24px; line-height: 32px;}
h1 {font-size: 18px; line-height: 24px; padding-right: 0;}
}
@media (max-width: 795px) {h1 {padding: 0 10px;} h1 span {display: inline;}}
@media (max-width: 640px) {
#logo img {width: 210px;} #phone {font-size: 22px; line-height: 29px;} h1 {font-size: 16px; line-height: 22px; padding: 0 10px;}
}
@media (max-width: 565px) {#phone {font-size: 21px; line-height: 26px;}}
@media (min-width: 556px) {#header table td {padding: 10px 0;} #logo img {display: block;}}
@media (max-width: 555px) {
#header table {width: 100%; margin: 0 auto; padding: 12px 0 5px 0;} #header table td {display: block;}
#logo {width: auto; text-align: center; margin: auto; padding: auto;} #logo img {width: 195px;}
h1 {font-size: 18px; line-height: 22px; padding: 5px 10px 13px 10px;} h1 span {display: block;}
#phone {font-size: 24px; line-height: 28px; text-align: center; padding-bottom: 8px;}
}
@media (max-width: 350px) {h1 span {display: inline;}}


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


/*MENU*/

nav, nav a {-webkit-tap-highlight-color:transparent;}
nav a {text-decoration: none !important;} nav a:hover {background: none;}
nav {text-align: center; position: relative;}
nav, nav li a {height: 43px;}
nav ul {margin: 0; padding: 0;}
nav li, nav li a {list-style:none; vertical-align: middle;}
nav li {display: inline-block; margin-left: -4px;}
nav li a {display: table-cell; font-size: 18px; line-height: 21px; padding: 0px 22px;}

@media (min-width: 421px) {nav li a {text-transform: uppercase;}}
@media (max-width: 420px) {nav li a {padding: 0px 17px;}}
@media (max-width: 340px) {nav li a {padding: 0px 12px;}}

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

/*Home Page*/

/*TOP PIC*/
#toppic img {width: 100%; display: block;}

/*Video*/
#video {position: relative; text-align: center; margin: 45px auto 40px auto; clear: both;}
#video iframe {width: 100%;} #video .youtube {background-color: #333;} #video iframe {border: none;}
@media (min-width: 861px) {#video .youtube, #video iframe {max-width: 700px; height: 400px;}}
@media (min-width: 676px) and (max-width: 860px) {#video .youtube, #video iframe {max-width: 550px; height: 320px;}}
@media (max-width: 675px) {
#video {margin: 45px auto 30px auto; padding-bottom: 55%;} #video .youtube, #video iframe {position: absolute; height: 100%; left: 0; right: 0;}
}

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

/*Rightbox*/

@media (max-width: 455px) and (min-width: 240px) {#bodyhead span {display: block;}}
@media (max-width: 380px) {#bodyhead {font-size: 24px; line-height: 28px;}}

#rightbox {padding: 12px 15px 8px 15px; background-color: #FFF; border: 1px solid #DDD;}
.rbhead {text-align: center; font-weight: 700;}
#rightbox ul {margin: 10px 0 0 0; text-align: left;}
#rightbox li {padding-bottom: 8px; font-size: 17px; line-height: 21px; margin-left: -22px;}
#rightbox a:hover {text-decoration: underline;}
@media (min-width: 801px) {.rb-dsk {width: 210px; margin: 5px 0 10px 15px;}}
@media (max-width: 800px) and (min-width: 603px) {.rb-dsk {width: 30%; margin: 5px 0 10px 10px;}}
@media (min-width: 603px) {.rb-ph {display: none;} .rb-dsk {float: right;}}
@media (max-width: 602px) {
.rb-dsk {display: none; visibility: hidden;}
.rb-ph {padding: 0; margin: 25px auto 15px auto; left: 0; right: 0; width: 88%; max-width: 220px;}
}

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

/*BODY AREA*/

#bodyback, #bodyarea {position: relative;} #bodyarea {padding: 20px 25px 20px 25px;}

@media (min-width: 960px) {
#bodyback {max-width: 920px; margin: 0 auto auto auto; padding: 0 10px 0 10px; box-shadow: 0px 0px 25px 5px #000;}
#bodyarea {top: 10px;}
}
#bodyarea, h2 {font-size: 19px; line-height: 26px; font-weight: 400;}
@media (max-width: 480px) {#bodyarea {padding: 15px 17px 20px 17px;}}
@media (max-width: 360px) { #bodyarea {padding: 15px 13px 20px 13px;} #bodyarea, h2 {font-size: 18px; line-height: 25px;}}
#bodyhead {font-size: 26px; line-height: 30px; font-weight: 500; text-align: center;}
#bodyhead h2 {font-size: 21px; line-height: 25px; margin: 0; padding: 0; font-weight: 400;}

.heading {font-weight: 500; font-size: 20px; line-height: 26px; text-transform: uppercase;}

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

/*Page Pics*/
.pagepic {text-align: center; font-size: 0.85em;} .pagepic p {margin: -8px 0 0 0; padding: 0;}
.pagepic img {width: 100%; border: 2px solid #FFF;} .pictall img {max-width: 345px;}
.picleft {float: left; margin: 4px 20px 10px 0;} .picright {float: right; margin: 4px 0 10px 20px;}
.piccenter {text-align: center;}
@media (min-width: 745px) {.picwide img {width: 410px;} .picwide.piccenter {display: none;}}
@media (max-width: 744px) {
.picwide img {max-width: 500px;} .picwide.picleft, .picwide.picright {display: none;}
.picwide.piccenter {width: 100%; margin: 25px auto 10px auto;}
}
@media (min-width: 662px) {.pictall.piccenter {display: none;}}
@media (max-width: 661px) {.pictall.picleft, .pictall.picright {display: none;} .pictall.piccenter {width: 100%; margin: 25px auto 10px auto;}}

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

/*BOTTOM AREA*/

#bottomarea {font-size: 12px; line-height: 19px; padding-bottom: 10px; text-align: center; font-family: Arial, Helvetica, sans-serif;}
#btm_menu {padding: 10px; margin-bottom: 12px; font-size: 16px; line-height: 20px; text-transform: uppercase;}
#btm_menu a {text-decoration: none;} #btm_menu a:hover {text-decoration: underline;}
#btm_menu span {padding: 0 12px;} .web {margin-top: 10px;} .tb {text-decoration: none;}

@media (min-width: 960px) {#btm_menu {padding-top: 20px !important;}}
@media (max-width: 445px) {.serving, .lic {margin: 10px 0;} .copyco span, .serving span {display: block;}}
@media (max-width: 410px) {#btm_menu {line-height: 40px; padding: 5px 0;} #btm_menu a {display: block;} #btm_menu span {display: none;}}
@media (max-width: 340px) {.lic span, .web a {display: block;}}

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


/*COLORS*/

body {color: #342B22;}
@media (min-width: 960px) {body {background: #39322C url('../back.jpg') repeat !important;}}
@media (max-width: 959px) {body {background-color: #39322C;}}
a, a:visited, a:hover {color: #00F;}

#header h1 {color: #D61525;} #phone, #phone a {color: #342B22;}

#bodyback {background-color: #FFF;}
#bodyarea {background-color: #F7EEDB; border: 1px solid #DDD; border-bottom: none;}
#bodyhead {color: #D61525;} .heading {color: #000;}


nav, .slicknav_nav .slicknav_row, .slicknav_nav a {background-color: #C91B17;}
nav a {color: #FFF !important;}
nav a.selected, nav a.selected a, nav a.selected:hover, .slicknav_menu a.selected, .slicknav_menu a.selected:hover {background-color: #9D2421;}
nav a:hover, .slicknav_nav .slicknav_row:hover, .slicknav_nav a:hover {transition: 0.3s; -webkit-transition: 0.3s; background-color: #EA3935;}
.slicknav_menu .slicknav_icon-bar {background-color: #FFF;}
.slicknav_nav, .slicknav_nav a {color: #FFF; font-weight: 400 !important;}
.slicknav_nav a {border-top: 1px dotted #df9e7b;}
.slicknav_nav a.bordbtm {border-bottom: 1px solid #df9e7b;}

#bottomarea, #bottomarea a, #btm_menu a {color: #FFF;}
#btm_menu {color: #FFF; background-color:#554537;}
#bottomarea {background-color: #282018;}
.tb {color: #FFE373 !important; font-style: italic;}