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

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

:root {--body-font: 20px/1.6 'Flama', Arial, Helvetica, sans-serif;}

body {font-family: 'Flama', Arial, Verdana, Geneva; font-variant-ligatures: none; font-size: 100%; font-kerning: normal;}

#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, a:hover {color: #2E3FE1;}
a {text-decoration: underline; text-decoration-thickness: 1px; text-decoration-style: dotted; text-underline-offset: .15em; 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;}
#headtopback, #headtop {height: 40px;} #headtop, header {display: table; width: 100%; margin: auto;}
header {display: table; width: 100%; margin: auto; box-shadow: 0 3px 7px -5px #000; text-align: center; box-sizing: border-box;}
#headerback, header {height: 110px;}

#logo {left: 0; right: 0; display: table; margin: auto; text-align: center;}
#logo img {height: 78px; display: block;}
#logo a {display: table-cell; vertical-align: middle; padding-bottom: 4px;}
#logo, #logo img {width: 240px;}

@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: 1480px) {#headtop {padding: 0 2%;}}
@media (min-width: 1441px), (max-width: 890px) {header {border-bottom: 4px solid var(--red1);}}
@media (max-width: 1440px) and (min-width: 891px) {#headerback, header/*, #logo*/ {height: 161px;}}

#phone {font-size: 18px; line-height: 1; font-weight: 500; padding-top: 1px; text-align: right; white-space: nowrap;}
#phone span {font-size: 15px; margin-right: 4px; font-weight: 400;}

@media (min-width: 516px) {#logo {top: 54px;}}
@media (max-width: 515px) {
#logo {top: 51px; margin: 0 0 0 25px;} #logo, #logo img {width: 190px;} #logo img {height: 62px;}
#headerback, header {height: 88px;}
}

@media (min-width: 381px) {header, #logo {position: fixed;}}
@media (max-width: 380px) {header, #logo {position: absolute;} header {z-index: 1;}}
@media (max-width: 350px) {
#logo {top: 50px; margin: 0 0 0 15px;} #logo, #logo img {width: 170px;} #logo img {height: 55px;}
#headerback, header {height: 78px;}
}
@media (max-width: 320px) {#phone span {display: none;}}

#social img {height: 26px; width: 26px; display: inline-block; margin: 0 2px -4px 2px;}
@keyframes shake {20% {-webkit-transform: rotateZ(-8deg);} 80% {-webkit-transform: rotateZ(8deg);}}
#social img:hover {-webkit-animation: shake .16s 5;}
@media (max-width: 180px) {#social {display: none;}}

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

/*MENU*/

/*nav {outline: 1px solid blue} nav section {outline: 1px solid yellow} nav div {outline: 1px solid green} nav a {outline: 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.25; font-weight: 400; vertical-align: middle; text-align: center; transition: .15s;}
nav a.selected {cursor: text; -webkit-user-select: none; -webkit-touch-callout: none;}

@media (min-width: 1441px) {
nav span {display: block;}
nav section:first-child a {padding: 2px 19px 0 19px;} nav section:last-child a {padding: 2px 3px 0 3px;} /*make one side wider*/
nav div:not(:last-child)::after {top: 31%; bottom: 31%;}
}

@media (min-width: 1441px) {
.ham {display: none;}
nav {position: fixed; left: 0; right: 0; text-align: center; margin: auto; width: 98%; max-width: 1500px;}
nav div {display: table-cell; vertical-align: middle; padding: 0 5px; height: 110px; white-space: nowrap;}
nav a {height: 45px; font-size: 18px;}
nav section:first-child {float: left;} nav section:last-child {float: right;}

/*lines between*/
nav div {padding: 0 15px; position: relative;}
nav div:not(:last-child)::after {content: ""; position: absolute; right: 0; width: 1px; background: var(--red1);}
/*end lines*/
}

@media (max-width: 1440px) {nav, nav section {display: grid;} nav a {white-space: nowrap;}}

@media (max-width: 1440px) and (min-width: 891px) {
nav {margin-top: 110px; position: absolute; width: 100%; grid-template-columns: auto auto; align-items: center; background-color: var(--red1); padding: 0; box-shadow: 0 3px 7px -5px #000;}
nav section {grid-auto-flow: column; align-items: center;}
nav a {width: 1%; vertical-align: middle; text-align: center; height: 52px; font-size: 18px;}
nav div {border-right: 1px solid var(--blue1);} nav section:last-child div:last-child {border-right: 0;}
}

@media (max-width: 1220px) and (min-width: 891px) {nav span {display: block;} nav a {height: 58px;}}

@media (min-width: 891px) {nav a {display: table-cell;}}
@media (max-width: 890px) {
nav {position: absolute; display: grid; margin-top: 106px; width: 100%; transition: opacity .3s; opacity: 0;}
nav section {display: grid;}
nav a {display:table-cell; width: 1%; text-align: center; vertical-align: middle; height: 0; font-size: 0; opacity: 0; transition: font-size .2s;}
.ham {position: absolute; z-index: 600; height: 35px; width: 45px; top: 16px; right: 15px; margin: auto; text-align: center; padding: 0 10px 10px 10px}
.ham:hover {cursor: pointer;}
.ham span {top: 36px; left: 12px; transition: transform 0.4s ease-out;}
.ham span, .ham span:before, .ham span:after {position: absolute; display: block; content: ""; height: 3px; width: 40px; opacity: 1; background-color: var(--blue1);} .ham span:before {top: -11px;} .ham span:after {top: 11px;}

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

#navcheck:checked ~ nav {opacity: 1; z-index: 200; box-shadow: 0 9999px 0 9999px rgba(0, 0, 0, 0.85); border-top: 1px solid #000;}
#navcheck:checked ~ nav div {border: 1px solid var(--blue1); background-color: var(--red1);}
#navcheck:checked ~ nav a {font-size: 18px; opacity: 1; height: 53px;}
}

@media (max-width: 890px) and (min-width: 781px) {
nav section {width: 100%;} #navcheck:checked ~ nav a {height: 63px;}
nav section:first-of-type {grid-template-columns: repeat(4, minmax(0, 1fr));}
nav section:last-of-type {grid-template-columns: repeat(5, minmax(0, 1fr));}
nav section:first-child div:nth-child(2) span, nav section:first-child div:nth-child(4) span, nav section:last-child div:nth-child(1) span, nav section:last-child div:nth-child(2) span {display: block;}
}
@media (max-width: 780px) {
nav section {grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%;}
nav section:last-of-type div:last-child {grid-column: 1 / 3;}
}
@media (max-width: 515px) {nav {margin-top: 84px;} .ham {top: 5px;}}
@media (max-width: 450px) {
nav section:first-child div:nth-child(2) span, nav section:last-child div:nth-child(2) span {display: block;}
#navcheck:checked ~ nav a {height: 63px;} #navcheck:checked ~ nav section:last-of-type div:last-child a {height: 55px;}
}
@media (max-width: 350px) {
.ham {top: 0; right: 10px;} nav {margin-top: 74px;} nav section:first-child div:nth-child(4) span {display: block;}
}

/*colors*/

@media (min-width: 1441px) {
nav a {color: var(--blue1) !important;}
nav .selected, nav a:not(a.selected):hover {color: var(--red1) !important;}
nav a:not(a.selected):hover {text-decoration: underline;}
}
@media (max-width: 1440px) {
nav a {color: #FFF !important;}
nav .selected {background-color: var(--red2);}
nav a:not(a.selected):hover {background-color: var(--red3);}
}

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

/*BODY AREA*/

.bodyarea {margin: auto; padding: 40px 0 30px 0; width: 90%; max-width: 1500px;}
.bodyarea, h4 {font-size: 20px !important; line-height: 1.6; font-weight: 400 !important;}
.bodyhead {font-size: 32px; line-height: 1.25; font-weight: 500; text-align: center; margin-bottom: 20px;}

h1, h2, h3, h4 {margin: 0 !important;}
h1.bodyhead {padding: 0 0 25px 0;}

@media (max-width: 600px) {.bodyarea {padding-top: 35px;}}

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

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

#album {margin-top: 45px !important;}

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

/*Service page blocks*/

#blocks50 {margin: 30px auto 0 auto; text-align: center; max-width: 1000px;}
#blocks50 div {display: inline-block; width: 100%; font-size: .95em; line-height: 1.4; text-align: left; background-color: var(--blue1); border-radius: 8px; break-inside: avoid; position: relative; color: #FFF;}
#blocks50 span {display: block;}

#blocks48, #blocks49 {margin: auto; text-align: center; max-width: 1200px;}
#blocks48 *, #blocks49 * {box-sizing: border-box;}

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

/*Page Pics*/

.pagepic img {border-radius: 8px; width: 500px; height: 300px; width: 100%; height: auto; display: block;}
.picwide {max-width: 500px;} .pictall {max-width: 350px;}
.picleft {float: left; margin: 12px 40px 30px 0;} .picright {float: right; margin: 30px 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: 35px auto;} .pictall {max-width: 400px;}}

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

/*One Certification*/

#cert {display: table; padding: 15px 15px 12px 15px; background-color: #E8E8E8; border-radius: 8px;}
#cert div {font-size: .85em; line-height: 1.35; text-align: center; color: #444;}
@media (min-width: 621px) {#cert {float: right;} .certrt {margin: 20px 0 20px 30px;}}
@media (max-width: 620px) {#cert {text-align: center; float: none; margin: 25px auto;}}

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

/*Logos*/

/*#logos {border: 1px solid red} #logos div {border: 1px solid blue} #logos img {border: 1px solid cyan}*/

#logos {margin: 40px auto 35px auto; text-align: center;}
#logos div {padding: 10px 25px; text-align: center; vertical-align: middle;}
#logos img {display: block; width: 275px; height: 120px; width: 100%; max-width: 275px; height: auto; transition: .2s;}
#logos div:hover img {filter: saturate(110%) brightness(130%); transform: scale(1.02);}
@media (min-width: 881px) {#logos {display: table;} #logos div {display: table-cell;}}
@media (max-width: 880px) {#logos div {display: inline-block;}}

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

/*Contact & Find Us Pages*/

#findmap {display: table; margin: 5px auto 0 auto; text-align: center;} .btn {display: inline-block; text-align: center; margin: 0 6px 25px 6px;}
.btn a {background-color: var(--red1); display: inline-block; width: 130px; padding: 10px 0; font-size: .9em; 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(--red3);} .btn a.selected {cursor: text; background-color: #999;}

@media (max-width: 600px) {#findmap {margin-top: 15px;}}
@media (max-width: 370px) {.btn {margin: 0 4px 25px 4px;} .btn a {width: 110px;}}

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

/*BOTTOM AREA*/

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

.btmareaback {background-color: var(--blue2);}

footer a {color: #FFF !important; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: rgba(255,255,255,.4);}
footer a:hover {text-decoration-color: rgba(234,52,52,.8);}

footer {display: grid; box-sizing: border-box; max-width: 1100px; color: #FFF; border-bottom: var(--fbord);}

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

.block1 {line-height: 1.7;}
.block1 span {display: block; margin-top: 20px; font-size: .8em; font-weight: 400; color: #BBB;}
.block1 span p {margin: 0;}
.block1 img {display: block; width: 240px; height: 78px; width: 100%; max-width: 240px; height: auto; margin: 0 auto 25px auto;}

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

.block2 span {display: block;}
.block2 ul {padding-top: 8px; margin-left: -20px;}
.block2 li {position: relative; margin-left: -18px; padding: 13px 10px 12px 17px; font-size: 18px; line-height: 1.35; letter-spacing: .3px; list-style: none;}
.block2 li:first-child {padding-top: 0;}
.block2 li::before {content: "\276F"; position: absolute; left: 0; color: var(--red3);}
@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: 1em; line-height: 1.6;}
.btmicons a:not(.phlink) {font-size: 18px;}
.btmicons .phlink {font-size: 1.4em; font-weight: 500;}
.btmicons a:nth-child(3) {display: inline-block; margin: 10px 0;}

.btmicons img {margin: 4px 8px 15px 0; vertical-align: top; width: 22px; height: 22px;}
.btmicons a:nth-child(1) img {margin-top: 9px;}
.btmicons a:nth-child(3) img {margin-top: 4px;}

/*address*/
.btmicons a:last-of-type {display: grid; grid-template-columns: auto 1fr;}
.btmicons a:last-of-type img {grid-column: 1;} .btmicons a:last-of-type span {grid-column: 2;}
.btmicons a:nth-child(5) img {margin-top: 12px;}
/*end address*/

.btmsoc img {width: 32px; height: 32px; margin: 0 6px;}
@keyframes shake {20% {-webkit-transform: rotateZ(-8deg);} 80% {-webkit-transform: rotateZ(8deg);}}
.btmsoc img:hover {animation: shake .16s 5;}

#hrs {margin: 20px 0 25px 0; background-color: #162750; border: var(--fbord); border-radius: 6px;}
.hrs th {font-size: 18px; font-weight: 500;} .hrs td {font-size: 18px;}
.hrs th, .hrs td {padding: 7px 10px; border-bottom: var(--fbord);}
.hrs td:first-child {border-right: var(--fbord);}
.hrs {border-collapse: collapse;}
.hrs tr:last-child td {border-bottom: 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; line-height: 1.6;}
.block2 {justify-self: flex-start;} .block2 span {border: none;}
}
@media (max-width: 1020px) and (min-width: 981px) {
footer {grid-template-columns: repeat(12, 1fr);}
.block2 {grid-column: 3 / 7;} .block3 {grid-column: 7 / 12;}
}
@media (max-width: 980px) and (min-width: 801px) {
footer {grid-template-columns: repeat(14, 1fr);}
.block1 {max-width: 85%;} .block2 {grid-column: 2 / 9;} .block3 {grid-column: 9 / 14;}
}
@media (max-width: 800px) and (min-width: 701px) {
footer {grid-template-columns: repeat(3, 1fr);}
.block1 {max-width: 90%;} .block2 {grid-column: 1;} .block3 {grid-column: 3;}
}
@media (min-width: 701px) {.btmareaback {padding: 35px 50px;} .block {justify-items: center;}}
@media (max-width: 700px) {
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: 10px;} .block2 ul {text-align: left;}
.block2 li {padding-bottom: 3px;}
.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; -webkit-filter: drop-shadow(0 0 4px rgba(0,0,0,0.55)); filter: drop-shadow(0 0 4px rgba(0,0,0,0.55)); cursor: pointer;} /*keep -webkit for old Safari*/
#totop:hover {opacity: 1;}

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

/*Bottom Info*/

.btminfo {font-size: 14px; line-height: 1.5; padding: 0 25px 30px 25px; text-align: center; background-color: var(--blue2);}
.btminfo, .btminfo a {color: #FFF;} .copy {font-size: 1.2em; line-height: 1.4;}

#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: #DDD;}
.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 {--red1: #BF2222; --red2: #8F0F0F; --red3: #EA3434; --blue1: #1E3570; --blue2: #0B193C;}

#headtop {background-color: var(--red1);}
body, header {background-color: #FFF;}
body {color: var(--blue1);}

#phone, #phone a {color: #FFF;} #phone span {color: #FF0;}

.bodyhead, .heading {color: var(--red1);}