/* Public, filter-aware featured collection browser. */

#featuredCollectionsWrapper[hidden] {
    display: none !important;
}

#featuredCollectionsWrapper {
    box-sizing: border-box;
    width: auto;
    margin: 18px 10px 22px 10px;
    padding: 0px 0px 10px 0px;
    overflow: visible;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    background: rgba(255,255,255,0.025);
    box-shadow: inset 0px 1px 0px rgba(255,255,255,0.025), 0px 8px 22px rgba(0,0,0,0.16);
}

#featuredCollectionsHeader {
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    width: 100%;
    min-height: 64px;
    padding: 11px 14px 15px 14px;
    text-align: center;
    border: 0px;
    border-radius: 6px 6px 0px 0px;
    background: -moz-radial-gradient(ellipse at 50% 0%, rgba(125,166,207,0.18) 0%, rgba(125,166,207,0.05) 38%, rgba(0,0,0,0) 68%), -moz-linear-gradient(top, rgba(20,28,36,0.84) 0%, rgba(12,18,25,0.46) 62%, rgba(12,18,25,0) 100%);
    background: -webkit-radial-gradient(ellipse at 50% 0%, rgba(125,166,207,0.18) 0%, rgba(125,166,207,0.05) 38%, rgba(0,0,0,0) 68%), -webkit-linear-gradient(top, rgba(20,28,36,0.84) 0%, rgba(12,18,25,0.46) 62%, rgba(12,18,25,0) 100%);
    background: radial-gradient(ellipse at 50% 0%, rgba(125,166,207,0.18) 0%, rgba(125,166,207,0.05) 38%, rgba(0,0,0,0) 68%), linear-gradient(to bottom, rgba(20,28,36,0.84) 0%, rgba(12,18,25,0.46) 62%, rgba(12,18,25,0) 100%);
    box-shadow: inset 0px 1px 0px rgba(255,255,255,0.035);
}

#featuredCollectionsEyebrow {
    margin-bottom: 4px;
    color: #7f8d99;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 0.11em;
    line-height: 12px;
    text-transform: uppercase;
}

.featured-collections-title-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    min-width: 0px;
    min-height: 30px;
}

#featuredCollectionsGrid {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    box-sizing: border-box;
    width: 100%;
    min-height: 120px;
    padding: 0px;
    opacity: 1;
    -webkit-transition: opacity 140ms ease;
    -moz-transition: opacity 140ms ease;
    -o-transition: opacity 140ms ease;
    transition: opacity 140ms ease;
}

#featuredCollectionsWrapper.featured-collections-is-loading > #featuredCollectionsGrid {
    opacity: 0.84;
}

#featuredCollectionsGrid.featured-collections-grid-transition {
    will-change: height, opacity;
    -webkit-transition: height 240ms cubic-bezier(.22,.61,.36,1), opacity 170ms ease-out;
    -moz-transition: height 240ms cubic-bezier(.22,.61,.36,1), opacity 170ms ease-out;
    -o-transition: height 240ms cubic-bezier(.22,.61,.36,1), opacity 170ms ease-out;
    transition: height 240ms cubic-bezier(.22,.61,.36,1), opacity 170ms ease-out;
}

#featuredCollectionsGrid.featured-collections-grid-entering {
    opacity: 0.72;
}

#featuredCollectionsGrid.featured-collections-grid-entering.featured-collections-grid-entered {
    opacity: 1;
}

#featuredCollectionsGrid.featured-collections-grid-awaiting-media {
    overflow: hidden;
}

#featuredCollectionsGrid .featured-collection-game {
    position: relative;
    display: block;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    box-sizing: border-box;
    min-width: 0px;
    margin: 0px;
    text-align: center;
    -webkit-transform-origin: 50% 80%;
    -moz-transform-origin: 50% 80%;
    -o-transform-origin: 50% 80%;
    -ms-transform-origin: 50% 80%;
    transform-origin: 50% 80%;
}

