html, body {margin: 0; padding: 0;} body {font-family: "Poppins", 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: .13em; 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 table td {border: 1px solid red} #headertext {border: 1px solid orange} #headertext h1 {border: 1px solid #666} #social {border: 1px solid black}*/

#headerback, #header {position: relative; margin: 0 auto; text-align: center; padding: 0; top: 0;} #headerback {position: relative; z-index: 2; width: 100%; max-width: 1800px;}
#header {max-width: 2200px;}
#header table {position: relative; margin: auto; text-align: center; padding: 5px 0; table-layout: fixed; width: 100%; height: 100%;}
#header table td {vertical-align: middle;}

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

#logo, #logo img, #phone {width: 180px;} #logo img {height: 98px;}
#headertext, #headertext h1 {text-align: center; margin: 0 auto;}
#headertext h1 {font-style: italic; font-weight: 400 !important; line-height: 1.35; padding: 0 10px 4px 10px;} #headertext h1 span {display: block;}

#logo {text-align: left;} 
#phone {font-size: 22px; font-weight: 500; text-align: right; white-space: nowrap;} #phone a {text-decoration: none;}
#phone a {display: block;} #phone span {font-size: 20px;}

@media (min-width: 1001px) {#headertext h1 {font-size: 22px;}}
@media (max-width: 1000px) {#headertext h1 {font-size: 18px;}}
@media (max-width: 800px) {
#header table {table-layout: auto;} #logo, #phone {width: 50%;}
#headertext, #headertext h1 {visibility: hidden; height: 0; width: 0; padding: 0; margin: 0;}
}
@media (min-width: 386px) {#header {padding: 5px 0;} #logo {padding: 0 0 0 10px;} #phone {padding: 0 12px 3px 10px;}}
@media (max-width: 385px) {
#header table td {display: block;} #logo img {margin-top: 10px;}
#logo, #phone {width: auto; text-align: center;} #phone {padding: 12px 0 6px 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;}*/

a, .ham {-webkit-tap-highlight-color: transparent);} #navcheck {display: none;}

.menu a {display: block; position: relative; text-decoration: none !important; cursor: pointer; font-size: 20px; line-height: 1.3; font-weight: 400; vertical-align: middle; white-space: nowrap;}
.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: 846px) {
.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: 1275px) and (min-width: 846px) {.menu a {height: 48px; padding: 7px 20px; font-size: 19px;} .menu span {display: block;}}
@media (max-width: 950px) and (min-width: 846px) {.menu a {padding: 7px 15px 8px 15px; font-size: 18px;}}

@media (max-width: 845px) {
.menu {position: relative; text-align: center; width: 100%; margin-top: 0; visibility: hidden; transition: .5s !important; padding-top: 0; height: auto;} .menu a {font-size: 22px;}
.menu div {vertical-align: middle; text-align: center; height: 0; transition: .2s; border-bottom: 0;}
.menu a {width: 100%; padding: 0; text-transform: uppercase; height: 100%; text-align: center; font-size: 0; transition: .2s; display: table; opacity: 0;}
.menu a li {display: table-cell; vertical-align: middle;}

#navcheck:checked ~ .menu {visibility: visible;} #navcheck:checked ~ .menu div {height: 60px;}
#navcheck:checked ~ .menu a {font-size: 22px; 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: 350px) {.menu a {text-transform: none;}} @media (max-width: 315px) {#navcheck:checked ~ .menu a {font-size: 21px;}}

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

/*Big Pic*/

#toppic {position: relative; height: calc(90px + 29vw); max-height: 450px; overflow: hidden; display: flex; align-items: center; background-color: #5880AB;}
#toppic img {width: 500px; height: 300px; width: 100vw; height: auto;}

.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: 0 auto; font-size: 80px; color: #FFF;}
.caption h1 {font-size: 1.1em; line-height: 1.15; text-transform: uppercase; font-weight: 600 !important; text-shadow: 1px 1px 2px #000;}

@media (min-width: 1700px) {#toppic {max-height: 550px;}} @media (min-width: 1450px) {#toppic img {margin-top: 1%;}}
@media (min-width: 1130px) {.caption h1 {padding: 0 50px;}} @media (max-width: 1030px) {.caption h1 {font-size: 8.3vw;}}
@media (min-width: 860px) and (max-width: 1451px) {#toppic img {margin-top: 5%;}}
@media (min-width: 501px) {#toppic img {filter: brightness(70%);}}
@media (min-width: 401px) {.caption h1 span {display: block;}} @media (max-width: 400px) {.caption h1 {font-size: 10vw}}

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

/*BODY AREA*/

.bodyarea {position: relative; padding: 30px 0 25px 0; margin: auto; width: 88%; max-width: 1400px;} /*92%, 1600px*/
.bodyarea, h2 {font-size: 20px; line-height: 1.7; font-weight: 400 !important;} /*22px, 1.6*/
.bodyhead {padding: 10px 0 5px 0; font-weight: 500 !important; font-size: 1.7em; line-height: 1.25; 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) {.bodyhead {font-size: 1.5em;}}

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

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

/*Service List on home page*/
#svclist {padding: 20px 15px; margin: 0 auto 30px auto; width: 100%; max-width: 750px; background-color: #1A82BE; border-radius: 5px;}
#svclist td {width: 50%; vertical-align: top;}
#svclist ul {margin: 0 auto;} #svclist li {margin: 0 0 17px -12px; text-align: left; line-height: 1.5; color: #FFF;}
#svclist li:last-child {margin-bottom: 0;}
@media (min-width: 441px) {#svclist td:nth-child(1) ul {padding-right: 20px;}}
@media (max-width: 440px) {#svclist td {display: block; width: auto !important;} #svclist td:nth-child(2) {padding-top: 15px;}}

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

/*Why Us on Home page*/
#whyus {padding: 20px 15px; margin: 30px auto 40px auto; max-width: 350px; background-color: #DDD; border-radius: 5px;}
#whyus td {width: 50%; vertical-align: top;} #whyus ul {margin: 0 auto;} 
#whyus li {margin: 0 0 23px -12px; text-align: left; line-height: 1.35; color: #333;} #whyus li:last-child {margin-bottom: 0;}
@media (min-width: 576px) {#whyus td:nth-child(1) ul {padding-right: 20px;}}
@media (max-width: 575px) {#whyus td {display: block; width: auto !important;} #whyus td:nth-child(2) {padding-top: 15px;}}
@media (min-width: 326px) {#whyus u {white-space: nowrap;}}

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

/*Page Pics*/
.pagepic img {width: 100%; display: block; border-radius: 3px;} .picwide {max-width: 500px;}
.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;}}

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

/*Photo Albums*/
#album {margin: 40px auto 20px auto !important; max-width: 1200px;} #album div {border-radius: 5px;}

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

/*Reviews on Home Page*/

#rvws {width: 100%; margin: 30px auto 40px auto;}
.rvw {vertical-align: top; text-align: center; font-size: 20px; padding: 30px; border-radius: 8px; background-color: #1A82BE;}
.rvwimg {display: inline-block; position: relative; width: 100%; max-width: 265px; background-image: url("images/5-stars.png"); background-repeat: no-repeat; background-size: 100%; background-position: center center; margin-bottom: 20px;}
.rvwimg div {padding-top: 48px;} .rvwtxt {color: #FFF; font-size: 1.1em; line-height: 1.7; margin-bottom: 20px;}
.rvw a {color: #FFF; font-size: .7em; text-decoration: underline;}
.rvw span {display: block; line-height: 1.5; color: #DDD; font-size: .8em;}

@media (max-width: 1180px) {#rvws {margin: 20px auto 30px auto;} .rvw {padding: 20px;} .rvwtxt {font-size: 1.05em;}}
@media (min-width: 841px) {#rvws {display: table;} .rvw {display: table-cell; width: 31%;}}
@media (max-width: 840px) {#rvws {margin: 0 auto 20px auto;} .rvw {display: block; width: auto;}}
@media (max-width: 480px) {.rvw {padding: 20px;}}
@media (max-width: 380px) {.rvwtxt {font-size: 1em;}} @media (max-width: 330px) {.rvwimg {margin-bottom: 10px;}}

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

/*Ready*/

#ready {clear: both; text-align: center; padding: 40px 20px; font-size: 1.8em; line-height: 1.4; font-weight: 500;} #ready div {margin-top: 25px;}
#ready div {display: block;}
#ready a {display: inline-block; border-radius: 5px; font-weight: 500; color: #FFF; padding: 10px 13px 8px 13px; font-size: 30px; text-decoration: none !important;} #ready a:hover {font-style: italic;}

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

/*BOTTOM AREA*/

#disclaimer {font-family: Arial, Helvetica, sans-serif; margin: 5px 20px 20px 20px; font-size: 11px; line-height: 1.4; color: #888;}

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

#bottomarea {font-size: 14px; line-height: 1.8; padding: 15px 0 18px 0; text-align: center; clear: both;}
.web a {font-style: italic; text-decoration: none;} .web a:hover {text-decoration: underline;}
@media (max-width: 480px) {.web a {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: .2s;}}

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

/*COLORS*/

body {color: #444;} body, #headerback, #header, .bodyarea {background-color: #FFF;}
#phone, #phone a {color: #191919;} #headertext, .bodyhead {color: #1A82BE;} .heading {color: #000;}

.navheader, .menu, #ready {background-color: #1A82BE;} .menu a, #ready {color: #FFF;}
.menu a:hover {background-color: #47AEE1;} .menu a.selected, .menu a.selected:hover {background-color: #01588B;}
#navcheck:checked ~ .menu div {border-top: 1px solid #7BC5EA;}

#bottomarea {background-color: #191919;} #bottomarea, #bottomarea a {color: #FFF;} .web a {color: #FFF !important;}