/* poeple card */

.people-card {
    overflow: hidden;
    border: 1px solid var(--misc-grey-3);
}

.people-card img {
    filter: grayscale(0);
    transition: all 0.25s;
}

.people-card:hover img {
    filter: grayscale(1) blur(3px);
}

.people-card .people-info-overlay {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    transition:  0.25s;
}

.people-card .people-info-overlay:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    transition: all 0.25s;
    background-color: rgba(0, 85, 140, .85);
    backdrop-filter: grayscale(1) blur(3px);
}

.people-card:hover .people-info-overlay {
    height: 110% !important;
}

.people-card:hover .people-info-overlay:before {
    background-color: rgba(0, 85, 140, 1);
    backdrop-filter: grayscale(1) blur(0px);
    mix-blend-mode: multiply;
}

.people-card .people-info {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 15px;
}

.people-card .people-info-cta {
    opacity: 0;
    transition: opacity .25s;
}

.people-card:hover .people-info-cta {
    opacity: 1;
    transition: opacity .5s;
}

/* lists */

.list-container {
    
}

/*
.list-container .read-more {
    font-size: 14px;
    font-weight: 700;
}
*/

.list-container .read-more:after {
    width: 4px;
    height: 4px;
    right: -10px;
    margin-top: -2px;
}

.list-container > ul > li:last-child {
    display: none;
}

/* call outs */

.mod-call-out:not(.overflow-visible):not(.mod-border-semi) {
    overflow: hidden;
}

.mod-call-out .mod-inner {
    height: 100%;
}

/* header top */

.mod-call-out.mod-header-top .mod-header {
    margin-bottom: 0;
    padding: 15px 30px;
    color: var(--white);
}

.mod-call-out.mod-header-top .mod-inner {
    padding: 15px 30px;
    background-color: var(--misc-grey-4);
}

.mod-call-out.mod-header-top.mod-primary-blue .mod-header {
   background-color: var(--primary-blue);
}

.mod-call-out.mod-header-top.mod-secondary-orange .mod-header {
    background-color: var(--secondary-orange);
}

.mod-call-out.mod-header-top.mod-secondary-red .mod-header {
    background-color: var(--secondary-red);
}

.mod-call-out.mod-header-top.mod-secondary-purple .mod-header {
    background-color: var(--secondary-purple);
}

.mod-call-out.mod-header-top.mod-secondary-yellow .mod-header {
    background-color: var(--secondary-yellow);
}

.mod-call-out.mod-header-top.mod-secondary-green .mod-header {
    background-color: var(--secondary-green);
}

.mod-call-out.mod-header-top.mod-secondary-blue .mod-header {
    background-color: var(--secondary-blue);
}

.mod-call-out.mod-header-top.mod-secondary-turq .mod-header {
    background-color: var(--secondary-turq);
}

.mod-call-out.mod-header-top.mod-secondary-orange-light .mod-header {
    background-color: var(--secondary-orange-light);
}

.mod-call-out.mod-header-top.mod-secondary-gray-dark .mod-header {
    background-color: var(--secondary-grey-dark);
}

/* border top */

.mod-call-out.mod-border-top {
    background-color: var(--misc-grey-4);
    border-top: 5px solid transparent;
}

.mod-call-out.mod-border-top .mod-header {
    margin-bottom: 0;
    padding: 30px 30px 0 30px;
    background-color: var(--misc-grey-4);
}

.mod-call-out.mod-border-top .mod-inner {
    padding: 30px;
}

.mod-call-out.mod-border-top .mod-bold,
.mod-call-out.mod-border-top .mod-strong {
    font-size: 18px;
    font-weight: 700;   
}

.mod-call-out.mod-border-top.mod-primary-blue {
    border-top-color: var(--primary-blue);
}

.mod-call-out.mod-border-top.mod-primary-blue .mod-bold,
.mod-call-out.mod-border-top.mod-primary-blue .mod-strong {
    color: var(--primary-blue);
}

.mod-call-out.mod-border-top.mod-secondary-orange {
    border-top-color: var(--secondary-orange);
}

.mod-call-out.mod-border-top.mod-seoncdary-orange .mod-bold,
.mod-call-out.mod-border-top.mod-secondary-orange .mod-strong {
    color: var(--secondary-orange);
}

