html, body {margin: 0; padding: 0;} html {font-size: 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: .1em; cursor: pointer;}
a:focus-visible {outline: 2px solid #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 yellow;} #phone {border: 2px solid green} #logo {border: 3px solid red}*/

header {position: absolute; display: table; width: 100%; margin: auto; z-index: 2; text-align: center; box-sizing: border-box;}
header:not(.homehead) {background-color: #111E4B;}

#logo {z-index: 1; font-size: 24px; line-height: 1.2; font-weight: 500; text-align: left; vertical-align: middle;}
#logo a {color: #FFF !important; text-decoration: none;}

@media (min-width: 2321px) {header, #navheader {padding: 0 15%;}}
@media (max-width: 2320px) and (min-width: 1986px) {header, #navheader {padding: 0 10%;}}
@media (max-width: 1985px) and (min-width: 1816px) {header, #navheader {padding: 0 6%;}}
@media (max-width: 1815px) and (min-width: 1491px) {header, #navheader {padding: 0;} header {padding-left: 25px; padding-right: 25px;}}
@media (max-width: 1490px) and (min-width: 916px) {header, #navheader {padding: 0 2%;}}

#phone {display: block; font-size: 20px; line-height: 1; right: 0; vertical-align: middle;}
#phone, #phone a {font-weight: 400; white-space: nowrap;}

@media (min-width: 1101px) {#logo, #phone {width: 250px;} #logo {white-space: nowrap;}}
@media (max-width: 1100px) {#logo, #phone {width: 170px;}}

@media (max-width: 915px) {header {margin-top: 0;}}
@media (max-width: 915px) and (min-width: 501px) {#logo {padding-left: 20px;} #phone {padding-right: 20px;}}

@media (min-width: 501px) {
header {display: table; height: 105px;}
#logo, #navheader, #phone {display: table-cell;} #phone {text-align: right;}
}
@media (max-width: 500px) {
header {height: 160px;}
#logo {margin: auto; width: auto; padding-top: 20px; text-align: center;}
#phone {position: absolute; margin: auto; top: 65px; left: 0; right: 0; font-size: 22px}
}

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

/*MENU*/

/*#navheader {border: 1px solid orange} nav {border: 1px solid red} nav div {border: 1px solid cyan} nav a {border: 1px solid var(--color2);}
nav article {border: 1px solid red;}*/

a, *:hover {-webkit-tap-highlight-color: transparent;} #navcheck {display: none;}
nav a.selected {cursor: text; pointer-events: none; -webkit-user-select: none; -webkit-touch-callout: none;}
nav a {text-decoration: none; cursor: pointer; line-height: 1.3; font-weight: 400; transition: background .2s, color .1s, font-size .3s; color: #FFF !important;}

@media (min-width: 1211px) {nav a {padding: 5px 15px 3px 15px;}}
@media (max-width: 1210px) {nav a {padding: 5px 10px 3px 10px;}}
@media (min-width: 916px) {
.ham {display: none;} #navheader {position: relative; left: 0; right: 0; text-align: center; justify-content: center; justify-items: center; justify-self: center; height: 100%; border: 1px solid transparent} /*transparent border fixes position error in old Safari*/
nav {position: absolute; display: inline-block; margin: auto; left: 0; right: 0; vertical-align: middle; text-align: center; height: 100%; width: 100%; align-content: center;}
nav div {display: inline-grid; align-content: center; align-self: center; align-items: center; vertical-align: middle; height: 100% /*for old Safari*/; white-space: nowrap;}
nav a {height: 40px; display: inline-block /*table-cell won't work in old Safari*/; font-size: 18px; line-height: 1.4; text-align: center; align-content: center; align-self: center; align-items: center; vertical-align: middle;}
nav article {display: table-cell; width: 1%; vertical-align: middle; height: inherit;} /*article required for old Safari*/
}

@media (max-width: 915px) {
#navheader {top: 0; left: 0; right: 0; position: absolute;}
nav {width: 100%; position: relative; text-align: center; transition: opacity .15s; box-sizing: border-box; z-index: -1; overflow: hidden; top: 104px; opacity: 0;}
nav div {display: table-cell; text-align: center; left: 0; right: 0; font-size: 0; height: 0; opacity: 0; transition: font-size .15s; border: 1px solid transparent;}
nav a {display: table-cell; text-align: center; font-size: 0; opacity: 0; height: 0; white-space: nowrap; padding: 4px 8px 2px 8px; pointer-events: none;}

#navcheck:checked ~ nav {z-index: 2; height: 100%; background-color: #000; opacity: 1; box-shadow:  0 9999px 0 9999px rgba(0, 0, 0, 0.85);}
#navcheck:checked ~ nav div {opacity: 1; height: 50px;}
#navcheck:checked ~ nav a {font-size: 18px; line-height: 1.4; opacity: 1; pointer-events: auto; height: 50px; vertical-align: middle; width: 1%;}

.ham, .ham * {-webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation;}
.ham {position: absolute; z-index: 600; height: 35px; width: 45px; top: 27px; left: 0; right: 0; margin: auto; text-align: center; padding: 0 10px 12px 10px;}
.ham:hover {cursor: pointer;}
.ham div {top: 24px; left: 10px; transition: transform 0.35s ease-out;}
.ham div, .ham div:before, .ham div:after {position: absolute; display: block; content: ""; height: 3px; width: 38px; opacity: 1; background: #FFF;}
.ham div:before {top: -10px;} .ham div:after {top: 10px;}

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

@media (max-width: 915px) and (min-width: 561px) {nav {display: table; table-layout: fixed; white-space: nowrap;}}
@media (max-width: 560px) {
nav {display: flex; flex-wrap: wrap;} nav div {box-sizing: border-box;}
nav div:not(:first-child) {flex: 0 0 25%;} nav div:first-child {width: 100%; display: table;}
#navcheck:checked ~ nav div:first-child, #navcheck:checked ~ nav div:first-child a {height: 37px;}
#navcheck:checked ~ nav div {height: 53px;}
#navcheck:checked ~ nav a {height: 45px;}
}
@media (max-width: 500px) {nav {top: 159px;} nav div:not(:first-child) {flex: 0 0 50%;} .ham {top: 100px;}}

/*nav colors*/
@media (min-width: 916px) {
nav .selected {background-color: var(--color1);} nav a:hover:not(.selected) {background-color: var(--color2);}}
@media (max-width: 915px) {
nav a {background-color: var(--color1);} nav .selected {background-color: var(--color1-dark);}
nav a:hover:not(.selected) {background-color: var(--color2);}
}

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

/*Top Pic*/

#toppic {position: relative; overflow: hidden; z-index: 0;}
#toppic img {width: 500px; height: 300px; width: 100%; height: 45vw; max-height: 450px; object-fit: cover; display: block;}

@media (min-width: 501px) {#toppic {padding-top: 104px;}}
@media (max-width: 500px) {#toppic {padding-top: 159px;} #toppic img {height: 50vw;}}

/*#toppic.tpsvcs {background-color: #FFF;} #toppic.tpsvcs img {object-position: 50% 50%;}*/
#toppic.tpabout {background-color: #475F7E;} #toppic.tpabout img {object-position: 50% 20%;}

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

/*BODY AREA*/

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

.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 {margin: 0 auto 20px auto;} h2 {margin: 0;} h3 {margin: 0;}

/*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.85em;}}
@media (max-width: 600px) {.bahome {padding-top: 0;}}
@media (max-width: 360px) {.bodyarea {width: 88%;} .bodyhead {font-size: 1.8em;}}

.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: #EEE;} .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 {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;}*/


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

/*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: 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: 20px auto 40px auto;} .pictall {max-width: 400px;}}

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

/*BOTTOM AREA*/

/*#btmarea {border: 1px solid red} .block {border: 1px solid green} .block2 {border: 1px solid magenta}*/

#btmareaback {background-color: var(--color1-dark);} #btmareaback, #btmareaback a {color: #FFF !important;}
#btmareaback.bacont {background-color: var(--litegrey);}
#btmarea {display: grid; width: 100%; margin: auto; box-sizing: border-box;}
.block {box-sizing: border-box;}
.block1 {font-size: 17px; line-height: 1.5;}
.block2 {font-size: .85em; line-height: 1.7;} .block2 a:hover {text-decoration: underline;} .block2 span {white-space: nowrap;}

.btmicons {margin: 10px 0 0 0;}
.btmicons img {margin: 0 8px 15px 0; vertical-align: top;}
.btmicons span:first-of-type img {margin-top: 5px;} .btmicons span:last-of-type img {margin-top: 1px;}
#btmarea .phlink {font-size: 1.25em; font-weight: 500;}

@media (min-width: 651px) {
#btmareaback {padding: 35px 50px;}
#btmarea {grid-template-columns: minmax(0, 1fr) minmax(160px, 25%); max-width: 650px;}
.block1 {padding: 0 20px 0 0; border-right: 1px solid #CCC;} .block2 {padding: 0 0 0 20px;}
}

@media (max-width: 650px) {
#btmareaback {padding: 35px 30px 20px 30px;}
#btmarea {grid-template-columns: 1fr;} .block {padding: 20px 0; text-align: center;}
.block1 {padding: 0 0 20px 0; border-bottom: 1px solid #CCC;}
.block2 {padding: 20px 0 0 0; margin: auto; text-align: left;}
.btmicons {border: 0px solid red} .btmicons span {display: block; text-align: left; border: 0px solid blue}
}

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

/*Footer*/

#serving {font-size: 11px; line-height: 1.4; color: #BBB; font-family: Arial, Helvetica, sans-serif;}
#serving a, .nolink {color: inherit !important; text-decoration: none !important; cursor: text; white-space: nowrap;}

footer {font-size: 14px; line-height: 1.6; padding: 25px 25px 22px 25px; text-align: center; background-color: #111; color: #FFF;}
.copy {line-height: 1.5;}

.web {margin-top: 15px; font-size: 12px; line-height: 1.5; color: #BBB;}
.web a {text-decoration: none; color: inherit; white-space: nowrap;} .web a:hover span {color: #F65246;}
.web img {vertical-align: top; margin: 0 1px 0 2px; width: 23px; height: 15px;}

#totop {position: fixed; bottom: 25px; right: 25px; display: inline-block; z-index: 900; 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;}

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

/*COLORS*/

body {background-color: #FFF; color: #333;} #phone, #phone a {color: #FFF;}
.bodyhead {color: var(--color2);} .heading {color: var(--color1);}
:root {--color1: #1F388B; --color1-dark: #142457 ; --grey: #D5D5D5; --litegrey: #E5E5E5; --color2: #3D6EBD; --color3: #87BCF3;}