@layer libs {
    .component.usn_cmp_splitcomponent .item_block.usn_cmp_gallery {
        align-self: stretch !important;
    }
    
    .contact-details .item a {
        & > div {
            width: auto !important;
        }
        
        .info .text {
            padding-top: 0 !important;
        }
    }
}

@layer usn {
    body.content-underline-link-hover #site-content .item .text .dropdown-box-nav a:not(.btn):not(.nav-button-link) {
        &:active, &:hover, &:focus, &:focus-within, &.active {
            text-decoration: none !important;
        }
    }
    
    body.content-underline-link-hover #site-content .item a:not(.btn):not(.nav-button-link).heading-no-underline, 
    body.content-underline-link-hover #site-content .item a:not(.btn):not(.nav-button-link)[rel*="heading-no-underline"] {
        .heading {
            text-decoration: none !important;
        }
        
        &:hover, &:focus, &.active, &:active, &:focus-within {
            .heading {
                text-decoration: none !important;
            }
        }
    }
    
    .usn_cmp_accordiontab {
        .tabs {
            .tab {
                &.respect-c7 {
                    .nav-button-link.active {
                        color: rgba(var(--c8-text), 1) !important;
                        
                        &:hover {
                            color: rgba(var(--c8-text), 1) !important;
                        }
                    }
                }
            }
        }
    }
    
    #site-footer {
        .footer-item { 
            .usn_pod_image {
                &.footer-logo, &.footer-association-icon {
                    padding-bottom: 0 !important;
                }
            }
        }
    }
}