#featuredCollectionsGrid .featured-collection-game:hover,
#featuredCollectionsGrid .featured-collection-game.ces-game-tooltip-origin-open {
    z-index: 12;
}

#featuredCollectionsGrid .gamelink {
    margin: 5px;
}

#featuredCollectionsGrid .gamelink .box {
    display: inline-block;
    position: relative;
    max-width: 100%;
    overflow: hidden;
    border-radius: 4px;
    background: rgba(255,255,255,0.04);
    box-shadow: 0px 7px 16px rgba(0,0,0,0.28), 0px 0px 0px 1px rgba(255,255,255,0.08);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}

#featuredCollectionsGrid .gamelink .box img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0px auto;
}

#featuredCollectionsPrevious {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    margin-right: 10px;
}

#featuredCollectionsName {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-flex: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    box-sizing: border-box;
    min-width: 0px;
    max-width: calc(100% - 96px);
    min-height: 28px;
    margin: 0px;
    padding: 3px 9px 3px 11px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 4px;
    outline: none;
    color: rgba(255,255,255,0.9);
    background: transparent;
    box-shadow: none;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    text-align: center;
    -webkit-transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, -webkit-transform 120ms ease;
    -moz-transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, -moz-transform 120ms ease;
    -o-transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, -o-transform 120ms ease;
    transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.featured-collections-name-text {
    display: block;
    min-width: 0px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1.1em;
}

.featured-collections-name-disclosure {
    display: block;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    margin-left: 6px;
    color: #9fb2c4;
    font-family: Arial, sans-serif;
    font-size: 10px;
    line-height: 1;
    -webkit-transition: color 120ms ease, -webkit-transform 120ms ease;
    -moz-transition: color 120ms ease, -moz-transform 120ms ease;
    -o-transition: color 120ms ease, -o-transform 120ms ease;
    transition: color 120ms ease, transform 120ms ease;
}

#featuredCollectionsName:hover,
#featuredCollectionsName.featured-collections-name-open {
    border-color: rgba(125,166,207,0.32);
    color: #ffffff;
    background: rgba(125,166,207,0.10);
    box-shadow: inset 0px 0px 0px 1px rgba(125,166,207,0.05), 0px 0px 0px 2px rgba(75,112,150,0.08);
}

#featuredCollectionsName:hover .featured-collections-name-disclosure,
#featuredCollectionsName.featured-collections-name-open .featured-collections-name-disclosure {
    color: #dbe9f6;
}

#featuredCollectionsName.featured-collections-name-open .featured-collections-name-disclosure {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

#featuredCollectionsName:focus {
    outline: 1px dotted rgba(255,255,255,0.84);
    outline-offset: 2px;
}

#featuredCollectionsName:focus:not(:focus-visible) {
    outline: none;
}

#featuredCollectionsName:focus-visible {
    border-color: rgba(125,166,207,0.48);
    outline: 1px dotted rgba(255,255,255,0.84);
    outline-offset: 2px;
    color: #ffffff;
    background: rgba(125,166,207,0.12);
    box-shadow: 0px 0px 0px 2px rgba(75,112,150,0.12);
}

#featuredCollectionsName:active:not(:disabled) {
    background: rgba(42,86,126,0.24);
    box-shadow: inset 0px 2px 4px rgba(0,0,0,0.34);
    -webkit-transform: translateY(1px);
    -moz-transform: translateY(1px);
    -o-transform: translateY(1px);
    -ms-transform: translateY(1px);
    transform: translateY(1px);
}

#featuredCollectionsName:disabled {
    cursor: default;
}

#featuredCollectionsName:disabled:hover {
    border-color: transparent;
    color: rgba(255,255,255,0.9);
    background: transparent;
    box-shadow: none;
}

#featuredCollectionsName:disabled .featured-collections-name-disclosure {
    display: none;
}


#featuredCollectionsMenu[hidden] {
    display: none !important;
}

