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

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

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

body {font-family: 'Tofino', Arial, Verdana, Geneva; font-variant-ligatures: none; letter-spacing: .2px;}

#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 {color: #2E3FE1;} a {text-decoration: underline; text-decoration-thickness: 1px; text-decoration-style: dotted; text-underline-offset: .13em; cursor: pointer;}
a:focus-visible {outline: 2px solid var(--focus, #66AFE9); outline-offset: 2px;}
a, .ham {-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 {border: 1px solid green} #phone {border: 2px solid green;}
#logo {border: 1px solid blue} #logo img {border: 3px solid orange} #logo a {border: 1px solid cyan}*/

#headback {background-color: #111; border-top: 6px solid var(--color1);}
header {display: grid; align-items: center; justify-self: center; box-sizing: border-box; width: 100%; max-width: 2000px; column-gap: 10px;}

#logo {margin: 15px 0;} #logo img {display: block;} #phone {font-size: 24px; font-weight: 500;}

@media (min-width: 1491px) {header {padding: 0 50px;}}
@media (max-width: 1490px) and (min-width: 701px) {header {padding: 0 20px;}}

@media (min-width: 701px) {
#headback {border-bottom: 4px solid var(--color1);}
header {grid-template-columns: 1fr auto 1fr;}
header section:nth-child(1) {justify-self: start;}
header section:nth-child(2) {justify-self: center; padding: 0 40px;}
header section:nth-child(3) {justify-self: end;}
}
@media (max-width: 700px) {
header section {justify-self: center;} header section:nth-child(3) {grid-row: 2;} header section:nth-child(2) {grid-row: 3;}
#logo {margin: 15px 0 10px 0;} #phone {margin-bottom: 18px;}
header section:nth-child(2) {justify-self: stretch; width: auto; background-color: var(--color1);}
}
@media (min-width: 361px) {#logo img {width: 280px; height: 140px;}}
@media (max-width: 360px) {#logo img {width: 250px; height: 133px;}}

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

/*MENU*/

/*nav {border: 1px solid magenta;} nav div {border: 1px solid blue;} nav a {border: 1px solid cyan !important;} .ham {border: 1px solid black;}*/

#navcheck {display: none;} nav, nav a {-webkit-user-select: none; user-select: none;}
nav {display: grid; text-align: center;}
nav a {align-content: center; font-size: 20px; line-height: 1.3; transition: .15s; text-decoration: none; outline: 1px solid #FFF;}
nav .selected {cursor: text; pointer-events: none;}
nav a br {display: none;}

@media (min-width: 1831px) {nav a {padding: 15px;}}
@media (max-width: 1830px) and (min-width: 1491px) {nav a br {display: inline;}}
@media (max-width: 1830px) and (min-width: 1026px) {nav a {padding: 10px 15px;}}

@media (min-width: 1491px) {
nav {grid-template-columns: repeat(5, auto); grid-auto-flow: column;} nav a {display: table-cell; align-content: center;}
}
@media (max-width: 1490px) and (min-width: 1026px) {
nav {grid-template-columns: repeat(3, auto); grid-auto-rows: auto;}
nav a {width: 100%; box-sizing: border-box; font-size: 18px; white-space: nowrap;}
}
@media (max-width: 1300px) and (min-width: 1026px) {nav a {padding: 8px 15px;} nav a br {display: inline;}}
@media (min-width: 1026px) {.ham {display: none;} nav {gap: 8px; grid-gap: 8px;}}

@media (max-width: 1025px) {
header {position: relative;}
nav {position: absolute; top: 100%; left: 0; right: 0; z-index: 1; text-align: center; visibility: hidden; border-bottom: 1px solid var(--menuline); font-size: 0; line-height: 0; grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto;}

nav a {display: block; width: 100%; padding: 20px; opacity: 0; font-size: 0; -webkit-transition: .15s background, .2s font-size ease-out, .15s opacity ease-out; align-content: center; box-sizing: border-box; white-space: nowrap;}

#navcheck:checked ~ nav {visibility: visible;} #navcheck:checked ~ nav a {font-size: 22px; opacity: 1;}

#navcheck:checked ~ .ham div {width: 0; transform: rotateX(180deg); transition-timing-function: ease;}
#navcheck:checked ~ .ham div:before {-webkit-transform: rotateZ(37deg); top: 0;}
#navcheck:checked ~ .ham div:after {-webkit-transform: rotateZ(-37deg); top: 0;}

.ham, .ham * {-webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation;}
.ham {position: relative; display: table; height: 30px; width: 45px; margin: auto; padding: 10px;} .ham:hover {cursor: pointer;}
.ham div {top: 23px; left: 10px; -webkit-transition: -webkit-transform 0.4s ease-out;}
.ham div, .ham div:before, .ham div:after {position: absolute; display: block; content: ""; height: 4px; width: 44px; opacity: 1; background: #FFF;} .ham div:before {top: -11px;} .ham div:after {top: 11px;}
}
@media (max-width: 1025px) and (min-width: 381px) {nav a:nth-child(5) br {display: inline;} nav a:nth-child(5) {padding: 10px;}}
@media (max-width: 790px) and (min-width: 601px) {nav a {padding: 10px} nav a br {display: inline;}}
@media (max-width: 600px) {nav {grid-template-columns: repeat(2, 1fr);}}
@media (max-width: 530px) and (min-width: 381px) {nav a {padding: 10px} nav a br {display: inline;}}
@media (max-width: 380px) {
nav {grid-template-columns: 1fr;} nav a {grid-column: 1 / -1; padding: 20px;} nav a br {display: none;}
}
@media (max-width: 350px) {nav a:nth-child(5) br {display: inline;} nav a:nth-child(5) {padding: 10px;}}

/*colors*/

nav a {color: #FFF !important;}
@media (min-width: 1026px) {
nav a {background-color: var(--color1);} nav .selected {background-color: #820B00;}
nav a:hover:not(.selected) {background-color: var(--color1dark);}
}
@media (max-width: 1025px) {
nav a {background-color: var(--color2);} nav .selected {background-color: #011E96;}
nav a:hover:not(.selected) {background-color: #3685FE;}
}

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

/*BODY AREA*/

#bread {font-size: 14px; line-height: 1.4; margin-bottom: 20px;}

.bodyarea {padding: 10px 0 35px 0; margin: auto; width: 85%; max-width: 1500px;}
.bodyarea, h2 {font-size: 18px; line-height: 1.65; font-weight: 400 !important;}
.bodyhead {font-family: 'NotoSerif', "Times New Roman", Times, serif; padding-bottom: 10px; font-weight: 500 !important; font-size: 2em; line-height: 1.35; text-align: center; letter-spacing: 0;}
h1, h2, h3 {margin: 0 !important;}

/*Contact page doesn't have image on top*/
@media (min-width: 1411px) {.bacont {padding-top: 131px;}} @media (max-width: 1410px) {.bacont {padding-top: 126px;}}
@media (max-width: 660px) {.bacont {padding-top: 174px;}} @media (max-width: 440px) {.bacont {padding-top: 216px;}}

@media (max-width: 800px) {.bodyhead {font-size: 1.65em;}}
@media (max-width: 600px) {.bahome {padding-top: 0;}}
@media (max-width: 360px) {.bodyarea {width: 88%;} .bodyhead {font-size: 1.6em;}}

.heading, .heading2 {font-weight: 500; line-height: 1.35; display: table;} .heading {font-size: 1.55em;} .heading2 {font-size: 1.45em;}

.divide:nth-of-type(even) {background-color: #E5E5E5;} .divide:not(:first-of-type) {padding-top: 35px;}
.divide:last-of-type {padding-bottom: 10px;}

ul.thislist {margin-left: -19px;} ul.thislist li:not(ul.thislist li:last-child) {padding-bottom: 15px;}
ul.thislist span {font-weight: 500; color: var(--color2); font-size: 1.15em;}


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

/*Top Pic*/

#toppic {position: relative; overflow: hidden; z-index: 0;}
#toppic img {width: 500px; height: 300px; width: 100%; height: 40vw; max-height: 420px; object-fit: cover; display: block;}
@media (max-width: 660px) {#toppic img {height: 50vw;}}

#toppic.cer {background-color: #32374B;} #toppic.cor {background-color: #303D4D;}
#toppic.cu {background-color: #403F44;} #toppic.dr {background-color: #595E62;}

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

/*Page Pics*/

.pagepic img {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: 25px 0 30px 40px;}
@media (max-width: 1050px) and (min-width: 871px) {.picwide {max-width: 430px;}}
@media (max-width: 870px) {.picleft, .picright {text-align: center; float: none; margin: 30px auto;} .pictall {max-width: 400px;}}

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

/*Contact and Find Us*/

#findmap {display: table; margin: auto; text-align: center;} .btn {display: inline-block; text-align: center; margin: 0 6px 25px 6px;}
.btn a {background-color: var(--color1); display: inline-block; width: 130px; padding: 10px 0; font-size: 1rem; line-height: 1.4; font-weight: 400; text-decoration: none; color: #FFF; transition: 0.2s; border-radius: 4px;}
.btn a:hover:not(.selected) {background-color: var(--color1dark);} .btn a.selected {cursor: text; background-color: #999;}
@media (max-width: 370px) {.btn {margin: 0 4px 25px 4px;} .btn a {width: 110px;}}

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

/*BOTTOM AREA*/

.btmareaback {background-color: #222;} .btmarea a {color: #FFF;}
.btmarea {display: grid; box-sizing: border-box; max-width: 1200px; margin: 0 auto; color: #FFF;}

.block {font-size: 16px; box-sizing: border-box;}
.block .btmhead {display: block; font-size: 30px; font-weight: 500; color: #4BB7FE;}

.block1 {font-weight: 300; line-height: 1.5;}
.block1 img {display: block; width: 250px; height: 133px; width: 100%; max-width: 250px; height: auto; margin: 0 auto 30px auto;}

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

.block2 a {text-decoration: none;} .block2 a:hover {text-decoration: underline;}
.block2 ul {padding-top: 10px; margin-left: -20px;} .block2 li:not(.block2 li:last-child) {padding-bottom: 22px;}

.block3 {font-size: .85em; line-height: 1.5;} #hrs td {text-align: left;}
.block3 span:first-child:not(.btmicons span) {display: block; font-size: 1.2em; line-height: 1.4; font-weight: 500; margin-bottom: 5px;}
.btmicons {margin: 15px 0;} .btmarea .btmicons a:not(.btmarea .phlink) {font-size: 16px;} .btmarea .phlink {font-size: 1.4em; font-weight: 500;}
.btmicons img {margin: 1px 8px 15px 0; vertical-align: top;}
.btmicons img:first-child {margin-top: 6px;}
.btmicons span {display: inline-block; margin-bottom: 13px;}
.btmsoc img {width: 32px; height: 32px; margin-left: 5px;}
/*.btmsoc a:first-child img {margin-left: 5px;} .btmsoc a:last-child img {margin-left: 15px;}*/
@keyframes shake {20% {-webkit-transform: rotateZ(-8deg);} 80% {-webkit-transform: rotateZ(8deg);}}
.btmsoc img:hover {-webkit-animation: shake .16s 5;}

/*border around columns for testing - KEEP
.btmarea {background: repeating-linear-gradient(to right,#000 0,#000 1px,transparent 1px,transparent calc(100% / 10));}
*/

@media (min-width: 1041px) {
.btmarea {grid-template-columns: repeat(10, 1fr);}
.block1 {grid-column: 1 / 4;} .block2 {grid-column: 5 / 8; justify-self: center;} .block3 {grid-column: 8 / 11;}
.block2 {margin-right: 55px;}
}
@media (max-width: 1040px) {.block1 {grid-column: 1 / -1; grid-row: 1; margin-bottom: 30px;} .block2 {justify-self: flex-start;}}

@media (max-width: 1040px) and (min-width: 916px) {
.btmarea {grid-template-columns: repeat(14, 1fr);}
.block2 {grid-column: 3 / 7;} .block3 {grid-column: 7 / 13;}
}
@media (max-width: 1040px) and (min-width: 661px) {.block2, .block3 {grid-row: 2;}}

@media (max-width: 915px) and (min-width: 781px) {
.btmarea {grid-template-columns: repeat(14, 1fr);}
.block2 {grid-column: 2 / 9;} .block3 {grid-column: 9 / 14;}
}
@media (max-width: 780px) and (min-width: 661px) {
.btmarea {grid-template-columns: repeat(3, 1fr);}
.block2 {grid-column: 1 / 1;} .block3 {grid-column: 3 / 3;}
}
@media (min-width: 661px) {.btmareaback {padding: 35px 50px;} .block3 {justify-self: flex-end;} .btmsoc {margin-top: 15px;}}
@media (max-width: 660px) {
.btmareaback {padding: 35px 30px;}
.btmarea {grid-template-columns: 1fr;} .block2 {justify-self: center; margin-bottom: 30px;} .block2 .btmhead {text-align: center;}
.block2 li:not(.block2 li:last-child) {padding-bottom: 16px;}
.block3, .block3 table, .btmicons {display: inline-block; margin-left: auto; margin-right: auto; text-align: center;} /*margin is needed for old safari*/
.block3 span:first-child {white-space: normal;} .block3 span:nth-child(2) {display: block;} .btmicons {text-align: left;}
.block2 ul {list-style: none; text-align: center; margin-left: 0; padding: 0;}
.block2, .block3 {padding: 8px 20px; background-color: #444;}
}
@media (max-width: 420px) {.block2, .block3 {width: 100%;}}
@media (max-width: 340px) {.block2, .block3 {padding: 8px 12px;}}

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

/*Footer*/

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

footer {font-size: 14px; line-height: 1.6; padding: 25px 25px 22px 25px; text-align: center; background-color: #000;}
footer, footer a {color: #FFF;} .copy {font-size: 1.2em;}
.web {font-size: 12px; font-family: Arial, Helvetica, sans-serif; color: #BBB;}
.web a {font-style: italic; text-decoration: none; white-space: nowrap; color: #FFF;} .web a:hover {text-decoration: underline;}

#totop {position: fixed; right: 14px; bottom: 12px; z-index: 100; width: 28px; height: 28px; display: grid; align-items: center; justify-content: center; text-decoration: none; font-family: Arial, sans-serif; font-size: 24px; color: #999 !important; line-height: 0; transform: rotate(270deg);}

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

/*COLORS*/

body {background-color: #FFF; color: #333;} #phone, #phone a {color: #FFF;}
.bodyhead {color: var(--color2);} .heading {color: var(--color1);}
:root {--color1: #D92111; --color1dark: #B01002; --color2: #0154D5;}