@charset "UTF-8";
@import url(https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;1,200;1,300;1,400;1,700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;1,200;1,300;1,400;1,700&display=swap);

.body-razer section.bo-temp {
    padding-bottom: 100px;
    font-family: Roboto;
    background: #000;
    max-width: 1920px;
    margin: 0 auto
}
#warranty section{
    padding-bottom: 0px;
}
#chroma-animation {
    overflow: hidden;
    margin-bottom: 100px;
    max-height: 697px;
}
#chroma-animation-2 {
    overflow: hidden;
    margin-bottom: 100px;
    max-height: 900px;
}

section.bo-temp a,
section.bo-temp a:hover {
    color: #44d62c;
    text-decoration: none
}

section.bo-temp a:hover {
    text-decoration: underline
}

section.bo-temp picture {
    display: block;
    line-height: 0
}

section.bo-temp .pure-material-checkbox {
    z-index: 0;
    position: relative;
    display: inline-block;
    color: #44d62c;
    font-size: 16px;
    line-height: 1.5
}

section.bo-temp .cta-s2 {
    color: #000 !important;
    background: #44d62c;
    border-radius: 3px;
    font: 700 18px/1 Roboto;
    margin: 1rem;
    border: 0;
    padding: 6px 16px;
    text-transform: uppercase;
    text-decoration: none !important
}

section.bo-temp .pure-material-checkbox>input {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    margin: 0;
    border-radius: 0;
    width: 18px;
    height: 18px;
    box-shadow: none;
    outline: 0;
    opacity: 0;
    transform: scale(1);
    pointer-events: none;
    transition: opacity .3s, transform .2s
}

section.bo-temp .pure-material-checkbox>span {
    display: inline-block;
    width: 100%;
    cursor: pointer;
    font-size: .875rem;
    color: #999;
    line-height: 24px
}

section.bo-temp .pure-material-checkbox>span::before {
    content: "";
    display: inline-block;
    margin: 3px 8px 3px 1px;
    border: solid 1px;
    border-color: #999;
    border-radius: .25rem;
    width: 16px;
    height: 16px;
    vertical-align: top;
    transition: border-color .2s, background-color .2s
}

section.bo-temp .pure-material-checkbox>span::after {
    content: "";
    display: block;
    position: absolute;
    top: 4px;
    left: 0;
    width: 0;
    height: 4px;
    border: solid 2px transparent;
    border-right: none;
    border-top: none;
    transform: translate(3px, 4px) rotate(-45deg);
    transition: all ease .2s
}

section.bo-temp .pure-material-checkbox>input:checked,
section.bo-temp .pure-material-checkbox>input:indeterminate {
    background-color: #44d62c
}

section.bo-temp .pure-material-checkbox>input:checked+span::before,
section.bo-temp .pure-material-checkbox>input:indeterminate+span::before {
    border-color: #44d62c;
    background-color: #44d62c
}

section.bo-temp .pure-material-checkbox>input:checked+span::after,
section.bo-temp .pure-material-checkbox>input:indeterminate+span::after {
    border-color: #303030;
    width: 12px
}

section.bo-temp .pure-material-checkbox>input:indeterminate+span::after {
    border-left: none;
    transform: translate(4px, 3px)
}

section.bo-temp .pure-material-checkbox:hover>span::before {
    border-color: #44d62c
}

section.bo-temp .pure-material-checkbox:hover>input {
    opacity: 0
}

section.bo-temp .pure-material-checkbox.focused {
    opacity: 1;
    outline-style: solid;
    outline-color: #6d9df7;
    outline-width: var(--cx-visual-focus-width, 2px);
    outline-offset: 4px
}

section.bo-temp .pure-material-checkbox:hover>input:focus {
    opacity: 0
}

section.bo-temp .pure-material-checkbox>input:active {
    opacity: 0;
    transform: scale(0);
    transition: transform 0s, opacity 0s
}

section.bo-temp .pure-material-checkbox>input:active+span::before {
    border-color: #44d62c
}

section.bo-temp .pure-material-checkbox>input:checked:active+span::before {
    border-color: transparent;
    background-color: #44d62c
}

section.bo-temp .pure-material-checkbox>input:disabled {
    opacity: 0
}

section.bo-temp .pure-material-checkbox>input:disabled+span {
    cursor: initial
}

section.bo-temp .pure-material-checkbox>input:disabled+span::before {
    border-color: currentColor
}

section.bo-temp .pure-material-checkbox>input:checked:disabled+span::before,
section.bo-temp .pure-material-checkbox>input:indeterminate:disabled+span::before {
    border-color: transparent;
    background-color: currentColor
}
#display .bo-temp{
    padding-bottom: 16px;
}
@media (max-width:768px) {
    section.bo-temp {
        padding-bottom: 48px!important
    }
}

.bo-temp img {
    max-width: 100%
}

.bo-temp h1 {
    color: #fff;
    text-align: center;
    font: 100 24px/24px "Titillium Web", RazerF5, Arial, Helvetica, sans-serif;
    text-transform: uppercase
}

@media (max-width:768px) {
    .bo-temp h1 {
        font: 100 18px/18px "Titillium Web", RazerF5, Arial, Helvetica, sans-serif
    }
}

.bo-temp.yt-video {
    position: relative
}

.bo-temp.yt-video iframe {
    position: absolute;
    z-index: 1;
    height: 100%!important;
    width: 100%
}

.bo-temp.yt-video a.ytclick {
    z-index: 2;
    position: relative;
    display: block;
    line-height: 0;
    transition: .5s all ease
}

.bo-temp.yt-video a.ytclick.hide {
    opacity: 0 !important;
    display: block !important
}

.bo-temp .subheader {
    color: #fff;
    font: bold 24px/30px Roboto;
    margin: 0
}

@media (max-width:768px) {
    .bo-temp .subheader {
        font: bold 18px/24px Roboto;
        margin-top: -1rem
    }
}

.bo-temp .subhead-pad-top {
    padding-top: 3.75rem !important
}

.bo-temp .justify-self-center {
    justify-self: center
}

.bo-temp .link a {
    color: #44d62c;
    text-decoration: none;
    outline: 0
}

.bo-temp .secondary-header .header {
    font: 700 36px/30px "Titillium Web", RazerF5, Arial, Helvetica, sans-serif
}

@media (max-width:768px) {
    .bo-temp .secondary-header .header {
        font: 700 30px/28px "Titillium Web", RazerF5, Arial, Helvetica, sans-serif
    }
}

html[lang^=zh] .bo-temp .secondary-header .header {
    font: 700 36px/2.6rem "Titillium Web", RazerF5, Arial, Helvetica, sans-serif
}

@media (max-width:768px) {
    html[lang^=zh] .bo-temp .secondary-header .header {
        font: 700 30px/36px "Titillium Web", RazerF5, Arial, Helvetica, sans-serif
    }
}

.bo-temp .content {
    max-width: 1140px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(12, [col-start] 1fr);
    gap: 24px;
    text-align: center;
    padding-bottom: 30px
}

@media (max-width:768px) {
    .bo-temp .content {
        padding: 0 16px 16px 16px
    }
}

.bo-temp .content :nth-child(1) {
    grid-column: 1/13
}

.bo-temp .content :nth-child(2) {
    grid-column: 1/13
}

.bo-temp .content :nth-child(3) {
    grid-column: 1/13
}

.bo-temp .content :nth-child(4) {
    grid-column: 2/12
}

@media (max-width:768px) {
    .bo-temp .content :nth-child(4) {
        -ms-grid-column: 1;
        -ms-grid-column-span: 12;
        grid-column: 1/13
    }
}

.bo-temp .content :nth-child(5) {
    grid-row: 5;
    -ms-grid-column: 1;
    -ms-grid-column-span: 12;
    grid-column: 1/13
}

.bo-temp .content :nth-child(6) {
    grid-row: 6;
    -ms-grid-column: 1;
    -ms-grid-column-span: 12;
    grid-column: 1/13
}

.bo-temp .content .col-2-12 {
    -ms-grid-column: 2;
    -ms-grid-column-span: 10;
    grid-column: 2/12
}

@media (max-width:768px) {
    .bo-temp .content .col-2-12 {
        -ms-grid-column: 1;
        -ms-grid-column-span: 12;
        grid-column: 1/13
    }
}

.bo-temp .content .header {
    font: 700 48px/1 "Titillium Web", RazerF5, Arial, Helvetica, sans-serif;
    margin: 0
}

@media (max-width:768px) {
    .bo-temp .content .header {
        font: 700 28px/1 "Titillium Web", RazerF5, Arial, Helvetica, sans-serif
    }
}

@media (max-width:414px) {
    .bo-temp .content .header {
        word-break: break-word;
        font-size: min(8vw, 28px)
    }
}

.bo-temp .body-copy {
    font: normal 18px/24px Roboto;
    color: #9a9a9a
}

.bo-temp .body-copy p {
    margin: 0
}

.bo-temp .header {
    color: #44d62c;
    text-transform: uppercase
}

.bo-temp.kv {
    padding-bottom: 0
}

.bo-temp.intro {
    text-align: center;
    padding: 3.75rem 0 6.25rem 0
}

@media (max-width:768px) {
    .bo-temp.intro {
        padding-top: 30px;
        padding-bottom: 48px
    }
}

.bo-temp.intro .content {
    padding: 0
}

@media (max-width:768px) {
    .bo-temp.intro .content {
        padding: 0 1rem
    }
}

.bo-temp.intro .header {
    font: 700 72px/1 "Titillium Web", RazerF5, Arial, Helvetica, sans-serif
}

@media (max-width:768px) {
    .bo-temp.intro .header {
        font: 700 30px/1 "Titillium Web", RazerF5, Arial, Helvetica, sans-serif
    }
}

@media (min-width:768px) {
    :lang(zh) .bo-temp.intro .header {
        line-height: 4.875rem
    }
}

@media (max-width:414px) {
    .bo-temp.intro .header {
        word-break: break-word;
        font-size: min(8vw, 30px)
    }
}

.bo-temp.intro .product-title {
    color: #fff;
    font: 100 24px/24px "Titillium Web", RazerF5, Arial, Helvetica, sans-serif;
    margin: 0;
    text-transform: uppercase
}

.bo-temp.intro .images-icons {
    display: inline-flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    gap: 30px;
    max-width: 100%;
    padding: 0;
    margin: 0
}

.bo-temp.intro .images-icons li {
    list-style-type: none
}

.bo-temp.intro .images-icons li a {
    display: block
}

@media (max-width:768px) {
    .bo-temp.intro .images-icons {
        gap: 1rem
    }
}

@media (max-width:768px) {
    .bo-temp.intro .product-title {
        font: 100 18px/18px RazerF5, Arial, Helvetica, sans-serif
    }
}

.bo-temp .multi-panels.two ul {
    grid-template-columns: repeat(2, [col-start] 1fr)
}

@media (max-width:768px) {
    .bo-temp .multi-panels.two ul {
        grid-template-columns: repeat(1, [col-start] 1fr);
        padding: 1rem;
        row-gap: 30px
    }
}

.bo-temp .multi-panels.twelve ul {
    grid-template-columns: repeat(12, [col-start] 1fr)
}

@media (max-width:768px) {
    .bo-temp .multi-panels.twelve ul {
        grid-template-columns: repeat(1, [col-start] 1fr);
        padding: 1rem;
        row-gap: 30px
    }
}

.bo-temp .multi-panels.twelve.two ul li:nth-child(1) {
    -ms-grid-column: 2;
    -ms-grid-column-span: 4;
    grid-column: 2/6
}

@media (max-width:768px) {
    .bo-temp .multi-panels.twelve.two ul li:nth-child(1) {
        grid-column: 1
    }
}

.bo-temp .multi-panels.twelve.two ul li:nth-child(2) {
    -ms-grid-column: 8;
    -ms-grid-column-span: 4;
    grid-column: 8/12
}

@media (max-width:768px) {
    .bo-temp .multi-panels.twelve.two ul li:nth-child(2) {
        grid-column: 1
    }
}

.bo-temp .multi-panels ul {
    display: grid;
    grid-template-columns: repeat(3, [col-start] 1fr);
    justify-items: center;
    -moz-column-gap: 24px;
    column-gap: 24px;
    row-gap: 24px;
    max-width: 1140px;
    margin: 0 auto;
    align-items: start
}

.bo-temp .multi-panels[data-items="1"] ul {
    grid-template-columns: repeat(1, [col-start] 1fr)
}

