/*
|--------------------------------------------------------------------------
| 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
 */
#moa .footnotes > p {
  line-height: 1.2;
  margin-bottom: 0;
}
#moa .container-inner {
  position: relative;
}
#moa .container-inner h4.text-header-eyebrow {
  font-size: 12px;
  font-weight: 400;
  font-family: "HelveticaNeueW01", Helvetica, Arial, sans-serif;
}
#moa .container-inner .bg-striped {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: repeating-linear-gradient(-45deg, #f2f2f2, white 1px, white 1px, #f2f2f2 4px);
}
@media (min-width: 1200px) {
  #moa .container-inner .bg-striped {
    width: 2000px;
    left: 200px;
  }
}
#moa .container-inner .bg-striped.key {
  background: none;
  background-color: #f2f2f2;
}
#moa .container-inner .androgen-receptor-binding-bg, #moa .container-inner .androgen-receptor-entering-nucleus-bg, #moa .container-inner .androgen-receptor-binding-dna-bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
@media (min-width: 768px) {
  #moa .container-inner .androgen-receptor-binding-bg, #moa .container-inner .androgen-receptor-entering-nucleus-bg, #moa .container-inner .androgen-receptor-binding-dna-bg {
    background-position: top left -245px;
  }
}
@media (min-width: 1200px) {
  #moa .container-inner .androgen-receptor-binding-bg, #moa .container-inner .androgen-receptor-entering-nucleus-bg, #moa .container-inner .androgen-receptor-binding-dna-bg {
    width: 2000px;
    background-position: top left -235px;
    background-size: auto;
    left: 215px;
  }
}
#moa .container-inner .androgen-receptor-binding-bg {
  background: url("../../images/mechanism-of-action/androgen-receptor-binding-bg.png"), #f3f3f4;
  background-size: cover;
  background-position: 50% 0;
}
@media (min-width: 1200px) {
  #moa .container-inner .androgen-receptor-binding-bg {
    width: 2000px;
    background-position: 0 0;
    background-size: auto;
    left: 215px;
  }
}
#moa .container-inner .androgen-receptor-entering-nucleus-bg {
  background-image: url("../../images/mechanism-of-action/androgen-receptor-entering-nucleus-bg.jpg");
  background-size: 160%;
  background-position: 0 top;
}
@media (min-width: 768px) {
  #moa .container-inner .androgen-receptor-entering-nucleus-bg {
    background-size: auto;
    background-position: 40% top;
  }
}
@media (min-width: 1200px) {
  #moa .container-inner .androgen-receptor-entering-nucleus-bg {
    background-position: 25% 100%;
  }
}
#moa .container-inner .androgen-receptor-binding-dna-bg {
  background: url("../../images/mechanism-of-action/androgen-receptor-binding-dna-bg.png"), #f3f3f4;
  background-size: cover;
  background-position: 40%;
}
@media (min-width: 1200px) {
  #moa .container-inner .androgen-receptor-binding-dna-bg {
    background-size: auto;
    background-position: 0;
  }
}
#moa .container-inner > .innerContent {
  z-index: 2;
}
#moa .container-inner > .innerContent .text-header-eyebrow {
  font-size: 12px;
}
@media (min-width: 992px) {
  #moa .container-inner > .innerContent .text-header-eyebrow {
    font-size: 14px;
  }
}
@media (min-width: 1200px) {
  #moa .container-inner > .innerContent.steps {
    padding-left: 35px;
  }
}
#moa .container-inner > .innerContent .description {
  /*
  .footnotes {
      display: block;

      @include mix.md {
          display: none;
      }
  }
  */
}
#moa .container-inner > .innerContent .description > .description-wrapper {
  max-width: 100%;
  margin-right: 0;
  display: block;
  vertical-align: top;
  line-height: 1.1em;
}
#moa .container-inner > .innerContent .description > .description-wrapper .headline {
  font-size: 18px;
  font-weight: 500;
  font-family: "HelveticaNeueW01", Helvetica, Arial, sans-serif;
  margin-bottom: 20px;
  width: 100%;
}
@media (min-width: 768px) {
  #moa .container-inner > .innerContent .description > .description-wrapper .headline {
    width: 240px;
  }
}
@media (min-width: 768px) {
  #moa .container-inner > .innerContent .description > .description-wrapper {
    max-width: 300px;
    display: inline-block;
    margin-right: 20px;
    margin-bottom: 0;
    vertical-align: middle;
  }
}
@media (min-width: 1200px) {
  #moa .container-inner > .innerContent .description > .description-wrapper {
    margin-right: 57px;
  }
}
#moa .container-inner > .innerContent .description > .img-wrapper {
  border: 2px solid #666666;
  margin: 0 auto;
  width: 100%;
  display: block;
  vertical-align: top;
}
@media (min-width: 768px) {
  #moa .container-inner > .innerContent .description > .img-wrapper {
    display: inline-block;
    max-width: 348px;
    vertical-align: middle;
  }
}
@media (min-width: 1200px) {
  #moa .container-inner > .innerContent .description > .img-wrapper {
    display: inline-block;
    max-width: 348px;
    vertical-align: middle;
  }
}
#moa .container-inner .innerContent .element-box {
  max-width: 679px;
  border: 1px solid #c0311a;
}
#moa .container-inner .innerContent .element-box .key {
  height: 30px;
  background-color: #c0311a;
  width: auto;
  display: flex;
  align-items: center;
  padding: 15px;
  color: white;
  font-weight: 700;
}
#moa .container-inner .innerContent .element-box .key p {
  font-size: 16px;
}
#moa .container-inner .innerContent .element-box .icon-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0;
  position: relative;
}
@media (min-width: 768px) {
  #moa .container-inner .innerContent .element-box .icon-container {
    justify-content: space-between;
    padding: 0 25px 10px;
  }
}
#moa .container-inner .innerContent .element-box .icon-container::before {
  position: absolute;
  right: 0;
  bottom: 0;
  content: "";
  border-top: 15px solid white;
  border-right: 15px solid #c0311a;
}
#moa .container-inner .innerContent .element-box .icon-container::after {
  margin: -3px;
  position: absolute;
  right: 0;
  bottom: -1px;
  content: "";
  border-top: 21px solid transparent;
  border-right: 21px solid white;
}
#moa .container-inner .innerContent .element-box .icon-container .icon-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 5px;
  padding: 10px 0;
  width: auto;
}
@media (min-width: 768px) {
  #moa .container-inner .innerContent .element-box .icon-container .icon-wrapper {
    margin-right: 25px;
  }
}
#moa .container-inner .innerContent .element-box .icon-container .icon-wrapper-key {
  margin-right: 30px;
}
@media (min-width: 768px) {
  #moa .container-inner .innerContent .element-box .icon-container .icon-wrapper-key {
    margin-right: 14px;
  }
}
@media (min-width: 768px) {
  #moa .container-inner .innerContent .element-box .icon-container .icon-wrapper:first-of-type {
    margin-left: 0;
  }
}
#moa .container-inner .innerContent .element-box .icon-container .icon-wrapper:last-of-type {
  margin-right: 0;
}
@media (min-width: 768px) {
  #moa .container-inner .innerContent .element-box .icon-container .icon-wrapper {
    margin-right: 14px;
    padding-bottom: 0;
  }
}
@media (min-width: 1440px) {
  #moa .container-inner .innerContent .element-box .icon-container .icon-wrapper {
    margin-right: 30px;
  }
}
#moa .container-inner .innerContent .element-box .icon-container .icon-wrapper .icon {
  display: inline-block;
  vertical-align: middle;
  text-align: left;
}
@media (min-width: 1200px) {
  #moa .container-inner .innerContent .element-box .icon-container .icon-wrapper .icon {
    margin-right: 8px;
  }
  #moa .container-inner .innerContent .element-box .icon-container .icon-wrapper .icon.dna img {
    height: 48px;
    width: auto;
  }
}
@media (max-width: 767px) {
  #moa .container-inner .innerContent .element-box .icon-container .icon-wrapper .icon img {
    display: block;
    margin: 0 auto;
    width: 50%;
  }
}
@media (min-width: 768px) {
  #moa .container-inner .innerContent .element-box .icon-container .icon-wrapper .icon img {
    width: 100%;
  }
}
#moa .container-inner .innerContent .element-box .icon-container .icon-wrapper .icon-text {
  display: inline-block;
  vertical-align: middle;
  font-weight: 500;
}
@media (max-width: 767px) {
  #moa .container-inner .innerContent .element-box .icon-container .icon-wrapper .icon-text {
    font-size: 10px;
    line-height: 17px;
    margin-top: 4px;
  }
}
@media (min-width: 768px) {
  #moa .container-inner .innerContent .element-box .icon-container .icon-wrapper .icon-text {
    font-size: 15px;
    margin-top: 0;
  }
}
@media (max-width: 767px) {
  #moa .container-inner .innerContent .element-box .icon-container .headline {
    flex-basis: 100%;
  }
}
#moa .container-inner .innerContent .element-box-text {
  font-size: 14px;
  padding: 10px 25px 0;
  font-weight: 700;
}
@media (min-width: 768px) {
  #moa .container-inner .innerContent .element-box-text {
    font-size: 19px;
  }
}
#moa .container-inner .circle-header {
  font-size: 22px;
}
#moa .container-inner .circle-img-wrapper {
  display: block;
  margin: 20px auto;
  width: 40%;
}
@media (min-width: 768px) {
  #moa .container-inner .circle-img-wrapper {
    display: inline-block;
    text-align: center;
    margin: 10px 30px;
    width: 20%;
  }
}
@media (min-width: 992px) {
  #moa .container-inner .circle-img-wrapper {
    display: inline-block;
    margin: 10px 15px 10px 0;
    width: 176px;
  }
  #moa .container-inner .circle-img-wrapper:last-of-type {
    margin-right: 0;
  }
}
@media (min-width: 1200px) {
  #moa .container-inner .circle-img-wrapper {
    display: inline-block;
    margin: 10px 65px 10px 0;
    width: 176px;
  }
  #moa .container-inner .circle-img-wrapper:last-of-type {
    margin-right: 0;
  }
}
#moa .inner-container-image {
  padding-right: 0;
}
@media (min-width: 1200px) {
  #moa .inner-container-image {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    margin-left: 206px;
    padding-right: 90px;
  }
}
/*# sourceMappingURL=mechanism-of-action.css.map */