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

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

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

body {font-family: 'Quicksand', Arial, Verdana, Geneva; font-variant-ligatures: none;}

#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: .1em; 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 {border: 1px solid blue;} #phone {border: 2px solid green}
#logo {border: 1px solid yellow} #logo img {border: 1px solid magenta}*/

#headtopback, #headtop {height: 40px;} #headtop, header {width: 100%; margin: auto; z-index: 2;}
header {display: table; box-shadow: 0 5px 12px -9px #555; text-align: center; box-sizing: border-box; z-index: 1;}
#logo {margin: 15px 0; z-index: 3;} #logo img {display: block;}

#phone {font-size: 17px; line-height: 1; padding-top: 1px; text-align: right; white-space: nowrap;}
#phone span {font-size: 15px; margin-right: 8px;}

@media (min-width: 2281px) {#headtop, header, .navheader {padding: 0 10%;}}
@media (max-width: 2280px) {#headtop, header, .navheader {padding: 0 5%;}}
@media (max-width: 2015px) {#headtop, header, .navheader {padding: 0 3%;}}
@media (max-width: 1930px) and (min-width: 1301px) {#headtop, header, .navheader {padding: 0 15px;}}
@media (max-width: 1300px) {#headtop, header, .navheader {padding: 0;} #logo {padding-left: 20px;} #phone {padding-right: 20px;}}
@media (min-width: 1831px) {#logo, #logo img {width: 340px; height: 96px;}}
@media (max-width: 1830px) {#logo, #logo img {width: 300px; height: 85px;}}

@media (min-width: 501px) {#headtop, header {position: fixed;} #headerback {height: 115px;}}
@media (max-width: 500px) {
#headerback {height: 100px;} #logo {padding-left: 10px; margin: 10px 0;} #logo, #logo img {width: 280px; height: 79px;}
}
@media (max-width: 400px) {
#headerback, header {height: 145px;} #logo {margin: 10px auto 0 auto; padding: 0 10px 0 0;}
#phone {margin: auto; padding-right: 0; text-align: center;}
}
@media (max-width: 360px) {#headerback, header {height: 140px;} #logo, #logo img {width: 260px; height: 74px;}}


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

/*Phone or Text*/

.phone-wrapper {display: inline-block;}
.phone-wrapper img {width: 22px; height: 22px; margin: 0 12px 3px 0; vertical-align: middle;}
.phone-link {-webkit-user-select: none; user-select: none; cursor: pointer; font-size: 18px; font-weight: 500; color: #FFF; letter-spacing: 1px;}

#contact-toggle, .popup {display: none;} #contact-toggle:checked ~ .popup {display: block;}

.popup {position: absolute; margin-top: 10px; padding: 12px 12px 4px 12px; width: 125px; text-align: center; box-sizing: border-box; background-color: #FFF; border: 1px solid #DDD; border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,0.12); z-index: 99999 !important;}

.popup a {white-space: nowrap; display: block; padding: 10px 4px 7px 4px; font-size: 18px; text-decoration: none; box-sizing: border-box; border-radius: 8px; color: #FFF; transition: .15s;}
.popup a:first-of-type {background-color: var(--blue1); margin-bottom: 8px;}
.popup a:last-of-type {background-color: var(--seafoam);}
.popup a:hover {filter: brightness(120%) saturate(120%);}

.dismiss-btn {display: inline-block; margin-top: 10px; padding: 4px 12px; font-size: 24px; font-weight: bold; color: #777; cursor: pointer;}
.dismiss-btn:hover {color: #222;}

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

/*MENU*/

/*.navheader {outline: 1px solid orange} nav {outline: 1px solid red} nav div {outline: 1px solid cyan}
nav a {outline: 1px solid blue} .ham {outline: 1px solid yellow}*/

.navheader, .navheader * {box-sizing: border-box;}

nav div {height: auto !important; bbackground-color: #0ff}

#navcheck {display: none;}
nav a.selected {cursor: text; pointer-events: none; -webkit-user-select: none; -webkit-touch-callout: none;}
nav a {display: table-cell; text-decoration: none; cursor: pointer; line-height: 1.4; font-weight: 400;}
nav div:first-child a {padding-right: 10px;} nav div:last-child a {padding-left: 10px;}

@media (min-width: 1831px) {.navheader {top: 22px;} nav div {max-width: 130px;}}
@media (max-width: 1830px) and (min-width: 1706px) {
.navheader {top: 16px;}
nav div {max-width: 120px;} nav div:nth-child(2) {max-width: 120px;} nav div:nth-child(5) {max-width: 130px;}
}
@media (min-width: 1706px) {
nav a {font-size: 16px;} nav div {margin: 0 8px;} nav div:not(:last-child)::after {right: -11px;}
}
@media (max-width: 1705px) and (min-width: 1301px) {
.navheader {top: 19px;}
nav div {margin: 0 5px; max-width: 115px;} nav div:nth-child(2) {max-width: 120px;}
nav div:not(:last-child)::after {right: -7px;} nav a {font-size: 15px;}
}

@media (min-width: 1601px) {
/*lines between nav divs*/
nav div {position: relative;}
nav div:not(:last-child)::after {content: ""; position: absolute; width: 1px; background-color: var(--seafoamlite);}
/*end lines*/
}

/*don't change order*/

@media (min-width: 1301px) {
.ham {display: none;} .navheader {position: absolute; right: 0;}
nav {display: inline-block;}
nav div {display: inline-block; vertical-align: middle; text-align: center;}
nav a {padding: 8px 0; display: table-cell; align-content: center; text-align: center; transition: .15s;}
nav div:not(:last-child)::after {top: calc(50% - 30px); height: 60px;}
}

@media (max-width: 1600px) and (min-width: 1301px) {
.navheader {top: 3px;}
nav {display: grid; grid-template-columns: repeat(5, 1fr);}
nav div {display: flex; align-content: center; max-width: 100% !important; margin: 3px;}
nav a {display: block; width: 100%; padding: 3px 10px; border-radius: 15px;}
nav span {display: block;}
}

@media (max-width: 1300px) {
.navheader {left: 0; right: 0;}
nav {position: relative; text-align: center; transition: .15s; height: 0; font-size: 0; box-sizing: border-box; z-index: -1; background-color: #FFF; visibility: hidden;}
nav div {max-height: 0; display: inline-block; width: 50%; transition: .2s ease-in-out; font-size: 0; line-height: 0; padding: 0;}
nav a {width: 1%; height: 0;display: table-cell; vertical-align: middle; opacity: 0; font-size: 0; padding: 0; -webkit-transition: .15s background, .3s font-size ease-out, .2s opacity ease-out, .3s padding ease-out, .25s height; border-top: 1px solid var(--blue2); border-left: 1px solid var(--blue2); background-color: #FFF;}

#navcheck:checked ~ nav {visibility: visible; z-index: 1;}
#navcheck:checked ~ nav div {max-height: 100px;}
#navcheck:checked ~ nav a {height: 70px; font-size: 18px; opacity: 1; padding: 0 0 1px 0;}

.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: 38px; right: 25px; margin: auto; text-align: center; padding: 0 3px 10px 10px !important;}
.ham:hover {cursor: pointer;}

.ham div {left: 4px; bottom: 15px; transition: transform 0.4s ease-out;}
.ham div, .ham div:before, .ham div:after {position: absolute; display: block; content: ""; height: 3px; width: 38px; opacity: 1; background: var(--blue2); border-radius: 40%;}
.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: 1300px) and (min-width: 1111px) {
nav div {width: 20%;} nav div:nth-last-of-type(-n+5) {border-bottom: 1px solid var(--blue2);}
}
@media (max-width: 1300px) and (min-width: 401px) {nav span {display: block;}}
@media (max-width: 1300px) and (min-width: 876px) {nav div:nth-child(5), nav div:nth-child(10) {border-right: 1px solid var(--blue2);}}
@media (max-width: 1110px) and (min-width: 876px) {
nav div {width: 25%;} nav div:first-child, nav div:last-child {width: 100%;}
#navcheck:checked ~ nav div:first-child, #navcheck:checked ~ nav div:last-child,
#navcheck:checked ~ nav div:first-child a, #navcheck:checked ~ nav div:last-child a {height: 55px;}
nav div:nth-child(1), nav div:nth-child(9) {border-right: 1px solid var(--blue2);}
nav div:last-child {border-bottom: 1px solid var(--blue2);}
}
@media (max-width: 875px) and (min-width: 671px) {
nav div {width: 33.3%;} nav div:first-child {width: 100%;}
#navcheck:checked ~ nav div:first-child, #navcheck:checked ~ nav div:first-child a {height: 55px;}
nav div:nth-child(3n+1) {border-right: 1px solid var(--blue2);}
nav div:nth-last-of-type(-n+3) {border-bottom: 1px solid var(--blue2);}
}
@media (max-width: 670px) and (min-width: 401px) {
nav div {width: 50%;}
nav div:nth-child(even) {border-right: 1px solid var(--blue2);}
nav div:nth-last-of-type(-n+2) {border-bottom: 1px solid var(--blue2);}
}
@media (max-width: 500px) and (min-width: 401px) {.ham {top: 71px;}}
@media (max-width: 450px) {#navcheck:checked ~ nav a {font-size: 16px;}}
@media (max-width: 450px) and (min-width: 401px)  {#navcheck:checked ~ nav div, #navcheck:checked ~ nav a {height: 65px;}}
@media (max-width: 400px) {
nav {top: 56px;} nav div {width: 100%; border-right: 1px solid var(--blue2);}
.ham {top: 135px; left: 0; right: 0;} nav div:last-child {border-bottom: 1px solid var(--blue2);}
#navcheck:checked ~ nav div, #navcheck:checked ~ nav a {height: 55px;}

nav div:nth-child(8) span, nav div:nth-child(9) span {display: block;}
#navcheck:checked ~ nav div:nth-child(8) div, #navcheck:checked ~ nav div:nth-child(8) a,
#navcheck:checked ~ nav div:nth-child(9) div, #navcheck:checked ~ nav div:nth-child(9) a {height: 65px;}
}
@media (max-width: 360px) {nav {top: 56px;} .ham {top: 132px;}}


/*colors*/

@media (min-width: 1601px) {
nav a {color: var(--blue2) !important;}
nav .selected {color: #222 !important;}
nav a:hover:not(.selected) {color: var(--blue3) !important;}
}
@media (max-width: 1600px) {
nav a {background-color: var(--blue1); color: #FFF !important;}
nav .selected {background-color: var(--blue2) !important;}
nav a:hover:not(.selected) {background-color: var(--seafoamlite); color: #444 !important;}
}

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

/*BODY AREA*/

/*.bodyarea {outline: 1px solid blue} #headerback {outline: 1px solid magenta} header {outline: 1px solid green}*/

.bodyarea {padding: 45px 0 50px 0; margin: auto; width: 85%; max-width: 1500px;}
.bodyarea, h2 {font-size: 20px; line-height: 1.7; font-weight: 400;}
.bodyarea p {margin-bottom: 0;}

h1, h2, h3, h4, h5, .bodyhead {margin: 0 0 20px 0;}

.bodyhead {font-family: 'Satisfy', Arial, Helvetica, sans-serif; padding-bottom: 10px; font-weight: 500; font-size: 2.5em; line-height: 1.15; text-align: center;}
h1.bodyhead {font-size: 0; line-height: 0; margin: 0; padding: 0;}
.heading, .heading2 {font-weight: 500;}
.heading {font-family: 'Satisfy', Arial, Helvetica, sans-serif; font-size: 2.2em; line-height: 1.15; font-weight: 400 !important; margin: 20px 0;}
.heading2 {font-size: 1.5em; font-weight: 500 !important; line-height: 1.35; margin: 25px 0 20px 0;}

@media (max-width: 480px) {.bodyhead {padding-bottom: 0;} .bodyarea, h2 {font-size: 19px;}}
@media (max-width: 360px) {.bodyarea {width: 87%;} .bodyarea, h2 {font-size: 18px;}}

.divide:not(.divide:first-child) .bodyarea {padding-top: 50px;}
.divide:first-child .bodyarea {padding-bottom: 35px;}
.divide:nth-of-type(even) {background-color: var(--cream);}
.divide .heading {margin: 0 0 20px 0;}

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

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

/*Top Pic*/

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

.caption {font-family: 'Satisfy', Arial, Helvetica, sans-serif; position: absolute; display: table-cell; left: 5%; right: 5%; text-align: center; top: 55%; transform: translateY(-55%); padding: 0 !important; margin: 0 !important; z-index: 1; margin: 0 auto; color: var(--blue1);}
.caption h1 {font-weight: 400; font-size: 6em; line-height: 1.1; text-shadow: 0px 0px 3px #FFF; margin-bottom: 0;}

@media (max-width: 980px) and (min-width: 671px) {.caption h1 {font-size: 10vw;}}
@media (max-width: 670px) {#toppic img {height: 45vw;} .caption h1 {font-size: 11vw;}}

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

/*Page Pics*/

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

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

/*BOTTOM AREA*/

.btmareaback {background-color: #555; color: #FFF} .btmarea a {color: #FFF;}

.btmarea {display: grid; width: 100%; margin: auto; font-weight: 300;}
.block1 {font-size: 17px; line-height: 1.5; align-content: center;}
.block1 span {display: block; font-size: 14px; margin-top: 15px;}
.block2 {font-size: .85em; line-height: 1.7;} .block2 a:hover {text-decoration: underline;}

.btmicons {margin: 10px 0 0 0; display: grid;} .btmicons img {margin: 0 8px 15px 0; vertical-align: top;}

.block2 span {white-space: nowrap;}
.btmicons span:first-of-type img {margin-top: 4px;}
.btmicons span:nth-of-type(2) img {margin-top: 3px;}
.btmicons span:last-of-type img {margin-top: 2px;}

.btmarea .phlink {font-size: 1.25em; font-weight: 400;}

@media (min-width: 651px) {
.btmareaback {padding: 35px 50px;}
.btmarea {grid-template-columns: minmax(0, 1fr) max-content; max-width: 800px;}
.block1 {padding: 0 20px 0 0; border-right: 1px solid #999;} .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 #999;}
.block2 {padding: 20px 0 0 0; margin: auto; text-align: left;}
}

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

/*Footer*/

footer {font-size: 14px; line-height: 1.6; padding: 25px 25px 22px 25px; text-align: center; background-color: #333;}
footer, footer a {color: #FFF;} .copy {font-size: 1.2em;}

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

#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; filter: drop-shadow(0 0 4px rgba(0,0,0,0.55)); cursor: pointer;}
#totop:hover {opacity: 1;}


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

/*COLORS*/

:root {--blue1: #6C93B7; --bluelite: #A6BDE0; --seafoam: #7BA2A3; --seafoamlite: #9BC9CA; --cream: #F4EDDD; --blue2: #536399; --blue3: #5695D1;}
/*lighter seafoam from logo: #ACC5CA*/

body, header {background-color: #FFF;} #headtop {background-color: var(--blue1);}
body {color: #444;} #phone, #phone a {color: #FFF;}
.bodyhead {color: var(--blue1);} .heading {color: var(--seafoam);} .heading2 {color: #666;}