@layer custom {
    .color-1 { color: #b23567 !important; }
    .color-2 { color: #009fc4 !important; }
    .color-3 { color: #66b59f !important; }
    .color-4 { color: #58595b !important; }
    .color-white { color: #fff !important; }
    .background-1 { background-color: #b23567 !important; }
    .background-2 { background-color: #009fc4 !important; }
    .background-3 { background-color: #66b59f !important; }
    .background-4 { background-color: #58595b !important; }
    .background-white { background-color: #fff !important; }
    
    .swap-icon-position .btn {
        display: inline-flex;
        align-items: center;
        flex-direction: row-reverse;
        gap: 0.4em;
    }
    
    .no-external-icon .btn .usn_ion-md-open.after {
        display: none;
    }
    
    .transparent-background, [rel*="transparent-background"] {
        .btn {
            background-color: transparent !important;
            
            &:hover {
                background-color: inherit !important;
            }
        }
    }
    
    .transparent-hover, [rel*=transparent-hover] {
        .btn {
            &:hover {
                background-color: transparent !important;
            }
        }
    }
    
    .wide-button {
        .btn {
            padding-left: 2.5em;
            padding-right: 2.5em;
        }
    }
    
    .pad-background-image {
        .background-image {
            scale: 0.9;
        }
    }
    
    .auto-scrollbar {
        overflow: auto !important;
    }
    
    .component.usn_cmp_splitcomponent .item_block.usn_cmp_gallery:not(:has(div.component-outro)) div, 
    .component.usn_cmp_splitcomponent:not(:has(div.component-outro)) .item_block.usn_cmp_gallery a {
        height: 100%;
    }
    
    .component.usn_cmp_splitcomponent .item_block.usn_cmp_gallery img {
        object-fit: cover;
        height: 100%;
    }
    
    .logo-overlay {
        position: relative;
        --logo-overlay-size: 800px;
        
        &::after {
            background: url(/media/dudhjhlb/qrmp-logo-icon.svg);
            position: absolute;
            height: var(--logo-overlay-size);
            width: calc(((var(--logo-overlay-size) / 2) - 4px));
            background-size: cover;
            top: 100%;
            transform: translateY(-50%);
            mix-blend-mode: multiply;
            z-index: 1;
        }
        
        &.logo-overlay-right {
            &::after {
                right: 0;
            }
        }
        
        &.logo-overlay-left {
            &::after {
                left: 0;
                background-position: 100% 100%;
            }
        }
    }

    .pika-single {
        font-family: var(--body-typography_font-name);

        .pika-lendar {
            width: 320px !important;
            text-align: center;

            .pika-table {
                thead {
                    background-color: transparent;
                }

                th {
                    font-size: 14px;
                }

                td, th {
                    padding: 0;
                }
            }

            .pika-label {
                font-size: 16px;

                &::after {
                    content: " \25be";
                    pointer-events: none;
                }

                .pika-select {
                    width: 110%;
                }
            }

            .pika-button {
                text-align: center;
                padding: 10px 12px;
                font-size: 14px;

                &:hover {
                    background-color: rgba(var(--c2-bg-color1), 1);
                    color: rgba(var(--c2-text), 1);
                }
            }

            .is-selected .pika-button {
                background-color: rgba(var(--c2-highlight), 1);
                color: rgba(var(--c2-highlight-text), 1);
            }
        }
    }
    
    .form {
        .input-group {
            border: var(--form-field-border-width) solid rgba(var(--base-borders), 1);
        
            .input-group-text {
                border-radius: 0;
                background: rgba(var(--c2-bg-color1), 1);
                font-size: 1.2rem;
            }

            .form-control {
                border: none;
            }
        }
    }
    
    .repeatable.accordion {
        border-bottom: 2px solid rgba(var(--c5-borders), 1);
    
        .tab {
            border-top: 2px solid rgba(var(--c5-borders), 1);
            clear:both;
            
            .nav-link {
                border: 0;
                font-size: 1.8rem;
                font-weight: 700;
                padding: 1.2rem .8rem;
                
                &:not(.collapsed) {
                    &::after {
                        content: "\f3d0";
                        transform: translateY(-50%) rotate(180deg);
                    }
                }
            }
        }
        
        .repeatable-content {
            border: 0;
            
            .text {
                padding: 0 .8rem 1.2rem .8rem;
            }    
        }
    }
    
    .tabbed-tables {
        .repeatable.tabbed {
            .repeatable-content {
                border: none;
            }
        }
    }

    .usn_cmp_accordiontab {
        .nav {
            justify-content: center;
        }
        
        .tabs {
            .nav-button-link {
                border-radius: 1000px !important;
                border: 3px solid rgba(var(--c7-bg-color1), 1) !important;
                background-color: rgba(var(--base-bg-color1), 1) !important;
                margin-bottom: var(--base-half-spacing) !important;
                padding-left: 22px !important;
                padding-right: 22px !important;
                text-align: center !important;
                text-wrap: balance;
                margin-left: 2.5px;
                margin-right: 2.5px;
                
                &::after {
                    content: none;
                }
                
                &:hover {
                    border: 3px solid rgba(var(--c8-bg-color1), 1) !important;
                }
                
                &.active {
                    color: rgba(var(--c8-text), 1) !important;
                    background-color: rgba(var(--c8-bg-color1), 1) !important;
                    border: 3px solid rgba(var(--c8-bg-color1), 1) !important;
                }
            }
        }
        
        .tab-content {
            padding-top: 0 !important;
            padding-bottom: var(--base-half-spacing) !important;
        }
    }

    #site-header {
        transition: all 0.5s;
        background: rgba(var(--header-bg-color1), 1);
    
        #logo {
            transition: all 0.5s;
                
            img[src*=svg] {
                transition: all 0.5s;
            }
        }
    
        .expand-header {
            span {
                height: 2px !important;
                
                &::before, &::after {
                    height: 2px !important;
                }
            }
            
            &.active span {
                &::before, &::after {
                    background-color: rgba(var(--main-navigation-link-active), 1);
                }
            }
        }
        
        nav.main {
            transition: all 0.5s;
            
            & > ul > li > span {
                & > a {
                    transition: all 0.5s;
                    
                    &:hover, &:active, &:focus, &:focus-within {
                        text-decoration: none;
                    }
                }
                
                &::after {
                    transition: all 0.5s;
                }
            }
        }
    }
    
    #site-content {
        overflow: hidden;
    }
    
    body:not(.homepage) {
        #site-header {
            box-shadow: var(--header-box-shadow_h) var(--header-box-shadow_v) var(--header-box-shadow_b) rgba(var(--true-black),var(--header-box-shadow_o));
        }
        
        .intro-banner .item .inner .info {
            padding-bottom: var(--base-spacing);
        }
    }
    
    .intro-banner {
        overflow: visible;
        
        .slick-list {
            overflow: visible;
        }
        
        .slides {
            .slick-dots {
                opacity: 1;
                transition: all .3s ease-in-out;
            }
            
            &:has(.dropdown-box-nav.open) {
                .slick-dots {
                    opacity: 0;
                    pointer-events: none;
                }
            }
        }
        
        &:has(.dropdown-box-nav.open) {
            .scroll-prompt {
                z-index: 0;
            }
        }
        
        .item {
            .image {
                &::after {
                    content: "";
                    position: absolute;
                    top: var(--bannerTextOverlay-top);
                    left: 0;
                    height: var(--bannerTextOverlay-height);
                    width: calc(var(--bannerTextOverlay-left) + var(--bannerTextOverlay-width) + 50px);
                    background: rgba(var(--c1-highlight), 1);
                    mix-blend-mode: multiply;
                    z-index: 1;
                }
            }
            
            .inner {
                .info {
                    top: 25px;
                    
                    .text {
                        h1 {
                            font-weight: 300;
                            font-size: clamp(36px, 7vw, 75px);
                            line-height: 1em;
                        }
                        
                        .intro {
                            font-size: 2.3em;
                            font-weight: 700;
                            margin-top: 1em;
                        }
                    }
                }
            }
        }
    }
        
    .dropdown-box-nav {
        max-width: calc(var(--component-max-width) / 3);
        width: 100%;
        font-weight: 700;
        font-size: 22px;
        position: relative;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        
        &.centered {
            margin-left: auto;
            margin-right: auto;
        }
        
        &.secondary {
            & > .dropdown-box {
                background: rgba(var(--c8-bg-color1), 1);
                color: #fff;
            }
            
            .selected-option {
                &::after {
                    filter: brightness(100) contrast(100);
                }
            }
        }
        
        & > .dropdown-box {
            background: #fff;
            color: rgba(var(--c7-text), 1);
        }
        
        .clear-filter {
            margin: 10px;
            text-align: center;
            text-transform: uppercase;
            font-size: 0.9em;
            cursor: pointer;
            position: relative;
            display: flex;
            
            &:hover {
                span {
                    background: #fff;
                    color: rgba(var(--c8-bg-color1), 1);
                }
            }
            
            span {
                position: relative;
                display: flex;
                margin: 0 auto;
                align-items: center;
                justify-content: center;
                padding: 8px 12px;
                background: rgba(var(--c2-bg-color1), 1);
                border: 1px solid rgba(var(--c8-bg-color1), 1);
                color: rgba(var(--c8-bg-color1), 1);
                transition: all .3s ease-in-out;
                
                &::before {
                    content: "";
                    background: url(/media/hxpdcmw0/cross-x.svg) no-repeat;
                    background-size: contain;
                    display: inline-block;
                    width: 20px;
                    height: 20px;
                    pointer-events: none;
                    position: relative;
                    margin-right: 8px;
                    filter: brightness(0) saturate(100%) invert(44%) sepia(86%) saturate(1641%) hue-rotate(158deg) brightness(91%) contrast(101%);
                    transition: all .3s ease-in-out;
                }
            }
            
        }
        
        .selected-option {
            margin: 0;
            padding: 0.6em 15px;
            cursor: pointer;
            font-size: 115%;
            position: relative;
            
            .display-container {
                width: 90%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            
            &::after {
                content: "";
                background: url(/media/4egna4bn/down_arrow.svg) no-repeat;
                background-size: contain;
                position: absolute;
                width: 30px;
                height: 20px;
                right: 15px;
                top: 50%;
                transform: translateY(-50%);
                pointer-events: none;
            }
        }
        
        ul {
            background: rgba(var(--c7-bg-color1), 1);
            position: absolute;
            left: 0;
            right: 0;
            z-index: 99999;
            
            .item {
                color: rgba(var(--c7-text), 1);
                padding: 0.6em 15px;
                display: block;
                transition-duration: 0.2s;
                
                &:hover, &:focus, &:active, &:focus-within {
                    background: rgba(var(--c7-highlight), 1);
                    text-decoration: none !important;
                }
            }
        }
    }
    
    .team {
        margin: calc(var(--base-spacing) * 2) calc(var(--base-spacing) * 4) 0;
        
        .item:nth-last-child(-n+3) {
            .team-member, .team-member-placeholder {
                border-bottom: none;
            }
        }
        
        .team-member {
            margin: 0 calc(var(--base-half-spacing) * 1.5);
            padding: calc(var(--base-spacing) * 1.5) 0;
            color: rgba(var(--base-text));
            height: 100%;
            border-bottom: 1px solid rgba(var(--base-borders), 1);
            opacity: 0;
            transition: all 0.3s ease-in-out;

            &.shown {
                opacity: 1;
            }
            
            a:hover, a:focus, a:active, a:focus-within, a.active {
                color: rgba(var(--base-text));
                    
                .member-image {
                    &:after {
                        opacity: .6;
                    }
                }
                
                .member-body {
                    color: rgba(var(--base-text));
                }
            }
            
            .team-member-inner {
                display: flex;
                flex-direction: column;
                justify-content: center;
                height: 100%;
            }
            
            .member-image {
                border-radius: 10000px;
                overflow: hidden;
                position: relative;
                flex: 0 0 auto;
                
                &::after {
                    content: "";
                    position: absolute;
                    inset: 0;
                    background: rgba(var(--c8-bg-color1), 1);
                    opacity: 0;
                    transition: all .3s ease-in-out;
                }
                
                img {
                    aspect-ratio: 1;
                    object-fit: cover;
                    filter: blur(0.5px) contrast(0.95);
                }
            }
            
            .member-body {
                color: rgba(var(--base-text));
                font-size: .9em;
                flex: 1 1 100%;
                padding-bottom: var(--base-half-spacing);
                
                h3 {
                    margin-bottom: .2em;
                }
                
                p.secondary-heading {
                    font-size: 1em;
                    text-wrap: balance;
                    text-transform: none;
                    padding-bottom: 1em;
                }
            }
            
            .member-link {
                flex: 0 0 auto;
            }            
        }

        .team-member-placeholder {
            margin: 0 calc(var(--base-half-spacing) * 1.5);
            padding: calc(var(--base-spacing) * 1.5) 0;
            border-bottom: 1px solid rgba(var(--base-borders), 1);
            opacity: 0.4;
            animation: pulse 3s linear infinite;
            
            &::before {
                content: "";
                width: 100%;
                aspect-ratio: 1;
                background: #ccc;
                display: block;
                border-radius: 10000px;
            }

            &::after {
                content: "";
                width: 100%;
                height: 200px;
                display: block;
                background: #ccc;
                margin-top: 50px;
                border-radius: 10000px;
            }
        }
    }
    
    #site-footer {
        .container {
            padding-top: var(--base-spacing);
        }
        
        .footer-logo {
            padding-bottom: 0 !important;
            
            img {
                scale: .65;
            }
        }
        
        .contact-details {
            font-size: 125%;
            
            .component-main {
                border: none;
            
                .item {
                    &:nth-child(odd) {
                        a {
                            justify-content: flex-start;
                        }
                    }
                    
                    &:last-child {
                        a {
                            border: none;    
                        }
                    }
                    
                    a {
                        display: flex;
                        flex-direction: row-reverse;
                        justify-content: flex-end;
                        gap: .5ch;
                        padding: 0 var(--base-half-spacing);
                        border-right-width: 2px;
                        border-bottom: none;
                        line-height: 1em;
                        
                        & > div {
                            display: flex;
                            align-items: center;
                        }
                        
                        .heading {
                            font-weight: 300;
                            font-size: 1em;
                            
                            & ~ i.icon {
                                display: none;
                            }
                        }
                        
                        .info {
                            .text {
                                
                            }
                            
                            .meta {
                                display: none;
                            }
                        }
                        
                        &:hover {
                            background: inherit;
                        }
                    }
                }
            }
        }
        
        .usn_pod_sociallinks {
            border-bottom: 1px solid #fff;
            margin-bottom: var(--base-spacing);
                
            .social {
                text-align: center;
            }
        }
        
        .footer-association-icon {
            .inner {
                display: flex;
                justify-content: center;
                align-items: center;
                
                img {
                    max-width: 150px;
                    max-height: 80px;
                    object-fit: contain;
                }
            }
        }
        
        .footer-navigation {
            padding-top: var(--base-spacing);
            text-align: center;
            
            li {
                line-height: 1em;
                font-weight: 300;
            }
            
            .copyright {
                padding-right: 16px;
                border-right: 1px solid #fff;
                display: inline-block;
            }
        }
    }
    
    .breadcrumb {
        line-height: 1em;
    }
    
    .usn_cmp_pods.dividing-rule {
        .item {
            border-bottom: 2px solid;
            
            .inner {
                padding: var(--base-half-spacing) var(--base-half-spacing) 0 0;
            }
            
            &:last-child {
                border-bottom: none;
            }
        }
    }
    
    @media (min-width: 576px) {
        .usn_cmp_pods.dividing-rule {
            .item {
                border-left: 2px solid;
                
                &:nth-child(odd) {
                    border-left: none;
                }
                
                &:nth-last-child(2) {
                    border-bottom: none;
                }
            }
        }
        
        .intro-banner .info {
            max-width: 75%;
            flex-basis: 75%;
        }
    }
    
    @media (min-width: 768px) {
        .container-align-left .info {
            margin-left: var(--base-spacing);
        }
            
        .container-align-right .info {
            margin-right: var(--base-spacing);
        }
    }
    
    @media (min-width: 992px) {
        .usn_cmp_pods.dividing-rule {
            .item, .item:nth-child(odd) {
                border-left: 2px solid;
                border-bottom: none;
                
                .inner {
                    padding: 0 var(--base-half-spacing);
                }
                
                &:first-child {
                    border-left: none;
                }
            }
        }
        
        .intro-banner {
            .item {
                &:not(.item_scale_banner) .background-image {
                    background-position: 100% -10%;
                }
            }
        }
    }
        
    @media (min-width: 1200px) {
        .intro-banner .info {
            max-width: calc(var(--banner-col_lg) / 1.5);
            flex-basis: calc(var(--banner-col_lg) / 1.5);
        }
    }
    
    @media (min-width: 1416px) {
        .intro-banner .info {
            max-width: calc(var(--banner-col_xl) / 2);
            flex-basis: calc(var(--banner-col_xl) / 2);
        }
        
        .logo-overlay {
            &::after {
                content: "";
            }
        }
        
        html.nav-down:not(.reached-top), html.nav-up:not(.reached-top) {
            #site-header {
                --large-header: 100px;
                --nav-main-height: 100px;
                --logo_lg-padding_top: 15px;
                --logo_lg-padding_bottom: 15px;
                height: 100px;
                
                nav.main {
                    & > ul {
                        & > li {
                            &:hover {
                                & > ul {
                                    top: var(--nav-main-height);
                                }
                            }
                        }
                    }
                }
            }
        
            body:not(.no-header):not(.header-11-lg):not(.header-12-lg):not(.header-15-lg):not(.header-16-lg) .sticky {
                --large-header: 100px;
            }
            
            .dropdown-box-nav-items {
                --large-header: 100px;
            }
        }
        
        body.transparent-header-lg:not(.no-header) .component.usn_cmp_banner .item.item_short-banner .info, 
        body.transparent-header-lg:not(.no-header) .component.usn_cmp_banner .item.item_medium-banner .info {
            padding-top: var(--base-spacing);
        }
        
        html {
            body {
                .intro-banner {
                    .item {
                        &:not(.item_scale_banner):not(.item_short-banner) .background-image {
                            /*background-position: 110% -40%;
                            background-size: 90%;*/
                            background-size: cover;
                        }
                        
                        &:not(.item_scale_banner).item_short-banner .background-image {
                            /*background-position: 100% 0%;
                            background-size: 100%;*/
                            background-size: cover;
                            
                            &::before {
                                width: 130%;
                                height: 130%;
                                left: 0;
                            }
                        }
                        
                        .background-image {
                            &::before {
                                content: "";
                                position: absolute;
                                background-image: url(/media/u2ultl0d/flair.svg);
                                background-size: contain;
                                background-repeat: no-repeat;
                                height: 100%;
                                width: 100%;
                                left: -170px;
                            }
                            
                            &::after {
                                width: calc(var(--bannerTextOverlay-left) + var(--bannerTextOverlay-width));
                            }
                        }
                        
                        .inner {
                            .info {
                                top: 75px;
                            }
                        }
                    }
                }
                
                #site-header {
                    nav.main {
                        & > ul {
                            & > li {
                                &:hover, &:active, &:focus, &:focus-within, &.active {
                                    & > span::before {
                                        height: 3px;
                                    }
                                }
                                
                                & > span {
                                    &::before {
                                        margin-top: 10px;
                                    }
                                }
                                
                                &:hover {
                                    & > ul {
                                        top: calc(var(--nav-main-height) - 1.2em);
                                        left: 20px;
                                        right: auto;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    
    @media (min-width: 1608px) { 
        html {
            body {
                #site-header {
                    nav.main {
                        & > ul {
                            & > li {
                                &:hover, &:active, &:focus, &:focus-within, &.active {
                                    & > span::before {
                                        width: calc(100% - 22px - 22px);
                                    }
                                }
                                
                                & > span {
                                    &::before {
                                        left: 22px;
                                    }
                                    
                                    & > a {
                                        padding: 0 22px;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    @keyframes pulse {
        0%, 100% { opacity: 0.4; }
        50% { opacity: 1; } 
    }
}