@charset "UTF-8";
/*---------------------------------

WE NEED THESE TO REFERENCE VARIABLES, MIXINS AND SUCH. DO NOT REMOVE!
Thanks, Friend :)

---------------------------------*/
/*---------------------------------

YOUR CUSTOM STYLES GO UNDER HERE.
You're doing great.

---------------------------------*/
.lp-intro__img {
  display: inline-block;
  max-width: 260px;
  margin-bottom: 2rem;
}
.lp-intro p {
  font-size: 1rem;
}
.lp-intro p.lead {
  font-size: 1.5rem;
}
@media (min-width: 576px) {
  .lp-intro p {
    font-size: 1.25rem;
  }
  .lp-intro p.lead {
    font-size: 2rem;
  }
}

.hero-section {
  padding: 4rem 0;
  background-color: #444648;
  color: #fff;
  background-size: cover;
}
.hero-section h3 {
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.4;
}
@media (max-width: 575.98px) {
  .hero-section {
    padding: 2rem 0;
  }
  .hero-section h2, .hero-section .h2 {
    font-size: 2.5rem;
  }
  .hero-section h3, .hero-section .h3 {
    font-size: 1.25rem;
  }
}
.hero-section a {
  color: inherit;
}
.hero-section__cta {
  background-color: rgba(255, 255, 255, 0);
  display: inline-block;
  border: solid 1px #fff;
  padding: 0.5rem 1.5em;
  color: inherit;
  margin-top: 1rem;
  border-radius: 2px;
  -webkit-transition: background-color 200ms linear;
  -moz-transition: background-color 200ms linear;
  transition: background-color 200ms linear;
}
.hero-section__cta:hover {
  background-color: rgba(255, 255, 255, 0.25);
  color: inherit;
}
.hero-section__cta:active {
  -webkit-box-shadow: none;
  box-shadow: none;
}
.hero-section a.dropdown-item:hover, .hero-section a.dropdown-item:focus {
  font-weight: inherit;
}

.lp-hero {
  padding: 3rem 0;
}
.lp-hero__list {
  font-size: 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.lp-hero__list li {
  padding: 0.625rem 0 0.625rem 2rem;
  color: rgba(255, 255, 255, 0.95);
  background: transparent url("../../../content/dam/illumina-marketing/images/techniques/library-prep/assets/lp-checkmark.svg") no-repeat left center;
  position: relative;
  margin: 0;
}
.lp-hero__list li::after {
  content: "";
  height: 3px;
  width: -webkit-calc(100% - 2rem);
  width: -moz-calc(100% - 2rem);
  width: calc(100% - 2rem);
  background: rgba(255, 255, 255, 0.55);
  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0.55)), color-stop(37%, rgba(255, 255, 255, 0.44)), to(rgba(255, 255, 255, 0)));
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.44) 37%, rgba(255, 255, 255, 0) 100%);
  background: -moz- oldlinear-gradient(left, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.44) 37%, rgba(255, 255, 255, 0) 100%);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.44) 37%, rgba(255, 255, 255, 0) 100%);
  border-radius: 4px;
  position: absolute;
  bottom: -1px;
  left: 2rem;
}
.lp-hero__list li:first-child {
  padding-top: 0;
}
.lp-hero__list li:last-child {
  padding-bottom: 0;
}
.lp-hero__list li:last-child::after {
  display: none;
}

.lp-nav-banner {
  background: #7D55C7 url("../../../content/dam/illumina-marketing/ui/lightfields/lightfield02.jpg") no-repeat 50% 50%;
  background-size: cover;
  padding: 4rem 0;
  margin: 4rem 0;
  color: #fff;
}
.lp-nav-banner a {
  color: #fff;
}
.lp-nav-banner .lp-nav-banner__title {
  border-bottom: solid 1px #fff;
  padding-bottom: 1rem;
  margin-bottom: 2rem;
}
@media (max-width: 991.98px) {
  .lp-nav-banner {
    padding: 2rem 0;
    margin: 2rem 0;
  }
}

