.image-block {
  max-width: 872px;
  margin: auto;
}

.content-image {
  max-height: 490px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
}

@media (min-width: 767px) {
  .content-image {
    border-radius: 40px;
  }
}

.content-image img,
.video-banner-img {
  aspect-ratio: 436 / 245;
}
article.image-video-container .column.left,
article.image-video-container .column.right {
  padding: 0;
}
.content-image-video-caption {
  font-size: 14px;
  margin-top: 16px;
}

.video-block {
  max-width: 872px;
  margin: auto;
}

article.image-video-container {
  font-size: 0;
  font-size: 0;
  max-height: 490px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  cursor: pointer;
}

@media (min-width: 767px) {
  article.image-video-container {
    border-radius: 40px;
  }
}

article.image-video-container .column.left,
article.image-video-container .column.right {
  background: #fcfcfc;
  display: block;
  position: relative;
  font-size: 1rem;
  width: 100%;
  min-height: 0;
  vertical-align: top;
}

@media (min-width: 767px) {

  article.image-video-container .column.left,
  article.image-video-container .column.right {
    display: inline-block;
    width: 100%;
  }

  article.image-video-container .column.right {
    margin-left: 50%;
  }
}

.video-banner {
  display: block;
}

@media (min-width: 767px) {
  .video-banner {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 0;
  }
}

.video-banner .video-banner-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.video-banner-headline {
  position: absolute;
  left: 1.5rem;
  bottom: 1.5rem;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 1.25em;
  font-weight: 900;
  line-height: 1.0em;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

@media (min-width: 767px) {
  .video-banner-headline {
    left: 2em;
    bottom: 2.75em;
    font-size: 1.5em;
    line-height: 1.5em;
  }
}

.video-banner-icon-play {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: 2.5em;
  height: 2.5em;
  transform: translateX(-50%) translateY(-50%) scale(1.0);
  transition: all 0.2s ease-out 0.05s;
  filter: invert(100%) sepia(0%) saturate(2%) hue-rotate(234deg) brightness(103%) contrast(101%);
  z-index: 1;
}

@media (min-width: 767px) {
  .video-banner-icon-play {
    width: 4.5em;
    height: 4.5em;
  }
}

.video-banner-icon-play:hover {
  -webkit-transform: translateX(-50%) translateY(-50%) scale(1.2);
  -moz-transform: translateX(-50%) translateY(-50%) scale(1.2);
  -ms-transform: translateX(-50%) translateY(-50%) scale(1.2);
  -o-transform: translateX(-50%) translateY(-50%) scale(1.2);
  transform: translateX(-50%) translateY(-50%) scale(1.2);
}

.content {
  display: block;
  min-height: 100vh;
  max-width: 40rem;
  margin: 2.5rem auto;
  padding: 1.5rem;
}

@media (min-width: 767px) {
  .content {
    margin: 5.75rem auto;
    padding: 2.5rem;
  }
}

.content h1,
.content h2,
.content p {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 1em;
  font-weight: 300;
  line-height: 1.5em;
  color: #0d013d;
}

.content h1 {
  font-size: 3.25em;
  font-weight: 200;
  line-height: 1.0em;
  margin: 0 0 0.5rem 0;
}

@media (min-width: 767px) {
  .content h1 {
    font-size: 4em;
  }
}

.content h2 {
  font-size: 1em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.155em;
  margin-top: 3em;
}

/* buttons */
.content .button-group {
  margin-top: 1em;
}

.content .button {
  display: inline-block;
  padding: 1em 2em;
  min-width: 8em;
  text-align: center;
  font-weight: 900;
  text-decoration: none;
  border-radius: 1.5em;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
  /* button theme - secondary is default */
  background: #f0f0f0;
  color: #2b2b2b;
  -webkit-transition: all 0.2s ease-out 0.05s;
  transition: all 0.2s ease-out 0.05s;
}

.content .button~.button {
  margin-left: 0.5em;
}

.content .button:hover {
  background: #e5e5e5;
}

/* primary button overrides */
.content .button.primary {
  background: #e50055;
  color: #fff;
}

.content .button.primary:hover {
  background: #9d00e5;
}


/* video thumbnail grid */
.content .video-thumb-grid {
  position: relative;
  font-size: 0;
  /* collapse the white-space */
  width: calc(100% + 2rem);
  margin: 0 -1rem;
}

.content .video-thumb {
  display: inline-block;
  vertical-align: top;
  text-decoration: none;
  /* calculate the width, gutters, and aspect ratio */
  width: calc((100% - 4rem) / 2);
  height: 0;
  padding-top: calc(((100% - 4rem) / 2) * 0.5625);
  /* 16:9 calc */
  margin: 1rem 1rem;
  /* gutters */
  overflow: hidden;
  /* clipping */
  position: relative;
  /* enable positioning for inner content */
  font-size: 1rem;
  /* reset the font size */
  -webkit-transform: scale(1.0);
  transform: scale(1.0);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.0);
  -webkit-transition: all 0.2s ease-out 0.05s;
  transition: all 0.2s ease-out 0.05s;
}

