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

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


body {font-family: 'OpenSans', Arial, Verdana, Geneva; font-variant-ligatures: none;}

#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*/

/*#headtopback {background-color: red !important; border: 1px solid #666} #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} #headtopback2 {border: 2px solid black;} #headerback2 {border: 2px solid blue;}*/

#headtopback, #headtopback2, #headtop {height: 40px;}
#headtop, #header, #headtopback2, #headerback2 {position: fixed; display: table; width: 100%; margin: auto; z-index: 2;}
#header {text-align: center; box-sizing: border-box;}
.logo {width: 240px;} .logo, .logo a {display: table-cell; vertical-align: middle;}

#headtop, #header {width: 100%; padding: 0 10px; max-width: 1200px; margin: auto; text-align: center; left: 0; right: 0;}

#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: 600;}
#phone a {margin-left: 5px;} #phone span {font-size: .9em; font-weight: 400;}
#social {position: absolute; top: 6px;}
#social img {width: 26px; height: 26px; transition: .3s; margin-right: 10px;} #social img:hover {-webkit-transform: scale(1.15);}
.logo img {display: block;}
.findus {position: absolute; top: 1px; margin-left: 70px; white-space: nowrap;} .findus, .findus a {font-size: 18px; color: #FFF;}

@media (min-width: 846px) {.logo img {width: 280px; height: 42px;}}
@media (max-width: 845px) {.logo img {width: 240px; height: 36px;}}

@media (max-width: 805px) {#header {padding-top: 5px; height: 80px;}}
@media (max-width: 600px) {#headtopback, #headtop {height: 45px;} #phone {font-size: 24px;} #social {top: 8.5px;}}
@media (min-width: 526px) {.wifi1 {width: 150px; text-align: right;} .wifi1 img {width: 84px; height: 64px;}}
@media (max-width: 525px) {
.wifi1 {text-align: left; padding-left: 15px;} .wifi1 img {width: 64px; height: 49px;}
#headerback, #headerback2, #header {height: 80px;}
}
@media (min-width: 806px) {#headerback, #headerback2, #header {height: 100px;}}
@media (max-width: 360px) {.logo img {width: 220px; height: 33px;}}
@media (max-width: 490px) {#phone span {display: none;}}
@media (min-width: 436px) {.wifi2 {display: none;}}
@media (max-width: 435px) {.findus, .wifi1 {display: none;}
.wifi2 {position: absolute; display: block; white-space: nowrap; text-align: left; top: 2px; vertical-align: middle !important; color: #FFF; margin-left: 77px; font-size: 18px; line-height: 1.25;}}
@media (max-width: 375px) {#headtop, #header {padding: 5px;} #phone {font-size: 20px;} .wifi2 {margin-left: 80px;}}
@media (max-width: 350px) {.wifi2 span {display: block;} .wifi2 {top: 0; margin-top: -8px; font-size: 17px;}}
@media (max-width: 320px) {.logo img {width: 200px; height: 30px;}}

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

/*MENU*/

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

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

@media (max-width: 1045px) and (min-width: 806px) {
.navheader {padding-top: 0 !important;} nav {max-width: 325px;}
#headerback, #headerback2, #header {height: 115px;}
}
@media (min-width: 806px) {#headerback2 {box-shadow: 0 3px 5px -5px #000;} nav div {margin: 3px 1px;}}
@media (max-width: 805px) and (min-width: 526px) {
.navheader {padding: 0 0 12px 0; width: 100% !important; position: absolute; bottom: -61px; left: 0; right: 0; box-shadow: 0 3px 5px -5px #000;} #headerback, #headerback2 {height: 141px;} 
}
@media (max-width: 805px) {nav div {margin: 0px 1px;}}

@media (min-width: 571px) {nav a {font-size: 18px;}}
@media (max-width: 570px) {nav a {font-size: 17px;}}
@media (min-width: 526px) {
.ham {display: none;} .navheader {text-align: center; vertical-align: middle;}
nav {display:inline-block; vertical-align: middle;} nav a span {display: block;}
nav div {display:inline-block; vertical-align: middle; white-space: nowrap;}
}
@media (max-width: 525px) {
.navheader {display: inline; padding: 0;}
nav {position: absolute; text-align: center; width: 100%; margin: auto; left: 0; right: 0; top: 100%; box-shadow: 0 8px 10px -9px #000; opacity: 0; -webkit-transition: opacity 0.2s ease; transition: opacity 0.2s ease; -webkit-transition: -webkit-transform opacity 0.2s ease-out; -webkit-transition: transform opacity 0.2s ease-out;}
nav div {vertical-align: middle; text-align: center; width: 50%; margin: -.5px -2.5px; height: calc(3.5vh + 40px); display: inline-block;}
nav div:last-child {width: 100%;} nav a {font-size: 20px;}
nav a {width: 100%; padding: 0; text-transform: uppercase; height: 100%; display: none; white-space: nowrap; -webkit-user-select: none; user-select: none; font-size: 22px;}
nav a span {display: table-cell; vertical-align: middle;}
#navcheck:checked ~ nav {opacity: 1;} #navcheck:checked ~ nav a {display: table;}

.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: 13px; right: 7px; padding: 10px;}
.ham:hover {cursor: pointer;}
.ham > div {top: 25px; left: 10px;}

.ham > div, .ham > div::before, .ham > div::after {display: block; content: ""; position: absolute; height: 4px; width: 44px; opacity: 1; background: #444; -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;}

.ham > div::before {top: -11px;} .ham > div::after {top: 11px;}

#navcheck:checked ~ .ham > div {width: 0; background: none;}
#navcheck:checked ~ .ham > div::before {-webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); top: 0;}
#navcheck:checked ~ .ham > div::after {-webkit-transform: rotateZ(-45deg); transform: rotateZ(-45deg); top: 0;}
}

@media (max-width: 330px) {nav a {text-transform: none;}}


/*slide open effect*/
@media (min-width: 526px) {
nav a {position: relative; display: inline-block; outline: none; overflow: hidden; /*border: 1px solid #555;*/ border: 1px solid transparent; padding: 0; -webkit-backface-visibility: hidden;}
nav a span {-webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; padding: 10px !important;}

nav a::before {position: absolute; padding-top: 10px; left: 0; z-index: -1; width: 100%; height: 100%; background: #FFF47D; color: #CB0000; content: attr(data-hover); -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; -webkit-transform: translateX(-25%); transform:translateZ(0); font-weight: 600;}

nav a:not(.selected):hover span, nav a:not(.selected):focus span {-webkit-transform: translateX(100%); -moz-transform: translateX(100%); transform: translateX(100%);}
nav a:not(.selected):hover::before, nav a:not(.selected):focus::before {-webkit-transform: translateX(0%); -moz-transform: translateX(0%); transform: translateX(0%);}
nav a:not(.selected):hover {border: 1px solid #555;}
}


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

/*BODY AREA*/

.bodyarea {margin: auto; padding: 40px 0 35px 0; width: 90%;}

.bodyarea, h2 {font-size: 20px !important; line-height: 1.7 !important; font-weight: 400 !important;}
.bodyhead {font-size: 2em !important; line-height: 1.2; font-weight: 600 !important; text-align: center;}
.heading, .heading2 {font-weight: 600; line-height: 1.4;}
.heading {font-size: 1.55em;} .heading2 {font-size: 1.4em;}

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

@media (max-width: 480px) {.bodyhead {font-size: 1.9em !important;} .heading {font-size: 1.45em;} .heading2 {font-size: 1.3em;}}
@media (max-width: 380px) {.bodyhead {font-size: 1.7em !important;}}

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

/* Slanted Divs */

.slantstyle {position: relative; padding-bottom: 0; z-index: 1;}

.slanted1 {padding-bottom: 50px; width: 100%; position: relative; background-color: #fcf8be; overflow: visible; z-index: 0;}
.slanted1:before, .slanted1:after {content: ''; width: 100%; height: 100%; position: absolute; background: inherit; z-index: -3; top: 0; transform-origin: right top; transform: skewY(-3deg);}
.slanted1:after {bottom: 0; transform-origin: right bottom; transform: skewY(5deg); z-index: -3;}

.services {padding-bottom: 50px; width: 100%; position: relative; background-color: #444; overflow: visible; z-index: 0;}
.services:before, .services:after {content: ''; width: 100%; height: 100%; position: absolute; background: inherit; z-index: -3; top: 0; transform-origin: right top; transform: skewY(-3deg);}
.services:after {bottom: 0; transform-origin: right bottom; transform: skewY(2deg); z-index: -3;}

.difference {position: relative; padding: 40px 0 20px 0; background: #CB0000; overflow: visible; z-index: 1;}
.difference:before, .difference:after {content: ''; width: 100%; height: 100%; position: absolute; background: inherit; z-index: -1; top: 0; transform-origin: left top; transform: skewY(-2deg);}
.difference:after {bottom: 0; transform-origin: left bottom; transform: skewY(2deg);}

.reviews {position: relative; background: #EEE; overflow: visible; z-index: 0;}
.reviews:after {position: absolute; content: ''; width: 100%; height: 100%; background: inherit; bottom: 0; transform-origin: right bottom; transform: skewY(2deg); z-index: -1;} /*no "before" if bottom is flat*/

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

/*Reviews*/

.reviews {padding-top: 20px; background-color: #CCC;}
#rvws {width: 100%; margin: 80px auto 40px auto; }
.rvw {vertical-align: top; text-align: center; font-size: 20px; padding: 30px; background-color: #FFF; border-radius: 8px;}
.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: #CB0000; font-size: 1.1em; line-height: 1.7; margin-bottom: 20px;}
.rvw span {display: block; line-height: 1.5; color: #666; font-size: .8em;}

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


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

/*Page Pics*/

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

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

/*BOTTOM INFO & MAP*/

#btminfo, #btmmap {width: auto; text-align: center;} #btminfo {padding: 15px 10px 20px 10px; background-color: #CB0000; color: #FFF;}
#btminfo div {margin: 10px auto; line-height: 1.7;} .btmco, .btmph {font-size: 1.6em; font-weight: 600;} .btmco {color: #FFF47D;}
#btmmap iframe {width: 100%; height: 260px; display: block;} .btmbull {display: inline-block; padding: 0 5px 0 10px;}
@media (max-width: 660px) {.btmhrsnext {display: block;} .btmbull {display: none;}}
@media (max-width: 455px) {.btmaddr span {display: block;}}

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

/*BOTTOM AREA*/

footer {text-align: center; padding: 20px 15px 20px 15px; font-size: 15px; line-height: 1.6;}
footer a, footer a:hover {text-decoration: none !important;}
#web a:hover {text-decoration: underline !important;}

@media (max-width: 470px) {.serving span, #web a {display: block;}}

#totop {position: fixed; right: 14px; bottom: 12px; z-index: 100; width: 28px; height: 28px; display: grid; align-items: center; justify-content: center; text-decoration: none; font-family: Arial, sans-serif; font-size: 24px; color: #999 !important; line-height: 0; transform: rotate(270deg);}

.serving {font-size: 11px; line-height: 1.4; color: #AAA !important}
.nolink, .serving a {color: inherit !important; text-decoration: none; cursor: text;}
.serving a {white-space: nowrap;}

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

/*SEASONAL BLING*/

/*Top Pic - Bottom Pic*/
.seastoppicbtm {position: absolute; z-index: 1; background-image: url(images/seasonal/winter-toppic.png); background-repeat: no-repeat; background-position: center right; bottom: 5px; width: 170px; height: 114px; background-size: 170px 114px; padding: 8px 0; /*background-color: rgba(1,99,153, 0.7); border-radius: ;*/}
.bgimg .btn {display: none !important;}

@media (min-width: 1301px) {.seastoppicbtm {left: 35px;}}
@media (max-width: 1300px) and (min-width: 801px) {.seastoppicbtm {top: 30%; right: 40px;}}
@media (max-width: 1015px) and (min-width: 801px) {.seastoppicbtm {display: none;}}
@media (min-width: 801px) {.caption {top: 33% !important;}}
@media (max-width: 800px) {
.bgimgback {height: calc(55vw + 200px) !important;}
.caption {top: 28% !important;} .seastoppicbtm {left: 5%; top: auto; bottom: 20px;}
}
@media (max-width: 600px) {.caption {top: 33% !important;}}
@media (max-width: 400px) {.bgimgback {height: calc(60vw + 200px) !important;}}

@media (max-width: 100px) {
.bgimg img {height: 90vw; max-height: 650px;} .caption {top: 41%;}
.seastoppicbtm {margin: auto; text-align: center; left: 0; right: 0;}
}
@media (max-width: 480px) {.bgimg img {height: 100vw;}}
@media (max-width: 430px) {.caption {top: 36%;}}
@media (max-width: 370px) {.bgimg img {height: 112vw;}}


/*Bottom Header Border*/
#seashead2 {position: fixed; width: 100%; height: 42px; background-image: url(images/seasonal/winter-border.png); background-repeat: repeat-x; margin-top: 27px; z-index: 2;}
#logo {vertical-align: top;}

@media (min-width: 1046px) {#seashead2 {top: 115px;}}
@media (max-width: 1045px) {#seashead2 {top: 130px;}}
@media (max-width: 805px) {#seashead2 {top: 155px;}}
@media (max-width: 600px) {#seashead2 {top: 158px;}}
@media (max-width: 525px) {#seashead2 {top: 100px;} nav {padding-top: 50px;}}

/*Bottom Area - top border*/
#seasbtmbord {width: 100%; height: 42px; background-image: url(images/seasonal/winter-border.png); background-repeat: repeat-x; margin: -20px auto 20px auto;}
footer {padding-left: 0; padding-right: 0;}
#copy, #phbtm, .serving, #web {padding-left: 25px; padding-right: 25px;}

/*Bottom Area of Page*/
#seas3 {margin: 30px auto 20px auto; width: 168px; height: 156px; background-image: url(images/seasonal/winter-btm.png); background-position: top center; background-repeat: no-repeat;}


/*First Bodyhead*/
.firstba:not(.bahome) {padding-top: 65px;}
#seas1 {display: table; width: 100%; padding-bottom: 10px;} #seas1 div, #seas1 .bodyhead {display: table-cell; padding-bottom: 0;}
#seas1 div {width: 58px; height: 58px; background-repeat: no-repeat; background-size: 58px 58px;}
#seas1 div:first-child {background-image: url(images/seasonal/winter-bodyhead-left.png); background-position: center left; padding-right: 15px;}
#seas1 div:last-child {background-image: url(images/seasonal/winter-bodyhead-right.png); background-position: center right; padding-left: 15px;}
@media (max-width: 600px) {
#seas1 div {position: absolute; top: 25px; left: 0; right: 0; margin: auto;}
#seas1 div {top: 60px;} .bahome #seas1 div {top: 30px;}
#seas1 div:first-child {padding-left: 55px;} #seas1 div:last-child {padding-right: 55px;}
#seas1 .bodyhead {padding-top: 65px;}
}

/*Bottom before red area*/
#seas2 {margin: auto; width: 141px; height: 146px; background-image: url(images/seasonal/winter-midpage.png); background-position: center left; background-repeat: no-repeat; background-size: 141px 146px;}
#bodyarea {padding-bottom: 25px;} #svclist {margin-bottom: 30px !important;}
@media (max-width: 175px) {.newarea {padding-bottom: 130px;} #seas2 {left: 0; bottom: 10px;}}


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


/*COLORS*/

body {color: #444;} a, a:visited {color: #00F;}
#headtop, #headtopback, #headtopback2 {background-color: #CB0000;}
#header, #headerback, #headerback2 {background-color: #FFF} #headerback2 {border-bottom: 3px solid #CB0000;}
#phone, #phone a {color: #FFF47D;} #phone span {color: #FFF;}
.bodyhead, .heading {color: #C00;}

nav a {color: #FFF !important;}
@media (min-width: 526px) {nav a span {background: #555;} nav a.selected span {background: #000;}}
@media (max-width: 525px) {
nav, nav a {background-color: #CB0000;} nav div {border: 1px solid #FFF;}
nav a:hover {background-color: #F00;} nav a.selected, nav a.selected:hover {background-color: #9C0000;}
}

#btminfoback, footer {background-color: #333; color: #CCC;}
.serving {color: #BBB;} .tb, .tb a {color: #FFF47D !important;}