body {
  font-size: 16px;
  background-image: url("../../images/background.jpg");
  background-color: #b89c6a;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100%;
  min-width: 280px;
  font-family: "David Libre", serif;
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1.45;
  color: #6E5632;
}

#page-wrapper {
  width: 80%;
  margin: auto;
}
#page-wrapper #sections-wrapper {
  padding-bottom: 2em;
}

header #header-layout #site-branding {
  margin-top: 0px;
}
header #header-layout #site-branding #logo {
  display: inline-block;
  text-align: center;
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
}
header #header-layout #site-branding #logo img {
  width: auto;
  height: 8em;
  display: inline;
  margin: 1.5em;
}
@media only screen and (max-width: 500px) {
  header #header-layout #site-branding #logo {
    width: 90%;
  }
  header #header-layout #site-branding #logo img {
    height: 4em;
  }
}

#page {
  background: rgba(255, 255, 255, 0.2);
  padding: 2em;
}
#page #sections-wrapper, #page #header-outer-wrapper, #page #footer-outer-wrapper {
  background: rgb(255, 255, 255);
  margin: 0.5em 0.5em 2em 0.5em;
  width: 100%;
  display: block;
  max-width: 100%;
}

#header-outer-wrapper, #sections-wrapper, #footer-outer-wrapper {
  box-sizing: border-box; /* Ensure padding and borders are included in the element's total width and height */
  max-width: 100%; /* Prevent horizontal overflow */
  overflow: hidden; /* Hide any overflowing content */
  border-radius: 8px; /* Add slight curvature to the corners */
}

#block-creative-main-menu {
  width: 100%;
  border-bottom: solid 3px #b89c6a;
  padding: 1em 0;
}
#block-creative-main-menu .menu-item {
  width: 15%;
  text-align: center;
  margin: 0 2%;
}
@media only screen and (max-width: 500px) {
  #block-creative-main-menu .menu-item {
    width: 90%;
  }
  #block-creative-main-menu .menu-item a.about_me, #block-creative-main-menu .menu-item a.create, #block-creative-main-menu .menu-item a.travel, #block-creative-main-menu .menu-item a.think, #block-creative-main-menu .menu-item a.cook {
    background-size: 30% auto;
  }
}
@media only screen and (min-width: 501px) and (max-width: 800px) {
  #block-creative-main-menu .menu-item {
    width: 40%;
  }
}
#block-creative-main-menu .menu-item a {
  text-transform: lowercase;
  width: 100%;
  height: 3em;
  display: inline-block;
  font-size: 200%;
  text-decoration: none;
}
#block-creative-main-menu .menu-item a, #block-creative-main-menu .menu-item a:visited {
  color: #b89c6a;
}
#block-creative-main-menu .menu-item a.is-active, #block-creative-main-menu .menu-item a.is-active:visited {
  color: #6E5632;
}
#block-creative-main-menu .menu-item a.about_me {
  background: url("../../images/about.svg") no-repeat;
  background-size: 45% auto;
  background-position: center 100%;
}
#block-creative-main-menu .menu-item a.about_me.is-active {
  background: url("../../images/about-active.svg") no-repeat;
  background-size: 45% auto;
  background-position: center 100%;
}
#block-creative-main-menu .menu-item a.create {
  background: url("../../images/create.svg") no-repeat;
  background-size: 70% auto;
  background-position: center 70%;
}
#block-creative-main-menu .menu-item a.create.is-active {
  background: url("../../images/create-active.svg") no-repeat;
  background-size: 70% auto;
  background-position: center 70%;
}
#block-creative-main-menu .menu-item a.travel {
  background: url("../../images/travel.svg") no-repeat;
  background-size: 50% auto;
  background-position: center 75%;
}
#block-creative-main-menu .menu-item a.think {
  background: url("../../images/think.svg") no-repeat;
  background-size: 50% auto;
  background-position: center 75%;
}
#block-creative-main-menu .menu-item a.cook {
  background: url("../../images/cook.svg") no-repeat;
  background-size: 80% auto;
  background-position: center 60%;
}

.facets-widget-links {
  width: 100%;
}
.facets-widget-links .facet-item {
  width: 100%;
  display: inline-block;
}
.facets-widget-links .facet-item .js-facet-deactivate {
  display: none;
}
.facets-widget-links .facet-item .facet-item__value {
  width: 100%;
  padding: auto;
}
.facets-widget-links .facet-item a {
  text-transform: lowercase;
  width: 100%;
  height: auto;
  display: inline-block;
  text-align: center;
  font-size: 150%;
  padding: 2%;
  color: #6E5632;
}
.facets-widget-links .facet-item a.is-active, .facets-widget-links .facet-item a.is-active:visited {
  color: #6E5632;
}
.facets-widget-links .facet-item a, .facets-widget-links .facet-item a:visited {
  color: #b89c6a;
  text-decoration: none;
}
.facets-widget-links .facet-item a.photography {
  background: url("../../images/photography.svg") no-repeat;
  background-position-x: 50%;
  background-position-y: 1em;
  height: 5em;
  background-size: 5.5em 4em;
}
.facets-widget-links .facet-item a.photography.is-active {
  background: url("../../images/photography_active.svg") no-repeat;
  background-position: left;
  background-position-x: 50%;
  background-position-y: 1em;
  height: 5em;
  background-size: 5.5em 4em;
}
.facets-widget-links .facet-item a.pottery {
  background: url("../../images/pottery.svg") no-repeat;
  background-position: left;
  background-position-x: 60%;
  background-position-y: 0.5em;
  height: 5em;
  background-size: 5em 4em;
}
.facets-widget-links .facet-item a.pottery.is-active {
  background: url("../../images/pottery_active.svg") no-repeat;
  background-position: left;
  background-position-x: 60%;
  background-position-y: 0.5em;
  height: 5em;
  background-size: 5em 4em;
}
.facets-widget-links .facet-item a.painting {
  background: url("../../images/painting.svg") no-repeat;
  background-position-x: 0%;
  background-position-y: 1em;
  height: 5em;
  background-size: 6em 4em;
}
.facets-widget-links .facet-item a.design {
  background: url("../../images/design.svg") no-repeat;
  background-position: left;
  height: 4em;
  background-size: 6em 4em;
}