.bo-temp .multi-panels[data-items="2"] ul {
    grid-template-columns: repeat(2, [col-start] 1fr)
}

@media (max-width:768px) {

    .bo-temp .multi-panels ul,
    .bo-temp .multi-panels[data-items="2"] ul {
        grid-template-columns: repeat(1, [col-start] 1fr);
        padding: 1rem;
        row-gap: 30px
    }
}

.bo-temp .multi-panels ul li:not(.have-role-group),
.bo-temp .multi-panels ul li>div[role=group]:not(.card-wrapper-main) {
    text-align: center;
    display: grid;
    row-gap: 1rem;
    justify-items: center;
    width: 100%;
    grid-auto-flow: row
}

@media (max-width:768px) {

    .bo-temp .multi-panels ul li:not(.have-role-group),
    .bo-temp .multi-panels ul li>div[role=group]:not(.card-wrapper-main) {
        row-gap: 24px
    }
}

@media (max-width:768px) {

    .bo-temp .multi-panels ul li:not(.have-role-group) .body-copy,
    .bo-temp .multi-panels ul li>div[role=group]:not(.card-wrapper-main) .body-copy {
        margin-top: -1rem
    }
}

.bo-temp .multi-panels ul li .header {
    font: 700 24px/24px "Titillium Web", RazerF5, Arial, Helvetica, sans-serif;
    margin: 0;
    text-transform: uppercase
}

.bo-temp .multi-panels ul li img {
    display: block;
    max-width: none;
}

.bo-temp .multi-panels.secondary-header .header {
    font: 700 36px/32px "Titillium Web", RazerF5, Arial, Helvetica, sans-serif
}

@media (max-width:768px) {
    .bo-temp .multi-panels.secondary-header .header {
        font: 700 30px/28px "Titillium Web", RazerF5, Arial, Helvetica, sans-serif
    }
    .bo-temp .multi-panels ul li img {
        max-width: 100%;
    }
}

.bo-temp.icons-column-fit .icons.multi-panels ul,
.bo-temp.intro.icons-column-fit ul.images-icons {
    margin: 0 auto 30px auto
}

.bo-temp.icons-column-fit .icons.multi-panels ul li,
.bo-temp.intro.icons-column-fit ul.images-icons li {
    list-style-type: none;
    row-gap: 0
}

.bo-temp.icons-column-fit .icons.multi-panels ul li img,
.bo-temp.icons-column-fit ul.images-icons li img {
    width: 103px
}

.bo-temp.icons-column-fit .icons.multi-panels[data-items] ul,
.bo-temp.intro.icons-column-fit ul[data-items].images-icons {
    grid-template-columns: repeat(3, [col-start] 1fr);
    max-width: 357px
}

.bo-temp.icons-column-fit .icons.multi-panels[data-items="1"] ul,
.bo-temp.intro.icons-column-fit ul[data-items="1"].images-icons {
    grid-template-columns: repeat(1, [col-start] 1fr);
    max-width: 103px
}

.bo-temp.icons-column-fit .icons.multi-panels[data-items="2"] ul,
.bo-temp.intro.icons-column-fit ul[data-items="2"].images-icons {
    grid-template-columns: repeat(2, [col-start] 1fr);
    max-width: 230px
}

.bo-temp.icons-column-fit .icons.multi-panels[data-items="3"] ul,
.bo-temp.intro.icons-column-fit ul[data-items="3"].images-icons {
    grid-template-columns: repeat(3, [col-start] 1fr);
    max-width: 357px
}

.bo-temp.icons-column-fit .icons.multi-panels[data-items="4"] ul,
.bo-temp.intro.icons-column-fit ul[data-items="4"].images-icons {
    grid-template-columns: repeat(2, [col-start] 1fr);
    max-width: 230px
}

@media (min-width:768px) {

    .bo-temp.icons-column-fit .icons.multi-panels[data-items] ul,
    .bo-temp.intro.icons-column-fit ul[data-items].images-icons {
        grid-template-columns: repeat(4, [col-start] 1fr);
        max-width: 460px
    }

    .bo-temp.icons-column-fit .icons.multi-panels[data-items="1"] ul,
    .bo-temp.intro.icons-column-fit ul[data-items="1"].images-icons {
        grid-template-columns: repeat(1, [col-start] 1fr);
        max-width: 103px
    }

    .bo-temp.icons-column-fit .icons.multi-panels[data-items="2"] ul,
    .bo-temp.intro.icons-column-fit ul[data-items="2"].images-icons {
        grid-template-columns: repeat(2, [col-start] 1fr);
        max-width: 230px
    }

    .bo-temp.icons-column-fit .icons.multi-panels[data-items="3"] ul,
    .bo-temp.intro.icons-column-fit ul[data-items="3"].images-icons {
        grid-template-columns: repeat(3, [col-start] 1fr);
        max-width: 357px
    }
}

.cards-scroll .subheader {
    color: var(--cx-color-text, #999);
    font-weight: 300
}

.cards-scroll h3 a:hover {
    text-decoration: none
}

.cards-scroll .multi-panels {
    padding-top: 30px;
    position: relative
}

.cards-scroll .multi-panels ul {
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x proximity;
    max-width: unset;
    -ms-overflow-style: none;
    scrollbar-width: none
}

.cards-scroll .multi-panels ul::-webkit-scrollbar {
    display: none
}

.cards-scroll .multi-panels ul li {
    min-width: 350px;
    scroll-snap-align: center;
    align-self: stretch;
    grid-template-rows: minmax(max-content, 30px) minmax(max-content, 350px) 1fr minmax(0, auto);
    position: relative
}

.cards-scroll .multi-panels .cardnav {
    height: 1px
}

.cards-scroll .multi-panels .cardnav button {
    opacity: 0;
    position: absolute;
    top: 40%;
    cursor: pointer;
    background-color: rgba(133, 133, 133, .4);
    border-radius: 50px;
    height: 50px;
    width: 50px;
    line-height: 32px;
    font-size: 42px;
    border: none
}

.cards-scroll .multi-panels .cardnav button:hover {
    background-color: rgba(133, 133, 133, .5)
}

.cards-scroll .multi-panels .cardnav button span {
    position: absolute;
    overflow: hidden;
    height: 1px;
    width: 1px
}

.cards-scroll .multi-panels .cardnav .cardnav-arrow-previous {
    left: 1rem
}

.cards-scroll .multi-panels .cardnav .cardnav-arrow-previous:disabled {
    display: none
}

.cards-scroll .multi-panels .cardnav .cardnav-arrow-previous:after {
    content: "‹";
    display: block;
    line-height: 1;
    color: #44d62c;
    margin-top: -4px
}

.cards-scroll .multi-panels .cardnav .cardnav-arrow-next {
    right: 24px
}

.cards-scroll .multi-panels .cardnav .cardnav-arrow-next:disabled {
    display: none
}

.cards-scroll .multi-panels .cardnav .cardnav-arrow-next:after {
    content: "›";
    display: block;
    line-height: 1;
    color: #44d62c;
    margin-top: -4px
}

@media (hover:hover) {

    .cards-scroll .multi-panels .cardnav button:focus-visible,
    .cards-scroll .multi-panels:hover .cardnav button {
        opacity: 1
    }
}

.link-alone {
    color: #44d62c
}

.link-alone:not(.have-link-arrow):after {
    content: ">";
    display: inline-block;
    padding-left: .1875rem;
    position: relative
}

.link-alone.have-link-arrow span.link-arrow:after {
    content: ">";
    display: inline-block;
    padding-left: .1875rem;
    position: relative
}

.rzr-button-outline-primary {
    border: 2px solid #44d62c;
    display: block;
    padding: 1rem 1.25rem;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: .075rem
}

.rzr-button-outline-primary:hover {
    text-decoration: none !important
}

.rzr-button-outline-primary:after {
    content: ""
}

.product-cards-scroll.cards-scroll {
    padding: 0 0 30px 0
}

.product-cards-scroll.cards-scroll .multi-panels>ul>li {
    background-color: #111;
    grid-template-rows: minmax(max-content, 350px) minmax(max-content, 30px) 1fr minmax(0, auto);
    text-align: left;
    grid-gap: 0;
    border-bottom: 1px solid #44d62c;
    font-family: Roboto, Helvetica, Arial, sans-serif
}

.product-cards-scroll.cards-scroll .multi-panels>ul>li>a {
    order: 1;
    background-color: #000;
    justify-self: center
}

.product-cards-scroll.cards-scroll .multi-panels>ul>li h3.header {
    order: 2;
    padding: 0;
    width: 100%;
    padding: 10px 10px 0 10px;
    justify-self: start;
    font-weight: 300;
    color: #fff;
    font-size: 18px;
    font-family: inherit
}

.product-cards-scroll.cards-scroll .multi-panels>ul>li h3.header a {
    color: inherit;
    font-size: inherit;
    font-family: inherit
}

.product-cards-scroll.cards-scroll .multi-panels>ul>li>.body-copy {
    order: 3;
    padding: 10px 10px 0 10px;
    justify-self: start;
    color: #888;
    font-size: .875rem;
    font-weight: 300;
    font-family: inherit
}

.product-cards-scroll.cards-scroll .multi-panels>ul>li>.cta-container {
    order: 4;
    padding: 10px;
    justify-self: start;
    font-family: inherit;
    font-size: 14px
}

.product-cards-scroll.cards-scroll .multi-panels>ul>li>.cta-container a:hover {
    text-decoration: none
}

#compareTray {
    background: #333;
    z-index: 101;
    font-family: Roboto, Helvetica, Arial, sans-serif;
    color: #fff
}

#compareTray>div {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    justify-content: space-around;
    padding-bottom: 1.5625rem;
    align-items: center;
    padding-top: 1.5625rem;
    gap: .5rem
}

@media (max-width:768px) {
    #compareTray>div {
        flex-direction: column;
        align-items: flex-start;
        padding-left: 1rem;
        padding-right: 1rem;
        gap: .5rem
    }
}

@media (max-width:768px) {
    #compareTray .compareButton {
        width: 100%
    }
}

#compareTray .compareButton button {
    cursor: pointer;
    font-size: .875rem;
    font-weight: 700;
    height: 2.5rem;
    max-height: none;
    padding-left: .625rem;
    padding-right: .625rem;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
    border-radius: 3px;
    border: 0;
    background-color: #44d62c;
    color: #000
}

@media (max-width:768px) {
    #compareTray .compareButton button {
        width: 100%
    }
}

#compareTray .compareButton button.button-inactive {
    background-color: #777;
    color: #363636
}

#compareTray .compareTrayInnerText span {
    display: block;
    font-size: 14px;
    color: #999
}

#compareTray .piecesHolder {
    flex: 0 0 66.66%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem
}

@media (max-width:768px) {
    #compareTray .piecesHolder {
        grid-template-columns: repeat(2, 1fr)
    }
}

#compareTray .piecesHolder .empty-piece {
    border: 1px dashed #6c757d;
    border-radius: .1875rem
}

#compareTray .piecesHolder .piece {
    display: flex;
    background-color: #000;
    padding: .5rem;
    font-size: 14px;
    font-weight: 400;
    border-radius: 3px
}

#compareTray .piecesHolder .piece span {
    flex: 1 1 90%;
    padding-right: 1rem
}

@media (max-width:768px) {
    #compareTray .piecesHolder .piece span {
        height: 40px;
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical
    }
}

#compareTray .piecesHolder .piece button {
    background: 0 0;
    border: 0;
    flex: 0 0 10%;
    padding: 0;
    font-family: RazerF5, Helvetica Neue, Arial, Noto Sans, sans-serif;
    cursor: pointer
}

.store-effect.cards-scroll {
    padding: 1rem 0;
    position: relative
}

.store-effect.cards-scroll .compare-hold {
    justify-self: stretch;
    padding: .5rem 1rem .5rem 1rem;
    flex: 1;
    opacity: 0;
    max-width: 100%;
    background: #111;
    transition: opacity 1s ease;
    display: flex
}

.store-effect.cards-scroll .compare-hold label {
    margin: 0;
    align-self: center
}

.store-effect.cards-scroll .headers {
    max-width: 1200px;
    margin: 0 auto
}

.store-effect.cards-scroll .headers h1,
.store-effect.cards-scroll .headers h2 {
    font-size: 2.5rem;
    line-height: 48px;
    color: #eee;
    margin: 0;
    padding: 0;
    font: 700 24px/30px "Titillium Web", RazerF5, Arial, Helvetica, sans-serif
}

