/* Universal Reset and Box Model */
*,
:after,
:before {
    padding: 0;
    margin: 0;
    -webkit-box-sizing: inherit;
    box-sizing: inherit
}

/* Base Elements */
a {
    outline: none
}

a img {
    border: none
}

address,
blockquote,
dl,
fieldset,
form,
h1,
h2,
h3,
h4,
h5,
h6,
label,
ol,
p,
pre,
ul {
    margin: 0
}

embed,
img,
object,
video {
    border: 0;
    height: auto;
    max-width: 100%
}

iframe {
    border: 0;
    max-width: 100%
}

dd,
h1,
h2,
h3,
h4,
h5,
h6,
ol,
p,
pre,
table,
ul {
    margin-bottom: 1em
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sup {
    top: -.5em
}

sub {
    bottom: -.25em
}

article,
aside,
figure,
footer,
header,
main,
nav,
section {
    display: block
}

html {
    -webkit-text-size-adjust: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

/* Skip Link */
a#skiplink {
    position: absolute;
    top: auto;
    left: -99999px;
    height: .1rem;
    width: .1rem;
    overflow: hidden
}

a#skiplink:active,
a#skiplink:focus {
    left: 0;
    top: 0;
    width: auto;
    height: auto;
    overflow: auto;
    padding: 1.5rem;
    font-weight: bold;
    font-size: 1.8rem;
    background: #fff;
    z-index: 999;
    -webkit-box-shadow: 0.1rem 0.1rem 0.8rem 0 rgba(0, 0, 0, 0.25);
    box-shadow: 0.1rem 0.1rem 0.8rem 0 rgba(0, 0, 0, 0.25)
}

/* Body and Typography Setup */
html {
    font-size: 62.5%;
    line-height: 1.25;
    overflow-x: hidden
}

body {
    background: #000;
    color: #fff;
    font-family: "Open Sans", sans-serif
}

/* Selection */
::-moz-selection {
    background: #6e190f;
    color: #fff
}

::selection {
    background: #6e190f;
    color: #fff
}

/* Links */
a:link {
    color: #6e190f;
    -webkit-transition: all 250ms ease-out;
    -o-transition: all 250ms ease-out;
    transition: all 250ms ease-out
}

a:visited {
    color: #140503
}

a:focus,
a:hover {
    color: #c82d1b
}

/* Buttons */
.btn:link,
.btn:visited {
    display: inline-block;
    text-align: center;
    font-weight: bold;
    background-color: #6e190f;
    font-family: "Shojumaru", cursive;
    color: #fff;
    text-shadow: 0.1rem 0.1rem 0.5rem rgba(0, 0, 0, 0.25);
    font-size: 2.1rem;
    text-decoration: none;
    padding: .8em 1em;
    line-height: 1;
    -webkit-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms
}

.btn:focus,
.btn:hover {
    background-color: #9b2315;
    text-shadow: 0.1rem 0.1rem 0.5rem rgba(0, 0, 0, 0.25)
}

/* Blockquote, HR, and Images */
blockquote {
    background: #f6f6f6;
    font-style: italic;
    padding: 2rem
}

hr {
    background-color: #b8b8b8;
    border: medium none;
    clear: both;
    color: #b8b8b8;
    display: block;
    height: .1rem;
    margin: 4.5rem
}

img[align=right],
img[style*="float: right"] {
    display: block;
    float: right;
    margin: 0 0 3rem 3rem;
    max-width: 50%
}

img[align=left],
img[style*="float: left"] {
    display: block;
    float: left;
    margin: 0 3rem 3rem 0;
    max-width: 50%
}

/* Headings and Lists */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Shojumaru", cursive
}

dl,
ol,
p,
ul {
    margin: 0 0 3rem
}

ol,
ul {
    margin: 0 0 3rem 3rem
}

blockquote p:last-child,
ol p:last-child,
ul p:last-child {
    margin-bottom: 0
}

dt {
    font-weight: bold;
    font-style: italic
}

/* Tables */
table {
    border-collapse: collapse;
    width: 100%
}

th {
    background: #333;
    border: .1rem solid #fff;
    color: #fff;
    padding: 1rem
}

td {
    border: .1rem solid #fff;
    padding: 1rem
}

table tr:nth-child(odd) {
    background: #eee
}

table tr:nth-child(2n) {
    background: #dedede
}

/* Wrapper */
.wrapper {
    margin: 0 auto;
    max-width: 1890px;
    width: 100%
}

/* Navigation - General */
nav ul {
    list-style-type: none;
    margin: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

nav a:link,
nav a:visited {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-decoration: none
}

/* Header Notice */
#hdr-notice {
    display: none;
    background: #111;
    color: #fff;
    text-shadow: 0.1rem 0.1rem 0.5rem rgba(0, 0, 0, 0.25);
    position: relative;
    padding: 1.5rem 4.5rem
}

#hdr-notice .hdr-notice-content {
    width: 100%;
    max-width: 98rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 auto;
    font-size: 2.1rem;
    position: relative;
    text-align: center
}

