/**
 * MAIN.CSS
 *
 * Table of Contents:
 *
 * 1. Variables & Theming
 *    1.1 Color System
 *    1.2 Typography
 * 2. Global Styles
 *    2.1 Base Elements
 *    2.2 Layout Containers
 *    2.3 Buttons
 * 3. Components
 *    3.1 Header
 *        3.1.1 Header Top Bar
 *        3.1.2 Header Bottom / Navigation
 *        3.1.3 User Console & Dropdowns
 *    3.2 Search Components
 *    3.3 Hero Section
 *    3.4 Content Sections
 *    3.5 Image Grids & Cards
 *    3.6 Call-to-Action (CTA)
 *    3.7 Footer
 *        3.7.1 Footer Top
 *        3.7.2 Footer Bottom
 * 4. Views
 *    4.1 Account Page
 *    4.2 Search Results Page
 *    4.3 Collections
 *    4.4 Record Page
 *    4.5 Baskets
 *    4.6 News
 *    4.7 Subscriptions
 *    4.8 Media requests
 *    4.9 Developer page
 *    4.10 Audit Log page
 *    4.11 Login & Registration Pages
 * 5. Utilities & Helpers
 * 6. Media Queries
 */

/* ========================================
   1. VARIABLES & THEMING
   ======================================== */

/* 1.1 Color System */
:root {
    /* Brand Colors */
    --accent: #d64103;

    /* Spacing & Layout */

    /* Borders, Shadows & Effects */
    --border-radius-xs: 4px;
    --border-radius-s: 6px;
    --border-radius-m: 8px;
    --border-radius-l: 12px;
    --border-radius-xl: 16px;
    --border-radius-xxl: 24px;

    /* Transitions */
    --default-transition: all .2s ease-in-out;
}

:root.iw-theme-light {
    --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-elevated: 0 0 40px -1px rgba(100, 116, 139, .15), 0 0 30px -3px rgba(100, 116, 139, .18), 0 0 15px -4px rgba(100, 116, 139, .5);

    iw-theme-switcher {
        --iw-theme-switcher-bg-color: var(--base-500);
    }
}

:root.iw-theme-dark {
    --shadow:	 0 4px 6px -1px rgb(0 0 0 / 0.9), 0 2px 4px -2px rgb(0 0 0 / 0.6);
    --shadow-elevated: 0 0 40px -1px rgba(160, 160, 160, .11), 0 0 30px -3px rgba(160, 160, 160, .14), 0 0 15px -4px rgba(160, 160, 160, .5);

    .appIconChange-dropAreaImage {
        filter: invert(1) brightness(1.3);
    }
}

/* 1.2 Typography */
@font-face {
    font-family: 'Geist';
    src: url('./fonts/Geist.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* ========================================
   2. GLOBAL STYLES
   ======================================== */

/* 2.1 Base Elements */
html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--layer-bg);
    color: var(--layer-color);
    font-family: 'Geist', system-ui, sans-serif;
    font-weight: 400;
    overflow-x: hidden;
    -moz-osx-font-smoothing: grayscale;
}

#main-content {
    padding-block: .375rem;
}

body:not(#site-index) {
    #main-content {
        padding-inline: 1.5rem;
    }
}

.pageContainer {
    padding-block: .75rem 3rem;
}

.infoMessage {
    background-color: var(--base-0);
    border: var(--layer-border);
    border-radius: var(--border-radius-m);
    box-shadow: var(--shadow);

    &::before {
        border-start-start-radius: var(--border-radius-m);
        border-end-start-radius: var(--border-radius-m);
    }
}

iw-switch {
    --bg-checked: var(--color-accent);
}

.comment,
.login-wrap .formContainer,
.formContainer,
.clips-listItem,
.authorize_app,
.record-header,
.listViewSearchHit .resultRow,
.gridViewContainer .gridView-tile,
.card:not(.infoMessage, .card--subscriptionSets, .stripeListCard) {
    background-color: var(--layer-bg);
    border: var(--layer-border);
    border-radius: var(--border-radius-l);
    box-shadow: var(--shadow);
}

.formContainer {
    margin-block: .75rem;
}

.formHeader {
    background: transparent;
    color: inherit;
    padding-inline: 1.5rem;
    text-transform: uppercase;
}

.formFooter {
    border-end-start-radius: var(--border-radius-l);
    border-end-end-radius: var(--border-radius-l);
}

.leaflet-container,
.dropZone {
    border-radius: var(--border-radius-l);
}

.u-inputTxt,
.u-select,
.u-inputPwd,
.u-txtArea,
.u-date,
.formContainer--dynamic .multiselect-input,
.filterOptionsSection .u-date,
.filterOptionsSection .u-select,
.u-input {
    background-color: var(--base-50);
    border-radius: var(--border-radius-s);
    border-color: var(--base-250);
    color: var(--base-950);
}

.header-search-isActive {
    .iw-page,
    .footer {
        filter: blur(2px);
        opacity: .2;
        pointer-events: none;
    }
}

.tabViewer:not(.tabViewer--scroll) {

    .tabViewer-tabMenu {
        border-block-end: 1px solid var(--base-600);
    }

    .tabViewer-tab {
        background: transparent;

        &::after {
            background-color: var(--layer-color);
            content: '';
            height: 4px;
            inset-block-end: -2px;
            inset-inline-start: 0;
            position: absolute;
            transform: scale(0);
            transition: transform .3s ease-in-out;
            width: 100%;
        }

        &.active {
            border: none;
            &::after {
                transform: scale(1);
            }
        }

    }

    .tabViewer-tabContent {
        background-color:transparent;
    }
}

.pagination-listItemLink {
    color: var(--base-1000);
}

.pagination-listItem {

    &.selected,
    &.selected:hover {
        background-color: var(--color-accent);

        .pagination-listItemLink  {
            color: light-dark(var(--base-0), var(--base-1000));
        }
    }

    &:hover:not(.u-opacity, .selected) {
        background-color: var(--base-200);
    }
}

.cookiepolicy {
    background-color: var(--base-0);
    border-block-start-color: var(--base-250);
}

/* 2.2 Layout Containers */
.wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100vh;
}

.inner-wrapper {
    margin: 0 auto;
    max-width: 1920px;
    padding-inline: 1.5rem;
}

.iw-page {
    flex-grow: 1;
}

/* 2.3 Buttons */
.btn {
    background-color: var(--base-350);
    border-radius: var(--border-radius-xs);
    transition: var(--default-transition);
}