@media (max-width:768px) {

    .store-effect.cards-scroll .headers h1,
    .store-effect.cards-scroll .headers h2 {
        font: 700 18px/24px "Titillium Web", RazerF5, Arial, Helvetica, sans-serif;
        margin-bottom: .48px
    }
}

.store-effect.cards-scroll .headers div {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.065rem
}

.store-effect.cards-scroll .headers div h2,
.store-effect.cards-scroll .headers div p {
    margin: 0;
    font: normal 18px/24px Roboto;
    color: #9a9a9a
}

.store-effect.cards-scroll .headers div a:not(.have-link-arrow) {
    font-size: .875rem;
    color: #eee
}

.store-effect.cards-scroll .headers div a:not(.have-link-arrow):hover {
    text-decoration: underline
}

.store-effect.cards-scroll .headers div a:not(.have-link-arrow)::after {
    content: ">";
    color: #44d62c
}

.store-effect.cards-scroll .headers div a.have-link-arrow {
    font-size: .875rem;
    color: #eee
}

.store-effect.cards-scroll .headers div a.have-link-arrow:hover {
    text-decoration: underline
}

.store-effect.cards-scroll .headers div a.have-link-arrow span.link-arrow::after {
    content: ">";
    color: #44d62c
}

.store-effect.cards-scroll .multi-panels {
    padding: 0;
    margin: 0 auto;
    margin-bottom: 5rem;
    position: relative
}

