/*
TODO: remove [class*=ds-] when is the core ds in use. i.e. deprecated patterns.
*/
:root {
  --bodytext-font-family: Lora, Georgia, serif;
  --title-font-family: Montserrat, sans-serif;
  --font-size: 16px;
  --padding100: .8rem;
  --padding200: .9rem;
  --padding300: 1rem;
  --padding400: 1.2rem;
  --padding500: 1.5rem;
  --padding600: 2rem;
  --padding700: 2.2rem;
  --padding800: 2.5rem;
  --color-r: #d22d23;
  --color-r2: #fb4d42;
  --color-ob: #1871bd;
  --color-ob-f1: #6abaff; /*#1871bdcc; #6abaff */
  --color-ob-f2: #d4e8fa; /*#1871bd33; #d4e8fa */
  --color-b: #091f2f;
  --color-b-f1: #091f2fcc;
  --color-b-f2: #091f2f33;
  --color-w: #ffffff;
  --color-w2: #e0e0e0;
  --color-g: #f3f3f3;
  --color-g2: #d2d2d2;
  --color-bl: #58585b;
  --color-error: #fb4d42;
  --bosy-text: var(--color-bl);
  font-weight: normal;
  line-height: 2.16667em;
  font-family: var(--bodytext-font-family), serif;
}
@media (min-width: 480px) {
  :root {
    --font-size: 18px;
    line-height: 2.16667em;
  }
}

