/****************************************************
*					WEBSITE FONTS					*
****************************************************/
/****************************************************
*					BASE COLORS						*
****************************************************/
/* Overrides for specific websites
$h1-title-color             : $black;
$h2-title-color             : $black;
$h3-title-color             : $black;
$h4-title-color             : $black;
$eyebrow-color              : $primary-300;
 */
/****************************************************
*					ALERT COLORS					*
****************************************************/
/* Reference for this calculation on https://css-tricks.com/programming-sass-to-create-accessible-color-combinations/ */
/*------------------- Grid resolutions -------------------*/
/*------------------- Sizes mixins -------------------*/
/*-------------------------------------Margins-------------------------------------*/
/* Buttons - elements/_buttons.scss */
/* Cards - elements/d3-card.scss */
/* Images on content sections - elements/d3-content-section.scss */
/* Images on media detail - elements/_d3-media-detail.scss */
/* Images on Testimonials - components/d3-testimonial.scss */
/* Images on Image Text - components/d3-image-text.scss */
/* Form inputs - elements/_forms.scss */
/* Form inputs - elements/_forms.scss */
/* Tables - elements/d3-table.scss, elements/_cookie-warning.scss */
/* Popups - elements/_cookie-warning.scss */
/* Accordions - elements/d3-accordion.scss */
/* Videoplayer - elements/d3-video-player.scss, elements/_d3-webinar-detail.scss */
/* Podcast player - elements/d3-podcast.scss */
/* Feature block - elements/d3-feature-block.scss */
/* Define a single size for all image-related border-radii */
/* Define a single size for all border-radii */
/********* REUSABLE TEXT STYLES ************/
/*------------------- Mixins  -------------------*/
/*------------------- Functions  -------------------*/
/*-------------------------------------Others-------------------------------------*/
/* ---------- Color and fonts replace ---------- */
/* General variables */
:root {
  --grey-100: #5e5e5e;
  --primary-100: #0c148a;
  --secondary-100: #0a5754;
  --tertiary-100: #9c8c83;
  --grey-200: #919191;
  --primary-200: #0046cc;
  --secondary-200: #076b67;
  --tertiary-200: #dcc7ba;
  --grey-300: #ababab;
  --primary-300: #0057ff;
  --secondary-300: #07817c;
  --tertiary-300: #f4eae4;
  --grey-400: #c4c4c4;
  --primary-400: #1f68f3;
  --secondary-400: #42f3eb;
  --tertiary-400: #f6f0ed;
  --grey-500: #dedede;
  --primary-500: #669aff;
  --secondary-500: #4cf9f2;
  --tertiary-500: #fbf4f0;
  --grey-600: #f7f7f7;
  --primary-600: #e5eeff;
  --secondary-600: #cdffff;
  --tertiary-600: #fbf7f5;
  --d3-black: #181819;
  --grifols-blue: #003383;
  --d3-font-body: Inter;
  --d3-font-title: Figtree;
  --d3-page-bg: #fdfdff;
  --d3-radius-lg: 24px;
  --d3-radius-md: 16px;
  --d3-radius-none: 0px;
  --d3-radius-pill: 80px;
  --d3-radius-sm: 8px;
  --d3-radius-xl: 32px;
  --d3-radius-xs: 4px;
  --d3-utility-black: #020304;
  --d3-utility-white: #fdfdff;
  --d3-white: #fdfdff; }

body #wrapper .d3-featured-card {
  aspect-ratio: 1/1;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: auto 100%;
  border-radius: 16px;
  position: relative;
  transition-duration: 0.3s;
  transition-timing-function: ease-in-out;
  transition-property: all; }
  @media only screen and (min-width: 600px) {
    body #wrapper .d3-featured-card {
      aspect-ratio: 16/9;
      background-size: 100% auto; } }
  body #wrapper .d3-featured-card:hover {
    -moz-box-shadow: 0 0 0 8px #e5eeff;
    -webkit-box-shadow: 0 0 0 8px #e5eeff;
    box-shadow: 0 0 0 8px #e5eeff;
    background-size: auto 110%; }
    @media only screen and (min-width: 600px) {
      body #wrapper .d3-featured-card:hover {
        background-size: 110% auto; } }
    body #wrapper .d3-featured-card:hover .feature-tag {
      background-color: #e5eeff;
      color: #0c148a; }
  body #wrapper .d3-featured-card .feature-tag {
    background-color: #fdfdff;
    color: #0046cc;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    margin-right: 24px;
    padding: 8px 16px 16px 16px;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1; }
  body #wrapper .d3-featured-card .gradient-overlay {
    background-image: linear-gradient(180deg, rgba(2, 3, 4, 0) 0%, rgba(2, 3, 4, 0.36) 60%, rgba(2, 3, 4, 0.6) 100%);
    border-radius: inherit;
    height: 100%;
    position: relative; }
    body #wrapper .d3-featured-card .gradient-overlay .card-content {
      display: flex;
      flex-direction: column;
      height: 100%;
      justify-content: flex-end;
      padding: 48px 24px 32px;
      position: relative;
      color: #fdfdff; }
      body #wrapper .d3-featured-card .gradient-overlay .card-content a:not(.btn):not(.btn-icon-link-text):not([role=button]) {
        color: #fdfdff;
        border-bottom: 1px solid; }
      body #wrapper .d3-featured-card .gradient-overlay .card-content a.btn-icon-link .link-text, body #wrapper .d3-featured-card .gradient-overlay .card-content a.btn-icon-link-text .link-text {
        color: #fdfdff;
        border-bottom: 1px solid; }
      @media only screen and (min-width: 1008px) {
        body #wrapper .d3-featured-card .gradient-overlay .card-content {
          padding-bottom: 40px; } }
      body #wrapper .d3-featured-card .gradient-overlay .card-content .chip-row + * {
        margin-top: 8px; }
      body #wrapper .d3-featured-card .gradient-overlay .card-content h3 {
        -webkit-box-orient: vertical;
        color: inherit;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        overflow: hidden;
        text-overflow: ellipsis; }
      body #wrapper .d3-featured-card .gradient-overlay .card-content .button-row {
        padding-top: 16px; }
        body #wrapper .d3-featured-card .gradient-overlay .card-content .button-row:not(:first-child) {
          padding-top: 32px; }
          body #wrapper .d3-featured-card .gradient-overlay .card-content .button-row:not(:first-child).has-not-btn {
            padding-top: 16px; }

