@charset "UTF-8";

:root {
    --pico-color-red-950:  #1c0d06;
    --pico-color-red-900:  #30130a;
    --pico-color-red-850:  #45150c;
    --pico-color-red-800:  #5c160d;
    --pico-color-red-750:  #72170f;
    --pico-color-red-700:  #861d13;
    --pico-color-red-650:  #9b2318;
    --pico-color-red-600:  #af291d;
    --pico-color-red-550:  #c52f21;
    --pico-color-red-500:  #d93526;
    --pico-color-red-450:  #ee402e;
    --pico-color-red-400:  #f06048;
    --pico-color-red-350:  #f17961;
    --pico-color-red-300:  #f38f79;
    --pico-color-red-250:  #f5a390;
    --pico-color-red-200:  #f5b7a8;
    --pico-color-red-150:  #f6cabf;
    --pico-color-red-100:  #f8dcd6;
    --pico-color-red-50:  #faeeeb;
    --pico-color-red:  #c52f21;
    --pico-color-cyan-950:  #041413;
    --pico-color-cyan-900:  #051f1f;
    --pico-color-cyan-850:  #052b2b;
    --pico-color-cyan-800:  #043737;
    --pico-color-cyan-750:  #014343;
    --pico-color-cyan-700:  #015050;
    --pico-color-cyan-650:  #025d5d;
    --pico-color-cyan-600:  #046a6a;
    --pico-color-cyan-550:  #047878;
    --pico-color-cyan-500:  #058686;
    --pico-color-cyan-450:  #059494;
    --pico-color-cyan-400:  #05a2a2;
    --pico-color-cyan-350:  #0ab1b1;
    --pico-color-cyan-300:  #0ac2c2;
    --pico-color-cyan-250:  #0ccece;
    --pico-color-cyan-200:  #25dddd;
    --pico-color-cyan-150:  #3deceb;
    --pico-color-cyan-100:  #58faf9;
    --pico-color-cyan-50:  #c3fcfa;
    --pico-color-jade-950:  #04140c;
    --pico-color-jade-900:  #052014;
    --pico-color-jade-850:  #042c1b;
    --pico-color-jade-800:  #033823;
    --pico-color-jade-750:  #00452b;
    --pico-color-jade-700:  #015234;
    --pico-color-jade-650:  #005f3d;
    --pico-color-jade-600:  #006d46;
    --pico-color-jade-550:  #007a50;
    --pico-color-jade-500:  #00895a;
    --pico-color-jade-450:  #029764;
    --pico-color-jade-400:  #00a66e;
    --pico-color-jade-350:  #00b478;
    --pico-color-jade-300:  #00c482;
    --pico-color-jade-250:  #00cc88;
    --pico-color-jade-200:  #21e299;
    --pico-color-jade-150:  #39f1a6;
    --pico-color-jade-100:  #70fcba;
    --pico-color-jade-50:  #cbfce1;
    --pico-color-jade:  #007a50;
    --pico-color-yellow-950:  #141103;
    --pico-color-yellow-900:  #1f1c02;
    --pico-color-yellow-850:  #2b2600;
    --pico-color-yellow-800:  #363100;
    --pico-color-yellow-750:  #423c00;
    --pico-color-yellow-700:  #4e4700;
    --pico-color-yellow-650:  #5b5300;
    --pico-color-yellow-600:  #685f00;
    --pico-color-yellow-550:  #756b00;
    --pico-color-yellow-500:  #827800;
    --pico-color-yellow-450:  #908501;
    --pico-color-yellow-400:  #9e9200;
    --pico-color-yellow-350:  #ad9f00;
    --pico-color-yellow-300:  #bbac00;
    --pico-color-yellow-250:  #caba01;
    --pico-color-yellow-200:  #d9c800;
    --pico-color-yellow-150:  #e8d600;
    --pico-color-yellow-100:  #f2df0d;
    --pico-color-yellow-50:  #fdf1b4;
    --pico-color-yellow:  #f2df0d;
    --pico-color-amber-950:  #161003;
    --pico-color-amber-900:  #231a03;
    --pico-color-amber-850:  #312302;
    --pico-color-amber-800:  #3f2d00;
    --pico-color-amber-750:  #4d3700;
    --pico-color-amber-700:  #5b4200;
    --pico-color-amber-650:  #694d00;
    --pico-color-amber-600:  #785800;
    --pico-color-amber-550:  #876400;
    --pico-color-amber-500:  #977000;
    --pico-color-amber-450:  #a77c00;
    --pico-color-amber-400:  #b78800;
    --pico-color-amber-350:  #c79400;
    --pico-color-amber-300:  #d8a100;
    --pico-color-amber-250:  #e8ae01;
    --pico-color-amber-200:  #ffbf00;
    --pico-color-amber-150:  #fecc63;
    --pico-color-amber-100:  #fddea6;
    --pico-color-amber-50:  #fcefd9;
    --pico-color-amber:  #ffbf00;
    --pico-color-pumpkin-950:  #180f04;
    --pico-color-pumpkin-900:  #271805;
    --pico-color-pumpkin-850:  #372004;
    --pico-color-pumpkin-800:  #482802;
    --pico-color-pumpkin-750:  #593100;
    --pico-color-pumpkin-700:  #693a00;
    --pico-color-pumpkin-650:  #7a4400;
    --pico-color-pumpkin-600:  #8b4f00;
    --pico-color-pumpkin-550:  #9c5900;
    --pico-color-pumpkin-500:  #ad6400;
    --pico-color-pumpkin-450:  #bf6e00;
    --pico-color-pumpkin-400:  #d27a01;
    --pico-color-pumpkin-350:  #e48500;
    --pico-color-pumpkin-300:  #ff9500;
    --pico-color-pumpkin-250:  #ffa23a;
    --pico-color-pumpkin-200:  #feb670;
    --pico-color-pumpkin-150:  #fcca9b;
    --pico-color-pumpkin-100:  #fcdcc1;
    --pico-color-pumpkin-50:  #fceee3;
    --pico-color-pumpkin:  #ff9500;
    --pico-color-orange-950:  #1b0d06;
    --pico-color-orange-900:  #2d1509;
    --pico-color-orange-850:  #411a0a;
    --pico-color-orange-800:  #561e0a;
    --pico-color-orange-750:  #6b220a;
    --pico-color-orange-700:  #7f270b;
    --pico-color-orange-650:  #942d0d;
    --pico-color-orange-600:  #a83410;
    --pico-color-orange-550:  #bd3c13;
    --pico-color-orange-500:  #d24317;
    --pico-color-orange-450:  #e74b1a;
    --pico-color-orange-400:  #f45d2c;
    --pico-color-orange-350:  #f56b3d;
    --pico-color-orange-300:  #f68e68;
    --pico-color-orange-250:  #f8a283;
    --pico-color-orange-200:  #f8b79f;
    --pico-color-orange-150:  #f8cab9;
    --pico-color-orange-100:  #f9dcd2;
    --pico-color-orange-50:  #faeeea;
    --pico-color-orange:  #d24317;
    --pico-color-grey-950:  #111111;
    --pico-color-grey-900:  #1b1b1b;
    --pico-color-grey-850:  #262626;
    --pico-color-grey-800:  #303030;
    --pico-color-grey-750:  #3b3b3b;
    --pico-color-grey-700:  #474747;
    --pico-color-grey-650:  #525252;
    --pico-color-grey-600:  #5e5e5e;
    --pico-color-grey-550:  #6a6a6a;
    --pico-color-grey-500:  #777777;
    --pico-color-grey-450:  #808080;
    --pico-color-grey-400:  #919191;
    --pico-color-grey-350:  #9e9e9e;
    --pico-color-grey-300:  #ababab;
    --pico-color-grey-250:  #b9b9b9;
    --pico-color-grey-200:  #c6c6c6;
    --pico-color-grey-150:  #d4d4d4;
    --pico-color-grey-100:  #e2e2e2;
    --pico-color-grey-50:  #f1f1f1;
    --pico-color-grey:  #ababab;
    --pico-color-slate-600: #525F7A;
    --pico-color: var(--pico-color-slate-600)!important;
}
:root {
    --font-family-heading:  Fraunces,  -apple-system,  BlinkMacSystemFont,  "Segoe UI",  Roboto,  "Helvetica Neue",  Arial,  sans-serif,  "Apple Color Emoji",  "Segoe UI Emoji",  "Segoe UI Symbol";
    --font-family-body:  "Lato",  -apple-system,  BlinkMacSystemFont,  "Segoe UI",  Roboto,  "Helvetica Neue",  Arial,  sans-serif,  "Apple Color Emoji",  "Segoe UI Emoji",  "Segoe UI Symbol";
    --font-family-accent:  Fraunces,  -apple-system,  BlinkMacSystemFont,  "Segoe UI",  Roboto,  "Helvetica Neue",  Arial,  sans-serif,  "Apple Color Emo";
    --font-family-menu:  "Fira Sans Extra Condensed",  -apple-system,  BlinkMacSystemFont,  "Segoe UI",  Roboto,  "Helvetica Neue",  Arial,  sans-serif,  "Apple Color Emoji",  "Segoe UI Emoji",  "Segoe UI Symbol";
    --font-weight-heading:  600;
    --font-weight-body:  400;
    --font-weight-accent:  500;
    --font-style-heading:  normal;
    --font-style-body:  normal;
    --font-style-accent:  italic;
    --font-size-h1:  2rem;
    --font-size-h2:  1.75rem;
    --font-size-h3:  1.5rem;
    --font-size-h4:  1.25rem;
    --font-size-h5:  1.125rem;
    --font-size-h6:  1rem;
    --color-fg:  #000;
    --color-bg:  var(--pico-color-grey-50);
    --link-color:  var(--pico-color-red-400);
    --link-color-hover:  var(--pico-color-red-600);
    --menu-link-color:  var(--pico-color-red-600);
    --menu-link-color-hover:  var(--pico-color-red-400);
    --color-heading:  var(--pico-color-cyan-650);
    --color-accent:  var(--pico-color-cyan-550);
    --btn-bg:  var(--link-color);
    --btn-text:  #FFF;
    --btn-border:  var(--link-color-hover);
    --btn-bg-hover:  var(--link-color-hover);
    --btn-text-hover:  #FFF;
    --btn-border-hover:  #FFF;
    --training-gold:  oklch(65% 0.13 84);
    --training-red:  oklch(45% 0.14 33);
    --brand-primary:  var(--training-gold);
    --brand-secondary:  var(--training-red);
    --primary:  oklch(from var(--brand-primary) 60% calc(c * 1.16) h);
    --primary-background:  oklch(from var(--brand-primary) 70% calc(c * 1.15) h);
    --primary-underline:  oklch(from var(--brand-primary) 60% calc(c * 1.16) h / 0.5);
    --primary-hover:  oklch(from var(--brand-primary) 40% calc(c / 1.23) h);
    --primary-hover-background:  oklch(from var(--brand-primary) 60% calc(c * 1.16) h);
    --primary-focus:  oklch(from var(--brand-primary) 70% calc(c * 1.15) h / 0.5);
    --primary-text-selection-color:  oklch(from var(--brand-primary) 70% calc(c * 1.15) h / 0.25);
    --primary-inverse:  oklch(from var(--brand-primary) 99% calc(c / 9) h);
    --primary-switch-thumb-box-shadow:  oklch(from var(--brand-primary) 15% calc(c / 3.5) h / 0.25);
    --background-color:  var(--primary-inverse);
    --color:  oklch(from var(--brand-primary) 15% calc(c / 3.5) h);
    background-color: var(--background-color);
    color: var(--color);
    --navbar-height:  85px;
}
.dark.primary {
    --primary:  var(--brand-primary);
    --primary-background:  oklch(from var(--brand-primary) 60% calc(c * 1.16) h);
    --primary-underline:  oklch(from var(--brand-primary) 80% calc(c * 1.1) h / 0.5);
    --primary-hover:  oklch(from var(--brand-primary) 80% calc(c * 1.1) h);
    --primary-hover-background:  oklch(from var(--brand-primary) 70% calc(c * 1.15) h);
    --primary-focus:  oklch(from var(--brand-primary) 80% calc(c * 1.1) h / 0.375);
    --primary-text-selection-color:  oklch(from var(--brand-primary) 80% calc(c * 1.1) h / 0.1875);
    --primary-inverse:  oklch(from var(--brand-primary) 15% calc(c / 3.5) h);
    --primary-switch-thumb-box-shadow:  oklch(from var(--brand-primary) 75% calc(c / 3.5) h / 0.15);
    --background-color:  var(--primary-inverse);
    --color:  oklch(from var(--brand-primary) 95% calc(c / 4) h);
    background-color: var(--background-color);
    color: var(--color);
}
.dark.secondary {
    --secondary:  var(--brand-secondary);
    --secondary-background:  oklch(from var(--brand-secondary) 60% calc(c * 1.16) h);
    --secondary-underline:  oklch(from var(--brand-secondary) 80% calc(c * 1.1) h / 0.5);
    --secondary-hover:  oklch(from var(--brand-secondary) 80% calc(c * 1.1) h);
    --secondary-hover-background:  oklch(from var(--brand-secondary) 70% calc(c * 1.15) h);
    --secondary-focus:  oklch(from var(--brand-secondary) 80% calc(c * 1.1) h / 0.375);
    --secondary-text-selection-color:  oklch(from var(--brand-secondary) 80% calc(c * 1.1) h / 0.1875);
    --secondary-inverse:  oklch(from var(--brand-secondary) 15% calc(c / 3.5) h);
    --secondary-switch-thumb-box-shadow:  oklch(from var(--brand-secondary) 75% calc(c / 3.5) h / 0.15);
    --background-color:  var(--secondary-inverse);
    --color:  oklch(from var(--brand-secondary) 95% calc(c / 4) h);
    background-color: var(--background-color);
    color: var(--color);
}

