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

@font-face {font-family: 'Open Sans'; font-style: normal; font-weight: 400; font-display: block;
  src: local(''), url('fonts/opensans-400.woff2') format('woff2'), url('fonts/opensans-400.woff') format('woff');
}
@font-face {font-family: 'Open Sans'; font-style: normal; font-weight: 600; font-display: block;
  src: local(''), url('fonts/opensans-600.woff2') format('woff2'), url('fonts/opensans-600.woff') format('woff');
}

body {font-family: 'Open Sans', Arial, Verdana, Geneva; font-variant-ligatures: none;}

#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: .1em; cursor: pointer;}
* {-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;}
img {border: 0; image-rendering: -webkit-optimize-contrast;} #phone a {white-space: nowrap;}
.phlink {color: inherit !important; text-decoration: none !important; white-space: nowrap;} .phlink:hover {cursor: text;}

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

/*HEADER*/

#logo {z-index: 3;} header {z-index: 2;} nav {z-index: 1;}

header {position: fixed; display: table; width: 100%; margin: auto; box-shadow: 0 3px 7px -5px #000; text-align: center; box-sizing: border-box;}
#headerback, header, #logo, nav div {height: 115px;}

#headtop, header, #logo {position: fixed;}
#headtopback, #headtop {height: 35px;} #headtop, header {display: table; width: 100%; margin: auto; z-index: 2;}
header {box-shadow: 0 3px 7px -5px #000; text-align: center; box-sizing: border-box;}

#logo {z-index: 3; left: 0; right: 0; display: table; margin: auto; text-align: center;}
#logo img {height: 83px; display: block;}
#logo a {display: table-cell; vertical-align: middle; padding-bottom: 4px;}

@media (min-width: 2301px) {#headtop {padding: 0 15%;}}
@media (max-width: 2300px) {#headtop {padding: 0 8%;}}
@media (max-width: 1910px) {#headtop {padding: 0 3%;}}

#phone {font-size: 17px; line-height: 1; padding-top: 1px; text-align: right; white-space: nowrap;}
#phone, #phone a {font-weight: 600;} #phone a {margin-left: 5px;} #phone span {font-size: .9em; font-weight: 400;}

@media (max-width: 930px) and (min-width: 1221px) {#headerback, header {height: 116px;} #logo {margin-top: 17px;}}

@media (min-width: 706px) {#logo {width: 290px;}}
@media (max-width: 705px) and (min-width: 371px) {#logo {margin: 0 0 0 25px;}}
@media (max-width: 430px) {
#logo {margin: 0 auto; padding-right: 15px;} #headtopback, #headtop {height: 60px;} #phone {text-align: left; font-size: 21px;} #phone span {display: none;}
}

@media (max-width: 340px) {#logo img {width: 250px; height: 72px;}}

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

/*MENU*/

/*#logo {border: 1px solid yellow} nav {border: 1px solid green} nav div {border: 1px solid cyan} nav a {border: 1px solid blue}*/

a, *:hover {-webkit-tap-highlight-color: transparent;} #navcheck {display: none;}

nav section {margin: 0; padding: 0;}
nav a {text-decoration:none; cursor: pointer; line-height: 1.25; font-weight: 400;}
nav a.selected {cursor: text; -webkit-user-select: none; -webkit-touch-callout: none;}

@media (min-width: 1601px) {
nav a {padding: 0 15px; font-size: 18px;} nav section:first-child div {padding: 0 8px;} /*makes shorter menu section wider*/
}
@media (max-width: 1600px) and (min-width: 1311px) {nav a {padding: 0 12px; font-size: 17px;} nav section:first-child div {padding: 0 4px;}}
@media (max-width: 1490px) and (min-width: 1311px) {nav span {display: block;}}
@media (max-width: 1075px) and (min-width: 1091px) {nav a {padding: 0 8px;}}
@media (max-width: 1090px) {nav a {padding: 0 8px;} #logo {font-size: 28px;}}

@media (min-width: 1311px) {
.ham {display: none;}
nav {position: fixed; left: 0; right: 0; text-align: center; margin: auto; width:calc(85vw + 400px); max-width: min(98%, 1600px);}
nav div {display: table-cell; vertical-align: middle; white-space:nowrap;}
nav section:first-child {float: left;} nav section:last-child {float: right;}
nav a {display: table-cell; height: 50px; vertical-align: middle; text-align: center; transition: .2s; color: #000 !important;}

/*underline animation
nav a {position: relative;}
nav a:before {content: ""; position: absolute; display: block; width: 85%; height: 2px; bottom: 11px; left: 0; right: 0; margin: auto; background-color: #0FF; transform: scaleX(0); transition: transform 0.25s ease;}
nav a:not(a.selected):hover:before, nav a.selected:before {transform: scaleX(1);}*/
}

@media (max-width: 1310px) {
nav {position: absolute; max-width: 250px; right: 0; background-color: rgba(10, 10, 10, 0.98); height: 100vh; margin-top: 115px; margin-right: -100%; -webkit-transition: margin-right 0.3s ease-out; transition: margin-right 0.3s ease-out; -webkit-transition: -webkit-transform margin-right 0.3s ease-out; -webkit-transition: transform margin-right 0.3s ease-out;}
nav div {height: calc((35vh / 8) + 5vmin);}
nav a {display: table-cell; width: 1%; vertical-align: middle; text-align: center; font-size: 0; opacity: 0; height: 0; white-space: nowrap; padding: 0 8px; transition: .45s font-size ease-in-out; -webkit-transition: .45s font-size ease-in-out; color: #FFF !important;}
nav a.selected {background-color: #444;}

#navcheck:checked ~ nav {margin-right: 0;} #navcheck:checked ~ nav a {font-size: 22px; opacity: 1; height: inherit;}

.ham {position: absolute; z-index: 600; height: 35px; width: 45px; top: 30px; right: 40px; margin: auto; text-align: center; padding: 0 10px 10px 10px;}
.ham:hover {cursor: pointer;} .ham > div {top: 27px; left: 12px;}
.ham > div, .ham > div::before, .ham > div::after {display: block; content: ""; position: absolute; height: 3px; width: 40px; opacity: 1; background: #000; -webkit-transition: transform .3s ease-in-out, background .1s ease-out; transition: transform .3s ease-in-out, background .1s ease-out;}
.ham > div::before {top: -11px;} .ham > div::after {top: 11px;}
#navcheck:checked ~ .ham > div {width: 0; background: none;}
#navcheck:checked ~ .ham > div::before {-webkit-transform: rotateZ(38deg); transform: rotateZ(38deg); top: 0; background: #000;}
#navcheck:checked ~ .ham > div::after {-webkit-transform: rotateZ(-38deg); transform: rotateZ(-38deg); top: 0; background: #000;}
}
@media (max-width: 705px) {.ham {right: 15px;}}
@media (max-width: 500px) {nav {margin-top: 115px; max-width: 100%; padding-top: 0px;} nav div {height: calc((53vh / 8) + 3vmin);}}
@media (max-width: 430px) {
.ham {top: -58px; right: 10px;}
.ham > div, .ham > div::before, .ham > div::after, #navcheck:checked ~ .ham > div::before, #navcheck:checked ~ .ham > div::after {background: #FFF;}
}
/*@media (max-width: 340px) {.ham {top: 15px; right: 10px;} nav {margin-top: 74px;}}*/

/*@media (max-width: 320px) {.ham {top: 80px; right: 10px;} nav {margin-top: 134px;}}*/

@media (max-width: 400px) {nav div {height: calc((51vh / 8) + 3vmin);}}

/*nav a.selected {text-decoration: underline; text-underline-offset: .25em;}*/

:root {--menuline: #F00; --menuhover: #2688CF; --menuselect: #000;}
nav .selected {text-decoration: underline;} nav a:hover:not(.selected) {background-color: var(--menuhover); color: #FFF !important;}

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

/*BODY AREA*/

#bread {font-size: 14px; line-height: 1.4; margin: 4px 0 18px 0;} #bread a {text-decoration: none;}

.bodyarea {position: relative; padding: 10px 0 35px 0; margin: auto; width: 85%; max-width: 1500px;}
.bodyarea, h2, h3 {font-size: 20px; line-height: 1.7; font-weight: 400 !important;}
.bodyhead {padding-bottom: 10px; font-weight: 600 !important; font-size: 1.6em; line-height: 1.25; text-align: center;}
h1, h2, h3, h4, h5 {margin: 0;}

@media (max-width: 800px) {.bodyhead {font-size: 1.5em;}}
@media (max-width: 600px) {.bodyhead {padding-bottom: 0;}}
@media (max-width: 360px) {.bodyarea {width: 88%;} .bodyhead {font-size: 1.38em;}}

.heading, .heading2 {font-weight: 600; line-height: 1.35; display: table;} .heading {font-size: 1.3em;} .heading2 {font-size: 1.15em;}

ul.thislist {margin-left: -15px;} ul.thislist li:not(ul.thislist li:last-child) {padding-bottom: 15px;} ul.thislist span {font-weight: 600;}

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

/*Page Pics*/

.pagepic img, .twopics img {border-radius: 3px; width: 500px; height: 300px; width: 100%; height: auto; display: block;}

.picwide {max-width: 500px;} .pictall {max-width: 350px;}
.picleft {float: left; margin: 10px 40px 30px 0;} .picright {float: right; margin: 10px 0 30px 40px;}
.piccenter, .piccenter img {text-align: center; margin: auto; display: block;}
@media (max-width: 1050px) and (min-width: 871px) {.picwide {max-width: 430px;}}
/*@media (min-width: 751px) {.piccenter {display: none;}}*/
@media (max-width: 870px) {.piccenter, .picleft, .picright {text-align: center; float: none; margin: 35px auto;} .pictall {max-width: 400px;}}

.twopics {display: table; margin: 40px auto 30px auto;}
.twopics div {display: table-cell; vertical-align: middle;}
.twopics img {width: 100%; display: block; margin: auto; border-radius: 3px;} .tpwide {max-width: 500px;} .tptall {max-width: 350px;}
@media (min-width: 701px) {.twopics div:first-child {padding-right: 2%;} .twopics div:last-child {padding-left: 2%;}}
@media (max-width: 700px) {.twopics div {display: block;} .twopics div:last-child {padding-top: 30px;}}

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

/*BOTTOM INFO*/

#btminfoback {width: 100%; padding: 40px 0 25px 0; text-align: center; margin: auto;}
#btminfo {width: 100%; max-width: 1300px; text-align: center; margin: auto; padding: 0 15px;}
#btminfo a:not(.phlink) {color: #A1D6FC !important}
#btminfo td {vertical-align: top; font-size: 16px; line-height: 1.6; padding: 10px 0;} #btminfo a {text-decoration: none;}
.btmhead {font-size: 26px; font-weight: 700; color: #FDF026;}
.contactus, .hrs, .hrs span, .btmaddr span {text-align: left; display: inline-block;} .contactus div {padding: 3px 0; margin-left: -25px;}
.emergency {margin-top: 5px; font-size: 1.1em; color: #FDF026;}
.emergency span {display: block;}

.pay {max-width: 265px; margin: auto;} .pay span {width: 57px; height: 33px; margin: 0 1px;}
.cash, .check, .mc, .visa, .amex, .disc, .paypal {background: url(images/pay.png); display: inline-block;}
.cash {background-position: 0 0;} .check {background-position: 0 -33px;} .mc {background-position: 0 -66px;}
.visa {background-position: 0 -99px;} .amex {background-position: 0 -132px;} .disc {background-position: 0 -165px;} .paypal {background-position: 0 -231px;}

@media (max-width: 160px) {.pay {max-width: 265px;}}
@media (max-width: 360px) {.pay {max-width: 200px;}}

.connect a {margin: 0 2px;} .connect img {width: 36px; height: 36px;}
@keyframes shake2 {20% {-webkit-transform: rotateZ(-8deg);} 80% {-webkit-transform: rotateZ(8deg);}}
.connect a:hover img {-webkit-animation: shake2 .16s 5;}

.contactus span, .hrs div span:first-child:not(.emergency span) {position: relative; float: left; vertical-align: top; margin-top: 3px; margin-right: 7px; width: 20px; height: 20px;}
.btmphicon, .btmemailicon, .btmaddricon, .hrsicon {background: url(images/btmicons.png); display: inline-block; width: 20px; height: 20px;}
.btmphicon {background-position: 0 0px;} .btmemailicon {background-position: 0 -20px;}
.btmaddricon {background-position: 0 -40px;} .hrsicon {background-position: 0 -60px; vertical-align: top;}

@media (max-width: 950px) and (min-width: 626px) {
#btminfoback {width: auto; padding: 25px 0;}
.contactusback, .hrsback, .payback, .connectback {width: 48%; display: inline-block; background-color: #555; margin: 2px; border-radius: 3px;}
.contactusback, .hrsback {height: 180px;} .payback, .connectback {height: 180px;}
}
@media (max-width: 625px) {
#btminfoback {padding: 30px 0;} #btminfoback, #btminfo {width: auto;}
.contactusback, .hrsback, .payback, .connectback {display: block; margin: 5px auto; background-color: #555; padding: 15px 35px !important;}
.contactusback {height: 180px;}
.btmhead {font-size: 23px;}
}

/*#bbb img {margin: 25px auto 0 auto; width: 250px; height: 52px; background-color: #FFF; padding: 5px; border-radius: 10px;}
@media (max-width: 315px) {#bbb img {width: 230px; height: 48px;}}*/

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

/*BOTTOM AREA*/

.nolink, #serving, #serving a {color: inherit !important; text-decoration: none !important; cursor: text;}
#serving {margin: 0 auto 20px auto; padding: 0 20px; text-align: center; font-size: 12px; line-height: 1.3; font-weight: 300;}
#serving, #serving a {color: #BBB !important;}

footer {margin: auto; text-align: center; padding: 20px 30px;}
.copy {margin-top: 40px; font-size: 14px; line-height: 1.6;} #lic {font-size: 14px;}
.web {font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 1.5; color: #BBB !important;}
.web a {text-decoration: none; font-style: italic; color: inherit;} .web a:hover {text-decoration: underline;}
@media (max-width: 500px) {.web a {display: block;}}

#totop {position: fixed; right: 14px; bottom: 12px; z-index: 100; padding: 8px 9px 8px 10px; background-color: rgba(80, 80, 80, 0.45); border: 1px solid #777;}
#totop, #totop {height: 18px; width: 18px;}
#totop div {font-family: Arial, Helvetica, sans-serif; display: inline-block; -webkit-transform: rotate(90deg); transform: rotate(90deg); font-size: 32px; line-height: 18px; color: #FFF;}
#totop:hover {-webkit-transform: scale(1.07);} #totop:hover div { transform: rotate(450deg); transition-timing-function: ease;}
@media (min-width: 481px) {#totop, #totop div {-webkit-transition: .15s;}}


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

/*COLORS*/

body {background-color: #FFF;} header {background-color: #E5E5E5;} #headtop {background-color: #000;}
body {color: #444;} #phone, #phone a {color: #FFF;} .bodyhead {color: var(--menuhover);} .heading {color: #000;}

#btminfo, #bottomarea, #bottomarea a {color: #FFF;} #btminfoback {background-color: #333;}
footer {background-color: #000; color: #CCC;}