.btn:not(.btn--search, .iw-icon-search, .btn--searchView, .c-share-btn, .iw_tool_tip_link, .btn--mini) {
    padding-block: .75rem;
    padding-inline: 1.25rem;
}


.btn--main {
    background-color: var(--color-accent);
    color: light-dark(var(--base-0), var(--base-1000));
    font-weight: 600;
    text-transform: uppercase;

    &:hover {
        background-color: var(--color);
        color: var(--base-0);
    }
}

.u-link:not(.tabViewer-tab) {
    &:hover {
        color: var(--color-accent);
    }
}

.IWmenu_link {
    color: var(--base-1000);
}

.multiSelect-toolbar {
    .IWmenu_link {
        color: light-dark(var(--base-0), var(--base-1000));
    }
}

.multiSelect-selectionText .u-link,
.multiSelect-selectionText .u-link:hover,
.multiSelect-selectionText .u-link:focus {
    color: inherit;
}

.leaflet-container,
.swiper-slide,
.frames-imageGridItem {
    border-radius: var(--border-radius-xl);
    overflow: hidden;
}

.otd-scroll,
.otd-view-all,
.modal-input-extension,
.simple_acl_container input[type="checkbox"],
.simple_acl_container input[type="email"],
.advanced_acl_container input[type="checkbox"],
.advanced_acl_container input[type="text"],
.iwContext-frame-container iframe {
    /* We need to explicitly set this to avoid user agent styles being applied through color-scheme */
    color-scheme: light;
}

.otd-day {
    border-radius: var(--border-radius-m);
}

/* ========================================
   3. COMPONENTS
   ======================================== */

/* 3.1 Header */
.header {
    inset-block-start: 0;
    position: sticky;
    /* Need higher z-index than the search results to stay on top when the search is active */
    z-index: 400;

    &::before {
        background-color: var(--bg-color);
        content: '';
        display: block;
        height: 100%;
        opacity: .97;
        position: absolute;
        width: 100%;
        z-index: -1;
    }

    .u-link {
        text-decoration: none;
    }
}

.header.morph {
    box-shadow: 0 0 8px rgba(0, 0, 0, .15);

    .header__top {
        max-height: 0;
        opacity: 0;
    }
}

/* 3.1.1 Header Top Bar */
.header__top {
    align-items: center;
    border-block-end: 1px solid;
    border-color: light-dark(var(--base-150), var(--base-250));
    color: var(--base-550);
    display: flex;
    justify-content: space-between;
    max-height: 100px;
    opacity: 1;
    overflow: hidden;
    padding-block: .375rem;
    transition: max-height 0.25s ease-out, opacity 0.25s ease-out, padding 0.25s ease-out;

    p {
        margin-block-end: 0;
    }

    .u-link {
        color: var(--font-color-light);
        cursor: pointer;
        font-weight: 500;
    }
}

.header__topActions {
    align-items: center;
    display: flex;
    gap: .75rem;

    .iw_instance_container {
        line-height: 1;
    }
}

.contextMenu--langSwitch .IWmenu_link {
    visibility: hidden;
    width: 1px;
}

/* 3.1.2 Header Bottom / Navigation */
.header__bottom {
    align-items: center;
    display: flex;
    padding-block: .375rem .75rem;
    min-height: 82px;

    .search-form-inner {
        display: flex;
    }

    &.search-isActive {
        .simpleTextSearch {
            max-width: 800px;
            opacity: 1;
            width: 100%;
        }

        .usr-console {
            flex-grow: 1;
        }

        #mainmenu {
            flex: 0 0 0px;
            margin-inline: 0;
            max-width: 0;
            opacity: 0;
            overflow: hidden;
            pointer-events: none;
            visibility: hidden;
        }
    }
}

#mainmenu {
    display: none;
    flex: 0 1 auto;
    margin-inline: 1.5rem;
    min-width: 0;
    max-width: 1000px;
    opacity: 1;
    transition: max-width .35s cubic-bezier(.4, 0, .2, 1),
                opacity .25s cubic-bezier(.4, 0, .2, 1),
                margin .35s cubic-bezier(.4, 0, .2, 1),
                flex .35s cubic-bezier(.4, 0, .2, 1),
                visibility .35s cubic-bezier(.4, 0, .2, 1);
    will-change: max-width, opacity, margin;
}

.header__logo {
    cursor: pointer;
    margin-inline-end: 1.5rem;
    max-width: 200px;
    opacity: 1;
    transition: max-width .3s ease-in-out, opacity .3s ease-in-out, visibility .3s ease-in-out;

    img {
        height: 50px;
    }
}

.footer__top ul,
.iw-menubar-list {
    margin-block-end: 0;

    .u-link {
        color: var(--base-550);
        font-weight: 500;
        text-decoration: none;
        transition: var(--default-transition);

        &:hover {
            color: var(--color-accent);
        }
    }
}

/* 3.1.3 User Console & Dropdowns */
.iwNotifier,
.iwSystemBasket {
    margin: 0;
    max-width: 100px;
    opacity: 1;
    transition: max-width .3s ease-in-out, opacity .3s ease-in-out, transform .3s ease-in-out, visibility .3s ease-in-out;
}

.iwNotifier-icon,
.iwSystemBasket-icon {
    font-size: 20px;
    opacity: 1;

    &:hover {
        color: var(--color-accent);
    }
}

/* Hide Notification icon animation */
.iwSystemBasket-processAnim,
.iwNotifier-processAnim {
    display: none;
}

.usr-console {
    align-items: center;
    color: var(--base-500);
    display: flex;
    flex-shrink: 0;
    gap: 1.5rem;
    margin-block: 0;
    margin-inline: auto 3rem;
    transition: var(--default-transition);

    .simpleTextSearch {
        border-radius: var(--border-radius-l);
        max-width: 0;
        opacity: 0;
        overflow: hidden;
        position: relative;
        transition: max-width .4s cubic-bezier(.4, 0, .2, 1),
                    opacity .3s cubic-bezier(.4, 0, .2, 1);
        will-change: max-width, opacity;
    }

    .avatar-container {
        margin: 0;
    }
}

.search-trigger {
    cursor: pointer;
    font-size: 20px;

    &:hover {
        color: var(--color-accent);
    }
}

