@charset "utf-8";

/* ==========================================
   DIAMONDAVENUE.COM
   FLEX GRID / TICKET-BOX COMPATIBLE CSS
========================================== */

/* ==========================================
   ROOT VARIABLES
========================================== */

:root {
  --da-white: #ffffff;
  --da-light: #f7f7f7;
  --da-gray: #eeeeee;
  --da-soft-gray: #f4f4f4;
  --da-charcoal: #303030;
  --da-dark: #111111;
  --da-black: #000000;
  --da-blue: #0d5f94;
  --da-rose: #910048;
  --da-deep-blue: #0b3d5c;
  --da-menu-blue: #5597d1;
  --da-gold: #d4af37;
  --da-text: #333333;
  --da-text-light: #ffffff;
  --da-border: #dddddd;
  --da-shadow: rgba(0, 0, 0, 0.12);
}

/* ==========================================
   GLOBAL BASE
========================================== */

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
  color: var(--da-text);
  font-family: Arial, Helvetica, sans-serif;
  background: var(--da-white);
}

img,
object,
embed,
video {
  max-width: 100%;
}

img {
  height: auto;
}

/* ==========================================
   GENERAL SECTIONS
========================================== */

.section,
.section-white,
.section-light,
.section-gray,
.section-soft-gray,
.section-charcoal,
.section-dark,
.section-black,
.section-blue,
.section-rose,
.section-deep-blue,
.section-gold,
.section-transparent {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 36px 12px;
  clear: both;
}

.section-white {
  background: var(--da-white);
  color: var(--da-text);
}

.section-light {
  background: var(--da-light);
  color: var(--da-text);
}

.section-gray {
  background: var(--da-gray);
  color: var(--da-text);
}

.section-soft-gray {
  background: var(--da-soft-gray);
  color: var(--da-text);
}

.section-charcoal {
  background: var(--da-charcoal);
  color: var(--da-text-light);
}

.section-dark {
  background: var(--da-dark);
  color: var(--da-text-light);
}

.section-black {
  background: var(--da-black);
  color: var(--da-text-light);
}

.section-blue {
  background: var(--da-blue);
  color: var(--da-text-light);
}

.section-rose {
  background: var(--da-rose);
  color: var(--da-text-light);
}

.section-deep-blue {
  background: var(--da-deep-blue);
  color: var(--da-text-light);
}

.section-gold {
  background: var(--da-gold);
  color: var(--da-black);
}

.section-transparent {
  background: transparent;
  color: var(--da-text);
}

/* ==========================================
   CONTAINERS
========================================== */

.container,
.section-container,
.gridContainer {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 12px;
}

/* Use this when you want a wider page area */

.container-wide {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 12px;
}

/* ==========================================
   FLEX GRID SYSTEM
========================================== */

.flex-grid {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 20px;
}

.flex-row {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 20px;
  align-items: stretch;
}

.flex-item {
  flex: 1 1 0;
  min-width: 0;
}

/* ==========================================
   COLUMN WIDTH UTILITIES
========================================== */

.col-1-1 {
  flex: 0 0 100%;
  max-width: 100%;
}

.col-1-2 {
  flex: 0 0 calc(50% - 10px);
  max-width: calc(50% - 10px);
}

.col-1-3 {
  flex: 0 0 calc(33.333% - 14px);
  max-width: calc(33.333% - 14px);
}

.col-2-3 {
  flex: 0 0 calc(66.666% - 7px);
  max-width: calc(66.666% - 7px);
}

.col-1-4 {
  flex: 0 0 calc(25% - 15px);
  max-width: calc(25% - 15px);
}

.col-3-4 {
  flex: 0 0 calc(75% - 5px);
  max-width: calc(75% - 5px);
}

.col-1-5 {
  flex: 0 0 calc(20% - 16px);
  max-width: calc(20% - 16px);
}

/* ==========================================
   TICKET BOX SYSTEM
========================================== */

