/* General rules */
#PcShowContent {
  /* overwrite width limit on CMS page */
  width: auto !important;
}

#PcShowStaticContentNo1 p {
  margin: revert !important;
}

#NespressoPageLayout #PcShowStaticContentNo1 > div {
  width: 100%;
}

/* Hide left and right columns */
#NespressoPageLayout #left {
  display: none;
}

#NespressoPageLayout #right {
  display: none;
}

#NespressoPageLayout #PcSitePath {
  display: none;
}

/* Make center bigger */
#NespressoPageLayout #center {
  width: 100% !important;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0 !important;
}

/* Set grey background */
#NespressoPageLayout #foreground {
  background: #f6f7f8;
}

/* Hide box-shadow on center content */
#NespressoPageLayout #PcShowStaticContentNo1 {
  box-shadow: none !important;
}

/* general page styles */
:root {
  --n-gap: 20px;
}

@media screen and (max-width: 800px) {
  :root {
    --n-gap: 10px;
  }
}

.n-page {
  background-color: #f6f7f8;
}
.n-page--white {
  background-color: white;
}

.n-row {
  gap: var(--n-gap);
  margin-bottom: var(--n-gap);
}

.coffee-row {
  margin-left: 0px;
  margin-right: 0px;
  display: flex;
  flex-wrap: wrap;
}

.coffee-row2 {
  margin-left: 15px;
  margin-right: 15px;
  display: flex;
  flex-wrap: wrap;
}

.coffee-row3 {
  margin-left: 0px;
  margin-right: 0px;
  display: flex;
  flex-wrap: wrap;
  height: 9vw;
}

/* card */
.n-card {
  min-height: 124px;
}

.n-card--large {
  height: auto;
}

.n-card-background-image {
  background-size: cover;
  height: 100%;
}

h2.n-card-title {
  font-size: 28px;
}

h3.n-card-title {
  font-size: 20px;
}

.n-card-text {
  font-size: 14px;
}

/* compact-hero */
.n-compact-hero-title {
  font-size: 32px;
}

.n-compact-hero-text {
  font-size: 22px;
}

/* n-hero-right-left-wrapper */
.n-hero-right-left-content-text-wrapper {
  width: 100%;
  padding: 20px;
}

@media screen and (min-width: 800px) {
  .n-hero-right-left-content-text-wrapper {
    width: 50%;
    padding: 40px;
  }
}

/* contact-section */
.n-contact-sections {
  border: none !important;
  border-radius: 0 !important;
}

.n-contact-sections--dark {
  background-color: #60575b !important;
  color: #fff;
}
.n-contact-sections img {
  width: 100%;
}

.n-contact-sections__anchor {
  visibility: hidden;
  position: relative;
  top: -130px;
}

.n-contact-sections-image {
  width: 50px !important;
  margin: 0 auto;
}

.n-contact-sections__link {
  color: #fff !important;
  font-weight: normal;
  border: 1px solid #fff;
  align-self: center;
  padding: 5px 10px;
}

/* two-col-text-block */
.n-two-col-text-block {
  -webkit-column-count: 1;
  -moz-column-count: 1;
  column-count: 1;

  -webkit-column-gap: 20px;
  -moz-column-gap: 20px;
  column-gap: 20px;
}

@media screen and (min-width: 600px) {
  .n-two-col-text-block {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }
}

/* hero-with-link */
.n-hero-with-link {
}

.n-hero-with-link-title {
  font-size: 26px;
}

@media screen and (min-width: 600px) {
  .n-hero-with-link-title {
    font-size: 36px;
  }
}

.n-hero-with-link-background-image {
  background-size: cover;
  height: 100%;
  padding: 100px;
}

@media screen and (max-width: 600px) {
  .n-hero-with-link-background-image {
    padding: 50px 20px;
  }
}

/* image-text */
.n-image-text {
  background-color: #fff !important;
  display: flex;
  gap: 30px;
  padding: 20px;
}

.n-image-text--vertical {
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.n-image-text--horizontal {
  flex-direction: row;
  justify-content: left;
  align-items: center;
  flex-direction: row-reverse;
}

.n-image-text__title {
  color: #000;
}

.n-image-text__image {
  max-width: 100%;
  max-height: 100%;
}

.n-image-text--vertical .n-image-text__image {
  max-height: 188px;
}

.n-image-text--horizontal .n-image-text__image {
  height: 96px;
}

.n-image-text--horizontal .n-image-text__text {
  height: 96px;
  order: 1;
}

/*Main Menu*/

.n-main-menu {
  background-color: #c09473;
  display: flex;
  height: 139px;
  margin-bottom: 20px;
}
.n-main-menu__inner {
  display: flex;
  justify-content: flex-start;
  gap: 40px;
  width: 100%;
  padding: 0 50px 0 20px;
}

.n-main-menu__item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}

.n-main-menu__item:last-child {
  margin-left: auto;
}

.n-main-menu__item:hover {
  text-decoration: underline;
  color: white;
}

.n-main-menu__icon {
  width: 41px;
}

.n-main-menu__text {
  color: white;
  margin-bottom: 0;
  font-size: 14px;
}

.main-menu__logo {
  align-self: center;
  flex-basis: 15%;
  max-width: 250px;
  margin-left: 20px;
  margin-right: 30px;
}

/* Panel */
.n-panel {
  background-color: #f6f7f8;
  padding: 40px;
  max-width: 1164px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
}

.n-panel--white {
  background-color: #ffffff;
}

.n-panel--grey {
  background-color: #f6f7f8;
}

/* Accordion */
.n-accordion {
}

.n-accordion__item {
  display: flex;
  position: relative;
  font-size: 16px;
  margin-bottom: 22px;
  max-width: 918px;
}

.n-accordion__icon {
  margin-right: 5px;
  position: absolute;
  left: 0;
  z-index: 0;
  top: 3px;
}

.n-accordion__icon--open {
  display: none;
}

.n-accordion__icon--closed {
}

.n-accordion__details {
  z-index: 1;
}

.n-accordion__details[open] ~ .n-accordion__icon--open {
  display: block;
}

.n-accordion__details[open] ~ .n-accordion__icon--closed {
  display: none;
}

.n-accordion__summary {
  font-size: 16px;
  padding-left: 30px;
  font-weight: bold;
  list-style-type: "";
  margin-bottom: 5px;
}

.n-accordion__answer {
  padding-left: 30px;
}

/* image-full-width */
.n-image-full-width {
  width: 100%;
}

/* Coffee Button */
.coffee-button {
  background-color: #c09473;
}

/* Coffee list and icons */
ul.coffee-list-left {
  text-align: left;
}

.coffee-list-left {
  text-align: left;
}

/* Form pages */
.n-form-page {
  padding-left: 30px;
}

/* Fix new storybook banner height*/
.s-landing-page-banner {
  height: auto!important;
}