/* vanglungrattan.com: Flatsome's look, written fresh. Part 1 is the theme's own markup; part 2 the builder classes the
   imported pages use (row/col grid, sections, banners, boxes, buttons). Colours as the old theme's settings. */
/* Prata (SIL Open Font License, fonts/OFL-Prata.txt): the free serif closest to the old Sainte Colombe, whose files were
   trial versions. The old names stay as aliases: the imported pages name them in their own styles. */
@font-face { font-family: "Prata"; src: url(fonts/prata-latin.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Prata"; src: url(fonts/prata-vietnamese.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Sainte Colombe"; src: url(fonts/prata-latin.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Sainte Colombe"; src: url(fonts/prata-vietnamese.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Sainte Colombe Bold"; src: url(fonts/prata-latin.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Sainte Colombe Bold"; src: url(fonts/prata-vietnamese.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }

:root {
  --primary: #daa24d; --primary-dark: #b98535; --brown: #7a5a2b; --text: #000; --muted: #777; --line: #ececec;
  --nav-bg: #f1f1f1; --foot-bg: #e8e8e8; --width: 1400px; --serif: "Prata", Georgia, "Times New Roman", serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 16px/1.6 var(--serif); color: var(--text); background: #fff; }
img { max-width: 100%; height: auto; vertical-align: middle; border: 0; }
a { color: var(--brown); text-decoration: none; }
a:hover { color: #000; }
h1, h2, h3, h4, h5, h6 { font-family: var(--serif); font-weight: 700; color: #000; line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: 1.7em; } h2 { font-size: 1.6em; } h3 { font-size: 1.25em; } h4 { font-size: 1.125em; } h5 { font-size: 1em; }
p { margin: 0 0 1.3em; }
ul, ol { margin: 0 0 1.3em; padding-left: 1.3em; }
table { width: 100%; border-collapse: collapse; margin-bottom: 1em; }
th, td { border-bottom: 1px solid var(--line); padding: .5em .4em; text-align: left; vertical-align: top; }
iframe, video { max-width: 100%; }
.sr, .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.container { width: 100%; max-width: var(--width); margin: 0 auto; padding: 0 15px; }
.content { padding-top: 30px; padding-bottom: 30px; }

/* buttons */
.button, button.button, input[type=submit] { display: inline-block; position: relative; border: 2px solid transparent; border-radius: 99px;
  background: var(--primary); color: #fff; font: 700 .97em/2.4em var(--serif); text-transform: uppercase; letter-spacing: .03em;
  padding: 0 1.2em; min-height: 2.5em; cursor: pointer; text-align: center; vertical-align: middle; margin: 0 1em 1em 0; transition: background .2s, color .2s; }
.button:hover { background: var(--primary-dark); color: #fff; }
.button.small { font-size: .8em; margin: 0; }
.button.is-outline { background: none; border-color: currentColor; color: var(--primary); }
.button.is-outline:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.button.white { background: #fff; color: #333; } .button.white.is-outline { background: none; color: #fff; }
.button.secondary { background: #d26e4b; } .button.success { background: #7a9c59; } .button.alert { background: #b20000; }
.button.is-link { background: none; color: inherit; border: 0; }
.button.round, .button.circle { border-radius: 99px; }
.button.is-large { font-size: 1.15em; } .button.is-xlarge { font-size: 1.5em; } .button.is-small { font-size: .8em; } .button.is-xsmall { font-size: .7em; }
.is-divider { height: 3px; width: 100%; max-width: 30px; background: rgba(0, 0, 0, .1); margin: 1em 0; display: block; }  /* Flatsome's: a page may set its own max-width */
/* a builder divider pulled up with negative margins sat on the next line of text: between heading and text instead */
.is-divider[style*="margin-top:-"] { margin-top: .2em !important; margin-bottom: 1em !important; }
/* the old footer's own back-to-top button: the site has one */
.site-footer .back-to-top { display: none; }
.is-divider.small { width: 30px; }

/* header */
.site-header { background: #fff; position: relative; z-index: 30; }
.head-row { display: flex; align-items: center; gap: 24px; min-height: 90px; }
.logo img { display: block; width: 210px; height: auto; }
.search { flex: 1; display: flex; max-width: 620px; position: relative; }
.search input[type=search] { flex: 1; height: 38px; border: 1px solid #ddd; border-radius: 99px; padding: 0 44px 0 16px; font: inherit; font-size: .9em; background: #fafafa; }
.search button { position: absolute; right: 3px; top: 3px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--primary); color: #fff; cursor: pointer; display: grid; place-items: center; }
.head-contact { display: flex; gap: 6px; list-style: none; margin: 0 0 0 auto; padding: 0; }
.head-contact a { display: grid; place-items: center; width: 40px; height: 40px; color: #555; }
.head-contact a:hover { color: var(--primary); }
.menu-toggle { display: none; border: 0; background: none; padding: 6px; cursor: pointer; color: #333; }
.site-menu { background: var(--nav-bg); border-top: 1px solid #e5e5e5; }
.site-menu ul { list-style: none; margin: 0; padding: 0; }
.site-menu > .container > ul { display: flex; flex-wrap: wrap; gap: 0 28px; }
.site-menu li { position: relative; }
.site-menu a { display: flex; align-items: center; gap: 6px; padding: 12px 0; color: #444; font: 700 .8em/1.2 "Sainte Colombe Bold", var(--serif); text-transform: uppercase; letter-spacing: .02em; }
.site-menu li.current > a, .site-menu a:hover { color: var(--primary); }
.menu-icon { width: 20px; height: 20px; object-fit: contain; }
.arr { font-size: .8em; opacity: .6; }
.sub-toggle { display: none; }
.site-menu li ul { position: absolute; left: -15px; top: 100%; min-width: 240px; background: #fff; box-shadow: 1px 1px 15px rgba(0, 0, 0, .15);
  padding: 8px 0; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s, transform .2s, visibility .2s; z-index: 40; }
.site-menu li ul ul { left: 100%; top: -8px; }
.site-menu li:hover > ul, .site-menu li:focus-within > ul { opacity: 1; visibility: visible; transform: none; }
.site-menu li ul a { padding: 9px 20px; font: 400 .9em/1.3 var(--serif); text-transform: none; color: #333; border-bottom: 1px solid #f3f3f3; }
.site-menu li ul .arr { margin-left: auto; transform: rotate(-90deg); }

/* footer: the old footer's own markup (part 2) on the old colours */
.site-footer { background: var(--foot-bg); padding: 30px 0 0; font-size: .9em; }
.site-footer > .row { padding-top: 10px; }
.site-footer h2 { font-size: 1em; text-transform: uppercase; margin-bottom: .8em; }
.site-footer .ux-menu-link__link { padding: 4px 0; color: #333; }
.site-footer .ux-menu-link__link:hover { color: var(--primary); }
.wa-float { position: fixed; right: 20px; bottom: 20px; width: 54px; height: 54px; border-radius: 50%; background: #25d366; color: #fff;
  display: grid; place-items: center; box-shadow: 0 3px 12px rgba(0, 0, 0, .25); z-index: 50; }
.wa-float:hover { color: #fff; transform: scale(1.06); }
.wa-float svg { width: 30px; height: 30px; }
.to-top { position: fixed; right: 26px; bottom: 86px; width: 40px; height: 40px; border-radius: 50%; border: 2px solid #ccc; background: #fff; color: #888;
  display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 49; }
.to-top.on { opacity: 1; pointer-events: auto; }

/* page titles, breadcrumbs, pager */
.page-title { background: #f7f7f7; padding: 22px 0; margin-bottom: 10px; }
.page-title h1 { margin: 0; font-size: 1.5em; text-transform: uppercase; }
.breadcrumbs { font-size: .85em; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: .6em; }
.breadcrumbs a { color: var(--muted); } .breadcrumbs a:hover { color: #000; } .breadcrumbs .sep { margin: 0 .35em; opacity: .5; }
.pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 30px 0; }
.pager a, .pager span { min-width: 2.2em; height: 2.2em; line-height: 2em; text-align: center; border: 2px solid #ddd; border-radius: 99px; color: #777; padding: 0 .5em; }
.pager .current, .pager a:hover { background: var(--primary); border-color: var(--primary); color: #fff; }

/* product lists */
.shop-head { padding: 22px 0 6px; }
.shop-head .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sort select { height: 36px; border: 1px solid #ddd; padding: 0 10px; font: inherit; font-size: .9em; background: #fff; }
.shop { padding-bottom: 30px; }
.shop-tools { display: flex; align-items: center; gap: 20px; } .shop-tools .result-count { margin: 0; }
.shop-head .breadcrumbs { font-size: 1.15em; margin: 0; } .shop-head .breadcrumbs span:last-child { color: #000; }
.sub-cats { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.sub-cats a { display: block; border: 1px solid #ddd; border-radius: 99px; padding: 4px 14px; font-size: .85em; color: #444; } .sub-cats a:hover { border-color: var(--primary); color: var(--primary); }
.term-description { margin-top: 30px; font-size: .95em; }
.side-title { font-size: 1em; text-transform: uppercase; border-bottom: 2px solid var(--line); padding-bottom: .5em; }
.side-cats { list-style: none; padding: 0; } .side-cats li { border-bottom: 1px solid var(--line); } .side-cats a { display: block; padding: 7px 0; color: #444; }
.result-count { color: var(--muted); font-size: .9em; }
.term-description { margin-bottom: 1.5em; }
.products { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.product-card { background: #fff; border-radius: 10px; padding: 15px; box-shadow: 0 2px 10px rgba(0, 0, 0, .05); text-align: center;
  transition: transform .3s, box-shadow .3s; display: flex; flex-direction: column; }
.product-card:hover { transform: translateY(-4px); box-shadow: 0 6px 18px rgba(0, 0, 0, .1); }
.pc-img { display: block; aspect-ratio: 1; overflow: hidden; background: #f6f6f6; }
.pc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.product-card:hover .pc-img img { transform: scale(1.06); }
.pc-text { padding-top: 10px; display: flex; flex-direction: column; flex: 1; text-align: left; }
.pc-cat { font-size: .7em; text-transform: uppercase; color: var(--muted); margin: 0 0 .2em; letter-spacing: .03em; }
.pc-title { font-size: .85em; line-height: 1.35; margin: 0 0 .8em; flex: 1; }
.pc-title a { color: #333; }
.pc-text .button { width: 100%; background: var(--brown); border-radius: 4px; text-transform: none; font-weight: 400; }
.pc-text .button:hover { background: #000; }

/* product page */
.product { padding-top: 24px; }
.product-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; margin-bottom: 30px; }
.g-main { position: relative; }
.g-slide { display: none; } .g-slide.on { display: block; }
.g-slide img { width: 100%; cursor: zoom-in; }
.g-thumbs { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.g-thumbs button { width: 80px; padding: 0; border: 2px solid transparent; background: none; cursor: pointer; opacity: .6; }
.g-thumbs button.on, .g-thumbs button:hover { opacity: 1; border-color: var(--primary); }
.product-title { font-size: 1.6em; }
.short-description ul { padding-left: 1.1em; } .short-description { font-size: .95em; }
.product-meta { font-size: .85em; color: var(--muted); border-top: 1px dashed #ddd; padding-top: .8em; }
.product-meta p { margin: 0 0 .3em; }
.share { font-size: .85em; }
.tab-heads { display: flex; justify-content: center; gap: 24px; border-top: 2px solid var(--line); }
.tab-heads button { border: 0; border-top: 2px solid transparent; margin-top: -2px; background: none; padding: 12px 0; font: 700 .8em var(--serif); text-transform: uppercase; color: var(--muted); cursor: pointer; }
.tab-heads button.on { border-top-color: var(--primary); color: #000; }
.tab-pane { display: none; padding: 24px 0; } .tab-pane.on { display: block; }
.description { max-width: 1100px; margin: 0 auto; }
.description img { display: block; margin: 1em auto; }
.attributes th { width: 200px; text-transform: uppercase; font-size: .85em; }
.related { border-top: 1px solid var(--line); padding: 24px 0 40px; }
.related h3 { text-transform: uppercase; font-size: 1em; }
.related-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lightbox { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 96vh; }
.lightbox::backdrop { background: rgba(0, 0, 0, .85); }
.lightbox img { max-width: 96vw; max-height: 92vh; display: block; }
.lb-close { position: fixed; top: 10px; right: 16px; font-size: 36px; color: #fff; background: none; border: 0; cursor: pointer; }

/* blog */
.blog-list { padding-top: 30px; padding-bottom: 30px; }
.list-title { text-transform: uppercase; font-size: 1.3em; }
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.post-card { text-align: center; }
.post-img { display: block; position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #f3f3f3; }
.post-img img { width: 100%; height: 100%; object-fit: cover; }
.badge { position: absolute; top: 10px; left: 10px; width: 46px; height: 46px; border: 2px solid var(--primary); background: #fff; color: var(--primary);
  font-size: .7em; line-height: 1.1; display: flex; flex-direction: column; justify-content: center; text-transform: uppercase; }
.badge b { font-size: 1.5em; }
.post-text { padding: 14px 10px; }
.post-text .is-divider { margin: .6em auto; }
.post-title { font-size: 1em; } .post-title a { color: #000; }
.excerpt { font-size: .9em; color: #555; }
.blog-single { max-width: 900px; padding-top: 30px; padding-bottom: 40px; }
.entry-header { text-align: center; }
.entry-header .is-divider { margin: 1em auto; }
.entry-cat { font-size: .8em; text-transform: uppercase; letter-spacing: .05em; }
.entry-meta { font-size: .8em; text-transform: uppercase; color: var(--muted); }
.entry-image { width: 100%; margin-bottom: 1.5em; }
.portfolio { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; padding-bottom: 40px; }
.portfolio-card { display: block; text-align: center; color: #333; } .portfolio-card span { display: block; padding: 8px 0; }

/* forms */
.contact-form input, .contact-form textarea, .not-found input { width: 100%; border: 1px solid #ddd; padding: 10px 12px; font: inherit; margin-bottom: 12px; background: #fff; }
.form-flat input, .form-flat textarea { border-radius: 99px; }
.hp { position: absolute !important; left: -9999px; }
.form-note { display: none; padding: 8px 12px; background: #f6f6f6; margin-top: 10px; }
form[data-state="sent"] .sent { display: block; border-left: 3px solid #7a9c59; }
form[data-state="error"] .failed { display: block; border-left: 3px solid #b20000; }
form[data-state="sending"] .button { opacity: .5; pointer-events: none; }

/* ---- part 2: Flatsome's builder classes, as the imported pages and footer use them ---- */
.built { overflow: hidden; }
.row { display: flex; flex-flow: row wrap; width: 100%; max-width: var(--width); margin: 0 auto; }
.row .row { margin: 0 -15px; width: auto; }
.row-collapse > .col, .row-collapse > .flickity-viewport > .flickity-slider > .col { padding: 0 !important; }
.row-small > .col { padding: 0 9.8px 19.6px; } .row-large > .col { padding: 0 30px 30px; }
.row-full-width { max-width: 100% !important; }
.align-middle { align-items: center !important; } .align-bottom { align-items: flex-end !important; } .align-center { justify-content: center !important; }
.align-equal > .col { display: flex; } .align-equal > .col > .col-inner { width: 100%; }
.col { position: relative; width: 100%; padding: 0 15px 30px; margin: 0; }
.col-inner { position: relative; width: 100%; background-position: 50% 50%; background-size: cover; }
.col.flex-right { margin-left: auto; }
.small-1 { flex-basis: 8.333%; max-width: 8.333%; } .small-2 { flex-basis: 16.667%; max-width: 16.667%; } .small-3 { flex-basis: 25%; max-width: 25%; }
.small-4 { flex-basis: 33.333%; max-width: 33.333%; } .small-6 { flex-basis: 50%; max-width: 50%; } .small-8 { flex-basis: 66.667%; max-width: 66.667%; }
.small-9 { flex-basis: 75%; max-width: 75%; } .small-12 { flex-basis: 100%; max-width: 100%; }
.small-columns-1 > .col { flex-basis: 100%; max-width: 100%; } .small-columns-2 > .col { flex-basis: 50%; max-width: 50%; }
@media (min-width: 550px) {
  .medium-1 { flex-basis: 8.333%; max-width: 8.333%; } .medium-2 { flex-basis: 16.667%; max-width: 16.667%; } .medium-3 { flex-basis: 25%; max-width: 25%; }
  .medium-4 { flex-basis: 33.333%; max-width: 33.333%; } .medium-5 { flex-basis: 41.667%; max-width: 41.667%; } .medium-6 { flex-basis: 50%; max-width: 50%; }
  .medium-7 { flex-basis: 58.333%; max-width: 58.333%; } .medium-8 { flex-basis: 66.667%; max-width: 66.667%; } .medium-9 { flex-basis: 75%; max-width: 75%; }
  .medium-10 { flex-basis: 83.333%; max-width: 83.333%; } .medium-12 { flex-basis: 100%; max-width: 100%; }
  .medium-columns-2 > .col { flex-basis: 50%; max-width: 50%; } .medium-columns-3 > .col { flex-basis: 33.333%; max-width: 33.333%; }
  .medium-columns-4 > .col { flex-basis: 25%; max-width: 25%; }
}
@media (min-width: 850px) {
  .large-1 { flex-basis: 8.333%; max-width: 8.333%; } .large-2 { flex-basis: 16.667%; max-width: 16.667%; } .large-3 { flex-basis: 25%; max-width: 25%; }
  .large-4 { flex-basis: 33.333%; max-width: 33.333%; } .large-5 { flex-basis: 41.667%; max-width: 41.667%; } .large-6 { flex-basis: 50%; max-width: 50%; }
  .large-7 { flex-basis: 58.333%; max-width: 58.333%; } .large-8 { flex-basis: 66.667%; max-width: 66.667%; } .large-9 { flex-basis: 75%; max-width: 75%; }
  .large-10 { flex-basis: 83.333%; max-width: 83.333%; } .large-11 { flex-basis: 91.667%; max-width: 91.667%; } .large-12 { flex-basis: 100%; max-width: 100%; }
  .large-columns-2 > .col { flex-basis: 50%; max-width: 50%; } .large-columns-3 > .col { flex-basis: 33.333%; max-width: 33.333%; }
  .large-columns-4 > .col { flex-basis: 25%; max-width: 25%; } .large-columns-5 > .col { flex-basis: 20%; max-width: 20%; }
  .large-columns-6 > .col { flex-basis: 16.667%; max-width: 16.667%; }
}
.section { position: relative; display: flex; flex-flow: row wrap; align-items: center; width: 100%; min-height: auto; padding: 30px 0; }
.section-bg { position: absolute; inset: 0; overflow: hidden; }
.bg-fill { background-size: cover !important; background-repeat: no-repeat !important; background-position: 50% 50%; }
.section-content { position: relative; width: 100%; z-index: 1; }
.dark, .dark p, .dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6, .dark a { color: #fff; }
.text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; }
.text-center .is-divider, .text-center > div > .is-divider { margin-left: auto; margin-right: auto; }
.uppercase { text-transform: uppercase; } .thin-font { font-weight: 300 !important; }
.relative { position: relative; } .absolute { position: absolute; } .fill { position: absolute; inset: 0; width: 100%; height: 100%; }
.inline-block { display: inline-block; } .block { display: block; } .flex { display: flex; } .z-1 { z-index: 21; }
.mb-0 { margin-bottom: 0 !important; } .pb-0 { padding-bottom: 0 !important; } .op-7 { opacity: .7; } .clearfix::after { content: ""; display: table; clear: both; }
.gap-element { display: block; height: auto; padding-top: 30px; }
.text > :last-child, .col-inner > :last-child { margin-bottom: 0; }
.img { position: relative; width: 100%; } .img .img-inner { position: relative; overflow: hidden; } .img-inner img { width: 100%; display: block; }
.image-cover { position: relative; height: auto; overflow: hidden; background-position: 50% 50%; background-size: cover; padding-top: 100%; }
.image-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.box { position: relative; width: 100%; margin: 0 auto; } .box-image { position: relative; margin: 0 auto; overflow: hidden; }
.box-image img { width: 100%; display: block; } .box-text { position: relative; width: 100%; padding: .7em 0 1.4em; font-size: .9em; }
.box-text-inner { } .box-text h5, .box-text .post-title { font-size: 1em; }
.box-blog-post .is-divider { height: 2px; margin: .5em 0; }
.box-text-bottom.box-blog-post .box-text { padding-top: 1em; }
.box-blog-post .badge { position: absolute; top: 7.5%; left: -1px; width: 2.8em; height: 2.8em; }
.badge-container { position: absolute; top: 10px; left: 0; z-index: 20; }
.badge-inner { background: #fff; border: 2px solid var(--primary); color: var(--primary); width: 2.8em; height: 2.8em; display: flex; flex-direction: column; justify-content: center; text-align: center; line-height: .9; font-size: .8em; }
.post-date-day { font-weight: 700; font-size: 1.2em; } .post-date-month { font-size: .7em; text-transform: uppercase; }
.from_the_blog_excerpt { font-size: .9em; color: #666; }
.hover-zoom img { transition: transform .5s; } .has-hover:hover .hover-zoom img { transform: scale(1.1); }
.show-on-hover { opacity: 0; transition: opacity .3s; } .has-hover:hover .show-on-hover { opacity: 1; }
.back-image { display: none; }
/* banners and text boxes on them */
.banner { position: relative; width: 100%; background-color: #446084; min-height: 30px; overflow: hidden; }
.banner-inner { position: absolute; inset: 0; }
.banner-bg { position: absolute; inset: 0; overflow: hidden; } .banner-bg img { width: 100%; height: 100%; object-fit: cover; }
.banner-layers { position: absolute; inset: 0; max-width: var(--width); margin: 0 auto; }
.banner-layers.container { padding: 0; }
.overlay { position: absolute; inset: 0; pointer-events: none; }
.text-box { position: absolute; max-height: 100%; transform: translate(var(--tx, 0), var(--ty, 0)); z-index: 2; }
.text-box-content { position: relative; } .text-inner { position: relative; padding: 0 1em; }
.banner-link { z-index: 1; }
/* the builder's layer positions: x50 is the middle, x5 near the left edge */
.x0 { left: 0%; --tx: -0%; } .y0 { top: 0%; --ty: -0%; }
.x5 { left: 5%; --tx: -5%; } .y5 { top: 5%; --ty: -5%; }
.x10 { left: 10%; --tx: -10%; } .y10 { top: 10%; --ty: -10%; }
.x15 { left: 15%; --tx: -15%; } .y15 { top: 15%; --ty: -15%; }
.x20 { left: 20%; --tx: -20%; } .y20 { top: 20%; --ty: -20%; }
.x25 { left: 25%; --tx: -25%; } .y25 { top: 25%; --ty: -25%; }
.x30 { left: 30%; --tx: -30%; } .y30 { top: 30%; --ty: -30%; }
.x35 { left: 35%; --tx: -35%; } .y35 { top: 35%; --ty: -35%; }
.x40 { left: 40%; --tx: -40%; } .y40 { top: 40%; --ty: -40%; }
.x45 { left: 45%; --tx: -45%; } .y45 { top: 45%; --ty: -45%; }
.x50 { left: 50%; --tx: -50%; } .y50 { top: 50%; --ty: -50%; }
.x55 { left: 55%; --tx: -55%; } .y55 { top: 55%; --ty: -55%; }
.x60 { left: 60%; --tx: -60%; } .y60 { top: 60%; --ty: -60%; }
.x65 { left: 65%; --tx: -65%; } .y65 { top: 65%; --ty: -65%; }
.x70 { left: 70%; --tx: -70%; } .y70 { top: 70%; --ty: -70%; }
.x75 { left: 75%; --tx: -75%; } .y75 { top: 75%; --ty: -75%; }
.x80 { left: 80%; --tx: -80%; } .y80 { top: 80%; --ty: -80%; }
.x85 { left: 85%; --tx: -85%; } .y85 { top: 85%; --ty: -85%; }
.x90 { left: 90%; --tx: -90%; } .y90 { top: 90%; --ty: -90%; }
.x95 { left: 95%; --tx: -95%; } .y95 { top: 95%; --ty: -95%; }
.x100 { left: 100%; --tx: -100%; } .y100 { top: 100%; --ty: -100%; }
/* icon boxes */
.featured-box { position: relative; } .icon-box { display: flex; gap: 15px; } .icon-box-left { align-items: flex-start; }
.icon-box-img { flex-shrink: 0; } .icon-box-img img { width: 100%; } .icon-box-text { flex: 1; }
.icon-box.text-center { flex-direction: column; align-items: center; }
.icon.circle, .icon-inner.circle { border-radius: 50%; }
/* logos and sliders: a row that scrolls sideways (the old theme's slider script is gone) */
.ux-logo { display: inline-block; } .ux-logo-link { display: block; padding: 10px; } .ux-logo-image { max-height: 100%; width: auto; }
.slider, .row-slider { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.slider > *, .row-slider > .col { flex: 0 0 auto; scroll-snap-align: start; }
.slider:not(.row) > * { width: 100%; }
.loading-spin, .flickity-page-dots, .flickity-prev-next-button { display: none !important; }
/* testimonials */
.testimonial-box { position: relative; } .testimonial-image { width: 80px; } .testimonial-image img { border-radius: 50%; }
.testimonial-text { font-style: italic; } .testimonial-meta { font-size: .85em; } .star-rating, .stars { color: #f5a623; }
.product-small.box .box-text { text-align: left; } .product-small .price-wrapper { display: none; }
.product-small .add-to-cart-button a { display: block; width: 100%; margin: .6em 0 0; background: var(--brown); color: #fff; border-radius: 4px; text-align: center; font-size: .8em; line-height: 2.4em; padding: 0 1em; } .product-small .add-to-cart-button a:hover { background: #000; }
.product-small .category { font-size: .7em; text-transform: uppercase; color: var(--muted); }
.product-small .name { font-size: .85em; }
.ux-menu-link__link { display: flex; align-items: center; } .stack-col { display: flex; flex-direction: column; }
.follow-icons, .social-icons { display: flex; gap: 6px; flex-wrap: wrap; } .social-icons a, .follow-icons a { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 2px solid currentColor; color: #999; font-size: 12px; }
/* the old theme's icon font, as small pictures: an <i class="icon-..."> in the imported pages */
[class^="icon-"]:not(.icon-box):not(.icon-box-img):not(.icon-box-text):not(.icon-inner) { display: inline-block; width: 1em; height: 1em; background: currentColor; vertical-align: middle; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.icon-facebook { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M14 8h3V4h-3c-2.8 0-4.5 1.8-4.5 4.6V11H7v4h2.5v9h4v-9h3l.5-4h-3.5V8.8c0-.5.3-.8.5-.8z%27/%3E%3C/svg%3E"); }
.icon-instagram { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M12 7.2a4.8 4.8 0 1 0 0 9.6 4.8 4.8 0 0 0 0-9.6zm0 7.9a3.1 3.1 0 1 1 0-6.2 3.1 3.1 0 0 1 0 6.2zM17 5.8a1.1 1.1 0 1 0 0 2.2 1.1 1.1 0 0 0 0-2.2zM20.9 7.6c-.1-1.6-.4-3-1.6-4.2S16.6 1.9 15 1.8c-1.6-.1-6.4-.1-8 0-1.6.1-3 .4-4.2 1.6S1.2 6 1.1 7.6c-.1 1.6-.1 6.4 0 8 .1 1.6.4 3 1.6 4.2s2.6 1.5 4.2 1.6c1.6.1 6.4.1 8 0 1.6-.1 3-.4 4.2-1.6s1.5-2.6 1.6-4.2c.1-1.6.1-6.4 0-8zM19 17.3a3.2 3.2 0 0 1-1.8 1.8c-1.3.5-4.3.4-5.2.4s-3.9.1-5.2-.4a3.2 3.2 0 0 1-1.8-1.8c-.5-1.3-.4-4.3-.4-5.3s-.1-3.9.4-5.3a3.2 3.2 0 0 1 1.8-1.8C8.1 4.5 11 4.6 12 4.6s3.9-.1 5.2.4a3.2 3.2 0 0 1 1.8 1.8c.5 1.3.4 4.3.4 5.3s.1 3.9-.4 5.2z%27/%3E%3C/svg%3E"); }
.icon-x { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M17.8 3h3.1l-6.8 7.8 8 10.6h-6.3l-4.9-6.4L5.3 21.4H2.2l7.3-8.3L1.8 3h6.4l4.4 5.9L17.8 3zm-1.1 16.5h1.7L7.4 4.8H5.6l11.1 14.7z%27/%3E%3C/svg%3E"); }
.icon-pinterest { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M12 2a10 10 0 0 0-3.6 19.3c-.1-.8-.2-2 0-2.9l1.2-5s-.3-.6-.3-1.5c0-1.4.8-2.4 1.8-2.4.8 0 1.2.6 1.2 1.4 0 .9-.5 2.1-.8 3.3-.2 1 .5 1.8 1.5 1.8 1.8 0 3.2-1.9 3.2-4.6 0-2.4-1.7-4.1-4.2-4.1-2.9 0-4.5 2.2-4.5 4.4 0 .9.3 1.8.7 2.3.1.1.1.2.1.3l-.3 1.1c0 .2-.2.2-.4.1-1.3-.6-2.1-2.5-2.1-4 0-3.2 2.3-6.2 6.8-6.2 3.6 0 6.3 2.6 6.3 6 0 3.6-2.2 6.4-5.4 6.4-1 0-2-.5-2.4-1.2l-.6 2.4c-.2.9-.9 2-1.3 2.7A10 10 0 1 0 12 2z%27/%3E%3C/svg%3E"); }
.icon-youtube { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M23 7.2a3 3 0 0 0-2.1-2.1C19 4.6 12 4.6 12 4.6s-7 0-8.9.5A3 3 0 0 0 1 7.2 31 31 0 0 0 .5 12a31 31 0 0 0 .5 4.8 3 3 0 0 0 2.1 2.1c1.9.5 8.9.5 8.9.5s7 0 8.9-.5a3 3 0 0 0 2.1-2.1 31 31 0 0 0 .5-4.8 31 31 0 0 0-.5-4.8zM9.7 15V9l5.8 3-5.8 3z%27/%3E%3C/svg%3E"); }
.icon-envelop { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm9 7.2L4 7.4V17h16V7.4l-8 4.8zM5.4 7l6.6 4 6.6-4H5.4z%27/%3E%3C/svg%3E"); }
.icon-play { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M7 4.5v15l12.5-7.5z%27/%3E%3C/svg%3E"); }
.icon-angle-up { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M12 8l7 7-1.4 1.4L12 10.8l-5.6 5.6L5 15z%27/%3E%3C/svg%3E"); }
.social-icons a i, .follow-icons a i { font-size: 15px; }
.social-icons a:hover, .follow-icons a:hover { color: #fff; background: var(--primary); border-color: var(--primary); }
/* the video box: its picture, a play button in a white ring on top (an .absolute layer at x50 y50) */
.absolute { transform: translate(var(--tx, 0), var(--ty, 0)); } .no-click { pointer-events: none; }
.overlay-icon { width: 64px; height: 64px; border: 2px solid #fff; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(0, 0, 0, .15); }
.overlay-icon .icon-play { font-size: 26px; margin-left: 4px; }
/* the feature icons in their gold circles (the page sets the colour and border width on .icon-inner) */
.has-icon-bg .icon-inner { border-style: solid; border-color: currentColor; border-radius: 50%; padding: 18%; }
.hide-for-small { } .show-for-small { display: none; }
.video { position: relative; } .video-fit { aspect-ratio: 16 / 9; } .video-fit iframe { width: 100%; height: 100%; }

/* phones and tablets */
@media (max-width: 849px) {
  .head-row { min-height: 70px; gap: 10px; }
  .menu-toggle { display: block; }
  .logo { margin: 0 auto; } .logo img { width: 170px; }
  .search, .head-contact { display: none; }
  .site-menu { display: none; border: 0; }
  .site-menu.open { display: block; }
  .site-menu > .container > ul { flex-direction: column; gap: 0; }
  .site-menu li ul { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; display: none; padding: 0 0 0 15px; background: none; }
  .site-menu li.open > ul { display: block; }
  .site-menu .arr { display: none; }
  .sub-toggle { display: block; position: absolute; right: 0; top: 4px; border: 0; background: none; font-size: 1em; padding: 8px 12px; cursor: pointer; }
  .products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .product-top { grid-template-columns: 1fr; }
  .posts, .portfolio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .related-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 549px) {
  .hide-for-small { display: none !important; } .show-for-small { display: block; }
  .products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .posts, .portfolio { grid-template-columns: 1fr; }
  .product-card { padding: 8px; }
  /* a banner grows with its text on a phone (Flatsome shrank the text; a fixed height cut long headings off) */
  .banner { padding-top: 0 !important; min-height: 180px; display: flex; align-items: center; }
  .banner-inner { position: relative; inset: auto; width: 100%; }
  .banner-layers { position: relative; }
  .text-box { position: relative; left: auto !important; top: auto !important; transform: none; width: 100% !important; padding: 24px 0; }
  .res-text { font-size: .8em; }
  h1 { font-size: 1.4em; } h2 { font-size: 1.3em; }
}