/*******************************************************************************
 * paragraphs.layout.scss
 *
 * Styling of the "basic" layout for the NIH website.
 ******************************************************************************/
.page-section-title {
  width: 100%;
}

.bg-color--white {
  background-color: #fff !important;
}

.bg-color--light_grey {
  background-color: #f0f0f0 !important;
}

.bg-color--dark_grey {
  background-color: darkgrey !important;
}

.bg-color--black {
  background-color: black !important;
}

.field--name-field-contained-paragraph-block {
  display: flex;
}
.field--name-field-contained-paragraph-block .usa-card__container {
  border: none;
}
.field--name-field-contained-paragraph-block .usa-card .usa-card__media {
  order: unset;
}
.field--name-field-contained-paragraph-block .usa-card .usa-card__img {
  width: 100%;
  max-height: 250px;
}
.field--name-field-contained-paragraph-block .usa-card p {
  margin-bottom: 0;
}

.paragraph-item, .field__item {
  flex: 1 1 calc(33.33% - 10px);
}

.paragraph-count-1 .paragraph-item, .item-count-1 .field__item {
  flex: 1 1 100%;
}

.paragraph-count-2 .paragraph-item, .item-count-2 .field__tem {
  flex: 1 1 calc(50% - 10px);
}

.paragraph-count-3 .paragraph-item, .item-count-3 .field__tem {
  flex: 1 1 calc(33.3333333% - 10px);
}

.paragraph-count-4 .paragraph-item, .item-count-4 .field__item {
  flex: 1 1 calc(25% - 10px);
}

.paragraph-count-5 .paragraph-item, .item-count-5 .field__item {
  flex: 1 1 calc(20% - 10px);
}

.paragraph-count-6 .paragraph-item, .item-count-6 .field__item {
  flex: 1 1 calc(16.6666667% - 10px);
}

.box-row {
  display: flex;
  flex: 0 1 auto;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 100%;
}
.box-row .col {
  flex: 0 0 auto;
  padding: 0 6px;
  flex-basis: 100%;
  max-width: 100%;
}
.box-row .col--group {
  margin-bottom: 0;
}
@media only screen and (min-width: 640px) {
  .box-row .box-row {
    flex-direction: row;
  }
  .box-row .card--thro {
    margin: 0;
  }
  .box-row .col {
    padding: 6px;
  }
}
.box-row .col--1of1,
.box-row .col--2of2,
.box-row .col--3of3,
.box-row .col--6of6 {
  flex-basis: 100%;
  max-width: 100%;
}
@media only screen and (min-width: 640px) {
  .box-row .col--1of2,
  .box-row .col--3of6 {
    flex-basis: 50%;
    max-width: 50%;
  }
}
@media only screen and (min-width: 640px) {
  .box-row .col--1of3,
  .box-row .col--2of6 {
    flex-basis: 33.3333333%;
    max-width: 33.3333333%;
  }
}
@media only screen and (min-width: 640px) {
  .box-row .col--1of6 {
    flex-basis: 33.3333333%;
    max-width: 33.3333333%;
  }
}
@media only screen and (min-width: 640px) {
  .box-row .col--2of3,
  .box-row .col--4of6 {
    flex-basis: 66.6666667%;
    max-width: 66.6666667%;
  }
}
@media only screen and (min-width: 640px) {
  .box-row .col--5of6 {
    flex-basis: 83.3333333%;
    max-width: 83.3333333%;
  }
}
@media only screen and (min-width: 1200px) {
  .box-row .col {
    padding: 0 6px;
  }
  .box-row .col--1of6 {
    flex-basis: 16.6666667%;
    max-width: 16.6666667%;
    margin-bottom: 0px;
  }
}
.box-row .col--group {
  padding: 0;
}
.box-row .stretched-link::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  content: "";
}
.box-row .paragraph-type-thro_card_with_icon:nth-of-type(2) .card--thro {
  background-color: #FED63A;
}
.box-row .paragraph-type-thro_card_with_icon:nth-of-type(3) .card--thro {
  background-color: #55BAF3;
}
.box-row .paragraph-type-thro_card_with_icon:nth-of-type(4) .card--thro {
  background-color: #F7652C;
}
.box-row .paragraph-type-thro_card_with_icon:nth-of-type(5) .card--thro {
  background-color: #316297;
}
.box-row .paragraph-type-thro_card_with_icon:nth-of-type(6) .card--thro {
  background-color: #616265;
}

#thro-cards {
  max-width: 1344px;
  margin: 0 auto;
  padding: 24px 0px;
}

.paragraph-type-thro_card_with_icon {
  margin: 0 3px 12px 0 !important;
}
.paragraph-type-thro_card_with_icon p {
  margin: 0 5px 0 10px;
  color: #fff;
  line-height: 1.3;
  font-size: 0.9em;
  text-align: left;
}
.paragraph-type-thro_card_with_icon img {
  width: 100%;
}
.paragraph-type-thro_card_with_icon h3 {
  margin: 0 0 0.4em 0;
  padding: 0;
  border: 0;
  font-size: 1.2em;
  color: #fff;
}
.paragraph-type-thro_card_with_icon a, .paragraph-type-thro_card_with_icon h3 a {
  color: #fff;
}
.paragraph-type-thro_card_with_icon .card--body {
  min-height: unset;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  flex: 1 0 auto;
}

.paragraph-type-card_w_inset_media {
  max-width: 350px;
}

.card--thro {
  transition: box-shadow 0.3s;
  margin: 12px 0;
  padding: 12px 6px;
  color: #fff;
  text-align: center;
  background-image: url("/sites/default/files/box-background.png");
  background: #CA101D linear-gradient(360deg, rgba(0, 0, 0, 0.65) 16.32%, rgba(0, 0, 0, 0) 102.08%);
  height: 225px;
  position: relative;
  width: 100%;
}
.card--thro:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.6);
  /*  background: #CA101D; */
}

.stretched-link a {
  color: white;
}
.stretched-link a:hover {
  text-decoration: underline;
}