#hdr-notice #close-notice {
    display: inline-block;
    vertical-align: middle;
    width: 2.4rem;
    height: 2.4rem;
    -webkit-mask: url(/img/icons/circle-close.svg);
    mask: url(/img/icons/circle-close.svg);
    -webkit-mask-size: cover;
    mask-size: cover;
    background: #fff;
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    margin: -.3rem .2rem 0 0;
    -webkit-transition: all 250ms ease-out;
    -o-transition: all 250ms ease-out;
    transition: all 250ms ease-out
}

#hdr-notice #close-notice:focus,
#hdr-notice #close-notice:hover {
    background: #F6E7CE
}

#hdr-notice .notice-btn:link,
#hdr-notice .notice-btn:visited {
    color: #fff;
    font-weight: bold;
    text-decoration: underline;
    white-space: nowrap
}

#hdr-notice .notice-btn:focus,
#hdr-notice .notice-btn:hover {
    text-decoration: none
}

/* Header Navigation (Main Menu) */
header nav {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    z-index: 100
}

header nav a:link,
header nav a:visited {
    font-family: "Shojumaru", cursive;
    color: #dea84d;
    font-size: 2.2rem;
    padding: 2.1rem;
    position: relative;
    text-align: center;
    height: 100%
}

header nav .current>a,
header nav a:focus,
header nav a:hover {
    color: #F6E7CE
}

header nav ul li {
    position: relative;
    margin: 0
}

header nav ul li:focus ul,
header nav ul li:hover ul {
    display: block
}

/* Header Sub-Menu */
header nav ul ul {
    display: none;
    -webkit-box-shadow: 0 0 1.8rem 0 rgba(0, 0, 0, 0.25);
    box-shadow: 0 0 1.8rem 0 rgba(0, 0, 0, 0.25);
    position: absolute;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    max-width: 32rem;
    border-radius: .5rem
}

header nav ul ul:before {
    content: "";
    width: 0;
    height: 0;
    display: block;
    border-style: solid;
    border-width: 0 1.2rem 1.2rem 1.2rem;
    border-color: transparent transparent #fff transparent;
    top: -1.2rem;
    left: 2.4rem;
    position: absolute;
    z-index: 1
}

header nav ul ul a:link,
header nav ul ul a:visited {
    font-family: "Open Sans", sans-serif;
    background: rgba(255, 255, 255, 0.9);
    font-size: 1.8rem;
    display: block;
    text-align: left;
    padding: 1rem 2.1rem 1.2rem
}

header nav ul ul li {
    display: block
}

header nav ul ul li:first-child a:link,
header nav ul ul li:first-child a:visited {
    border-radius: .5rem .5rem 0 0
}

header nav ul ul li:last-child a:link,
header nav ul ul li:last-child a:visited {
    border-radius: 0 0 .5rem .5rem
}

header nav .current .current a,
header nav ul ul a:hover {
    background: #f7f7f7;
    color: #F6E7CE
}

/* Mobile Header (Hidden on Desktop) */
#mobile-header {
    display: none
}

/* Header Structure */
header {
    padding: calc(1.5rem + 1.5625vw)
}

.hdr-container {
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 auto
}

.logo {
    margin: 0 auto;
    display: block;
    max-width: 30%
}

.logo img {
    display: block;
    margin: auto
}

/* Banner */
.banner {
    position: relative
}

.banner img {
    display: block
}

/* Feature Boxes (Homepage Sections) */
.feature-boxes {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: space-evenly;
    -ms-flex-pack: space-evenly;
    justify-content: space-evenly
}

.feature-boxes a {
    width: calc(33.333333% - 4.6875vw);
    border-radius: .3rem;
    overflow: hidden;
    text-decoration: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    border: .1rem solid #ddd
}

.feature-boxes a:hover {
    -webkit-box-shadow: 0.1rem 0.1rem 0.8rem 0 rgba(0, 0, 0, 0.25);
    box-shadow: 0.1rem 0.1rem 0.8rem 0 rgba(0, 0, 0, 0.25)
}

.feature-boxes a:hover .feature-cta {
    background-color: #9b2315;
    text-shadow: 0.1rem 0.1rem 0.5rem rgba(0, 0, 0, 0.25)
}

.feature-boxes img {
    display: block;
    width: 100%
}

.feature-boxes .feature-text {
    padding: 2.4rem 2.4rem 0;
    color: #222
}

.feature-boxes .feature-text.no-img {
    margin: auto 0
}

.feature-boxes .feature-text h2 {
    font-size: 3rem;
    margin: 0;
    color: #dea84d
}

.feature-boxes .feature-text h3 {
    font-size: 2.6rem;
    margin: 0;
    font-weight: normal;
    color: #F6E7CE
}

.feature-boxes .feature-text p {
    font-size: 2.4rem;
    margin: 1.5rem 0
}

.feature-boxes .feature-cta {
    display: inline-block;
    text-align: center;
    font-weight: bold;
    background-color: #6e190f;
    font-family: "Shojumaru", cursive;
    color: #fff;
    text-shadow: 0.1rem 0.1rem 0.5rem rgba(0, 0, 0, 0.25);
    font-size: 2.1rem;
    text-decoration: none;
    padding: .8em 1em;
    line-height: 1;
    -webkit-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
    max-width: -webkit-max-content;
    max-width: -moz-max-content;
    max-width: max-content;
    margin: 2.4rem
}

/* Home Page Steps (Order Takeout) */
.home ol {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 5rem calc(-1.5rem - 1.5625vw) 0;
    counter-reset: steps;
    list-style: none
}