.Quattrocento-Raleway {
    --font-family-body:  "Raleway",  -apple-system,  BlinkMacSystemFont,  "Segoe UI",  "Roboto",  "Helvetica Neue",  Arial,  sans-serif,  "Apple Color Emoji",  "Segoe UI Emoji",  "Segoe UI Symbol";
    --font-weight-heading:  700;
    --font-weight-body:  500;
    --font-weight-accent:  500;
    --font-style-heading:  normal;
    --font-style-body:  normal;
    --font-style-accent:  italic;
}
.Playfair-SourceSans {
    --font-family-body:  "Source Sans 3",  -apple-system,  BlinkMacSystemFont,  "Segoe UI",  "Roboto",  "Helvetica Neue",  Arial,  sans-serif,  "Apple Color Emoji",  "Segoe UI Emoji",  "Segoe UI Symbol";
    --font-weight-heading:  600;
    --font-weight-body:  400;
    --font-weight-accent:  500;
    --font-style-heading:  normal;
    --font-style-body:  normal;
    --font-style-accent:  italic;
}
body, html {
    height: auto;
}
body {
    background-color: var(--color-bg);
    color: var(--color-fg);
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-body);
    font-style: var(--font-style-body);
    font-optical-sizing: auto;
    font-synthesis: none;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    height: auto;
    overflow-y: scroll;
}
section {
    margin-bottom: 60px;
}
section.hero {
    margin-bottom: 0;
    max-height: 28vh;
    overflow: hidden;
}
.pagination .pagination-item {
    flex: 1 0 49%;
    margin: 0 .1rem 1rem;
}
.pagination .pagination-item:hover h1, .pagination .pagination-item:hover h2, .pagination .pagination-item:hover h3, .pagination .pagination-item:hover h4, .pagination .pagination-item:hover h5, .pagination .pagination-item:hover h6, .pagination .pagination-item:hover p, .pagination .pagination-item:not(.selected):hover :not([disabled]):not(.disabled):not(.ellipses) {
    color: unset;
    text-decoration: none;
}
.pagination .pagination-item p, .pagination .pagination-item h6 {
    color: color-mix(in hsl, var(--color-heading), #FFF 50%);
}
.pagination .pagination-item:hover p.pagination-item-subtitle, .pagination .pagination-item:active p.pagination-item-subtitle, .pagination .pagination-item:not(.selected):hover :not([disabled]):not(.disabled):not(.ellipses) p.pagination-item-subtitle {
    color: var(--link-color-hover);
}
.pagination .pagination-item:hover h6.pagination-item-title, .pagination .pagination-item:active h6.pagination-item-title, .pagination .pagination-item:not(.selected):hover :not([disabled]):not(.disabled):not(.ellipses) h6.pagination-item-title {
    color: color-mix(in hsl, var(--color-heading), #FFF 20%);
}
.pagination .pagination-item .pagination-item-subtitle {
    text-align: unset;
    font-size: 2em;
    line-height: 1;
    font-family: none;
}
footer.footer {
    display: grid;
    text-align: center;
    background-color: #e5e5e5;
}
.content {
    width: 100%;
    margin-inline: auto;
}
@media screen and (max-width:575px) {
    .content {
        text-align: center;
    }
}
figure.inline img {
    object-fit: cover;
}
figure.inline {
    max-width: 100%;
    margin-inline: auto;
    display: inline-block;
    margin-top: 0.4rem;
    margin-bottom: 0.5rem;
    background-color: transparent;
    text-align: center;
}
@media screen and (min-width:576px) {
    figure.inline {
    max-width: 35vw;
    float: left;
    margin-right: 1rem;
    margin-left: auto;
}
}
/* @media screen and (min-width:768px) {
    .page-home .content {
    max-width: 80%;
    margin-inline: auto;
}
} */
@media screen and (min-width:1024px) {
   /* .page-home .content {
    max-width: 66%
} */
figure.inline {
    max-width: 33vw;
    float: left;
    margin-right: 1rem;
}
}
.content:has(.cards) {
    max-width: 100%
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-heading);
    font-style: var(--font-style-heading);
    color: var(--color-heading);
    margin-bottom: 0.66em;
}
h1 {
    font-size: var(--font-size-h1);
    color: var(--menu-link-color);
}
h2 {
    font-size: var(--font-size-h2);
}
h3 {
    font-size: var(--font-size-h3);
}
h4 {
    font-size: var(--font-size-h4);
}
h5 {
    font-size: var(--font-size-h5);
}
h6 {
    font-size: var(--font-size-h6);
}
.subtitle {
    font-family: var(--font-family-accent);
    font-weight: var(--font-weight-accent);
    font-style: var(--font-style-accent);
    color: var(--color-accent);
    margin-top: -0.66rem;
}
h2+.subtitle {
    font-size: calc(var(--font-size-h2) / 1.5);
}
h3+.subtitle {
    font-size: calc(var(--font-size-h3) / 1.5);
}
h4+.subtitle {
    font-size: calc(var(--font-size-h4) / 1.5);
}
h5+.subtitle {
    font-size: calc(var(--font-size-h5) / 1.5);
}
h6+.subtitle {
    font-size: calc(var(--font-size-h6) / 1.5);
}
a {
    color: var(--link-color);
}
a:hover, a:active {
    color: var(--link-color-hover);
    text-decoration: dotted underline;
}
article, blockquote, p {
    line-height: 1.5;
    margin-bottom: 0;
}
p {
    max-width: 75ch;
    font-size: 1rem;
    text-align: left;
    margin-bottom: 1em;
    margin-inline: auto;
}
.nowrap {
  white-space: nowrap;
}
:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}
footer p {
    font-size: 0.85rem;
    max-width: 100%;
}
body>header {
    position: relative;
    padding: 0;
    padding-top: 0;
}
header .logo {
    flex-shrink: 1;
}
.logo h3 {
    font-family: var(--font-family-body);
    font-weight: 400;
    margin-block: 0;
}
.logo img {
    height: 60px;
}  
.header .header-brand {
    justify-content: space-between;
}
header nav {
    font-family: var(--font-family-menu);
}
.site-navbar {
    align-items: center;
}
header nav a {
    color: var(--menu-link-color);
    font-weight: 400;
    font-size: 1.1em;
}
header .current a, header .current a:hover {
    color: var(--pico-primary-hover);
}
header a:hover, header a:focus {
    color: var(--menu-link-color-hover);
    text-decoration: none;
}
header .current a {
    color: var(--menu-link-color-hover);
    text-decoration: solid underline;
}
header .current a:hover {
    text-decoration: solid underline;
}
/* nav-toggler css start */

