@font-face {
font-family: 'Selawik';
font-style: normal;
font-weight: normal;
src: local('Selawik Regular'), url('/themes/custom/portfolio/fonts/selawk.woff') format('woff');
}
@font-face {
font-family: 'Selawik';
font-style: normal;
font-weight: 300;
src: local('Selawik Light'), url('/themes/custom/portfolio/fonts/selawkl.woff') format('woff');
}
@font-face {
font-family: 'Selawik';
font-style: normal;
font-weight: 400;
src: local('Selawik Semilight'), url('/themes/custom/portfolio/fonts/selawksl.woff') format('woff');
}
@font-face {
font-family: 'Selawik';
font-style: normal;
font-weight: 600;
src: local('Selawik Semibold'), url('/themes/custom/portfolio/fonts/selawksb.woff') format('woff');
}
@font-face {
font-family: 'Selawik';
font-style: normal;
font-weight: 700;
src: local('Selawik Bold'), url('/themes/custom/portfolio/fonts/selawkb.woff') format('woff');
}

:root {
  --blue: #5888B3;
  --padding-inline: 1rem;
  --header-padding-block: 1.5rem;
}

* {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  transition: padding 250ms ease, max-height 250ms ease, font-size 250ms ease;
}

body {
  background-color: #f9f9f9;
  font-family: Selawik, sans-serif;
}

img {
  max-width: 100%;
  height: auto;
}

.page-node-type-homepage .page-title {
  display: none;
}

.region-header {
  align-items: center;
  background-color: white;
  border-bottom: 1px solid white;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: space-between;
  padding: var(--header-padding-block) var(--padding-inline);

  .menu {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
  }

  .menu-item {
    color: #4e4e4e;
    font-size: .875rem;
    font-weight: 500;
    letter-spacing: .05em;
    text-transform: uppercase;

    a {
      text-decoration: none;
      color: inherit;
    }
    a.is-active {
      color: inherit;
      border-bottom: 1px solid;
    }
  }

}

.site-name {
  text-transform: uppercase;
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--blue);


  a {
    color: inherit;
    text-decoration: none;
  }
}

.path-frontpage {
  .site-name {
    color: white;
  }

  .region-header {
    background: transparent;
    /* background: linear-gradient(180deg,rgb(0 0 0 / 25%) 0%, rgb(0 0 0 / 25%) 50%, rgb(0 0 0 / 0%) 100%); */
    border-bottom: 1px solid white;
  }

  .menu-item {
    color: white;
  }
}

.bef-exposed-form .form--inline > .form-item, .bef-exposed-form .form--inline .js-form-wrapper > .form-item {
  float: none;
}

.views-exposed-form {
  background-color: #ecf0f3;
  padding: 1rem var(--padding-inline);

  ul {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
  }

  li:first-child {
    width: 100%;
  }

  a {
    color: #888;
    text-decoration: none;
  }

  .bef-link--selected {
    color: black;
  }
}

.portfolio-grid {
  display: grid;
  gap: 2rem var(--padding-inline);
  padding: 2rem var(--padding-inline);
}

.portfolio-item-wrapper {
  align-items: center;
  display: flex;
  justify-content: center;
}

.portfolio-item {
  position: relative;

  img {
    display: block;
    height: auto;
    max-height: 420px;
    max-width: 100%;
    width: auto;
  }

  .thumbnail-overlay {
    align-items: center;
    background: rgb(0 49 93 / 75%);
    bottom: 0;
    display: flex;
    justify-content: center;
    margin: 0;
    opacity: 0;
    padding: 2rem;
    pointer-events: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    transition: opacity 750ms ease;

    h2 {
      color: white;
      font-size: 1.25rem;
      font-weight: 500;
      text-align: center;
      text-wrap: balance;
      transform: translateY(.25rem);
      transition: transform 500ms ease;
      transition-delay: 100ms;
    }
  }

  .sold {
    bottom: 1rem;
    position: absolute;
    right: 1rem;
    z-index: 1;
  }
}

.sold {
  background: red;
  border-radius: 100%;
  display: inline-block;
  height: 1rem;
  overflow: hidden;
  text-indent: 2rem;
  width: 1rem;

}