.home ol li {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 300px;
    flex: 1 1 300px;
    padding: 4rem;
    background-color: #6e190f;
    color: #fff;
    -webkit-box-shadow: -10px 0px 25px -10px rgba(0, 0, 0, 0.25);
    box-shadow: -10px 0px 25px -10px rgba(0, 0, 0, 0.25);
    z-index: 90;
    font-size: 2.5rem;
    font-weight: bold;
    text-align: center
}

.home ol li em {
    font-weight: 400
}

.home ol li:nth-child(2) {
    background-color: #8c221b
}

.home ol li:nth-child(3) {
    background-color: #AB2718
}

.home ol li:before {
    counter-increment: steps;
    font-family: "Shojumaru", cursive;
    content: counter(steps);
    width: 2em;
    height: 2em;
    font-size: 2.5rem;
    margin: 0 auto 3rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-weight: bold;
    border-radius: 50%;
    background: #fff;
    color: #000;
    text-shadow: 0.1rem 0.1rem 0.5rem rgba(0, 0, 0, 0.15);
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

/* Default Content (e.g., Menu/Inner Pages) */
.default {
    width: 100%;
    max-width: 98rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 auto;
    background: #fff;
    color: #000;
    padding: 4rem;
    border: 3px solid #F6E7CE
}

.default h2 {
    margin: 1.5em 0 1em
}

.default h3 {
    margin: 0 0 1em
}

.default .price {
    font-family: "Open Sans", sans-serif;
    font-weight: bold;
    margin-bottom: .5em;
    display: block
}

.default ul {
    margin-left: 0
}

.default ul h2 {
    color: #6e190f;
    font-size: 2.75rem;
    border-bottom: 2px solid #6e190f
}

.default ul h2 .price {
    font-size: 3rem
}

.default ul h3 {
    font-size: 2.25rem;
    border-bottom: 1px solid #000;
    line-height: 1.25em
}

.default ul h3 .price {
    font-size: 2.5rem;
    color: #6e190f
}

.default ul h2,
.default ul h3 {
    text-align: left;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 0 1.5rem;
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline
}

.default ul h2 .price,
.default ul h3 .price {
    text-align: right;
    margin-left: auto
}

.default .detail {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 100%;
    flex: 1 1 100%;
    font-size: 2.25rem;
    color: #000;
    font-style: italic;
    text-transform: lowercase;
    font-family: "Open Sans", sans-serif;
    font-weight: bold;
    margin-bottom: .5em;
    display: block
}

.default .num {
    font-family: "Shojumaru", cursive;
    width: 2.5em;
    height: 2.5em;
    line-height: 2.5em;
    top: -.25em;
    position: relative;
    font-size: 2rem;
    margin: 0 1rem 0 0;
    font-weight: bold;
    border-radius: 50%;
    background: #6e190f;
    color: #fff;
    text-shadow: 0.1rem 0.1rem 0.5rem rgba(0, 0, 0, 0.15);
    text-align: center
}

.default ul {
    list-style: none
}

.default ul li {
    position: relative;
    margin-bottom: 2rem
}

.default ul ul {
    color: #000;
    list-style: none;
    margin: 0;
    -webkit-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 2rem;
    column-gap: 2rem
}

.default ul ul li {
    margin: 0 1em .5em
}

/* Fallback for IE/Edge */
@supports (-ms-ime-align:auto) {
    .feature-boxes {
        -ms-flex-pack: distribute;
        justify-content: space-around
    }
}

/* Main Content Area */
main {
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 auto
}

/* Headings in Main/Locations */
.locations-block h1,
main h1 {
    font-size: 4.8rem;
    margin: 0 0 4.5rem;
    text-align: center
}

.locations-block h2,
main h2 {
    font-size: 4.2rem;
    margin: 0 0 .5em;
    text-align: center
}

.locations-block h3,
main h3 {
    font-size: 3.25rem;
    margin: 0 0 1.5rem
}

.locations-block h4,
main h4 {
    font-size: 3.0rem;
    margin: 0 0 1.5rem
}

.locations-block h5,
main h5 {
    font-size: 2.7rem;
    margin: 0 0 1.5rem
}

.locations-block h6,
main h6 {
    font-size: 2.4rem;
    margin: 0 0 1.5rem
}

/* Paragraphs and Lists in Main/Locations */
.locations-block ol,
.locations-block p,
.locations-block ul,
main ol,
main p,
main ul {
    font-size: 2.4rem;
    line-height: 1.5
}

.locations-block ol ol,
.locations-block ol ul,
.locations-block ul ol,
.locations-block ul ul,
main ol ol,
main ol ul,
main ul ol,
main ul ul {
    margin-bottom: 0
}

.locations-block li::marker,
main li::marker {
    color: #F6E7CE
}

/* Contact and Gallery Grids */
.contact-content {
    display: -ms-grid;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(36rem, 1fr));
    grid-gap: 3rem;
    margin: 0 0 3rem
}

.gallery {
    display: -ms-grid;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
    margin: 0 0 3rem
}

.gallery a {
    border: .1rem solid #ddd;
    padding: .2rem;
    border-radius: .3rem
}

.gallery a:hover {
    border: 0.1rem solid #F6E7CE
}