body #wrapper .featured-content-container .container {
  width: 100%; }

body #wrapper .primary-100-bg .d3-featured-card:hover {
  -moz-box-shadow: 0 0 0 8px #fdfdff;
  -webkit-box-shadow: 0 0 0 8px #fdfdff;
  box-shadow: 0 0 0 8px #fdfdff; }
  body #wrapper .primary-100-bg .d3-featured-card:hover .feature-tag {
    background-color: #fdfdff;
    color: #0c148a; }

body #wrapper .primary-200-bg .d3-featured-card:hover {
  -moz-box-shadow: 0 0 0 8px #fdfdff;
  -webkit-box-shadow: 0 0 0 8px #fdfdff;
  box-shadow: 0 0 0 8px #fdfdff; }
  body #wrapper .primary-200-bg .d3-featured-card:hover .feature-tag {
    background-color: #fdfdff;
    color: #0c148a; }

body #wrapper .primary-300-bg .d3-featured-card:hover {
  -moz-box-shadow: 0 0 0 8px #fdfdff;
  -webkit-box-shadow: 0 0 0 8px #fdfdff;
  box-shadow: 0 0 0 8px #fdfdff; }
  body #wrapper .primary-300-bg .d3-featured-card:hover .feature-tag {
    background-color: #fdfdff;
    color: #0c148a; }

body #wrapper .primary-400-bg .d3-featured-card:hover {
  -moz-box-shadow: 0 0 0 8px #fdfdff;
  -webkit-box-shadow: 0 0 0 8px #fdfdff;
  box-shadow: 0 0 0 8px #fdfdff; }
  body #wrapper .primary-400-bg .d3-featured-card:hover .feature-tag {
    background-color: #fdfdff;
    color: #0c148a; }

body #wrapper .primary-500-bg .d3-featured-card:hover {
  -moz-box-shadow: 0 0 0 8px #fdfdff;
  -webkit-box-shadow: 0 0 0 8px #fdfdff;
  box-shadow: 0 0 0 8px #fdfdff; }
  body #wrapper .primary-500-bg .d3-featured-card:hover .feature-tag {
    background-color: #fdfdff;
    color: #0c148a; }