.user-menu {
    cursor: pointer;
    flex-shrink: 0;
    max-width: 100px;
    opacity: 1;
    position: relative;
    transition: max-width .3s ease-in-out, opacity .3s ease-in-out, transform .3s ease-in-out, visibility .3s ease-in-out;

    .userIdentity-loggedInAs {
        position: relative;

        &::after {
            background-color: var(--base-150);
            content: '';
            height: 1px;
            inset-block-end: 0;
            inset-inline-start: 50%;
            position: absolute;
            transform: translateX(-50%);
            width: calc(100% - 2rem);
        }
    }

    .userIdentity-txt {
        margin-block-end: 0;
    }
}

.avatar-container img {
    border-radius: 50%;
}

.drop-down {
    background-color: var(--base-0);
    border: 1px solid var(--base-250);
    border-radius: var(--border-radius-s);
    inset-inline-end: 0;
    position: absolute;
    inset-block-start: 44px;
    visibility: hidden;
}

.drop-down.open {
    box-shadow: var(--shadow-elevated);
    cursor: default;
    display: block;
    min-width: 120px;
    max-width: 200px;
    visibility: visible;

    .iw-menubar-list {
        margin-block-end: 0;
        padding: 1rem;

        li {
            line-height: 1.1;
            margin: 0;
            overflow: hidden;
            padding-block-end: .75rem;
            text-align: end;
            text-overflow: ellipsis;
            width: 100%;

            &:last-child {
                padding-block-end: 0;
            }

            .u-link {
                font-size: 1rem;
                vertical-align: middle;
                white-space: nowrap;
            }
        }
    }

    &::before {
        border-style: solid;
        border-color: transparent transparent var(--base-0) transparent;
        border-width: 0 11px 10px 11px;
        content: '';
        height: 0;
        inset-inline-end: 5%;
        position: absolute;
        inset-block-start: -6px;
        width: 0;
    }
}

.moreNavigation-list {
    background-color: var(--base-0);
    border: 1px solid var(--base-250);
    border-radius: var(--border-radius-l);
    box-shadow: var(--shadow-elevated);
    overflow: hidden;
}

.cis_pop_over {
    border: 1px solid var(--base-250);
    border-radius: var(--border-radius-l);
    overflow: hidden;

    &.open {
        box-shadow: 0 0 12px light-dark(rgba(0, 0, 0, .3), rgba(0, 0, 0, .95));
    }

    #IWmenu_container {
        background-color: var(--base-0);
        border: 0;
        border-radius: var(--border-radius-l);

        ul {
            background-color: var(--base-0);
        }

        li {
            color: var(--base-550);

            a {
                color: var(--base-950)
            }
        }

        hr {
            background-color: var(--base-200);
        }
    }
}

/* 3.2 Search Components */
body:not(#search-results) {
    .search-form {
        position: relative;
    }

    .iwSpeech-input--attached {
        background-color: var(--base-0);
        border-radius: var(--border-radius-l);
        box-shadow: var(--shadow-elevated);
        color: var(--base-950);
        margin-block-end: 0;
        outline-color: var(--color-accent);
        outline-offset: 0;
        padding-inline-end: calc(3rem + 46px);
    }

    .iwSpeech-btn,
    .btn--search,
    .btn.iw-icon-search {
        inset-block-start: 50%;
        position: absolute;
        transform: translateY(-50%);
    }

    .iwSpeech-btn {
        inset-inline-end: calc(1rem + 42px + .75rem);
        margin: 0;
    }

    .btn--search,
    .btn.iw-icon-search {
        --size: 42px;

        border-radius: var(--border-radius-m);
        display: inline-block;
        height: var(--size);
        inset-inline-end: .5rem;
        margin: 0;
        width: var(--size);
    }

    .usr-console .btn--search {
        --size: 32px;

        align-items: center;
        display: flex;
        height: var(--size);
        inset-block-start: 50%;
        justify-content: center;
        transform: translateY(-50%);
        width: var(--size);
    }
}

/* 3.3 Hero Section */
.inner-wrapper--hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    padding-block: 5rem;

    .frames-imageGridItemImg {
        border-radius: var(--border-radius-l);
        overflow: hidden;
    }

    .hero__title {
        font-size: 4rem;
        font-weight: 900;
        line-height: 1.2;
        margin-block-end: 1.5rem;
        text-align: center;
        text-transform: uppercase;
    }

    .hero__subTitle {
        color: var(--base-600);
        font-size: 1.1rem;
        text-align: center;
    }

    .hero--accent {
        color: var(--color-accent);
    }

    .search-content {
        padding-inline: 0;
    }

    .frames-imageGridItem {
        width: 100%;
    }

    .records_grid_caption_wrapper {
        background-color: var(--bg-color);
        border-radius: var(--border-radius-l);
        inset-block-start: -3rem;
        inset-inline-start: 50%;
        line-height: 1;
        margin: 0;
        padding: .75rem 3rem;
        position: absolute;
        transform: translateX(-50%);
        z-index: 2;
    }

    .recordsGrid-title {
        color: var(--color-accent);
        font-size: 3.3rem;
        font-weight: 900;
        text-align: center;
        text-transform: uppercase;
    }

    .search-form {
        align-items: center;
    }

    .iwSpeech-input--attached {
        height: 4rem;
    }

    .grid-items .iw-grid-skeleton { grid-column: 1 / -1; }
}

.hero__search,
.hero__grid {
    flex: 1 0 calc(50% - 1.5rem);
}

.hero__search {
    margin-block-end: 6rem;
}

.hero__grid {
    position: relative;

    .frames-imageGridList{
        display: grid;
        gap: .75rem;
        grid-template-columns: 1fr;
    }
}

.records_grid_subtitle,
.recordsGrid-title {
    width: 100%;
}

.records_grid_subtitle {
    color: var(--font-color-light);
    font-size: 1.1rem;
}

/* Overflow made visible so box shadow doesn't get cut off */
.record_grid_collection .frames-imageGridList {
    overflow: visible;
    padding: 0;
}

.frames-imageGridItem {
    padding: 0;
}

.record_grid_collection {

    .frames-imageGridItem {
        --box-shadow: var(--shadow);
        box-shadow: var(--box-shadow);
    }

    /* Move calendar icon to parent and use has and empty on the date EL so we only show an icon if the date is populated.*/
    .records_grid_caption_wrapper.isLoading,
    .results-tile-date::before {
        display: none;
    }

    .results-tile-sub-info {
        gap: .375rem;
    }

    .results-tile-sub-info:has(.results-tile-date:not(:empty))::before {
        content: "\e905";
        font-size: 1rem;
        font-family: Imagenweb, sans-serif;
    }

    .media-type--resultsGrid {
        margin-inline-start: auto;
    }
}