.ticket-box {
  background: var(--da-white);
  color: var(--da-text);
  border: 1px solid var(--da-border);
  border-radius: 10px;
  box-shadow: 0 3px 10px var(--da-shadow);
  padding: 20px;
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.ticket-box:hover,
.ticket-box:focus-within {
  background: var(--da-light);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  transform: translateY(-2px);
}

.ticket-box h1,
.ticket-box h2,
.ticket-box h3,
.ticket-box h4,
.ticket-box h5,
.ticket-box h6 {
  margin: 0 0 12px;
  color: var(--da-blue);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.25;
}

.ticket-box p {
  margin: 0 0 12px;
}

.ticket-box p:last-child {
  margin-bottom: 0;
}

.ticket-box a {
  color: var(--da-blue);
  text-decoration: none;
}

.ticket-box a:hover,
.ticket-box a:focus {
  color: var(--da-gold);
  text-decoration: underline;
}

/* Dark-section ticket boxes */

.section-black .ticket-box,
.section-dark .ticket-box,
.section-charcoal .ticket-box,
.section-blue .ticket-box,
.section-deep-blue .ticket-box {
  background: var(--da-white);
  color: var(--da-text);
}

.section-header {background: #ffffff;
}


/* ==========================================
   BOX VARIANTS
========================================== */

.ticket-box-light {
  background: var(--da-light);
}

.ticket-box-gray {
  background: var(--da-gray);
}

.ticket-box-blue {
  background: var(--da-blue);
  color: var(--da-white);
}

.ticket-box-blue h1,
.ticket-box-blue h2,
.ticket-box-blue h3,
.ticket-box-blue h4,
.ticket-box-blue h5,
.ticket-box-blue h6,
.ticket-box-blue a {
  color: var(--da-white);
}

.ticket-box-blue a:hover,
.ticket-box-blue a:focus {
  color: var(--da-gold);
}

.ticket-box-gold {
  background: var(--da-gold);
  color: var(--da-black);
}

.ticket-box-gold h1,
.ticket-box-gold h2,
.ticket-box-gold h3,
.ticket-box-gold h4,
.ticket-box-gold h5,
.ticket-box-gold h6 {
  color: var(--da-black);
}

/* ==========================================
   TEXT UTILITIES
========================================== */

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-small {
  font-size: 13px;
  line-height: 1.5;
}

.text-medium {
  font-size: 16px;
  line-height: 1.5;
}

.text-large {
  font-size: 20px;
  line-height: 1.4;
}

.text-medium-bold {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}

.text-large-bold {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
}

.text-blue {
  color: var(--da-blue);
}

.text-gold {
  color: var(--da-gold);
}

.text-white {
  color: var(--da-white);
}

.text-black {
  color: var(--da-black);
}

/* ==========================================
   BUTTON / LINK HELPERS
========================================== */

.da-button,
.ticket-box .da-button {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 999px;
  color: var(--da-white);
  background: var(--da-blue);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  line-height: 1;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.da-button:hover,
.da-button:focus,
.ticket-box .da-button:hover,
.ticket-box .da-button:focus {
  color: var(--da-black);
  background: var(--da-gold);
  text-decoration: none;
}

/* ==========================================
   SPACING UTILITIES
========================================== */

.mt-0 {
  margin-top: 0;
}

.mt-10 {
  margin-top: 10px;
}

.mt-20 {
  margin-top: 20px;
}

.mt-30 {
  margin-top: 30px;
}

.mb-0 {
  margin-bottom: 0;
}

.mb-10 {
  margin-bottom: 10px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-30 {
  margin-bottom: 30px;
}

.pt-0 {
  padding-top: 0;
}

.pt-20 {
  padding-top: 20px;
}

.pb-0 {
  padding-bottom: 0;
}

.pb-20 {
  padding-bottom: 20px;
}

/* ==========================================
   SECTION SPACING MODIFIERS
========================================== */

.section-tight {
  padding-top: 20px;
  padding-bottom: 20px;
}

.section-roomy {
  padding-top: 56px;
  padding-bottom: 56px;
}

.section-no-padding {
  padding-top: 0;
  padding-bottom: 0;
}

/* ==========================================
   FULL WIDTH / FULL SCREEN HELPERS
========================================== */

.full-width {
  width: 100%;
  max-width: none;
}

.full-screen {
  min-height: 100vh;
}

/* ==========================================
   LEGACY LAYOUT DIV COMPATIBILITY
   Keeps older pages from breaking
========================================== */

#LayoutDiv1,
#LayoutDiv2,
#LayoutDiv3,
#LayoutDiv4,
#LayoutDiv5,
#LayoutDiv6 {
  clear: both;
  width: 100%;
  margin-left: 0;
  display: block;
}

#LayoutDiv1 {
  background-color: #1c1a33;
}

#LayoutDiv2 {
  min-height: 40px;
  background-color: var(--da-menu-blue);
  border-bottom: 1px solid #505050;
}