.lp-nav-banner--selection-tools .lp-nav-banner__content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: flex;
}
@media (max-width: 991.98px) {
  .lp-nav-banner--selection-tools .lp-nav-banner__content {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}
.lp-nav-banner--selection-tools .lp-nav-banner__content > div {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: flex;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -moz-box-align: start;
  align-items: flex-start;
}
.lp-nav-banner--selection-tools .lp-nav-banner__content > div > img {
  max-width: 74px;
  margin-right: 1rem;
}
.lp-nav-banner--selection-tools .lp-nav-banner__content > div:first-child {
  margin-bottom: 2rem;
}
.lp-nav-banner--selection-tools a {
  text-decoration: underline;
  font-weight: 600;
}

.lp-nav-banner--dna-rna {
  text-align: center;
}
.lp-nav-banner--dna-rna .lp-nav-banner__title {
  max-width: 18em;
  margin: 0 auto 3rem;
  padding-bottom: 0;
  border-bottom: none;
}
.lp-nav-banner--dna-rna .lp-nav-banner__content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: flex;
  -webkit-justify-content: space-around;
  justify-content: space-around;
}
@media (max-width: 991.98px) {
  .lp-nav-banner--dna-rna .lp-nav-banner__content {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}
.lp-nav-banner--dna-rna .lp-nav-banner__content a {
  max-width: 20rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  flex-direction: column;
}
.lp-nav-banner--dna-rna .lp-nav-banner__content a .icon {
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center center;
  display: block;
  margin: 0 auto 1rem;
  width: 180px;
  height: 180px;
  border-radius: 100%;
  max-width: 100%;
  max-height: 100%;
}
.lp-nav-banner--dna-rna .lp-nav-banner__content a .icon--dna {
  background-image: url("../../../content/dam/illumina-marketing/images/techniques/library-prep/assets/lp-icon-dna.svg");
  background-size: 60%;
}
.lp-nav-banner--dna-rna .lp-nav-banner__content a .icon--rna {
  background-image: url("../../../content/dam/illumina-marketing/images/techniques/library-prep/assets/lp-icon-rna.svg");
  background-size: 32%;
}
@media (max-width: 767.98px) {
  .lp-nav-banner--dna-rna .lp-nav-banner__content a {
    max-width: 10rem;
  }
  .lp-nav-banner--dna-rna .lp-nav-banner__content a .icon {
    width: 90px;
    height: 90px;
  }
}

.quote-banner, .callout-banner {
  background: #fff url("../../../content/dam/illumina-marketing/ui/lightfields/lightfield03.jpg") no-repeat center center;
  background-size: cover;
  color: #000;
  padding-top: 4rem;
  padding-bottom: 4rem;
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}
@media (max-width: 991.98px) {
  .quote-banner, .callout-banner {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
}

.quote-banner {
  padding-left: 1rem;
}
.quote-banner blockquote {
  margin-bottom: 0;
}
.quote-banner blockquote.quote-lg p {
  font-size: 2.75rem;
  max-width: 17em;
  line-height: 1.2;
  font-weight: 300;
}
@media (max-width: 991.98px) {
  .quote-banner blockquote.quote-lg p {
    font-size: 2rem;
  }
}
.quote-banner blockquote.quote-md p {
  font-size: 2rem;
  max-width: 24em;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
}
@media (max-width: 991.98px) {
  .quote-banner blockquote.quote-md p {
    font-size: 1.75rem;
  }
}
.quote-banner blockquote p {
  position: relative;
}
.quote-banner blockquote p:first-of-type::before {
  content: "“";
  color: #fff;
  position: absolute;
  left: -0.5em;
  top: 0;
}
.quote-banner blockquote p:last-of-type::after {
  content: "”";
  color: #fff;
}
.quote-banner blockquote footer {
  font-size: 1rem;
}

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

.lp-metrics {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  justify-content: center;
  margin: 2rem 0;
}
.lp-metrics .item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: flex;
  margin: 2rem;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 33.333%;
  -moz-box-flex: 1;
  flex: 1 1 33.333%;
  max-width: 33.333%;
}
.lp-metrics .item__text {
  margin-left: 1.5rem;
}
.lp-metrics .item__text .value {
  font-weight: 300;
  line-height: 1;
  font-size: 4.25rem;
}
.lp-metrics .item__text .value span {
  font-size: 2.75rem;
  font-weight: 400;
}
.lp-metrics .item__text label {
  margin: 0.75rem 0 0 0.375rem;
}
@media (max-width: 991.98px) {
  .lp-metrics {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .lp-metrics .item {
    -webkit-flex-basis: 40%;
    flex-basis: 40%;
    max-width: 40%;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    justify-content: center;
  }
  .lp-metrics .item .item__text > * {
    width: 100%;
  }
}
@media (max-width: 767.98px) {
  .lp-metrics .item {
    -webkit-flex-basis: 100%;
    flex-basis: 100%;
    max-width: 100%;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -moz-box-pack: start;
    justify-content: flex-start;
  }
}
.lp-metrics .graphic1,
.lp-metrics .graphic2,
.lp-metrics .graphic3 {
  min-width: 100px;
}
.lp-metrics .graphic1 .bg {
  fill: rgba(0, 0, 0, 0.1);
}
.lp-metrics .graphic1 .fg {
  fill: #B294E8;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transition: 2s -webkit-transform 500ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: 2s -webkit-transform 500ms cubic-bezier(0.19, 1, 0.22, 1);
  -moz-transition: 2s transform 500ms cubic-bezier(0.19, 1, 0.22, 1), 2s -moz-transform 500ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: 2s transform 500ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: 2s transform 500ms cubic-bezier(0.19, 1, 0.22, 1), 2s -webkit-transform 500ms cubic-bezier(0.19, 1, 0.22, 1), 2s -moz-transform 500ms cubic-bezier(0.19, 1, 0.22, 1);
}
.lp-metrics .graphic2 .bg {
  fill: rgba(0, 0, 0, 0.1);
}
.lp-metrics .graphic2 .fg {
  fill: none;
  stroke: #B294E8;
  stroke-width: 50;
  stroke-dasharray: 0 157.0796325;
  -webkit-transition: 2s stroke-dasharray 500ms cubic-bezier(0.19, 1, 0.22, 1);
  -moz-transition: 2s stroke-dasharray 500ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: 2s stroke-dasharray 500ms cubic-bezier(0.19, 1, 0.22, 1);
}
.lp-metrics .graphic3 .bg {
  fill: rgba(0, 0, 0, 0.1);
}
.lp-metrics .graphic3 .fg {
  fill: none;
  stroke: #B294E8;
  stroke-width: 22;
  stroke-dasharray: 0 69.1150383;
  -webkit-transition: 2s stroke-dasharray 500ms cubic-bezier(0.19, 1, 0.22, 1);
  -moz-transition: 2s stroke-dasharray 500ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: 2s stroke-dasharray 500ms cubic-bezier(0.19, 1, 0.22, 1);
}
.lp-metrics.active .graphic1 .fg {
  -webkit-transform: scale(0.08);
  -moz-transform: scale(0.08);
  -ms-transform: scale(0.08);
  transform: scale(0.08);
}
.lp-metrics.active .graphic2 .fg {
  stroke-dasharray: 157.0796325 0;
}
.lp-metrics.active .graphic3 .one .fg,
.lp-metrics.active .graphic3 .two .fg,
.lp-metrics.active .graphic3 .three .fg {
  stroke-dasharray: 69.1150383 0;
}
.lp-metrics .item__graphic {
  background: no-repeat top left;
  background-size: cover;
  height: 100px;
}
.lp-metrics .item__graphic .graphic1,
.lp-metrics .item__graphic .graphic2,
.lp-metrics .item__graphic .graphic3 {
  opacity: 0;
}
.lp-metrics .item:nth-of-type(1) .item__graphic {
  background-image: url("../../../content/dam/illumina-marketing/images/techniques/library-prep/assets/sprites-metric-1.png");
  background-position: 0 0%;
}
.lp-metrics .item:nth-of-type(2) .item__graphic {
  background-image: url("../../../content/dam/illumina-marketing/images/techniques/library-prep/assets/sprites-metric-2.png");
  background-position: 0 0%;
}
.lp-metrics .item:nth-of-type(3) .item__graphic {
  background-image: url("../../../content/dam/illumina-marketing/images/techniques/library-prep/assets/sprites-metric-3.png");
  background-position: 0 100%;
}
.lp-metrics.active .item:nth-of-type(1) .item__graphic {
  -webkit-animation: ieAnimate 1200ms steps(29) forwards;
  -moz-animation: ieAnimate 1200ms steps(29) forwards;
  animation: ieAnimate 1200ms steps(29) forwards;
  -webkit-animation-delay: 1.5s;
  -moz-animation-delay: 1.5s;
  animation-delay: 1.5s;
}
.lp-metrics.active .item:nth-of-type(2) .item__graphic {
  -webkit-animation: ieAnimate 1200ms steps(35) forwards;
  -moz-animation: ieAnimate 1200ms steps(35) forwards;
  animation: ieAnimate 1200ms steps(35) forwards;
  -webkit-animation-delay: 1.5s;
  -moz-animation-delay: 1.5s;
  animation-delay: 1.5s;
}
.lp-metrics.active .item:nth-of-type(3) .item__graphic {
  -webkit-animation: ieAnimateReverse 1200ms steps(36) forwards;
  -moz-animation: ieAnimateReverse 1200ms steps(36) forwards;
  animation: ieAnimateReverse 1200ms steps(36) forwards;
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  animation-delay: 1s;
}
@supports (transition-property: stroke-dasharray) {
  .lp-metrics .item__graphic {
    background: none !important;
  }
  .lp-metrics .item__graphic .graphic1,
  .lp-metrics .item__graphic .graphic2,
  .lp-metrics .item__graphic .graphic3 {
    opacity: 1;
  }
}

@-webkit-keyframes ieAnimate {
  100% {
    background-position: 0 100%;
  }
}

@-moz-keyframes ieAnimate {
  100% {
    background-position: 0 100%;
  }
}

@keyframes ieAnimate {
  100% {
    background-position: 0 100%;
  }
}
@-webkit-keyframes ieAnimateReverse {
  100% {
    background-position: 0 0%;
  }
}
@-moz-keyframes ieAnimateReverse {
  100% {
    background-position: 0 0%;
  }
}
@keyframes ieAnimateReverse {
  100% {
    background-position: 0 0%;
  }
}
@media (max-width: 768px) {
  .callout-banner--tagmentation .animation-stage > a.next span {
    font-size: 2rem;
  }
  .callout-banner--tagmentation .animation-controls .pager li > a {
    font-size: 1rem;
  }
  .callout-banner--tagmentation .animation-caption {
    margin-top: 2rem;
    font-size: 0.75rem;
    min-height: 120px;
  }
}

.table-labels th {
  text-align: center;
  vertical-align: middle;
  border-top: 0;
}
.table-labels th span {
  background: rgba(0, 0, 0, 0.05);
  font-weight: 400;
  padding: 0.25em 0.5em;
  display: block;
  line-height: 1.3;
}

.table-cell-item {
  font-size: 0.75rem;
  display: inline-block;
}
.table-cell-item::after {
  vertical-align: middle;
}
.table-cell-item.documented::after {
  content: url(../../../content/dam/illumina-marketing/images/techniques/library-prep/assets/dot-documented.svg);
  font-weight: 700;
}
.table-cell-item.qualified::after {
  content: url(../../../content/dam/illumina-marketing/images/techniques/library-prep/assets/dot-qualified.svg);
  font-weight: 700;
}
.table-cell-item.ts-qualified::after {
  content: url(../../../content/dam/illumina-marketing/images/techniques/library-prep/assets/dot-ts-qualified.svg);
  font-weight: 700;
}
.table-cell-item.qualified.documented::after {
  content: url(../../../content/dam/illumina-marketing/images/techniques/library-prep/assets/dot-both.svg);
  font-weight: 700;
}
.table-cell-item.ts-qualified.documented::after {
  content: url(../../../content/dam/illumina-marketing/images/techniques/library-prep/assets/dot-tsqual-documented.svg);
  font-weight: 700;
}