.gallery img {
    display: block;
    border-radius: .2rem;
    width: 100%
}

/* Content Padding */
.home-content,
.primary-content {
    padding: 0 calc(1.5rem + 1.5625vw)
}

/* Breadcrumbs and Pagination */
.breadcrumbs {
    font-size: 1.8rem;
    margin: 0 0 4.5rem
}

.breadcrumbs .brdcrmb-dvdr {
    display: inline-block;
    margin: 0 .2rem;
    width: 1.1rem;
    height: 1.1rem;
    -webkit-mask: url(/img/icons/dbl-arrow.svg);
    mask: url(/img/icons/dbl-arrow.svg);
    -webkit-mask-size: cover;
    mask-size: cover;
    background: #555
}

.breadcrumbs .current {
    font-weight: bold;
    color: #F6E7CE
}

.pagination {
    text-align: center;
    font-size: 1.8rem;
    margin: 4.5rem 0
}

.pagination span {
    margin: 0 .25em;
    border-radius: 2em;
    display: inline-block;
    height: 1.75em;
    line-height: 1.75em
}

.pagination .number {
    width: 1.75em;
    padding: 0;
    border-radius: 50%
}

.pagination .number.current {
    color: #fff;
    text-shadow: 0.1rem 0.1rem 0.5rem rgba(0, 0, 0, 0.25);
    background: #F6E7CE
}

.pagination .number a {
    padding: 0;
    width: 1.75em;
    height: 1.75em
}

.pagination a {
    background: #f7f7f7;
    text-decoration: none;
    color: #222;
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: 0 1.5rem;
    border-radius: 2em
}

.pagination a:hover {
    color: #fff;
    background: #222
}

/* Footer */
footer {
    padding: calc(1.5 + 1.5625vw) calc(1.5 + 1.5625vw) 0
}

footer nav {
    margin: 0 auto 0 0
}

footer nav a:link,
footer nav a:visited {
    font-family: "Shojumaru", cursive;
    font-size: 2rem;
    padding: 1.8rem;
    color: #dea84d
}

footer nav a:hover {
    color: #F6E7CE
}

/* Locations Block (The area we were working on) */

.locations{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-top:4rem;justify-content:center;max-width:100%}

.locations .location {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 400px;
    flex: 1 1 400px;
    padding: 4rem 2rem 2rem;
    background: #fff url(/img/Bamboo.svg) no-repeat 200% bottom;
    color: #000;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-size: 80%
}

.locations .location:nth-child(2n) {
    background-color: #F6E7CE
}

.locations .location h2 {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 100%;
    flex: 1 1 100%;
    margin: 0
}

.locations .location h2 span {
    margin-bottom: 2rem
}

.locations .location h2,
.locations .location h3,
.locations .location p {
    color: #000;
    text-align: center
}

.locations .location a:link,
.locations .location a:visited {
    color: #6e190f
}

.locations .location .btn:link,
.locations .location .btn:visited {
    color: #fff
}

.locations .location h2 {
    text-align: center;
    font-family: "Open Sans", sans-serif;
    font-size: 2rem
}

.locations .location h2 span {
    font-family: "Shojumaru", cursive;
    font-size: 4.5rem;
    display: block
}

.locations .location .deliv-icons {
display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 3rem;
    margin-bottom: 4rem;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    max-width: 80%;
    width: auto
}

.locations .location .deliv-icons .icon {
    max-width: 33%;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 100px;
    flex: 1 1 100px;
    min-width: 8vw
}

.locations .location .order {
    width: 100%
}

.locations .location .hint {
    font-style: italic;
    margin-top: -1em;
    font-size: 2rem
}

.locations .location ul {
display: block;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 100%;
    flex: 1 1 100%;
    list-style: none;
    margin: 2rem auto 0
}

.locations .location ul li {
    margin: 0 auto;
    width: 14em
}

.info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 3rem;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 100%;
    flex: 1 1 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: 3rem
}





/* Footer Structure & Icons */
.ftr-container {
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 auto
}

.ftr-top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 0 3rem 0
}

.icon {
    display: inline-block;
    width: 14rem;
    height: 5rem;
    margin: 0;
    text-indent: -99999rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center
}

.icon:hover {
    opacity: .75
}

.icon.skip {
    background-image: url(/img/icons/SkipTheDishes.svg)
}

.icon.uber {
    background-image: url(/img/icons/UbereEats.svg)
}

.icon.doordash {
    background-image: url(/img/icons/doordash.svg)
}

.icon.trip-advisor {
    background-image: url(/img/icons/tripadvisor.svg)
}

/* Social Media Icons */
.social-icon {
    display: inline-block;
    width: 3rem;
    height: 3rem;
    margin: 0 1.8rem;
    text-indent: -99999rem
}

.social-icon.facebook {
    -webkit-mask: url(/img/icons/social-media/facebook.svg);
    mask: url(/img/icons/social-media/facebook.svg);
    -webkit-mask-size: cover;
    mask-size: cover;
    background: #333;
    color: #fff
}

.social-icon.facebook:hover {
    background: #3b5999
}

.social-icon.twitter {
    -webkit-mask: url(/img/icons/social-media/twitter.svg);
    mask: url(/img/icons/social-media/twitter.svg);
    -webkit-mask-size: cover;
    mask-size: cover;
    background: #333;
    color: #fff
}

