*, ::after, ::before {margin: 0; padding: 0; box-sizing: border-box;}
body {
    font-family: 'Open Sans', sans-serif; 
    background: #f2f2f2; 
    color: #6d6e71;
    line-height: 1.4em;
    font-size: 11px;
}
a {color: #27abcc; text-decoration: none;}
a.viewall {color: #6d6e71;}
.container {max-width: 940px; margin: 0 auto; padding-inline: 20px;}
img {max-width: 100%; height: auto; display: block;}

/* HEADER */
a.preheader {
    background: #7e7767;
    color: white;
    height: 30px;
    line-height: 28px;
    font-size: 11px;
    font-weight: bold;
    text-align: right;
    display: block;
    text-decoration: none;
}
a.preheader > .container {display: flex; align-items: center; gap: 5px; justify-content: flex-end;}
a.preheader > .container span {display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
a.preheader > .container img {width: 16px; height: 16px;}

.hidden {display: none!important;}

.page {background: white url(/img/bg.png) center top no-repeat;}
.page header {height: 150px;} 
.page header .container {display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end;}
.page header .container > a {
    margin-top: 40px;
    text-decoration: none;
    color: #444;
    font-family: 'Conv_Stag-Light';
    font-size: 41px;
    line-height: 41px;
    font-weight: normal;
    text-transform: uppercase;
}
.page header nav ul {display: flex; gap: 5px;}
.page header nav li {list-style: none;}
.page header nav li a {
  font-family: 'Conv_Stag-Light';
  text-decoration: none;
  color: #7e7767;
  font-size: 21px;
  line-height: 24px;
  font-weight: normal;
  text-transform: uppercase;
}
.page header nav li a::after {content: "/";}
.page header nav li.active a {color: #27abcc;}
.page main .container {padding-block: 20px; background: white; max-width: 900px; padding-bottom: 120px;}
.page main .container .columns {display: flex; gap: 20px;}
.page main .container .columns > div:nth-child(1) {width: 280px; flex-shrink: 0;}
.page main .container .columns > div:nth-child(2) {width: auto; flex-grow: 1;}
.page main .container .columns > div:nth-child(3) {width: 190px; flex-shrink: 0;}

main p {margin-bottom: 1.4em;}
main ul {margin-left: 1em; margin-bottom: 1.4em;}
main ol {margin-left: 1.5rem; margin-bottom: 1.4em;}

.carousel {margin: -20px -20px 20px;}


.h1 {
    line-height: 30px;
    padding-bottom: 0;  
    font-size: 24px;
    margin-block: 0px 15px;
    border-bottom: 1px solid #e9e9e9;
    font-family: 'Conv_Stag-Light';
    color: #a8a8aa;
    text-transform: uppercase;
    font-weight: normal;
}
.h1 a {text-decoration: none; color: #a8a8aa;}
.h1 a::after {content: "/";}
.h1:not(:has(a))::after {content: "/";}

.h2, h2 {
    font-family: 'Conv_Stag-Light';
    text-decoration: none;
    color: #444;
    font-size: 27px;
    line-height: 30px;
    font-weight: normal;
    padding: 0 0 15px;
    border: 0;
    margin: 35px 0 0;
}
.h2:first-child, h2:first-child {margin-top: 0;}
h3 {font-size: 11px;}

.page main .container .columns > div:nth-child(2) h3:last-child {font-size: 12px; margin-top: 25px;}
.page main .container .columns > div:nth-child(2) h3:nth-last-child(2) {font-size: 12px; position: relative; top: 10px;}
.page main .container .columns > div:nth-child(2) h3 + h3 {position: relative; bottom: 5px;}

form > div {display: flex; flex-direction: column; padding-bottom: 15px;}
form > div > label {padding-bottom: 2px; display: block;}


input, textarea {
    border: 1px solid #ccc;
    padding: 2px;
    line-height: 1.4em;
    font-size: 12px;
    font-family: 'Open Sans', sans-serif;
}
textarea {resize: vertical;}
input[type="submit"] {
    width: auto;
    background: #27abcc;
    color: white;
    font-weight: bold;
    border: 0;
    padding: 5px 15px;
    cursor: pointer;
}

.artwork-list {display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; padding: 0; margin: 0;}
.artwork-list li {list-style: none;}
.artwork-list li a {display: flex; color: #6d6e71; text-decoration: none; position: relative;}
.artwork-list li.current a::after {
    content: "";
    position: absolute;
    top: 0; 
    left: 0;
    width: 138px;
    height: 100%;
    box-shadow: inset 0 0 0 3px #27abcc;
    background: rgba(39, 171, 204, 0.5);
}
.artwork-list li a h2 {font-size: 12px; font-family: 'Open Sans', sans-serif; color: #444; font-weight: bold; padding: 0; margin: 0; line-height: 1.4em;}
.artwork-list li a h3 {font-weight: normal;}
.artwork-list li a span {color: #27abcc; display: block; padding-top: 5px;}
.artwork-list li a img {margin-right: 20px; width: 138px;}


/* FOOTER */

footer {border-top: 1px solid #cccccc; background: #f2f2f2; height: 100px;}
footer .container {padding-block: 20px; display: flex; justify-content: space-between; flex-direction: row-reverse;}
footer .container ul {display: flex; gap: 5px;}
footer .container li {list-style: none;}
footer .container li a {
  text-transform: uppercase;
  border: 0;
  margin: 0;
  font-size: 18px;
  font-family: 'Conv_Stag-Light';
  text-decoration: none;
  color: #7e7767;
}
footer .container li a::after {content: "/";}
.mobile {display: none!important;}


@media (max-width: 900px) {
    a.preheader {text-align: left;}
    a.preheader > .container {justify-content: flex-start;}
    .page {background-position: calc(50% + 450px) top;}
    a.preheader .container,
    .page header .container {max-width: 540px;}
    footer .container {flex-direction: column; align-items: flex-start; gap: 30px; max-width: 540px;}
    .page main .container .columns {flex-direction: column; max-width: 500px!important; margin-inline: auto;}
    .page main .container .columns > div, article {max-width: 500px!important; width: 100%!important; margin-inline: auto;}
    .page main .container .columns > div:nth-child(3) {padding-left: 0!important; width: auto; padding-right: 0!important; max-width: 700px;}
    h2.infotitle {padding-top: 15px;}
    footer .container {align-items: flex-start;}
    .page header .container {align-items: flex-start;}
    .featuredimage {width: 100%!important;}
    .featuredimage img {object-fit: cover; height: 200px; width: 100%!important; object-position: 50% 40%;}
    .columns.artwork {display: grid;}
    .columns.artwork > div:nth-child(1) {order: 3; padding-top: 30px;}
    .columns.artwork > div:nth-child(2) {order: 1;}
    .columns.artwork > div:nth-child(3) {order: 2;}
    .carousel ul li > div h3 {margin-bottom: 1%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
    .carousel ul li > div p {display: none;}
}

@media (max-width: 400px) {
    .mobile {display: inline-block!important;}
    .desktop {display: none!important;}
    .page header {height: 135px;}
    footer .container li a, .page header nav li a {font-size: clamp(0px, 4.85vw, 18px); line-height: 1.4em;}
    .page header .container > a {font-size: clamp(0px, 9.5vw, 35px); line-height: 35px;}
    .h1 {font-size: 18px; line-height: 26px;}
    h2, .h2 {font-size: 24px;}
    .carousel ul li > div {width: 30%!important;}
}