.store-effect.cards-scroll .multi-panels::after,
.store-effect.cards-scroll .multi-panels::before {
    content: "";
    height: 489px;
    position: absolute;
    width: calc(298px / 2);
    background: linear-gradient(270deg, #000 0, rgba(255, 255, 255, 0) 100%);
    top: 0;
    right: 0;
    z-index: 2;
    pointer-events: none
}

@media (max-width:768px) {

    .store-effect.cards-scroll .multi-panels::after,
    .store-effect.cards-scroll .multi-panels::before {
        display: none
    }
}

.store-effect.cards-scroll .multi-panels::before {
    background: linear-gradient(90deg, #000 0, rgba(255, 255, 255, 0) 100%);
    left: 0
}

.store-effect.cards-scroll .multi-panels .body-copy {
    color: #eee;
    position: relative
}

.store-effect.cards-scroll .multi-panels .body-copy h3,
.store-effect.cards-scroll .multi-panels .body-copy p {
    font-size: 21px;
    line-height: 25px;
    font-weight: 400;
    margin: 0
}

.store-effect.cards-scroll .multi-panels .body-copy .summary {
    text-align: left;
    font-size: .875rem;
    font-weight: 300;
    color: #888;
    line-height: 1.3
}

.store-effect.cards-scroll .multi-panels .body-copy .promoliner {
    text-align: left;
    font-size: .875rem;
    font-weight: 300;
    color: #fff;
    line-height: 1.3
}

.store-effect.cards-scroll .multi-panels ul {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 30px;
    padding: 0;
    grid-template-rows: max-content
}

.store-effect.cards-scroll .multi-panels ul.is-corp-edu li .container-content {
    position: relative;
    padding: 1rem 1rem 1.625rem
}

.store-effect.cards-scroll .multi-panels ul.is-corp-edu li .container-content .corp-edu-text {
    color: #fff;
    font-size: 12px;
    font-weight: 300;
    position: absolute;
    bottom: 5px
}

.store-effect.cards-scroll .multi-panels ul li {
    width: 18.625rem;
    min-height: 480px;
    transform: translateX(calc(min(100vw, 1920px)/ 2 - 600px));
    grid-template-rows: auto;
    gap: 0;
    text-align: left;
    min-width: 0;
    align-content: flex-start;
    background-color: #222
}

@media (max-width:768px) {
    .store-effect.cards-scroll .multi-panels ul li {
        transform: translateX(30px)
    }
}

.store-effect.cards-scroll .multi-panels ul li.spacer {
    background-color: transparent
}

@media (max-width:768px) {
    .store-effect.cards-scroll .multi-panels ul li.spacer {
        display: none
    }
}

.store-effect.cards-scroll .multi-panels ul li a {
    background-color: #111
}

.store-effect.cards-scroll .multi-panels ul li .genpnx.product-badge {
    font-size: 1rem;
    line-height: 1.5em;
    font-weight: 700;
    padding: 5px 1em;
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    top: 20px;
    left: -10px;
    max-width: 100%
}

.store-effect.cards-scroll .multi-panels ul li .genpnx.product-badge.badge-green {
    background-color: #44d62c
}

.store-effect.cards-scroll .multi-panels ul li .genpnx.product-badge.badge-orange {
    background-color: #ff9c07
}

.store-effect.cards-scroll .multi-panels ul li .genpnx.product-badge.badge-red {
    background-color: #c8323c
}

.store-effect.cards-scroll .multi-panels ul li .genpnx.product-badge.badge-yellow {
    background-color: #ffc107
}

.store-effect.cards-scroll .multi-panels ul li .genpnx.product-badge.badge-blue {
    background-color: #28aadc
}

.store-effect.cards-scroll .multi-panels ul li a,
.store-effect.cards-scroll .multi-panels ul li img,
.store-effect.cards-scroll .multi-panels ul li p {
    opacity: 0;
    transition: opacity 1s ease
}

.store-effect.cards-scroll .multi-panels ul li.loaded .compare-hold,
.store-effect.cards-scroll .multi-panels ul li.loaded a,
.store-effect.cards-scroll .multi-panels ul li.loaded img,
.store-effect.cards-scroll .multi-panels ul li.loaded p {
    opacity: 1
}

.store-effect.cards-scroll .multi-panels ul li .container-content {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    min-height: 180px;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box
}

.store-effect.cards-scroll .multi-panels ul li .container-content .cta-container {
    display: flex;
    flex-direction: row;
    align-content: flex-end;
    justify-content: space-between;
    align-items: flex-end;
    font: normal normal bold 14px/14px Roboto
}

.store-effect.cards-scroll .multi-panels ul li .container-content .cta-container .price {
    align-self: center
}

.store-effect.cards-scroll .multi-panels ul li .container-content .cta-container .price p {
    margin: 0;
    color: #eee;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px
}

.store-effect.cards-scroll .multi-panels ul li .container-content .cta-container .price p span.savings {
    color: #999
}

.store-effect.cards-scroll .multi-panels ul li .container-content .cta-container a {
    padding: 5px 10px;
    border-radius: 5px;
    color: #000;
    font-weight: 700;
    background-color: #44d62c;
    text-transform: uppercase;
    text-decoration: none
}

.store-effect.cards-scroll .multi-panels ul li .container-content .cta-container a:after {
    display: none
}

.store-effect.cards-scroll .multi-panels ul li .container-content .cta-container a:hover {
    background-color: #73e161;
    text-decoration: none
}

.store-effect.cards-scroll .multi-panels ul li .container-content .cta-container button.add-to-cart {
    font-family: Roboto;
    font-size: 14px;
    padding: 5px 10px;
    border-radius: 5px;
    color: #000;
    font-weight: 700;
    background-color: #44d62c;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    border: none;
    line-height: 14px
}

.store-effect.cards-scroll .multi-panels ul li .container-content .cta-container button.add-to-cart:hover {
    background-color: #73e161
}

.store-effect.cards-scroll .multi-panels ul li a {
    outline: 0
}

.store-effect.cards-scroll .multi-panels ul li.spacer {
    width: 0;
    min-width: 290px;
    max-width: 1000px
}

.store-effect.cards-scroll .multi-panels .cardnav button {
    background: 0 0;
    z-index: 3
}

.store-effect.cards-scroll .multi-panels .cardnav button.hide {
    display: none
}

.store-effect.cards-scroll .multi-panels .cardnav .cardnav-arrow-next:after,
.store-effect.cards-scroll .multi-panels .cardnav .cardnav-arrow-previous:after {
    content: "";
    display: none
}

.store-effect.cards-scroll.recommendation .headers {
    opacity: 0;
    transition: 1s all ease
}

.store-effect.cards-scroll.recommendation .headers.activate {
    opacity: 1
}

.icon-panel.cards-scroll {
    padding: 0
}

.icon-panel.cards-scroll .multi-panels {
    padding: 0
}

.icon-panel.cards-scroll .multi-panels ul {
    grid-template-columns: auto;
    padding: 0;
    gap: 0;
    justify-content: center
}

@media (max-width:768px) {
    .icon-panel.cards-scroll .multi-panels ul {
        justify-content: flex-start
    }
}

.icon-panel.cards-scroll .multi-panels ul li {
    grid-template-rows: auto;
    min-width: 160px;
    width: 160px;
    padding: 20px 0;
    border-left: 1px solid #363636
}

@media (max-width:768px) {
    .icon-panel.cards-scroll .multi-panels ul li {
        min-width: 120px;
        width: 120px
    }
}

.icon-panel.cards-scroll .multi-panels ul li:first-child {
    border-left: 0
}

.icon-panel.cards-scroll .multi-panels ul li a {
    font-size: 16px;
    font-family: "Titillium Web", RazerF5, Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    font-weight: 700
}

.icon-panel.cards-scroll .multi-panels ul li a svg {
    width: 67px;
    fill: #fff;
    transition: all .5s ease;
    margin-bottom: 10px
}

.icon-panel.cards-scroll .multi-panels ul li a span {
    text-align: center;
    display: block;
    line-height: 1.1;
    text-decoration: none;
    transition: all .5s ease
}

.icon-panel.cards-scroll .multi-panels ul li a:hover {
    text-decoration: none
}

.icon-panel.cards-scroll .multi-panels ul li a:hover svg {
    fill: #44d62c
}

.icon-panel.cards-scroll .multi-panels ul li a:hover span {
    color: #44d62c
}

.store-effect.store-cards-dynamic {
    background-color: #222
}

.store-effect.store-cards-dynamic.center-align .multi-panels ul {
    display: flex
}

@media (max-width:768px) {
    .store-effect.store-cards-dynamic.center-align .multi-panels ul {
        padding: 0 1rem;
        flex-direction: column
    }

    .store-effect.store-cards-dynamic.center-align .multi-panels ul li {
        min-width: 100%
    }
}

.store-effect.store-cards-dynamic .multi-panels::after,
.store-effect.store-cards-dynamic .multi-panels::before {
    display: none
}

.store-effect.store-cards-dynamic .multi-panels ul {
    grid-template-columns: repeat(4, 290px);
    gap: 1rem;
    max-width: 1200px;
    justify-content: center;
    overflow: visible
}

@media (max-width:1200px) {
    .store-effect.store-cards-dynamic .multi-panels ul {
        grid-template-columns: repeat(3, 290px)
    }
}

@media (max-width:768px) {
    .store-effect.store-cards-dynamic .multi-panels ul {
        grid-template-columns: repeat(1, 1fr)
    }
}

.store-effect.store-cards-dynamic .multi-panels ul li {
    width: 18.125rem;
    transform: none;
    background-color: #111;
    position: relative
}

@media (max-width:768px) {
    .store-effect.store-cards-dynamic .multi-panels ul li {
        min-width: 90%
    }
}

.store-effect.store-cards-dynamic .multi-panels ul li a {
    background-color: #000
}

.store-effect.store-cards-dynamic .multi-panels ul li a.thumbnail-holder {
    background-color: #111
}

.store-effect.store-cards-dynamic .multi-panels ul li .body-copy {
    display: grid;
    gap: 1rem;
    position: relative;
    margin-bottom: 1rem
}

.store-effect.store-cards-dynamic .multi-panels ul li .body-copy h3 {
    text-align: left;
    text-transform: capitalize;
    font-weight: 300;
    font-size: 18px;
    color: #fff;
    margin: 0
}

.store-effect.store-cards-dynamic .multi-panels ul li .body-copy .summary {
    text-align: left;
    font-size: .875rem;
    font-weight: 300;
    color: #888;
    line-height: 1.3
}

.store-effect.store-cards-dynamic .multi-panels ul li .genpnx.product-badge {
    font-size: 1rem;
    line-height: 1.5em;
    font-weight: 700;
    padding: 5px 1em;
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    top: 20px;
    left: -10px;
    max-width: 100%
}

.store-effect.store-cards-dynamic .multi-panels ul li .genpnx.product-badge.badge-green {
    background-color: #44d62c
}

.store-effect.store-cards-dynamic .multi-panels ul li .genpnx.product-badge.badge-orange {
    background-color: #ff9c07
}

.store-effect.store-cards-dynamic .multi-panels ul li .genpnx.product-badge.badge-red {
    background-color: #c8323c
}

.store-effect.store-cards-dynamic .multi-panels ul li .genpnx.product-badge.badge-yellow {
    background-color: #ffc107
}

.store-effect.store-cards-dynamic .multi-panels ul li .genpnx.product-badge.badge-blue {
    background-color: #28aadc
}

.store-effect.cards-scroll .multi-panels ul li .thumbnail-holder {
    background-color: #111;
    cursor: pointer
}

.store-effect.cards-scroll.products-api .multi-panels ul.has-compare li,
.store-effect.store-cards-dynamic .multi-panels ul.has-compare li {
    grid-template-rows: 298px 50px 1fr
}

.store-effect.cards-scroll.products-api .multi-panels ul li,
.store-effect.store-cards-dynamic .multi-panels ul li {
    display: inline
}

.store-effect.cards-scroll.products-api .multi-panels ul li .card-wrapper-main,
.store-effect.store-cards-dynamic .multi-panels ul li .card-wrapper-main {
    height: 100%;
    grid-template-rows: 298px 1fr;
    display: grid
}

@media (max-width:768px) {

    .store-effect.cards-scroll.products-api .multi-panels ul li,
    .store-effect.store-cards-dynamic .multi-panels ul li {
        grid-template-rows: none
    }
}

.store-effect.cards-scroll.products-api .multi-panels ul li .container-content,
.store-effect.store-cards-dynamic .multi-panels ul li .container-content {
    gap: 1rem;
    justify-content: space-between
}

.store-effect.cards-scroll.products-api .multi-panels ul li .container-content .body-copy,
.store-effect.store-cards-dynamic .multi-panels ul li .container-content .body-copy {
    display: grid;
    gap: 1rem
}

.store-effect.cards-scroll.products-api .multi-panels ul li .container-content .body-copy h3,
.store-effect.store-cards-dynamic .multi-panels ul li .container-content .body-copy h3 {
    font-size: 18px
}

.store-effect.cards-scroll.products-api .multi-panels ul li .container-content .body-copy ul.options.options-switch,
.store-effect.store-cards-dynamic .multi-panels ul li .container-content .body-copy ul.options.options-switch {
    display: grid;
    gap: .5rem;
    grid-auto-flow: column;
    grid-template-columns: none;
    justify-content: flex-start;
    position: absolute;
    top: -50px;
    left: 0
}

.store-effect.cards-scroll.products-api .multi-panels ul li .container-content .body-copy ul.options.options-switch li,
.store-effect.store-cards-dynamic .multi-panels ul li .container-content .body-copy ul.options.options-switch li {
    background-color: transparent;
    display: inline-block;
    width: auto;
    height: auto;
    min-height: 0;
    transform: none
}

@media (max-width:768px) {
    .store-effect.store-cards-dynamic .multi-panels ul li .card-wrapper-main {
        display: block !important
    }
}

.store-effect.cards-scroll.products-api .multi-panels::after,
.store-effect.cards-scroll.products-api .multi-panels::before {
    height: 100%
}

@media (max-width:768px) {
    .store-effect.cards-scroll.products-api .multi-panels ul li .container-content .body-copy {
        margin-top: 0
    }
}

.store-effect.cards-scroll.two-cta .multi-panels ul li a.two-cta {
    color: #eee;
    background: 0 0;
    text-decoration: none
}

.store-effect.cards-scroll.two-cta .multi-panels ul li a.two-cta:hover {
    text-decoration: underline
}

.store-effect.store-cards-dynamic li.spacer {
    display: none !important
}

.store-effect.cards-scroll .multi-panels .options-colordesign.options,
.store-effect.store-cards-dynamic .multi-panels .options-colordesign.options {
    display: block;
    margin: 0
}

.store-effect.cards-scroll .multi-panels .options-colordesign.options li,
.store-effect.store-cards-dynamic .multi-panels .options-colordesign.options li {
    display: inline-block;
    width: auto;
    height: auto;
    min-height: 0;
    transform: none
}

.store-effect.cards-scroll .multi-panels .options-colordesign.options.options-colordesign,
.store-effect.store-cards-dynamic .multi-panels .options-colordesign.options.options-colordesign {
    display: grid;
    gap: .5rem;
    grid-auto-flow: column;
    grid-template-columns: none;
    justify-content: flex-start;
    position: absolute;
    top: -50px;
    right: 0
}

.store-effect.cards-scroll .multi-panels .options-colordesign.options.options-colordesign li,
.store-effect.store-cards-dynamic .multi-panels .options-colordesign.options.options-colordesign li {
    border: 1px solid #fff;
    border-radius: 16px;
    transition: all .3s ease-in-out
}

.store-effect.cards-scroll .multi-panels .options-colordesign.options.options-colordesign li.active,
.store-effect.store-cards-dynamic .multi-panels .options-colordesign.options.options-colordesign li.active {
    border: 1px solid #007202
}

.store-effect.cards-scroll .multi-panels .options-colordesign.options.options-colordesign li span,
.store-effect.store-cards-dynamic .multi-panels .options-colordesign.options.options-colordesign li span {
    width: 18px;
    height: 18px;
    border-radius: 18px;
    min-height: 0;
    margin: 1px;
    position: relative;
    display: block
}

.store-effect.cards-scroll .multi-panels .options-colordesign.options.options-colordesign li span.options-thumbnail-button,
.store-effect.store-cards-dynamic .multi-panels .options-colordesign.options.options-colordesign li span.options-thumbnail-button {
    cursor: pointer
}

.store-effect.cards-scroll .multi-panels .options-colordesign.options.options-colordesign li.color-mercury span,
.store-effect.store-cards-dynamic .multi-panels .options-colordesign.options.options-colordesign li.color-mercury span {
    background-color: #e5e5e5
}

.store-effect.cards-scroll .multi-panels .options-colordesign.options.options-colordesign li.color-quartz span,
.store-effect.store-cards-dynamic .multi-panels .options-colordesign.options.options-colordesign li.color-quartz span {
    background-color: pink
}

.store-effect.cards-scroll .multi-panels .options-colordesign.options.options-colordesign li.black span,
.store-effect.store-cards-dynamic .multi-panels .options-colordesign.options.options-colordesign li.black span {
    background-color: #000
}

.store-effect.cards-scroll .multi-panels .options-colordesign.options.options-colordesign li.vc-kb-color-black span,
.store-effect.store-cards-dynamic .multi-panels .options-colordesign.options.options-colordesign li.vc-kb-color-black span {
    background-color: #000
}

.store-effect.cards-scroll .multi-panels .options-colordesign.options.options-colordesign li.white span,
.store-effect.store-cards-dynamic .multi-panels .options-colordesign.options.options-colordesign li.white span {
    background-color: #fff
}

.store-effect.cards-scroll .multi-panels .options-colordesign.options.options-colordesign li.vc-kb-color-white span,
.store-effect.store-cards-dynamic .multi-panels .options-colordesign.options.options-colordesign li.vc-kb-color-white span {
    background-color: #fff
}

.store-effect.cards-scroll .multi-panels .options-colordesign.options.options-colordesign li.green span,
.store-effect.store-cards-dynamic .multi-panels .options-colordesign.options.options-colordesign li.green span {
    background-color: #00b800
}

.store-effect.cards-scroll .multi-panels .options-colordesign.options.options-colordesign li.color-roblox-edition span,
.store-effect.store-cards-dynamic .multi-panels .options-colordesign.options.options-colordesign li.color-roblox-edition span {
    background-color: #56595e
}

.store-effect.cards-scroll .multi-panels .options-colordesign.options.options-colordesign li.color-bape-edition span,
.store-effect.store-cards-dynamic .multi-panels .options-colordesign.options.options-colordesign li.color-bape-edition span {
    background-color: #006f2b
}

.store-effect.cards-scroll .multi-panels .options-colordesign.options.options-colordesign li.color-evisu span,
.store-effect.store-cards-dynamic .multi-panels .options-colordesign.options.options-colordesign li.color-evisu span {
    background-color: #3c414d
}

.store-effect.cards-scroll .multi-panels .options-colordesign.options.options-colordesign li.color-hello-kitty-friends span,
.store-effect.store-cards-dynamic .multi-panels .options-colordesign.options.options-colordesign li.color-hello-kitty-friends span {
    background-color: #fabbcb
}

.store-effect.cards-scroll .multi-panels .options-colordesign.options.options-colordesign li.color-faker span,
.store-effect.store-cards-dynamic .multi-panels .options-colordesign.options.options-colordesign li.color-faker span {
    background-color: red
}

.store-effect.cards-scroll .multi-panels .options-colordesign.options.options-colordesign li.color-esl-edition span,
.store-effect.store-cards-dynamic .multi-panels .options-colordesign.options.options-colordesign li.color-esl-edition span {
    background-color: #ffff0b
}

.store-effect.cards-scroll .multi-panels .options-colordesign.options.options-colordesign li.color-genshin-impact span,
.store-effect.store-cards-dynamic .multi-panels .options-colordesign.options.options-colordesign li.color-genshin-impact span {
    background-color: #121f42
}

.store-effect.cards-scroll .multi-panels .options-colordesign.options.options-colordesign li.color-halo-infinite span,
.store-effect.store-cards-dynamic .multi-panels .options-colordesign.options.options-colordesign li.color-halo-infinite span {
    background-color: #115740
}

.store-effect.cards-scroll .multi-panels .options-colordesign.options.options-colordesign li.color-koenigsegg span,
.store-effect.store-cards-dynamic .multi-panels .options-colordesign.options.options-colordesign li.color-koenigsegg span {
    background-color: #f6be00
}

.store-effect.cards-scroll .multi-panels .options-colordesign.options.options-colordesign li.color-williams span,
.store-effect.store-cards-dynamic .multi-panels .options-colordesign.options.options-colordesign li.color-williams span {
    background-color: #00a3e0
}

.store-effect.cards-scroll .multi-panels .options-colordesign.options.options-colordesign li.color-lamborghini-edition span,
.store-effect.store-cards-dynamic .multi-panels .options-colordesign.options.options-colordesign li.color-lamborghini-edition span {
    background-color: #ff7500
}

.store-effect.cards-scroll .multi-panels .options-colordesign.options.options-colordesign li.color-pubg-battlegrounds span,
.store-effect.store-cards-dynamic .multi-panels .options-colordesign.options.options-colordesign li.color-pubg-battlegrounds span {
    background-color: orange
}

.store-effect.cards-scroll .multi-panels .options-colordesign.options.options-colordesign li.color-black-2019,
.store-effect.cards-scroll .multi-panels .options-colordesign.options.options-colordesign li.color-black-2021,
.store-effect.cards-scroll .multi-panels .options-colordesign.options.options-colordesign li.color-boba-fett,
.store-effect.cards-scroll .multi-panels .options-colordesign.options.options-colordesign li.color-captain-america,
.store-effect.cards-scroll .multi-panels .options-colordesign.options.options-colordesign li.color-cyberpunk-2077,
.store-effect.cards-scroll .multi-panels .options-colordesign.options.options-colordesign li.color-deathadder-v2-se,
.store-effect.cards-scroll .multi-panels .options-colordesign.options.options-colordesign li.color-mercury-2019,
.store-effect.cards-scroll .multi-panels .options-colordesign.options.options-colordesign li.color-mercury-2021,
.store-effect.cards-scroll .multi-panels .options-colordesign.options.options-colordesign li.color-quartz-2019,
.store-effect.cards-scroll .multi-panels .options-colordesign.options.options-colordesign li.color-quartz-2021,
.store-effect.cards-scroll .multi-panels .options-colordesign.options.options-colordesign li.color-six-siege-special-edition,
.store-effect.cards-scroll .multi-panels .options-colordesign.options.options-colordesign li.color-sonic-the-hedgehog,
.store-effect.cards-scroll .multi-panels .options-colordesign.options.options-colordesign li.color-stormtrooper,
.store-effect.cards-scroll .multi-panels .options-colordesign.options.options-colordesign li.gears-5-edition,
.store-effect.cards-scroll .multi-panels .options-colordesign.options.options-colordesign li.gears-of-war-edition,
.store-effect.cards-scroll .multi-panels .options-colordesign.options.options-colordesign li.razerxbape,
.store-effect.store-cards-dynamic .multi-panels .options-colordesign.options.options-colordesign li.color-black-2019,
.store-effect.store-cards-dynamic .multi-panels .options-colordesign.options.options-colordesign li.color-black-2021,
.store-effect.store-cards-dynamic .multi-panels .options-colordesign.options.options-colordesign li.color-boba-fett,
.store-effect.store-cards-dynamic .multi-panels .options-colordesign.options.options-colordesign li.color-captain-america,
.store-effect.store-cards-dynamic .multi-panels .options-colordesign.options.options-colordesign li.color-cyberpunk-2077,
.store-effect.store-cards-dynamic .multi-panels .options-colordesign.options.options-colordesign li.color-deathadder-v2-se,
.store-effect.store-cards-dynamic .multi-panels .options-colordesign.options.options-colordesign li.color-mercury-2019,
.store-effect.store-cards-dynamic .multi-panels .options-colordesign.options.options-colordesign li.color-mercury-2021,
.store-effect.store-cards-dynamic .multi-panels .options-colordesign.options.options-colordesign li.color-quartz-2019,
.store-effect.store-cards-dynamic .multi-panels .options-colordesign.options.options-colordesign li.color-quartz-2021,
.store-effect.store-cards-dynamic .multi-panels .options-colordesign.options.options-colordesign li.color-six-siege-special-edition,
.store-effect.store-cards-dynamic .multi-panels .options-colordesign.options.options-colordesign li.color-sonic-the-hedgehog,
.store-effect.store-cards-dynamic .multi-panels .options-colordesign.options.options-colordesign li.color-stormtrooper,
.store-effect.store-cards-dynamic .multi-panels .options-colordesign.options.options-colordesign li.gears-5-edition,
.store-effect.store-cards-dynamic .multi-panels .options-colordesign.options.options-colordesign li.gears-of-war-edition,
.store-effect.store-cards-dynamic .multi-panels .options-colordesign.options.options-colordesign li.razerxbape {
    display: none
}

.card-spinner .spin-container {
    position: relative;
    margin-top: 0;
    -webkit-margin-end: auto;
    margin-inline-end: auto;
    margin-bottom: 0;
    -webkit-margin-start: auto;
    margin-inline-start: auto;
    width: 24px;
    height: 24px
}

.card-spinner .spin-element {
    width: 24px;
    height: 24px;
    font-size: 10px;
    overflow: hidden;
    animation: load8 1s infinite linear
}

.card-spinner .spin-element:before {
    content: "";
    box-sizing: border-box;
    display: block;
    width: 24px;
    height: 24px;
    border: 4px solid;
    margin: auto;
    border-top-color: #555;
    border-bottom-color: #555;
    border-right-color: #555;
    border-left-color: #44d62c;
    border-radius: 50%;
    pointer-events: none
}

.card-spinner-container {
    position: relative;
    top: 0;
    left: 0;
    transform: none
}

@keyframes load8 {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

.storecard-notify {
    display: none !important
}

.storecard-notify.show {
    display: block !important
}

.storecard-notify .mat-form-field-subscript-wrapper {
    display: none
}

.storecard-notify .mat-form-field-subscript-wrapper.show {
    display: block
}

.storecard-notify .thanks {
    display: none
}

.storecard-notify .thanks.show {
    display: block
}

.storecard-notify .mat-form-field-infix {
    position: relative
}

.storecard-notify .mat-form-field-infix.active {
    border-color: #44d62c
}

.storecard-notify .mat-form-field-infix.active label {
    top: 12px;
    color: #44d62c
}

.storecard-notify .mat-input-element {
    font: inherit;
    background: rgba(0, 0, 0, 0);
    color: currentColor;
    border: none;
    outline: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
    vertical-align: bottom;
    text-align: inherit;
    box-sizing: content-box
}

.bo-temp.carousel .glide {
    position: relative;
    width: 100%;
    box-sizing: border-box
}

.bo-temp.carousel .glide:focus-within .glide__arrows.hide {
    opacity: 1 !important
}

.bo-temp.carousel .glide * {
    box-sizing: inherit
}

.bo-temp.carousel .glide__track {
    overflow: hidden
}

.bo-temp.carousel .glide__slides {
    position: relative;
    width: 100%;
    list-style: none;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    touch-action: pan-Y;
    overflow: hidden;
    padding: 0;
    white-space: nowrap;
    display: grid;
    grid-template-columns: repeat(100, 1fr);
    grid-auto-columns: auto;
    flex-wrap: nowrap;
    will-change: transform;
    margin: 0
}

.bo-temp.carousel .glide__slides--dragging {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.bo-temp.carousel .glide__slide {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    white-space: normal;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    transition-property: none
}

@media (max-width:768px) {
    .bo-temp.carousel .glide__slide {
        padding-bottom: 30px
    }
}

.bo-temp.carousel .glide__slide--active {
    z-index: 1
}

.bo-temp.carousel .glide__slide a {
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    -moz-user-select: none;
    -ms-user-select: none;
    transition-property: none
}

.bo-temp.carousel .glide__arrows {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    display: flex;
    height: 100%;
    align-items: center;
    position: absolute;
    top: 0;
    z-index: 1
}

.bo-temp.carousel .glide__arrows.hide {
    opacity: 0
}

.bo-temp.carousel .glide__arrows.glide__arrows-previous {
    left: 0;
    padding-left: 1rem
}

.bo-temp.carousel .glide__arrows.glide__arrows-next {
    right: 0;
    padding-right: 24px
}

.bo-temp.carousel .glide__arrows .slider__arrow {
    background: 0 0;
    border: 0;
    cursor: pointer
}

.bo-temp.carousel .glide__arrows .slider__arrow svg {
    filter: drop-shadow(0 0 1px #000)
}

.bo-temp.carousel .glide__arrows .arrow-previous {
    left: 0
}

.bo-temp.carousel .glide__arrows .arrow-next {
    right: 0
}

.bo-temp.carousel .glide__bullets {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    justify-content: center;
    position: absolute;
    width: 100%;
    bottom: -14px;
    text-align: center
}

@media (max-width:768px) {
    .bo-temp.carousel .glide__bullets {
        bottom: -14px
    }
}

.bo-temp.carousel .glide__bullets ul {
    padding: 0;
    margin: 0
}

.bo-temp.carousel .glide__bullets li {
    padding: 0;
    margin: 0;
    display: inline-block
}

.bo-temp.carousel .glide__bullets .glide__bullet {
    width: 12px;
    height: 12px;
    padding: 0;
    border-radius: 50%;
    transition: all .3s ease-in-out;
    cursor: pointer;
    line-height: 0;
    margin: 0 18px;
    background-color: #ccc;
    box-shadow: 0 0 0 1px #222;
    border: none
}

@media (max-width:375px) {
    .bo-temp.carousel .glide__bullets .glide__bullet {
        margin: 0 12px
    }
}

.bo-temp.carousel .glide__bullets .glide__bullet:after {
    content: "";
    width: 48px;
    height: 48px;
    display: inline-block;
    border: none;
    position: relative;
    left: -18px;
    top: -18px
}

.bo-temp.carousel .glide__bullets .glide__bullet--active .glide__bullet,
.bo-temp.carousel .glide__bullets button.glide__bullet--active {
    background-color: #44d62c
}

.bo-temp.carousel .glide--rtl {
    direction: rtl
}

.bo-temp.carousel {
    padding-bottom: 0
}

.bo-temp.carousel .content-holder {
    display: grid
}

.bo-temp.carousel .content-holder .background {
    grid-area: 1/1
}

@media (max-width:768px) {
    .bo-temp.carousel .content-holder .background {
        grid-area: 2/1
    }
}

/* @media (max-width:768px) {
    .bo-temp.carousel .content-holder.v1_usp {
        min-height: 650px
    }
} */

.bo-temp.carousel .content-holder.v1_usp:not(.carousel-banner-a, .carousel-banner-store-reward) .background {
    min-height: 900px;
    background-size: cover;
    background-position: top center
}

@media (max-width:768px) {
    .bo-temp.carousel .content-holder.v1_usp:not(.carousel-banner-a, .carousel-banner-store-reward) .background {
        min-height: 0;
        grid-area: 1/1;
        background-image: none !important
    }
}

.bo-temp.carousel .content-holder.v1_usp:not(.carousel-banner-a, .carousel-banner-store-reward) .background img {
    opacity: 0
}

@media (max-width:768px) {
    .bo-temp.carousel .content-holder.v1_usp:not(.carousel-banner-a, .carousel-banner-store-reward) .background img {
        opacity: 1
    }
}

.bo-temp.carousel .content-holder.v1_usp .content {
    width: 100%
}

@media (max-width:768px) {
    .bo-temp.carousel .content-holder.v1_usp .content {
        grid-area: 2/1;
        padding-bottom: 30px
    }
}

@media (max-width:768px) {

    .bo-temp.carousel .content-holder.v1_usp .content .p-container,
    .bo-temp.carousel .content-holder.v1_usp .content .subhead,
    .bo-temp.carousel .content-holder.v1_usp .content h2 {
        text-align: left
    }
}

.bo-temp.carousel .content-holder .content {
    grid-area: 1/1;
    align-content: flex-start
}

.bo-temp.carousel .content-holder .content .main-content {
    display: grid;
    gap: 1rem;
    row-gap: .5rem
}

.bo-temp.carousel .content-holder .content sup {
    line-height: 0
}

.bo-temp.carousel .content-holder .content h2 {
    font-family: RazerF5, sans-serif;
    font-weight: 700;
    margin: 48px 0 0 0;
    padding: 0 1rem;
    text-align: center;
    color: #000;
    font-size: 2.30px;
    text-transform: uppercase
}

.bo-temp.carousel .content-holder .content .subhead {
    font-size: 1.1875rem;
    font-family: RazerF5, sans-serif;
    font-weight: 300;
    padding: .625rem 1rem 0 1rem;
    margin: 0
}

@media screen and (min-width:756px) {
    .bo-temp.carousel .content-holder .content .subhead {
        font-size: 28px
    }
}

.bo-temp.carousel .content-holder .content .p-container {
    align-self: center;
    color: #222;
    font-family: Roboto, sans-serif;
    font-size: 1.125em;
    font-weight: 300;
    justify-self: center;
    line-height: 1.5em;
    margin: 0 auto;
    padding: 0 1rem;
    text-align: center;
    max-width: 1140px
}

.bo-temp.carousel .content-holder .content .list-of-links {
    list-style-type: none;
    display: flex;
    padding: 0;
    justify-content: center;
    flex-wrap: wrap
}

.bo-temp.carousel .content-holder .content .list-of-links li a {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-clip: padding-box;
    background-color: #44d62c;
    border-bottom: 0 none;
    border-left: solid 2 px #0f0;
    border-left: 0 !important;
    border-radius: 0;
    border-radius: .1875rem;
    border-right: 0 none;
    border-top: 0 none;
    color: #000;
    cursor: pointer;
    display: inline-block !important;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 38px;
    margin: 0;
    min-width: 120px;
    padding: 0 20px;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    text-transform: uppercase;
    transition: color .45s, background .45s, border .45s;
    vertical-align: middle;
    white-space: nowrap
}

.bo-temp.carousel .content-holder .content .light-content {
    color: #fff
}

.bo-temp.carousel .content-holder .content .light-content h2 {
    color: inherit
}

.bo-temp.carousel .content-holder .content .light-content .subhead {
    color: inherit
}

.bo-temp.carousel .content-holder .content .light-content .p-container {
    color: inherit
}

.bo-temp.carousel .content-holder .content .light-content .list-of-links:not(.have-link-arrow) li a {
    background-color: unset;
    padding: 0 1rem;
    color: #fff;
    font-size: 1.0625rem;
    font-family: RazerF5, Arial, Helvetica, sans-serif;
    font-weight: 300;
    line-height: normal;
    text-transform: capitalize
}

.bo-temp.carousel .content-holder .content .light-content .list-of-links:not(.have-link-arrow) li a::after {
    content: ">";
    color: #44d62c;
    display: inline-block;
    padding: 5px
}

.bo-temp.carousel .content-holder .content .light-content .list-of-links:not(.have-link-arrow) li a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px
}

@media screen and (min-width:756px) {
    .bo-temp.carousel .content-holder .content .light-content .list-of-links:not(.have-link-arrow) li a {
        font-size: 1.3125rem
    }
}

.bo-temp.carousel .content-holder .content .light-content .list-of-links.have-link-arrow li a {
    background-color: unset;
    padding: 0 1rem;
    color: #fff;
    font-size: 1.0625rem;
    font-family: RazerF5, Arial, Helvetica, sans-serif;
    font-weight: 300;
    line-height: normal;
    text-transform: capitalize
}

.bo-temp.carousel .content-holder .content .light-content .list-of-links.have-link-arrow li a span.link-arrow:after {
    content: ">";
    color: #44d62c;
    display: inline-block;
    padding: 5px
}

.bo-temp.carousel .content-holder .content .light-content .list-of-links.have-link-arrow li a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px
}

@media screen and (min-width:756px) {
    .bo-temp.carousel .content-holder .content .light-content .list-of-links.have-link-arrow li a {
        font-size: 1.3125rem
    }
}

.bo-temp.carousel.carousel-banner-a .content-holder.v1_usp .background {
    min-height: 700px;
    height: 75vh;
    background-size: cover;
    background-position: top center
}

@media screen and (max-width:768px) {
    .bo-temp.carousel.carousel-banner-a .content-holder.v1_usp .background {
        min-height: 650px;
        grid-area: 1/1
    }
}

.bo-temp.carousel.carousel-banner-a .content-holder.v1_usp .background img {
    opacity: 0
}

@media screen and (max-width:768px) {
    .bo-temp.carousel.carousel-banner-a .content-holder.v1_usp .content {
        grid-area: 1/1
    }
}

.bo-temp.carousel.carousel-banner-a .content-holder.v1_usp .content h2 {
    font-size: 3.5rem;
    font-weight: 500;
    padding-top: 3.75rem;
    margin-top: 0
}

@media screen and (max-width:768px) {
    .bo-temp.carousel.carousel-banner-a .content-holder.v1_usp .content h2 {
        font-size: 30px;
        text-align: center;
        line-height: 1.2
    }
}

.bo-temp.carousel.carousel-banner-a .content-holder.v1_usp .content .subhead {
    font-size: 28px;
    font-weight: 300;
    padding-top: 0
}

@media screen and (max-width:768px) {
    .bo-temp.carousel.carousel-banner-a .content-holder.v1_usp .content .subhead {
        font-size: 1.1875rem;
        text-align: center
    }
}

.bo-temp.carousel.carousel-banner-a .content-holder.v1_usp .content .p-container {
    text-align: center
}

.bo-temp.carousel.carousel-banner-a .content-holder.v1_usp .content .list-of-links li a.carousel-banner-a {
    font-size: 1.3125rem
}

@media screen and (max-width:768px) {
    .bo-temp.carousel.carousel-banner-a .content-holder.v1_usp .content .list-of-links li a.carousel-banner-a {
        font-size: 1.0625rem
    }
}

@media screen and (max-width:768px) {
    .bo-temp.carousel.carousel-banner-a .glide__slide {
        padding-bottom: 0
    }
}

@media (max-width:768px) {
    .bo-temp.carousel.carousel-banner-store-reward .content-holder.v1_usp {
        min-height: 0
    }
}

.bo-temp.carousel.carousel-banner-store-reward .content-holder.v1_usp .background {
    min-height: 400px;
    height: auto;
    background-size: cover;
    background-position: top center
}

@media screen and (max-width:768px) {
    .bo-temp.carousel.carousel-banner-store-reward .content-holder.v1_usp .background {
        min-height: 0;
        height: auto;
        grid-area: 1/1
    }
}

.bo-temp.carousel.carousel-banner-store-reward .content-holder.v1_usp .background img {
    opacity: 0
}

@media screen and (max-width:768px) {
    .bo-temp.carousel.carousel-banner-store-reward .content-holder.v1_usp .content {
        grid-area: 1/1
    }
}

.bo-temp.carousel.carousel-banner-store-reward .content-holder.v1_usp .content .main-content {
    row-gap: 0
}

.bo-temp.carousel.carousel-banner-store-reward .content-holder.v1_usp .content h2 {
    font-size: 36px;
    font-weight: 500;
    padding-top: 28px;
    margin-top: 0;
    color: #44d62c
}

@media screen and (max-width:768px) {
    .bo-temp.carousel.carousel-banner-store-reward .content-holder.v1_usp .content h2 {
        font-size: 28px;
        text-align: center;
        line-height: 1.2
    }
}

.bo-temp.carousel.carousel-banner-store-reward .content-holder.v1_usp .content .subhead {
    font-size: 28px;
    font-weight: 300;
    padding-top: 0;
    color: #fff
}

@media screen and (max-width:768px) {
    .bo-temp.carousel.carousel-banner-store-reward .content-holder.v1_usp .content .subhead {
        font-size: 1.1875rem;
        text-align: center
    }
}

.bo-temp.carousel.carousel-banner-store-reward .content-holder.v1_usp .content .p-container {
    text-align: center;
    color: #fff
}

.bo-temp.carousel.carousel-banner-store-reward .content-holder.v1_usp .content .list-of-links li a {
    font-size: .875rem;
    background-color: transparent;
    color: #fff;
    font-weight: 300;
    text-transform: initial;
    font-family: inherit;
    letter-spacing: inherit;
    border: none;
    border-radius: initial;
    line-height: 14px
}

@media screen and (max-width:768px) {
    .bo-temp.carousel.carousel-banner-store-reward .glide__slide {
        padding-bottom: 0
    }
}

.bo-temp.carousel .animation-ctrl-btn {
    display: flex;
    justify-content: flex-end;
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    z-index: 4
}

@media (max-width:768px) {
    .bo-temp.carousel.use-rotation .glide__bullets {
        padding: 0 60px
    }
}

.bo-temp.carousel .animation-ctrl-btn button {
    background: 0 0;
    border: 0;
    color: #fff;
    vertical-align: middle;
    cursor: pointer
}

.bo-temp.carousel .animation-ctrl-btn button .play-pause-btn-wrapper {
    width: 35px;
    height: 35px;
    background: #44d62c;
    border: 0;
    border-radius: 24px;
    padding: 5px 10px;
    margin: 0 auto
}

.bo-temp.carousel .animation-ctrl-btn button img {
    width: 10px
}

.bo-temp.carousel .animation-ctrl-btn button {
    border: 0;
    color: #fff;
    vertical-align: middle;
    cursor: pointer;
    background: #44d62c;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    width: 30px;
    height: 30px;
    margin: 0
}

.bo-temp.faq-support {
    max-width: 1920px
}

.bo-temp.faq-support .header {
    font-family: RazerF5, Arial, Helvetica, sans-serif;
    font-weight: 400;
    color: #fff;
    text-align: center;
    font-size: 40px;
    font-weight: 200;
    padding: 48px 0 30px 0
}

.bo-temp.faq-support .sub-header {
    font-weight: 400;
    text-align: left;
    color: #fff
}

.bo-temp.faq-support .tab-container {
    width: inherit;
    display: flex
}

.bo-temp.faq-support .tab-container .tab-control-container {
    padding: 0;
    padding-right: 1rem;
    max-width: 250px;
    width: 100%;
    text-align: left
}

.bo-temp.faq-support .tab-container .tab-control-container .faq-tab-sidepanel button {
    width: 100%;
    background: 0 0;
    border: none;
    text-align: left;
    font-size: inherit;
    color: #fff;
    cursor: pointer;
    list-style: none;
    padding: 1rem 0
}

.bo-temp.faq-support .tab-container .tab-control-container .faq-tab-sidepanel button:first-child {
    padding-top: 0
}

.bo-temp.faq-support .tab-container .tab-control-container .faq-tab-sidepanel button:hover {
    color: #44d62c
}

.bo-temp.faq-support .tab-container .tab-control-container .faq-tab-sidepanel button.selected {
    color: #44d62c
}

.bo-temp.faq-support .tab-container .tab-panel-container {
    flex-grow: 1;
    padding-left: 1rem;
    width: 100%;
    color: #888
}

.bo-temp.faq-support .tab-container .tab-panel-container .tab-panel {
    text-align: left
}

.bo-temp.faq-support .tab-container .tab-panel-container .tab-panel>ol,
.bo-temp.faq-support .tab-container .tab-panel-container .tab-panel>ul {
    list-style: none;
    padding: 0
}

.bo-temp.faq-support .tab-container .tab-panel-container .tab-panel>ol>li h4,
.bo-temp.faq-support .tab-container .tab-panel-container .tab-panel>ul>li h4 {
    font-size: 16px;
    font-weight: 400;
    font-family: Roboto, Arial, sans-serif;
    cursor: pointer;
    padding-left: 25px;
    position: relative;
    margin: 20px 0
}

.bo-temp.faq-support .tab-container .tab-panel-container .tab-panel>ol>li h4:hover,
.bo-temp.faq-support .tab-container .tab-panel-container .tab-panel>ul>li h4:hover {
    color: #fff
}

.bo-temp.faq-support .tab-container .tab-panel-container .tab-panel>ol>li h4:hover span.plus-toggle:before,
.bo-temp.faq-support .tab-container .tab-panel-container .tab-panel>ul>li h4:hover span.plus-toggle:before {
    color: #44d62c
}

.bo-temp.faq-support .tab-container .tab-panel-container .tab-panel>ol>li h4 span.plus-toggle::before,
.bo-temp.faq-support .tab-container .tab-panel-container .tab-panel>ul>li h4 span.plus-toggle::before {
    color: #888;
    content: "+";
    display: inline-block;
    font-size: 1.6rem;
    position: absolute;
    left: 0;
    top: -7px
}

.bo-temp.faq-support .tab-container .tab-panel-container .tab-panel>ol>li h4 button,
.bo-temp.faq-support .tab-container .tab-panel-container .tab-panel>ul>li h4 button {
    text-align: left;
    background: 0 0;
    border: none;
    color: inherit;
    font-size: inherit;
    cursor: pointer
}

.bo-temp.faq-support .tab-container .tab-panel-container .tab-panel>ul ul {
    list-style: initial;
    padding-left: 1em;
    margin-left: 1em
}

.bo-temp.faq-support .tab-container .tab-panel-container .tab-panel>ul ol {
    padding-left: 1em;
    margin-left: 1em
}

.bo-temp.faq-support .tab-container .tab-panel-container .tab-panel ol+ul {
    display: none;
    padding: 0;
    height: 0;
    overflow: hidden;
    padding-left: 25px;
    list-style: none
}

.bo-temp.faq-support .tab-container .tab-panel-container .tab-panel ol+ul>li {
    color: #fff;
    font-size: 16px;
    padding-bottom: 20px
}

.bo-temp.faq-support .tab-container .tab-panel-container .tab-panel ol+ul>li:last-child {
    padding-bottom: 1rem
}

.bo-temp.faq-support .tab-container .tab-panel-container .tab-panel h3 {
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    text-transform: uppercase
}

.bo-temp.faq-support .tab-container .tab-panel-container .tab-panel h3:not(:first-of-type) {
    padding-top: 18px
}

.bo-temp.faq-support .tab-container .tab-panel-container .tab-panel table {
    margin: 20px 0;
    border-collapse: collapse
}

.bo-temp.faq-support .tab-container .tab-panel-container .tab-panel table td,
.bo-temp.faq-support .tab-container .tab-panel-container .tab-panel table th {
    border: .0625rem solid #444;
    padding: 10px
}

.bo-temp.faq-support .tab-container .tab-panel-container .tab-panel .show-content h4 {
    color: #fff
}

.bo-temp.faq-support .tab-container .tab-panel-container .tab-panel .show-content h4 span.plus-toggle::before {
    color: #44d62c;
    content: "−"
}

.bo-temp.faq-support .tab-container .tab-panel-container .tab-panel .show-content+ul {
    display: block;
    height: auto
}

.bo-temp.faq-support .tab-container .tab-panel-container .hidden {
    height: 0;
    overflow: hidden;
    display: none
}

.bo-temp.faq-support .faq-tab-select-dropdown {
    display: none
}

.bo-temp.faq-support .select-hidden {
    display: none;
    visibility: hidden;
    padding-right: 10px
}

.bo-temp.faq-support .select {
    --background-color: #000;
    --select-color: #fff;
    --select-hover-color: #333;
    --select-color-background: #999;
    --select-list-background-color: #111;
    --select-arrow-color: #44d62c;
    --select-background: #000;
    --select-width: 220px;
    --select-max-width: 780px;
    --select-height: 40px;
    cursor: pointer;
    position: relative;
    font-size: 16px;
    color: var(--select-color);
    width: 100%;
    max-width: var(--select-max-width);
    height: var(--select-height);
    margin-bottom: 20px
}

.bo-temp.faq-support .select .select-styled {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--select-background);
    padding: 8px 15px;
    border-radius: 5px;
    border: 1px solid var(--select-color-background);
    cursor: pointer;
    font-size: inherit
}

.bo-temp.faq-support .select .select-styled:after {
    content: "";
    width: 0;
    height: 0;
    border: 7px solid transparent;
    border-color: var(--select-arrow-color) transparent transparent transparent;
    position: absolute;
    top: 16px;
    right: 10px
}

.bo-temp.faq-support .select .select-styled:hover {
    background-color: var(--select-background)
}

.bo-temp.faq-support .select .select-styled.active,
.bo-temp.faq-support .select .select-styled:active {
    background-color: var(--select-background)
}

.bo-temp.faq-support .select .select-styled.active:after,
.bo-temp.faq-support .select .select-styled:active:after {
    top: 9px;
    border-color: transparent transparent var(--select-arrow-color) transparent
}

.bo-temp.faq-support .select .select-styled .select-text {
    display: block;
    text-align: left;
    color: #fff
}

.bo-temp.faq-support .select .select-options {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 999;
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: var(--select-list-background-color);
    border-radius: 5px
}

.bo-temp.faq-support .select .select-options.active,
.bo-temp.faq-support .select .select-options:active {
    display: unset
}

.bo-temp.faq-support .select .select-options li {
    color: var(--select-color-background);
    margin: 0;
    padding: 12px 0;
    text-indent: 15px;
    border-top: 1px solid var(--select-background)
}

.bo-temp.faq-support .select .select-options li:hover,
.bo-temp.faq-support .select .select-options li[aria-selected=true] {
    color: var(--select-color);
    background: var(--select-hover-color)
}

.bo-temp.faq-support .select .select-options li[rel=hide] {
    display: none
}

@media screen and (max-width:768px) {
    .bo-temp.faq-support .tab-container {
        flex-direction: column
    }

    .bo-temp.faq-support .faq-tab-select-dropdown {
        display: none;
        width: 100%
    }

    .bo-temp.faq-support .tab-container .tab-panel-container {
        padding: 0
    }

    .bo-temp.faq-support .tab-container .tab-control-container {
        padding-right: 0;
        max-width: unset
    }

    .bo-temp.faq-support .tab-container .tab-control-container .faq-tab-sidepanel {
        display: none
    }

    .bo-temp.faq-support .tab-container .tab-control-container .faq-tab-select-dropdown {
        display: block;
        width: 100%
    }

    .bo-temp.faq-support .tab-container .tab-panel-container {
        padding: 0
    }
}

#sticky-nav.snv2 {
    position: fixed;
    top: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    z-index: 4;
    left: 0;
    max-width: 100%;
    background-color: #101010
}

@media (max-width:767px) {
    #sticky-nav.snv2 {
        top: 0;
        position: relative
    }

    #sticky-nav.snv2.sticky {
        position: fixed
    }
}