.social-icon.twitter:hover {
    background: #5fa9dd
}

.social-icon.instagram {
    -webkit-mask: url(/img/icons/social-media/instagram.svg);
    mask: url(/img/icons/social-media/instagram.svg);
    -webkit-mask-size: cover;
    mask-size: cover;
    background: -webkit-radial-gradient(30% 107%, circle, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    background: -o-radial-gradient(30% 107%, circle, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    position: relative
}

.social-icon.instagram:before {
    content: "";
    -webkit-mask: url(/img/icons/social-media/instagram.svg);
    mask: url(/img/icons/social-media/instagram.svg);
    -webkit-mask-size: cover;
    mask-size: cover;
    background: #333;
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: all 500ms ease-out;
    -o-transition: all 500ms ease-out;
    transition: all 500ms ease-out
}

.social-icon.instagram:hover:before {
    opacity: 0
}

.social-icon.youtube {
    -webkit-mask: url(/img/icons/social-media/youtube.svg);
    mask: url(/img/icons/social-media/youtube.svg);
    -webkit-mask-size: cover;
    mask-size: cover;
    background: #333;
    color: #fff
}

.social-icon.youtube:hover {
    background: #ff0000
}

/* Footer Details */
.menu-list li {
    font-weight: bold
}

.ftr-contact {
    border-top: .1rem solid #ddd;
    text-align: center;
    font-size: 1.6rem;
    padding: 4.8rem 0
}

.ftr-contact .divider {
    display: inline-block;
    vertical-align: middle;
    margin: 0 .5rem;
    width: .1rem;
    background: #F6E7CE;
    height: .8em
}

.copyright {
    color: #757575;
    text-align: center;
    font-size: 1.2rem;
    padding: 0 0 3rem 0
}

.copyright a:link,
.copyright a:visited {
    color: #757575;
    text-decoration: none
}

.copyright a:hover {
    text-decoration: underline
}


@media (max-width: 768px) {
    /* 1. Ensure the main content takes full width */
    .home-content {
        /* Remove any fixed or max-width constraints */
        max-width: 100%;
        padding: 0 15px; /* Add some padding on the sides for breathing room */
        box-sizing: border-box; /* Ensures padding is included in the element's total width */
    }
    
    /* 2. Style the container for the 3 locations */
    .locations-block {
        max-width: 100%;
        padding: 0 15px;
        box-sizing: border-box;
    }

    /* 3. Make the location columns stack vertically */
    .locations {
        /* Assuming 'locations' is a flex or grid container, 
           or needs its children to stack. Reset any column layout. */
        display: block; /* Make it stack its children */
    }

    /* 4. Make each individual location block full width and give it some margin */
    .location {
        width: 100%; /* Make each location use the full width */
        margin-bottom: 30px; /* Add space between location blocks */
        float: none; /* Clear any floating if used in the original layout */
        
        /* Optional: Add a border/shadow to visually separate them */
        border: 1px solid #eee; 
        padding: 20px;
        box-sizing: border-box;
        text-align: center; /* Center text within the location block */
    }

    /* 5. Clean up the header logo */
    header .hdr-container {
        padding: 10px 15px;
    }
    
    header h1 {
        text-align: center; /* Center the logo */
    }
    
    header .logo img {
        /* Make the logo shrink on small screens */
        max-width: 80%; 
        height: auto;
    }

    /* 6. Ensure the menu buttons are full width and centered */
    .location .info .btn {
        display: block; /* Make buttons take up their own line */
        width: 80%; /* Control button width */
        margin: 10px auto; /* Center buttons */
        padding: 10px 0;
        text-align: center;
    }
    
    /* 7. Center list items for hours */
    .location ul {
        list-style: none; /* Remove bullet points */
        padding: 0;
        text-align: center;
    }
}


/* Media Queries (Desktop to Mobile) */
@media screen and (min-width:1980px) {
    html {
        font-size: .5050505050505051vw
    }
}

@media screen and (max-width:1440px) {

    .locations-block h1,
    .locations-block h2,
    main h1,
    main h2 {
        font-size: 2.8vw
    }

    .locations-block h3,
    main h3 {
        font-size: 2.25vw
    }

    .locations-block ol,
    .locations-block p,
    .locations-block ul,
    main ol,
    main p,
    main ul {
        font-size: 1.7vw
    }

    .home ol li,
    .locations .location {
        font-size: 1.7vw;
        padding: 2.5em 1em
    }

    .home ol li:before {
        font-size: 1.5vw
    }

    .locations .location h2 {
        font-size: 1.4vw
    }

    .locations .location h2 span {
        font-size: 3.2vw
    }

    .btn:link,
    .btn:visited {
        font-size: 1.3vw
    }

    .default ul h2 {
        font-size: 1.8vw
    }

    .default ul h2 .price {
        font-size: 2vw
    }

    .default ul h3 {
        font-size: 1.6vw
    }

    .default ul h3 .price {
        font-size: 2vw
    }

    .default .num {
        font-size: 1.25vw
    }

    .default .detail {
        font-size: 1.55vw
    }
}

@media screen and (max-width:1240px) {
    .feature-boxes {
        display: block
    }

    .feature-boxes a {
        width: auto;
        margin: 0 4.5rem 4.5rem;
        position: relative
    }

    .feature-boxes picture {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 50%
    }

    .feature-boxes picture img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover
    }

    .feature-boxes .feature-text {
        margin-left: 50%
    }

    .feature-boxes .feature-text.no-img {
        text-align: center;
        margin-top: 0;
        margin-left: 0;
        margin-right: 0
    }

    .feature-boxes .feature-cta {
        margin-left: calc(50% + 2.4rem)
    }

    .feature-boxes .feature-cta.no-img {
        margin-top: 0;
        margin-left: auto;
        margin-right: auto
    }

    .feature-boxes a:nth-child(2n) picture {
        right: 0;
        left: initial
    }

    .feature-boxes a:nth-child(2n) .feature-text {
        margin-left: initial;
        margin-right: 50%
    }

    .feature-boxes a:nth-child(2n) .feature-text.no-img {
        text-align: center;
        margin-left: 0;
        margin-right: 0
    }

    .feature-boxes a:nth-child(2n) .feature-cta {
        margin-top: 0;
        margin-left: 2.4rem;
        margin-right: calc(50% + 2.4rem)
    }

    .feature-boxes a:nth-child(2n) .feature-cta.no-img {
        margin-left: auto;
        margin-right: auto
    }

    .locations .location {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 300px;
        flex: 1 1 300px
    }
}

@media screen and (max-width:950px) {

    .locations-block h1,
    .locations-block h2,
    main h1,
    main h2 {
        font-size: 3.25vw
    }

    .locations-block h3,
    main h3 {
        font-size: 2.85vw
    }

    .locations-block ol,
    .locations-block p,
    .locations-block ul,
    main ol,
    main p,
    main ul {
        font-size: 2.25vw
    }

    .home ol li,
    .locations .location {
        font-size: 2.25vw
    }

    .home ol li {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 100%;
        flex: 1 1 100%;
        padding: 1.5em 1em
    }

    .home ol li:before {
        font-size: 1.75vw
    }

    .locations .location h2 {
        font-size: 1.65vw
    }

    .locations .location h2 span {
        font-size: 3.5vw
    }

    .btn:link,
    .btn:visited {
        font-size: 1.65vw
    }

    .default ul h2 {
        font-size: 2vw
    }

    .default ul h2 .price {
        font-size: 2.25vw
    }

    .default ul h3 {
        font-size: 1.8vw
    }

    .default ul h3 .price {
        font-size: 2.25vw
    }

    .default .num {
        font-size: 1.5vw
    }

    .default .detail {
        font-size: 1.75vw
    }

    .locations .location {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 100%;
        flex: 1 1 100%;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .locations .location .deliv-icons .icon {
        max-width: 18vw
    }

    .info {
        -webkit-box-flex: 1;
        -ms-flex: auto;
        flex: auto;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }
}

@media screen and (max-width:720px) {
    .feature-boxes picture {
        position: static;
        width: 100%
    }

    .feature-boxes picture img {
        width: 100%;
        height: auto
    }

    .feature-boxes .feature-text {
        margin-left: 0;
        margin-right: 0;
        text-align: center
    }

    .feature-boxes .feature-cta {
        margin-top: 0;
        margin-left: auto;
        margin-right: auto
    }

    .feature-boxes a {
        margin: 0 3rem 3rem
    }

    .feature-boxes a:nth-child(2n) .feature-text {
        margin-left: 0;
        margin-right: 0;
        text-align: center
    }

    .feature-boxes a:nth-child(2n) .feature-cta {
        margin-top: 0;
        margin-left: auto;
        margin-right: auto
    }

    .feature-boxes a:last-child {
        margin-bottom: 0
    }
}

@media screen and (max-width:600px) {
    dl,
    ol,
    p,
    ul {
        margin-bottom: 1em
    }

    .locations-block h1,
    .locations-block h2,
    main h1,
    main h2 {
        font-size: 3.75vw
    }

    .locations-block h3,
    main h3 {
        font-size: 3.5vw
    }

    .locations-block ol,
    .locations-block p,
    .locations-block ul,
    main ol,
    main p,
    main ul {
        font-size: 3vw
    }

    .home ol li,
    .locations .location {
        font-size: 3vw
    }

    .home ol li:before {
        font-size: 2.65vw;
        margin-bottom: 1.5em
    }

    .locations .location h2 {
        font-size: 2.5vw
    }

    .locations .location h2 span {
        font-size: 4vw
    }

    .locations .location .deliv-icons {
        margin-bottom: 2.5rem
    }

    .locations .location .deliv-icons .icon {
        max-width: 26vw
    }

    .btn:link,
    .btn:visited {
        font-size: 2.5vw
    }

    .default ul h2 {
        font-size: 3vw
    }

    .default ul h2 .price {
        font-size: 3.25vw
    }

    .default ul h3 {
        font-size: 2.5vw
    }

    .default ul h3 .price {
        font-size: 3vw
    }

    .default .num {
        font-size: 2.5vw
    }

    .default .detail {
        font-size: 3vw
    }

    .info {
        margin-bottom: 2.5rem
    }
}

@media screen and (max-width:540px) {
    html {
        font-size: 1.8518518518518516vw
    }
}

/* Print/Telephone */
@media screen and (min-width:1024px) {
    a[href^="tel:"] {
        text-decoration: none;
        cursor: default
    }
}

/* Forms */
fieldset {
    padding: 0;
    margin: 0;
    border: none
}

legend {
    display: none
}

.radios legend,
label {
    display: block;
    max-width: -webkit-max-content;
    max-width: -moz-max-content;
    max-width: max-content;
    font-weight: bold;
    font-size: 1.8rem;
    font-family: "Shojumaru", cursive;
    color: #dea84d;
    font-weight: bold;
    padding: 0 .5rem 0;
    position: relative
}

.checkbox,
.radio {
    margin: 0 .5rem
}

.checkbox input,
.checkbox label,
.radio input,
.radio label {
    display: inline-block
}

.checkbox input,
.radio input {
    width: auto
}

.checkbox label,
.radio label {
    font-weight: normal;
    font-family: "Open Sans", sans-serif
}

textarea {
    font-family: inherit;
    font-size: inherit
}

input:not([type=button]):not([type=submit]):not([type=radio]):not([type=checkbox]),
select,
textarea {
    border: .1rem solid #ddd;
    background-color: #f7f7f7;
    border-radius: .3rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-family: inherit;
    padding: 1rem 3rem 1rem 1.5rem;
    font-size: 2.1rem;
    color: #111;
    -webkit-transition: border 250ms ease-out;
    -o-transition: border 250ms ease-out;
    transition: border 250ms ease-out
}

input:not([type=button]):not([type=submit]):not([type=radio]):not([type=checkbox]),
textarea {
    width: 100%
}

.input {
    margin: 0 0 2.1rem
}

option {
    padding: 0 .5rem
}

input:hover,
select:hover,
textarea:hover {
    border: 0.1rem solid #F6E7CE !important
}

input[type=button],
input[type=checkbox],
input[type=radio],
input[type=submit] {
    border: none;
    padding: 0;
    width: auto
}

input[type=color] {
    height: 2.5em;
    width: 5em
}

/* Form Buttons */
button,
input[type=button],
input[type=submit] {
    display: inline-block;
    text-align: center;
    font-weight: bold;
    background-color: #6e190f;
    font-family: "Shojumaru", cursive;
    color: #fff;
    text-shadow: 0.1rem 0.1rem 0.5rem rgba(0, 0, 0, 0.25);
    font-size: 2.1rem;
    text-decoration: none;
    padding: .8em 1em;
    line-height: 1;
    -webkit-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

button:focus,
button:hover,
input[type=button]:focus,
input[type=button]:hover,
input[type=submit]:focus,
input[type=submit]:hover {
    background-color: #9b2315;
    text-shadow: 0.1rem 0.1rem 0.5rem rgba(0, 0, 0, 0.25);
    border: none !important
}

/* Search Bar */
.search-bar {
    padding: 0 4.5rem 4.5rem
}

.search-bar .search-form-container {
    width: 100%;
    max-width: 98rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 auto
}

.search-bar .search-form-container .sitemap_search_input_header {
    border-radius: 2em 0 0 2em !important;
    background-image: none !important;
    padding: 1rem 3rem 1rem 3rem !important;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    min-width: 0
}

.search-bar form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end
}

.search-bar form label {
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center
}

input[type=submit].search-btn {
    padding-right: calc(3.2rem + 1em);
    background-image: url(/img/icons/magnifying-glass.svg);
    background-repeat: no-repeat;
    background-size: 2.4rem 2.4rem;
    background-position: calc(100% - 1em) calc(50%) !important;
    border-radius: 0 2em 2em 0
}

/* Form Validation/Required */
.form_tip .required,
label .required,
legend .required {
    color: #cc0000
}

.optional {
    font-size: 1.8rem;
    font-style: italic;
    font-weight: 400
}

/* Login/Retrieve Forms */
#UserLoginForm,
#UserRetrieveForm {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

#UserLoginForm .input.password,
#UserLoginForm .input.text,
#UserRetrieveForm .input.password,
#UserRetrieveForm .input.text {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: calc(50% - 1.5rem);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 0 1.5rem
}

#UserLoginForm .submit,
#UserRetrieveForm .submit {
    margin: 0
}