.popular {
    color: var(--color-muted);
}

.popularLinks {
    display: flex;
    gap: .75rem;
    justify-content: center;
}

.popularLink {
    color: var(--color-subtle);
    font-weight: 600;
    text-decoration: none;
    transition: var(--default-transition);

    &:hover {
        color: var(--color-accent);
    }
}

/* 3.4 Content Sections */
.section:not(.clipsSection) {
    padding-block: 5rem;
    min-height: 50vh;
}

#site-index .section {
    overflow: clip;
}

#site-index .recordsGrid-title,
.section__header {
    font-size: 3rem;
    margin-block-end: .75rem;
}

.section__subHeader {
    color: var(--font-color-light);
    font-size: 1.1rem;
}

/* 3.5 Image Grids & Cards */
.frames-imageGridItemTxt {
    background-color: transparent;
    font-weight: 600;
    inset-block-end: .75rem;
    inset-block-start: unset;
    inset-inline-start: .75rem;
    margin-block-end: unset;
    max-width: calc(100% - 1.5rem);
    position: absolute;
    z-index: 2;
}

.framesGrid-title {
    margin-block-end: 0;
}

.image_grid {
    .iw_record_link {
        &::after {
            background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
            border-end-start-radius: var(--border-radius-l);
            border-end-end-radius: var(--border-radius-l);
            content: '';
            height: 40%;
            inset-block-end: 0;
            inset-inline-start: 0;
            position: absolute;
            width: 100%;
        }
    }
}

#site-index {
    section:not(.section--hero) {
        background-color: var(--base-0);

        .frames-imageGridList {
            display: grid;
            gap: .75rem;
            grid-template-columns: repeat(2, 1fr);
        }

        .emphasize-img .frames-imageGridItem:first-child,
        .frames-imageGridItem {
            overflow: hidden;
            width: auto;
        }

        .emphasize-img .frames-imageGridItem:first-child {
            grid-column: span 2;
            grid-row: span 2;
        }

        .frames-imageGridItemImg {
            border-radius: var(--border-radius-l);
        }

        .frames-imageGridItemTxt {
            background: none;
            font-weight: 600;
            inset-block-end: .75rem;
            inset-block-start: unset;
            inset-inline-start: .75rem;
            margin-block-end: unset;
            position: absolute;
            z-index: 2;
        }
    }

    .section--even {
        .frames-imageGridList {
            direction: rtl;

            .frames-imageGridItemTxt {
                direction: ltr;
            }
        }

        .image_grid:not(.emphasize-img) {
            .frames-imageGridList {
                direction: ltr;
            }
        }
    }

    section .record_grid_collection .frames-imageGridItemTxt {
        position: static;
    }
}

.emphasize-img .frames-imageGridItemTxt {
    background: transparent;
}

.recordsGrid-title:empty,
.listViewContainer .searchHitContainer::after {
    display: none;
}

/* 3.6 Call-to-Action (CTA) */
#site-index .section.section--cta {
    background-color: var(--bg-color);
    display: grid;
    place-items: center;
    text-align: center;

    .cta__title {
        font-size: 2.7rem;
        font-weight: 900;
        margin-block-end: 1.5rem;
    }

    .cta__subTitle {
        color: var(--font-color-light);
        font-size: 1.1rem;
        margin-block-end: 3rem;
    }

    .cta__title,
    .cta__subTitle {
        margin-inline: auto;
    }

    .inner-wrapper {
        max-width: 85%;
    }
}

/* 3.7 Footer */
.footer {
    background-color: var(--base-0);
    border-block-start: 1px solid var(--base-250);
    color: var(--base-650);

    ul {
        padding-inline-start: 0;
    }
}

/* 3.7.1 Footer Top */
.footer__top {
    column-gap: 3rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-block: 1.5rem;
    row-gap: .75rem;
    text-align: center;
}

.footer__logo {
    margin-block-end: 1.5rem;

    img {
        height: 50px;
    }
}

.footer__details {
    order: 3;
    width: 100%;
}

.iw_instance_container.footer_details {
    height: initial;
}

.footer__socialItems {
    display: flex;
    gap: .75rem;
    justify-content: center;
}

.socialItem {
    --size: 36px;
    background-color: var(--base-100);
    border-radius: var(--border-radius-s);
    color: var(--base-700);
    display: grid;
    height: var(--size);
    line-height: 1;
    place-items: center;
    text-decoration: none;
    transition: var(--default-transition);
    width: var(--size);

    &:hover {
        background-color: var(--base-950);
        color: var(--base-0);
    }
}

.footer__extra .dynamicWidgetZoneItem,
.footerTop__menus {
    display: flex;
    gap: 3rem;

    ul {
        display: flex;
        flex-direction: column;
        gap: .75rem;
    }
}

.footer_menu_title_1,
.footer_menu_title_2 {
    height: auto;
}

/* 3.7.2 Footer Bottom */
.footer__bottom {
    align-items: center;
    border-block-start: 1px solid var(--base-150);
    display: flex;
    flex-direction: column;
    flex-flow: column-reverse;
    gap: .75rem;
    padding-block: 1.5rem 1rem;
}

.copyright,
.footerBottom__menu {
    margin-block-end: 0;
}

.footerBottom__menu {
    text-align: end;
}

.footer-temp {
    opacity: 0;
}

/* ========================================
   4. VIEWS
   ======================================== */

/* 4.1 Account Page */
.card-titleWrap {
    border-block-end: 0;
}

.card-listItemBorder:before {
    border-color: var(--base-250);
}

.urAccWallet {
    background-color: var(--layer-bg);
    border: var(--layer-border);
    border-radius: var(--border-radius-m);
    margin-block-start: initial;
    padding: 1rem;
}

.urAccWallet-name {
    background-color: var(--color);
    border-radius: var(--border-radius-s);
    color: var(--base-0);
}

.urAcc-usrName {
    margin-block-end: 0;
    text-transform: uppercase;
}

.IWmenu_link--urAccUsrDetailsOptions {
    background-color: var(--color-accent);
    border: 0;
    border-radius: var(--border-radius-s);
    color: var(--base-0);

    &:hover {
        background-color: var(--base-950);
        color: var(--base-0);
    }
}

