html, body {margin: 0; padding: 0;} html {font-size: 18px;}

@font-face {font-family: 'Tofino'; font-style: normal; font-weight: 300; font-display: block;
  src: local(''), url('fonts/tofino-300.woff2') format('woff2'), url('fonts/tofino-300.woff') format('woff');
}
@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: 'Tofino'; font-style: normal; font-weight: 600; font-display: block;
  src: local(''), url('fonts/tofino-600.woff2') format('woff2'), url('fonts/tofino-600.woff') format('woff');
}

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


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

#width, #height {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;}  #height {margin-left: 50px;}
a, a:visited, a:hover {outline: none; color: #0058D0;} a {text-decoration: underline; text-decoration-thickness: 1px; text-decoration-style: dotted; text-underline-offset: .13em; 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*/

/*#header {border: 2px solid #FFF} #logo, #phone {border: 1px solid yellow} #logo img {border: 1px solid red}*/

#headerback, .homecap, .caption, .bodyarea {width: 90%; max-width: 1800px;}
#header {width: 100%;} #headtop {height: 10px;}

#home #headerbackback, #home #headerback {position: absolute !important;} #home #headerback {padding-top: 10px;}
#headerbackback:not(#home #headerbackback) {background: #222 url(asphaltback2.jpg) repeat; border-bottom: 10px double var(--color1);}

#headerbackback {position: relative; width: 100%; padding-top: 5px;}
#headerback {display: table; margin: 0 auto; left: 0; right: 0; top: 0; padding-top: 5px; z-index: 2;}
#header {background: none; margin: auto; text-align: center;}

#logo {vertical-align: middle; text-align: left; position: absolute; z-index: 2; top: 7px;}
#logo img {display: block;} #logo a {display: inline-block;}

#phone {font-size: 24px; line-height: 1; font-weight: 500; text-align: right; z-index: 2;}
#phone a {text-decoration: none; text-decoration: underline;}

@media (min-width: 951px) {#headerbackback {height: 110px;} #header {margin-top: 35px;} #logo img {width: 220px; height: 154px;}}
@media (max-width: 950px) {
#headerbackback {height: 90px;} #headerback {width: 100%;} #header {width: 90%; margin-top: 24px;}
#logo img {width: 180px; height: 126px;} #phone {position: absolute; top: 35px; right: 5vw;}
}

@media (max-width: 600px) {#headerbackback {height: 138px;} #phone {top: 20px;}}

@media (max-width: 415px) and (min-width: 391px) {#phone {font-size: 22px;}}
@media (min-width: 391px) {#header {display: table;} #logo, #logo img {margin: auto !important;} #logo, #phone {/*width: 315px;*/ display: table-cell;}}
@media (max-width: 390px) {#logo {top: 10px;} #headerbackback {height: 195px;} #phone {left: 0; right: 0; top: 157px; margin: auto; text-align: center;}}

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

/*MENU*/

/*.navheader {border: 3px solid orange} nav {border: 4px solid green} nav article {border: 1px solid magenta}
nav div {border: 1px solid cyan} nav a {border: 1px solid blue !important}*/

a, *:hover {-webkit-tap-highlight-color: transparent;} #navcheck {display: none;} nav {overflow: hidden;}
nav, nav a {-webkit-user-select: none; user-select: none;} nav .selected {cursor: text;}

nav a {display: block; position: relative; text-decoration: none !important; cursor: pointer; line-height: 1.3; vertical-align: middle; -webkit-transition: background .2s, font-size .3s; color: #FFF; font-family: 'TofinoN', Arial, Verdana, Geneva; font-weight: 500; text-transform: uppercase;}
nav a.selected {cursor: text;}

@media (min-width: 1441px) {.navheader {top: 34px;} nav article {display: table-cell;} nav a {height: 45px;}}
@media (max-width: 1440px) and (min-width: 951px) {
.navheader {top: 12px;} nav, nav article {display: table; margin: auto;} nav a {height: 38px;} /*display table for old Safari*/
}

@media (min-width: 1051px) {nav a {padding: 3px 13px; font-size: 20px;}}
@media (max-width: 1050px) and (min-width: 951px) {
.navheader {top: 13px;} nav a {height: 33px; padding: 5px 11px 2px 11px; font-size: 18px; text-transform: none; font-weight: 400;}
}

@media (min-width: 951px) {
.ham {display: none;}
.navheader {display: table; position: absolute; z-index: 0; left: 50%; -webkit-transform: translateX(-50%);} /*transform to center in old Safari*/
.navheader, nav {margin: auto; text-align: center; justify-content: center; justify-items: center; justify-self: center;}
nav {display: table;} /*display table for old Safari*/
nav article {justify-items: center;} nav div {display: table-cell; vertical-align: middle; white-space: nowrap;}
nav a {display: table-cell; text-align: center; height: 40px; padding: 3px 13px; font-size: 20px;}
}

@media (max-width: 950px) {
.navheader {display: block !important; position: absolute; top: 0; left: 0; right: 0; margin: auto; text-align: center; box-sizing: border-box; z-index: 1;}
nav {position: relative; text-align: center; transition: .2s; height: 0; font-size: 0; box-shadow: 0 8px 10px -9px #000; box-sizing: border-box; z-index: -1; margin-top: 105px;}
nav article {display: block;}
nav div {display: inline-block; text-align: center; left: 0; right: 0; margin: -.5px -2px -1.5px -2px; font-size: 0; height: 0; opacity: 0; transition: .2s; border: 1px solid transparent;}
nav a {width: 1%; display: table-cell; vertical-align: middle; text-align: center; font-size: 0; opacity: 0; height: 0; white-space: nowrap; padding: 1px 8px;}

#navcheck:checked ~ nav {height: 100%; z-index: 1;}
#navcheck:checked ~ nav div {opacity: 1; height: 65px;}
#navcheck:checked ~ nav a {font-size: 24px; opacity: 1; height: 62px;}

.ham {position: absolute; z-index: 600; height: 35px; width: 44px; top: 25px; left: 0; right: 0; margin: auto; text-align: center; padding: 3px 8px 8px 8px; background-color: var(--color2dark); -webkit-transition: .15s;}
.ham:hover {cursor: pointer; background-color: var(--color2lite);} .ham > div {top: 21px; left: 8px;}

.ham div, .ham div:before, .ham div:after {position: absolute; display: block; content: ""; height: 4px; width: 44px; opacity: 1; background: #FFF; border-radius: 2px;} .ham div:before {top: -11px;} .ham div:after {top: 11px;}
.ham div {-webkit-transition: -webkit-transform 0.4s ease-out;}

#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;}
}

@media (max-width: 950px) and (min-width: 641px) {nav div {width: 33.3%;} nav .nav1 div:first-child {width: 100%;}
#navcheck:checked ~ nav .nav1 div:first-child {height: 59px;} #navcheck:checked ~ nav .nav1 div:first-child a {height: 56px;}
nav .nav1 div:nth-child(2), nav .nav1 div:nth-child(3), nav .nav2 div:nth-child(1), nav .nav2 div:nth-child(2) {border-right: 1px solid var(--color1);}
}
@media (max-width: 640px) and (min-width: 416px) {
nav article {display: inline;}
nav div {width: 49.7%;} nav .nav1 div:first-child {width: 100%;}
#navcheck:checked ~ nav .nav1 div:first-child {height: 59px;} #navcheck:checked ~ nav .nav1 div:first-child a {height: 56px;}
nav div:nth-child(even) {border-right: 1px solid var(--color1);}
}
@media (max-width: 600px) {.ham {left: auto; top: 70px; right: 5vw;} nav {margin-top: 153px;}}


@media (max-width: 415px) {
nav div {width: 100%; display: block; margin: 0 -1px -2px -1px;}
#navcheck:checked ~ nav div {height: 69px;} #navcheck:checked ~ nav a {height: 66px;}
}
@media (max-width: 390px) {nav {margin-top: 210px;} .ham {top: 20px;}}

nav a {color: #FFF !important;}
nav a.selected {color: var(--color1) !important; background: none;}
nav a:hover:not(.selected) {color: var(--color2dark) !important; background-color: var(--color1);}
@media (max-width: 950px) {nav {background-color: var(--color2dark);} nav a {border-bottom: 1px solid var(--color1);}}

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

/*Big Pic*/

/*#toppic {position: relative; height: 42vw; max-height: 280px; overflow: hidden; display: flex; align-items: center;}
#toppic img {width: 500px; height: 300px; width: 100vw; height: auto;}*/

#toppic {position: relative; overflow: hidden; z-index: 0;}
#toppic img {width: 500px; height: 300px; width: 100%; height: auto; object-fit: cover; object-position: 50% 50%; 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: 'TofinoN', Arial, Helvetica, sans-serif; font-size: 90px; line-height: 1.1; font-weight: 500; text-shadow: 1px 1px 2px #000;}

/*@media (min-width: 1091px) {#toppic {margin-top: 115px;}} @media (max-width: 1090px) {#toppic {margin-top: 162px;}}
@media (max-width: 795px) {#toppic {margin-top: 148px;}}*/

@media (min-width: 691px) {#toppic img {height: 42vw; max-height: 280px;}}
@media (max-width: 690px) {#toppic img {height: 45vw;} .caption h1 {font-size: 15vw;}}

@media (min-width: 501px) {#toppic img {filter: brightness(70%);}}

#toppic.tpap {background-color: #3E3E3E;} #toppic.tpap img {object-position: 50% 55%;}
#toppic.tpam {background-color: #6F6D68;}
#toppic.tpcs {background-color: #665F50;} #toppic.tpcs img {object-position: 50% 85%;}
#toppic.tpds {background-color: #363539;}
#toppic.tpsvcs {background-color: #4C4C50;} #toppic.tpsvcs img {object-position: 50% 65%;}


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

/*BODY AREA*/

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

.bodyarea {/*position: relative;*/ padding: 40px 0 30px 0; margin: auto; font-size: 19px; line-height: 1.65;}
h2 {font-size: 23px; line-height: 1.5; 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 {margin: 0 !important;}

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

.heading, .heading2 {font-weight: 500; line-height: 1.35; display: table;}
.heading {font-size: 1.5em;} .heading2 {font-size: 1.3em;}
.heading3 {font-size: 1.15em; font-style: italic; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-style: solid; text-underline-offset: .1em;}

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

.divide:nth-child(odd) {background-color: #EEE;} .divide .bodyarea {padding: 40px 0 25px 0;} /*might be odd, not even*/
.divide:last-of-type {padding-bottom: 20px;}

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

/*Two-Column Lists*/

#list0 {display: table; max-width: 1100px; margin: 30px auto; color: #FFF;}
#list0 ul {display: table-cell; vertical-align: top; padding: 0 15px 0 5px;} #list0 li {margin: 0 0 15px 35px; line-height: 1.5;}
#list0 a {text-decoration: none;}
@media (min-width: 401px) {#list0 ul:first-child {width: 50%;} #list0 ul:last-child {width: 50%;} #list0 li:last-child {margin-bottom: 0;}}
@media (max-width: 400px) {
#list0 {max-width: 400px;} #list0 ul {display: block; padding: 0; margin: 0} #list0 li {margin-left: 22px;}
#list0 ul:first-child {margin-bottom: 0;} #list0 ul:last-child {margin-top: 0;}
}
#list0.list0a {margin: 30px 0; color: inherit;}


/*Lists with background color*/

.test2 {line-height: 1.4; margin-bottom: 20px;} .test2 div {padding: 10px 10px 5px 10px; margin: 5px; background-color: #D5D5D5; border-radius: 2px;}

@media (min-width: 766px) {.test2.testconc {grid-template-columns: repeat(3, 1fr);}}
@media (max-width: 765px) {.test2.testconc {grid-template-columns: repeat(2, 1fr);}}
@media (min-width: 501px) {.test2.testconc {display: grid;} .test2.testconc {max-width: 1400px;} .test2.testconc {max-width: 1100px;}}
@media (max-width: 500px) {.test2.testconc {max-width: 360px; margin: 25px auto;} .test2 div {margin: 5px 0;}}

@media (min-width: 1006px) {.test2.testpav {grid-template-columns: repeat(5, 1fr);}}
@media (max-width: 1005px) {.test2.testpav {grid-template-columns: repeat(4, 1fr);}}
@media (max-width: 820px) {.test2.testpav {grid-template-columns: repeat(3, 1fr);}}
@media (max-width: 625px) {.test2.testpav {grid-template-columns: repeat(2, 1fr);} .test2 div {margin: 4px;}}
@media (min-width: 406px) {.test2.testpav {display: grid;} .test2.testpav {max-width: 1400px;} .test2.testpav {max-width: 1100px;}}
@media (max-width: 405px) {.test2.testpav {max-width: 260px; margin: 25px auto;} .test2 div {margin: 5px 0;}}

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

/*Page Pics*/

.pagepic 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;}
@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;}}

.twopics {display: table; margin: 40px auto 30px auto;}
.twopics div {display: table-cell; vertical-align: middle;}
.twopics img {border-radius: 3px; width: 500px; height: 300px; width: 100%; height: auto; display: block;}
.tpwide {max-width: 500px;} .tptall {max-width: 350px;} .twopics p {text-align: center; margin-top: 5px; font-size: .95em;}
@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 AREA*/

.btmareaback {background-color: #282828; border-top: 10px double var(--color1);} .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; /*border: 1px solid #ddd;*/}
.block .btmhead {display: block; font-size: 1.7em; font-weight: 600; color: var(--color1);}

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

/*.block2 *, .block3 * {white-space: nowrap;} .block3 span {white-space: normal; line-height: 1.3 !important;}*/

.block2 .btmhead {margin-bottom: 25px;}
.block2 a {text-decoration: none; display: block; margin-bottom: 20px;} .block2 a:hover {text-decoration: underline;}

.block3 {font-size: .85em; line-height: 1.5; font-weight: 300;}
.block3 span {display: block; font-size: 1.2em; line-height: 1.35; font-weight: 600; margin-bottom: 5px;}
.btmicons {margin: 15px 0;} .btmicons a {font-size: 16px;} .btmarea .phlink {font-size: 1.1em; font-weight: 500;}
.btmicons img {margin: 2px 8px 15px 0; vertical-align: top;} .btmicons .phlink {color: var(--color1) !important;}
.btmsoc {margin-top: 15px;} .btmsoc img {width: 32px; height: 32px; margin: 0 3px;}
@keyframes shake {20% {-webkit-transform: rotateZ(-8deg);} 80% {-webkit-transform: rotateZ(8deg);}}
.btmsoc img:hover {-webkit-animation: shake .16s 5;}

@media (min-width: 1001px) {
.btmarea {grid-template-columns: repeat(9, 1fr);}
.block1 {grid-column: 1 / 4;} .block2 {grid-column: 4 / 7; justify-self: center; margin-left: 40px;} .block3 {grid-column: 8 / 10;}
}
@media (max-width: 1000px) {.block1 {grid-column: 1 / -1; grid-row: 1; margin-bottom: 30px;} .block2 {justify-self: flex-start;}}

@media (max-width: 1000px) and (min-width: 871px) {
.btmarea {grid-template-columns: repeat(13, 1fr);}
.block2 {grid-column: 3 / 8;} .block3 {grid-column: 8 / 12;}
}
@media (max-width: 1000px) and @media (min-width: 591px) {.block2, .block3 {grid-row: 2;}}

@media (max-width: 870px) and (min-width: 681px) {
.btmarea {grid-template-columns: repeat(14, 1fr);}
.block2 {grid-column: 2 / 9;} .block3 {grid-column: 9 / 14;}
}
@media (max-width: 680px) and (min-width: 591px) {
.btmarea {grid-template-columns: repeat(3, 1fr);}
.block2 {grid-column: 1 / 1;} .block3 {grid-column: 3 / 3;}
}
@media (min-width: 591px) {.btmareaback {padding: 45px 50px;} .block3 {justify-self: flex-end;}}
@media (max-width: 590px) {
.btmareaback {padding: 45px 40px 30px 40px;}
.btmarea {grid-template-columns: 1fr;} .block2 {margin-bottom: 20px; display: table;}
/*.btmarea section {grid-column: 1;}*/ .block2, .block3 {justify-self: center;}
}
@media (max-width: 590px) and (min-width: 371px) {
.block2 article:nth-child(3) {float: left; margin-right: 25px;} .block2 article:nth-child(4) {float: right; margin-left: 25px;}
}

@media (max-width: 450px) {.block2 {justify-self: flex-start;}}

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

/*Footer*/

#serving {font-size: 11px; line-height: 1.4; letter-spacing: 0; word-spacing: 0; color: #999; font-family: Arial, Helvetica, sans-serif;}
#serving a, .nolink {color: inherit !important; text-decoration: none !important; cursor: text;}

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;} #lic {font-size: 13px; color: #DDD;}
.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; 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 {color: #333; background-color: #FFF;} #headtop {background-color: var(--color2dark);}

#phone, #phone a {color: var(--color1);}

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

:root {--color1: #FFD600; --color2dark: #C00; --color2lite: #E00;}