p a {color: #0044cc; text-decoration: underline; font-weight: bold;}
p a:hover {text-decoration: underline; background-color: #f8f8f8;}

section {width: 95%; margin: 12px auto 20px;}
section div.inlineContainer {display: inline-block; width: 100%;}
section header {font-style: normal; font-weight: 500; height: auto; display: flex; font-size: 1.2rem; text-align: left; margin: 25px auto 10px; flex-direction: row; align-items: center; justify-content: space-between;}
section header h2 {font-family: var(--fontSerif); color: #333; font-size: 1.6rem; letter-spacing: -1px; border-left: 2px solid #9999994a; padding: 0 0 0 18px; margin: 0 0 0 10px;}
section h2 {font-size: 1.6rem;}
section h2 a:link,
section h2 a:visited {color: #003;}

.slider-container {position: relative; overflow: hidden; width: 100%; max-width: 1200px; margin: auto; touch-action: pan-y;}
.slider-wrapper {display: flex; transition: transform .5s ease-in-out; width: 100%;}
.slider-slide {flex: 0 0 100%; position: relative;}
.slider-slide a,
.slider-slide picture {display: block;}
.slider-slide picture {aspect-ratio: 3 / 1;}
.slider-slide img {width: 100%; height: 100%; display: block; object-fit: cover;}
.slider-bar {height: 100%; box-sizing: border-box; font-family: var(--fontSerif); text-align: left; position: absolute; width: 300px; bottom: 0; display: flex; left: 3%; background: #003; color: #fff; padding: 3%; flex-direction: column; align-items: flex-start; opacity: .8; justify-content: center;}
.one {font-size: 1.9rem; letter-spacing: -1px;}
.two {font-size: 1.2rem; margin: 10px 0 9px 0; letter-spacing: -1px;}
.four {font-family: var(--fontSansSerif); height: 25px; margin: 17px 0 0; border: 1px solid #fff; padding: 12px 15px; color: #c39b00; display: flex;}
.slider-button {position: absolute; top: 50%; transform: translateY(-50%); border: none; padding: 25px; cursor: pointer; z-index: 10; display: block;}
.slider-button.prev {left: 10px;}
.slider-button.next {right: 10px;}
#banners .slider-dots {display: flex; justify-content: center; align-items: center; gap: 0; height: 60px; padding: 0;}
#banners .slider-dot {appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 26px; width: 26px; min-width: 26px; height: 32px; min-height: 32px; margin: 0; padding: 0; box-sizing: border-box; border: 0; border-radius: 50%; background: transparent; line-height: 0; cursor: pointer;}
#banners .slider-dot::before {content: ""; display: block; width: 10px; height: 10px; box-sizing: border-box; border: 1px solid #777; border-radius: 50%; background: #fff;}
#banners .slider-dot.is-active::before,
#banners .slider-dot[aria-current="true"]::before {background: #003; border-color: #003;}
#banners .slider-dot:focus-visible {outline: 2px solid #003; outline-offset: -4px;}
#banners .prev,
#banners .next {color: white; background: rgba(0, 0, 0, .5);}

#home nav {display: flex; justify-content: flex-end;}
#fine-art-categories div.container {display: flex; column-gap: 2%; flex-direction: row;}
#fine-art-categories article {width: 35%; margin: 0 0 25px; display: flex; flex-direction: row; align-items: flex-start; align-content: flex-start; justify-content: center; flex: 0 1 calc(50% - 10px); max-width: calc(50% - 10px); box-sizing: border-box; text-align: center;}
#fine-art-categories img {margin: 0; height: auto; max-width: 100%;}
#fine-art-categories .category-box h2 {font-family: var(--fontSerif); color: #333; font-size: inherit; line-height: inherit; font-weight: 400; margin: 0;}
#fine-art-categories .category-intro-card {display: flex; flex-direction: column; align-items: center; justify-content: flex-start;}
#fine-art-categories .category-intro-panel {background: #e1dad43b; color: #333; width: 100%; height: 250px; padding: 24px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; text-align: left; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05);}
#fine-art-categories .category-intro-copy {display: flex; flex-direction: column; gap: 12px;}
#fine-art-categories .category-intro-panel h1 {display: block; min-width: 220px; font-family: var(--fontSerif); font-size: clamp(1.85rem, 2.3vw, 2.15rem); line-height: 1.12; font-weight: 400; margin: 0; color: #333;}
#fine-art-categories .category-intro-panel p {font-family: var(--fontSansSerif); font-size: clamp(.92rem, 1.05vw, 1rem); line-height: 1.55; font-weight: 400; margin: 0; color: #333;}
#fine-art-categories .category-intro-label,
#fine-art-categories .category-intro-label:link,
#fine-art-categories .category-intro-label:visited {display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; font-family: var(--fontSansSerif); font-size: .9rem; line-height: 1; color: #333; border: 1px solid rgba(51, 51, 51, .45); border-radius: 5px; padding: 10px 14px; margin: 0; text-decoration: none; transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;}
#fine-art-categories .category-intro-label:hover {background: #fff; border-color: #333; color: #003; transform: translateY(-1px);}

#aboutUs {background-color: #e1dad43b; padding: 30px 0 0; border-radius: 5px; box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, .15); color: #333;}
#about-us-title {font-family: var(--fontSerif); color: #333; font-size: 1.9rem; letter-spacing: -1px; line-height: 32px; margin: 0 0 20px;}
#aboutUs img {object-fit: contain; max-width: 30%; height: auto;}
#aboutUs #details {width: 80%;}
#aboutUs #details h2 {font-family: var(--fontSansSerif); font-size: 14px; color: #333; letter-spacing: unset;}
#aboutUs h3 {font-family: var(--fontSerif); font-size: 1.5rem; letter-spacing: -1px; font-weight: 600; color: #333;}
#aboutUs span,
.grey-button-hm,
#aboutUs #button {font-family: var(--fontSansSerif);}
#aboutUs article {display: flex; flex-direction: column; align-items: center; width: 30%;}
#aboutUs div.inlineContainer {display: flex; width: 100%; flex-direction: row; align-items: center; justify-content: space-around;}
#aboutUs #button {border: 1px solid #c39b00; padding: 8px; margin: 12px 0 0; font-size: .9rem; border-radius: 5px; display: block; cursor: pointer; color: #333;}
#aboutUs #button:hover {background-color: #fff; color: #333;}
.grey-button-hm {display: block; font-size: 14px; width: auto; padding: 12px; background-color: #efefef; transition: var(--transition);}
.grey-button-hm:hover {background-color: #e5e5e5;}
.left-box-hm {min-width: 150px;}
.right-box-hm {text-align: left; min-width: 150px;}
.right-box-hm h3 {display: block; font-size: 1.6rem;}

#featArtist .prev,
#featArtist .next {color: #333; background: rgb(239 239 239);}
.feat-css {background-color: #be7836 !important;}
.FeatArtistsContainer {display: flex; flex-wrap: wrap; justify-content: center; gap: 5%; flex-direction: row; align-items: center; margin: 15px 0 0;}

.NewsStrip {display: flex; flex-direction: column;}
.NewsStrip header {margin: 25px 10px;}
.NewsStrip article {display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: left; margin: 0 0 50px 0;}
.NewsStrip h3 {display: block; font-size: 22px; font-weight: 400; line-height: 32px; vertical-align: baseline; color: #474747; font-family: var(--fontSerif); font-style: normal; text-decoration: none; padding: 0 0 12px 0; margin: 0 0 8px 0; border-bottom: 1px #e5e5e5 solid;}
.NewsStrip span {font-family: var(--fontSansSerif);}
.NewsStrip article div {width: 85%;}
.NewsStrip img {height: auto;}
.FlexContainer {display: flex; flex-direction: row; gap: 12px;}
.LatestUpdates .FlexContainer > a {display: block; flex: 1 1 0; min-width: 0;}
.LatestUpdates article {height: 100%; align-items: stretch;}
.LatestUpdates .NewsCardImage {width: 100%; height: 180px; display: flex; align-items: center; justify-content: center; background: #f7f7f4; overflow: hidden; padding: 10px; box-sizing: border-box;}
.LatestUpdates .NewsCardImage img {width: 100%; height: 100%; object-fit: contain;}
.LatestUpdates .NewsCardContent {width: 100%;}
.LatestUpdates .NewsCardContent p {margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden;}

@media (max-width: 767px) {
  .slider-slide picture {aspect-ratio: 1 / 1;}
  #banners .slider-dot {flex-basis: 44px; width: 44px; min-width: 44px; height: 44px; min-height: 44px;}
  #banners .slider-dot:focus-visible {outline-offset: -8px;}
}

@media (max-width: 670px) {
  .FlexContainer {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;}
  .FlexContainer > a {display: block;}
  .NewsStrip article div {width: 100%;}
  .NewsStrip img {width: 100%; height: auto;}
}

@media only screen and (min-width: 320px) and (max-width: 670px) {
  .slider-bar {font-family: var(--fontSerif); position: absolute; bottom: 5%; width: 80%; display: flex; left: 11%; background: #000033; color: #fff; padding: 4%; text-align: center; flex-direction: column; align-items: center; height: unset;}
  .two {font-size: 1.2rem; margin: 4px 0 2px 0;}
  .slider-button {display: none;}
  #fine-art-categories article {min-height: 240px;}
  #fine-art-categories .category-intro-panel {height: 240px; justify-content: space-evenly;}
  section {display: block; float: left; position: relative; margin: 20px 0;}
  .left-box-hm {display: flex; flex-direction: column; align-items: center;}
  .right-box-hm {display: flex; align-items: center; flex-direction: column; width: 90%; margin: 20px 0 0;}
  #aboutUs img {max-width: 100%;}
  div.container {display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; flex-direction: column; align-items: center;}
}

@media (max-width: 768px) {
  section {width: 95%; margin: 22px 2% 50px;}
  section header {align-items: center; justify-content: center;}
  #aboutUs div.inlineContainer {display: flex; width: 100%; flex-direction: column; align-items: center; justify-content: space-around;}
  #aboutUs article {display: flex; flex-direction: column; align-items: center; width: 100%; margin: 20px; box-sizing: border-box;}
}