html {
  --color-medium-blue: #0037B2;
  --color-light-blue: #E7F0FE;
  --color-red: #CC1012;
  --color-black: #222;
  --color-white: #fff;


  --content-width: 1280px;

  --h1-size: 32px;
  --h2-size: 24px;
  --h3-size: 20px;
  --h4-size: 18px;
  --p-size: 16px;

  --sans-serif: Meta, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Meta-Serif", Georgia, Times, 'Times New Roman', serif;

  --default-spacing: 16px;

  --button-shadow-color: var(--color-medium-blue);

}

@media only screen and (min-width: 48em) {

  html {

    --h1-size: 42px;
    --h2-size: 30px;
    --h3-size: 24px;
    --h4-size: 20px;
    --p-size: 16px;

  }

}

.is-path-frontpage,  .is-page-node-type-stallion, .paragraph--type--tab-group {

  .node--type-homepage {
    margin-bottom: calc(var(--default-spacing) * 2);
  }

  &.paragraph {
    margin: calc(var(--default-spacing) * 2) 0;
  }

  h1, .h1 {
    font-size: var(--h1-size);
  }

  h2, .h2 {
    font-size: var(--h2-size);
  }

  h3, .h3 {
    font-size: var(--h3-size);
  }

  h4, .h4 {
    font-size: var(--h4-size);
  }

  p, .p {
    font-size: var(--p-size);
  }

  a:hover, a:focus, a:active {
    color: var(--color-medium-blue);
    text-decoration: underline;
  }

  h1,h2,h3,h4,h5,h6,p,.h1,.h2,.h3,.h4,.h5,.h6 {
    line-height: 1em;
  }
  .medium-blue-bg {
    background-color: var(--color-medium-blue);
    color: white;

    h1,h2,h3,h4,h5,h6,p,.h1,.h2,.h3,.h4,.h5,.h6,a {
      color: white;
    }

  }

  .light-blue-bg {
    background-color: var(--color-light-blue);
    color: black;

    h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,a {
      color: var(--color-medium-blue);
    }

  }

  .red-bg {
    background-color: var(--color-red);
    color: white;

    h1,h2,h3,h4,h5,h6,p,.h1,.h2,.h3,.h4,.h5,.h6,a {
      color: white;
    }
  }

  .area {
    margin: calc(var(--default-spacing)*2) 0;
  }

  [class*="-bg"].area {
    padding: calc(var(--default-spacing)*2) 0;
    margin:0;
  }

  @media only screen and (min-width: 48em) {
    [class*="-bg"].area {
      padding: calc(var(--default-spacing)*2) 0 calc(var(--default-spacing)*2) 0;
      margin:0;
    }

  }

  .area--wide .area__content {
    max-width: var(--content-width);
    padding-right: var(--default-spacing);
    padding-left: var(--default-spacing);
  }

  .pure-g {

    margin-right: calc((var(--default-spacing)) * -1);
    margin-left: calc((var(--default-spacing)) * -1);

    @media only screen and (min-width: 80em) {

      margin-right: calc(var(--default-spacing) * -1);
      margin-left: calc(var(--default-spacing) * -1);

    }
  }

  [class*="pure-u"] > .box {
    margin-right: calc(var(--default-spacing)/2);
    margin-left: calc(var(--default-spacing)/2);
    padding: calc(var(--default-spacing)/2);
  }

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

  a.button, button {
    padding: var(--default-spacing) calc(var(--default-spacing) * 2);
    background-color: var(--color-light-blue);
    color: var(--color-medium-blue);
    border-radius: 9999px;
    border: none;
    font-weight: 500;
    display: inline-block;

    &:hover, &:active {
      color: var(--color-medium-blue);
      cursor: pointer;
      text-decoration: underline;
      text-shadow: 0 0 0.5px var(--button-shadow-color);
    }

    &[data-theme="red"] {
      background-color: var(--color-red);
      color: white;
    }

    &[data-theme="white"] {
      background-color: white;
      --button-shadow-color: var(--color-medium-blue);
      color: var(--color-medium-blue);
    }

    &[data-theme="medium-blue"] {
      background-color: var(--color-medium-blue);
      --button-shadow-color: var(--color-white);
      color: var(--color-white);
    }
  }

  .flickity-prev-next-button .flickity-button-icon {
    display: none;
  }

  .flickity-prev-next-button::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
  }
  .flickity-prev-next-button.next {
    right: -22px;
  }

  .flickity-prev-next-button.previous {
    left: -22px;
  }

  .flickity-prev-next-button.next::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="49" viewBox="0 0 28 49" fill="none"> <path d="M3 2.50952L24.6 24.1872L3 45.8648" stroke="white" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/> </svg> ');
    background-position: center right;
  }

  .flickity-prev-next-button.previous::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="27" height="49" viewBox="0 0 27 49" fill="none"><path d="M24.0996 2.5L2.49961 24.1L24.0996 45.7" stroke="white" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-position: center left;
  }

  button.flickity-button {
    padding: inherit;
    background: none;
    color: white;
  }

  .flickity-prev-next-button {
    @media only screen and (max-width: 48em) {
      display: none;
    }
  }


  .flickity-page-dots {
    display: inline-block;
    position: relative;
    overflow: hidden;
    bottom: unset;
    padding: calc(var(--default-spacing)) 0 0 0;

    .dot {
      background-color: var(--color-light-blue);
      opacity:1;
      width: 16px;
      height: 16px;
      margin: 0 calc(var(--default-spacing)/2);

      &.is-selected, &:hover {
        background-color: var(--color-medium-blue);
      }
    }

    li:only-of-type {
      display:none;
    }
  }

  /* Stallion sub-pages: Race Record  */
  .area--race-record .pure-g div[class *= 'pure-u-'] {
    padding: 8px;
    box-sizing: border-box;
  }

  .field--name-field-race-record {
    overflow: auto;
    margin: 12px 0 36px;
  }

  .field--name-field-race-record table {
    margin: 0;
    min-width: 100%;
  }

  .field--name-field-race-record td {
    border-bottom: 1px solid var(--color-medium-blue);
    padding: 6px 0 4px 4px;
  }

  .field--name-field-race-record tr:first-child td {
    font-weight: bold;
    color: var(--color-medium-blue);
  }

  .field--name-field-race-record tr:last-child td {
    font-weight: bold;
    background: transparent;
    color: var(--color-medium-blue);
  }

  .field-name-field-race-record td.cellCenter {
    text-align: center;
  }

  .field--name-field-race-record-copy p:first-of-type {
    padding-top: 0;
  }

  .field--name-field-race-record-copy dl {
    margin: 0 0 0 4px;
    padding: 0;
    overflow: hidden;
  }

  .field--name-field-race-record-copy dl dt {
    clear: left;
    float: left;
    font-weight: bold;
    width: 32px;
    margin-right: -32px;
  }

  .field--name-field-race-record-copy dl dd {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    margin: 0;
    padding-left: 32px;
    width: 100%;
  }

  .field--name-field-race-record-copy:not([data-show]) {
    .show-less, .show-more {
      display: none;
    }
  }
  @media (width < 768px) {
    .field--name-field-race-record-copy {
      &[data-show="less"] {
        .show-less {
          display: none;
        }

        dl:nth-of-type(n+2) ~ *:not(div) {
          display: none;
        }
      }
      &[data-show="more"] {
        .show-more {
          display: none;
        }
      }
    }
    .show-less, .show-more {
      margin-top: 16px;
      text-align: center;
    }
    .show-less a {
      font-weight: normal;
      text-decoration: underline;
      color: var(--color-black);

      &:hover {
        color: var(--color-medium-blue);
        text-shadow: 0 0 0.5px var(--color-medium-blue);
      }
    }
    .field--name-field-race-record-copy [data-component-id="drly:button"] {
      display: block;
    }
  }
  @media (width >= 768px) {
    .field--name-field-race-record-copy :is(.show-less, .show-more) {
      display: none;
    }
  }


  select {
    box-sizing: border-box;
    border-radius: 2px;
    border: 1px solid var(--color-medium-blue);
    height: 32px;
    width: 100%;
    box-shadow: none;
    outline: none;
    background: none;
    font-size: 16px;
    padding-left: 10px;
  }

  input[type="submit"] {
    width: auto;
    margin-bottom: var(--default-spacing);
  }

  .layout__region {
    overflow: hidden;
  }

  .layout__region--more_of_our_stallions {
    margin-top: calc(var(--default-spacing)*2);
  }

  .pager {
    text-align: center;
  }

  .pager__item .button[data-theme="white"] {
    background-color: var(--color-light-blue);


    &:hover {
      --button-shadow-color: var(--color-medium-blue);
      color: var(--color-medium-blue);
    }
  }

  .medium-blue-bg {
    .pager__item .button {
      background-color: var(--color-white);
      --button-shadow-color: var(--color-white);
    }
  }

  .vjs-default-skin .vjs-big-play-button .vjs-icon-placeholder:before {
    line-height: 64px;
    left: 0px;
  }

  .video-js .vjs-big-play-button {
    font-size: 5em;
    border:0;
  }




}