/* Base card styles
   ========================================================================== */
.card {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-bottom: 1.6rem;
  text-decoration: none;
  flex-grow: 1;
  display: flex;
  flex: 1 1 0%;
  flex-direction: column; }
  .card:focus-within .card__title a:focus {
    text-decoration: underline; }
  @media (min-width: 768px) {
    .card {
      border: none;
      margin-bottom: 0; } }
  .card--enclosed {
    border: 1px solid; }
    .card--enclosed .card__body {
      padding: 2rem; }
    .card--enclosed .bttn {
      margin-bottom: 0; }
  .card--stacked.card--enclosed .card__body {
    padding: 2rem; }
  .card--stacked.card--enclosed .card__media + .card__body {
    padding: 2rem; }
  .card--stacked .card__body {
    padding: 0; }
  .card--stacked .card__media + .card__body {
    padding: 2rem 0 0; }
    @media (min-width: 768px) {
      .card--stacked .card__media + .card__body {
        padding: 2rem 0 0; } }
  .card--media-left .card__body, .card--media-right .card__body {
    padding: 0;
    min-height: 1px; }
    @media (min-width: 768px) {
      .card--media-left .card__body, .card--media-right .card__body {
        flex: 0 1 100%; } }
  .card--media-left .card__media + .card__body, .card--media-right .card__media + .card__body {
    padding: 2rem 0 0; }
    @media (min-width: 768px) {
      .card--media-left .card__media + .card__body, .card--media-right .card__media + .card__body {
        padding: 0; } }
  .card--media-left[class*="bg-"] .card__body, .card--media-right[class*="bg-"] .card__body {
    padding: 2rem; }
    @media (min-width: 768px) {
      .card--media-left[class*="bg-"] .card__body, .card--media-right[class*="bg-"] .card__body {
        padding: 0; } }
  .card--media-left.card--enclosed .card__body, .card--media-right.card--enclosed .card__body {
    padding: 2rem; }
    @media (min-width: 768px) {
      .card--media-left.card--enclosed .card__body, .card--media-right.card--enclosed .card__body {
        padding: 0; } }
  .card--centered {
    text-align: center; }
  .card__title {
    margin: 0 0 0.625rem;
    padding: 0;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.2; }
    .card__title a {
      text-decoration: none; 
    color:#151515}
      .card__title a:hover, .card__title a:focus {
        text-decoration: underline; }
    .card__title.headline {
      font-size: 1.5rem; }
    .card__title:focus-within ~ .bttn {
      background-position: 0;
      background-size: 200% 100%; }
      .card__title:focus-within ~ .bttn i,
      .card__title:focus-within ~ .bttn svg {
        color: #151515; }
  .card .bttn {
    background-image: linear-gradient(to bottom, #ffffff00 0%, #ffffff00 90%, #ffcd00 90%, #ffcd00 100%);
    background-position: 0 -20px;
    background-size: 200% 200%;
    transition: all 0.25s ease-in; }
    .card .bttn:after {
      content: "";
      transform: translate(-50%) scaleX(0);
      transition: transform 0.3s ease-in-out; }
    .card .bttn:focus:after, .card .bttn:hover:after {
      transform: translate(-50%, 0) scaleX(1); }
  .card p + .btn,
  .card p + .bttn {
    margin-top: 1.05rem; }
  .card__subtitle + .btn,
  .card__subtitle + .bttn,
  .card__subtitle + p {
    margin-top: 0.625rem; }
  .card__media-graph {
    display:flex;
    flex-direction: column;
    height: 460px;
    }
    .card__media-iframe {
      flex-grow: 1; 
      border: none; 
      margin: 0; 
      padding: 0;
    }
  .card__media {
    flex-shrink: 0;
    width: 100%;
    min-height: 1px; }
    .card__media img {
      flex-shrink: 0;
      width: 100%;
      min-height: 1px; }
  .card__img {
    align-self: start;
    width: 100%; }
  .card__body {
    flex: 1;
    padding: 2rem 0 0;
    min-height: 1px;
    line-height: 1.7; }
    @media (min-width: 768px) {
      .card__body {
        padding: 2rem; } }
    .card__body h2:not(:first-child),
    .card__body h3:not(:first-child),
    .card__body h4:not(:first-child),
    .card__body h5:not(:first-child),
    .card__body h6:not(:first-child) {
      margin-top: 0; }
    @media (min-width: 768px) {
      .card__body {
        padding: 2rem 0; } }
    .card__body ul,
    .card__body ol,
    .card__body dl,
    .card__body table {
      font-size: 1rem;
      line-height: 1.7; }
  .card__details {
    margin: 0 0 0.625rem; }
  .card p {
    margin-bottom: 0;
    margin-top: 0;
    font-size: 1rem;
    line-height: 1.7; }
    .card p a {
      position: relative;
      z-index: 1; }
  .card__subtitle {
    opacity: .7;
    font-family: "Zilla Slab", serif;
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1.3; }
  .card__date, .card__meta {
    font-family: "Roboto", sans-serif;
    font-size: 1.1rem;
    line-height: 1.4;
    font-weight: 400; }
    .card__date .fas, .card__meta .fas {
      margin-right: .3rem; }
  .card__label {
    font-family: "Zilla Slab", serif;
    font-size: 1.2rem;
    font-weight: 400;
    padding-left: 20px;
    line-height: 1.3;
    margin-top: .125rem; }
    .card__label .fas,
    .card__label .svg-inline--fa {
      opacity: 0.6;
      padding-right: 0.325rem;
      font-size: 1rem;
      line-height: 1.2;
      position: absolute;
      margin-left: -20px; }
    .card__label .svg-inline--fa {
      width: 17px; }

/* Margin and padding adjustments for media--circle
   ========================================================================== */
[class*="bg-"] .card.card--stacked[class*="bg-"] .media--circle {
  margin-top: 2rem; }
  [class*="bg-"] .card.card--stacked[class*="bg-"] .media--circle.card__media--large {
    padding: 0 2rem; }

.card--media-left .media--circle.card__media--large, .card--media-right .media--circle.card__media--large, .card--stacked .media--circle.card__media--large {
  padding: 0 2rem; }

.card--media-left[class*="bg-"] .media--circle, .card--media-right[class*="bg-"] .media--circle, .card--stacked[class*="bg-"] .media--circle {
  margin-top: 2rem; }
  @media (min-width: 768px) {
    .card--media-left[class*="bg-"] .media--circle, .card--media-right[class*="bg-"] .media--circle, .card--stacked[class*="bg-"] .media--circle {
      margin-top: 0; } }

@media (min-width: 768px) {
  .card--media-left .media--circle.card__media--large, .card--media-right .media--circle.card__media--large {
    padding: 0; } }

.card--stacked[class*="bg-"] .media--circle {
  margin-top: 2rem; }

.card--enclosed.card--media-left .media--circle, .card--enclosed.card--media-right .media--circle, .card--enclosed.card--stacked .media--circle {
  margin-top: 2rem; }

@media (min-width: 768px) {
  .card--enclosed.card--media-left .media--circle, .card--enclosed.card--media-right .media--circle {
    margin-top: 0; } }

/* Card media styles
   ========================================================================== */
.card .card__media--large,
.card .card__media--medium,
.card .card__media--small {
  margin-left: auto;
  margin-right: auto; }
  @media (min-width: 768px) {
    .card .card__media--large,
    .card .card__media--medium,
    .card .card__media--small {
      justify-content: center;
      margin: 0 auto; } }

@media (min-width: 768px) {
  .card .card__media--small {
    flex: 0 0 25%;
    width: 25%; } }

.card .card__media--small.media--circle {
  max-width: 150px; }

@media (min-width: 768px) {
  .card .card__media--medium {
    flex: 0 0 37.5%;
    width: 37.5%; } }

.card .card__media--medium img {
  align-self: start; }

.card .card__media--medium.media--circle {
  width: 50%; }

.card.card--stacked .card__media--small.media--circle {
  flex: unset;
  width: 40%; }

@media (min-width: 768px) {
  .card.card--stacked .card__media--medium.media--circle {
    flex: unset;
    width: 60%; } }

@media (min-width: 768px) and (min-width: 768px) {
  .card.card--media-left .card__media--large, .card.card--media-right .card__media--large {
    flex: 0 0 50%;
    width: 50%; } }

@media (min-width: 768px) {
  .card.card--media-left .card__media--large.media--circle, .card.card--media-right .card__media--large.media--circle {
    flex: 0 0 37%;
    width: 37%; } }

@media (min-width: 768px) {
  .card.card--media-left .card__media--medium.media--circle, .card.card--media-right .card__media--medium.media--circle {
    flex: 0 0 25%;
    width: 25%; } }

/* Card left/right styles
 ========================================================================== */
.card {
  /*
    &.card--media-right {

    }
    */ }
  @media (min-width: 768px) {
    .card--media-left, .card--media-right {
      flex-direction: row; } }
  @media (min-width: 768px) {
    .card--media-left.card--enclosed, .card--media-left[class*="bg-"]:not(.bg--white), .card--media-right.card--enclosed, .card--media-right[class*="bg-"]:not(.bg--white) {
      padding: 2rem; } }
  @media (min-width: 768px) {
    .card--media-left, .card--media-right {
      display: flex;
      flex-wrap: nowrap;
      flex-direction: unset;
      width: 100%;
      margin-bottom: 1.6rem; } }
  .card--media-left .card__title, .card--media-right .card__title {
    font-family: "Zilla Slab", serif;
    font-weight: 700; }
    @media (min-width: 768px) {
      .card--media-left .card__title, .card--media-right .card__title {
        padding: 0;
        margin: 0 0 0.325rem; } }
  @media (min-width: 768px) {
    .card--media-left .card__media + .card__body {
      padding: 0 0 1.05rem 2rem; } }
  .card--media-right.card--enclosed .card__media + .card__body {
    padding: 2rem; }
    @media (min-width: 768px) {
      .card--media-right.card--enclosed .card__media + .card__body {
        padding: 0 2rem 1.05rem 0; } }
  @media (min-width: 768px) {
    .card--media-right .card__media + .card__body {
      padding: 0 2rem 1.05rem 0; } }
  @media (min-width: 768px) {
    .card--media-right {
      flex-direction: row-reverse; } }
  @media (min-width: 768px) {
    .card--media-right.card, .card--media-right.card--enclosed {
      flex-direction: row-reverse; } }

/* Background color adjustments
 ========================================================================== */
[class*="bg-"] .card.card--stacked[class*="bg-"] .card__body,
.card.card--stacked[class*="bg-"]:not([class*="bg--white"]) .card__body {
  padding: 2rem; }

.card.card--enclosed[class*="bg--white"], .card.card--enclosed[class*="bg--gray"], .card.card--enclosed[class*="bg--gold"] {
  border: 1px solid rgba(0, 0, 0, 0.125); }
  [class*="bg-"] .card.card--enclosed[class*="bg--white"], [class*="bg-"] .card.card--enclosed[class*="bg--gray"], [class*="bg-"] .card.card--enclosed[class*="bg--gold"] {
    border: 1px solid rgba(0, 0, 0, 0.125); }

[class*="bg--white"] .card.card--enclosed,
[class*="bg--gray"] .card.card--enclosed,
[class*="bg--gold"] .card.card--enclosed {
  border: 1px solid rgba(0, 0, 0, 0.125); }

[class*="bg--black"] .card.card--enclosed {
  border-color: rgba(255, 255, 255, 0.325); }

.card:not([class*="bg-"]) {
  border-color: rgba(0, 0, 0, 0.125); }

.card[class*="bg--black"] .bttn--sans-serif {
  border-color: rgba(255, 255, 255, 0.425); }

[class*="bg-"] .card[class*="bg--white"] .bttn--outline {
  border-color: #FFCD00; }

.card[class*="bg--white"] .bttn--outline {
  border-color: #FFCD00; }

@media (min-width: 768px) {
  [class*="bg-"] .card--media-left.card, [class*="bg-"] .card--media-right.card {
    padding: 2rem; } }

@media (min-width: 768px) {
  [class*="bg-"] .card--media-left.card:not([class*="bg-"]), [class*="bg-"] .card--media-right.card:not([class*="bg-"]) {
    padding: 0; } }

@media (min-width: 768px) {
  [class*="bg-"] .card--media-left.card--enclosed:not([class*="bg-"]), [class*="bg-"] .card--media-right.card--enclosed:not([class*="bg-"]) {
    padding: 2rem; } }