#LayoutDiv3,
#LayoutDiv4 {
  background-color: #e5e5e5;
}

#LayoutDiv5 {
  background-color: var(--da-charcoal);
}

#LayoutDiv6 {
  background-color: var(--da-black);
}

/* ==========================================
   LEGACY STYLE COMPATIBILITY
   Preserved for older DiamondAvenue pages
========================================== */

.Style2,
.style3,
.style25 {
  color: var(--da-white);
  font-family: Arial, Helvetica, sans-serif;
}

.Style2 {
  font-size: small;
  font-weight: 500;
}

.style3 {
  font-size: 10px;
  font-weight: 500;
}

.style25 {
  font-size: 12px;
  font-weight: 200;
}

.Style9,
.Style12,
.Style14 {
  color: var(--da-black);
}

.Style30,
.Style35,
.Style40,
.Style42 {
  color: #ffcc00;
  font-family: Arial, Helvetica, sans-serif;
}

.Style35,
.Style40 {
  font-weight: 700;
}

/*------------------------------------
  Typography
------------------------------------*/
h1, .h1-white { font-size: 1.75em; font-weight: 700; }
h2, .h2-white,.h2-orange { font-size: 1.45em; font-weight: bold; }
h3, .h3-white { font-size: 1.15em; font-weight: 500; }
h4 { font-size: 1em; font-weight: 400; }
h5 { font-size: 1em; font-weight: 300; }
h6 { font-size: 1em; font-weight: 300; }