#featuredCollectionsMenu {
    position: absolute;
    top: calc(100% - 7px);
    left: 50%;
    z-index: 52;
    box-sizing: border-box;
    width: 320px;
    min-width: 220px;
    max-width: calc(100% - 24px);
    max-height: 300px;
    padding: 6px;
    overflow-x: hidden;
    overflow-y: auto;
    color: #d8e2ec;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    text-align: center;
    border: 1px solid rgba(125,166,207,0.24);
    border-radius: 6px;
    background: rgba(8,13,19,0.98);
    background: -moz-linear-gradient(top, rgba(13,20,28,0.98) 0%, rgba(8,13,19,0.98) 100%);
    background: -webkit-linear-gradient(top, rgba(13,20,28,0.98) 0%, rgba(8,13,19,0.98) 100%);
    background: linear-gradient(to bottom, rgba(13,20,28,0.98) 0%, rgba(8,13,19,0.98) 100%);
    box-shadow: inset 0px 1px 0px rgba(255,255,255,0.06), 0px 12px 28px rgba(0,0,0,0.38), 0px 0px 0px 1px rgba(0,0,0,0.26);
    opacity: 0;
    pointer-events: none;
    -webkit-transform: translate(-50%, -6px) scale(.98);
    -moz-transform: translate(-50%, -6px) scale(.98);
    -o-transform: translate(-50%, -6px) scale(.98);
    -ms-transform: translate(-50%, -6px) scale(.98);
    transform: translate(-50%, -6px) scale(.98);
    -webkit-transform-origin: 50% 0%;
    -moz-transform-origin: 50% 0%;
    -o-transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-transition: opacity 130ms ease-out, -webkit-transform 130ms ease-out;
    -moz-transition: opacity 130ms ease-out, -moz-transform 130ms ease-out;
    -o-transition: opacity 130ms ease-out, -o-transform 130ms ease-out;
    transition: opacity 130ms ease-out, transform 130ms ease-out;
}

#featuredCollectionsMenu.featured-collections-menu-open {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: translate(-50%, 0px) scale(1);
    -moz-transform: translate(-50%, 0px) scale(1);
    -o-transform: translate(-50%, 0px) scale(1);
    -ms-transform: translate(-50%, 0px) scale(1);
    transform: translate(-50%, 0px) scale(1);
}

.featured-collections-menu-item {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: 34px;
    margin: 0px;
    padding: 8px 12px;
    cursor: pointer;
    border: 0px;
    border-radius: 4px;
    outline: none;
    color: #d8e2ec;
    background: transparent;
    box-shadow: none;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 18px;
    text-align: center;
    text-shadow: 1px 1px 2px #000;
    white-space: normal;
    -webkit-transition: color 120ms ease-in, background-color 120ms ease-in, box-shadow 120ms ease-in, -webkit-transform 120ms ease-in;
    -moz-transition: color 120ms ease-in, background-color 120ms ease-in, box-shadow 120ms ease-in, -moz-transform 120ms ease-in;
    -o-transition: color 120ms ease-in, background-color 120ms ease-in, box-shadow 120ms ease-in, -o-transform 120ms ease-in;
    transition: color 120ms ease-in, background-color 120ms ease-in, box-shadow 120ms ease-in, transform 120ms ease-in;
}

.featured-collections-menu-item + .featured-collections-menu-item {
    margin-top: 1px;
}

.featured-collections-menu-item:hover,
.featured-collections-menu-item:focus {
    color: #ffffff;
    background: rgba(125,166,207,0.14);
    box-shadow: inset 0px 0px 0px 1px rgba(125,166,207,0.14);
}

.featured-collections-menu-item:active {
    background: rgba(42,86,126,0.28);
    box-shadow: inset 0px 2px 4px rgba(0,0,0,0.34);
    -webkit-transform: translateY(1px);
    -moz-transform: translateY(1px);
    -o-transform: translateY(1px);
    -ms-transform: translateY(1px);
    transform: translateY(1px);
}

