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

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

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

#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: #397BC0;} 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: 1px solid blue;} #social {border: 2px solid yellow} #phone {border: 2px solid green}
#logo {border: 3px solid red} #logo img {border: 1px solid magenta}*/

header {display: table; width: 100%; margin: auto; z-index: 2; box-shadow: 0 5px 10px -10px #333; text-align: center; box-sizing: border-box;}
#social {text-align: right; width: 130px; white-space: nowrap;} #social a {margin: 0 1px;}

#logo {padding-top: 9px; padding-bottom: 8px; z-index: 1;} #logo img {display: block;}

@media (min-width: 2241px) {header, #navheader {padding: 0 15%;}}
@media (max-width: 2240px) and (min-width: 1971px) {header, #navheader {padding: 0 10%;}}
@media (max-width: 1970px) and (min-width: 1781px) {header, #navheader {padding: 0 6%;}}
@media (max-width: 1780px) and (min-width: 1491px) {header, #navheader {padding: 0;} header {padding-left: 25px; padding-right: 25px;}}
@media (max-width: 1490px) and (min-width: 1116px) {header, #navheader {padding: 0 2%;}}

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

@media (min-width: 1391px) {
#headerback, header {height: 101px;} #logo, #phone {width: 340px;} #logo img {width: 340px; height: auto;}/*sdf*/
}
@media (max-width: 1390px) {#headerback, header {height: 90px;}}
@media (max-width: 1390px) and (min-width: 1301px) {#logo, #phone {width: 300px;} #logo img {width: 300px; height: auto;} /*sdf*/}
@media (max-width: 1300px) {#phone {width: 140px;} #logo, #logo img {width: 300px; height: auto;} /*sdf*/}
@media (max-width: 1115px) {#logo {padding-left: 20px;} #phone {padding-right: 20px;}}
@media (min-width: 611px) {header {position: fixed; display: table;} #logo, #navheader, #phone {display: table-cell;}}
@media (max-width: 610px) {
#headerback, header {height: 130px;} header {border-bottom: 3px solid #DED5C8;}
header, #logo, #navheader, #phone {display: block;}
#phone {margin: 5px auto 0 auto;} #logo {width: 300px;} #logo img {width: 300px; height: auto;}/*sdf*/
}
@media (max-width: 430px) {
#headerback, header {height: 185px;}
#logo img {margin: auto; width: 300px; height: auto; max-width: 300px; width: 90%; height: auto /*sdf*/}
#logo {margin: auto; width: auto; padding-left: 0;text-align: center;} #phone {margin-top: 0;}
}

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

/*MENU*/

/*#navheader {border: 3px solid orange} nav {border: 1px solid red} nav div {border: 1px solid cyan} nav a {border: 1px solid blue}*/

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 {display: table-cell; text-decoration: none; cursor: pointer; line-height: 1.3; font-weight: 400; -webkit-transition: background .2s, color .1s, font-size .3s; color: #4F4A46 !important;}

@media (min-width: 1191px) {nav a {padding: 4px 15px 3px 15px;}}
@media (max-width: 1190px) {nav a {padding: 4px 9px 3px 9px;}}

@media (min-width: 1116px) {
.ham {display: none;} #navheader {position: relative; left: 0; right: 0; text-align: center; justify-content: center; justify-items: center; justify-self: center; height: 100%;}
nav {position: absolute; display: inline-block; margin: auto; left: 0; right: 0; text-align: center; height: 100%; align-content: center;}
nav div {display: inline-grid; align-content: center; align-self: center; align-items: center; vertical-align: middle; white-space: nowrap;}
nav a {height: 50px; font-size: 16px; line-height: 1.45; text-align: center; align-content: center; border-radius: 20px;}
}

@media (max-width: 1115px) {
#navheader {left: 0; right: 0; position: absolute; margin: 0 -5px;}
nav {position: relative; text-align: center; top: 90px; transition: .15s; height: 0; font-size: 0; box-sizing: border-box; z-index: -1;}
nav div {display: inline-block; text-align: center; left: 0; right: 0; margin: 0 -2px; font-size: 0; height: 0; opacity: 0; transition: .15s; border: 1px solid transparent; width: 20%;}
nav a {text-align: center; font-size: 0; opacity: 0; height: 0; white-space: nowrap; padding: 1px 8px; border: 1px solid #999; pointer-events: none;}

#navcheck:checked ~ nav {/*height: 100% - covers phone;*/ z-index: 2; box-shadow: 0 8px 8px -5px #222; height: 70px;}
#navcheck:checked ~ nav div {opacity: 1; height: 70px;}
#navcheck:checked ~ nav a {font-size: 17px; line-height: 1.45; opacity: 1; pointer-events: auto; height: 70px; vertical-align: middle; width: 1%;}
#navcheck:checked ~ nav div:first-child a {border-left: none;} #navcheck:checked ~ nav div:last-child a {border-right: none;}

.ham {position: absolute; z-index: 600; height: 35px; width: 45px; top: 20px; left: 0; right: 0; margin: auto; text-align: center; padding: 0 10px 10px 10px;}
.ham:hover {cursor: pointer;} .ham > div {top: 18px; left: 10px;}

.ham div {top: 22px; left: 10px; -webkit-transition: -webkit-transform 0.4s ease-out;}
.ham div, .ham div:before, .ham div:after {position: absolute; display: block; content: ""; height: 3px; width: 44px; opacity: 1; background: #9C8B7E; border-radius: 2px;} .ham div:before {top: -12px;} .ham div:after {top: 12px;}

#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: 800px) and (min-width: 611px) {.ham {left: calc(100% - 470px);}}
@media (min-width: 706px) {nav span {display: block;}}
@media (max-width: 705px) {
nav div {width: 50%;} nav div:first-child {width: 100%;}
#navcheck:checked ~ nav {height: 200px;} /*for shadow*/
#navcheck:checked ~ nav div:first-child, #navcheck:checked ~ nav div:first-child a {height: 55px;}
#navcheck:checked ~ nav div:nth-child(even) a {border-left: none;}
#navcheck:checked ~ nav div:nth-child(odd) a {border-right: none;}
#navcheck:checked ~ nav a {font-size: 18px;}
}
@media (max-width: 610px) {#navheader {top: 0; margin: 0 1px; /*width: 100%;*/} nav {top: 126px;} .ham {left: auto; right: 20px;}}
@media (max-width: 555px) {nav span {display: block;}}
@media (max-width: 430px) {.ham {top: 127px; left: 0; right: 0;} nav {top: 181px;}}

nav .selected {color: #000 !important;}
@media (min-width: 1116px) {
nav .selected {background-color: #DED5C8;} nav a:hover:not(.selected) {background-color: #F1EAE1; color: #326095 !important;}}
@media (max-width: 1115px) {
nav a {background-color: #F1EAE1;} nav .selected {background-color: #CABFAF;} nav a:hover:not(.selected) {background-color: #DED5C8;}
}

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

/*BODY AREA*/

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

.bodyarea {padding: 10px 0 35px 0; margin: auto; width: 85%; max-width: 1500px;}
.bodyarea, h2 {font-size: 18px; line-height: 1.6; font-weight: 400 !important;}
.bodyhead {padding-bottom: 10px; font-weight: 500 !important; font-size: 1.75em; line-height: 1.35; text-align: center;}
h1, h2, h3 {margin: 0 !important;}

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

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

/*.divide:nth-of-type(even) {background-color: #EEE;} .divide:not(:first-of-type) {padding-top: 35px;}
.divide:last-of-type {padding-bottom: 10px;}*/

/* for lists: ul {margin-left: -15px;} ul li:not(ul li:last-child) {padding-bottom: 15px;} ul span {font-weight: 500;}
or ul {margin: -10px 0 0 -15px;}
*/

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

/*Page Pics*/

.pagepic img {border-radius: 3px; width: 500px; height: 300px; width: 100%; height: auto; display: block;}
/*.pagepic h4, .pagepic p {font-size: .9em; line-height: 1.45; margin: 10px auto 0 auto !important; text-align: center; font-weight: 400 !important;}*/
.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: #FFF /*#3E3C37;*/} /*.btmarea a {color: #FFF;}*/
.btmarea {display: grid; box-sizing: border-box; margin: 0 auto; /*color: #FFF;*/}

.block {box-sizing: border-box;}
.block1 {line-height: 1.5;}
.block1 img {display: block; width: 343px; height: 62px; width: 100%; max-width: 343px; height: auto;}
.block2 /*line separator*/ {background-color: #CCC;}

.block3 {font-size: .85em; line-height: 1.7;} .block3 a {text-decoration: none;} .block3 a:hover {text-decoration: underline;}
.block3 span {display: block; font-size: 1.4em; line-height: 1.4; font-weight: 500; margin-bottom: 5px; color: #826F52;}
.btmicons {margin: 15px 0;} .btmarea .phlink {font-size: 1.25em; font-weight: 500; color: #826F52 !important;}
.btmicons img {margin: 2px 8px 15px 0; vertical-align: top;}
.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 {max-width: 750px; grid-template-columns: repeat(5, 1fr) 50px 1px 35px repeat(3, 1fr);}}
@media (max-width: 1000px) and (min-width: 731px) {.btmarea {grid-template-columns: repeat(5, 1fr) 35px 1px 35px repeat(3, 1fr);}}
@media (max-width: 1000px) and (min-width: 821px) {.btmarea {max-width: 700px;}}
@media (max-width: 820px) and (min-width: 731px) {.btmarea {max-width: 600px;}}
@media (min-width: 731px) {
.block1 {grid-column: span 5;} .block2 {width: 1px; justify-self: center;} .block3 {grid-column: span 3; justify-self: flex-end;}
}
@media (max-width: 730px) {
.block1 {padding-bottom: 30px;} .block2 {height: 1px;} .block2a, .block2b {display: none;} .block3 {justify-self: center; padding-top: 30px;}
}
@media (max-width: 730px) and (min-width: 451px) {.block1 {text-align: center; }.block1 img {margin: auto;}}
@media (min-width: 451px) {.btmareaback {padding: 35px 50px;}}
@media (max-width: 450px) {.btmareaback {padding: 35px 30px;}}
@media (max-width: 360px) {.block3 {justify-self: flex-start;}}

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

/*Footer*/

#serving {font-size: 12px; line-height: 1.4; font-family: Arial, Helvetica, sans-serif;}
#serving a, .nolink {color: inherit !important; text-decoration: none !important; pointer-events: none !important;}

footer {font-size: 14px; line-height: 1.6; padding: 25px 25px 22px 25px; text-align: center; background-color: #DDD5CF;/*#201F1D;*/}
.web {font-size: 12px; font-family: Arial, Helvetica, sans-serif;}
.web a {font-style: italic; text-decoration: none; white-space: nowrap;} .web a:hover {text-decoration: underline;}

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

/*COLORS*/

body, header {background-color: #FFF;} body {color: #4F4A46;} #phone, #phone a {color: #826F52;}
.bodyhead {color: #326095;} .heading {color: #326095;}

/*:root {--limegreen: #A9D177; --tan: #f1e4b5 ; --darkgreen: #FF0;}*/