/*
|--------------------------------------------------------------------------
| Colors
|--------------------------------------------------------------------------
*/
/*
|--------------------------------------------------------------------------
| Fonts variants
|--------------------------------------------------------------------------
*/
/*
|--------------------------------------------------------------------------
| Breakpoints (for mobile first)
|--------------------------------------------------------------------------
*/
/*
|--------------------------------------------------------------------------
| Typography
|--------------------------------------------------------------------------
*/
/*
|--------------------------------------------------------------------------
| Misc
|--------------------------------------------------------------------------
*/
/*
@mixin header_ss_roman {
    font-family: vars.$helvetica;
    font-weight: vars.$font-weight-regular;
    font-size: 14px;
    line-height: 18px;

    @include mix.sm {
        font-size: 18px;
        line-height: 22px;
    }
}

@mixin header_ss_light {
    font-family: vars.$helvetica;
    font-weight: vars.$font-weight-light;
    font-size: 14px;
    line-height: 18px;

    @include mix.sm {
        font-size: 18px;
        line-height: 22px;
    }
}
*/
/* Text mixins based on style guide.
*  Use these with "head", "subhead" classes, etc.
*  Don't use them directly on the h1, h2, etc. elements.
*/
/*
@mixin footnoteStyle {
    font-size: 12px;
    font-weight: vars.$font-weight-regular;
    font-family: vars.$helveticaCondensed;
}
*/
/*
|--------------------------------------------------------------------------
| Debug
|--------------------------------------------------------------------------
*/
/*
 * Show a warning message if the debug mode is enabled in the top right corner of the viewport.
 * How to use:
 * @include show-debug-mode;
 */
/*
|--------------------------------------------------------------------------
| Helper Functions
|--------------------------------------------------------------------------
*/
/**
 * Converts an HEX color into a RGB list
 */
/**
 * Converts an HEX color into RGB with alpha
 */
/**
 * Converts a value in pixels to em's, assuming that 1em=16px.
 * @param {Number} $value - A value in px
 * @return {Number} - The value converted to em's
 */
/**
 * Converts a value in pixels to rem's, assuming that 1rem=16px.
 * @param {Number} $value - A value in px
 * @return {Number} - The value converted to rem's
 */
/**
 * Remove the unit of a length.
 * @param {Number} $number - Number to remove unit from
 * @return {Number} - Unitless number
 */
/**
 * Get the width of a span of columns and the gutter spaces BETWEEN them.
 * The returned value will have the same unit as the $colWidth param.
 *
 * @param {Number} $cols - Number of columns
 * @param {Number} $colWidth - Base width for a single column.
 * @param {Number} $gutter - Width of a gutter space.
 * @return {Number} - Width for $cols columns
 */
/**
 * Get the width of a span of columns and a gutter space for EACH column.
 * The returned value will have the same unit as the $colWidth param.
 *
 * @param {Number} $cols - Number of columns
 * @param {Number} $colWidth - Base width for a single column.
 * @param {Number} $gutter - Width of a gutter space.
 * @return {Number} - Width for $cols columns
 */
#resources .card-container > h2 {
  margin-bottom: 50px;
}
#resources .card-container .ulist a {
  color: #58595b;
  font-weight: 600;
}
#resources .info-icon-list .icon-lead img {
  min-width: 38px;
  width: 38px;
}
#resources .video-js {
  width: 100%;
}
#resources .col-3-video {
  background-color: #d9d9d9;
  padding: 14px 11px;
}
#resources .col-3-video img {
  margin-bottom: 0;
}
#resources .col-3-video video {
  width: 100%;
}
#resources .col-3-video picture {
  margin-bottom: 0 !important;
}
#resources .col-3-video .video-thumbnail {
  width: 33%;
}
#resources .col-3-video .video-thumbnail .playing {
  height: 0;
  position: relative;
  display: none;
}
#resources .col-3-video .video-thumbnail .playing .copy {
  padding: 7px;
  font-family: "ITCFranklinGothicStd", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #58595B;
  text-align: center;
  background-color: #D9D9D9;
  max-width: 83px;
  position: absolute;
  top: -36px;
  left: calc(50% - 41.5px);
}
#resources .col-3-video .video-thumbnail.active .playing {
  display: block;
}
#resources .enrollment-steps {
  border: 1px solid #c0311a;
  padding: 30px 20px 20px 20px;
  margin-bottom: 20px;
}
#resources .enrollment-steps .ulist {
  padding-bottom: 0;
}
#resources .enrollment-steps h4 {
  color: #c0311a;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 23px;
  margin-bottom: 10px;
}
#resources .enrollment-steps ul {
  margin-bottom: 20px;
}
#resources .card-banner {
  padding: 0;
}
#resources .card-banner .card-header {
  padding-left: 40px;
}
#resources .card-banner .middle-img {
  margin: auto;
  max-width: 361px;
}
#resources .card-banner .middle-img picture {
  max-width: 90%;
}
#resources .card-banner .middle-img img {
  position: relative;
  right: 10px;
  padding: 30px 0 20px 0;
  margin-bottom: 0;
}
@media (max-width: 767px) {
  #resources .card-banner .middle-img img {
    right: unset;
    width: 85%;
    padding-bottom: 0;
  }
}
#resources .card-banner .card-content .btn {
  margin-bottom: 20px;
}
#resources .card-banner .card-content p {
  font-size: 17px;
  line-height: 19px;
}
#resources .card-banner .card-content .span {
  font-size: 14px;
}

.resources-cols {
  display: flex;
  gap: 30px;
  margin-bottom: 50px;
}
@media (max-width: 767px) {
  .resources-cols {
    gap: 10px;
  }
  .resources-cols.card-col {
    flex-direction: column;
  }
}
.resources-cols > div:first-child {
  min-width: 119px;
  width: 164px;
  display: flex;
  justify-content: flex-end;
}
@media (max-width: 767px) {
  .resources-cols > div:first-child {
    width: 129px;
  }
}
.resources-cols > div:first-child .img-wrapper img {
  max-width: 125px;
}
.resources-cols > div:last-child {
  flex-grow: 1;
}
.resources-cols > div.card {
  width: 305px;
}
.resources-cols h2 {
  margin-bottom: 3px !important;
}
@media (max-width: 767px) {
  .resources-cols.xtandi-access {
    flex-direction: column;
  }
  .resources-cols.xtandi-access a {
    width: 100%;
  }
  .resources-cols.xtandi-access a img {
    margin: unset !important;
  }
}
.resources-cols .btn {
  padding: 0 16px 2px !important;
}

@media (min-width: 992px) {
  .metastatic-container .card-container.card-banner {
    background: linear-gradient(120deg, rgb(149, 29, 32) 0%, rgb(192, 49, 26) 32%, rgb(255, 255, 255) 32%, rgb(189, 189, 189) 32%, rgb(255, 255, 255) 33.1%, rgb(255, 255, 255) 100%);
  }
  .metastatic-container .card-container.card-banner .card-header-shadow:after {
    right: -13px;
    width: 100%;
  }
  .metastatic-container .card-container.card-banner .card-header-shadow .card-header {
    width: 320.596px;
  }
  .metastatic-container .card-container.card-banner .card-content {
    padding-right: 18px !important;
  }
}
@media (max-width: 767px) {
  .metastatic-container .card-container.card-banner .card-content p {
    text-align: center;
  }
}

@media (min-width: 992px) {
  .metastatic-container .resources-cols > div:first-child {
    width: 133px;
    justify-content: flex-start;
  }
}
/*# sourceMappingURL=resources.css.map */