/* styles for slider block go here */
.block-type-image img {
  width: 100%;
}

.block-type-image .with-caption {}

.block-type-image .container img {
  transform: scale(0.95);
  transition: transform 3s ease 0.2s;
}

.block-type-image .container.visible img {
  transform: scale(1.00);
}

.block-type-image .captionHeaderAndLine {
  display: flex;
  flex-direction: row;
  white-space: nowrap;
  padding-bottom: 10%;
}

.block-type-image .captionHeaderAndLine h4 {
  text-transform: uppercase;
  white-space: nowrap;
  margin-top: auto;
  margin-bottom: auto;
  margin-right: 10px;
  color: var(--color-dark-gray);
  font-size: 15px;
}

.block-type-image .captionHeaderAndLine>.line {
  width: 100%;
  height: 1px;
  margin-top: auto;
  margin-bottom: auto;
  background-color: var(--color-light-gray);
}

.block-type-image .with-caption .caption.left {
  grid-column: span 4;
}

.block-type-image .with-caption img.caption-left {
  grid-column: span 8;
}

.block-type-image .with-caption .caption.right {
  grid-column: span 4;
  order: 2;
}

.block-type-image .with-caption img.caption-right {
  grid-column: span 8;
  order: 1;
}

.block-type-image .with-caption .caption.top {
  grid-column: span 12;
}

.block-type-image .with-caption img.caption-top {
  grid-column: span 12;
}

.block-type-image .with-caption .caption.bottom {
  grid-column: span 12;
  order: 2;
}

.block-type-image .with-caption img.caption-bottom {
  grid-column: span 12;
  order: 1;
}

.block-type-image .container_size_none .caption {
  padding-left: 60px;
}

@media screen and (max-width:980px) {
  .block-type-image .with-caption .caption {
    grid-column: span 12;
    order: 2;
  }

  .block-type-image .with-caption .caption p {
    font-size: 10px;
    font-weight: 100;
    opacity: 0.9;
  }

  .block-type-image .with-caption img {
    grid-column: span 12;
    order: 1;
  }

  .block-type-image .grid {
    grid-row-gap: 5px;
  }

  .block-type-image .container_size_none .caption {
    padding-left: 0px;
  }

  .block-type-image .container .with-caption.grid>div.caption.top {
    order: 1;
    grid-column: span 12;
  }

  .block-type-image .container .with-caption.grid>img.caption-top {
    order: 2;
    grid-column: span 12;
  }

  .block-type-image .container .with-caption.grid>div {
    order: 2;
    grid-column: span 12;
    padding-top: 10px;
  }

  .block-type-image .container .with-caption.grid>img {
    order: 1;
    grid-column: span 12;
  }
}