@charset "UTF-8";
/*
 Theme Name: SJV Child Theme
 Theme URI: http://underscores.me/
 Author: Diocesan
 Author URI: http://diocesan.com
 Description: Custom child theme for Saint John Vianney.
 Template: evoli
 Version: 1.0.0
 License: GNU General Public License v3 or later, provided without any warranties—whether express or implied—and provided without any guarantees of fitness for a particular purpose or merchantability.
 License URI: https://www.gnu.org/licenses/gpl-3.0.html
 Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
 Text Domain: sjv
*/
@media screen and (min-width: 1280px) {
  .entry-content.limit-width {
    max-width: 64%;
  }
}
.hero {
  --hero-info-deco-color: var(--clr-quaternary);
  --hero-info-deco-position-top: 20%;
  --hero-info-deco-position-left: 0;
  --hero-info-deco-height: 6px;
  --hero-info-deco-width: 30vw;
  --hero-info-deco-circle-size: calc((3 * var(--hero-info-deco-height)) + 1px);
  height: var(--hero-height);
}
.hero .hero-slider .hero-slide .hero-info::before, .hero .hero-slider .hero-slide .hero-info::after {
  content: "";
  position: absolute;
  background: var(--hero-info-deco-color);
}
.hero .hero-slider .hero-slide .hero-info::before {
  top: var(--hero-info-deco-position-top);
  left: var(--hero-info-deco-position-left);
  height: var(--hero-info-deco-height);
  width: var(--hero-info-deco-width);
}
.hero .hero-slider .hero-slide .hero-info::after {
  border-radius: 50%;
  height: var(--hero-info-deco-circle-size);
  width: var(--hero-info-deco-circle-size);
  top: calc(var(--hero-info-deco-position-top) + 3px);
  left: calc(var(--hero-info-deco-width) - 3px);
  transform: translateY(-50%);
}
.hero .hero-slider .hero-slide .hero-info.animate-me {
  --hero-info-deco-width: 0;
}
.hero .hero-slider .hero-slide .hero-info.animate-me::before {
  transition: var(--tr-width);
}
.hero .hero-slider .hero-slide .hero-info.animate-me::after {
  left: var(--hero-info-deco-width);
  transition: var(--tr-left), var(--tr-transform) var(--animation-speed);
  transform: translateY(-50%) scale(0);
}
.hero .hero-slider .hero-slide .hero-info.animate-me.in-view {
  --hero-info-deco-width: 30vw;
}
.hero .hero-slider .hero-slide .hero-info.animate-me.in-view::after {
  transform: translateY(-50%) scale(1);
}
@media screen and (min-width: 768px) {
  .hero .hero-slider .hero-slide .hero-info.animate-me.in-view {
    --hero-info-deco-width: 17vw;
  }
}
@media screen and (min-width: 768px) {
  .hero {
    --hero-info-deco-position-top: 39%;
    --hero-info-deco-width: 17vw;
  }
}
@media screen and (min-width: 1280px) {
  .hero {
    --hero-info-background-color: transparent;
    --hero-title-max-width: 35%;
  }
  .hero .hero-slider .hero-slide .hero-info .hero-title {
    margin-left: 17%;
  }
}

.banner-container {
  --heading-offset-y: -35px;
  --slide-padding: 5rem 2rem 2rem 2rem;
  --deco-line-offset-x: 75%;
  --border-width: 2px;
}
.banner-container .slick-list {
  overflow-y: visible;
  padding-top: calc(var(--heading-offset-y) * -1) !important;
}
.banner-container .banner-item {
  border-top: none;
  position: relative;
}
.banner-container .banner-item .banner-item-heading {
  position: absolute;
  top: var(--heading-offset-y);
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
}
.banner-container .banner-item .banner-item-heading::after, .banner-container .banner-item .banner-item-heading::before {
  content: "";
  position: absolute;
  background: var(--clr-quaternary);
  height: var(--border-width);
  top: 50%;
}
.banner-container .banner-item .banner-item-heading::before {
  left: calc(var(--border-width) * -1);
  right: var(--deco-line-offset-x);
}
.banner-container .banner-item .banner-item-heading::after {
  right: calc(var(--border-width) * -1);
  left: var(--deco-line-offset-x);
}
.banner-container .banner-item .banner-item-content:first-child {
  margin-top: var(--heading-offset-y);
}
.banner-container .slick-arrow {
  background: transparent;
  border-color: white;
}
.banner-container .slick-arrow:hover {
  background: var(--clr-quaternary);
}
.banner-container .slick-arrow:hover::before {
  color: white;
}
@media screen and (min-width: 768px) {
  .banner-container {
    --deco-line-offset-x: 70%;
  }
}
@media screen and (min-width: 992px) {
  .banner-container {
    --deco-line-offset-x: 75%;
  }
}
@media screen and (min-width: 1280px) {
  .banner-container {
    --deco-line-offset-x: 80%;
  }
}