.mod-call-out.mod-border-top.mod-secondary-red {
    border-top-color: var(--secondary-red);
}

.mod-call-out.mod-border-top.mod-secondary-red .mod-bold,
.mod-call-out.mod-border-top.mod-secondary-red .mod-strong {
    color: var(--secondary-red);
}

.mod-call-out.mod-border-top.mod-secondary-purple {
    border-top-color: var(--secondary-purple);
}

.mod-call-out.mod-border-top.mod-secondary-purple .mod-bold,
.mod-call-out.mod-border-top.mod-secondary-purple .mod-strong {
    color: var(--secondary-purple);
}

.mod-call-out.mod-border-top.mod-secondary-yellow {
    border-top-color: var(--secondary-yellow);
}

.mod-call-out.mod-border-top.mod-secondary-yellow .mod-bold,
.mod-call-out.mod-border-top.mod-secondary-yellow .mod-strong {
    color: var(--secondary-yellow);
}

.mod-call-out.mod-border-top.mod-secondary-green {
    border-top-color: var(--secondary-green);
}

.mod-call-out.mod-border-top.mod-secondary-green .mod-bold,
.mod-call-out.mod-border-top.mod-secondary-green .mod-strong {
    color: var(--secondary-green);
}

.mod-call-out.mod-border-top.mod-secondary-blue {
    border-top-color: var(--secondary-blue);
}

.mod-call-out.mod-border-top.mod-secondary-blue .mod-bold,
.mod-call-out.mod-border-top.mod-secondary-blue .mod-strong {
    color: var(--secondary-blue);
}

.mod-call-out.mod-border-top.mod-secondary-turq {
    border-top-color: var(--secondary-turq);
}

.mod-call-out.mod-border-top.mod-secondary-turq .mod-bold,
.mod-call-out.mod-border-top.mod-secondary-turq .mod-strong {
    color: var(--secondary-turq);
}

.mod-calandut.mod-border-top.mod-secondary-orange-light {
    border-top-color: var(--secondary-orange-light);
}

.mod-call-out.mod-border-top.mod-secondary-orange-light .mod-bold,
.mod-call-out.mod-border-top.mod-secondary-orange-light .mod-strong {
    color: var(--secondary-orange-light);
}

.mod-call-out.mod-border-top.mod-secondary-grey-dark {
    border-top-color: var(--secondary-grey-dark);
}

.mod-call-out.mod-border-top.mod-secondary-grey-dark .mod-bold,
.mod-call-out.mod-border-top.mod-secondary-grey-dark .mod-strong {
    color: var(--secondary-grey-dark);
}

/* border top bottom */

.mod-call-out.mod-border-top-bottom {
    padding: 15px 0;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
    overflow: hidden;
}

.mod-call-out.mod-border-top-bottom .mod-header {
    display: none;
}

.mod-call-out.mod-border-top-bottom p {
    font-size: 24px;
    line-height: 140%;
}

.mod-call-out.mod-border-top-bottom p:last-of-type {
    margin-bottom: 5px;
}

.mod-call-out.mod-border-top-bottom .mod-author {
    float: right;
    font-weight: 700;
    text-transform: uppercase;
}

.mod-call-out.mod-border-top-bottom {
    border-top-color: currentColor;
    border-bottom-color: currentColor;
}

.mod-call-out.mod-border-top-bottom.mod-primary-blue {
    color: var(--primary-blue);
}

.mod-call-out.mod-border-top-bottom.mod-secondary-orange {
    color: var(--secondary-orange);
}

.mod-call-out.mod-border-top-bottom.mod-secondary-red {
    color: var(--secondary-red);
}

.mod-call-out.mod-border-top-bottom.mod-secondary-purple {
    color: var(--secondary-purple);
}

.mod-call-out.mod-border-top-bottom.mod-secondary-yellow {
    color: var(--secondary-yellow);
}

.mod-call-out.mod-border-top-bottom.mod-secondary-green {
    color: var(--secondary-green);
}

.mod-call-out.mod-border-top-bottom.mod-secondary-blue {
    color: var(--secondary-blue);
}

.mod-call-out.mod-border-top-bottom.mod-secondary-turq {
    color: var(--secondary-turq);
}

