/**
 * CSS for both Frontend+Backend of block.
 */
/**
 * Colors
 */
/**
 * Breakpoints
 */
.explainer-card {
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
          box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
  border-bottom: 5px solid #212121;
  padding: 1rem; }
  @media screen and (min-width: 782px) {
    .explainer-card {
      padding: 1rem 2rem; } }
  .explainer-card .explainer-card-title {
    font-family: interstate, sans-serif; }
  .explainer-card .social-share-list {
    border-bottom: 1px solid #cccac8;
    display: -ms-flexbox;
    display: flex;
    list-style-type: none;
    padding: 0 0 1rem; }
    .explainer-card .social-share-list svg {
      width: 18px; }
    .explainer-card .social-share-list a,
    .explainer-card .social-share-list .explainer-embed-code-container {
      -ms-flex-align: center;
          align-items: center;
      background-color: #f4a045;
      border-radius: 100%;
      color: #fff;
      display: -ms-flexbox;
      display: flex;
      height: 32px;
      -ms-flex-pack: center;
          justify-content: center;
      margin-right: 0.5rem;
      text-align: center;
      width: 32px; }
      .explainer-card .social-share-list a.twitter,
      .explainer-card .social-share-list .explainer-embed-code-container.twitter {
        background-color: #46a9ea; }
      .explainer-card .social-share-list a.facebook,
      .explainer-card .social-share-list .explainer-embed-code-container.facebook {
        background-color: #405896; }
      .explainer-card .social-share-list a:hover,
      .explainer-card .social-share-list .explainer-embed-code-container:hover {
        background-color: #212121; }
    .explainer-card .social-share-list .explainer-embed-code-container {
      background-color: #5ed5e1;
      color: #fff; }
  .explainer-card .explainer-card__footer {
    border-top: 2px solid #cccac8;
    display: -ms-flexbox;
    display: flex;
    font-size: 0.75em;
    -ms-flex-pack: justify;
        justify-content: space-between;
    margin: 0 -1rem;
    padding: 1rem 1rem 0;
    opacity: 0.5; }
    @media screen and (min-width: 782px) {
      .explainer-card .explainer-card__footer {
        margin: 0 -2rem;
        padding-left: 2rem;
        padding-right: 2rem; } }
  .explainer-card .explainer-embed-code {
    resize: none;
    background: #ececec;
    white-space: normal;
    font-size: 0.5em;
    width: 300px;
    height: 10em;
    position: absolute;
    z-index: 999; }
  .explainer-card .explainer-embed-code-container .explainer-embed-code {
    display: none; }
  .explainer-card .explainer-embed-code-container:hover .explainer-embed-code {
    display: block; }

.entry .entry-content .explainer-card-title a,
.entry .entry-content .explainer-card-title a:visited {
  color: #212121; }

.entry .entry-content .explainer-card .social-share-list a,
.entry .entry-content .explainer-card .social-share-list a:visited {
  color: #fff; }