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

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

#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 {text-decoration: none; outline: none;}
*:hover {-webkit-tap-highlight-color: transparent;}
img {border: 0;}
hr {height: 1px; border: 0px; color: #BBB; background-color: #BBB; margin: 15px 0;}

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

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

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


/*HEADER*/

#header {position: relative; z-index: 1; width: 100%;}
#header table {position: relative; margin: auto; padding: 8px 0 8px 0; width: 100%;}
#headertext {text-align: center; margin: auto; line-height: 1.35; font-weight: 700;}

#logo img {width: 90px;}
#phone {font-size: 28px; font-weight: 700; vertical-align: middle !important; text-align: right; white-space: nowrap;}
#phone a {text-decoration: none;}
h1 {font-style: italic; font-weight: 500 !important; font-size: 20px; margin: 0;}
h1 span {display: block;}

@media (min-width: 1400px) {#header table {width: 80%;}}
@media (max-width: 1401px) {#header table {width: 99%;}}

@media (max-width: 800px) {#phone {font-size: 26px;}}

@media (max-width: 680px) {
h1 {font-size: 17px;}
#phone {font-size: 24px;}
}

@media (max-width: 350px) {h1 {width: 90%; font-size: 16px;}}

@media (max-width: 615px) {
#logo img {width: 80px;}
h1 {font-size: 16px; padding: 0 10px;}
#phone {font-size: 22px;}
}
@media (max-width: 955px) and (min-width: 475px) {h1 span {display: inline;}}
@media (max-width: 530px) {
#logo img {width: 75px;}
h1 {font-size: 15px; padding: 0 5px;}
#phone {font-size: 20px;}
}
@media (min-width: 475px) {
#logo {padding: 0 12px 0 15px;}
#logo img {display: block;}
#phone {padding: 0 10px 5px 12px;}
#social {right: 10px;}
/*centers quote above menu*/
#logo {width: 23%;}
#headertext {width: 53%;}
#phone {width: 23%;}
}
@media (max-width: 474px) {
#header table {padding: 10px 0 12px 0;}
#header table td {display: block;}
#phone, #logo {width: 100%; padding: 0; text-align: center;}
#headertext {font-size: 18px; width: auto; text-align: center; padding: 5px 10px 5px 10px;}
h1 {font-size: 16px; padding: 0 5px; width: auto;}
#phone {padding: 8px 0 0 0;}
#social {bottom: 3px; right: 8px;}
}
@media (max-width: 430px) {
h1 {font-size: 15px;}
h1 span {display: inline;}
}


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


/*MENU*/

#nav, #nav a {-webkit-tap-highlight-color:transparent;}
#nav {margin-bottom: 2px;}
#nav a.selected:hover {text-decoration: none;}

@media (min-width: 481px) {
#nav a:hover {background: none;}
.js #menu, .slicknav_menu {display:none;}
#nav {text-align: center; position: relative; width: 100%; padding-bottom: 2px;}
#nav li, #nav li a {list-style:none; vertical-align: middle; height: 46px;}
#nav ul {margin: 0; padding: 0;}
#nav li {display: inline-block; margin-left: -4px;}
#nav li a {display: table-cell; font-size: 18px; font-weight: 400; /*text-transform: uppercase;*/ padding: 0 18px 2px 18px;}
}

@media (max-width: 570px) and (min-width: 481px) {#nav li a {padding: 0 14px 2px 14px;}}
@media (max-width: 530px) and (min-width: 481px) {#nav li a {padding: 0 11px 2px 11px;}}
@media (max-width: 500px) and (min-width: 481px) {#nav li a {font-size: 17px;}}
@media (max-width: 355px) and (min-width: 481px) {#nav li a {padding: 0 10px 2px 10px;}}

@media (max-width: 480px) {
#menu {display:none;}
/*menu button*/
.slicknav_menu {display:block; /*position: fixed;*/ width: 100%; z-index: 100; padding: 0px; text-align: center;}
.slicknav_menu .slicknav_icon-bar {display: block; width: 1.8em; height: 0.125em;}
.slicknav_btn .slicknav_icon-bar + .slicknav_icon-bar {margin-top: 0.4em;}
.slicknav_btn {position: relative; display: inline-block; vertical-align: middle; padding: 0.38em; cursor: pointer; margin: 5px 5px 6px; border-radius: 3px;}
  
/*menu content*/
.slicknav_nav {margin: 0; padding: 0; list-style:none; overflow: hidden; transition: 0s; -webkit-transition: 0s;}
.slicknav_nav a {display: block; padding: 9px 10px 12px 10px; text-decoration: none;}
.slicknav_menu li, .slicknav_menu li a {font-weight: 700; font-size: 18px;}
}

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


/*BODY AREA*/

#bodyarea {position: relative; margin: auto; padding: 5px 0 30px 0;}

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

@media (min-width: 1300px) {#bodyarea {width: 85%;}}
@media (max-width: 1299px) {#bodyarea {width: 92%;}}
@media (max-width: 400px) {#bodyarea, h2 {font-size: 18px;}}

.bodyhead {font-weight: 700; font-size: 1.4em; line-height: 1.3; text-align: center; margin-top: 15px;}
.heading {font-weight: 700; font-size: 1.2em;}


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

/*Page Pics*/
.pagepic {margin-top: 35px; font-size: 0.85em;}
.pagepic p {margin: -8px 0 0 0; padding: 0;}
.pagepic img {width: 100%; display: block;}
.picwide img {max-width: 450px;}
.pictall img {max-width: 350px;}
.picleft {float: left; margin: 10px 20px 15px 0;}
.picright {float: right; margin: 10px 0 0px 20px;}
.piccenter {text-align: center;}
@media (max-width: 760px) {
.picleft, .picright {text-align: center; float: none; margin: 25px auto 15px auto;}
.pagepic img {width: 100%; display: inline;}
}

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

/*BOTTOM AREA*/

#bottomarea {text-align: center; font-size: 13px; line-height: 1.7; padding: 15px 0;}
.copyright {padding-bottom: 0px;}

.phbtm a:hover {text-decoration: none !important;}
.tb:hover, .tb a:hover {text-decoration: underline !important;}

@media (max-width: 450px) {.copyco span {display: block;}}
@media (max-width: 355px) {
.serving {margin-top: 12px;}
.serving span {display: block;}
}
@media (max-width: 370px) {.tb {display: block;}}

#btm_menu {text-align: center; margin: auto; padding: 10px; font-size: 16px; line-height: 1.4;}
#btm_menu a {text-decoration: none;}
#btm_menu a:hover {text-decoration: underline;}
#btm_menu span {padding: 0 8px; visibility: hidden;}
@media (max-width: 500px) and (min-width: 372px) {
#btm_menu a {text-transform: none}
#btm_menu span {padding: 0 5px;}
}
@media (max-width: 420px) {
#btm_menu {line-height: 2.5; padding: 5px 0;}
#btm_menu a {display: block; text-transform: uppercase;}
#btm_menu span {display: none;}
}

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


/*COLORS*/

#header {background-color: #FFFFFF;}
#phone {color: #125498;}

body {background-color: #FFF; color: #111111; border-top: 8px solid #20979B;}
a, a:visited, a:hover {color: #017cca;}

@media (min-width: 425px) {h1 {color: #125498;}}
@media (max-width: 424px) {h1 {color: #00A6AB;}}

.bodyhead {color: #125498;}
.heading {color: #03ACA6;}

#nav {background: #20979B url('../back.jpg') repeat;}

.slicknav_nav .slicknav_row, .slicknav_nav a {background-color: #20979B;}

#nav a, #nav a:hover {color: #FFFFFF;}
#nav a.selected, #nav a.selected a, #nav a.selected:hover, .slicknav_menu a.selected, .slicknav_menu a.selected:hover {background-color: #0A7579;}
.slicknav_nav .slicknav_row:hover, .slicknav_nav a:hover, #nav a:hover {background-color: #35B8BC;}

.slicknav_menu .slicknav_icon-bar {background-color: #FFF;}
.slicknav_nav, .slicknav_nav a {color: #FFFFFF; font-weight: 400 !important;}
.slicknav_nav a {border-top: 1px dotted #50d4d8;}

#bottomarea, #bottomarea a, #btm_menu a {color: #FFF;}
#bottomarea {background-color: #222222;}
#btm_menu {color: #FFF; background-color: #077470;}
.tb, .tb a {color: #7ED2D4 !important;}