#block-creative-content .views-row {
  width: 45%;
  text-align: center;
  padding-bottom: 1em;
  display: inline-block;
}
#block-creative-content .views-row .views-field-title span.field-content {
  font-size: 1.5em;
  font-weight: bold;
  padding: 1em 1em 2em 1em;
  color: #6E5632;
}
#block-creative-content .views-row .views-field-title {
  margin-bottom: 0.5em;
  margin-top: 0.5em;
}
#block-creative-content .views-row .views-field-image span {
  width: 100%;
}
#block-creative-content .views-row .views-field-image span a {
  width: 100%;
  display: inline-block;
}
#block-creative-content .views-row .views-field-image span a img {
  max-height: 306.25px;
  width: auto;
  padding: auto;
}

h1, h1.a {
  color: #6E5632;
}

.flippy a {
  font-size: 1.5em;
  padding: 0.5em;
  display: inline-block;
  color: #b89c6a;
}
.flippy a:hower, .flippy a:active {
  color: #6E5632;
}
.flippy a:visited {
  color: #b89c6a;
}
.flippy a::after, .flippy a::before {
  font-size: 1.5em;
  font-family: "Material Icons" !important;
  font-weight: normal;
  font-style: normal;
  display: inline-block !important;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: "liga";
  color: #b89c6a;
  position: relative;
  top: 0.3em;
}

.flippy-next a::after {
  content: "arrow_forward_ios";
}

.flippy-previous a::before {
  content: "arrow_back_ios";
}

.view-header {
  padding: 2em 1em;
  display: inline-block;
}

.views-field-title {
  height: 4.5em;
  overflow: hidden;
}

#teaser_pottery {
  max-width: 35%;
  float: left;
  padding-right: 1em;
}

ul.menu {
  display: flex;
  flex-wrap: wrap; /* Allows wrapping if there are too many items */
  justify-content: flex-start; /* Align all menu items to the left */
  list-style: none; /* Remove default list styling */
  padding: 0; /* Remove default padding */
  margin: 0; /* Remove default margin */
}

ul.menu > li {
  flex: 0 1 auto; /* Prevent items from growing too large */
  text-align: center; /* Center-align text */
}

.region.region-header {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Align logo and site name in the same row */
  color: #6E5632; /* Site color */
}

.region.region-header .site-logo {
  margin-right: 1em; /* Add spacing between logo and site name */
}

.region.region-header .site-name {
  font-size: 1.5em;
  font-weight: bold;
  color: #6E5632; /* Site color */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#block-creative-branding {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Align logo and site name horizontally */
  width: 80%; /* Keep the block width */
  padding: 1em; /* Add padding to prevent logo from being too close to the top */
}

#block-creative-branding .site-logo {
  margin-right: 1em; /* Add spacing between logo and site name */
}

#block-creative-branding .site-name {
  padding: 1em;
  font-size: 1.5em;
  font-weight: bold;
  color: #6E5632; /* Site color */
}

#block-creative-branding .site-name a {
  color: #6E5632; /* Use site branding color for H1 link */
  text-decoration: none; /* Remove underline */
}

#block-creative-branding .site-name a:hover {
  text-decoration: underline; /* Add underline on hover */
}

#main-layout {
  padding: 2em; /* Add padding to the main layout */
}

/* Postscript regions - make them display side-by-side */
#postscript-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  padding: 1em;
}
#postscript-layout .region {
  flex: 1 1 auto;
  min-width: 200px;
  /* Mobile: full width */
}
@media only screen and (max-width: 767px) {
  #postscript-layout .region {
    flex: 1 1 100%;
  }
}
#postscript-layout .region {
  /* Tablet: 2 per row (50% each) */
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  #postscript-layout .region {
    flex: 1 1 calc(50% - 0.5em);
  }
}
#postscript-layout .region {
  /* Desktop: 4 per row (25% each) */
}
@media only screen and (min-width: 1024px) {
  #postscript-layout .region {
    flex: 1 1 calc(25% - 0.75em);
  }
}

/* Preface regions - make them display side-by-side */
#preface-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  padding: 1em;
}
#preface-layout .region {
  flex: 1 1 auto;
  min-width: 200px;
  /* Mobile: full width */
}
@media only screen and (max-width: 767px) {
  #preface-layout .region {
    flex: 1 1 100%;
  }
}
#preface-layout .region {
  /* Tablet: 2 per row (50% each) */
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  #preface-layout .region {
    flex: 1 1 calc(50% - 0.5em);
  }
}
#preface-layout .region {
  /* Desktop: 4 per row (25% each) */
}
@media only screen and (min-width: 1024px) {
  #preface-layout .region {
    flex: 1 1 calc(25% - 0.75em);
  }
}

/*# sourceMappingURL=creative.css.map */