.calendar-container {
  --heading-position-left: 50%;
  --padding: 20px;
  border: 1px solid var(--clr-quaternary);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1607843137);
  margin-top: 4rem;
  padding-top: 2rem;
  position: relative;
}
.calendar-container .simcal-default-calendar-list {
  padding: var(--padding);
}
.calendar-container .calendar-heading {
  padding-inline: 2rem;
  background: white;
  display: inline-block;
  position: absolute;
  top: -50px;
  left: var(--heading-position-left);
  transform: translateX(-50%);
  white-space: nowrap;
}
.calendar-container .post-edit-link {
  display: none;
}
.calendar-container .view-all-link-wrapper {
  text-align: left;
  padding-left: var(--padding);
}
.calendar-container .view-all-link-wrapper a {
  color: var(--clr-quaternary);
}
.calendar-container .view-all-link-wrapper a:hover {
  text-decoration: none;
}
.calendar-container .simcal-events-list-container {
  gap: 1.5rem;
}
.calendar-container .simcal-event .simcal-event-details {
  position: relative;
  padding-bottom: 0.5rem;
  cursor: pointer;
}
.calendar-container .simcal-event .simcal-event-details > h5 {
  border-right: 1px solid var(--clr-quaternary);
  padding-right: 2rem;
  text-align: center;
  max-width: 70px;
}
.calendar-container .simcal-event .simcal-event-details::after {
  content: "";
  position: absolute;
  bottom: 0;
  height: 1px;
  width: 100%;
  transform: scale(0);
  background: var(--clr-primary);
  transition: transform 0.3s ease;
}
.calendar-container .simcal-event .simcal-event-details:hover::after {
  transform: scale(1);
}
.calendar-container .simcal-event .simcal-event-details a {
  text-decoration: none;
}
.calendar-container .simcal-event .simcal-event-details h5,
.calendar-container .simcal-event .simcal-event-details h6 {
  margin: 0;
}
.calendar-container .simcal-event .simcal-event-details .simcal-event-start {
  color: var(--clr-primary);
}
@media screen and (min-width: 768px) {
  .calendar-container {
    --heading-position-left: 25%;
  }
}
@media screen and (min-width: 992px) {
  .calendar-container {
    --heading-position-left: 15%;
  }
}
@media screen and (min-width: 1280px) {
  .calendar-container {
    --heading-position-left: 12%;
  }
}

