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

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

body {font-family: "Open Sans", Verdana, Geneva, sans-serif; font-variant-ligatures: none !important;}

#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;}
a, .ham {-webkit-tap-highlight-color: transparent);}
img {border: 0;} #phone a {white-space: nowrap;}
.phlink {color: inherit !important; text-decoration: none !important; white-space: nowrap;} .phlink:hover {cursor: text;}
.ham, .ham * {-webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation;}

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

/*HEADER*/

/*#headerback {border: 1px solid blue} #header {border: 1px solid green} #header table {border: 1px solid magenta} #header td {border: 1px solid red} #headertext {border: 1px solid orange} #headertext h1 {border: 1px solid #666;} #logo, #logo img {border: 1px solid #000;}*/

#headerback, #header {margin: 0 auto;} #header {max-width: 1650px;}
#header table {position: relative; margin: auto; padding: 6px 0; width: 100%;} #header td {vertical-align: middle;}

@media (min-width: 1500px) {#header {width: 92%;}} @media (max-width: 1499px) and (min-width: 541px) {#header {width: 97%;}}

#headertext h1 {text-align: center; margin: 0 auto; font-style: italic; font-weight: 400 !important; font-size: 22px; line-height: 1.35; padding: 0 20px 4px 20px;}

#logo img {display: block; width: 205px; height: 127px;}
#phone {font-size: 22px; font-weight: 600; text-align: right; white-space: nowrap; vertical-align: top !important;} #phone a {text-decoration: none;}

#social {position: absolute; display: table; height: 30px; bottom: 6px; right: 8px;}
#social a, #social img {height: 30px; width: 30px;} #social a {display: inline-block; margin: 0 3px -4px 3px;} #social img {display: block;}
@keyframes shake {20% {-webkit-transform: rotateZ(-8deg);} 80% {-webkit-transform: rotateZ(8deg);}}
#social img:hover {-webkit-animation: shake .16s 5;}

@media (min-width: 951px) {#headertext h1 span {display: block;}}
@media (min-width: 871px) {#headertext h1 {font-size: 20px;}}
@media (max-width: 870px) {#headertext {width: 40%;} #headertext h1 {font-size: 18px;}}
@media (min-width: 676px) {#logo, #phone {width: 205px;}}
@media (max-width: 675px) {#logo, #phone {width: 50%;} #headertext, #headertext h1 {visibility: hidden; width: 0; padding: 0; font-size: 0;}}
@media (min-width: 401px) {#logo {padding: 0 0 0 10px;} #phone {padding: 0 12px 3px 10px;} }
@media (max-width: 400px) {
#header td {display: block;} #logo img {margin: 5px auto 0 auto; padding: 0 15px;}
#logo, #phone {width: auto; text-align: center;} #phone {padding: 12px 0 5px 0; font-size: 24px;}
}

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

/*MENU*/

/*.navheader {border: 1px solid #DDD;} .menu {border: 1px solid magenta;} .menu div {border: 1px solid blue;} .menu a {border: 1px solid cyan !important;} .menu a li {border: 1px solid green;} .hamburger {border: 1px solid black;}*/

#navcheck {display: none;}
.menu a {display: block; text-decoration: none !important; cursor: pointer; font-size: 20px; line-height: 1.3; font-weight: 400; vertical-align: middle;}
.menu a.selected {cursor: text; cursor: text; -webkit-user-select: none; -webkit-touch-callout: none;} .menu a li {list-style-type:none;}

@media (min-width: 1001px) {
.hamburger {display: none;} .navheader {width: 100%; z-index: 2;} .menu {display: table; text-align: center; margin: auto;}
.menu div, .menu a {display: table-cell; vertical-align: middle; white-space: nowrap; height: 45px;} .menu a {padding: 2px 25px 4px 25px; transition: .2s;}
}
@media (max-width: 1800px) and (min-width: 1001px) {
.menu a {padding: 3px 1.7vw 4px 1.7vw; height: 60px; font-size: 18px; line-height: 1.35;} .menu span {display: block;}
.menu div:nth-child(6) a {padding: 2px .3vw 4px .3vw;}
}
@media (max-width: 1145px) and (min-width: 1001px) {
.menu a {padding: 3px 15px 4px 15px; height: 60px; font-size: 16px;} .menu div:nth-child(6) a {padding: 3px 5px 4px 5px;}
}

@media (max-width: 1000px) and (min-width: 706px) {
.menu {display: table; margin: auto; text-align: center; transition: .2s;}
.menu div {vertical-align: middle; display: inline-block; margin: 0; text-align: center; height: 0; transition: .4s; border-bottom: 0; width: 24.8%; height: 65px; border-top: 1px solid rgba(255, 255, 255, .3); border-right: 1px solid rgba(255, 255, 255, .3);}
.menu a {width: 100%; padding: 0; height: 100%; text-align: center; font-size: 18px; transition: .4s; display: table; white-space: nowrap;}
.menu a li {display: table-cell; vertical-align: middle;} .menu span {display: block;}
.menu div:nth-child(1), .menu div:nth-child(5) {border-left: 1px solid rgba(255, 255, 255, .3);}
}

@media (max-width: 805px) and (min-width: 706px) {.menu a {font-size: 16px;}}
@media (max-width: 705px) {
.menu {position: relative; text-align: center; visibility: hidden; transition: .4s; font-size: 0; line-height: 0; opacity: 0;}
.menu div {vertical-align: middle; margin: 0; text-align: center; height: 0; transition: .3s; border-bottom: 0;}
.menu a {width: 100%; padding: 0; height: 100%; text-align: center; font-size: 0; transition: .3s; display: table; opacity: 0;}
.menu a li {display: table-cell; vertical-align: middle; white-space: nowrap;}

#navcheck:checked ~ .menu {visibility: visible; line-height: auto; opacity: 1;}
#navcheck:checked ~ .menu div {height: 70px; border-top: 1px solid rgba(255, 255, 255, .3);}
#navcheck:checked ~ .menu a {font-size: 18px; opacity: 1;}

#navcheck:checked ~ .hamburger > div::before, #navcheck:checked ~ .hamburger > div::after {background: #FFF;}
#navcheck:checked ~ .hamburger > div {width: 0; background: none;}
#navcheck:checked ~ .hamburger > div::before {-webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); top: 0;}
#navcheck:checked ~ .hamburger > div::after {-webkit-transform: rotateZ(-45deg); transform: rotateZ(-45deg); top: 0;}
.hamburger {position: relative; display: table; z-index: 6; height: 30px; width: 45px; margin: auto; text-align: center; padding: 10px;}
.hamburger:hover {cursor: pointer;} .hamburger > div {top: 23px; left: 10px;}
.hamburger > div, .hamburger > div::before, .hamburger > div::after {display: block; content: ""; position: absolute; height: 4px; width: 44px; opacity: 1; background: #FFF; -webkit-transition: 0.15s ease-in-out; transition: 0.15s ease-in-out; -webkit-transition: transform 0.2s ease-out; -webkit-transition: -webkit-transform 0.2s ease-out;} .hamburger > div::before {top: -11px;} .hamburger > div::after {top: 11px;}
}
@media (max-width: 705px) and (min-width: 396px) {.menu div {display: inline-block;} .menu span {display: block;}}
@media (max-width: 705px) and (min-width: 591px) {
.menu div {width: 33.1%;} .menu div:nth-child(7), .menu div:nth-child(8) {width: 49.7%;}
#navcheck:checked ~ .menu div {border-right: 1px solid rgba(255, 255, 255, .3);}
#navcheck:checked ~ .menu div:nth-child(3), #navcheck:checked ~ .menu div:nth-child(6), #navcheck:checked ~ .menu div:nth-child(8) {border-right: 0;}
}
@media (max-width: 590px) and (min-width: 396px) {
.menu div {width: 49.5%;} #navcheck:checked ~ .menu div:nth-child(odd) {border-right: 1px solid rgba(255, 255, 255, .3);}
}
@media (max-width: 395px) {
.menu a {transition: .5s font-size, .15s background;} .menu a li {padding: 0 10px 3px 10px;}
#navcheck:checked ~ .menu div {height: 60px;} #navcheck:checked ~ .menu div:nth-child(6) {height: 70px;}
#navcheck:checked ~ .menu a {font-size: 22px;} .menu div:nth-child(6) span {display: block;}
}

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

/*Big Pic*/

#toppic {position: relative; height: 40vw; max-height: 420px; overflow: hidden; background-color: #8C7447;}
#toppic img {position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 500px; height: 300px; width: 100%; height: auto; display: block;}

.caption {position: absolute; display: table-cell; left: 0; right: 0; text-align: center; top: 48%; -webkit-transform: translateY(-48%); -ms-transform: translateY(-48%); transform: translateY(-48%); z-index: 1; margin: auto; font-family: 'Archivo Narrow', Arial, Helvetica, sans-serif; font-weight: 700 !important; font-size: 40px; line-height: 1.15; color: #FFF; text-shadow: 1px 1px 2px #000; padding-bottom: 10px;}

@media (min-width: 1041px) {.caption {font-size: 45px;}} @media (max-width: 1040px) {.caption {font-size: 4.2vw;}}
@media (min-width: 541px) {.caption span {display: block;}}
@media (max-width: 500px) {#toppic {height: 45vw;} .caption {font-size: 5.6vw; line-height: 1.1;}}

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

/*BODY AREA*/

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

.bodyarea {position: relative; padding: 10px 0 35px 0; margin: auto; width: 85%; max-width: 1500px;}
.bodyarea, h2 {font-size: 20px; line-height: 1.7; font-weight: 400 !important;}
.bodyhead {padding: 10px 0; font-weight: 600 !important; font-size: 1.7em; line-height: 1.2; text-align: center;} h1, h2, h3 {margin: 0 !important;}

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

.heading {font-weight: 600; font-size: 1.3em; line-height: 1.35;}

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

/*Home Page Right Box*/

#rightbox {padding: 18px 15px 20px 15px; background-color: #d3eafb; border-radius: 4px;}
.rbhead {text-align: center; font-weight: 600;} #rightbox ul {margin: 15px 0 0 0; text-align: left;}
#rightbox li {padding-bottom: 16px; line-height: 1.45; margin-left: -20px;}
#rightbox li:last-child {padding-bottom: 0;} #rightbox a:hover {text-decoration: underline;}
@media (min-width: 801px) {#rightbox li {font-size: .9em;} #floatback:before {width: 300px; height: 455px;} #rightbox {width: 260px; height: 405px;}}
@media (max-width: 800px) {#rightbox li {font-size: .85em;} #floatback:before {width: 275px; height: 435px;} #rightbox {width: 235px; height: 385px;}}
@media (min-width: 701px) {
#rightbox {position: absolute; top: 0; right: 0; margin-top: 10px;}
#floatback {position: relative;} #floatback:before {content: ''; float: right; display: block; margin: 0 0 15px 25px;}
}
@media (max-width: 700px) {
#rightbox {display: table; height: auto; width: auto; margin: 35px auto 15px auto; text-align: center;} #rightbox li {font-size: .95em;}
}

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

/*Home Page Review*/

#blurb {clear: both; max-width: 600px; margin: 40px auto; padding: 25px 25px 30px 35px; font-size: .9em; line-height: 1.6; border-radius: 10px; border-left: 5px solid #007DCE; border-right: 5px solid #007DCE; background-color: #EEE; color: #6B6B6B; font-family: Georgia, "Times New Roman", Times, serif; font-style: italic;}
#blurb:before {font-family: Georgia, "Times New Roman", Times, serif; content: open-quote; left: -20px; position: relative; display: inline; top: 35px; height: 0; line-height: 0; color: #007DCE; font-size: 4.5em;}
#blurb span {color: #AAA; font-size: .85em; white-space: nowrap;}
@media (max-width: 500px) {#blurb {padding: 25px 20px 25px 25px;}}
@media (max-width: 380px) {#blurb {padding: 20px 15px 23px 20px;}}

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

/*Page Pics*/
.pagepic img {width: 100%; display: block; border-radius: 3px; width: 500px; height: 350px; width: 100%; height: auto;}
.picwide {max-width: 500px;} .pictall {max-width: 350px;}
.picright {float: right; margin: 10px 0 20px 30px;}
@media (max-width: 900px) and (min-width: 841px) {.picwide {max-width: 430px;}}
@media (max-width: 840px) {.picright {text-align: center; float: none; margin: 35px auto;} .pictall {max-width: 400px;}}

#album {margin: 40px auto 20px auto !important;} #album div {border-radius: 5px;}

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

/*Ready*/

#ready {clear: both; text-align: center; padding: 40px 20px; font-size: 1.8em; line-height: 1.4; font-weight: 600;}
#ready div {display: block; margin-top: 25px;}
#ready a {display: inline-block; border-radius: 5px; font-weight: 600; padding: 9px 13px; font-size: 22px; text-decoration: none !important;}

@-webkit-keyframes rippleout {100% {top: -12px; right: -12px; bottom: -12px; left: -12px; opacity: 0;}}
@keyframes rippleout {100% {top: -12px; right: -12px; bottom: -12px; left: -12px; opacity: 0;}}
#ready a {display: inline-block; vertical-align: middle; box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative;}
#ready a:before {content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-animation-duration: 1s; animation-duration: 1s; pointer-events: none; border-radius: 5px;}
#ready a:hover:before, #ready a:focus:before, #ready a:active:before {-webkit-animation-name: rippleout; animation-name: rippleout; border-radius: 5px;}

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

/*BOTTOM AREA*/

.nolink, #serving a {color: inherit !important; text-decoration: none !important; cursor: text;}
#serving {padding: 0 20px;} #serving, #serving a {font-size: 13px; line-height: 1.4; color: #AAA;} #serving a {white-space: no-wrap;}

#bottomarea {font-size: 14px; line-height: 1.8; padding: 20px 0 25px 0; text-align: center; clear: both;}
.web {line-height: 1.5;} .web a {font-style: italic; text-decoration: none;} .web a:hover {text-decoration: underline;}
@media (max-width: 460px) {.web a {display: block;}} @media (max-width: 320px) {.btmco span {display: block;}}

#totop {position: fixed; right: 16px; bottom: 13px; font-size: 16px; border-radius: 4px; background-color: rgba(0, 0, 0, 0.35); padding: 8px; font-family: Arial, Helvetica, sans-serif; border: 2px solid #888;}
#totop img {width: 20px; height: 12px;} #totop:hover {-webkit-transform: scale(1.1);}
@media (min-width: 481px) {#totop {-webkit-transition: .15s;}}

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

/*COLORS*/

body {color: #333;} body {background-color: #FFF;} #headertext {color: inherit;}
#phone, #phone a {color: #222;} .bodyhead {color: #007DCE;} .heading {color: #000;}

.navheader, .menu, #ready {background-color: #007DCE;} .menu a, #ready {color: #FFF;}
.menu a:hover {background-color: #5caef1;} .menu a.selected, .menu a.selected:hover {background-color: #06549C;}

#ready div a {color: #000; background-color: #FFDF2E;} #ready a:before {border: #FFDF2E solid 6px;}
#bottomarea {background-color: #111;} #bottomarea, #bottomarea a {color: #FFF;}