.nav-toggler {
    border: 3px solid #000;
    padding: 5px;
    background-color: transparent;
    cursor: pointer;
    height: 39px;
    display: none;
}
.nav-toggler span, .nav-toggler span:before, .nav-toggler span:after {
    width: 28px;
    height: 3px;
    background-color: #000;
    display: block;
    transition: 0.3s;
}
.nav-toggler span:before {
    content: "";
    transform: translateY(-9px);
}
.nav-toggler span:after {
    content: "";
    transform: translateY(6px);
}
.nav-toggler.toggler-open span {
    background-color: transparent;
}
.nav-toggler.toggler-open span:before {
    transform: translateY(0px) rotate(45deg);
}
.nav-toggler.toggler-open span:after {
    transform: translateY(-3px) rotate(-45deg);
}
/* nav-toggler css end */

/* MOBILE BREAKPOINT START */

    /*  THIS BREAKS WITH TOO MANY LIs or SHORT PAGE CONTENT */
    /*   NEED TO GET HEIGHT OF NAV WITH JS */

@media screen and (max-width:767px) {
.nav-toggler {
    display: block;
}
.site-navbar {
    min-height: var(--navbar-height);
}
.site-navbar ul.main-menu {
    position: absolute;
    z-index: 9;
    width: 100%;
    left: 0;
    top: var(--navbar-height);
    flex-direction: column;
    align-items: center;
    border-top: 1px solid var(--primary-underline-tint);
    background-color: var(--pico-primary-background);
    max-height: 0;
    overflow: hidden;
    transition: ease-in 0.2s;
}
.site-navbar ul.main-menu li {
    display: block;
    width: 100%;
    padding: 0;
    text-align: center;
    border-bottom: 1px solid var(--primary-underline-tint);
    opacity: 0;
    transition: ease-in 0.2s;
}
.site-navbar ul.main-menu li a {
    color: #FFF;
    font-size: 1rem;
    padding: 1.25rem;
    display: block;
    margin: 0;
}
.site-navbar ul.main-menu li a:hover {
    text-decoration: none;
}
.site-navbar ul.main-menu.open {
    max-height: calc(100% + var(--navbar-height));
    overflow: visible;
    transition: ease-out 0.5s;
}
.site-navbar ul.main-menu.open li {
    opacity: 1;
    transition: ease-out 0.5s;
}
}