.news-container {
  --thumbnail-height: 300px;
  --thumbnail-width: 88%;
  --deco-y: 5%;
  --deco-width: -10%;
  --heading-y: -1rem;
  position: relative;
  margin-bottom: 3rem;
}
.news-container .news-heading {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1607843137);
  margin-bottom: var(--heading-y);
  z-index: 1;
  position: relative;
}
.news-container .news-item {
  position: relative;
}
.news-container .news-item .news-item-thumbnail {
  height: var(--thumbnail-height);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: var(--thumbnail-width);
  margin: auto;
  position: relative;
}
.news-container .news-item .news-item-thumbnail::before, .news-container .news-item .news-item-thumbnail::after {
  content: "";
  position: absolute;
  top: var(--deco-y);
  bottom: var(--deco-y);
  background: var(--clr-tertiary);
}
.news-container .news-item .news-item-thumbnail::before {
  left: var(--deco-width);
  right: 100%;
}
.news-container .news-item .news-item-thumbnail::after {
  right: var(--deco-width);
  left: 100%;
}
.news-container .news-item .overlay {
  position: absolute;
  inset: 0;
  background: black;
}
.news-container .slider-controls {
  position: absolute;
  display: inline-flex;
  top: var(--thumbnail-height);
  left: 50%;
  transform: translateX(-50%);
}
.news-container .slider-controls .slick-arrow {
  position: relative;
  transform: none;
  background: transparent;
  border: none;
}
.news-container .slider-controls .slick-arrow::before {
  color: var(--grey);
  transition: var(--tr-color);
}
.news-container .slider-controls .slick-arrow:hover::before {
  color: var(--clr-quaternary);
}
.news-container .slider-controls .slick-arrow.slick-prev {
  left: 0;
}
.news-container .slider-controls .slick-arrow.slick-next {
  right: 0;
}
.news-container .slider-controls .slick-dots-wrapper {
  display: flex;
  align-items: center;
}
.news-container .slider-controls .slick-dots-wrapper .slick-dots {
  position: relative;
  display: flex;
  width: auto;
  flex-direction: row;
  bottom: auto;
}
.news-container .slider-controls .slick-dots-wrapper .slick-dots li button::before {
  font-size: 15px;
  color: var(--grey);
  opacity: 1;
  transition: var(--tr-color);
}
.news-container .slider-controls .slick-dots-wrapper .slick-dots li.slick-active button::before,
.news-container .slider-controls .slick-dots-wrapper .slick-dots li button:hover::before {
  color: var(--clr-quaternary);
}
.news-container .button-wrapper {
  text-align: center;
}
@media screen and (min-width: 768px) {
  .news-container {
    --thumbnail-height: 400px;
    --thumbnail-width: 50%;
  }
}
@media screen and (min-width: 1280px) {
  .news-container {
    --deco-y: -25px;
    --deco-width: -20rem;
    --heading-y: -3rem;
  }
  .news-container .slick-list {
    height: calc(var(--thumbnail-height) + 50px);
    overflow-y: visible;
  }
  .news-container .news-item {
    display: flex;
    flex-direction: row;
    padding-inline: 1rem;
  }
  .news-container .news-item .news-item-thumbnail {
    margin: auto 0;
  }
  .news-container .news-item .news-item-thumbnail::before {
    z-index: -1;
    right: 40%;
  }
  .news-container .news-item .news-item-thumbnail::after {
    display: none;
  }
  .news-container .news-item .news-item-content-wrapper {
    margin: auto 0;
    padding-left: 3rem;
  }
  .news-container .slider-controls {
    left: calc(25% + 2.5rem);
  }
}

footer {
  --margin-top-address: 2.6rem;
  --deco-height: 6px;
  --deco-circle-size: calc((var(--deco-height) * 3) + 1px);
  --deco-position-left: -10%;
  --deco-length: 50%;
}
footer .footer-address::before, footer .footer-address::after {
  content: "";
  position: absolute;
  background: var(--clr-quaternary);
}
footer .footer-address::before {
  width: calc(var(--deco-length) - var(--deco-position-left));
  top: calc(var(--margin-top-address) / -2);
  left: var(--deco-position-left);
  transform: translateY(-50%);
  height: var(--deco-height);
}
footer .footer-address::after {
  width: var(--deco-circle-size);
  height: var(--deco-circle-size);
  top: calc(var(--margin-top-address) / -2);
  left: var(--deco-length);
  transform: translateY(-50%);
  border-radius: 50%;
}
footer .footer-address.animate-me::before {
  --deco-length: 0;
  width: var(--deco-length);
  transition: var(--tr-width);
}
footer .footer-address.animate-me::after {
  left: calc(var(--deco-length) + var(--deco-position-left));
  transform: translateY(-50%) scale(0);
  transition: var(--tr-transform);
  transition-delay: var(--animation-speed);
}
footer .footer-address.animate-me.in-view::before {
  --deco-length: 50%;
}
@media screen and (min-width: 768px) {
  footer .footer-address.animate-me.in-view::before {
    --deco-length: 75%;
  }
}
footer .footer-address.animate-me.in-view::after {
  transform: translateY(-50%) scale(1);
}
@media screen and (min-width: 768px) {
  footer {
    --deco-length: 75%;
  }
}

.fixed-button-wrapper {
  position: -webkit-sticky;
  position: sticky;
  bottom: 100px;
  left: 100%;
  text-align: right;
}
.fixed-button-wrapper .fixed-button {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  padding: 0.75rem 1rem 0.75rem 0.75rem;
  transition: padding 0.4s ease;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}
.fixed-button-wrapper .fixed-button .icon {
  font-size: 1.75rem;
}
.fixed-button-wrapper .fixed-button .icon,
.fixed-button-wrapper .fixed-button .text {
  transition: var(--tr-color);
}
.fixed-button-wrapper .fixed-button .text {
  font-size: var(--fs-500);
  font-weight: bold;
  font-family: var(--font-heading);
}
.fixed-button-wrapper .fixed-button:hover {
  padding-right: 1.5rem;
}

.entry-header.page-header {
  margin-bottom: 3rem;
}
.entry-header.page-header::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 0.75rem;
  background: var(--clr-quaternary);
}

body {
  overflow-x: hidden;
}/*# sourceMappingURL=style.css.map */