@media (hover:hover) {
  .portfolio-item:hover  {
    .thumbnail-overlay {
      opacity: 1;
    }

    h2 {
      transform: translateY(0);
    }
  }
}

.artwork-detail {
  display: grid;
  gap: 1rem;
  padding: var(--padding-inline);
}

.artwork-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  order: 2;

  h1 {
    font-size: 1.25rem;
    font-weight: 500;
  }

  .back {
    color: black;
    display: none;
    margin-bottom: 2rem;
    text-decoration: none;
    text-transform: uppercase;

    svg {
      transition: transform 400ms ease;
    }
  }

  .back:hover svg {
    transition: transform 250ms ease;
    transform: translateX(-.25rem);
  }
}

.caption {
  font-size: .875rem;
  line-height: 1.4;
}

.artwork-image {
  img {
    display: block;
    /* max-height: calc(100vh - 266px); */
    object-fit: contain;
    /* object-position: left; */
    width: 100%;
  }
}

.page-node-type-page .layout-content {
  padding: var(--padding-inline);
}

.page-grid {
  align-items: center;
  display: grid;
  gap: var(--padding-inline);
  margin-inline: auto;
  max-width: 87.5rem;

  .field--name-field-media-image-1 {
    img {
      width: 100%;
    }
  }


  h1 {
    font-weight: 300;
    color: var(--blue);
  }

  p {
    font-size: 1rem;
    line-height: 1.4;
  }
}

.gslide-description {
  display: none;
}

.path-webform {
  .layout-content {
    margin-inline: auto;
    max-width: 87.5rem;
  }
}


.webform-submission-form {
  width: 100%;
  * {
    width: 100%;
  }

  .form-item {
    display: flex;
    flex-direction: column;
    gap: .5rem;

    label {
      color: var(--blue);
      font-size: 14px;
      text-transform: uppercase;
    }
    input,
    textarea {
      border: 1px solid #cdcdcd;
      padding: .5rem;
    }
  }
  .form-submit {
    background: transparent;
    border: 1px solid var(--blue);
    color: var(--blue);
    cursor: pointer;
    font-size: 1.25rem;
    font-weight: normal;
    padding: .5rem 1rem .75rem;
  }
  .form-required::after {
    display: none;
  }

  .cancel {
    display: none;
  }
}

.webform-confirmation {
  background: #e4ece0;
  border: 1px solid darkseagreen;
  border-radius: 1rem;
  padding: 1rem;

  a {
    color: var(--blue);
  }

  p:last-child {
    margin-bottom: 0;
  }
}

.messages {
  background-image: none !important;
  padding-inline: var(--padding-inline);
}

@media (min-width: 535px) {
  .portfolio-grid {
    gap: 8rem var(--padding-inline);
    grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));
    padding: 8rem var(--padding-inline);
  }
}




@media (min-width: 700px) {
  .region-header {
    flex-direction: row;
  }

  .views-exposed-form {
    ul {
      justify-content: initial;
      text-align: initial;
    }
    li:first-child {
      width: initial;
    }
    li:first-child::after {
      color: #888;
      content: '|';
      margin-left: 1rem;
    }
  }

  .page-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.zoom {
  position: relative;

  /* &::after {
    content: "zoom";
    display: block;
    position: absolute;
    right: .5rem;
    bottom: .5rem;
  } */

  img {
    display: block;
  }
}

@media (min-width: 830px) {
  .artwork-detail {
    gap: 2rem;
    grid-template-columns: 16rem 1fr;
  }

  .artwork-info {
    order: initial;

    .back {
      display: block;
    }

    header {
      &::before {
        content: '';
        display: block;
        width: 30%;
        height: 1px;
        background: black;
        margin-bottom: 2rem;
      }
    }
  }
}

@media (min-width: 1024px) {
  :root {
    --padding-inline: 2rem;
  }
}

@media (min-width: 1350px) {
  :root {
    --padding-inline: 4rem;
    --header-padding-block: 3rem;
  }

  .region-header {
    .menu-item {
      font-size: 1rem;
    }
  }

  .site-name {
    font-size: 2rem;
  }
}