@import url("https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900&display=swap");
@import url("https://fonts.googleapis.com/css?family=Lato&display=swap");
/**
 * Screen sizes:
 *
 * Defining the screen size breakpoints.
 *
 * Mobile first approach, so using these values as min widths,
 * (anything above said screensize)
 * <size>Screen: used for styles above <size>
 *
 */
.video {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 0.3rem; }
  .video .video__video-content {
    width: 100%;
    position: relative;
    padding-bottom: 56.25%; }
  .video .video__video-wrapper {
    height: 0;
    overflow: hidden;
    max-width: 100%; }
    .video .video__video-wrapper iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      margin: 0; }
    .video .video__video-wrapper video {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%; }

@media (min-width: 760px) and (max-width: 900px) {
  .video {
    height: 100%; }
    .video .video__video-wrapper {
      padding-top: 0;
      height: auto; }
      .video .video__video-wrapper iframe {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; }
    .video .video__image img {
      height: 39rem; } }

@media (min-width: 900px) {
  .video {
    height: 100%; }
    .video .video__video-wrapper {
      padding-top: 0;
      height: auto; }
      .video .video__video-wrapper iframe {
        top: -0.1rem;
        left: -0.1rem;
        width: 100%;
        height: 100%; } }

/*# sourceMappingURL=video.css.map */