/* default item color schemes */
.cs-b {
  --primary-color: var(--color-w);
  --background-color: var(--color-b);
  --active-primary-color: var(--color-b);
  --active-background-color: var(--color-w);
}
.cs-ob {
  --primary-color: var(--color-w);
  --background-color: var(--color-ob);
  --active-primary-color: var(--color-ob);
  --active-background-color: var(--color-w);
}
.cs-r {
  --primary-color: var(--color-w);
  --background-color: var(--color-r);
  --active-primary-color: var(--color-r);
  --active-background-color: var(--color-w);
}
.cs-w {
  --primary-color: var(--color-b);
  --background-color: var(--color-w);
  --active-primary-color: var(--color-w);
  --active-background-color: var(--color-b);
}
.cs-g {
  --primary-color: var(--color-b);
  --background-color: var(--color-g);
  --active-primary-color: var(--color-g);
  --active-background-color: var(--color-b);
}
/* Page Wireframes */
/* Grid-based rows & columns */
.ds-g {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  max-width: 1200px;
}
.ds-g *::before, .ds-g *::after {
  box-sizing: border-box;
}
.ds-g *[class*="col-"] {
  grid-column: span 12;
  vertical-align: top;
}
@media (min-width: 480px) {
  .ds-g .col-1 { grid-column: span 1; }
  .ds-g .col-2 { grid-column: span 2; }
  .ds-g .col-3 { grid-column: span 3; }
  .ds-g .col-4 { grid-column: span 4; }
  .ds-g .col-5 { grid-column: span 5; }
  .ds-g .col-6 { grid-column: span 6; }
  .ds-g .col-7 { grid-column: span 7; }
  .ds-g .col-8 { grid-column: span 8; }
  .ds-g .col-9 { grid-column: span 9; }
  .ds-g .col-10 { grid-column: span 10; }
  .ds-g .col-11 { grid-column: span 11; }
  .ds-g .col-12 { grid-column: span 12; }
}
/* Flex-based rows & columns */
[class*=ds-f] {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.ds-f-c {
  align-items: center;
}
[class*=ds-f][class*="col-"] {
  flex-basis: 100%;
  max-width: 100%;
}
@media (min-width: 480px) {
  [class*=ds-f] .col-1 { flex-basis: calc(100% / 12 * 1); max-width: calc(100% / 12 * 1); }
  [class*=ds-f] .col-2 { flex-basis: calc(100% / 12 * 2); max-width: calc(100% / 12 * 2); }
  [class*=ds-f] .col-3 { flex-basis: calc(100% / 12 * 3); max-width: calc(100% / 12 * 3); }
  [class*=ds-f] .col-4 { flex-basis: calc(100% / 12 * 4); max-width: calc(100% / 12 * 4); }
  [class*=ds-f] .col-5 { flex-basis: calc(100% / 12 * 5); max-width: calc(100% / 12 * 5); }
  [class*=ds-f] .col-6 { flex-basis: calc(100% / 12 * 6); max-width: calc(100% / 12 * 6); }
  [class*=ds-f] .col-7 { flex-basis: calc(100% / 12 * 7); max-width: calc(100% / 12 * 7); }
  [class*=ds-f] .col-8 { flex-basis: calc(100% / 12 * 8); max-width: calc(100% / 12 * 8); }
  [class*=ds-f] .col-9 { flex-basis: calc(100% / 12 * 9); max-width: calc(100% / 12 * 9); }
  [class*=ds-f] .col-10 { flex-basis: calc(100% / 12 * 10); max-width: calc(100% / 12 * 10); }
  [class*=ds-f] .col-11 { flex-basis: calc(100% / 12 * 11); max-width: calc(100% / 12 * 11); }
  [class*=ds-f] .col-12 { flex-basis: calc(100% / 12 * 12); max-width: calc(100% / 12 * 12); }
}

/* node */
.ds-ct {
  font-family: var(--bodytext-font-family);
  font-size: var(--font-size);
  font-weight: normal;
  /*line-height: 1.3em;*/
  padding-top: 70px;
}

/* Component  */
.ds-comp {
  padding: var(--padding700) var(--padding300);
  width: 100vw;
  font-family: var(--bodytext-font-family);
  font-size: var(--font-size);
  font-weight: normal;
  /*line-height: 1.3em;*/
  left:50%;
  position: relative;
  transform: translate(-50%);
}
.ds-comp-banner {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
}
.ds-comp-fs {
  max-width: 100vw;
}

/* Basic Text Settings */
[class*=ds-] h1, [class*=ds-] h2, [class*=ds-] h3, [class*=ds-] h4, [class*=ds-] h5, [class*=ds-] h6,
.ds-h1, .ds-h2, .ds-h3, .ds-h4, .ds-h5, .ds-h6 {
  color: var(--primary-color);
  font-family: var(--title-font-family);
  line-height: normal;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0;
  font-weight: 700;
  margin: 3px 0 3px 0;
}
[class*=ds-] h1, .ds-h1 {
  font-size: calc(var(--font-size) + 14px); /* 30px */
  letter-spacing: -1px;
  margin: 12px 0 12px 0;
}
[class*=ds-] h2, .ds-h2, .ds-title {
  font-size: calc(var(--font-size) + 8px); /* 24px */
  letter-spacing: -1px;
  margin: 8px 0 8px 0;
}
[class*=ds-] h3, .ds-h3 {
  font-size: calc(var(--font-size) + 4px); /* 20 */
  font-weight: 600;
}
[class*=ds-] h4, .ds-h4 {
  font-size: calc(var(--font-size) + 2px); /* 18 */
  font-weight: 600;
}
[class*=ds-] h5, .ds-h5, .ds-label {
  font-size: calc(var(--font-size) + 0px); /* 16 */
  font-weight: 600;
}
[class*=ds-] h6, .ds-h6 {
  font-size: calc(var(--font-size) + 0px); /* 16 */
  font-weight: 600;
}
@media (min-width: 480px) {
  [class*=ds-] .ds-h1, h1 { font-size: calc(var(--font-size) + 57px); } /* 75 */
  [class*=ds-] .ds-h2, h2, .ds-title { font-size: calc(var(--font-size) + 27px); } /* 45 */
  [class*=ds-] .ds-h3, h3 { font-size: calc(var(--font-size) + 12px); } /* 30 */
  [class*=ds-] .ds-h4, h4 { font-size: calc(var(--font-size) + 8px); } /* 26 */
  [class*=ds-] .ds-h5, h5, .ds-label { font-size: calc(var(--font-size) + 2px); } /* 20 */
  [class*=ds-] .ds-h6, h6, .ds-label { font-size: calc(var(--font-size) + 0px); } /* 18 */
}

.ds-bodytext {
  color: var(--primary-color);
  font-family: var(--bodytext-font-family);
  font-size: var(--font-size);
  /*line-height: 1.3em;*/
}

/* Font size adjustments */
.t-s {
  font-size: calc(1em - 2px) !important;
  /*line-height: calc(1em - 2px);*/
}
.t-l {
  font-size: calc(1em + 2px) !important;
  /*line-height: calc(1em + 2px);*/
}
.t-xl {
  font-size: calc(1em + 4px) !important;
  /*line-height: calc(1em + 4px);*/
}
/* Text location adjustments */
.t-a-c {
  text-align: center;
}
.t-a-r {
  text-align: right;
}

/* Anchor */
[class*=ds-] a,
[class*=ds-] a:visited {
  color: var(--color-ob);
  text-decoration: underline;
}
[class*=ds-] a:active, [class*=ds-] a:hover, [class*=ds-] a:focus {
  color: var(--color-r);
}
[class*=ds-] ul {
  list-style-position: unset;
  padding: 1rem 0;
  margin:  0;
}
[class*=ds-] ul li {
  list-style: none;
  padding-left: 1.25em;
  background: url('../img/ul-bullet.svg') no-repeat left 12px transparent;
  background-size: 10px;
  margin: 0 0 1rem 0;
  background-position-y: 12px;
}
[class*=ds-] ul li:last-child {
  margin: 0;
}

/* Accessibility */
[class*=ds-] .a11y--hidden {
  display: block;
  height: 1px;
  width: 1px;
  position: absolute;
  overflow: hidden;
  top: -100px
}