body #wrapper .primary-600-bg .d3-featured-card:hover {
  -moz-box-shadow: 0 0 0 8px #fdfdff;
  -webkit-box-shadow: 0 0 0 8px #fdfdff;
  box-shadow: 0 0 0 8px #fdfdff; }
  body #wrapper .primary-600-bg .d3-featured-card:hover .feature-tag {
    background-color: #fdfdff;
    color: #0c148a; }

body #wrapper .secondary-100-bg .d3-featured-card:hover {
  -moz-box-shadow: 0 0 0 8px #fdfdff;
  -webkit-box-shadow: 0 0 0 8px #fdfdff;
  box-shadow: 0 0 0 8px #fdfdff; }
  body #wrapper .secondary-100-bg .d3-featured-card:hover .feature-tag {
    background-color: #fdfdff;
    color: #0c148a; }

body #wrapper .secondary-200-bg .d3-featured-card:hover {
  -moz-box-shadow: 0 0 0 8px #fdfdff;
  -webkit-box-shadow: 0 0 0 8px #fdfdff;
  box-shadow: 0 0 0 8px #fdfdff; }
  body #wrapper .secondary-200-bg .d3-featured-card:hover .feature-tag {
    background-color: #fdfdff;
    color: #0c148a; }

body #wrapper .secondary-300-bg .d3-featured-card:hover {
  -moz-box-shadow: 0 0 0 8px #fdfdff;
  -webkit-box-shadow: 0 0 0 8px #fdfdff;
  box-shadow: 0 0 0 8px #fdfdff; }
  body #wrapper .secondary-300-bg .d3-featured-card:hover .feature-tag {
    background-color: #fdfdff;
    color: #0c148a; }

body #wrapper .secondary-400-bg .d3-featured-card:hover {
  -moz-box-shadow: 0 0 0 8px #fdfdff;
  -webkit-box-shadow: 0 0 0 8px #fdfdff;
  box-shadow: 0 0 0 8px #fdfdff; }
  body #wrapper .secondary-400-bg .d3-featured-card:hover .feature-tag {
    background-color: #fdfdff;
    color: #0c148a; }

body #wrapper .secondary-500-bg .d3-featured-card:hover {
  -moz-box-shadow: 0 0 0 8px #fdfdff;
  -webkit-box-shadow: 0 0 0 8px #fdfdff;
  box-shadow: 0 0 0 8px #fdfdff; }
  body #wrapper .secondary-500-bg .d3-featured-card:hover .feature-tag {
    background-color: #fdfdff;
    color: #0c148a; }

body #wrapper .secondary-600-bg .d3-featured-card:hover {
  -moz-box-shadow: 0 0 0 8px #fdfdff;
  -webkit-box-shadow: 0 0 0 8px #fdfdff;
  box-shadow: 0 0 0 8px #fdfdff; }
  body #wrapper .secondary-600-bg .d3-featured-card:hover .feature-tag {
    background-color: #fdfdff;
    color: #0c148a; }

body #wrapper .tertiary-100-bg .d3-featured-card:hover {
  -moz-box-shadow: 0 0 0 8px #fdfdff;
  -webkit-box-shadow: 0 0 0 8px #fdfdff;
  box-shadow: 0 0 0 8px #fdfdff; }
  body #wrapper .tertiary-100-bg .d3-featured-card:hover .feature-tag {
    background-color: #fdfdff;
    color: #0c148a; }

body #wrapper .tertiary-200-bg .d3-featured-card:hover {
  -moz-box-shadow: 0 0 0 8px #fdfdff;
  -webkit-box-shadow: 0 0 0 8px #fdfdff;
  box-shadow: 0 0 0 8px #fdfdff; }
  body #wrapper .tertiary-200-bg .d3-featured-card:hover .feature-tag {
    background-color: #fdfdff;
    color: #0c148a; }

body #wrapper .tertiary-300-bg .d3-featured-card:hover {
  -moz-box-shadow: 0 0 0 8px #fdfdff;
  -webkit-box-shadow: 0 0 0 8px #fdfdff;
  box-shadow: 0 0 0 8px #fdfdff; }
  body #wrapper .tertiary-300-bg .d3-featured-card:hover .feature-tag {
    background-color: #fdfdff;
    color: #0c148a; }

