/* Webfonts */

@import url(webfonts.css);

/* Blockquote */

blockquote {
  p {
    display: inline;

    /* QUOTE WITH AUTHOR/SOURCE */

    // Handle the source/author of the quote
    &:last-of-type {
      quotes: "\201C" "\201D" "\2018" "\2019";
      font-style: italic;

      // Handle the closing double quote, before source/author
      &::before {
        content: close-quote "\000A" "\2014" " ";
        white-space: pre;
        margin-left: 0.1rem;
        font-style: normal;
      }
    }

    // Handle the opening double quote, before the quote
    &:first-of-type {
      quotes: "\201C" "\201D" "\2018" "\2019";

      &::before {
        content: open-quote;
        margin-right: 0.1rem;
      }
    }

    /* QUOTE WITHOUT AUTHOR/SOURCE */

    // In case of only one quote, without source.
    &:only-of-type {
      quotes: "\201C" "\201D" "\2018" "\2019";
      font-style: normal;

      &::before {
        content: open-quote;
        margin-right: 0.1rem;
      }

      &::after {
        content: close-quote;
        margin-left: 0.1rem;
      }
    }
  }

  background: var(--color-bg-blockquote);
  border: 1px solid var(--color-border-blockquote);
  border-left: 9px solid var(--color-border-blockquote);
  padding: 0.3rem 0.8rem;
  font-size: $size-font-blockquote;
  @include breakpoint-min-md {
    padding: 0.8rem 1.3rem;
    font-size: $size-font-blockquote-large;
  }
}

/* Overlay */

#main .thumb > .overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgba(57, 57, 57, 0.502);
	top: 0;
	left: 0;
	transform: scale(0);
	transition: all 0.2s 0.1s ease-in-out;
	color: whitesmoke;
	border-radius: 5px;
	/* center overlay content */
	display: flex;
	align-items: center;
	justify-content: center;
}

/* hover */
#main .thumb:hover .overlay {
	transform: scale(1);
}