/* mobile breakpoint end */


.hero .hero-body.hero-img {
    padding: 0;
}

/* .hero, .hero .hero-body {
    display: -webkit-flex;
    display: flex;
}
.hero {
    -webkit-align-items: stretch;
    align-items: stretch;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
.hero .hero-body {
    -webkit-flex-grow: 1;
    flex-grow: 1;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    padding: 3rem 1.5rem;
    -webkit-align-items: center;
    align-items: center;
    width: 100%} */

/* #splash-img, .newsletter {
    overflow: hidden;
    position: relative;
    min-height: 28vh;
}
#splash-img:before, .newsletter:before {
    content: " ";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: var(--color-heading);
    background-image: url(maine-pool-2000.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    will-change: transform;
} */
/* @media screen and (min-width:1280px) {
    .hero .content {
    max-width: 60%
}
} */
.credit {
    font-size: 0.75rem;
    line-height: 1.5rem;
    text-align: right;
    margin-right: 1rem;
}
.container {
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    padding: 2rem 8px;
    box-sizing: border-box;
}
@media only screen and (min-width:500px) {
  .container {
    padding: 2rem 20px;
  }
}
@media only screen and (min-width:740px) {
  .container {
    padding: 2rem 60px;
  }
}
@media only screen and (min-width:1200px) {
  .container {
    padding: 2rem 120px;
  }
}