/* Mortgage Calculator Results (Specific component) */
.mortgage-calc-results label {
    display: block
}

.mortgage-calc-results .dollar-sign {
    display: inline-block;
    font-size: 2.4rem;
    font-weight: bold;
    margin: 0 0 0 .5rem;
    color: #111
}

.mortgage-calc-results input[name=AmountOwing]:disabled,
.mortgage-calc-results input[name=PaymentSize]:disabled {
    display: inline-block;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    border: none;
    font-size: 2.4rem;
    font-weight: bold;
    background: #fff;
    color: #111;
    padding: 0
}

.mortgage-disclaimer {
    font-size: 1.8rem;
    font-weight: bold;
    padding: 1.5em;
    border: .1rem solid #df8f8f;
    color: #665252 !important;
    background: #ffcece;
    line-height: normal;
    margin-top: 1.5rem
}

/* Form Validation Styling (Success/Error) */
input:not([type=button]):not([type=submit]):focus:valid,
textarea:focus:valid {
    background-image: url(/img/icons/circle-check.svg);
    background-repeat: no-repeat;
    background-size: 1.8rem;
    border: .1rem solid #7aac41
}

input:not([type=button]):not([type=submit]).invalid,
input:not([type=button]):not([type=submit]):focus:invalid,
textarea.invalid,
textarea:focus:invalid {
    background-image: url(/img/icons/circle-x.svg);
    background-repeat: no-repeat;
    background-size: 1.8rem;
    border: .1rem solid #bc0000
}

