html, body {margin: 0; padding: 0;} body {font-family: 'Roboto', Arial, Helvetica, sans-serif; font-variant-ligatures: none !important;}

#width, #height {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;}
#height {left: 45px;} #width:after {content: "w";} #height:after {content: "h";}

a, a:visited, a:hover {outline: none;} a {cursor: pointer;} img {border: 0;} #phone a {white-space: nowrap;}
.phlink {color: inherit !important; text-decoration: none !important; white-space: nowrap;} .phlink:hover {cursor: text;} img {border: 0;}

*:hover {-webkit-tap-highlight-color: transparent;}

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

/*HEADER*/

/*#headtopback {border: 1px solid #0F0} #headtop {border: 1px solid #cyan} #headerback {border: 1px solid magenta} #header {border: 1px solid orange} #social {border: 1px solid yellow} #logo, #logo img {border: 1px solid red} #phone {border: 1px solid green} #logo a {border: 1px solid orange}*/

@media (min-width: 946px) {#headtop, #header {position: fixed;}}

#headtopback, #headtop {height: 40px;} #headtop, #header {display: table; width: 100%; margin: auto; z-index: 2;}
#header {border-bottom: 1px solid #CCC; box-shadow: 0 3px 5px -5px #000; -webkit-box-shadow: 0 3px 5px -5px #000; text-align: center; box-sizing: border-box;}
#logo {display: table-cell;}

@media (min-width: 1426px) {#headtop, #header {padding: 0 5%;} .navheader {right: 5%;}}
@media (max-width: 1425px) {#headtop, #header {padding: 0 1%;} .navheader {right: 1%;}}

#phone {display: table-cell; text-align: right; font-size: 20px; line-height: 1; vertical-align: middle; right: 0; top: 10px;}
#phone, #phone a {font-weight: 500;} #phone a {margin-left: 5px;} #phone span {font-size: .9em; font-weight: 400;}
#social {position: absolute; top: 7px;} #logo img {display: block;}
#social img {display: block; width: 26px; height: 26px; -webkit-transition: .3s;} #social img:hover {-webkit-transform: scale(1.15);}

@media (max-width: 600px) {#headtopback, #headtop {height: 45px;} #phone {font-size: 24px;}}
@media (min-width: 991px) {#logo img {width: 295px; height: 91px;}}
@media (max-width: 990px) {#logo img {width: 260px; height: 80px;}}
@media (max-width: 945px) {#logo img {width: 295px; height: 91px;}}
@media (max-width: 380px) {#logo img {width: 260px; height: 80px;}}
@media (min-width: 361px) {#headerback, #header {height: 112px;} #logo {vertical-align: middle;}}
@media (max-width: 360px) {
#headerback, #header {height: 150px;} #logo {vertical-align: bottom; padding-bottom: 12px;}
#logo img {text-align: center; margin: auto;}
}
@media (max-width: 350px) {#phone span {display: none;}}

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

/*MENU*/

/*.menu {border: 1px solid magenta;} .menu div {border: 1px solid blue;} .menu a {border: 1px solid red !important;} .menu a li {border: 1px solid green;}}*/

a, *:hover {-webkit-tap-highlight-color: transparent;} #navcheck {display: none;}

.menu a {display: block; position: relative; height: 42px; font-size: 15px; line-height: 1.3; text-decoration:none !important; cursor: pointer; padding: 0 11px 3px 11px; vertical-align: middle; -webkit-transition: 0.3s;}
.menu a.selected {cursor: text; -webkit-user-select: none; -webkit-touch-callout: none;}
.menu a li {list-style-type:none; margin: 0 !important; padding: 0 !important;}
.navheader {top: 43px; z-index: 2;}

@media (min-width: 1761px) {.navheader {top: 71px;} .menu {max-width: 100%;}}
@media (max-width: 1760px) and (min-width: 946px) {.navheader {top: 45px;} .menu {max-width: 630px;}}
@media (min-width: 946px) {
.hamburger {display: none;} .navheader {position: fixed; text-align: right;} .menu {display:inline-block;}
.menu div {display:inline-block; vertical-align: middle; white-space: nowrap; margin: 2px 0;}
.menu a {display: table-cell; text-align: center; padding-top: 2px; border-radius: 3px;}
}
 
@media (max-width: 945px) {
.menu {position: relative; text-align: left; -webkit-transition: .15s; height: 0; box-shadow: 0 8px 10px -9px #000; box-sizing: border-box; z-index: -1;}
.menu div {width: 33.33%; margin: 1px -4.9px 1px 0; height: 0; opacity: 0; -webkit-transition: height .3s, opacity .6s; display: inline-block;}
.menu a {text-align: center; font-size: 0; opacity: 0; height: 0; border: 1px solid transparent; white-space: nowrap;}
.menu li {width: 1%; display: table-cell; height: 80px; vertical-align: middle;}

#navcheck:checked ~ .menu {height: 100%; z-index: 1;} #navcheck:checked ~ .menu div {opacity: 1; height: 80px;}
#navcheck:checked ~ .menu a {font-size: 22px; border: 2px solid #bcdaf2; border-top: 0; opacity: 1; height: auto;}

.hamburger {position: absolute; z-index: 6; height: 35px; width: 45px; top: 48px; right: 5px; margin: auto; text-align: center; padding: 10px;}
.hamburger:hover {cursor: pointer;} .hamburger > div {top: 25px; left: 10px;}
.hamburger > div, .hamburger > div::before, .hamburger > div::after {display: block; content: ""; position: absolute; height: 4px; width: 44px; opacity: 1; background: #194e77; -webkit-transition: 0.15s ease-in-out; -webkit-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;}
#navcheck:checked ~ .hamburger > div {width: 0; background: rgba(18, 18, 18, 0);}
#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;}
}

@media (max-width: 945px) and (min-width: 561px) {.menu div:last-child {width: 66.5%;}}
@media (max-width: 640px) {
#navcheck:checked ~ .menu div {height: 70px;} .menu li {height: 70px;} #navcheck:checked ~ .menu a {font-size: 20px;}}
@media (max-width: 560px) and (min-width: 361px) {.menu div {width: 50%;} .menu div:last-child {width: 100%;}}

@media (min-width: 361px) {.menu span {display: block;}}
@media (max-width: 360px) {
.menu a, .menu li {height: inherit !important;}
.menu div {width: 100%; height: calc(7.5vh - 3px) !important;}
.menu a {font-size: calc(1.7vw + 1.5vh + 1.3vmin) !important; white-space: nowrap;}
#navcheck:checked ~ .hamburger > div::before, #navcheck:checked ~ .hamburger > div::after {background: #FFF;}
#navcheck:checked ~ .hamburger {top: 5px; background-color: black}
#navcheck:checked ~ .menu {height: 100vh; margin-top: -195px;}
#navcheck:checked ~ .menu a {border: 0; border-bottom: 2px solid #bcdaf2;}
}

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

/*BODY AREA*/

.bodyarea {margin: auto; padding: 30px 0 40px 0; width: 90%; max-width: 1800px;}
.bodyarea, .bodyarea h2 {font-size: 22px !important; line-height: 1.6; font-weight: 400 !important;}
.bodyhead {font-size: 38px; line-height: 1.2; font-weight: 700; text-align: center; margin-bottom: 20px !important;}

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

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

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

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

/*Page Pics*/

.pagepic img {width: 100%; display: block; border-radius: 3px;}
.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 30px 20px 0;} .picright {float: right; margin: 10px 0 20px 30px;}
@media (max-width: 900px) and (min-width: 751px) {.picwide {max-width: 430px;}}
@media (max-width: 750px) {.picleft, .picright {text-align: center; float: none; margin: 35px auto;} .pictall {max-width: 400px;}}

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

/*Ready*/

#ready {clear: both; text-align: center; padding: 40px 20px; font-size: 2em; line-height: 1.4; font-weight: 700;}

.border {position:absolute; width:0; height:0;}
.buttonBox {position: relative; display: block; text-align: center; margin: auto; width: 150px; padding: 4px;}
button {width:100%; height:50px; background-color: #2F73A7; border:none; outline:none; cursor: pointer; border-radius: 4px;}
button a {font-size: 18px; text-decoration: none !important; color: #FFF !important; display: table-cell; height: 48px; width: 1%; vertical-align: middle;}

.border:nth-of-type(1){top:0; left:0; border-top:1px solid #FFF;} .border:nth-of-type(2){top:0; right:0; border-right:1px solid #FFF;}
.border:nth-of-type(3){bottom:0; right:0; border-bottom:1px solid #FFF;} .border:nth-of-type(4){bottom:0; left:0; border-left:1px solid #FFF;}
.buttonBox:hover .border:nth-of-type(1), .buttonBox:hover .border:nth-of-type(3){width:100%;}
.buttonBox:hover .border:nth-of-type(2), .buttonBox:hover .border:nth-of-type(4){height:100%;}

.hvr-rectangle-out {display: inline-block; vertical-align: middle; box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; -webkit-transform: perspective(1px);}
.hvr-rectangle-out:before {content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #3D99D3; -webkit-transform: scale(0);}
.hvr-rectangle-out:hover:before, .hvr-rectangle-out:focus:before, .hvr-rectangle-out:active:before {-webkit-transform: scale(1); border-radius: 4px;}
@media (min-width: 481px) {.border {transition:.5s ease-in-out;}
.hvr-rectangle-out {-webkit-transition: color 0.3s;} .hvr-rectangle-out:before {-webkit-transition: transform 0.3s ease-out;}}

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

/*BOTTOM AREA*/

#bottomarea {text-align: center; padding: 20px 15px 15px 15px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 1.6; clear: both;}
#bottomarea a, #bottomarea a:hover {text-decoration: none !important;}
#web {padding-top: 5px;} #web a:hover {text-decoration: underline !important;}
@media (max-width: 430px) {#web a {display: block;}}
#serving {font-size: 11px; color: #888 !important;} #serving a, #serving span {white-space: nowrap;}

#totop {position: fixed; right: 16px; bottom: 13px; 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 {transition: .3s;}}

.nolink, #serving a {color: inherit !important; text-decoration: none; cursor: text;}

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

/*COLORS*/

body {color: #111;} a {color: #2F73A7;} #headtop {background-color: #FE0000;} #header {background-color: #FFF}
#phone, #phone a {color: #FF0;} #phone span, #ready {color: #FFF;} .bodyhead {color: #FE0000;} .heading, .valhead {color: #2F73A7;}

.menu a {color: #FFF; background-color: #2F73A7;} .menu a:hover {background-color: #3D99D3;}
.menu a.selected, .menu a.selected:hover {background-color: #194E77}
@media (max-width: 945px) {.menu {background-color: #2F73A7;}}

#ready {background-color: #FE0000;}
#bottomarea {background-color: #000;} #bottomarea, #bottomarea a {color: #DDD;} .tb, .tb a {color: #FED700 !important;}