#featuredCollectionsNext {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    margin-left: 10px;
}

.featured-collections-nav {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    box-sizing: border-box;
    width: 28px;
    height: 28px;
    margin: 0px;
    padding: 0px;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 50%;
    outline: none;
    color: rgba(255,255,255,0.76);
    background: rgba(255,255,255,0.035);
    box-shadow: inset 0px 1px 0px rgba(255,255,255,0.04);
    font-family: Arial, sans-serif;
    font-size: 22px;
    font-weight: normal;
    line-height: 24px;
    text-align: center;
    -webkit-transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease, color 120ms ease, -webkit-transform 120ms ease;
    -moz-transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease, color 120ms ease, -moz-transform 120ms ease;
    -o-transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease, color 120ms ease, -o-transform 120ms ease;
    transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease, color 120ms ease, transform 120ms ease;
}

.featured-collections-nav:hover {
    border-color: rgba(125,166,207,0.48);
    color: #ffffff;
    background: rgba(81,97,112,0.46);
    box-shadow: inset 0px 1px 0px rgba(255,255,255,0.10), 0px 0px 0px 2px rgba(75,112,150,0.12);
}

.featured-collections-nav:focus {
    outline: 1px dotted rgba(255,255,255,0.84);
    outline-offset: 2px;
}

.featured-collections-nav:focus:not(:focus-visible) {
    outline: none;
}

.featured-collections-nav:focus-visible {
    border-color: rgba(125,166,207,0.54);
    outline: 1px dotted rgba(255,255,255,0.84);
    outline-offset: 2px;
    color: #ffffff;
    background: rgba(81,97,112,0.46);
    box-shadow: inset 0px 1px 0px rgba(255,255,255,0.10), 0px 0px 0px 2px rgba(75,112,150,0.16);
}

.featured-collections-nav:active {
    border-color: rgba(125,166,207,0.62);
    color: #ffffff;
    background: rgba(42,86,126,0.34);
    box-shadow: inset 0px 2px 4px rgba(0,0,0,0.40), inset 0px 1px 0px rgba(255,255,255,0.05);
    -webkit-transform: translateY(1px) scale(0.94);
    -moz-transform: translateY(1px) scale(0.94);
    -o-transform: translateY(1px) scale(0.94);
    -ms-transform: translateY(1px) scale(0.94);
    transform: translateY(1px) scale(0.94);
}

.featured-collections-nav[hidden] {
    display: none !important;
}

.featured-collections-nav:disabled {
    cursor: default;
    opacity: 0.36;
}

@media (max-width: 520px) {
    #featuredCollectionsWrapper {
        margin-top: 12px;
        margin-bottom: 16px;
    }

    #featuredCollectionsHeader {
        min-height: 60px;
        padding: 10px 8px 13px 8px;
    }

    #featuredCollectionsPrevious {
        margin-right: 7px;
    }

    #featuredCollectionsNext {
        margin-left: 7px;
    }

    #featuredCollectionsName {
        max-width: calc(100% - 82px);
        padding-right: 8px;
        padding-left: 9px;
        font-size: 13px;
    }

    #featuredCollectionsMenu {
        top: calc(100% - 5px);
        width: calc(100% - 16px);
        min-width: 0px;
        max-width: calc(100% - 16px);
        max-height: 260px;
    }

    .featured-collections-menu-item {
        min-height: 38px;
        padding-top: 9px;
        padding-bottom: 9px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .featured-collections-nav,
    #featuredCollectionsName,
    .featured-collections-name-disclosure,
    #featuredCollectionsMenu,
    .featured-collections-menu-item,
    #featuredCollectionsGrid,
    #featuredCollectionsGrid.featured-collections-grid-transition,
    #featuredCollectionsGrid .gamelink .box {
        -webkit-transition: none;
        -moz-transition: none;
        -o-transition: none;
        transition: none;
    }
}