input:not([type=button]):not([type=submit]).invalid,
input:not([type=button]):not([type=submit]):focus:invalid,
input:not([type=button]):not([type=submit]):focus:valid {
    background-position: calc(100% - .75rem) 50%
}

textarea.invalid,
textarea:focus:invalid,
textarea:focus:valid {
    background-position: calc(100% - .75rem) 0.75rem
}

/* Form Tips and Tooltips */
.form_tip {
    display: inline-block;
    margin: .5rem 0;
    font-size: 1.6rem
}

.optional {
    font-size: 1.4rem;
    font-style: italic;
    font-weight: 400;
    margin-left: .5rem
}

label .tooltip {
    opacity: 0;
    -webkit-transition: opacity 500ms ease-out;
    -o-transition: opacity 500ms ease-out;
    transition: opacity 500ms ease-out
}

label:hover .tooltip {
    opacity: 1
}

.tooltip {
    font-weight: normal;
    font-style: italic;
    font-size: 1.6rem;
    padding: .5rem;
    border-radius: .5rem;
    background: rgba(255, 255, 255, 0.9);
    -webkit-box-shadow: 0.1rem 0.1rem 0.5rem 0 rgba(0, 0, 0, 0.5);
    box-shadow: 0.1rem 0.1rem 0.5rem 0 rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 50%;
    right: 0;
    -webkit-transform: translate(100%, -50%);
    -ms-transform: translate(100%, -50%);
    transform: translate(100%, -50%);
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content
}

