/* CSS for modal animations */
.modal.slide-in-right,
.modal.slide-in-left,
.modal.slide-out-left,
.modal.slide-out-right {
    transition: transform 0.2s ease-in-out;
}

.modal.slide-in-right {
    transform: translateX(100%);
}

.modal.slide-in-left {
    transform: translateX(-100%);
}

.modal.slide-out-left {
    transform: translateX(-100%);
}

.modal.slide-out-right {
    transform: translateX(100%);
}

.modal.show.slide-in-right,
.modal.show.slide-in-left {
    transform: none;
}

/* CSS for modal content */
.modal-content-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.modal-content-wrapper>div.mt-3 {
    margin-top: auto !important;
}

/* CSS for the leadership page */
.page-leadership #page-wrapper {
    background: #ecebee;
}

.page-leadership figure.figure.bg-white {
    z-index: 2;
    position: relative;
/*    max-width: 355px;*/
}

.page-leadership div#content::before {
    content: "";
    background-image: url(/wp-content/uploads/centerstone_icon_full_color_lg.svg);
    background-repeat: no-repeat;
    position: fixed;
    bottom: -5em;
    left: -3em;
    width: 35em;
    height: 35em;
    opacity: .1;
    z-index: 1;
}

.page-leadership footer#wrapper-footer-full {
    position: relative;
    z-index: 2;
}

.page-leadership .intro-heading {
    display: none;
}

.page-leadership #btn-back-to-top,
.page-leadership nav#pojo-a11y-toolbar {
    z-index: 5;
}

/* CSS for the info icon */
.info-icon-container {
    position: relative;
}

.info-icon {
    font-size: 0.8rem;
    color: #7b5c29;
    background-color: #f4b753;
    border-radius: 50%;
    padding: 4px;
    position: absolute;
    top: -25px;
    right: 0;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.6em;
    width: 1.6em;
}

figure .figure-caption h3 {
  height: 3rem;
}

/* CSS for wide modal */
.wide-modal {
    max-width: 80% !important;
}

@media screen and (max-width: 991px) {
    .wide-modal {
        max-width: 90% !important;
    }
}

@media screen and (max-width: 767px) {
    .wide-modal {
        max-width: 95% !important;
    }
}

@media screen and (max-width: 575px) {
    .wide-modal {
        max-width: 99% !important;
    }
}

/* CSS for adjusting modal height */
#leadership-wrapper .modal.modal-left-pane .modal-content,
#leadership-wrapper .modal.modal-right-pane .modal-content {
    min-height: auto !important;
}

.more-centerstone-leadership.mt-3 {
    z-index: 8;
    position: relative;
}