.center {
  text-align: center;
}

/* Outline when hovering over editable blocks when logged in. */
body:not(.layout-builder-page) .block-inline-block.contextual-region:hover {
  outline: 1px dashed #888;
}

/* Images */
.image-style-thumbnail {
  --image-style-width: 100px;
}
.image-style-small {
  --image-style-width: 220px;
}
.image-style-medium {
  --image-style-width: 480px;
}
.image-style-large {
  --image-style-width: 720px;
}
.image-style-very-large {
  --image-style-width: 1080px;
}
.image-style-full-width {
  --image-style-width: 100%;
}
/* Overridden in wildfire_layout_blocks_preprocess_block_content_content(). */
.image-style-original-size {
  --image-style-width: auto;
}

.block-inline-blockimage .flex {
  max-width: 100%;
}
.block-inline-blockimage .field--name-field-image,
.block-inline-blockimage a.block-image-link,
.block-inline-blockimage-with-text .field--name-field-image {
  width: var(--image-style-width);
  max-width: 100%;
}
.block-inline-blockimage img {
  width: var(--image-style-width);
  display: block;
  max-width: 100%;
  height: auto;
}
.block-inline-blockimage-with-text img {
  display: block;
  width: 100%;
  height: auto;
}
/* Prevent alt text being visible before image is loaded. */
.lazyload {
  color: transparent;
}

/* Remove (inline) gap under image blocks. */
.block-inline-blockimage .content {
  display: flex;
  justify-content: center;
}

/* Make CKEditor text align buttons work properly for image captions. */
.block-inline-blockimage .field--name-field-caption {
  text-align: initial;
  width: 100%;
}

.image-style-full-width,
.image-style-full-width div,
.image-style-full-width img,
.image-style-full-width a.block-image-link {
  width: 100%;
}

/* Image effects */
.wildfire-grayscale img {
  filter: grayscale(1);
}

.wildfire-sepia img {
  filter: sepia(1);
}

.wildfire-semitransparent img,
.wildfire-semitransparent .media--switch img.media__element {
  opacity: 0.4;
}

.wildfire-rounded-corners .field--name-field-image,
.block-inline-blockimage-with-text .iwt-block-panel.wildfire-rounded-corners,
.wildfire-rounded-corners .parallax-mirror {
  border-radius: var(--border-radius);
  overflow: hidden;
}

.wildfire-ellipse .field--name-field-image,
.block-inline-blockimage-with-text .iwt-block-panel.wildfire-ellipse,
.wildfire-ellipse .parallax-mirror {
  -webkit-clip-path: ellipse();
  clip-path: ellipse();
}

.wildfire-circle .field--name-field-image,
.block-inline-blockimage-with-text .iwt-block-panel.wildfire-circle,
.wildfire-circle .parallax-mirror {
  -webkit-clip-path: circle(closest-side);
  clip-path: circle(closest-side);
}

/* Slightly scale up the image and hide the overflow to produce smooth edges. */
.wildfire-blur .media--image {
  overflow: hidden;
}
.wildfire-blur img {
  filter: blur(5px);
  transform: scale(1.05);
}

/* Make sepia or grayscale and blur work together. */
.wildfire-grayscale.wildfire-blur img {
  filter: grayscale(1) blur(5px);
}
.wildfire-sepia.wildfire-blur img {
  filter: sepia(1) blur(5px);
}

/* Slick slideshows */
.slick .slide__caption {
  text-align: center;
}

.slick-slide .block .field--name-field-image img,
.layout--slideshow-section .block .field--name-field-image img {
  height: 652px;
  width: auto;
  /* When the screen gets narrow, shrink the images. Limit their height instead
  of their width, so they remain uniform in height (unless they are very wide).
  */
  max-height: 50vw;
  object-fit: contain;
}

