html, body {margin: 0; padding: 0;} html {font-size: 100%; text-size-adjust: 100%;}


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

@font-face {font-family: 'RobotoCond'; font-style: normal; font-weight: 500; font-display: block;
  src: local(''), url('fonts/roboto-cond-500.woff2') format('woff2'), url('fonts/roboto-cond-500.woff') format('woff');
}
@font-face {font-family: 'RobotoCond'; font-style: normal; font-weight: 600; font-display: block;
  src: local(''), url('fonts/roboto-cond-600.woff2') format('woff2'), url('fonts/roboto-cond-600.woff') format('woff');
}
@font-face {font-family: 'RobotoCond'; font-style: normal; font-weight: 700; font-display: block;
  src: local(''), url('fonts/roboto-cond-700.woff2') format('woff2'), url('fonts/roboto-cond-700.woff') format('woff');
}



body {font-family: 'NeueAlter', Arial, Helvetica, sans-serif; font-variant-ligatures: none !important; letter-spacing: .25px;}

#width {position: fixed; top: 0; z-index: 20; padding: 0 3px; font-size: 11px; line-height: 14px; font-family: Arial; background-color: #FF0;}
a, a:visited {color: #2E3FE1;}
a {text-decoration: underline; text-decoration-thickness: 1px; text-decoration-style: dotted; text-underline-offset: .1em; cursor: pointer;}
a:focus-visible {outline: 2px solid #66AFE9; outline-offset: 2px;}
* {-webkit-tap-highlight-color: transparent;} img {border: 0;}
.phlink {color: inherit !important; text-decoration: none !important; white-space: nowrap;} .phlink:hover {cursor: text;}

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

/*HEADER*/

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

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

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

#logo {top: 2px; left: 0; right: 0; display: table; margin: auto; text-align: center;}
#logo img {height: auto /*sdf*/; display: block;}
#logo a {display: table-cell; vertical-align: middle; padding-bottom: 4px;}
#logo, #logo img {width: 150px;}

@media (min-width: 2301px) {#headtop {padding: 0 15%;}} @media (max-width: 2300px) {#headtop {padding: 0 8%;}}
@media (max-width: 1910px) {#headtop {padding: 0 3%;}}
@media (max-width: 1260px) and (min-width: 961px) {#logo {top: 7px;}}
@media (max-width: 960px) and (min-width: 1px) {#logo {top: 1px;}}

#phone {font-size: 17px; line-height: 1; padding-top: 1px; text-align: right; white-space: nowrap;}
#phone span {font-size: 15px; margin-right: 8px;}

@media (max-width: 710px) {
#logo {margin: 0 0 0 25px;} #logo, #logo img {width: 120px;} #logo img {height: auto /*sdf*/;}
#headerback, header, #logo {height: 95px;}
}

@media (max-width: 415px) {#phone span {display: none;}}
@media (min-width: 381px) {header, #logo {position: fixed;}}
@media (max-width: 380px) {header, #logo {position: absolute;} header {z-index: 1;}}

/*@media (max-width: 150px) {
#headtopback, #headtop {height: 40px;} #logo {margin: 25px 0 0 20px; right: auto; z-index: 2;} #logo, #logo img {width: 160px;} #logo img {height: auto;}
#phone {padding-top: 3px; text-align: center;} #phone a {display: block; line-height: 1.5;}
}
@media (max-width: 100px) {
#headtopback, #headtop {height: 40px;} #logo {margin-top: -4px;} #logo, #logo img {width: 200px;} #logo img {height: 108px;}
}*/

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

/*Phone or Text*/

.phone-wrapper {display: inline-block;}
.phone-wrapper img {width: 22px; height: 22px; margin: 0 12px 3px 0; vertical-align: middle;}
.phone-link {-webkit-user-select: none; user-select: none; cursor: pointer; font-size: 18px; font-weight: 500; color: #FFF;}

#contact-toggle, .popup {display: none;} #contact-toggle:checked ~ .popup {display: block;}

.popup {position: absolute; margin-top: 10px; padding: 12px 12px 4px 12px; width: 125px; text-align: center; box-sizing: border-box; background-color: #FFF; border: 1px solid #DDD; box-shadow: 0 4px 16px rgba(0,0,0,0.12); z-index: 99999 !important;}

.popup a {white-space: nowrap; display: block; padding: 10px 4px 7px 4px; font-size: 18px; text-decoration: none; box-sizing: border-box; color: #FFF; transition: .15s;}
.popup a:first-of-type {background-color: #2057CE; margin-bottom: 8px;}
.popup a:last-of-type {background-color: #1B8E55;}
.popup a:hover {filter: brightness(120%) saturate(120%);}

.dismiss-btn {display: inline-block; margin-top: 10px; padding: 4px 12px; font-size: 24px; font-weight: bold; color: #666; cursor: pointer;}
.dismiss-btn:hover {color: #000;}

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

/*MENU*/

/*nav {border: 1px solid red} nav section {border: 1px solid yellow} nav div {border: 1px solid orange2} nav a {border: 1px solid magenta}*/

#navcheck {display: none;} nav, nav * {box-sizing: border-box;}

nav section {margin: 0; padding: 0;}
nav a {text-decoration:none; cursor: pointer; line-height: 1.35; font-weight: 400; vertical-align: middle; text-align: center; transition: .15s;}
nav a.selected {cursor: text; -webkit-user-select: none; -webkit-touch-callout: none;}

nav div {padding: 0 15px !important; position: relative;}

@media (min-width: 1261px) {
.ham {display: none;}
nav {position: fixed; left: 0; right: 0; text-align: center; margin: auto; width: 98%; max-width: 1400px;}
nav div {display: table-cell; vertical-align: middle; padding: 0 5px; height: 120px; white-space: nowrap;} nav a {height: 45px; font-size: 16.5px;}
nav a {display: table-cell;}
nav section:first-child {float: left;} nav section:last-child {float: right;}
nav section:first-child a {padding: 2px 12px 0 12px;} nav section:last-child a {padding: 2px 0 0 0;}
nav section:first-child span {display: block;}
nav div:not(:last-child)::after {content: ""; position: absolute; right: 0; top: 34%; bottom: 34%; width: 1px; background: var(--orange1);}
}
@media (max-width: 1260px) {nav, nav section {display: grid;} nav a {white-space: nowrap;}}
@media (max-width: 1260px) and (min-width: 961px) {
.hero, #toppic {margin-top: 60px;}
nav {margin-top: 119px; position: absolute; width: 100%; grid-template-columns: auto auto; align-items: center; background-color: var(--charcoal); padding: 5px;}
nav section {grid-auto-flow: column; align-items: center;}
nav a {display: table-cell; width: 1%; vertical-align: middle; text-align: center; height: 52px; font-size: 16px; padding-top: 3px;}
nav div:not(nav section:last-child div:last-child)::after {content: ""; position: absolute; right: 0; top: 25%; bottom: 25%; width: 1px; background: var(--orange1);}
}

@media (max-width: 1000px) and (min-width: 961px) {nav a {font-size: 15px; padding: 2px 0 0 0;}}

@media (max-width: 960px) {
nav {margin-top: 119px; position: absolute; left: 0; width: 100%; transition: opacity .3s; opacity: 0;}
nav div {display: inline-block; height: 0; padding: 0 !important; /*margin: 2.5px;*/}
nav a {display: table-cell; width: 1%; vertical-align: middle; text-align: center; height: 0; font-size: 0; opacity: 0; transition: font-size .2s, background-color .15s; background-color: var(--bluegrey);}

.ham {position: absolute; z-index: 600; height: 35px; width: 45px; top: 15px; right: 20px; margin: auto; text-align: center; padding: 0 10px 10px 10px}
.ham:hover {cursor: pointer;}
.ham div {top: 27px; left: 12px; transition: transform 0.4s ease-out;}
.ham div, .ham div:before, .ham div:after {position: absolute; display: block; content: ""; height: 3px; width: 40px; opacity: 1; background-color: #CCC;} .ham div:before {top: -11px;} .ham div:after {top: 11px;}
#navcheck:checked ~ .ham div {width: 0; transform: rotateX(180deg); transition-timing-function: ease;}
#navcheck:checked ~ .ham div:before {transform: rotateZ(37deg); top: 0;}
#navcheck:checked ~ .ham div:after {transform: rotateZ(-37deg); top: 0;}

#navcheck:checked ~ nav {padding: 2px 5px; opacity: 1; background-color: var(--charcoal); z-index: 200; box-shadow: 0 9999px 0 9999px rgba(0, 0, 0, 0.85);}
#navcheck:checked ~ nav div {height: inherit; border: 1px solid var(--charcoal);}
#navcheck:checked ~ nav a {font-size: 17px; opacity: 1; height: 58px;}
}

@media (max-width: 960px) and (min-width: 591px) {
nav {display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: auto auto; grid-auto-flow: row;}
nav section {display: contents;}

nav section:first-child div:nth-child(1) {grid-column: 1 / span 4; grid-row: 1;}
nav section:first-child div:nth-child(2) {grid-column: 5 / span 4; grid-row: 1;}
nav section:first-child div:nth-child(3) {grid-column: 9 / span 4; grid-row: 1;}

nav section:first-child div:nth-child(4) {grid-column: 1 / span 3; grid-row: 2;}
nav section:nth-child(2) div:nth-child(1) {grid-column: 4 / span 3; grid-row: 2;}
nav section:nth-child(2) div:nth-child(2) {grid-column: 7 / span 3; grid-row: 2;}
nav section:nth-child(2) div:nth-child(3) {grid-column: 10 / span 3; grid-row: 2;}
}

@media (max-width: 960px) {nav section:last-child div:nth-child(3) span {display: block;}}
@media (max-width: 770px) and (min-width: 591px), (max-width: 390px) {nav section:first-child div:nth-child(4) span {display: block;}}
@media (max-width: 715px) {nav {margin-top: 94px;}}

@media (max-width: 590px) and (min-width: 441px) {
nav {display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: auto auto auto;}
nav section {display: contents;}

nav section:first-child div:nth-child(1) {grid-column: 1 / span 3; grid-row: 1;}
nav section:first-child div:nth-child(2) {grid-column: 4 / span 3; grid-row: 1;}

nav section:first-child div:nth-child(3) {grid-column: 1 / span 3; grid-row: 2;}
nav section:first-child div:nth-child(4) {grid-column: 4 / span 3; grid-row: 2;}

nav section:nth-child(2) div:nth-child(1) {grid-column: 1 / span 2; grid-row: 3;}
nav section:nth-child(2) div:nth-child(2) {grid-column: 3 / span 2; grid-row: 3;}
nav section:nth-child(2) div:nth-child(3) {grid-column: 5 / span 2; grid-row: 3;}
}

@media (max-width: 440px) {
nav {display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: auto auto auto;}
nav section {display: contents;}

nav section:first-child div:nth-child(1) {grid-column: 1 / -1; grid-row: 1; text-align: center;}

nav section:first-child div:nth-child(2) {grid-column: 1 / span 6; grid-row: 2;}
nav section:first-child div:nth-child(3) {grid-column: 7 / span 6; grid-row: 2;}

nav section:first-child div:nth-child(4) {grid-column: 1 / span 6; grid-row: 3;}
nav section:nth-child(2) div:nth-child(1) {grid-column: 7 / span 6; grid-row: 3;}

nav section:nth-child(2) div:nth-child(2) {grid-column: 1 / span 6; grid-row: 4;}
nav section:nth-child(2) div:nth-child(3) {grid-column: 7 / span 6; grid-row: 4;}

#navcheck:checked ~ nav section:first-child div:first-child a {height: 45px;}
}

/*colors*/

nav a {color: #FFF !important;}
@media (min-width: 961px) {
nav .selected {color: var(--orange1) !important; text-shadow: .35px 0 0 var(--orange1) !important;}
nav a:not(a.selected):hover {color: var(--orange2) !important; text-shadow: .35px 0 0 var(--orange2) !important;}
}

@media (max-width: 960px) {
nav .selected {background-color: var(--orange1) !important;}
nav a:not(a.selected):hover {background-color: var(--orange2) !important; color: #000 !important;}
}

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

/*Top Pic*/

#toppic {position: relative; overflow: hidden; z-index: 0; border-bottom: 3px solid var(--gold); background-color: #000;}
#toppic img {width: 500px; height: 300px; width: 100%; height: 100%; max-height: 350px; object-fit: cover; display: block;}

.caption {position: absolute; display: table-cell; left: 5%; right: 5%; text-align: center; top: 47%; -webkit-transform: translateY(-48%); transform: translateY(-48%); z-index: 1; margin: 0 auto; color: #FFF;}
.caption h1 {font-family: 'Pathway Extreme Cond', Arial, Helvetica, sans-serif; font-size: 6rem; line-height: 1; font-weight: 700; text-shadow: 1px 1px 2px #000;}

@media (max-width: 690px) {.caption h1 {font-size: 14vw;}}
@media (min-width: 501px) {
#toppic img {filter: brightness(65%);} .tppl img {filter: brightness(80%) !important;} .tpcl img {filter: brightness(55%) !important;}
}
@media (max-width: 500px) {#toppic {height: 50vw;}}

.tppl img, .tpcl img {object-position: 50% 45%;}

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

/*BODY AREA*/

#bread {font-size: 14px; line-height: 1.4; margin-bottom: 30px;}
#bread span {font-weight: 500; color: #555;} .bahome #bread {margin-bottom: 20px;}

.bodyarea {padding: 20px 0 40px 0; margin: auto; width: 85%; max-width: 1500px;}
.bodyarea, h2, h3 {font-size: 19px; line-height: 1.5; font-weight: 400;}
.bodyhead {padding-bottom: 10px; font-weight: 500; font-size: 1.7em; line-height: 1.35; text-align: center;}
section .bodyhead {padding-top: 0;}
.heading {font-weight: 500; font-size: 1.4em; line-height: 1.3;}
.heading2 {font-weight: 500; font-size: 1.15em; line-height: 1.35;}
@media (max-width: 800px) {.bodyhead {font-size: 1.7em; line-height: 1.2;} .bodyarea, h2 {font-size: 18px;}}
@media (max-width: 480px) {.bodyhead {font-size: 1.6em;} .bodyarea, h2 {font-size: 17px;}}
@media (max-width: 360px) {.bodyarea {width: 87%;} .bodyarea, h2 {font-size: 16px;}}

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

/*BOTTOM AREA*/

:root {--fbord: 1px solid rgba(255, 255, 255, 0.2);}

.btmareaback {background-color: #111;}
footer a {color: #CCC !important;}
footer {display: grid; box-sizing: border-box; max-width: 1100px; color: #CCC; border-bottom: var(--fbord);}

.block {font-size: 16px; box-sizing: border-box;}
.block .btmhead {display: block; margin-bottom: 20px; font-size: 30px; font-weight: 500; color: var(--orange1);}

.block1 {line-height: 1.6;} .block1 p {margin-top: 20px; font-size: .8em; color: #CCC;}
.block1 img {display: block; width: 180px; height: auto /*sdf*/; width: 100%; max-width: 180px; height: auto; margin: 0 auto 25px auto;}

.block2 *, .block3 * {white-space: nowrap;}

.block2 span {display: block;} /*borders between sections don't display properly in old Safari*/
.block2 ul {padding-top: 0; margin-left: -20px;}
.block2 li {position: relative; margin-left: -18px; padding: 13px 10px 12px 17px; font-size: 16px; line-height: 1.35; list-style: none; border-bottom: var(--fbord)}
.block2 li:first-child {padding-top: 0;}
.block2 li::before {content: "\276F"; position: absolute; left: 0; color: var(--orange1);}
.block2 a {text-decoration: none;} .block2 a:hover {text-decoration: underline;}
@media (min-width: 1141px) {.block2 span {padding: 0 60px;}}
@media (max-width: 1140px) and (min-width: 671px) {.block2 span {padding: 0 30px;}}

.block3 {font-size: .85em; line-height: 1.5;}
footer .btmicons a:not(.phlink) {font-size: 16px;} footer .phlink {font-size: 1.4em; font-weight: 500;}
.btmicons img {margin: 2px 8px 15px 0; vertical-align: top; width: 22px; height: 22px; opacity: .8;}
.btmsoc img {width: 32px; height: 32px; margin: 0 6px; opacity: .8;}
@keyframes shake {20% {-webkit-transform: rotateZ(-8deg);} 80% {-webkit-transform: rotateZ(8deg);}}
.btmsoc img:hover {-webkit-animation: shake .16s 5;}

#hrs {margin: 10px 0 25px 0; background-color: #222; border: var(--fbord);}
.hrs {border-collapse: collapse;}
.hrs th {font-size: 18px; font-weight: 500;}
.hrs th, .hrs td {padding: 9px 14px; border-bottom: var(--fbord); white-space: nowrap;}
.hrs td {font-size: 1.1em; text-align: center; border: none;}

@media (min-width: 1021px) {footer {grid-template-columns: 35% 40% 25%; margin: 30px auto 0 auto; padding-bottom: 50px;}}
@media (max-width: 1020px) {
footer {margin: 15px auto 0 auto; padding-bottom: 40px;}
.block1 {grid-column: 1 / -1; max-width: 60%; margin: 0 auto 50px auto; text-align: center;}
.block2 {justify-self: flex-start;} .block2 span {border: none;}
}
@media (max-width: 1020px) and (min-width: 951px) {
footer {grid-template-columns: repeat(12, 1fr);}
.block2 {grid-column: 3 / 7;} .block3 {grid-column: 7 / 12;}
}
@media (max-width: 950px) and (min-width: 761px) {
footer {grid-template-columns: repeat(14, 1fr);}
.block1 {max-width: 85%;} .block2 {grid-column: 2 / 9;} .block3 {grid-column: 9 / 14;}
}
@media (max-width: 760px) and (min-width: 671px) {
footer {grid-template-columns: repeat(3, 1fr);}
.block1 {max-width: 90%;} .block2 {grid-column: 1;} .block3 {grid-column: 3;}
}
@media (min-width: 671px) {.btmareaback {padding: 35px 50px;} .block {justify-items: center;}}
@media (max-width: 670px) {
footer {grid-template-columns: 1fr;} .btmareaback {padding: 35px 30px;}
.block1 {max-width: 90%;}
.block2, .block3 {justify-self: center; text-align: center; margin: auto;}
.block2 {margin-bottom: 30px;} .block2 ul {text-align: left;}
.btmicons {display: table /*needed for old Safari*/; text-align: left; justify-self: center; margin: auto;}
}

#totop {position: fixed; bottom: 25px; right: 25px; display: inline-block; z-index: 9999; opacity: .7; transition: 0.15s;}
#totop img {width: 32px; height: 32px; display: block; filter: drop-shadow(0 0 4px rgba(0,0,0,0.55)); cursor: pointer;}
#totop:hover {opacity: 1;}

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

/*btminfo*/

.btminfo {font-size: 14px; line-height: 1.6; padding: 0 25px 30px 25px; text-align: center; background-color: #111;}
.btminfo, .btminfo a {color: #DDD;} .copy {font-size: 1.2em;}

#serving {font-size: 12px; line-height: 1.4; color: #BBB; margin: 15px auto; font-family: Arial, Helvetica, sans-serif;}
#serving a, .nolink {color: inherit !important; text-decoration: none !important; pointer-events: none !important;}

.web {margin-top: 20px; font-size: 13px; font-family: Arial, Helvetica, sans-serif; color: #CCC;}
.web a {text-decoration: none; color: inherit; white-space: nowrap;} .web a:hover span {color: #F65246;}
.web img {vertical-align: top; margin: 1px 0 0 0; width: 23px; height: 15px;}

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

/*COLORS*/

:root {--orange1: #FF6F00; --orange2: #FFBB00; --bluegrey: #475F63; --charcoal: #222;}
/*bluegrey: #008AB1, bronze: #3E3C00, darkbronze: #252400, grey: #666*/

body {background-color: #FFF; color: #111;}

#headtop {background-color: var(--bluegrey);} header {background-color: var(--charcoal);} #phone, #phone a {color: #FFF;}

.heading {color: #000;} .heading2 {color: #555;}