.mod-call-out.mod-border-top-bottom.mod-secondary-orange-light {
    color: var(--secondary-orange-light);
}

/* border semi */

.mod-call-out.mod-border-semi {
    padding: 15px 0;
}

.mod-call-out.mod-border-semi p {
    font-size: 24px;
    line-height: 140%;
}

.mod-call-out.mod-border-semi p:last-of-type {
    margin-bottom: 5px;
}

.mod-call-out.mod-border-semi .mod-outer:after {
    content: '';
    position: absolute;
    width: 175px;
    height: 4px;
    right: 0;
    bottom: -5px;
}

.mod-call-out.mod-border-semi .mod-inner:before {
    content: '';
    position: absolute;
    width: 4px;
    height: 50px;
    top: -15px;
    left: -20px;
}

.mod-call-out.mod-border-semi .mod-inner:after {
    content: '';
    position: absolute;
    width: 50px;
    height: 4px;
    top: -15px;
    left: -20px;
}

.mod-call-out.mod-border-semi .mod-inner:before,
.mod-call-out.mod-border-semi .mod-inner:after,
.mod-call-out.mod-border-semi .mod-outer:after {
    background-color: currentColor;
}

.mod-call-out.mod-border-semi .mod-author {
    color: currentColor;
}

.mod-call-out.mod-border-semi .mod-author:before {
    content: '\2014\00A0';
}

.mod-call-out.mod-border-semi.mod-primary-blue {
    color: var(--primary-blue);
}

.mod-call-out.mod-border-semi.mod-secondary-orange {
    color: var(--secondary-orange);
}

.mod-call-out.mod-border-semi.mod-secondary-red {
    color: var(--secondary-red);
}

.mod-call-out.mod-border-semi.mod-secondary-purple {
    color: var(--secondary-purple);
}

.mod-call-out.mod-border-semi.mod-secondary-yellow {
    color: var(--secondary-yellow);
}

.mod-call-out.mod-border-semi.mod-secondary-green {
    color: var(--secondary-green);
}

.mod-call-out.mod-border-semi.mod-secondary-blue {
    color: var(--secondary-blue);
}

.mod-call-out.mod-border-semi.mod-secondary-turq {
    color: var(--secondary-turq);
}

.mod-call-out.mod-border-semi.mod-secondary-orange-light {
    color: var(--secondary-orange-light);
}

/* image cards with text overlay */

.mod-img-card,
.mod-img-tile {
    display: grid;
    grid-auto-flow: row;
    gap: 30px;
    overflow: hidden;
}

.mod-img-card a,
.mod-img-tile a {
    display: block;
    color: var(--secondary-grey-dark);
    text-decoration: none;
    border-bottom: none;
    overflow: hidden;
}

.mod-img-card img,
.mod-img-tile img {
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%; /* defaults */
    transition: all .25s ease-in-out;
}

.mod-img-card > *:hover img,
.mod-img-tile > *:hover img {
    transform: scale(1.1);
}

/* modifiers */
.mod-img-card:not(.card-text-bg-white).card-img-border-radius-15 a:first-child {
    border-radius: 15px;
}

/* this is what american eagle uses */
.mod-img-card:not(.card-text-bg-white).card-img-border-radius-16 a:first-child {
    border-radius: 16px;
}

.mod-img-card.card-img-fs-24 a {
    font-size: 24px;
}
/* end modifiers */

.mod-img-card a span,
.mod-img-tile a span {
    display: inline-block;
    padding-top: 8px;
    font-size: 24px;
}

.mod-img-card.card-text-bg-white a:nth-of-type(2),
.mod-img-tile.tile-text-bg-white a:nth-of-type(2) {
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    font-weight: 500;
    background-color: white;
}

.mod-img-card.card-text-bg-grey a:nth-of-type(2),
.mod-img-tile.tile-text-bg-grey a:nth-of-type(2) {
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    font-weight: 500;
    background-color: var(--misc-grey-5);
}

.mod-img-card.card-text-bg-grey-light a:nth-of-type(2),
.mod-img-tile.tile-text-bg-grey-light a:nth-of-type(2) {
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    font-weight: 500;
    background-color: var(--misc-grey-1);
}

