/*
 |------------------------------------------------------------------------------
 | Danse macabre scope
 |------------------------------------------------------------------------------
 |
 | This scope can be used on blog and attraction detail pages to restyle
 | some of the components to the Danse Macabre theme.
 |
 */

/**
 * Platform base spacing unit
 */

/**
 * Variations
 */

/**
 * Colors variables
 */

/* Black */

/* Blue */

/* Brown */

/* Green */

/* Grey */

/* Orange */

/* Red */

/* Taupe */

/* Transparent */

/* Yellow */

/* White */

/**
 * Base color usage
 */

/**
 * Base platform properties
 */

/**
 * Fonts
 */

/**
 * Copy text styling
 */

/**
 * Variables to include as .bg--{key}
 *
 * Example:
 * dark: #000000
 *
 * will be compiled to
 * .bg--dark { background-color: #000000; }
 *
 * Used in /partials/_colors.scss
 */

/**
 * Variables to include as .text--{key}
 *
 * Example:
 * 'negative': #ff0000
 *
 * will be compiled to
 * .text--negative { color: #ff0000; }
 *
 * Used in /partials/_colors.scss
 */

/**
 * Variables to include as .border--{key}
 *
 * Example:
 * 'negative': #ff0000
 *
 * will be compiled to
 * .border--negative { color: #ff0000; }
 *
 * Used in /partials/_colors.scss
 */

/**
 * Variables to include as .{key}
 *
 * Example:
 * 'container': 980px
 *
 * will be compiled to
 * .container { width: 980px; margin: 0 auto; }
 *
 * Used in /partials/_containers.scss
 */

/**
 * Icon sizes
 */

/**
 * Input specs
 */

/**
 * Headings sizes
 * [1] - Used for .giga
 * [2] - Used for desk, lap & palm h1
 * [3] - Used for desk & lap h2
 * [4] - Used for desk & lap h3 AND palm h2, h3, h4
 * [5] - Used for desk, lap h4 AND palm h5
 * [6] - Used for desk, lap h5
 * [7] - Used for palm .palm-zeta
 * [8] - Used for palm .palm-milli
 * [9] - Used for .micro
 * [10] - Used for .nano
 *
 * CHEATSHEET
 * Desk & Lap:
 * h1, .giga - 60px
 * .alpha - 48px
 * h2, .beta - 36px
 * h3, .gamma - 24px
 * h4, .delta - 20px
 * h5, .epsilon - 16px
 * h6, .zeta - 14px
 * .milli - 12px
 *
 * Palm:
 * h1, .giga - 36px
 * .alpha - 48px
 * h2, .beta - 24px
 * h3, .gamma - 24px
 * h4, .delta - 24px
 * h5, .epsilon - 20px
 * h6, .epsilon - 14px
 * .milli - 12px
 */

/* [1] */

/* [2] */

/* [3] */

/* [4] */

/* [5] */

/* [6] */

/* [7] */

/* [8] */

/* [9] */

/* [10] */

/*------------------------------------*\
    #LAYOUT
\*------------------------------------*/

/**
 * The inuitcss layout system uses `box-sizing: border-box;` and
 * `display: inline-block;` to create an extremely powerful, flexible
 * alternative to the traditional grid system. Combine the layout items with
 * the widths found in `trumps.widths`.
 */

/*------------------------------------*\
    #WIDTHS
\*------------------------------------*/

/**
 * A series of width helper classes that you can use to size things like grid
 * systems. Classes can take a fraction-like format (e.g. `.2/3`) or a spoken-
 * word format (e.g. `two-thirds`). Toggle formats by overriding the
 * `$inuit-use-fractions` variable defined below.
 */

/*------------------------------------*\
    #SPACING
\*------------------------------------*/

/**
 * Margin and padding helper classes. Use these to tweak layout on a micro
 * level.
 *
 * `.(m|p)(t|r|b|l|h|v)(-|+|0) {}` = margin/padding top/right/bottom/left/horizontal/vertical less/more/none
 */

/*------------------------------------*\
    #SPACING-RESPONSIVE
\*------------------------------------*/

/**
 * Margin and padding helper classes. Use these to tweak layout on a micro
 * level.
 *
 * `.(m|p)(t|r|b|l|h|v)(-|+|0) {}` = margin/padding top/right/bottom/left/horizontal/vertical less/more/none
 */

/* *\
    #
\* */

/*
 |------------------------------------------------------------------------------
 | Danse Macabre theme setup
 |------------------------------------------------------------------------------
 |
 | [*] Everything that is marked with this symbol in the comment above is work
 | that was done after feedback from the "Merk & Creatie" department.
 |
 */

/* ========================================================================== */