#sticky-nav.snv2 li {
    list-style: none;
    font-size: 14px;
    line-height: 13px;
    font-weight: 400;
    color: #999;
    padding: 0 10px
}

#sticky-nav.snv2 li:not([class=cta-wrap]) a:hover {
    color: #44d62c
}

#sticky-nav.snv2 li.current a {
    color: #555;
    pointer-events: none
}

#sticky-nav.snv2 li a {
    display: inline-block;
    text-decoration: none;
    color: #888;
    transition: color .2s linear
}

#sticky-nav.snv2 #menu-list {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    -moz-column-gap: 24px;
    column-gap: 24px;
    align-items: center
}

@media (min-width:768px) {
    #sticky-nav.snv2 #menu-list {
        justify-content: space-between;
        grid-template-rows: minmax(56px, 1fr) auto
    }
}

@media (max-width:767px) {
    #sticky-nav.snv2 #menu-list {
        grid-template-rows: minmax(47px, 1fr) auto
    }
}

#sticky-nav.snv2 #menu-list>ul {
    grid-column: span 4/13;
    justify-content: end
}

@media (min-width:768px) {
    #sticky-nav.snv2 #menu-list>ul {
        display: flex;
        align-items: center;
        margin: 0;
        padding: 0 20px
    }
}

@media (max-width:767px) {
    #sticky-nav.snv2 #menu-list>ul {
        grid-column: 1/13;
        height: 0;
        overflow: hidden;
        margin: 0
    }
}