.userStuffDisplayList_wrapper {
    margin-block-end: .75rem;
}

.urAcc-cardHolderInner {
    padding: .375rem;
}

.card-listItem--urAcc {
    background-color: var(--layer-bg);
    border: var(--layer-border);
    border-radius: var(--border-radius-s);
    margin-inline: .75rem;

    &:active,
    &:hover {
        background-color: var(--layer-bg-hover);
    }
}

.card-listItemThumb {
    background-color: var(--base-200);
    border-radius: var(--border-radius-s);
}

.card-listWrap::-webkit-scrollbar-track,
.card-listWrap::-webkit-scrollbar-thumb {
    border-radius: 12px;
}

.card-listWrap::-webkit-scrollbar-track {
    background-color: var(--base-50);
}

.card-listWrap::-webkit-scrollbar-thumb {
    background-color: var(--base-450);
}

.clip .card-listItemCutIcon i,
.download .card-listItemCutIcon i {
    color: var(--base-0);
}

.modal-stretch-section--collectionItem .card-listItemCutIcon::after,
.clip .card-listItemCutIcon::after,
.download .card-listItemCutIcon::after {
    border-color: var(--base-750) transparent transparent transparent;
}

.urAccOrdersFilter-container {
    background-color: var(--base-50);
}

/* 4.2 Search Page */
.search--resultsPage {
    padding-block: .75rem;
    padding-inline: 0;
}

.multiSelect-toolbar,
.searchHit-multiSelectOverlay,
.searchHit--selected .searchHit-searchHitSelectTick {
    background-color: var(--color-accent);
}

.u-inputTxt.u-inputTxt--searchTerms {
    background-color: var(--base-0);
}

.search-form--resultsPage .btn--main {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}

.listView-imgBlock,
.searchFlexHit .b-lazy-bg,
.gridView-imageSection .b-lazy-bg {
    background-color: var(--layer-bg);
    border-radius: var(--border-radius-m);
}

.gridView-imageSection .b-lazy-bg {
    border-end-start-radius: 0;
    border-end-end-radius: 0;
}

.search-formIWSearchTerms {
    background-color: var(--base-0);
    border-radius: var(--border-radius-s);
}

.gridView-title {
    color: var(--base-900);
}

.gridView-detailsBottom {
    color: var(--base-550);
}

.search-contentInner--resultsPage {
    border-color: var(--base-250);
    border-radius: var(--border-radius-s);

    &.search_term_focussed {
        border-color: var(--color-accent);
    }
}

.search-results-wrapper {
    padding-inline: 0;
}

.filterOptionsSection:has(.u-select) .filter::after {
    background-color: var(--base-50);
}

.searchState-container {
    border-radius: var(--border-radius-s);
}

.btn--searchFilter {
    border-radius: var(--border-radius-s);

    &.active {
        border-end-end-radius: 0;
        border-end-start-radius: 0;
    }
}

.search-views {
    .btn {
        background: transparent;
        color: var(--color);

        &:hover {
            background-color: var(--color);
            color: var(--base-0);
        }

        &.active {
            background-color: var(--color-accent);
            border-radius: var(--border-radius-xs);
            color: var(--base-0);
            pointer-events: none;
        }
    }
}

.searchFilters {
    background-color: var(--layer-bg);
    border: 1px solid var(--base-250);
    border-end-end-radius: var(--border-radius-m);
    border-end-start-radius: var(--border-radius-m);
}

.gridViewContainer .gridView-tile {
    border-radius: var(--border-radius-m);
}

.listViewContainer {
    .searchHitContainer::after {
        display: none;
    }
}

.searchFlexHit {
    background-color: transparent;
}

.flexView-expandDetails,
.search-preview {
    background-color: light-dark(var(--base-950), var(--base-0));
    border-radius: var(--border-radius-m);
}

.flexImage {
    background-color: var(--neutral-10);
}

.flexView-thumbnailWrap::before {
    border: 1px solid var(--neutral-15);
}

.icon-dock::before {
    border-color: var(--base-950);
}
.icon-dock::after {
    background-color: var(--base-950);
}


/* 4.3 Collections */
.c-nav {
    background-color: var(--base-0);
    border-color: var(--base-250);
    box-shadow: var(--shadow);
}

.c-nav-item {
    color: var(--base-950);

    &.is-active {
        background-image: linear-gradient(91deg, var(--base-100) 71%, var(--base-0) 100%);
        color: var(--color-accent);

        &::before {
            color: var(--color-accent);
        }

        &::after {
            background-color: var(--color-accent);
            background-image: unset;
        }
    }
}

.c-collections {
    background: transparent;
    border-inline-start: 1px solid var(--base-250);
    border-inline-end: 1px solid var(--base-250);

    .results-items {
        padding-block-start: .75rem;
    }

    .list-item {
        background-color: var(--white);
        border-color: var(--neutral-20);
        border-radius: var(--border-radius-s);
        box-shadow: var(--shadow);
    }

    .searchHit-item,
    .results-tile,
    .overview-tile-item,
    .overview-tile {
        background-color: var(--layer-bg);
        border: var(--layer-border);
        box-shadow: var(--shadow);
    }

    .results-view-options {
        background-color: var(--base-0);
        border-color: var(--base-250);
        color: var(--base-950);
    }

    .c-context-menu.IWmenu_link {
        background-color: var(--color-accent);
    }

    .icon-btn::before {
        color: var(--base-600);
    }

    .icon-btn.is-active::before {
        color: var(--color-accent);
    }

    .results-tile-date::before,
    .list-item-date::before,
    .media-type::after,
    .isClip .media-type::before {
        color: var(--base-600);
    }
}

.c-header {
    .u-formInput-select::after {
        background-color: var(--base-50);
    }
}

.owner-icon.owner-icon--overview {
    background-color: var(--base-0);
    border-color: var(--base-0);
}

.c-search-input {
    background-color: var(--base-0);
    color: var(--base-950);
}

.c-search-bar {
    background-color: var(--base-0);
    background-image: none;
    border-color: var(--base-250);

    &::before {
        z-index: 1;
    }
}

#mycollections-index {
    .btn--searchView {
        color: var(--base-700);
    }
}

.c-nav-item::before {
    color: var(--base-600);
}
.icon-css--chevrons::after,
.icon-css--chevrons::before,
.cNav-isActive .icon-css--chevrons::after,
.cNav-isActive .icon-css--chevrons::before,
.c-nav-control-btn {
    border-color: var(--base-600);
}

