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

body {font-family: "Alegreya", Arial, Helvetica, sans-serif;}

@media (min-width: 1051px) {.desk {display: inline !important;}}
@media (max-width: 1050px) and (min-width: 603px) {.tab {display: inline !important;}}
@media (max-width: 602px) and (min-width: 400px) {.phab {display: inline !important;}}
@media (max-width: 399px) and (min-width: 321px) {.phone {display: inline !important;}}
@media (max-width: 320px) {.phonesm {display: inline !important;}}

.desk, .tab, .phab, .phone, .phonesm, #width {position: fixed; top: 0; z-index: 200; padding: 0 3px; font-size: 11px; line-height: 14px; font-family: Arial, Helvetica, sans-serif; background-color: #FF0;}
.desk, .tab, .phab, .phone, .phonesm {left: 32px; display: none;}
#width {left: 0px;}

a, .ham {-webkit-tap-highlight-color: transparent);}
a, a:visited, a:hover {text-decoration: none; outline: none;}

img {border: 0;}
hr {height: 1px; border: 0px; color: #BBB; background-color: #BBB; margin: 15px 0;}
.emp {font-weight: 500; font-size: 24px; line-height: 42px; text-align: center; text-transform: uppercase;}

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

*:hover {transition: 0.3s; -webkit-transition: 0.3s;}

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


/*HEADER*/

#header {position: relative; z-index: 1; width: 100%;}
#header table {position: relative; margin: auto; padding: 3px 0 4px 0;}

#logo {text-align: center; padding-top: 0px;}
#logo img {width: 290px; animation: logozoom 20s; position: relative;}
#phone {font-size: 33px; line-height: 35px; font-weight: 500; text-align: center; margin-bottom: 10px; white-space: nowrap;}
#phone a {text-decoration: none;}
.social {position: absolute;}

@media (max-width: 870px) {#logo img {width: 260px;}}
@media (max-width: 725px) {
#logo img {width: 220px;}
#phone {font-size: 28px;}
}
@media (max-width: 590px) {
#logo img {width: 170px;}
#phone {font-size: 26px;}
}

@media (min-width: 461px) {#header table td {width: 30%;}}
@media (max-width: 460px) {
#header table {width: 100%;}
#logo {width: 55%; text-align: center;}
.navright {width: 45%; vertical-align: top;}
}

@media (max-width: 355px) {
#logo {width: 100%;}
.navright {display: block;}
#header {padding-bottom: 35px;}
}

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


/*MENU*/

.js #menu, .slicknav_menu, #menu {display:none;}

@media (min-width: 451px) {
#nav, #nav a {-webkit-tap-highlight-color:transparent;}
#nav a:hover {background: none;}
#nav {top: 0; vertical-align: top !important; margin-top: 0;}

.navleft, .navright {vertical-align: top;}

.navleft #nav {text-align: right; margin-right: 30px;}
.navright #nav {text-align: left; margin-left: 30px;}
 
#nav, #nav li a {height: 43px;}
#nav ul {margin: 0; padding: 0;}
#nav li, #nav li a {list-style:none; vertical-align: middle; display: block;}

#nav li a {font-size: 22px; line-height: 25px; font-weight: 500; text-transform: uppercase; height: auto; padding: 10px 0 12px 0;}
#nav li a:hover {text-decoration: underline;}
#nav li a.selected:hover {text-decoration: none;}
}
@media (max-width: 870px) {
#nav li span {display: block;}
.navleft #nav {margin-right: 20px;}
.navright #nav {margin-left: 20px;}
}
@media (max-width: 725px) {#nav li a {text-transform: none;}}
@media (max-width: 590px) {
#nav li a {font-size: 17px; line-height: 22px; text-transform: uppercase; padding: 8px 0 10px 0;}
.navleft #nav {margin-right: 20px;}
.navright #nav {margin-left: 20px;}
}
@media (max-width: 545px) {
#nav li a {text-transform: none;}
.navleft #nav {margin-right: 15px;}
.navright #nav {margin-left: 15px;}
}

@media (max-width: 460px) {
#nav, .navleft {display: none;}
/*menu button*/
.slicknav_menu {display:block; position: relative; width: 100%; z-index: 100; padding: 0px; text-align: right;}
.slicknav_menu .slicknav_icon-bar {display: block; width: 1.425em; height: 0.125em;}
.slicknav_btn .slicknav_icon-bar + .slicknav_icon-bar {margin-top: 0.3em;}
.slicknav_btn {position: relative; display: inline-block; vertical-align: middle; padding: 0.38em; cursor: pointer; margin: 5px 8px 6px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px;}
  
/*menu content*/
.slicknav_nav {margin: 0; padding: 0; list-style:none; overflow: hidden; text-align: center; position: absolute; width: 100%;} /*absolute allows it cover top of owl carousel slightly*/
.slicknav_nav a {display: block; padding: 5px 5px 8px 5px; text-decoration: none;}
.slicknav_menu li, .slicknav_menu li a {font-weight: 500; font-size: 18px; line-height: 22px;}
.slicknav_nav a.bordbtm {border-bottom: none !important;}
.slicknav_nav a span {display: block;}
}
@media (max-width: 355px) {
.slicknav_menu {position: absolute !important; bottom: -35px; left: 0; right: 0; text-align: center;}
.slicknav_menu li a {text-transform: uppercase;}
.slicknav_nav a span {display: inline;}
}

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


/*BODY AREA*/

#bodyback, #bodyarea {position: relative;}

#bodyarea, h2 {font-size: 24px !important; line-height: 33px !important; font-weight: 400 !important;}

@media (min-width: 1300px) {#bodyarea {margin: auto; padding: 5px 0 30px 0; width: 90%;}}
@media (max-width: 1299px) {#bodyarea {padding: 5px 25px 30px 25px;}}
@media (max-width: 920px) {#bodyarea {padding: 5px 20px 30px 20px;}}
@media (max-width: 415px) {
#bodyarea {padding: 5px 15px 25px 15px;}
#bodyarea, h2 {font-size: 22px !important; line-height: 30px !important;}
}
@media (max-width: 325px) {#bodyarea, h2 {font-size: 21px !important; line-height: 29px !important;}}

.bodyhead {font-weight: 500; font-size: 34px; line-height: 38px; text-align: center; margin-top: 15px;}
.heading {font-weight: 500; font-size: 31px; line-height: 35px;}
h4 {font-size: 22px; line-height: 26px; font-weight: 500; text-align: center; margin: 2px auto 20px auto;}

@media (max-width: 460px) {
.bodyhead {font-size: 29px; line-height: 34px;}
h4 {font-size: 20px; line-height: 24px;}
.heading {font-weight: 500; font-size: 27px; line-height: 31px;}
}

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

/*Page Pics*/
.pagepic {text-align: center; font-size: 0.85em;}
.pagepic p {margin: -8px 0 0 0; padding: 0;}
.pagepic img {width: 100%;}
.pictall img {max-width: 350px;}
.picleft {float: left; margin: 10px 20px 0px 0;}
.picright {float: right; margin: 10px 0 0px 20px;}
.piccenter, .piccenter2 {text-align: center;}
.piccenter2 {margin-top: 30px !important;}

.imagewrap, .imagewrap2 p {overflow: hidden; margin: 0;}
@media (max-width: 600px) {
.imagewrap {overflow: visible;}
.imagewrap p {overflow: hidden !important;}
.imagewrap2 p {overflow: visible !important;}
.imagewrap, .imagewrap2 p {margin: 0 !important;}
}
@media (min-width: 925px) {
.picwide img {width: 500px;}
.picwide.piccenter {display: none;}
}
@media (max-width: 924px) {
.picwide img {max-width: 500px;}
.picwide.picleft, .picwide.picright {display: none;}
.picwide.piccenter, .picwide.piccenter2 {width: 100%; margin: 25px auto 0px auto;}
}
@media (min-width: 642px) {.pictall.piccenter {display: none;}}
@media (max-width: 641px) {
.pictall.picleft, .pictall.picright {display: none;}
.pictall.piccenter, .pictall.piccenter2 {width: 100%; margin: 25px auto 0px auto;}
}

/*2 pics side by side for short pages*/
.twopics {margin: 30px auto 20px auto; text-align: center;}
.twopics img {width: 100%;}
.twopics .tdmid {width: 30px;}
.twopics td.row2 {padding-top: 20px; margin-top: 0;}
.twopictall {max-width: 350px;}
.twopicwide {max-width: 450px;}
@media (max-width: 700px) {
.twopics td {display: block; margin: 15px auto;}
.tdmid {width: 0;}
.twopics td.row2 {padding-top: 0;}
}

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

/*BOTTOM AREA*/

#bottomarea, #btm_menu {font-family: Arial, Helvetica, sans-serif;}

#bottomarea {text-align: center; font-size: 13px; line-height: 21px; padding: 10px 0; font-weight: 300;}
.copyright {padding-bottom: 0px;}

.phbtm a:hover {text-decoration: none !important;}
.tb:hover {font-style: italic;}

@media (max-width: 390px) {.serving {margin-top: 12px;}}
@media (max-width: 290px) {.copyco, .serving span, .web a {display: block;}}

/*bottom menu*/
#btm_menu {text-align: center; margin: auto; padding: 10px; font-size: 15px; line-height: 25px;}
#btm_menu a {text-decoration: none;}
#btm_menu a:hover {text-decoration: underline;}
#btm_menu div {display: inline;}
#btm_menu span {padding: 0 5px 0 10px;}
@media (max-width: 685px) {
#btm_menu div {display: block;}
#btm_menu .noline {display: none;}
}
@media (max-width: 345px) {#btm_menu span {padding: 0 3px 0 8px;}}
@media (max-width: 315px) {#btm_menu a {text-transform: none}}
@media (max-width: 330px) {
#btm_menu {line-height: 40px; padding: 5px 0;}
#btm_menu a {font-size: 15px; display: block; text-transform: uppercase;}
#btm_menu span {display: none;}
}

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


/*COLORS*/

#bodyback {background-color: #FFFFFF;}
#header {background-color: #F5F1E8; border-bottom: 3px solid #d3cec2;}

#phone {color: #222222;}

body {background-color: #FFF; color: #222222;}
a, a:visited, a:hover {color: #1a37e5;}
.emp {color: #000;}
.bodyhead {color: #D30000;}
.heading {color: #D30000;}
h4 {color: #777;}


#nav a {color: #E30000;}
#nav a.selected, #nav a.selected:hover {color: #444444;}

.slicknav_nav .slicknav_row, .slicknav_nav a {background-color: #D30000;}
.slicknav_menu a.selected, .slicknav_menu a.selected:hover {background-color: #B10101;}
.slicknav_nav .slicknav_row:hover, .slicknav_nav a:hover {transition: 0.3s; -webkit-transition: 0.3s; background-color: #FF6F5C;}

.slicknav_menu .slicknav_icon-bar {background-color: #FFF;}
.slicknav_nav, .slicknav_nav a {color: #FFF; font-weight: 400 !important;}
.slicknav_btn {background-color: #D30000;}
.slicknav_nav a {border-top: 1px dotted #FFF;}
.slicknav_nav a.bordbtm {border-bottom: 1px solid #000;}


#bottomarea, #bottomarea a, #btm_menu a {color: #FFF;}
#bottomarea {background-color: #222222;}
#btm_menu {color: #FFF; background-color: #a00101;}
.tb, .tb a {color: #FCFF7D !important;}