.mod-img-card.card-fade a:nth-of-type(2),
.mod-img-tile.tile-fade a:nth-of-type(2) {
    display: inline-block;
    position: absolute;
    padding: 15px;
    right: 0;
    bottom: 0;
    left: 0;
    color: var(--white);
    font-weight: 500;
    overflow: visible;
    z-index: 1;
}

.mod-img-card.card-fade a:nth-of-type(2):before,
.mod-img-tile.tile-fade a:nth-of-type(2):before {
    content: '';
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    height: 115%;
    background: rgb(0,0,0);
    background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 40%, rgba(0,0,0,0) 75%);
    z-index: -1;
}

.mod-img-card.card-format-1-1 img,
.mod-img-tile[data-tile-format="1.1"] img {
    max-height: 300px;
}

.mod-img-card.card-format-2-1,
.mod-img-tile[data-tile-format="2.1"] {
    grid-template-columns: repeat(2, 50%);
}

.mod-img-card.card-format-2-1.grid-fix,
.mod-img-tile[data-tile-format="2.1"].grid-fix {
    grid-template-columns: minmax(0, 1fr) 50%;
}

/* alternative to grid-fix 
.mod-img-card.card-format-2-1, 
.mod-img-tile[data-tile-format="2.1"] {
    display: flex;
}
*/

/* alternative to grid-fix */
.mod-img-card.card-format-2-1, 
.mod-img-tile[data-tile-format="2.1"] {
    grid-template-columns: repeat(2, 48%);
}

.mod-img-card.card-format-3-1,
.mod-img-tile[data-tile-format="3.1"] {
    grid-template-columns: repeat(6, 1fr);
}

.mod-img-card.card-format-3-1 > *,
.mod-img-tile[data-tile-format="3.1"] > * {
    grid-column: span 2;
}

.mod-img-card.card-format-3-1 > *:nth-child(1),
.mod-img-tile[data-tile-format="3.1"] > *:nth-child(1) {
    grid-row: span 2;
    grid-column: span 4;
}

.mod-img-card.card-format-3-2,
.mod-img-tile[data-tile-format="3.2"] {
    grid-template-columns: repeat(2, 1fr);
}

.mod-img-card.card-format-3-2 > *:nth-child(1),
.mod-img-tile[data-tile-format="3.2"] > *:nth-child(1) {
    grid-column: span 2;
}

.mod-img-card.card-format-3-2 > *:nth-child(1) img,
.mod-img-tile[data-tile-format="3.2"] > *:nth-child(1) img {
    max-height: 300px;
}

.mod-img-card.card-format-3-3,
.mod-img-tile[data-tile-format="3.3"] {
    grid-template-columns: repeat(3, 1fr);
}

.mod-img-card.card-format-3-4,
.mod-img-tile[data-tile-format="3.4"] {
    grid-template-rows: repeat(3, 1fr);
}

.mod-img-card.card-format-4-1,
.mod-img-tile[data-tile-format="4.1"] {
    grid-template-columns: 50% repeat(2, 1fr);
}

.mod-img-card.card-format-4-1 > *:first-child,
.mod-img-tile[data-tile-format="4.1"] > *:first-child {
    grid-row: span 2;
}

.mod-img-card.card-format-4-2,
.mod-img-tile[data-tile-format="4.2"] {
    grid-template-columns: repeat(3, 1fr);
}

.mod-img-card.card-format-4-2 > *:nth-child(1),
.mod-img-tile[data-tile-format="4.2"] > *:nth-child(1) {
    grid-column: span 3;
}

.mod-img-card.card-format-4-2 > *:nth-child(1) img,
.mod-img-tile[data-tile-format="4.2"] > *:nth-child(1) img {
    max-height: 300px;   
}

.mod-img-card.card-format-4-3,
.mod-img-tile[data-tile-format="4.3"] {
    grid-template-columns: repeat(4, 1fr);
}

.mod-img-card.card-format-5-1,
.mod-img-tile[data-tile-format="5.1"] {
    grid-template-columns: 50% repeat(2, 1fr);
}

.mod-img-card.card-format-5-1 > *:first-child,
.mod-img-tile[data-tile-format="5.1"] > *:first-child {
    grid-row: span 2;
}

.mod-img-card.card-format-5-2,
.mod-img-tile[data-tile-format="5.2"] {
    grid-template-columns: repeat(4, 1fr);
}