.iPanel-controls {
    background-color: var(--base-0);
    border-color: var(--base-250);

    .icon-btn {
        border-color: var(--base-250);
    }
}

.c-collections--results .c-share-btn,
.c-collections--results .acl_update .btn--mini {
    background-color: var(--color-accent);
    font-weight: 400;
}

.iPanel-active {
    .iPanel,
    .iPanel__body,
    .iPanel-controls {
        background-color: var(--base-0);
        border-color: var(--base-250);
    }

    .iPanel-desc {
        background-color: var(--base-50);
        border: 1px solid var(--base-200);
        border-radius: var(--border-radius-s);
    }

    .owner-icon--iPanel {
        background-color: var(--color-accent);
        border-color: var(--base-0);
    }

    .results-view .list-item.is-active::before,
    .results-view .results-tile.is-active::before {
        color: var(--color-accent);
    }

    .preview-summaryValue {
        border-color: var(--base-500);
    }

    .iPanel__header::before {
        display: none;
    }

    .iPanel__date {
        border-color: var(--base-150);
    }

    .media-type--iPanel {
        background-color: var(--base-0);
        border-color: var(--base-450);

        &::before {
            background-color: var(--base-450);
        }

        &::after {
            color: var(--base-450);
        }
    }
}



/* 4.4 Record Page */
.record-header {
    margin-block-end: 1.5rem;
    padding: 1.5rem;
    position: relative;
}

.record-title {
    margin-block-start: .375rem;
}

.recordPageMenu {
    background-color: var(--color-accent);
    border: 0;
    border-radius: var(--border-radius-s);
    color: var(--layer-bg);

    &:hover {
        background-color: var(--base-950);
    }
}

.record-heading {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
}

.iw-key-help-link {
    inset-block-start: calc(1.5rem);
    inset-inline-end: calc(1.5rem + 1.5rem + 36px);
    position: absolute;
    transform: translateY(-8px);
}

.record-creator {
    align-items: center;
    display: flex;
    float: unset;
    gap: .75rem;
    margin: 0;

    .avatar-container {
        margin-block-end: 0;
        margin-inline: 0 1.5rem;
    }

    .created_by {
        margin-inline-end: .375rem;
        opacity: .6;
    }

    .usr_name {
        font-weight: 600;
    }

    .avatar-container,
    .created_by,
    .usr_name {
        float: unset;
        inset-block-start: unset;
    }
}

.record-createdByLink {
    align-items: center;
    display: flex;
    gap: .75rem;
}

.clipsListUL {
    background: transparent;
    border: 0;
    padding-block: 0;
    padding-inline: .75rem;
}

.clips-listItem {
    color: var(--base-950);
    margin-block-end: .75rem;

    &:hover {
        background-color: var(--layer-bg-hover);
    }
}

.clipsListLIActive {
    .time-container .u-link {
        color: var(--layer-color);
    }
}

.mediaTabbed {
    border-radius: var(--border-radius-l);
    box-shadow: var(--shadow);
    margin-inline: 0;
    max-width: unset;
}

.annotations-listItem,
.mediaTabbed.is-closed,
.mediaTabbed {
    border-color: var(--base-250);
}

.tabViewer--scroll {
    border-color: var(--base-150);

    .frames_grid_body li,
    .additionalMedia-listItem {
        border-color: var(--base-350);
        border-radius: var(--border-radius-m);
        overflow: hidden;
    }
}

.mediaTabbed-options,
.scrollTabs-btn,
.tabViewer--scroll .tabViewer-tab,
.tabs-collapse {
    background-color: var(--base-0);
}

.annotations-search,
.annotations-head {
    background-color: var(--base-100);
}

.annotations-listItem {

    &:hover {
        background-color: var(--base-150);
    }

    &.current {
        background-color: var(--color-accent);
        color: var(--base-900);

        .time_code {
            color: var(--base-1000);
        }
    }
}

.tabViewer-tab.active {
    color: var(--color-accent);
}

.tabs-collapse,
.scrollTabs-btn {
    color: var(--base-1000);
    border-color: var(--base-250);
}

.tabViewer-tab.active:hover,
.tabViewer-tab.active:focus,
.tabViewer-tab.active {
    background-color: transparent;
}

.tabs-collapse::after,
.scrollTabs-btn::after {
    background-color: var(--base-0);
}

.tabViewer--scroll .tabViewer-tabMenu > .tabViewer-tab.active::after {
    background-color: var(--color-accent);
}

.tabViewer--scroll .tabViewer-tabContent{
    background-color: var(--base-0);
    border-color: var(--base-250);
}

.mediaTabbed-options li a {
    color: var(--base-600);
    transition: var(--default-transition);
}

.mediaTabbed-options li a:hover {
    color: var(--base-800);
}

.mediaTabbed-options .active-option,
.mediaTabbed-options .active-option a {
    color: var(--color-accent);
}

.mediaTabbed-options .active-option::after {
    background-color: var(--color-accent);
}

.annotations-search-action::before,
.annotations_query.u-input {
    color: var(--base-950);
}

.comments-area {
    margin-block: .75rem;
}

.comment-overflow {
    padding: .75rem;
}

.comment {
    margin-inline: .75rem;
    padding: 1.5rem;
}

.comment-footer {
    padding-block-end: 0;
}

.comment-view-search.iwSlideSection--open {
    border-radius: var(--border-radius-m);
}

.grid {

    .mediaType-iconMultiple::before {
        background: linear-gradient(to right, light-dark(rgba(255, 255, 255, 1), rgba(12, 14, 15, 1)), light-dark(rgba(255, 255, 255, 0), rgba(12, 14, 15, 0)));
    }

    .record-view-action {
        background-color: var(--base-0);
    }
}

.record-view-action .icon-view {
    &::after {
        box-shadow: 0 0 0 1px light-dark(rgba(12, 14, 15, 1), rgba(255, 255, 255, 1));
    }

    &::before {
        color: light-dark(rgba(12, 14, 15, 1), rgba(255, 255, 255, 1));
    }
}

.tabViewer {

    .additionalMedia {
        background-color: var(--base-0);
        border-color: var(--base-0);
    }

    .additionalMedia-title {
        display: none;
    }
}

/* 4.5 Baskets */
.orders-headerEmail {
    text-align: start;

    &::before {
        display: none;
    }
}