h1, h2, h3, h4, h5, h6 { margin:0 0 .5em 0; color:var(--text-dark); }
.h1-white, .h2-white, .h3-white { color:#ffffff; }
.h1-purple, .h2-purple, .h3-purple { color:#9900FF; }
.h1-huge-white { font-size: 22px; font-weight: bold;color:#ffffff; }
.h1-huge-black { font-size: 20px; font-weight: bold;color:#000000; }

.h2-huge-white { font-size: 20px; font-weight: bold;color:#ffffff; }
.h2-huge-black { font-size: 20px; font-weight: bold;color:#000000; }
.h2-huge-orange { font-size: 20px; font-weight: bold;color:#FF9900; }

.h3-huge-black { font-size: 18px; font-weight: bold;color:#000000; }

.text-big-bold { font-size: 18px; color: var(--text-dark); }
.text-black-16 { font-size:16px; font-weight:200;color:#000000; }
.text-big-bold-white-18 { font-size: 18px; color: var(--white-bright); }
.text-lt-blue-18 { font-size: 18px; color: var(--text-lt-blue); }
.text-huge-white-22 { font-size: 22px; color: var(--white-bright); }
.text-medium-white-16 { font-size:16px; font-weight:400; color:var(--white-bright); }
.text-medium-bold-white-16 { font-size:16px; font-weight:700; color:var(--white-bright); }
.text-white-small-10 { font-size: 10px; color: var(--white-bright); }
.text-white-small-12 { font-size: 10px; color: var(--white-bright); }
.text-bold { font-size: 16px; color: var(--text-dark); }
.text-small { font-size: 12px; color: var(--text-dark); }
.text-small-9 { font-size: 9px; color: var(--text-dark); }
.text-blue-12-bold { font-size: 12px; color: var(--blue-accent); }
.text-gold-bold-12 { font-size: 12px; color: #FF9900; }
.text-purple-bold-12 { font-size: 12px; color: #B899FF; }
.text-purple-bold-15 { font-size: 15px; color: #B899FF; }
.text-purple-bold-18 { font-size: 18px; font-weight: bold; color: #9900FF; }
.text-orange-bold-15 { font-size: 15px; color: #FF9900; }
.text-orange-bold-18 { font-size: 18px; color: #FF9900; }
.text-charcoal-bold-15 { font-size: 15px; color: #333333; }
.text-blue-medium-bold { font-size: 14px; color: var(--blue-accent); }
.text-blue-big-bold { font-size: 20px; color: var(--blue-accent); }
.text-white-extra-small { font-size: 9px; color: var(--white-bright); }
.text-white-extra-small-bold { font-size: 11px; font-weight: bold; color: var(--white-bright); }
.text-white-small-bold { font-size: 12px; font-weight: bold; color: var(--white-bright); }
.text-white-bold, .text-blue-bold, .text-gold-bold, .text-medium-bold { font-size: 16px; font-weight: bold; }
.text-white-bold { color: var(--white-bright); }
.text-blue-bold { color: var(--blue-accent); }
.text-orange-bold-14 {  font-size: 14px; font-weight: 800; color: #FF9900;}
.text-blue-small-bold { font-size: 9px; font-weight: 500; color: var(--blue-accent); }
.text-light { font-size: 12px; font-weight: 100; color: var(--text-gray); }
.text-large-bold { font-size: 24px; font-weight: bold; color: var(--text-gray); }
.text-light-gray { font-size: 12px; font-weight: bold; color: #999999; }
.text-light-gray-8 { font-size:8px; font-weight:700; color:#999999; }
.text-light-gray-6 { font-size: 8px; font-weight: bold; color: #7c7c7c; }
.text-center { text-align: center; }



/* ==========================================
   RESPONSIVE BEHAVIOR
========================================== */

@media (max-width: 992px) {
  .col-1-4,
  .col-1-5 {
    flex: 0 0 calc(50% - 10px);
    max-width: calc(50% - 10px);
  }

  .col-1-3,
  .col-2-3,
  .col-3-4 {
    flex: 0 0 calc(50% - 10px);
    max-width: calc(50% - 10px);
  }
}

@media (max-width: 768px) {
  .section,
  .section-white,
  .section-light,
  .section-gray,
  .section-soft-gray,
  .section-charcoal,
  .section-header,
  .section-dark,
  .section-black,
  .section-blue,
  .section-deep-blue,
  .section-gold,
  .section-transparent {
    padding: 28px 10px;
  }

  .container,
  .section-container,
  .gridContainer,
  .container-wide {
    padding: 0 10px;
  }

  .flex-row {
    gap: 16px;
  }

  .col-1-2,
  .col-1-3,
  .col-2-3,
  .col-1-4,
  .col-3-4,
  .col-1-5 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .ticket-box {
    padding: 16px;
  }

  .section-roomy {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

/* ========================================== TRUE FULL-WIDTH / FULL-SCREEN SECTION FIX DiamondAvenue.com ========================================== */ 
/* ========================================== BASE SECTION BEHAVIOR ========================================== */ 

.section, .section-white, .section-light, .section-gray, .section-soft-gray, .section-charcoal, .section-header, .section-dark, .section-rose, .section-black, .section-blue, .section-deep-blue, .section-gold, .section-transparent { display: block; width: 100%; max-width: none; margin: 0; padding: 36px 12px; clear: both; box-sizing: border-box; }
 
/* ========================================== TRUE BROWSER-WIDE BREAKOUT SECTION ========================================== */ 

.full-width, .section.full-width, .section-white.full-width, .section-light.full-width, .section-gray.full-width, .section-soft-gray.full-width, .section-charcoal.full-width, .section-header.full-width, .section-dark.full-width,.section-rose.full-width, .section-black.full-width, .section-blue.full-width, .section-deep-blue.full-width, .section-gold.full-width, .section-transparent.full-width { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); box-sizing: border-box; } 

/* ========================================== TRUE FULL-SCREEN HEIGHT ========================================== */ .full-screen, .section.full-screen, .section-white.full-screen, .section-light.full-screen, .section-gray.full-screen, .section-soft-gray.full-screen, .section-charcoal.full-screen, .section-header.full-screen, .section-dark.full-screen, .section-rose.full-screen, .section-black.full-screen, .section-blue.full-screen, .section-deep-blue.full-screen, .section-gold.full-screen, .section-transparent.full-screen { min-height: 100vh; } 

/* ========================================== FULL-WIDTH AND FULL-SCREEN TOGETHER ========================================== */ 

.full-width.full-screen { width: 100vw; max-width: 100vw; min-height: 100vh; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } 

/* ========================================== READABLE INNER CONTENT CONTAINERS ========================================== */ 

.container, .section-container, .gridContainer { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 12px; box-sizing: border-box; } 

/* ========================================== WIDER OPTIONAL CONTENT CONTAINER ========================================== */ 

.container-wide { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 12px; box-sizing: border-box; } 

/* ========================================== PREVENT ACCIDENTAL HORIZONTAL SCROLLING ========================================== */ 

html, body { max-width: 100%; overflow-x: hidden; }

/* ==========================================
   FORCE SECTION CONTENT CENTERING
   DiamondAvenue.com
========================================== */

/* Center text and inline content inside all section types */
.section,
.section-white,
.section-light,
.section-gray,
.section-soft-gray,
.section-charcoal,
.section-dark,
.section-black,
.section-blue,
.section-deep-blue,
.section-rose,
.section-gold,
.section-transparent {
  text-align: center;
}

/* Center section containers */
.section .container,
.section-white .container,
.section-light .container,
.section-gray .container,
.section-soft-gray .container,
.section-charcoal .container,
.section-dark .container,
.section-black .container,
.section-blue .container,
.section-deep-blue .container,
.section-gold .container,
.section-transparent .container,
.section .section-container,
.section-white .section-container,
.section-light .section-container,
.section-gray .section-container,
.section-soft-gray .section-container,
.section-charcoal .section-container,
.section-dark .section-container,
.section-black .section-container,
.section-blue .section-container,
.section-rose .section-container,
.section-deep-blue .section-container,
.section-gold .section-container,
.section-transparent .section-container {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Center flex-grid rows and items */
.section .flex-grid,
.section-white .flex-grid,
.section-light .flex-grid,
.section-gray .flex-grid,
.section-soft-gray .flex-grid,
.section-charcoal .flex-grid,
.section-dark .flex-grid,
.section-black .flex-grid,
.section-blue .flex-grid,
.section-deep-blue .flex-grid,
.section-rose .flex-grid,
.section-gold .flex-grid,
.section-transparent .flex-grid {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.section .flex-row,
.section-white .flex-row,
.section-light .flex-row,
.section-gray .flex-row,
.section-soft-gray .flex-row,
.section-charcoal .flex-row,
.section-dark .flex-row,
.section-black .flex-row,
.section-blue .flex-row,
.section-rose .flex-row,
.section-deep-blue .flex-row,
.section-gold .flex-row,
.section-transparent .flex-row {
  justify-content: center;
  align-items: stretch;
  text-align: center;
}

/* Center individual flex items and ticket boxes */
.section .flex-item,
.section-white .flex-item,
.section-light .flex-item,
.section-gray .flex-item,
.section-soft-gray .flex-item,
.section-charcoal .flex-item,
.section-dark .flex-item,
.section-black .flex-item,
.section-blue .flex-item,
.section-deep-blue .flex-item,
.section-gold .flex-item,
.section-transparent .flex-item,
.section .ticket-box,
.section-white .ticket-box,
.section-light .ticket-box,
.section-gray .ticket-box,
.section-soft-gray .ticket-box,
.section-charcoal .ticket-box,
.section-dark .ticket-box,
.section-black .ticket-box,
.section-blue .ticket-box,
.section-deep-blue .ticket-box,
.section-rose .ticket-box,
.section-gold .ticket-box,
.section-transparent .ticket-box {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Center images and embedded media inside sections */
.section img,
.section-white img,
.section-light img,
.section-gray img,
.section-soft-gray img,
.section-charcoal img,
.section-dark img,
.section-black img,
.section-blue img,
.section-rose img,
.section-deep-blue img,
.section-gold img,
.section-transparent img,
.section iframe,
.section-white iframe,
.section-light iframe,
.section-gray iframe,
.section-soft-gray iframe,
.section-charcoal iframe,
.section-dark iframe,
.section-black iframe,
.section-blue iframe,
.section-deep-blue iframe,
.section-gold iframe,
.section-transparent iframe {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Utility class to intentionally keep text left-aligned when needed */
.text-left,
.justify-left,
.left-content {
  text-align: left;
}

/* Utility class to intentionally center specific content */
.text-center,
.justify-center,
.center-content {
  text-align: center;
}

/* ============================================================
   DIAMONDAVENUE
   DIAMOND OVERVIEW TICKET BOXES

   Color palette coordinated with Ajatix menu:
   Burgundy:    #910048
   Magenta:     #ca0065
   Pale Pink:   #f2bfdb
   Purple:      #800080
   Black:       #000000
   White:       #ffffff
============================================================ */


/* ============================================================
   OVERVIEW SECTION
============================================================ */

.da-diamond-overview {
    width: 100%;
    box-sizing: border-box;
}


/* ============================================================
   OVERVIEW INTRODUCTION
============================================================ */

.da-overview-intro {
    max-width: 900px;

    margin:
        0 auto
        28px;

    padding:
        0 12px;

    text-align: center;

    color: #333333;

    font-size: 16px;

    line-height: 1.6;
}


/* ============================================================
   BASE OVERVIEW TICKET BOX
============================================================ */

.da-overview-box {
    position: relative;

    height: 100%;

    padding: 22px;

    box-sizing: border-box;

    border:
        1px solid
        rgba(145, 0, 72, 0.22);

    border-radius: 10px;

    background: #ffffff;

    box-shadow:
        0 3px 10px
        rgba(0, 0, 0, 0.12);

    text-align: left;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}


.da-overview-box:hover,
.da-overview-box:focus-within {
    transform:
        translateY(-3px);

    border-color:
        #910048;

    box-shadow:
        0 7px 18px
        rgba(0, 0, 0, 0.18);
}


/* ============================================================
   TICKET BOX TOP ACCENT
============================================================ */

.da-overview-box::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 6px;

    border-radius:
        10px 10px
        0 0;

    background:
        #910048;
}


/* ============================================================
   ALTERNATING ACCENT COLORS
============================================================ */

.da-overview-box.da-accent-magenta::before {
    background:
        #ca0065;
}


.da-overview-box.da-accent-purple::before {
    background:
        #800080;
}


.da-overview-box.da-accent-black::before {
    background:
        #000000;
}


/* ============================================================
   BOX HEADINGS
============================================================ */

.da-overview-box h2,
.da-overview-box h3 {
    margin:
        4px 0
        12px;

    color:
        #910048;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        20px;

    font-weight:
        700;

    line-height:
        1.25;
}


.da-overview-box.da-accent-magenta h2,
.da-overview-box.da-accent-magenta h3 {
    color:
        #ca0065;
}


.da-overview-box.da-accent-purple h2,
.da-overview-box.da-accent-purple h3 {
    color:
        #800080;
}


.da-overview-box.da-accent-black h2,
.da-overview-box.da-accent-black h3 {
    color:
        #000000;
}


/* ============================================================
   BOX TEXT
============================================================ */

.da-overview-box p {
    margin:
        0 0
        14px;

    color:
        #333333;

    font-size:
        14px;

    line-height:
        1.55;
}


.da-overview-box p:last-of-type {
    margin-bottom:
        18px;
}


/* ============================================================
   OVERVIEW LINKS / BUTTONS
============================================================ */

.da-overview-link {
    display:
        inline-block;

    padding:
        9px 15px;

    border-radius:
        999px;

    background:
        #910048;

    color:
        #ffffff !important;

    font-size:
        13px;

    font-weight:
        700;

    line-height:
        1.2;

    text-decoration:
        none !important;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}


.da-overview-link:hover,
.da-overview-link:focus {
    background:
        #000000;

    color:
        #ffffff !important;

    text-decoration:
        none !important;
}


/* Magenta button */

.da-accent-magenta
.da-overview-link {
    background:
        #ca0065;
}


/* Purple button */

.da-accent-purple
.da-overview-link {
    background:
        #800080;
}


/* Black button */

.da-accent-black
.da-overview-link {
    background:
        #000000;
}


.da-accent-black
.da-overview-link:hover,
.da-accent-black
.da-overview-link:focus {
    background:
        #910048;
}


/* ============================================================
   OPTIONAL HIGHLIGHT BOX
============================================================ */

.da-overview-highlight {
    background:
        #f2bfdb;

    border-color:
        #910048;
}


/* ============================================================
   MOBILE
============================================================ */

@media screen and (max-width: 768px) {

    .da-overview-box {
        padding:
            20px 18px;
    }


    .da-overview-box h2,
    .da-overview-box h3 {
        font-size:
            19px;
    }


    .da-overview-intro {
        font-size:
            15px;
    }

}