#sticky-nav.snv2 .mobile-nav {
    display: none
}

@media (max-width:767px) {
    #sticky-nav.snv2 .mobile-nav {
        display: inline-block;
        grid-column: span 5/13;
        justify-content: end
    }
}

@media (max-width:321px) {
    #sticky-nav.snv2 .mobile-nav {
        grid-column: span 6/13
    }
}

#sticky-nav.snv2 .product-name {
    grid-column: 1/span 8;
    color: #fff;
    font-size: 15px;
    font-weight: 400;
    line-height: 16px;
    font-family: RazerF5;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: .5rem 0;
    margin: 0
}

@media (max-width:767px) {
    #sticky-nav.snv2 .product-name {
        font-size: .7rem;
        grid-column: 1/span 7
    }
}

@media (max-width:321px) {
    #sticky-nav.snv2 .product-name {
        grid-column: 1/span 6
    }
}

#sticky-nav.snv2 .cta-btn {
    color: #000 !important;
    font-size: 13px;
    line-height: 14px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    margin-top: 1px;
    padding: 8px 14px;
    border-radius: 2px;
    background: #0f0;
    transition: background-color .15s ease-in-out
}

#sticky-nav.snv2 .cta-btn:hover {
    background-color: #73e161
}

@media (max-width:767px) {
    #sticky-nav.snv2 .cta-btn {
        float: right;
        padding: 8px 6px;
        min-width: 54px
    }
}