body #wrapper .tertiary-400-bg .d3-featured-card:hover {
  -moz-box-shadow: 0 0 0 8px #fdfdff;
  -webkit-box-shadow: 0 0 0 8px #fdfdff;
  box-shadow: 0 0 0 8px #fdfdff; }
  body #wrapper .tertiary-400-bg .d3-featured-card:hover .feature-tag {
    background-color: #fdfdff;
    color: #0c148a; }

body #wrapper .tertiary-500-bg .d3-featured-card:hover {
  -moz-box-shadow: 0 0 0 8px #fdfdff;
  -webkit-box-shadow: 0 0 0 8px #fdfdff;
  box-shadow: 0 0 0 8px #fdfdff; }
  body #wrapper .tertiary-500-bg .d3-featured-card:hover .feature-tag {
    background-color: #fdfdff;
    color: #0c148a; }

body #wrapper .tertiary-600-bg .d3-featured-card:hover {
  -moz-box-shadow: 0 0 0 8px #fdfdff;
  -webkit-box-shadow: 0 0 0 8px #fdfdff;
  box-shadow: 0 0 0 8px #fdfdff; }
  body #wrapper .tertiary-600-bg .d3-featured-card:hover .feature-tag {
    background-color: #fdfdff;
    color: #0c148a; }

body #wrapper .grey-100-bg .d3-featured-card:hover {
  -moz-box-shadow: 0 0 0 8px #fdfdff;
  -webkit-box-shadow: 0 0 0 8px #fdfdff;
  box-shadow: 0 0 0 8px #fdfdff; }
  body #wrapper .grey-100-bg .d3-featured-card:hover .feature-tag {
    background-color: #fdfdff;
    color: #0c148a; }

body #wrapper .grey-200-bg .d3-featured-card:hover {
  -moz-box-shadow: 0 0 0 8px #fdfdff;
  -webkit-box-shadow: 0 0 0 8px #fdfdff;
  box-shadow: 0 0 0 8px #fdfdff; }
  body #wrapper .grey-200-bg .d3-featured-card:hover .feature-tag {
    background-color: #fdfdff;
    color: #0c148a; }

body #wrapper .grey-300-bg .d3-featured-card:hover {
  -moz-box-shadow: 0 0 0 8px #fdfdff;
  -webkit-box-shadow: 0 0 0 8px #fdfdff;
  box-shadow: 0 0 0 8px #fdfdff; }
  body #wrapper .grey-300-bg .d3-featured-card:hover .feature-tag {
    background-color: #fdfdff;
    color: #0c148a; }

body #wrapper .grey-400-bg .d3-featured-card:hover {
  -moz-box-shadow: 0 0 0 8px #fdfdff;
  -webkit-box-shadow: 0 0 0 8px #fdfdff;
  box-shadow: 0 0 0 8px #fdfdff; }
  body #wrapper .grey-400-bg .d3-featured-card:hover .feature-tag {
    background-color: #fdfdff;
    color: #0c148a; }

body #wrapper .grey-500-bg .d3-featured-card:hover {
  -moz-box-shadow: 0 0 0 8px #fdfdff;
  -webkit-box-shadow: 0 0 0 8px #fdfdff;
  box-shadow: 0 0 0 8px #fdfdff; }
  body #wrapper .grey-500-bg .d3-featured-card:hover .feature-tag {
    background-color: #fdfdff;
    color: #0c148a; }

body #wrapper .grey-600-bg .d3-featured-card:hover {
  -moz-box-shadow: 0 0 0 8px #fdfdff;
  -webkit-box-shadow: 0 0 0 8px #fdfdff;
  box-shadow: 0 0 0 8px #fdfdff; }
  body #wrapper .grey-600-bg .d3-featured-card:hover .feature-tag {
    background-color: #fdfdff;
    color: #0c148a; }

body #wrapper .black-bg .d3-featured-card:hover {
  -moz-box-shadow: 0 0 0 8px #fdfdff;
  -webkit-box-shadow: 0 0 0 8px #fdfdff;
  box-shadow: 0 0 0 8px #fdfdff; }
  body #wrapper .black-bg .d3-featured-card:hover .feature-tag {
    background-color: #fdfdff;
    color: #0c148a; }

/*# sourceMappingURL=d3-featured-card.css.map */