html, body {margin: 0; padding: 0;}

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

@font-face {font-family: 'OpenSans Cond'; font-style: normal; font-weight: 400; font-display: block;
  src: local(''), url('../fonts/open-sans-cond-400.woff2') format('woff2'), url('../fonts/open-sans-cond-400.woff') format('woff');
}

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

body {font-family: 'OpenSans', Arial, Verdana, Geneva; font-variant-ligatures: none;}
.cofont {font-family: 'Marathon', 'OpenSans', Arial, Verdana, Geneva; font-size: 1.1em; font-weight: 500;}

#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 {outline: none; color: #2E3FE1;}
a {text-decoration: underline; text-decoration-thickness: 1px; text-decoration-style: dotted; text-underline-offset: .1em; 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 section:first-child {-webkit-order: 2; order: 2;} header section:last-child {-webkit-order: 1; order: 1;}

/*Head Top*/

#headtopback, #headtop {height: 32px;} #headtop {display: table; margin: auto;}
#headinfo {display: table; margin: 6px auto 0 auto; text-align: center; width: 92%; max-width: 1500px;}
#headinfoleft, #headinforight {display: table-cell; font-size: 14px;}
#headinfoleft {position: relative; display: table; text-align: left;} #headinforight {text-align: right; padding-bottom: 2px;}

#phonetop {display: inline-block; margin-top: 1px; line-height: 1;}
#phonetop img {margin: -3px 5px 0 0; vertical-align: middle; width: 15px; height: 15px;}

#social img {width: 22px; height: 22px; vertical-align: middle; margin-top: -1.8px;}
#social a {margin-right: 9px;} #social a:nth-child(4) {margin-right: 5px;}
/*#social a:last-child {margin-left: 2px;} #social a:nth-last-child(-n+4) {margin-right: 8px;}*/
#social img:hover {-webkit-animation: shake .16s 5;}

@media (max-width: 650px) {
#headtopback, #headtop {height: 68px;} #headinfo {padding-top: 3px;} #phonetop {font-size: 20px;}
#social img {vertical-align: bottom;}
#headinfoleft, #headinforight {display: block; text-align: center;} #headinforight {margin-top: 12px;}
}

@media (max-width: 400px) {#headinfo img, #social img, #social a {display: none;} #phonetop {font-size: 22px;} #headinforight {margin-top: 9px;}}

/*end Head Top*/


header {width: 100%; margin: 0 auto; z-index: 1;}
header section:first-child {display: table; height: 100%; position: relative; padding: 0; overflow: hidden; margin: auto; text-align: center; width: 95%; max-width: 1500px;}
header div {display: table-cell;} header div:not(.navback div) {vertical-align: middle;}

#headtext h1 {text-align: center; margin: 0 auto; font-style: italic; font-weight: 400; line-height: 1.4; padding: 0 20px;}
#logo {padding: 17px 0;} #logo a {display: table-cell;}
#logo img {display: block;} #phone {text-align: right; font-size: 22px; font-weight: 600;}

@media (min-width: 1041px) {#headtext h1 {font-size: 17px;}}
@media (max-width: 1040px) and (min-width: 1011px) {#headtext h1 {font-size: 1.5vw;}}
@media (min-width: 1011px) {
#phonetop {display: none;} #logo, #phone {width: 280px;}
#logo img {width: 220px; height: 77px;} #social a:first-child {margin: -2px 4px 0 0;}
}
@media (max-width: 1010px) {
header {border-bottom: 6px solid var(--menuback);}
#logo, #logo img, #phone {display: block; width: 200px;} #logo img {height: 70px;}
#headtext h1 {font-size: 16px;} #phone a {display: none;}
#social a:first-child {margin: -2px 4px 0 22px;}
}
@media (max-width: 110px) {#headtext {width: 40%;} #headtext h1 {font-size: 15px;}}

@media (max-width: 835px) {#headtext h1 {font-size: 1.9vw; padding: 0 10px;}}
@media (min-width: 801px) {#headtext h1 span {display: block;}}
@media (max-width: 800px) {#headtext {padding-left: 50px;} #headtext h1 span {display: inline;}}
@media (max-width: 715px) {#phone {display: none;} #headtext, #headtext h1 {visibility: hidden; width: 0; padding: 0; font-size: 0;}}
@media (max-width: 630px) {#logo, #logo img {width: 160px;} #logo img {height: 56px;}}
@media (max-width: 590px) {#logo {margin: auto;} #logo, #logo img {width: 200px;} #logo img {height: 70px;}}
@media (max-width: 430px) {#logo, #logo img {width: 160px;} #logo img {height: 56px;}}
@media (max-width: 400px) {#logo {margin: 0 0 0 5px;}}

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

/*MENU*/

/*.menu > li is main menu bar links*/

nav * {z-index: 1; text-decoration: none;}
.tog, [id^=drop] {display: none;} #navback {display: table;}
nav ul {position: relative; padding: 0; margin: 0; list-style: none;}
nav a {display: block; /*padding: 15px 15px 12px 15px;*/ line-height: 1.4;}
.menu > li > a {/*padding: 5px 15px 7px 15px;*/ line-height: 1.3;}
nav ul, nav li, nav a {vertical-align: middle; font-size: 16px;}
/*nav a:hover {cursor: pointer;}*/ nav .selected, nav .selected:hover {cursor: text; pointer-events: none;}
nav ul ul {display: none; position: absolute;} nav ul li:hover > ul {display: inherit;}

/*arrows*/
nav li > a:not(a:only-child):after {content: "\276F"; font-size: 1em; line-height: 1; margin-left: 9px; padding-left: 2px; display: inline-block; transform: rotate(90deg);}

@media (min-width: 1341px) {nav ul ul {top: 42px;}}
@media (max-width: 1340px) and (min-width: 1011px) {
.menu > li > a {height: 28px; padding: 40px 14px 25px 14px !important; display: grid; text-align: center; align-content: flex-end; position: relative;}
.menu > li > a:not(a:only-child):after {display: table-cell; margin: auto; position: absolute; left: 0; right: 0; bottom: 8px; width: 10px;}
nav ul ul {top: 69px;}
}
@media (min-width: 1011px) {
.tog, nav a {box-sizing: border-box;}
nav a {font-family: 'OpenSans Cond', Arial, Verdana, Geneva; font-variant-ligatures: none; padding: 15px 15px 12px 15px;}
nav * {transition: .15s;} #navback {margin: 0 auto;} nav ul li {display: table-cell; position: relative;}
nav ul ul li {width: 170px; display: block;}
nav ul ul, nav ul ul li:last-child, nav ul ul li:last-child a, nav ul ul li:last-child a {border-radius: 0 0 5px 5px;}
nav ul ul li:last-child *:hover {border-radius: 0 0 0 5px;}
.menu > li > a {padding: 5px 15px 12px 15px;}
}
@media (max-width: 1010px) {
/*.menu > li a {padding: 15px 15px 15px 15px; border: 1px solid blue}*/
.menu > li:first-child a {padding-top: 20px !important;} .menu > li:last-child a {padding-bottom: 20px !important;}
.tog + a, .menu {display: none;} #navback {width: 100%;} /*nav ul, nav li, nav a {text-align: left;}*/
.tog {display: block; padding: 14px 15px 14px 25px; border: none; cursor: pointer;}
.tog span {display: inline-block; vertical-align: bottom; padding: 6px 4px 0 5px; margin-left: -7px; margin-right: 5px; line-height: 1; transform: rotate(270deg); height: 10px; }
[id^=drop]:checked + ul {display: block; transition: 1s} /*nav ul li, nav ul ul li {width: 100%;}*/
/*.tog,*/ nav a, .menu > li a {padding: 14px 20px 14px 25px}
nav ul ul a {padding-left: 50px !important;}
nav ul ul {position: static;}
/*nav ul ul li, nav ul ul li a {font-size: .97em;}*/
nav ul ul li:hover > ul, nav ul li:hover > ul {display: none;}

/*Puts second level links side by side:*/
nav ul ul {margin: 0 10px 0 25px;} nav ul ul li {display: inline-block;}
nav ul ul li a {padding: 10px 8px !important; margin: 3px 1.2px;}

/*end side by side*/

.ham {position: absolute; margin: auto; height: 30px; width: 45px; padding: 10px; top: 59px; right: 15px} .ham div {top: 23px;}
.ham div, .ham div::before, .ham div::after {display: block; content: ""; position: absolute; height: 4px; width: 44px; background: var(--menuback);}
.ham div::before {top: -11px;} .ham div::after {top: 11px;}
}

/*menu narrow and right-aligned:*/
@media (max-width: 1010px) and (min-width: 421px) {nav ul {position: absolute} .menu {width: 380px; right: 0; z-index: 2;}}

/*Removes third level side by side, as screen is too narrow:*/
@media (max-width: 390px) {
nav ul ul ul {position: absolute; white-space: normal; width: auto;}
nav ul ul ul li {margin-left: -5px; width: 100%;} nav ul ul ul li span {display: inline;}
}

/*COLORS*/
:root {--menuline: #F00; --menuback: #007EA3; --menuhover: #DCD8D0; --menuselect: #900}
/*nav li:not(.menu > li) {background-color: var(--menuback);} nav ul ul li a {color: #FFF !important;}*/
nav li {background-color: #EEEBE5;} .menu > li a, nav li {color: #067393;}
nav .selected, nav a.selected {color: #067393 !important;}


@media (min-width: 1011px) {
.nodrop a:hover:not(.selected) {border-bottom: 4px solid var(--menuback);}
.tog, nav a {border-bottom: 4px solid transparent}
nav li > ul:not(nav li li > ul) {border-top: 4px solid var(--menuback);}
nav ul ul a:hover, nav li li .tog:hover {background-color: var(--menuhover);}
nav .selected, nav a.selected {-webkit-text-stroke: .6px #067393; background-color: inherit !important;}
}
@media (max-width: 1010px) {
/*nav {background-color: var(--menuback);}*/ .menu {border-top: 2px solid var(--menuback);}
/*nav a:hover, .tog:hover {-webkit-text-stroke: .6px var(--menuback);}*/
/*nav ul a:hover, nav li .tog:hover {background-color: #DDD;}*/
nav a.selected:not(nav li ul li .selected) {-webkit-text-stroke: .6px #067393; background-color: inherit !important;}
nav ul ul a, nav li li .tog {background-color: #DCD8D0;}
nav li ul li .selected {background-color: #FFF !important;}
/*nav ul ul a:hover, nav li li .tog:hover {background-color: #CCC;}*/
nav ul ul ul a {background-color: #D1CBC0;} /*nav ul ul ul a:hover {background-color: #BBB;}*/
}

@media (max-width: 650px) {.ham {top: 95px;}} @media (max-width: 630px) {.ham {top: 88px;}}
@media (max-width: 590px) {.ham {top: 95px;}} @media (max-width: 430px) {.ham {top: 89px;}}

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

/*Big 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; object-position: 50% 50%; display: block;}

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

/*BODY AREA*/

.batop, .babtm {background-color: #EFF0EA;} .batop {padding-bottom: 20px;} .babtm {padding-top: 20px;}

.bodyarea {/*position: relative;*/ padding: 40px 0; margin: auto; width: 85%; max-width: 1500px;}
.bodyarea, h2 {font-size: 20px; line-height: 1.7; font-weight: 400 !important;}

.bodyhead, .bodyhead2 {font-size: 1.9em; line-height: 1.25; font-weight: 600;}
.bodyhead {text-align: center; padding-bottom: 20px;} .bodyhead2 {text-align: left;}
h1, h2, h3, h4 {margin: 0 !important;}

@media (max-width: 700px) {.bodyhead {padding-bottom: 0; font-size: 1.6em;}}
@media (max-width: 360px) {.bodyarea {width: 88%;} .bodyhead {font-size: 1.45em;}}

.heading, .heading2 {font-weight: 600; line-height: 1.35;} .heading {font-size: 1.4em;} .heading2 {font-size: 1.2em;}

#bread {font-size: 14px; line-height: 1.4; text-align: right; padding-top: 30px;}

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

/*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;}
.piccenter, .piccenter img {text-align: center; margin: auto; display: block;}
@media (max-width: 1050px) and (min-width: 871px) {.picwide {max-width: 430px;}}
@media (max-width: 870px) {.piccenter, .picleft, .picright {text-align: center; float: none; margin: 35px auto;} .pictall {max-width: 400px;}}

#album {margin: 40px auto 30px auto !important; max-width: 1200px;} #album div {border-radius: 5px;}

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

/*Misc*/

#points {margin-left: -17px;}
#points span:first-child {display: block; color: var(--menuback); font-size: 1.15em; line-height: 1.4; font-weight: 600;}

.batop #points span:first-child {color: #067393 !important;}


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

/*BOTTOM INFO*/

/*.panels {border: 1px solid red} .panel {border: 1px solid blue}
.panelabout {border: 1px solid cyan} .panelcont {border: 1px solid yellow} .panelhrs {border: 1px solid green}*/

#btminfo {font-size: 18px; padding: 50px 0 30px 0; margin: auto; font-weight: 300;}
#logobtm, #logobtm img {width: 205px; height: 70px;}

.panels {margin: 0 auto; line-height: 1.6;}
.btmhead {/*text-align: center;*/ margin-bottom: 20px; font-size: 1.4em; font-weight: 600;}
.panel {vertical-align: top; font-size: 1em; padding: 0 50px;}

.panelabout p {font-size: .9em;} /*.panelcont a {color: inherit}*/
.btmphone {margin: 15px 0 20px 0;} .btmphone a {font-size: 1.15em; font-weight: 600;}
#socialbtm {margin-top: 13px; white-space: nowrap;} #socialbtm img {width: 30px; height: 30px; margin: 0 2px;}

@keyframes shake {20% {-webkit-transform: rotateZ(-8deg);} 80% {-webkit-transform: rotateZ(8deg);}}
#socialbtm img:hover {-webkit-animation: shake .16s 5;}

.panelhrs td {white-space: nowrap; font-size: .85em; text-align: left;} .panelhrs td:first-child {padding-right: 10px;}
.panelhrs th {padding-top: 10px; line-height: 1.4; font-weight: 600;}

@media (max-width: 940px) {.panel {padding: 0 3vw;}}

@media (min-width: 871px) {.panels {display: table; width: 100%; max-width: 800px;} .panel {display: table-cell;}}
@media (max-width: 870px) {
#btminfo {padding: 50px 20px;} .panels {text-align: center; display: block; margin: auto;}
.panelcont {margin: 30px auto;} #logobtm, .panelhrs table {margin: auto; text-align: center;}
}

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

/*BOTTOM AREA*/

.nolink, #serving, #serving a {color: inherit !important; text-decoration: none !important; pointer-events: none !important;}
#serving {margin: 0 auto 20px auto; padding: 0 20px; text-align: center; font-size: 12px; line-height: 1.3; font-weight: 300;}
#serving, #serving a {color: #BBB !important;}

#bottomarea {margin: auto; text-align: center; padding: 20px 30px;}
.copy {margin-top: 40px; font-size: 14px; line-height: 1.6;}
.web {font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 1.5; color: #BBB !important;}
.web a {text-decoration: none; font-style: italic; color: inherit;} .web a:hover {text-decoration: underline;}
@media (max-width: 500px) {.btmco span, .web a {display: block;}}

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

#llms {display: block; margin: 10px auto 20px auto; font-size: 11px; color: #BBB !important; text-decoration: none; cursor: text;}

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

/*COLORS*/

body {color: #444; background-color: #FFF;}
#headtopback, #headtop {background-color: var(--menuback); color: #FFF;}
#headtext {color: #885A00;} header {background-color: #EEEBE5;}

.cofont, .bodyhead, .bodyhead2 {color: var(--menuback);} .heading {color: #885A00;}
.batop .cofont {color: #067393 !important;}

#btminfo {background-color: #423F39;} .btmhead {color: #24A3C8 /*var(--menuback)*/;}
.panels {color: #E3E3E3;} .panels a {color: #FFF;}
#bottomarea {background-color: #161514; color: #FFF;}