.background-cover {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.background-contain {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

img {
    display: block;
    max-width: 100%;
}

.h-100 {
    height: 100%;
}

.w-100 {
    width: 100%;
}

.img-responsive {
    display: block;
    max-width: 100%;
}

.rounded-corners {
    border-radius: 1em;
}

.box-shadow {
    box-shadow: 0px 5px 10px rgba(0,0,0,0.25);
}

.divider {
    width:100%;
    height: 1px;

    &.divider--blue-gradient {
        background-image: linear-gradient(to right, var(--blue), var(--black));
    }
}

.bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

    .bg > video, .bg > img, .bg > span, .bg > figure, .bg > picture > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        display: block;
        position: relative;
    }

.image-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bg-hex {
    position: absolute;
    top: -6rem;
    left: -6rem;
    width: 100%;
    transform: scale(1.4);
    transform-origin: top;
    @media (min-width:992px) {
        top: -10rem;
    }
    @media (min-width:1200px) {
        top: -16rem;
    }
    @media (min-width:1400px) {
        top: -19rem;
    }
    @media (min-width:1600px) {
        top: -25rem;
    }
    @media (min-width:2100px) {
        top: -28rem;
    }
}

.overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.nowrap {
    white-space: nowrap;
}

button.blank {
    padding: 0;
    border: 0;
    background: transparent;
    outline: 0;
}

.shape-mask {
    position: relative;
    padding-bottom: 95.327%;

    img, video {
        mask-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20214%20204%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M151.3%200C158.396%200%20165.018%203.82499%20168.576%209.97265L210.809%2092.0073C212.559%2095.0515%20213.488%2098.5009%20213.488%20101.98C213.488%20105.459%20212.559%20108.908%20210.809%20111.953L168.576%20193.987C165.008%20200.135%20158.396%20203.96%20151.3%20203.96H62.1882C55.0917%20203.96%2048.4697%20200.135%2044.9115%20193.987L2.6686%20111.953C0.929068%20108.928%200%20105.479%200%20101.98C0%2098.4812%200.929068%2095.0318%202.6686%2092.0073L44.9115%209.97265C48.4697%203.82499%2055.0917%200%2062.1882%200H151.3Z%22%20fill%3D%22%23041D35%22%2F%3E%3C%2Fsvg%3E");
        mask-repeat: no-repeat;
        mask-position: center;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.mask-orange {
    .shape-mask:after {
        content:"";
        mask-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20214%20204%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M151.3%200C158.396%200%20165.018%203.82499%20168.576%209.97265L210.809%2092.0073C212.559%2095.0515%20213.488%2098.5009%20213.488%20101.98C213.488%20105.459%20212.559%20108.908%20210.809%20111.953L168.576%20193.987C165.008%20200.135%20158.396%20203.96%20151.3%20203.96H62.1882C55.0917%20203.96%2048.4697%20200.135%2044.9115%20193.987L2.6686%20111.953C0.929068%20108.928%200%20105.479%200%20101.98C0%2098.4812%200.929068%2095.0318%202.6686%2092.0073L44.9115%209.97265C48.4697%203.82499%2055.0917%200%2062.1882%200H151.3Z%22%20fill%3D%22%23041D35%22%2F%3E%3C%2Fsvg%3E");
        mask-repeat: no-repeat;
        mask-position: center;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: var(--orange);
        mix-blend-mode: multiply;
    }
    img {
        filter: grayscale(100%) contrast(120%);
    }
}

.image-group {
    position: relative;

    .image-wrap {
        position: absolute;
    }

    &.set-three {
        padding-bottom: 108.413%;

        .image-wrap {
            width: 54.5%;
            &.one {
                top: 0;
                right: 0;
            }
            &.two {
                top: 50%;
                transform: translateY(-50%);
                left: 0;
            }
            &.three {
                right: 0;
                bottom: 0;
            }
        }
    }

    &.set-three-alt {
        padding-bottom: 108.413%;

        .image-wrap {
            width: 54.5%;
            &.one {
                top: 0;
                left: 0;
            }
            &.two {
                top: 50%;
                transform: translateY(-50%);
                right: 0;
            }
            &.three {
                left: 0;
                bottom: 0;
            }
        }
    }

    &.set-two {
        padding-bottom: 80.0475%;

        .image-wrap {
            width: 54.5%;
            &.one {
                top: 0;
                right: 0;
            }
            &.two {
                left: 0;
                bottom: 0;
            }
        }
    }

    &.set-two-alt {
        padding-bottom: 80.0475%;

        .image-wrap {
            width: 54.5%;
            &.one {
                top: 0;
                left: 0;
            }
            &.two {
                right: 0;
                bottom: 0;
            }
        }
    }

    &.set-two-uneven {
        padding-bottom: 82.369%;

        .image-wrap {
            &.one {
                top: 0;
                right: 0;
                width: 74%;
            }
            &.two {
                left: 0;
                bottom: 0;
                width: 36.5%;
            }
        }
    }

    &.set-two-uneven-alt {
        padding-bottom: 82.369%;

        .image-wrap {
            &.one {
                bottom: 0;
                right: 0;
                width: 74%;
            }
            &.two {
                top: 0;
                bottom: 0;
                width: 36.5%;
            }
        }
    }
}

.underline-style {
    strong {
        position: relative;
        display: inline-block;
        z-index: 2;

        &::after {
            content: '';
            position: absolute;
            bottom: -0.25rem;
            left: -0.5rem;
            right: -0.5rem;
            height: 0.75rem;
            width:100%;
            z-index: -1;
            background-image: url('../img/text-underline.svg');
            background-repeat: no-repeat;
            background-size: cover;
            /* Animation properties */
            clip-path: inset(0 100% 0 0);
        }
        &.is-visible::after {
            animation: drawUnderline 0.75s ease-out 0.2s forwards; 
        }
    }
}

@keyframes drawUnderline {
    to {
        clip-path: inset(0 0 0 0);
    }
}

/* List inline */
.list-inline, .list-inline-wrap ul {
    padding-left: 0;
    margin-left: -0.5rem;
    margin-right: -0.5rem;
    list-style: none;
    > li {
        display: inline-block;
        padding-right: 0.5rem;
        padding-left: 0.5rem;
        margin-top: 0;
        margin-bottom: 0;
    }

    @media (min-width:991px) {
        margin-left: -0.7rem;
        margin-right: -0.7rem; 
        > li {
            padding-right: 0.7rem;
            padding-left: 0.7rem;
        }
    }

    &.margin-xsmall {
        margin-left: -0.05rem;
        margin-right: -0.05rem;
        > li {
            padding-right: 0.05rem;
            padding-left: 0.05rem;
        }
    }

    &.margin-small {
        margin-left: -0.35rem;
        margin-right: -0.35rem;
        > li {
            padding-right: 0.35rem;
            padding-left: 0.35rem;
        }
    }

    &.margin-large {
        margin-left: -1rem;
        margin-right: -1rem;
        > li {
            padding-right: 1rem;
            padding-left: 1rem;
        }
    }

    &.add-divider {
        li {
            position: relative;
            &:after {
                content:"";
                position: absolute;
                top: 45%;
                transform: translateY(-50%);
                height: 65%;
                right: -2px;
                width: 2px;
                background-color: var(--medium-gray);
            }

            &:last-child {
                &:after {
                    display: none;
                }
            }
        }
    }
}

/* List underline */
.list-underline, .list-underline-wrap ul {
    li {
        border-bottom: 1px solid var(--medium-gray);
        padding-bottom: 0.75rem;
        margin-bottom: 0.75rem;
    }
}

/* Two column content */
.two-col, .two-col-list-wrap ul {
    @media (min-width:576px) {
        column-count: 2;
        column-gap: 1.5rem;

        li {
            break-inside: avoid;
        }
    }

    &.large-gap {
        @media (min-width:768px) {
            column-gap: 2.5rem;
        }
    }
}

/* Three column content */
.three-col, .three-col-list-wrap ul {
    @media (min-width:768px) {
        column-count: 3;
        column-gap: 1.5rem;

        li {
            break-inside: avoid;
        }
    }

    &.large-gap {
        @media (min-width:992px) {
            column-gap: 2.5rem;
        }
    }
}

/* Breadcrumbs */
.bc-list {
    padding: 0;
    margin-bottom: 1rem;
    list-style: none;

    li {
        display: inline-block;
        position: relative;
        padding: 0;
        padding-right: 1rem;
        margin-right: 0.3rem;
        color: var(--black);
        font-size: var(--fs-xs);

        @media (min-width:768px) {
            padding-right: 1.3rem;
            margin-right: 0.6rem;
        }
    
        a {
            color: inherit;
            text-decoration: none;
            &:hover {
                text-decoration: none;
                opacity: 0.8;
            }
        }

        &:after {
            content: ">";
            display: inline-block;
            position: absolute;
            top: 45%;
            right: 0;
            transform: translateY(-50%);
        }

        &:last-child {
            padding-right: 0;
            margin-right: 0;

            a {
                pointer-events: none;
            }

            &:after {
                display: none;
            }
        }
    }
}

.text-white .bc-list li {
    color: var(--white);
}

/* Pagination */
.pagination {
    li {
        a {
            font-family: var(--font-headline);
            font-weight: 700;
            padding: 0.25rem 0.55rem;
            border-radius: 0.4rem;
            line-height: 1.2;
            display: inline-block;
            &:hover {
                color: var(--dark-blue);
            }
        }
        &.active {
            a {
                background-color: var(--orange);
                color: var(--dark-blue);
            }
        }
    }

    a {
        text-decoration: none;
        color: var(--medium-gray);
        &:hover {
            color: var(--dark-blue);
        }
    }

    .pag-arrow-wrap a {
        line-height: 1;
        display: block;
    }

    i {
        font-size: var(--fs-xl);
    }
}

/* Split row with vertical divider */
.row-split > div {
    position: relative;
}

    .row-split > div:before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        width: 1px;
        background-color: var(--black);
    }

    .row-split.line-white > div:before {
        background-color: var(--white);
    }

    @media (max-width:767px) {
        .row-split > div:before {
            display: none;
        }
    }

.row-split > div:last-child:before {
    display: none;
}

/* Image crops */
.crop-image16x9 {
    position: relative;
    display: block;
    padding-bottom: 56.25%;
}

    .crop-image16x9 .play {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 100px;
    }

.crop-image60 {
    position: relative;
    display: block;
    padding-bottom: 60%;
}

.crop-image70 {
    position: relative;
    display: block;
    padding-bottom: 70%;
}

.crop-image95 {
    position: relative;
    display: block;
    padding-bottom: 100%;
}

.crop-image100 {
    position: relative;
    display: block;
    padding-bottom: 100%;
}

/* Move arrow on hover of parent element */ 
.arrow-move-hover {
    i {
        position: relative;
        right: 0;
        transition: all 0.25s;
    }
    &:hover {
        i {
            right: -5px;
        }
    }
}

.link-arrow-move-hover {
    &:hover {
        .link-arrow:before {
            right: -10px;
        }
    }
}

/* Move arrow on hover in continuous left to right motion */
.arrow-wrap {
    overflow: hidden;
}

.arrow-animate-hover i {
    position: relative;
}

.arrow-animate-hover:hover i {
    animation: moveArrow 1s linear infinite;
  }

  @keyframes moveArrow {
    0% {
      left: 0;
      opacity: 1;
    }
    
    /* Arrow moves across container */
    50% {
      left: 100%;
      opacity: 1;
    }
    
    /* Arrow becomes invisible after leaving container */
    50.001% {
      opacity: 0;
    }
    
    /* Keep arrow invisible while repositioning */
    59.999% {
      left: -100%;
      opacity: 0;
    }
    
    /* Make arrow visible again at the beginning of the next cycle */
    60% {
      left: -100%;
      opacity: 1;
    }

    100% {
        left: 0;
        opacity: 1;
      }
  }

/* Jump Nav */
.JumpNav {
    position: absolute;
    top: -200px;
    z-index: 500;
    color: #ffffff;
    background: #666666;
    padding: 5px;
}

    .JumpNav:focus {
        top: 0;
        left: 0;
        color: #ffffff;
    }

/* Moncur Bug */
.moncur-bug {
    position: relative;
    display: inline-block;
    width: 0.75em;
    top: .25em;

    img {
        opacity: 0.4;
        -webkit-transition: all .15s;
        transition: all .15s;
    }

    &:hover, &:focus, &:active {

        &:before {
            opacity: 1;
        }

        img {
            opacity: 0.8;
        }
    }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

.tag {
    background: var(--orange);
    border: none;
    border-radius: 0.4rem;
    display: inline-block;
    font-family: var(--font-headline);
    font-size: var(--fs-xs);
    line-height: 1;
    text-transform: uppercase;
    font-weight: 700;
    padding: 0.4rem;
    text-decoration: none;
    &.fs-base {
        font-size: var(--fs-base);
    }
}