html, body {margin: 0; padding: 0;} html {font-size: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%;}

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

body {font-family: "Nunito", Tahoma, Arial, Helvetica, sans-serif; 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 {color: #2E3FE1;} a {text-decoration: underline; text-decoration-thickness: 1px; text-decoration-style: dotted; text-underline-offset: .13em; 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} #logo, #logo img, #logo a {border: 1px solid red}
#phonesoc {border: 2px solid green} #phone {border: 2px solid orange}*/

@media (min-width: 1096px) {header, #phonesoc {position: fixed;} #phonesoc {margin-top: 18px;}}
@media (max-width: 1095px) {#phonesoc {position: absolute; margin-top: 12px;}}

header {display: table; width: 100%; margin: auto; z-index: 2; box-shadow: 0 3px 5px -5px #000; text-align: center; box-sizing: border-box;}
#logo, #logo a {display: table-cell; vertical-align: middle;}
#phonesoc, #phone a, #logo img {display: block;} #phonesoc {right: 0;} #phone a {line-height: 1.7;}

@media (min-width: 1901px) {header {padding: 0 15px;} #phonesoc {margin-right: 15px;}}
@media (min-width: 1501px) and (max-width: 1900px) {header {padding: 0 3%;} #phonesoc {margin-right: 3%;}}
@media (max-width: 1500px) and (min-width: 1096px) {header {padding: 0 1%;} #phonesoc {margin-right: 1%;}}

#phonesoc {top: 10px; right: 0; z-index: 2;}
#phone {font-size: 20px; line-height: 1; text-align: right; display: table-cell; vertical-align: middle;}
#phone, #phone a {font-weight: 600;}

@media (min-width: 1096px) {
#headerback, header {height: 122px;} #logo, #logo img {width: 120px; height: 103px;} #phone {margin-top: 40px;}
}
@media (max-width: 1095px) {
#headerback, header {height: 110px;} header {padding: 0 10px;} #logo img {width: 105px; heidght: 90px;}
#phonesoc {margin-right: 10px;} #phone {margin-top: 35px;}
}
@media (max-width: 380px) {#phonesoc {margin: 46px 17px 0 0;} #phone a {font-size: 18px; line-height: 1.4;}}

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

/*MENU*/

/*#navback {border: 2px solid yellow} nav {border: 1px solid magenta;} nav div {border: 1px solid blue;} nav a {border: 1px solid red !important;}*/

#navcheck {display: none;}
nav a {display: block; position: relative; text-decoration:none !important; cursor: pointer; line-height: 1.35; font-weight: 400; padding: 0 11px 3px 11px; vertical-align: middle;}
nav a.selected {cursor: text; -webkit-user-select: none; -webkit-touch-callout: none;}

@media (min-width: 1676px) {#navback {width: 1200px; top: 39px;} nav div {margin: 0 1px;} nav a {height: 35px; font-size: 17px;}}
@media (max-width: 1675px) and (min-width: 1096px) {#navback {width: 700px; top: 13px;} nav div {margin: 3px 1px;} nav a {height: 35px; font-size: 18px;}}
@media (min-width: 1096px) {
.ham {display: none;} #navback {position: fixed; display: table; text-align: center; z-index: 2; left: 50%; transform: translateX(-50%);}
nav {display: inline-block; position: relative;} nav div {display:inline-block; vertical-align: middle; white-space:nowrap;}
nav a {display: table-cell; text-align: center; padding-top: 3px; border-radius:5px;}
}
@media (max-width: 1095px) and (min-width: 501px),(max-width: 410px) {nav div:nth-child(3) span {display: block;}}
@media (max-width: 1095px) {
nav {position: relative; text-align: center; transition: .15s; height: 0; box-shadow: 0 8px 10px -9px #000; z-index: -1;}
nav div {width: 33.33%; margin: -2.4px -2.8px; text-align: center; left: 0; right: 0; height: 0; opacity: 0; transition: opacity .2s; display: inline-block;}
nav a {width: 1%; text-align: center; font-size: 0; height: 0; opacity: 0; border: 1px solid transparent; white-space: nowrap; padding: 0; display: table-cell; height: 0; vertical-align: middle; transition: height .2s, opacity .2s, font-size .15s;}

#navcheck:checked ~ nav {height: 100%; z-index: 1;} #navcheck:checked ~ nav div {opacity: 1; height: 75px;}
#navcheck:checked ~ nav a {font-size: 21px; border: 1px solid #FFF; opacity: 1; height: inherit;}

.ham, .ham * {-webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation;}
.ham {position: absolute; z-index: 6; height: 35px; width: 45px; top: 28px; left: 0; right: 0; margin: auto; text-align: center; padding: 10px;}
.ham:hover {cursor: pointer;}
.ham div {top: 24px; left: 10px; -webkit-transition: -webkit-transform 0.35s ease-out;}
.ham div, .ham div:before, .ham div:after {position: absolute; display: block; content: ""; height: 3.5px; width: 38px; opacity: 1; background: #B51639; border-radius: 1px;}
.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 {-webkit-transform: rotateZ(37deg); top: 0;}
#navcheck:checked ~ .ham div:after {-webkit-transform: rotateZ(-37deg); top: 0;}
}

@media (max-width: 1095px) and (min-width: 501px) {
nav div:first-child {width: 100%;} #navcheck:checked ~ nav div:first-child {height: 62px;}
}
@media (max-width: 710px) {nav div {width: 50%;}}
@media (max-width: 500px) {nav div {width: 100%; display: block; margin: 0;} #navcheck:checked ~ nav div {height: 65px;}}
@media (max-width: 410px) {#navcheck:checked ~ nav div:nth-child(3) {height: 75px;} .ham {right: 30px;}}
@media (max-width: 380px) {.ham {left: auto; right: 2px; margin: auto; text-align: center; top: 0;}}

@media (min-width: 1096px) {
nav a {color: #000 !important;} nav a:hover {color: #FFF !important; background-color: #006FB6;}
nav a.selected, nav a.selected:hover {color: #006FB6 !important;} nav a.selected:hover {background: none;}
}
@media (max-width: 1095px) {
nav a {color: #FFF !important; background-color: #006FB6;} nav a:hover {background-color: #028fea;}
nav a.selected, nav a.selected:hover {background-color: #005083; color: #DDD !important;}
}
@media (max-width: 1095px) {nav {background-color: #006FB6;}}

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

/*TOP IMAGES*/

#toppic {position: relative; overflow: hidden; z-index: 0; background-color: #BBB;}
#toppic img {width: 500px; height: 300px; width: 100%; height: 40vw; max-height: 450px; object-fit: cover; object-position: 50% 50%; display: block;}
.auto {background-color: #456078;} .win {background-color: #EEB993;}

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

/*BODY AREA*/

.bodyarea {margin: auto; padding: 30px 0 35px 0; width: 90%; max-width: 1600px;}
.bodyarea, h2 {font-size: 22px !important; line-height: 1.6; font-weight: 400 !important;}
.bodyhead {font-size: 32px; line-height: 1.25; font-weight: 600; text-align: center;}

h1, h2, h3 {margin: 0 !important;}

@media (max-width: 480px) {.bodyarea, h2 {font-size: 20px !important;} .bodyarea {padding: 30px 0 25px 0;} .bodyhead {font-size: 29px;}}
@media (max-width: 360px) {.bodyarea, h2 {font-size: 19px !important;} .bodyhead {font-size: 26px;}}

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

ul {margin: -10px 0 0 -15px;} ul li:not(ul li:last-child) {padding-bottom: 5px;} ul span {font-weight: 600;}

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

/*Page Pics*/

.pagepic img {width: 100%; display: block;} .picwide {max-width: 500px;}
.picleft {float: left; margin: 10px 25px 10px 0;} .picright {float: right; margin: 10px 0 10px 25px;}
@media (max-width: 930px) {.picwide {max-width: 420px;}}
@media (max-width: 750px) {.picleft, .picright {text-align: center; float: none; margin: 25px auto 15px auto;} .picwide {max-width: 500px;}}

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

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

/*BOTTOM AREA*/

footer {text-align: center; padding: 20px 15px 15px 15px; font-size: 14px; line-height: 1.6; clear: both;}
footer a, footer a:hover {text-decoration: none !important;}
#disclaimer, #deposit {font-size: .95em; color: #FFC;} #deposit {margin-top: 12px; text-transform: uppercase;}
#web {padding-top: 5px;} #web a:hover {text-decoration: underline !important;}

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

.tb, .tb a {color: #FFF !important;} #fb {width: 32px; height: 32px;} #lic {display: none;}

#phbtm a {font-size: 18px; font-weight: 600;} #phbtm span {margin: 0 5px;}
@media (max-width: 490px) {#lic span, #web a {display: block;}}
@media (max-width: 430px) {#phbtm span {display: none;} #phbtm a {display: block;}}

#totop {position: fixed; right: 14px; bottom: 12px; z-index: 100; border: 2px solid rgba(155, 155, 155, 0.4); background-color: rgba(80, 80, 80, 0.4); border-radius: 4px; padding: 0; width: 26px; height: 27px;}
#totop a {display: grid; align-items: center; justify-content: center; justify-items: center; width: 26px; height: 100%; text-decoration: none; font-family: Arial, sans-serif; font-size: 24px; line-height: 1; color: #F5F5F5;}
#totop span {display: inline-block; -webkit-transform: rotate(270deg); transform: rotate(270deg); line-height: 1;}

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

/*Misc*/

/*headings for location pages*/
@media (max-width: 770px) and (min-width: 370px) {.bhwin span {display: block;}}
.bhloc {display: block; font-size: .8em; font-weight: 600;} #nav a, .pagepic img {border-radius: 4px;}
#formhead {border-radius: 4px 4px 0 0;} #formhead .fh1 {border-radius: 4px 4px 0 0;}
@media (max-width: 650px) {#formhead, #formhead .fh1 {border-radius: 0;}}

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

/*COLORS*/

body {color: #444;} a, a:visited, a:hover {color: #0058D0;}
#headerback, header {background-color: #D5D5D5;} body, .bodyarea, footer {background-color: #FFF;}
.heading {color: #000;} #trust, #trust .bodyarea {background-color: #EEE;}

#phone, #phone a, .bodyhead, #nav .selected, #nav .selected:hover, #trust h1 {color: #B51639;}
#nav a:hover, input[type=submit], #formhead .fh1, .submit {background-color: #006FB6;}
input[type=submit] {border: 1px solid #006FB6; color: #FFF;}
#lines li, #formhead .fh2 {background-color: #B51639;}
input[type=submit]:hover {background-color: #4eabff; border: 1px solid #4eabff;}
@media (max-width: 415px) {#phone, #phone a {color: #B51639;}}

footer {background-color: #222;} footer, footer a {color: #DDD;}