.content .video-thumb:hover {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
  box-shadow: 0 2px 4px rgba(13, 1, 61, 0.35);
}

.content .video-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  /* position inside the 16:9 container */
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  /* clipping for source images that are letterboxed */
  object-fit: cover;
  object-position: 50% 50%;
  background: var(--grey-01);
}

/* Video Modal
  -----------------------------------------*/
.video-modal,
.video-modal .overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3000;
}

.video-modal {
  overflow: hidden;
  position: fixed;
  opacity: 0.0;
  -webkit-transform: translate(500%, 0%);
  transform: translate(500%, 0%);
  -webkit-transition: -webkit-transform 0s linear 0s;
  transition: transform 0s linear 0s;
  /* using flexbox for vertical centering */
  /* Flexbox display */
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  /* Vertical alignment */
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.video-modal .overlay {
  z-index: 0;
  background: var(--grey-02);
  opacity: 0.0;
  -webkit-transition: opacity 0.2s ease-out 0.05s;
  transition: opacity 0.2s ease-out 0.05s;
}


.video-modal-content {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  z-index: 1;
  margin: 0 auto;
  overflow-y: visible;
  background: var(--grey-01);
  width: calc(100% - 12em);
  height: 0;
  padding-top: calc((100% - 12em) * 0.5625);
  /* 16:9 calc */
}

.video-modal-content iframe {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  left: 0;
}

/* Scaling to fit within the current Viewport size:
     When viewport aspect ratio is greater than 16:9
     work off the height instead of the width for calc */
@media (min-aspect-ratio: 16/9) {
  .video-modal-content {
    width: 0;
    height: calc(100vh - 10em);
    padding-top: 0;
    padding-left: calc((100vh - 10em) * 1.7778);
    /* 16:9 calc */
  }
}

/* Mobile Layout Tweaks - side margins reduced */
@media (max-width: 640px) {
  .video-modal-content {
    width: calc(100% - 1em);
    padding-top: calc((100% - 1em) * 0.5625);
    /* 16:9 calc */
  }
}

/* modal close button */
.close-video-modal {
  display: block;
  position: absolute;
  right: 0;
  top: -40px;
  filter: invert(100%) sepia(0%) saturate(2%) hue-rotate(234deg) brightness(103%) contrast(101%);
}

/* set the iframe element to stretch to fit its parent element */
iframe#youtube {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  background: var(--grey-01);
  box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.5);
}

/* show the modal:
     add class to the body to reveal */
.show-video-modal .video-modal {
  opacity: 1.0;
  transform: translate(0%, 0%);
  -webkit-transform: translate(0%, 0%);
}

.show-video-modal .video-modal .overlay {
  opacity: 1.0;
}

.show-video-modal .video-modal-content {
  transform: translate(0%, 0%);
  -webkit-transform: translate(0%, 0%);
}

/* Start article slick slider heading hover fixes */

.node--type-article .col-12 .container {
  padding: 0;
}

.node--type-article .container .product-text {
  color: var(--grey-02);
}

.node--type-article .card-heading {
  padding: 0 10px;
}

@media (min-width: 992px) {
  .node--type-article .col-12 .container.slick-slider {
    padding: 0 70px;
  }
}

/* End article slick slider heading hover fixes */