/* Non-full-width Image with Text blocks placed in slideshows. Limit the width
of the entire layout block based on its image, so the text does not spill over
the edge of the image. */
.slick-slide .block-inline-blockimage-with-text .iwt-block-banner:not(.image-style-full-width),
.slick-slide .block-inline-blockimage-with-text .iwt-block-panel:not(.image-style-full-width) {
  width: max-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Full-width images in slideshows. Zoom and crop images to take up the entire
height and width of the slideshow block. */
.layout--slideshow-section .block .image-style-full-width .field--name-field-image img {
  width: 100%;
  object-fit: cover;
  /* For slideshows, unset the min-height rule defined in the
  responsive_text_on_image CSS injector rule. All images in a slideshow must be
  able to shrink vertically so the left and right sides of the image do not get
  cropped. */
  min-height: unset;
}

/* Fix for Slick slideshows growing to millions of pixels wide when placed in
multi-column layout sections. https://github.com/kenwheeler/slick/issues/982 */
.layout,
.layout__region {
  min-width: 0;
}

/* Styles for blocks that support configurable element positioning, for example,
image captions. Currently only applies to image blocks. */
.block-inline-block .flex {
  display: flex;
  align-items: center;
}

/* Display block fields vertically in order. */
.block-inline-block .direction-bottom {
  flex-direction: column;
}

/* Display block fields vertically in reverse order. */
.block-inline-block .direction-top {
  flex-direction: column-reverse;
}

/* Change the box model of regions within layout sections to allow padding to be
added to them without messing up the column layout. */
.layout__region {
  box-sizing: border-box;
}

/* Override default styles for images. In layout blocks, they should not float
and have no margin. The blocks themselves take care of the placement of their
content. */
.node .layout .field--type-image {
  float: none;
  margin: 0;
}

/* Make the remote video block fill the container. Preserve 16:9 ratio */
.block-inline-blockremote-video .field--name-field-media-oembed-video {
  position: relative;
  display: block;
}
.block-inline-blockremote-video .field--name-field-media-oembed-video:after {
  content: '';
  display: block;
  padding-top: 56.3%;
}
.block-inline-blockremote-video iframe,
.block-inline-blockremote-video .cookies-fallback--wrap {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}

/* Override the above CSS for TikTok embeds to make them work on narrow screens.
They are portrait, not 16:9. Hardcoded height seems to work fine for now since
TikTok embeds are a fixed width. */
.block-inline-blockremote-video .field--name-field-media-oembed-video.oembed-tiktok {
  height: 780px;
}
.block-inline-blockremote-video .field--name-field-media-oembed-video.oembed-tiktok:after {
  content: unset;
}

/* Set the iframe background color to white for scripture, reader and dictionary apps */
.block-inline-blockscripture iframe,
.block-inline-blockreader iframe,
.block-inline-blockdictionary iframe {
  background: #eeeeee;
}

/* Set an aspect ratio for pdf and iframe containers */
.block-inline-blockpdf .field--name-field-media-pdf-file,
.block-inline-blockiframe .field--name-field-link {
  position: relative;
  display: block;
  margin: 0;
}
.block-inline-blockpdf .field--name-field-media-pdf-file::after,
.block-inline-blockiframe .field--name-field-link::after {
  padding-top: calc(141.7% - 40px + 32px); /* default ratio is 'portrait' */
  display: block;
  content: "";
}
.block-inline-blockpdf iframe,
.block-inline-blockiframe iframe {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}
/* Change the aspect ratio based on class. Do some calculations for pdf.js
40px for L&R margins, 32px for toolbar. */
.block-inline-blockpdf .portrait .field--name-field-media-pdf-file::after,
.block-inline-blockiframe .portrait .field--name-field-link::after {
  padding-top: 138%;
}
.block-inline-blockpdf .landscape .field--name-field-media-pdf-file::after,
.block-inline-blockiframe .landscape .field--name-field-link::after {
  padding-top: 77%;
}
.block-inline-blockpdf .square .field--name-field-media-pdf-file::after,
.block-inline-blockiframe .square .field--name-field-link::after {
  padding-top: 100%;
}
.block-inline-blockpdf .fourthree .field--name-field-media-pdf-file::after,
.block-inline-blockiframe .fourthree .field--name-field-link::after {
  padding-top: 75%;
}
.block-inline-blockpdf .threetwo .field--name-field-media-pdf-file::after,
.block-inline-blockiframe .threetwo .field--name-field-link::after {
  padding-top: 66.7%;
}
.block-inline-blockpdf .sixteennine .field--name-field-media-pdf-file::after,
.block-inline-blockiframe .sixteennine .field--name-field-link::after {
  padding-top: 56.3%;
}

/* Allow media title fields to be placed on their own line above the rendered
media. Needed at least for Bootstrap theme. */
.media {
  flex-wrap: wrap;
}

.media .field--name-name {
  width: 100%;
}

/* Hide media titles when "show media title" is unchecked. */
.hide-block-content-title .field--name-name {
  display: none;
}

/* Always hide PDF media titles. They are present on the page so they can be
indexed by site search. */
.media--type-pdf .field--name-name {
  display: none;
}

/* Align media titles. Default is centered. */
.block-inline-blockaudio h3,
.block-inline-blockremote-video h3,
.block-inline-blockvideo h3 {
  text-align: center;
}
.media-title-left h3 {
  text-align: left;
}
.media-title-right h3 {
  text-align: right;
}

/* Display the media title above the player. */
.media-title-above .media {
  display: table;
  width: 100%;
}
.media-title-above .field--name-name {
  display: table-header-group;
}

/* Galleries. See gallery.js. */
.block-inline-blockgallery .field__items {
  position: relative;
}
.block-inline-blockgallery .field__item {
  position: absolute;
}
.block-inline-blockgallery .field__item img {
  width: 100%;
  height: auto;
}
.pswp__dynamic-caption {
  text-align: center;
}
.pswp__dynamic-caption--below {
  max-width: 100%;
  padding-bottom: 10px;
}

/* Do not display slideshow dots in mobile view. */
@media only screen and (max-width: 1080px) {
  .slick-dots {
    display: none !important;
  }
  .slick-dotted.slick-slider {
    margin-bottom: 0;
  }
}

/* Text block styles*/

.block-inline-blocktext blockquote {
  border-inline-start: 6px solid #ccc;
  padding-inline-start: 20px;
}