.checkout-headerSummary,
.orders-headerFilters {
    background-color: var(--base-100);
    border-start-end-radius: var(--border-radius-l);
    border-end-end-radius: var(--border-radius-l);
}

.card--orderItem .mediaThumbnail,
.card--checkout .mediaThumbnail {
    border-radius: var(--border-radius-m);
}

/* 4.6 News */
.newsArticle,
.articlesList-newsArticle {
    background-color: var(--layer-bg);
    border: var(--layer-border);
    border-radius: var(--border-radius-s);
    box-shadow: var(--shadow);
}

.newsArticle-headline .u-link {
    color: var(--base-1000);
}

.newsArticle-date,
.articleSubheader-date {
    color: var(--layer-color-subtle);
}

.newsFullArticle-article {
    border-color: var(--layer-color-subtle);
}

.newsArticle-paginateButton {
    border: 0;
    border-radius: var(--border-radius-s);
}

/* 4.7 Subscriptions */

.credits-list,
.stripeListCard,
.card--subscriptionSets {
    border-radius: var(--border-radius-m);
}

.stripePaymentIntentsExistingCard.active,
.stripeListCard,
.stripeEl-container,
.credits-list {
    background-color: var(--base-50);
    border: 1px solid var(--base-250);
}

/* 4.8 Media requests */

.mRequests-filter,
.mRequests-content {
    background-color: var(--layer-bg);
    border: var(--layer-border);
    border-radius: var(--border-radius-l);
    box-shadow: var(--layer-shadow);
    max-width: unset;
    padding: .75rem;
}

.mRequests-content {
    max-width: unset;

    .tabViewer-tab {
        opacity: .5;
        font-weight: 600;
    }

    .tabViewer-tab:hover {
        opacity: 1;
    }

    .tabViewer-tabName--pending.active,
    .tabViewer-tabName--pending.active:hover,
    .tabViewer-tabName--pending.active:focus {
        color: var(--warning);
        opacity: 1;

        &::after {
            background-color: var(--warning);
        }
    }

    .tabViewer-tabName--approved.active,
    .tabViewer-tabName--approved.active:hover,
    .tabViewer-tabName--approved.active:focus {
        color: var(--success);
        opacity: 1;

        &::after {
            background-color: var(--success);
        }
    }

    .tabViewer-tabName--denied.active,
    .tabViewer-tabName--denied.active:hover,
    .tabViewer-tabName--denied.active:focus {
        color: var(--danger);
        opacity: 1;

        &::after {
            background-color: var(--danger);
        }
    }

    .tabViewer-tabName--all.active,
    .tabViewer-tabName--all.active:hover,
    .tabViewer-tabName--all.active:focus {
        color: var(--info);
        opacity: 1;

        &::after {
            background-color: var(--info);
        }
    }
}

.mRequests-filter {
    max-width: unset;
}

/* 4.9 Developer page */
.formContent-editApp {
    .tab {
        &::after {
            background-color: var(--layer-color);
            content: '';
            height: 3px;
            inset-block-start: 100%;
            inset-inline-start: 0;
            position: absolute;
            transform: scale(0);
            transition: transform .3s ease-in-out;
            width: 100%;
        }
    }

    .tab.active {
        background: none;
        position: relative;

        &::after {
            transform: scale(1);
        }
    }

    .nav_tabs > li > a {
        border: 0;
    }
}

.developerApp {
    background-color: var(--layer-bg);
    border: var(--layer-border);
    border-radius: var(--border-radius-m);
    color: var(--layer-color);
    padding: .75rem;
}

.appIconChange-dropArea {
    border-color: var(--base-250);
}

.appIconChange-browse {
    border-start-start-radius: 0;
    border-start-end-radius: 0 ;
}

/* 4.10 Audit Log page */

.iwAuditLog {
    background-color: var(--layer-bg);
    padding: 1.5rem;
    border-radius: var(--border-radius-l);
    box-shadow: var(--layer-shadow);
}

.iwAuditLog-logThumbImg {
    border-radius: var(--border-radius-m);

    img {
        border-radius: var(--border-radius-m);
    }

    &::before {
        background-color: var(--base-900);
        color: var(--base-0);
    }
}

.iwAuditLog-logActions {
    .btn--auditRestore {
        border-radius: var(--border-radius-xs);
    }
}

.iwAuditLog-logItem:first-of-type {
    border-block-start: 0;
}

.u-input--auditSearch {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

/* 4.11 Login & Registration Pages */
.custom-view .formHeader--login,
.custom-view .formContent--org,
.formFooter--logInUsr {
    background-color: var(--base-0);
}

.login-full.custom-view .login-wrap {
    box-shadow: none;
}

.login-tabs-wrapper {
    border: 1px solid var(--base-250);
    border-start-start-radius: var(--border-radius-m);
    border-start-end-radius: var(--border-radius-m);
    overflow: hidden;
}

.login-tab {
    background-color: var(--base-0);

    &.is-active::before {
        background-color: var(--color-accent);
    }
}

.custom-view {
    .formHeader--login {
        border-block-end-color: var(--base-250);
    }
    .formContainer--org {
        overflow: hidden;
    }
}

/* ========================================
   5. UTILITIES & HELPERS
   ======================================== */


/* ========================================
   6. MEDIA QUERIES (RESPONSIVE DESIGN)
   ======================================== */

/* landscape smartphones, iPhone480px */
@media all and (min-width:30em) {

}

/* portrait e-readers (Nook/Kindle), smaller tablets 600px or 640px wide. */
@media all and (min-width:36.063em) {
    body:not(#search-results) {
        .iwSpeech-btn,
        .btn.iw-icon-search {
            inset-block-end: initial;
        }
    }

    .header__logo {
        margin-inline-end: 2rem;
    }
}

/* Galaxy S5 */
@media all and (min-width:37.5em) {
    .hero__grid {
        .frames-imageGridList{
            grid-template-columns: repeat(2, 1fr);
        }
    }

    #site-index {
        & section:not(.section--hero) {
            .frames-imageGridList {
                grid-template-columns: repeat(3, 1fr);
            }
        }
    }
}

/*landscape e-readers, landscape 800x480 or 854x480 phones */
@media all and (min-width:44.063em) {

}

