/* JONESPORTAMERICA.COM - Content sitewide pgs */

/*
#brand img {width: 110px; max-width: 110px;}
@media (min-width: 1400px) {#brand img {width: 130px; max-width: 130px;}}
*/

h1 {font-size: 2.5em; padding-top: 1.25rem;}
@media (max-width: 600px) {h1 {font-size: 2em;}}
@media (min-width: 601px) and (max-width: 1200px) {h1 {font-size: 2.125em;}}
p.h1-sub {text-wrap: balance;}
.content-section {position: relative; isolation: isolate; display: grid; place-items: center; background-color: #fff; padding: 1.5rem 2rem; overflow: hidden;}
@supports (overflow: clip) {.content-section {overflow: clip;}}

/* ////////// HERO - with img ////////// */
#intro {position: relative; z-index: auto; overflow: visible; background-color: #fff;}
@media (min-width: 0px) and (max-width: 500px) {#intro-subpg { margin-top: 0;padding: 0 20px 2rem; width: 100%;}}
#intro-subpg { margin-top: 0px; }
#intro-subpg {position: relative; max-width: 100%; padding: 1.75rem 30px 1.5rem; background-color: #fff; z-index: 3; }
/* img urls in pg css */
.hero-media {height: 400px; background-size: cover; background-position: 50% 52%; background-repeat: no-repeat; overflow: hidden;}
@media (max-width: 500px) {.hero-media { height: 300px;}}

.hero-media::after {content: ''; position: absolute;
bottom: 0; left: 0; right: 0; height: 2px; background: #2599d6;}


.hero-media2 {width: 100%; height: 400px; margin: 0; position: relative; overflow: hidden;}
.hero-media2-picture {display: block; width: 100%; height: 100%;}
.hero-media2-img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: center;}
.hero-media2-cap {position: absolute; left: 0; right: 0; bottom: 0; text-align: right; padding: 0.5em 1em; background: rgba(0, 0, 0, 0.55);
  color: #fff; font-size: .9rem; line-height: 1.35;}
.hero-media2-credit {opacity: 0.8; font-style: italic;}
@media (max-width: 500px) {.hero-media2 {height: 350px;}}


/* ////////// HERO - NO img ////////// */
#intro-nopix {margin-bottom: 75px;}

/* Default (fallback) — classic clearfix */
.section-std::after {content: ""; display: table; clear: both;}
/* Progressive enhancement: browsers that support flow-root */
@supports (display: flow-root) {.section-std {display: flow-root;} .section-std::after {content: none;}}

@media (max-width: 768px) {h2.h2-cms, h3.h3-cms {text-align: center;}}

/* Figure styles */
/*
.section-std figure {margin: 1rem auto 1rem; inline-size: min(100%, 400px);}
.section-std figure.image-content-lg {margin: 1rem auto 0; inline-size: min(100%, 400px);}
.section-std figure.image-content-med {margin: 1rem auto 0; inline-size: min(100%, 350px);}
.section-std figure.image-content-small {margin: 1rem auto 0; inline-size: min(100%, 250px);}
.section-std figure.image-content-xsmall {margin: 1rem auto 0; inline-size: min(100%, 150px);}
.section-std figure img {display: block; inline-size: 100%; height: auto; margin: 0 auto; border: 1px solid #d0d0d0; border-radius: 5px;}
.section-std figure figcaption {width: 96%; margin: .375rem auto 0; text-align: center; font-size: .875rem; color: rgba(60,60,59,.85);}
@media (min-width: 769px) and (max-width: 1199px) {
.section-std figure {float: right; margin: 0 0 1.25rem 1.625rem; inline-size: 425px; }
.section-std figure.image-content-lg {float: right; margin: 0 0 1.25rem 1.625rem; inline-size: 425px; }
.section-std figure.image-content-med {float: right; margin: 0 0 1.25rem 1.625rem; inline-size: 300px; }
.section-std figure.image-content-small {float: right; margin: 0 0 1.25rem 1.625rem; inline-size: 250px; }
.section-std figure.image-content-xsmall {float: right; margin: 0 0 1.25rem 1.625rem; inline-size: 150px; }
.section-std figure figcaption { text-align: left; }
}
@media (min-width: 1200px) {
.section-std figure {float: right; margin: .5rem 0 1.25rem 1.75rem; inline-size: 450px;}
.section-std figure.image-content-lg {float: right; margin: 0 0 1.25rem 1.625rem; inline-size: 450px; }
.section-std figure.image-content-med {float: right; margin: .5rem 0 1.25rem 1.75rem; inline-size: 300px;}
.section-std figure.image-content-small {float: right; margin: .5rem 0 1.25rem 1.75rem; inline-size: 250px;}
.section-std figure.image-content-xsmall {float: right; margin: .5rem 0 1.25rem 1.75rem; inline-size: 150px;}
.section-std figure figcaption {text-align: left;}
}
*/
/* NEW FIGURES */
.fig-flt-rgt {margin: 1rem auto 1rem;}
.fig-flt-rgt.mar-top--01 {margin-top: 0 !important;}
.fig-flt-rgt.img-content-lg {inline-size: min(100%, 400px);}
.fig-flt-rgt.img-content-md {inline-size: min(100%, 350px);}
.fig-flt-rgt.img-content-sm {inline-size: min(100%, 250px);}
.fig-flt-rgt.img-content-xsm {inline-size: min(100%, 150px);}
.fig-flt-rgt img {display: block; inline-size: 100%; height: auto; margin: 0 auto; border: 1px solid #d0d0d0; border-radius: 5px;}

.fig-flt-rgt figcaption {width: 96%; margin: .5rem auto 0; text-align: center;text-wrap: pretty; font-size: .875rem; color: rgba(60,60,59,.85);}
.fig-flt-rgt figcaption .crd {display: block; font-style: italic; margin-top: .2em;}
.fig-flt-rgt figcaption.ctr {text-align: center; text-wrap: balance;}

@media (min-width: 769px) and (max-width: 1199px) {
.fig-flt-rgt {float: right; margin: 0 0 1.25rem 1.625rem;}
.fig-flt-rgt.img-content-lg {float: right; margin: 0 0 1.25rem 1.625rem; inline-size: 400px;}
.fig-flt-rgt.img-content-md {float: right; margin: 0 0 1.25rem 1.625rem; inline-size: 350px;}
.fig-flt-rgt.img-content-sm {float: right; margin: 0 0 1.25rem 1.625rem; inline-size: 250px;}
.fig-flt-rgt.img-content-xsm {float: right; margin: 0 0 1.25rem 1.625rem; inline-size: 150px;}
.fig-flt-rgt figcaption {text-align: left;}
figcaption.bdr {margin-top: 0.65rem; margin-left: 0; padding-left: 0.75rem; border-left: 1px solid #8cb8d2;}
}
@media (min-width: 1200px) {
.fig-flt-rgt {float: right; margin: .5rem 0 1.25rem 1.75rem;}
.fig-flt-rgt.img-content-lg {float: right; margin: 0 0 1.25rem 1.625rem; inline-size: 450px; }
.fig-flt-rgt.img-content-md {float: right; margin: .5rem 0 1.25rem 1.75rem; inline-size: 350px;}
.fig-flt-rgt.img-content-sm {float: right; margin: .5rem 0 1.25rem 1.75rem; inline-size: 250px;}
.fig-flt-rgt.img-content-xsm {float: right; margin: .5rem 0 1.25rem 1.75rem; inline-size: 150px;}
.fig-flt-rgt figcaption {text-align: left;}
figcaption.bdr {margin-top: 0.65rem; margin-left: 0; padding-left: 0.75rem; border-left: 1px solid #8cb8d2;}
}


/* --- CONSERVATION --- */
/*
figure.fl-rgt {margin: 1rem auto 1rem; inline-size: min(100%, 350px);}
figure.fl-rgt img {display: block; inline-size: 100%; height: auto; margin: 0 auto; border-radius: 5px;}
figure.fl-rgt figcaption {margin-top: .75rem; font-size: .9rem; text-align: center; }
@media (min-width: 769px) and (max-width: 1199px) {
figure.fl-rgt {float: right; margin: 0 0 1.25rem 1.625rem; inline-size: 300px; }
figure.fl-rgt figcaption { text-align: left; }
}
@media (min-width: 1200px) {
figure.fl-rgt  {float: right; margin: 0 0 1.25rem 1.75rem; inline-size: 350px;}
figure.fl-rgt  figcaption { text-align: left; }
}

.image-content figcaption.bdr {margin-top: 0.65rem; margin-left: 0; padding-left: 0.75rem; border-left: 1px solid #8cb8d2;}
.image-content .caption-text {font-size: 14px; line-height: 1.125em;}
.image-content .caption-credit {display: block; margin-top: 0.35rem; font-size: 14px; line-height: 1.125em; font-style: italic;}
*/

.btn {display: block; text-decoration: none; padding: .75rem 1.1rem; border-radius: 4px; border: 0; margin: 10px 0 0; text-align: center; width: max-content;}
@media (max-width: 768px) {
.btn {margin: 10px auto 20px;}
}
.btn-blu {background-color: #195f83; color: #fff;}
.btn-blu:hover {background-color: #2599d6;}
.btn:focus-visible {outline: 2px solid #25b5e7; outline-offset: 2px;}

p#pg-lnk {display: inline-block; text-align: left;}
@media (max-width: 768px) {p#pg-lnk {display: block; text-align: center;}}

.sep-art-after::after {content: ''; display: block; width: 25%; min-width: 150px;  height: 1px; background-color: #4a8db3; margin: 1rem 0;}
.sep-art-after:last-of-type::after {display: none;}


/* PHOTO GRID - FLEX */
#pix {display: flex; flex-wrap: wrap; justify-content: center; row-gap: 25px; column-gap: 10px;}
#pix figure {flex: 0 1 100%; max-width: 350px;}
#pix figcaption {padding: 3px 8px; text-align: center; font-size: .875em;}
#pix figure a {display: block;}
#pix figure img {width: 100%; height: auto; display: block; border-radius: 3px; border: 1px solid #8ba997;}
/* 4 columns */
@media only screen and (min-width: 1100px) {
   #pix figure {flex: 0 1 calc(25% - 8px);}
}
/* 3 columns */
@media only screen and (min-width: 750px) and (max-width: 1099px) {
   #pix figure {flex: 0 1 calc(33.33% - 8px);}
}
/* 2 columns */
@media only screen and (min-width: 501px) and (max-width: 749px) {
   #pix figure {flex: 0 1 calc(50% - 6px);}
}
/* 1 column (under 500px) uses default */