.home-gallery-image img {
    max-height: 65vh;
    margin: auto;
}

.grid-container {
  /**   display: grid;
  *   grid-template-columns: repeat(auto-fill, minmax(220px,  1fr));
  *   grid-gap: 1.5rem;
  */
  
  /**
   * User input values.
   */
  --grid-layout-gap: 32px;
  --grid-column-count: 4; /* This gets overridden by an inline style. */
  --grid-item--min-width: 220px; /* This gets overridden by an inline style. */
  
  /**
   * Calculated values.
   */
  --gap-count: calc(var(--grid-column-count) - 1);
  --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
  --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
  grid-gap: var(--grid-layout-gap);
}

figure.gallery-list-item {
    position: relative;
    display: block;
    overflow: hidden;
    line-height: 0;
    aspect-ratio: 1/1;
    border: solid 1px #FFF;
}
figure.gallery-list-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-width: 100%
}
/* Move figcaption over image */

.image-details {
    font-size: 1.5em;
    font-weight: unset;
    text-decoration: none;
    text-align: center;
    margin: 0;
    padding: 0;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s ease-in;
    background: rgba(255,  255,  255,  0.53);
    color: rgba(26,  26,  26,  0.7);
    z-index: 3;
}
.image-details:hover, .image-details:active {
    color: unset;
    text-decoration: none;
}
figure.gallery-list-item:hover .image-details, .image-details:focus {
    opacity: 1;
}
.image-details:focus {
    box-shadow: unset;
}
.image-details :last-child {
    margin-bottom: 0;
}
.piece-title {
    font-style: italic;
} 
.zoom-icon {

}
.single-img {
    flex-shrink: 1;
    aspect-ratio: 1/1;
    width: 100%;
    height:auto;
    min-height: 0;
    min-width: 0;
    max-width: calc(100vw - 31px);
    max-height: calc(100vw - 31px);
    border: solid 1px white;
    background-color: #ffffff80;
    display: flex;
    margin-inline: auto;
}
.single-img img {
    display: flex;
    flex-shrink:1;
    max-width: 100%;
    max-height: calc(100vw - 31px);
    margin: auto;
    align-self: center;
    width: auto;
    height:auto;
    object-fit: contain;
}
@media only screen and (min-width:500px) {
    .single-img {
        max-width: calc(100vw - 55px);
        max-height: calc(100vw - 55px);
    }
    .single-img img {
        max-height: calc(100vw - 55px);
    }
}
@media only screen and (min-width: 740px) and (max-width: 768px) {
    .single-img {
        max-width: calc(100vw - 135px);
        max-height: calc(100vw - 135px);
    }
    .single-img img {
        max-height: calc(100vw - 135px);
    }
}
@media only screen and (min-width:769px) {
    .single-img {
        width: 60%;
        max-width: 85vh;
        max-height: 85vh;
    }
    .single-img img {
        max-height: 100%;
    }
}