.input-desc {
    font-size: 1.6rem;
    font-style: italic;
    padding: .5rem;
    display: block;
    color: #555
}

.grecaptcha-badge {
    display: none
}

@media screen and (max-width:780px) {
    #UserLoginForm .input.password,
    #UserLoginForm .input.text {
        width: 100%
    }
}

/* Notifications and Error Messages */
.notification {
    border-radius: .5rem;
    font-size: 1.8rem
}

.notification ol,
.notification ul {
    margin-top: 1rem;
    margin-bottom: 0;
    font-size: 1.8rem
}

.notification ol li,
.notification ul li {
    line-height: 1 !important
}

.error-message,
.notification {
    position: relative;
    margin: 0 0 3rem 0;
    border: .1rem solid;
    background-position: 1.2rem 1.2rem !important;
    background-repeat: no-repeat !important
}

.notification.attention {
    background-color: #feefb3;
    background-image: url("/img/icons/exclamation.svg");
    background-size: 2.1rem;
    border-color: #e2b503;
    color: #322801
}

.notification.information {
    background-color: #bde5f8;
    background-image: url("/img/icons/information.svg");
    background-size: 2.1rem;
    border-color: #1696d3;
    color: #052331
}

.notification.success {
    background-color: #dff2bf;
    background-image: url("/img/icons/circle-check.svg");
    background-size: 2.1rem;
    border-color: #86be27;
    color: #1e2a09
}

.error-message,
.notification.error {
    background-color: #ffd1d1;
    background-image: url("/img/icons/exclamation_circle.svg");
    background-size: 2.1rem;
    border-color: #ff0505;
    color: #520000
}

.notification div {
    padding: 1.2rem 6.5rem 1.2rem 4rem
}

.notification .close {
    color: #990000;
    font-size: 1.4rem;
    font-weight: bold;
    text-transform: uppercase;
    position: absolute;
    text-decoration: none;
    right: .5rem;
    top: .5rem
}

.notification .close img {
    display: inline-block;
    vertical-align: middle
}

.notification .close:hover {
    background: transparent;
    color: #330000
}

.input .error-message,
.input .notification {
    padding: .5rem .5rem .5rem 3.5rem;
    border: 0;
    font-size: 1.6rem
}

.input-error {
    display: block
}

.input .error-message {
    color: #520000;
    background: #ffd1d1 url("/img/icons/exclamation_circle.svg") left center no-repeat;
    background-size: 1.6rem;
    background-position: 1.2rem .6rem !important;
    margin: 0;
    font-style: italic
}

.message {
    clear: both;
    color: #fff;
    font-weight: bold;
    margin: 0 0 1.5rem 0;
    padding: .5rem
}

.cake-debug,
.cake-error,
.error-message,
.message,
.notice,
p.error {
    background: #ffcc00;
    border: 0.1rem solid rgba(0, 0, 0, 0.2);
    margin-bottom: 3rem;
    padding: 1rem 1.5rem;
    color: #404040;
    border-radius: .5rem
}

.success {
    clear: both;
    color: #fff;
    border: 0.1rem solid rgba(0, 0, 0, 0.5);
    background: #3B8230
}

p.error {
    padding: 1.5rem;
    margin: 1.5rem 0
}

p.error em {
    font-weight: normal;
    line-height: 140%
}

.notice {
    color: #000;
    display: block;
    padding: 1.5rem;
    margin: 1.5rem 0
}