/* portrait iPad 768px --MAX WIDTH */
@media (max-width:48em) {
    .iw-slidemenu-open,
    .iw-slidemenu-open.right {
        color: var(--font-color-light);
        inset-block-start: 4.5rem;
        inset-inline-end: .75rem;
        max-width: 100px;
        opacity: 1;
        padding-block: .5rem;
        position: fixed;
        transition: max-width .3s ease-in-out, opacity .3s ease-in-out, transform .3s ease-in-out, visibility .3s ease-in-out, color .2s ease-in-out;
        z-index: 500;

        .iw-icon-menu {
            font-size: 24px;
        }

        &:hover {
            background: transparent;
            color: var(--color-accent);
        }
    }

    .header__logo {
        margin-inline-end: 3rem;
    }

    .wrapper:has(.header.morph) ~ .iw-slidemenu-open,
    body:has(.header.morph) .iw-slidemenu-open {
        inset-block-start: 2rem;
    }

    /* Mobile Menu - Top to Bottom Animation */
    .iw-slidemenu {
        animation: none;
        background-color: var(--bg-color);
        height: 100vh;
        inset-inline-start: 0;
        max-height: 100vh;
        min-width: 100%;
        overflow: hidden;
        inset-inline-end: 0;
        inset-block-start: 0;
        transform: translateY(-100%);
        transition: transform .3s cubic-bezier(.4, 0, .2, 1);
        width: 100%;
        will-change: transform;

        .u-link {
            color: var(--font-color-light);
            font-size: 1.2rem;
            font-weight: 600;

            &:hover {
                background: transparent;
                color: var(--color-accent);
            }
        }

        .u-link:active {
            background: transparent;
        }

        .menu {
            border-color: var(--hr-color);
        }
    }

    .iw-slidemenu.active {
        transform: translateY(0);
        overflow-y: auto;
    }

    .iw-slidemenu.left,
    .iw-slidemenu.right {
        inset-inline-start: 0;
        inset-inline-end: 0;
        animation: none;
        transform: translateY(-100%);
    }

    .iw-slidemenu.left.active,
    .iw-slidemenu.right.active {
        inset-inline-start: 0;
        inset-inline-end: 0;
        transform: translateY(0);
    }

    .iw-slidemenu-control .close {
        position: relative;
        inset-block-start: .75rem;
        inset-inline-start: calc(100vw - 3rem);
        background-color: transparent;
        color: var(--font-color-light);
        padding: .5rem;
        transition: var(--default-transition);
        z-index: 65006;
    }

    .iw-slidemenu-control .close .iw-icon-close {
        font-size: 24px;
    }

    .iw-slidemenu-control .close:hover,
    .iw-slidemenu-control .close:active {
        background-color: transparent;
        color: var(--color-accent);
    }

    .wrapper:has(.header.morph) ~ .iw-slidemenu .iw-slidemenu-control .close,
    body:has(.header.morph) .iw-slidemenu .iw-slidemenu-control .close {
        inset-block-start: 2rem;
    }

    .iw-slidemenu .contents {
        padding-block-start: 6rem;
        overflow-y: auto;
    }

    .iw-slidemenu-overlay {
        z-index: 65004;
    }

    .iw-slidemenu-overlay.active {
        display: block;
        opacity: 1;
        transition: opacity 0.3s ease;
    }
}

/* portrait iPad 768px */
@media (min-width:48em) {
    .inner-wrapper {
        padding-inline: 3rem;
    }

    #mainmenu {
        display: block;
    }

    .usr-console {
        margin-inline-end: 0;
    }

    .inner-wrapper--hero {
        .hero__title {
            font-size: 4rem;
        }

        .hero__title,
        .hero__subTitle,
        .search-content {
            margin: 0 auto;
            width: 90%;
        }

        .hero__subTitle {
            width: 70%;
        }
    }

    body:not(#site-index) {
        #main-content {
            margin-inline: auto;
            max-width: 1920px;
            padding-inline: 3rem;
        }
    }

    .card--urAccUsrDetails {
        flex-flow: row-reverse;
        gap: 3rem;
        padding: 1.5rem;

        .contextMenu {
            align-self: flex-start;
        }
    }

    .footer__top {
        flex-wrap: nowrap;
        justify-content: space-between;
        text-align: start;
    }

    .footer__details {
        order: initial;
        width: 40%;
    }

    .footer__socialItems {
        justify-content: flex-start;
    }

    .footer__extra {
        margin-inline-start: auto;
    }

    .footer__bottom {
        flex-direction: row;
        flex-flow: unset;

        .iw_instance_container:last-child {
            flex: 1 0 65%;
        }
    }
}

/* tablet, landscape iPad, lo-res laptops and desktops */
@media (min-width:56.25em) {
    #site-index {
        & section:not(.section--hero) {
            .frames-imageGridList {
                grid-template-columns: repeat(4, 1fr);
            }
        }
    }

    .inner-wrapper--hero {
        grid-template-columns: 45% 1fr;

        .hero__title {
            font-size: 3.4rem;
        }

        .hero__title,
        .hero__subTitle {
            margin-block-end: 3rem;
            margin-inline: 0;
            text-align: start;
            width: 100%;
        }

        .search-content {
            width: 100%;
        }

        .records_grid_caption_wrapper {
            inset-inline-start: -3rem;
            padding-inline: .75rem;
            transform: translateX(0);
        }
    }

    .hero__search {
        inset-block-start: -3rem;
        padding-inline: .75rem;
        position: relative;
    }

}

/* small desktops 1000px */
@media (min-width:62.5em) {

}

/* big landscape tablets, laptops, and desktops */
@media (min-width:68.75em) {
    .inner-wrapper--hero {
        .hero__title,
        .hero__subTitle {
            width: 90%;
        }
    }
}

/* custom 1 */
@media (min-width:80.25em) {
    .inner-wrapper--hero {
        .hero__title,
        .hero__subTitle {
            width: 80%;
        }
    }
}

/* custom 1.5 */
@media (min-width:92.25em) {
    .inner-wrapper--hero {
        .hero__title,
        .hero__subTitle {
            width: 65%;
        }

        .popular,
        .search-content {
            margin: 0;
            width: 85%;
        }
    }

    .footer__detailsText {
        width: 65%;
    }

    .cNav-isClosed .iPanel-active .results-tile,
    .iPanel-active .results-tile {
        width: calc(50% - 1.5rem);
    }
}

/* hi-res laptops and desktops */
@media (min-width:100.25em) {
    .formContainer {
        width: 50%;
    }
}

/* largest */
@media (min-width:117em) {}