@font-face {
  font-family: 'Caslon Antique';
  src: url("/content/font/caslon-antique/CaslonAntique.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ========================================================================== */

/* ========================================================================== */

/* ========================================================================== */

/* ========================================================================== */

/* ========================================================================== */

/* ========================================================================== */

/* ========================================================================== */

/* ========================================================================== */

@font-face {
  font-family: 'LHF Tributary Regular';
  src: url("/content/font/lhf-tributary/LHF-Tributary-Regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'LHF Tributary Distressed';
  src: url("/content/font/lhf-tributary/LHF-Tributary-Distressed.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ========================================================================== */

/* ========================================================================== */

/**
 * Custom property overrides for Danse Macabre theme, you can find the original
 * values inside the frontend\src\scss\components\_blog.scss file
 */

/* ========================================================================== */

.s-theme-dance-macabre .wrapper {
  color: #082823 !important;
  /* ---------------------------------------------------------------------- */
  /* ---------------------------------------------------------------------- */
  /**
     * Styling used on both the blog and the attraction page,
     */
}

.s-theme-dance-macabre .wrapper .text--grey {
  color: #667d77 !important;
}

.s-theme-dance-macabre .wrapper .text--red {
  color: #233e3b !important;
}

.s-theme-dance-macabre .wrapper .blog-article h2,
.s-theme-dance-macabre .wrapper .blog-article h3,
.s-theme-dance-macabre .wrapper .blog-article h4,
.s-theme-dance-macabre .wrapper .blog-article h5,
.s-theme-dance-macabre .wrapper .blog-article h6,
.s-theme-dance-macabre .wrapper .blog-article strong {
  color: #667d77 !important;
}

.s-theme-dance-macabre .wrapper .blog-article a:not(.btn) {
  color: inherit !important;
}

.s-theme-dance-macabre .wrapper .blog-article a:not(.btn):hover {
  color: #667d77 !important;
}

.s-theme-dance-macabre .wrapper .page-panel.bg--white {
  background-color: transparent !important;
}

.s-theme-dance-macabre .wrapper .page-panel.border-top--taupe-light.border-bottom--taupe-light {
  border-color: transparent !important;
}

.s-theme-dance-macabre .wrapper hr {
  border-color: #667d77 !important;
}

.s-theme-dance-macabre .wrapper .border--taupe-light,
.s-theme-dance-macabre .wrapper .border-top--taupe-light,
.s-theme-dance-macabre .wrapper .border-bottom--taupe-light,
.s-theme-dance-macabre .wrapper .layout__item--bordered::before {
  border-color: #667d77 !important;
}

.s-theme-dance-macabre .wrapper h1,
.s-theme-dance-macabre .wrapper .giga {
  font-size: 66px !important;
}

.s-theme-dance-macabre .wrapper h2,
.s-theme-dance-macabre .wrapper .beta {
  font-size: 35.2px !important;
}

.s-theme-dance-macabre .wrapper h3,
.s-theme-dance-macabre .wrapper .gamma {
  font-size: 26.4px !important;
}

.s-theme-dance-macabre .wrapper h4,
.s-theme-dance-macabre .wrapper .delta {
  font-size: 26.4px !important;
}

.s-theme-dance-macabre .wrapper h5,
.s-theme-dance-macabre .wrapper .epsilon {
  font-size: 23.1px !important;
}

.s-theme-dance-macabre .wrapper h6,
.s-theme-dance-macabre .wrapper .zeta {
  font-size: 19.8px !important;
}

.s-theme-dance-macabre .wrapper input,
.s-theme-dance-macabre .wrapper .btn {
  font-size: 19.8px !important;
}

.s-theme-dance-macabre .wrapper .blog-article p:not(.intro) {
  font-size: 23.1px !important;
}

.s-theme-dance-macabre .wrapper h1 {
  font-family: "LHF Tributary Regular", sans-serif !important;
}

.s-theme-dance-macabre .wrapper .brand-face,
.s-theme-dance-macabre .wrapper .brand-face-bold,
.s-theme-dance-macabre .wrapper div,
.s-theme-dance-macabre .wrapper input,
.s-theme-dance-macabre .wrapper select,
.s-theme-dance-macabre .wrapper p {
  font-family: "Caslon Antique", sans-serif !important;
  letter-spacing: inherit;
}

.s-theme-dance-macabre .wrapper .blog-article {
  font-family: "Caslon Antique", sans-serif !important;
}

.s-theme-dance-macabre .wrapper .blog-article .category {
  font-family: "Caslon Antique", sans-serif !important;
}

.s-theme-dance-macabre .wrapper .blog-article .brand-face,
.s-theme-dance-macabre .wrapper .blog-article .brand-face-bold {
  font-family: "Caslon Antique", sans-serif !important;
}

.s-theme-dance-macabre .wrapper .blog-article h1.brand-face,
.s-theme-dance-macabre .wrapper .blog-article h1.brand-face-bold {
  font-family: "LHF Tributary Regular", sans-serif !important;
}

.s-theme-dance-macabre .wrapper .blog-article strong {
  font-weight: normal !important;
}

.s-theme-dance-macabre .wrapper .blog-hero-fix h1.giga {
  font-size: 60px !important;
}

.s-theme-dance-macabre .wrapper .blog-article h1.beta {
  font-size: 52px !important;
}

.s-theme-dance-macabre .wrapper .quote {
  font-size: 26.4px !important;
  font-family: "Caslon Antique", sans-serif !important;
}

.s-theme-dance-macabre .wrapper .btn {
  font-family: "Caslon Antique", sans-serif !important;
}

.s-theme-dance-macabre .wrapper .btn:not(.btn--ghost) {
  color: #233e3b;
  background-color: none;
  color: white;
  background: -webkit-radial-gradient(circle, #667d77, #233e3b) !important;
  background: radial-gradient(circle, #667d77, #233e3b) !important;
}

.s-theme-dance-macabre .wrapper .btn:not(.btn--ghost):hover,
.s-theme-dance-macabre .wrapper .btn:not(.btn--ghost):focus,
.s-theme-dance-macabre .wrapper .btn:not(.btn--ghost):active,
.s-theme-dance-macabre .wrapper .btn:not(.btn--ghost).active {
  background: -webkit-radial-gradient(circle, #5b6f6a, #1a2e2b) !important;
  background: radial-gradient(circle, #5b6f6a, #1a2e2b) !important;
}

.s-theme-dance-macabre .wrapper .btn:not(.btn--ghost),
.s-theme-dance-macabre .wrapper .btn:not(.btn--ghost):before {
  border-color: #0e2421 !important;
}

.s-theme-dance-macabre .wrapper .hero-shot h1 {
  font-size: 70px !important;
}

.s-theme-dance-macabre .wrapper .hero-shot .ui-face {
  margin-bottom: 0 !important;
}

.s-theme-dance-macabre .wrapper .hero-shot .ui-face ~ .btn {
  margin-top: 20px;
}

.s-theme-dance-macabre .wrapper .hero-shot .brand-face p {
  margin: 0;
}

.s-theme-dance-macabre .wrapper .blog-container.blog-article {
  --blog-primary-theme-color: #233e3b;
  --blog-secondary-theme-color: #0e2421;
  --blog-primary-active-theme-color: black;
  --blog-message-box-anchor-hover-color: #667d77;
  /* ---------------------------------------------------------------------- */
  border-image-source: url("/content/img/generic/borders/danse-macabre-dark.svg");
  border-width: 20px 20px 100px 20px;
  border-image-width: 300px 300px;
  border-image-slice: 300;
  border-image-repeat: round;
  border-style: inset;
  border-image-outset: 21px 20px;
  background-color: #d4ddda;
  border-radius: 10px;
}

.s-theme-dance-macabre .wrapper .message-box {
  --blog-primary-theme-color: #233e3b;
  --blog-secondary-theme-color: #0e2421;
  --blog-primary-active-theme-color: black;
  --blog-message-box-anchor-hover-color: #667d77;
  font-family: "Caslon Antique", sans-serif !important;
}

.s-theme-dance-macabre .wrapper .message-box h3 {
  font-family: "Caslon Antique", sans-serif !important;
}

@media screen and (max-width: 767px) {
  .s-theme-dance-macabre .wrapper h1,
  .s-theme-dance-macabre .wrapper .giga {
    font-size: 35.2px !important;
  }

  .s-theme-dance-macabre .wrapper h2,
  .s-theme-dance-macabre .wrapper .beta {
    font-size: 26.4px !important;
  }

  .s-theme-dance-macabre .wrapper h3,
  .s-theme-dance-macabre .wrapper .gamma {
    font-size: 26.4px !important;
  }

  .s-theme-dance-macabre .wrapper h4,
  .s-theme-dance-macabre .wrapper .delta {
    font-size: 23.1px !important;
  }

  .s-theme-dance-macabre .wrapper .blog-hero-fix h1.giga {
    font-size: 36px !important;
  }

  .s-theme-dance-macabre .wrapper .blog-article h1.beta {
    font-size: 36px !important;
  }

  .s-theme-dance-macabre .wrapper .hero-shot h1 {
    font-size: 50px !important;
  }

  .s-theme-dance-macabre .wrapper .blog-container.blog-article {
    border-width: 15px 30px 80px 30px;
    border-image-width: 150px 150px;
    border-image-outset: 0;
    border-image-slice: 150;
  }

  .s-theme-dance-macabre .wrapper .blog-container.blog-article::before {
    display: none;
  }

  .s-theme-dance-macabre .wrapper .blog-container.blog-article article {
    margin-top: 0;
  }

  .s-theme-dance-macabre .wrapper .blog-container.blog-article {
    margin-top: -50px !important;
  }
}
/*# sourceMappingURL=danse-macabre.css.map */