.mod-img-card.card-format-5-2 > *:nth-child(1),
.mod-img-tile[data-tile-format="5.2"] > *:nth-child(1) {
    grid-column: span 4;
}

.mod-img-card.card-format-5-2 > *:nth-child(1) img,
.mod-img-tile[data-tile-format="5.2"] > *:nth-child(1) img {
    max-height: 300px;   
}

.mod-img-card.card-format-5-3,
.mod-img-tile[data-tile-format="5.3"] {
    grid-template-columns: repeat(5, 1fr);
}

.mod-img-card.card-format-6-1,
.mod-img-tile[data-tile-format="6.1"] {
    grid-template-columns: repeat(5, 1fr);
}

.mod-img-card.card-format-6-1 > *:nth-child(1),
.mod-img-tile[data-tile-format="6.1"] > *:nth-child(1) {
    grid-column: span 5;
}

.mod-img-card.card-format-6-1 > *:nth-child(1) img,
.mod-img-tile[data-tile-format="6.1"] > *:nth-child(1) img {
    max-height: 300px;   
}

.mod-img-card.card-format-6-2,
.mod-img-tile[data-tile-format="6.2"] {
    grid-template-columns: repeat(3, 1fr);
}

.mod-img-card.card-format-6-3,
.mod-img-tile[data-tile-format="6.3"] {
    grid-template-columns: repeat(6, 1fr);
}

/* misc - todo:clean this up */
.mod-call-out.bg-white,
.mod-call-out.bg-grey-light {
    background-color: transparent;
}

.mod-call-out.bg-white .mod-inner,
.mod-call-out.bg-white .mod-header {
    background-color: var(--white) !important;
}

.mod-call-out.bg-greyght .mod-inner,
.mod-call-out.bg-grey-light .mod-header {
    background-color: var(--misc-grey-1) !important;
}

@media screen and (min-width: 669px) and (max-width: 868px) {
    
    .flex.direction-column-868 {
        flex-direction: column;
    }
    
    .mod-img-tile.columns-auto-868 {
        grid-template-columns: auto !important;
    }
    
    .mod-img-tile.columns-auto-868 > * {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
    }
}

@media screen and (min-width: 669px) and (max-width: 768px) {
    
    .mod-img-tile.columns-auto-768 {
        grid-template-columns: auto !important;
    }
    
    .mod-img-tile.columns-auto-768 > * {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
    }
}

@media screen and (max-width: 668px) {
    
    .mod-img-tile img {
        max-height: none !important;
    }
    
    .mod-img-tile {
      grid-template-columns: auto !important;
    }
    
    .mod-img-tile > * {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
    }
}

/* a11y slider */
.a11y-slider-container {
    position: relative;
    direction: ltr;
}

.a11y-slider {
    position: relative;
    overflow: hidden;
    -webkit-scroll-snap-type: x mandatory;
    -ms-scroll-snap-type: x mandatory;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-box-sizing :border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.a11y-slider::-webkit-scrollbar {
    width: 0;
    height:0;
}

.a11y-slider > * {
    scroll-snap-align: start;
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

.a11y-slider-sr-only {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
    text-align: center;
    font-family: inherit;
    font-size: 1em;
}

.a11y-slider-sr-only:focus {
    position: static;
    background: var(--black);
    color: var(--white);
    width: 100%;
    height: auto;
    margin: 0;
    clip: auto;
    padding: 10px;
}

.a11y-slider-hide {
    display: none;
}

.a11y-slider-scrolling {
    cursor: -webkit-grabbing;
    cursor: grabbing;
    -webkit-scroll-snap-type: none;
    -ms-scroll-snap-type: none;
    scroll-snap-type: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    scroll-behavior: auto;
}

.a11y-slider-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    margin: 30px 0;
    gap: 30px;
    padding: 0;
}

.a11y-slider-dots li {
    display: block;
    width: 15px;
    height: 15px;
    padding: 0;
    color: var(--primary-blue);
}

.a11y-slider-dots li button.active {
    background: var(--primary-blue);
}

.a11y-slider-dots li button {
    display: block;
    font-size: 0;
    text-indent: -9999px;
    border: 2px solid var(--primary-blue) !important;
    background: transparent;
    width: 100%;
    height: 100%;
    border-radius: 100%;
}