@media (min-width:768px) {
    #sticky-nav.snv2 .container {
        padding: 0
    }
}

@media (max-width:767px) {
    #sticky-nav.snv2 #menu-list ul li {
        display: inline-block;
        width: 100%;
        max-width: 100%
    }

    #sticky-nav.snv2 #menu-list ul li.active a {
        border: 0
    }

    #sticky-nav.snv2 #menu-list ul li.cta-btn {
        display: none
    }

    #sticky-nav.snv2 #menu-list ul li a {
        height: auto;
        border: 0;
        padding: 10px 0
    }

    #sticky-nav.snv2 #menu-list ul.nav-opened {
        height: auto;
        border-top: 1px solid #333;
        margin: 0;
        padding: 6px 0 1rem
    }

    #sticky-nav.snv2 #menu-list ul.nav-opened li {
        animation-name: fadeInDown;
        animation-fill-mode: both;
        animation-duration: .5s
    }

    #sticky-nav.snv2 #menu-list ul.nav-opened .cta-btn,
    #sticky-nav.snv2 #menu-list ul.nav-opened .cta-wrap {
        display: none
    }

    #sticky-nav.snv2 .subnav-toggle {
        min-width: 40px;
        position: relative;
        float: right;
        margin: 0 0 0 10px;
        padding: 8px 10px;
        background-color: transparent;
        background-image: none;
        border: 1px solid transparent;
        border-color: #333;
        border-radius: 4px
    }

    #sticky-nav.snv2 .icon-bar {
        background-color: #fff;
        display: block;
        width: 22px;
        height: 2px;
        border-radius: 1px
    }

    #sticky-nav.snv2 .icon-bar:not(:first-child) {
        margin-top: 4px
    }
}

@media screen and (min-width:768px) {

    cx-page-slot.Section2A.has-components,
    cx-page-slot.Section2B.has-components {
        margin-top: 50px !important
    }

    app-content-page {
        margin-top: 60px !important
    }
}

@media (max-width:767px) {
    @keyframes fadeInDown {
        from {
            opacity: 0;
            transform: translatey(-10px)
        }

        to {
            opacity: 1;
            transform: translatey(0)
        }
    }
}

html[lang=br-PT] #sticky-nav.snv2 .product-name,
html[lang=de-DE] #sticky-nav.snv2 .product-name,
html[lang=es-ES] #sticky-nav.snv2 .product-name,
html[lang=es-MX] #sticky-nav.snv2 .product-name,
html[lang=fr-FR] #sticky-nav.snv2 .product-name,
html[lang=it-IT] #sticky-nav.snv2 .product-name {
    grid-column: 1/span 6
}

@media screen and (min-width:768px) {

    html[lang=br-PT] #sticky-nav.snv2 #menu-list>ul,
    html[lang=de-DE] #sticky-nav.snv2 #menu-list>ul,
    html[lang=es-ES] #sticky-nav.snv2 #menu-list>ul,
    html[lang=es-MX] #sticky-nav.snv2 #menu-list>ul,
    html[lang=fr-FR] #sticky-nav.snv2 #menu-list>ul,
    html[lang=it-IT] #sticky-nav.snv2 #menu-list>ul {
        grid-column: span 6/13
    }
}

html[lang=br-PT] #sticky-nav.snv2 .mobile-nav,
html[lang=de-DE] #sticky-nav.snv2 .mobile-nav,
html[lang=es-ES] #sticky-nav.snv2 .mobile-nav,
html[lang=es-MX] #sticky-nav.snv2 .mobile-nav,
html[lang=fr-FR] #sticky-nav.snv2 .mobile-nav,
html[lang=it-IT] #sticky-nav.snv2 .mobile-nav {
    grid-column: span 6/13
}

@media screen and (max-width:767px) {
    .razer-rtl #sticky-nav.snv2 .subnav-toggle {
        float: left;
        margin: 0 10px 0 0
    }

    .razer-rtl #sticky-nav.snv2 .cta-btn {
        float: left
    }
}

section.custom-design {
    padding: 48px 0 1rem;
    text-align: center;
    overflow: hidden
}

section.custom-design.show-thumbnails {
    background-color: #111
}

section.custom-design .content-text {
    text-align: center;
    max-width: 980px;
    margin: 0 auto
}

section.custom-design .custom-showcase {
    margin-top: 30px;
    position: relative
}

section.custom-design .custom-showcase .view-wrapper {
    white-space: nowrap
}

section.custom-design .custom-showcase .view-wrapper ul {
    display: inline-block;
    white-space: nowrap
}

section.custom-design .custom-showcase .view-wrapper ul p {
    font-size: 20px;
    color: red;
    font-weight: 700;
    position: absolute
}

section.custom-design .custom-showcase .view-wrapper ul li {
    display: inline-block;
    margin: 10px 5px;
    text-align: center;
    width: 800px
}

section.custom-design .custom-showcase .view-wrapper ul {
    opacity: 0;
    transition: opacity 1s ease
}

section.custom-design .custom-showcase .view-wrapper ul.active {
    opacity: 1
}

section.custom-design .custom-showcase .view-wrapper ul li img {
    width: 100%
}

section.custom-design .custom-showcase .view-wrapper.small ul {
    margin: 0
}