.single-img-details {
    flex-grow: 1;
}
.single-img-details-box {
  height: 100%;
}
.custom-availability {
    text-transform: uppercase;
}
.sales-info {
  margin-top: auto;
}

/* for touch screen devices */
@media (hover:none), (hover:hover) and (max-width: 800px) {
  figure.gallery-list-item {
    overflow: unset;
  }
  .image-details {
    color: unset;
    background: #FFF;
    height: auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    position: relative;
    opacity: 0.9;
    font-size: 1.5em;
    text-decoration: none;
    z-index: 1;
    text-align: center;
    padding-inline: 0.5em;
    margin: 0;
  }
  .gallery-list-item.piece-title {
    font-size: 1rem;
    margin-bottom:0;
    width: 88%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    align-self: flex-start;
    padding-left: 12%;
    padding-block: 0.5em;
  }
  .gallery-list-item.piece-title::after {
    content: " \2192";
    font-family: none;
    margin-right: 0.5em;
    padding-bottom: 0.1em;
    font-size: 1.75em;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  .piece-price {
    display: none;
  }
}

/* CSS image zoom */

.image-with-zoom {
    width: 100%}
.image-with-zoom label {
    position: relative;
    overflow: hidden;
}
.image-with-zoom input[type=checkbox] {
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 2;
}
.image-with-zoom img {
    height: auto;
    width: 100%;
    background-color: #e1e1e1;
    object-fit: contain;
    transition: transform 0.2s ease-out;
    cursor: zoom-in;
}
.image-with-zoom input[type=checkbox]:checked {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    cursor: zoom-out;
}
.image-with-zoom input[type=checkbox]:checked+img {
    position: fixed;
    top: 50%;
    right: 50%;
    transform: translate(50%,  -50%);
    z-index: 1;
    width: 100%;
    height: 100%;
    padding: 1em;
    background-color: rgba(225,  225,  225,  0.9);
    object-fit: scale-down;
}
/* Missing Tabs styles */

.tab-container.tabs--sm {
    font-size: 0.9em;
}
.tab-container ul {
    border-bottom: 0 none transparent;
}
.tab-container li a {
    background-color: transparent;
}
container li.selected a {
    border-bottom-color: #f03d4d;
    color: #f03d4d;
}
.btn, button, [type=submit], [type=reset], [type=button], [class^=btn-]:not(.btn-container):not(.btn-close), [class*=" btn-"]:not(.btn-container):not(.btn-close) {
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-accent);
    font-size: 1.25rem;
    background-color: var(--btn-bg);
    color: var(--btn-text);
    border-color: var(--btn-border);
    text-transform: uppercase;
}
.btn:hover, button:hover, [type=submit]:hover, [type=reset]:hover, [type=button]:hover, [class^=btn-]:not(.btn-container):not(.btn-close):hover, [class*=" btn-"]:not(.btn-container):not(.btn-close):hover {
    background-color: var(--btn-bg-hover);
    color: var(--btn-text-hover);
    border-color: var(--btn-border-hover);
}