section.custom-design .custom-showcase .view-wrapper.small ul li {
    width: 220px;
    height: 200px;
    background: linear-gradient(1deg, #3c3a3a 30%, #212121 90%);
    border-radius: 1.25rem;
    padding: 1rem
}

section.custom-design .custom-showcase .view-wrapper.small ul li img {
    margin: 0 auto;
    max-width: 60%;
    display: block
}

section.custom-design.show-thumbnails .custom-showcase .view-wrapper.small ul li {
    width: 300px;
    padding: .5rem;
    margin: 10px 5px;
    background: #000;
    border-radius: 0;
    height: auto
}

section.custom-design.show-thumbnails .custom-showcase .view-wrapper.small ul li img {
    width: 100%;
    max-width: 100%
}

section.custom-design.show-thumbnails .custom-showcase .view-wrapper.small ul li img {
    margin: 0 auto;
    display: block
}

section.custom-design .custom-showcase .animation-ctrl-btn {
    display: flex;
    justify-content: flex-end;
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    z-index: 2
}

section.custom-design .custom-showcase .animation-ctrl-btn button {
    background: 0 0;
    border: 0;
    color: #fff;
    vertical-align: middle;
    cursor: pointer
}

section.custom-design .custom-showcase .animation-ctrl-btn button .play-pause-btn-wrapper {
    width: 35px;
    height: 35px;
    background: #44d62c;
    border: 0;
    border-radius: 24px;
    padding: 5px 10px;
    margin: 0 auto
}

section.custom-design .custom-showcase .animation-ctrl-btn button img {
    width: 10px
}

section.custom-design .view-wrapper.large ul {
    padding: 0
}

section.custom-design .custom-showcase .animation-ctrl-btn button {
    border: 0;
    color: #fff;
    vertical-align: middle;
    cursor: pointer;
    background: #44d62c;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    width: 30px;
    height: 30px;
    margin-right: 1rem
}

section.custom-design {
    background-color: #000;
    padding-bottom: 6.25rem
}

section.custom-design h2 {
    font-size: 48px;
    font-weight: 700;
    color: #44d62c;
    font-family: "Titillium Web", RazerF5, Arial, Helvetica, sans-serif;
    letter-spacing: 2px;
    margin: 0;
    line-height: .98
}

@media (max-width:768px) {
    section.custom-design .custom-showcase .view-wrapper ul {
        margin-bottom: 0
    }

    section.custom-design .custom-showcase .view-wrapper ul li {
        width: 400px;
        margin: 0 5px
    }

    section.custom-design {
        padding-bottom: 48px
    }

    section.custom-design h2 {
        font: 700 28px/1 "Titillium Web", RazerF5, Arial, Helvetica, sans-serif
    }
}

.bo-temp.carousel-v2 .main-holder {
    display: grid;
    width: 100%
}

.bo-temp.carousel-v2 div.content-inner,
.bo-temp.carousel-v2 h2,
.bo-temp.carousel-v2 ul {
    grid-area: 1/1;
    color: #fff;
    max-width: 100%
}

.bo-temp.carousel-v2 .content-inner {
    z-index: 2;
    margin: 0 auto;
    font-weight: 300;
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-size: 18px;
    display: grid
}

.bo-temp.carousel-v2 .content-inner ul {
    display: grid;
    grid-area: 2/1;
    width: 980px;
    margin: 0 auto
}

@media (max-width:980px) {
    .bo-temp.carousel-v2 .content-inner ul {
        width: 100%
    }
}

@media (max-width:768px) {
    .bo-temp.carousel-v2 .content-inner ul {
        grid-area: 4/1;
        padding: 0 30px;
        width: auto;
        max-width: 100%
    }
}

.bo-temp.carousel-v2 .content-inner ul li {
    grid-area: 1/1;
    opacity: 0
}

.bo-temp.carousel-v2 .content-inner ul li.active {
    animation: fadeIn 1s;
    opacity: 1
}

.bo-temp.carousel-v2 .content-inner ul li.inactive {
    animation: fadeOut 1s;
    opacity: 1
}

.bo-temp.carousel-v2 .content-inner ul.button-icons {
    display: flex;
    grid-area: 3/1
}

@media (max-width:768px) {
    .bo-temp.carousel-v2 .content-inner ul.button-icons {
        grid-area: 2/1;
        padding: 0 30px 30px 30px
    }
}

.bo-temp.carousel-v2 .button-icons {
    display: flex;
    margin-top: 6rem
}

@media (max-width:768px) {
    .bo-temp.carousel-v2 .button-icons {
        flex-wrap: wrap;
        padding: 0 30px
    }
}

.bo-temp.carousel-v2 .button-icons li {
    opacity: 1 !important
}

.bo-temp.carousel-v2 .button-icons button {
    background: 0 0;
    border: 0;
    padding: 0;
    cursor: pointer;
    position: relative;
    display: grid
}

.bo-temp.carousel-v2 .button-icons button img {
    top: 0;
    left: 0;
    grid-area: 1/1
}

.bo-temp.carousel-v2 .button-icons button img.active {
    animation: fadeIn 1s;
    opacity: 1
}

.bo-temp.carousel-v2 .button-icons button img.inactive {
    animation: fadeOut 1s;
    opacity: 1
}

@media (max-width:768px) {
    .bo-temp.carousel-v2 .button-icons button img {
        max-width: 80px
    }
}

.bo-temp.carousel-v2 .button-icons button .img-0 {
    z-index: 1
}

.bo-temp.carousel-v2 .button-icons button.active .img-1 {
    z-index: 1
}

.bo-temp.carousel-v2 .main-content {
    gap: 24px;
    margin-top: 48px
}

@media (max-width:768px) {
    .bo-temp.carousel-v2 .main-content {
        margin-top: 0
    }
}

.bo-temp.carousel-v2 ul.images {
    max-width: 100%;
    z-index: 1;
    display: grid;
    grid-area: 1/1/span 3;
    width: 100%
}

@media (max-width:768px) {
    .bo-temp.carousel-v2 ul.images {
        grid-area: 3/1;
        padding: 0
    }
}

.bo-temp.carousel-v2 ul.images li {
    opacity: 0;
    grid-area: 1/1
}

.bo-temp.carousel-v2 ul.images li.active {
    animation: fadeIn 1s;
    opacity: 1
}

.bo-temp.carousel-v2 ul.images li.inactive {
    animation: fadeOut 1s;
    opacity: 0
}

.bo-temp.carousel-v2 ul.images picture img {
    min-height: 790px;
    -o-object-fit: cover;
    object-fit: cover
}

@media (max-width:768px) {
    .bo-temp.carousel-v2 ul.images picture img {
        min-height: 0;
        -o-object-fit: none;
        object-fit: none
    }
}

.bo-temp.carousel-v2 h2,
.bo-temp.carousel-v2 h3,
.bo-temp.carousel-v2 h4,
.bo-temp.carousel-v2 h5 {
    font-family: "Titillium Web", RazerF5, Arial, Helvetica, sans-serif;
    line-height: 1;
    margin: 0
}

.bo-temp.carousel-v2 h2 {
    z-index: 2;
    font-size: 60px;
    line-height: 1;
    margin: 80px auto auto auto;
    grid-area: 1/1;
    width: 980px;
    font-weight: 700
}

@media (max-width:980px) {
    .bo-temp.carousel-v2 h2 {
        width: 100%
    }
}

@media (max-width:768px) {
    .bo-temp.carousel-v2 h2 {
        margin-top: 1rem;
        font-size: 48px;
        padding: 0 30px;
        max-width: 100%;
        width: auto;
        margin: 1rem 0
    }
}

.bo-temp.carousel-v2 h3 {
    font-size: 48px;
    font-weight: 700;
    text-transform: uppercase
}

@media (max-width:768px) {
    .bo-temp.carousel-v2 h3 {
        font-size: 30px;
        margin: 1rem 0
    }
}

.bo-temp.carousel-v2 h4 {
    font-size: 24px;
    text-transform: uppercase
}

@media (max-width:768px) {
    .bo-temp.carousel-v2 h4 {
        font-size: 20px
    }
}

.bo-temp.carousel-v2 .lt1 {
    grid-area: 1/1/span 1/span 2
}

.bo-temp.carousel-v2 .lt2 {
    grid-area: 2/1
}

.bo-temp.carousel-v2 .lt3 {
    grid-area: 2/2
}

.bo-temp.carousel-v2 ul {
    padding: 0;
    margin: 0;
    z-index: 2;
    list-style: none
}

.bo-temp.carousel-v2 .c1 {
    display: grid;
    max-width: 310px
}

@media (max-width:768px) {
    .bo-temp.carousel-v2 .c1 {
        max-width: 100%
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

.bo-temp.carousel-vertical {
    padding-bottom: 6.25rem !important
}

@media (max-width:768px) {
    .bo-temp.carousel-vertical {
        padding-bottom: 48px !important
    }
}

.bo-temp.carousel-vertical .main-holder {
    display: flex;
    width: 100%
}

.bo-temp.carousel-vertical .slides {
    display: flex;
    gap: 24px
}

@media (max-width:768px) {
    .bo-temp.carousel-vertical .slides {
        flex-flow: wrap
    }
}

.bo-temp.carousel-vertical .slides ul {
    padding: 0;
    margin: 0
}

.bo-temp.carousel-vertical .slides .stage {
    flex: 1 1 66.666%;
    position: relative
}

@media (max-width:768px) {
    .bo-temp.carousel-vertical .slides .stage {
        display: grid
    }
}

.bo-temp.carousel-vertical .slides .stage .stage-slide {
    position: absolute;
    width: 100%;
    opacity: 0;
    transition: opacity 1s ease;
    pointer-events: none;
    list-style: none
}

@media (max-width:768px) {
    .bo-temp.carousel-vertical .slides .stage .stage-slide {
        position: relative;
        grid-area: 1/1
    }
}

.bo-temp.carousel-vertical .slides .stage .stage-slide iframe {
    height: 420px
}

@media (max-width:768px) {
    .bo-temp.carousel-vertical .slides .stage .stage-slide iframe {
        height: auto
    }
}

.bo-temp.carousel-vertical .slides .stage .stage-slide.active {
    opacity: 1;
    pointer-events: all
}

.bo-temp.carousel-vertical .slides .stage .stage-slide .lt1 {
    font-family: "Titillium Web", RazerF5, Arial, Helvetica, sans-serif;
    color: #44d62c;
    font-weight: 700;
    font-size: 24px;
    text-align: left;
    margin: 1rem 0 .5rem 0;
    line-height: 1
}

.bo-temp.carousel-vertical .slides .stage .stage-slide .lt2 {
    color: #9a9a9a;
    text-align: left
}

.bo-temp.carousel-vertical .slides .button-icons {
    flex: 1 1 33.3333%;
    list-style-type: none
}

@media (max-width:768px) {
    .bo-temp.carousel-vertical .slides .button-icons {
        display: inline-flex;
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
        -ms-overflow-style: none;
        scrollbar-width: none;
        scroll-behavior: smooth
    }
}

.bo-temp.carousel-vertical .slides .button-icons li {
    scroll-snap-align: start
}

.bo-temp.carousel-vertical .slides .button-icons button {
    width: 100%;
    background: #000;
    border-radius: 0;
    border: 0;
    padding: 1rem;
    cursor: pointer;
    margin: 0;
    transition: background-color ease .2s, color ease .2s
}

@media (max-width:768px) {
    .bo-temp.carousel-vertical .slides .button-icons button {
        width: 80vw;
        height: 100%;
        display: flex;
        flex-direction: column
    }
}

.bo-temp.carousel-vertical .slides .button-icons button.active {
    background-color: #222
}

.bo-temp.carousel-vertical .slides .button-icons button.active .lt1 {
    color: #44d62c
}

.bo-temp.carousel-vertical .slides .button-icons button div {
    text-align: left;
    text-overflow: ellipsis
}

.bo-temp.carousel-vertical .slides .button-icons button .lt1 {
    font-family: "Titillium Web", RazerF5, Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all ease .2s
}

.bo-temp.carousel-vertical .slides .button-icons button .lt2 {
    font-family: Roboto;
    font-weight: 300;
    font-size: 18px;
    color: #9a9a9a;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis
}

.bo-temp.carousel-vertical.image-type .content {
    padding-bottom: 0
}

.bo-temp.carousel-vertical.image-type .main-content img {
    -o-object-fit: cover;
    object-fit: cover
}

.bo-temp.carousel-vertical.image-type .slides .stage {
    display: grid
}

.bo-temp.carousel-vertical.image-type .slides .stage .stage-slide {
    position: relative;
    grid-area: 1/1
}

.bo-temp.carousel-vertical.image-type .button-icons {
    scrollbar-width: none;
    -ms-overflow-style: none
}

@media (max-width:768px) {
    .bo-temp.carousel-vertical.image-type .button-icons {
        flex: 1 1 100%
    }
}

.bo-temp.carousel-vertical.image-type .button-icons::-webkit-scrollbar {
    display: none
}

.bo-temp.carousel-vertical.image-type .button-icons button {
    padding-bottom: 0
}

@media (max-width:768px) {
    .bo-temp.carousel-vertical.image-type .button-icons button {
        padding: 1rem
    }
}

.bo-temp.carousel-vertical.image-type .button-icons button .lt1 {
    line-height: 1.1;
    margin-bottom: 1rem
}

.bo-temp.carousel-vertical.image-type .button-icons button .lt2 {
    transition: maxHeight ease 1s;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
    text-overflow: ellipsis;
    max-height: 0
}

@media (max-width:768px) {
    .bo-temp.carousel-vertical.image-type .button-icons button .lt2 {
        max-height: 0
    }
}

.bo-temp.carousel-vertical.image-type .button-icons button .lt1,
.bo-temp.carousel-vertical.image-type .button-icons button .lt2 {
    display: block;
    -webkit-line-clamp: 100 !important;
    -webkit-box-orient: vertical;
    overflow: visible;
    text-overflow: initial
}

@media (max-width:768px) {

    .bo-temp.carousel-vertical.image-type .button-icons button .lt1,
    .bo-temp.carousel-vertical.image-type .button-icons button .lt2 {
        display: block;
        height: auto;
        max-height: 100%
    }
}

.bo-temp.carousel-vertical.image-type .button-icons button.active {
    padding-bottom: 1rem
}

.bo-temp.carousel-vertical.image-type .button-icons button.active .lt2 {
    max-height: 100%
}