.blue {
    color: #39b5fb
}

.red {
    color: #bd0707
}

.white {
    color: #fff
}

.gray {
    color: #797979
}

.bg-blue {
    background: #1074b7
}

.text-gray {
    color: #aeaeae !important
}

.thin {
    font-weight: 100 !important
}

.mobile {
    display: none
}

#pdp .panel-spacer {
    opacity: 0
}

#pdp {
    overflow: hidden
}

#pdp .panel-template.padding-top-4 {
    padding-top: 4em
}

#pdp .panel-template.padding-bottom-4 {
    padding-bottom: 4em
}

#pdp .panel-template .position-relative.wide100 {
    position: relative;
    width: 100%
}

#pdp .panel-template .col-half,
#pdp .panel-template .col-third {
    position: relative
}

#pdp .panel-template .position-absolute.col-half {
    height: 100%;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0
}

#pdp .panel-template .position-absolute.col-half.left {
    left: 0
}

#pdp .panel-template .position-absolute.col-half.right {
    right: 0
}

#pdp .panel-template .position-absolute.col-half.right.fromCenter {
    left: 50%;
    max-width: 572px;
    right: auto
}

#pdp .panel-template .wrapper {
    display: table
}

#pdp .panel-template .wrapper .vertical-center {
    display: table-cell;
    vertical-align: middle
}

#pdp .panel-template .position-absolute.vertical-center {
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transform-origin: bottom left;
    vertical-align: baseline
}

.mobile .mobile-only {
    display: block
}

.desktop .mobile-only {
    display: none
}

.mobile .desktop-only {
    display: none
}

.desktop .desktop-only {
    cursor: pointer;
    display: block
}

#pdp .panel-template .position-absolute.col-half {
    bottom: 0;
    padding: 0;
    position: absolute;
    height: 61%;
    top: auto
}

#pdp .panel-template .position-absolute.fromCenter {
    left: 50%;
    top: 50%
}

#pdp section h1 {
    font-family: BebasNeuePro-SmEBd, sans-serif;
    font-size: 3.5em
}

#pdp .double .content-wrapper {
    max-width: unset;
    padding: 7vw 0;
    position: relative;
    z-index: 1
}

#pdp .double .half-container {
    height: 100%;
    position: absolute;
    width: 50%
}

#pdp .double .half-container.left {
    left: 0;
    top: 0
}

#pdp .double .half-container.right {
    right: 0;
    top: 0
}

#pdp .double .third {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    width: 33%
}

#pdp .double .third:first-child {
    margin-left: 8%;
    width: 25%
}

#pdp .double .two-thirds {
    display: inline-block;
    vertical-align: middle;
    width: 67%
}

#pdp .double .dec-bar {
    height: 4px;
    margin-bottom: 2em;
    width: 120px
}

#pdp .double .title h2 {
    font-family: BebasNeuePro-SmEBd, sans-serif;
    font-size: 5.25em;
    line-height: 1.1em !important;
    text-align: left
}

#pdp .double .right {
    background: #0d5ba7;
    background: -moz-linear-gradient(45deg, #0d5ba7 0, #0f6eb3 100%);
    background: -webkit-linear-gradient(45deg, #0d5ba7 0, #0f6eb3 100%);
    background: linear-gradient(45deg, #0d5ba7 0, #0f6eb3 100%)
}

#pdp .double#modes {
    padding: 0
}

#pdp .double#modes .content-wrapper .mode-numbers {
    left: calc(100% - 250px);
    position: absolute;
    top: 30px
}

#pdp .double#modes .content-wrapper .mode-numbers .mode-num {
    font-size: 240px;
    line-height: 240px;
    opacity: 0;
    position: absolute;
    top: 0;
    transform: translateX(20px);
    transition: .8s transform, .8s opacity
}

#pdp .double#modes .content-wrapper .mode-numbers .mode-num.selected {
    transform: translateX(0);
    opacity: 1
}

#pdp .double#modes .content-wrapper .mode-numbers .mode-num span {
    opacity: .3
}

#pdp .double .third .feature-list,
#pdp .double .third .title-group {
    margin: 0 auto 20px;
    width: calc(100% - 30px)
}

#pdp .double .feature-list {
    margin: 0 auto
}

#pdp .double#modes .arrows {
    display: block;
    margin: 2em auto auto 15px;
    position: relative;
    width: 70px
}

#pdp .double#modes .arrows .arrow {
    border-radius: 50%;
    cursor: pointer;
    display: inline-block;
    font-size: 0;
    height: 30px;
    position: relative;
    width: 30px
}

#pdp .double#modes .arrows .arrow:hover {
    background: #49a6e4
}

#pdp .double#modes .arrows .arrow:after,
#pdp .double#modes .arrows .arrow:before {
    background: #fff;
    content: '';
    height: 1px;
    left: 50%;
    position: absolute;
    top: 50%;
    width: 25%
}

#pdp .double#modes .arrows .arrow:before {
    transform: rotate(45deg) translateX(-50%)
}

#pdp .double#modes .arrows .arrow:after {
    transform: rotate(-45deg) translateX(-50%)
}

#pdp .double#modes .arrows .arrow.prev {
    transform: scaleX(-1)
}

#pdp .double#modes .arrows .arrow.next {
    float: right
}

#pdp .double#modes .feature-list h4 {
    font-family: BebasNeuePro-SmEBd, sans-serif;
    font-size: 2em;
    letter-spacing: .03em;
    line-height: 1em;
    margin-bottom: 10px
}

#pdp .double#modes .feature-list .text-gray.selected {
    color: #ece81a !important
}

#pdp .double#modes .third img {
    width: 100%
}

#pdp .double#modes .third img.mode-img {
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: .5s opacity
}

#pdp .double#modes .third img.mode-img.selected {
    opacity: 1
}

#pdp .double#modes .third img.mode-img.spacer {
    position: relative
}

#pdp .double#modes .third .description {
    height: 19em;
    position: relative
}

#pdp .double#modes .third .description .descript {
    font-size: 1.3em;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: .5s opacity
}

#pdp .double#modes .third .description .descript.selected {
    opacity: 1
}

#pdp .double#modes .third .description img {
    margin-bottom: 2em;
    width: 200px
}

#pdp .double#modes .third .description a.cta {
    background-color: #fff;
    color: #000;
    font-size: .8em
}

#pdp .double#modes .third .description a.cta:active,
#pdp .double#modes .third .description a.cta:hover {
    background-color: #eee
}

#pdp #qi-charging {
    background: #222 url(//cwsmgmt.corsair.com/pdp/darkcore-rgb-pro/images/dark_core_pro_se_charge.jpg) center top no-repeat;
    background-size: cover;
    min-height: 500px
}

#pdp #qi-charging .gradient-overlay {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .9));
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%
}

#pdp #qi-charging.panel-template .wrapper.text-center {
    bottom: 0;
    left: 50%;
    margin: 0;
    padding-bottom: 7vw;
    position: absolute;
    transform: translateX(-50%)
}

#pdp #grip.panel-template {
    background: #111;
    overflow: hidden;
    padding: 7vw 0
}

#pdp #grip .wrapper {
    z-index: 2
}

#pdp .vid-bg-wrapper {
    height: 100%;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 60%;
    z-index: 1
}

#pdp .vid-gradient {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0) 50%, #111 90%)
}

#pdp .vid-bg-wrapper video {
    display: inline-block;
    min-height: 100%;
    width: 100%
}

#pdp #accuracy h1.callout {
    color: #fecb00;
    font-size: 8em;
    left: 25%;
    line-height: .25em;
    position: absolute;
    text-align: center;
    text-shadow: 0 3px 12px #222;
    top: 60%;
    transform: translateY(-50%)
}

[lang ~ =pl] #pdp #accuracy h1.callout,
[lang ~ =ru] #pdp #accuracy h1.callout {
    font-size: 7em;
    left: 18%;
    line-height: 1.1em;
    max-width: 800px
}

#pdp #accuracy h1.callout span {
    color: #fff;
    display: block;
    font-size: .15em;
    line-height: 7em;
    margin-top: 0
}

[lang ~ =pl] #pdp #accuracy h1.callout span,
[lang ~ =ru] #pdp #accuracy h1.callout span {
    line-height: 1em
}

#pdp .interest-points {
    background: #1074b7;
    background-size: cover;
    height: auto;
    padding: 6em 0
}

#pdp .interest-points .content_wrapper {
    margin: 0 auto;
    max-width: 960px;
    width: 100%;
    color: #fff
}

#pdp .interest-points .content_wrapper .full.centered {
    width: 100%;
    position: relative;
    text-align: center
}

#pdp .interest-points .content_wrapper .full h2.header {
    color: #fff;
    font-family: BebasNeuePro-SmEBd, sans-serif;
    font-size: 4em;
    line-height: 1.3em;
    margin: 1em auto;
    max-width: 100%
}

#pdp .interest-points .keyboard {
    margin-top: 4em;
    position: relative
}

#pdp .interest-points .keyboard img.product-img {
    left: 50%;
    margin: 0 auto;
    position: relative;
    transform: translateX(-50%);
    transition: .5s opacity;
    top: 0;
    z-index: 1
}

#pdp .interest-points .keyboard img.product-img.front {
    width: 40%
}

#pdp .interest-points .keyboard img.product-img.back {
    top: 10%;
    width: 85%
}

#pdp .interest-points .keyboard.front img.product-img.front {
    opacity: 1
}

#pdp .interest-points .keyboard img.product-img-shadow {
    height: 100%;
    left: 50%;
    position: absolute;
    top: 50%;
    z-index: 0
}

#pdp .interest-points .keyboard img.product-img-shadow.front {
    transform: translate(-50%, -50%) scale(1.2);
    transform-origin: 50% 40%
}

#pdp .interest-points .keyboard.front img.product-img-shadow.front {
    opacity: .6
}

#pdp .interest-points .keyboard button {
    background: 0 0;
    border: none;
    height: 60px;
    width: 60px;
    position: absolute;
    transform: translateX(20px) translateY(-20px);
    z-index: 2
}

#pdp .interest-points .keyboard button .svg {
    overflow: visible;
    pointer-events: none
}

#pdp .interest-points .keyboard button:focus {
    outline: 0 !important
}

#pdp .interest-points .keyboard button .svg path {
    fill: #fff
}

#pdp .interest-points .keyboard button.active .svg path {
    fill: rgb(0, 132, 255, .8)
}

#pdp .interest-points .keyboard button .svg path.bullet {
    transform-origin: 50%;
    transform: scale(.8)
}

#pdp .interest-points .keyboard button .svg path.ring {
    transform-origin: 50% 50%
}

#pdp .interest-points .keyboard button.ping .svg path.ring {
    animation: ping 1.5s infinite
}

@keyframes ping {
    0% {
        opacity: 1;
        transform: scale(1)
    }

    100% {
        opacity: 0;
        transform: scale(2)
    }
}

#pdp .interest-points .keyboard #one {
    left: 33%;
    top: 35%
}

#pdp .interest-points .keyboard #two {
    right: 53%;
    top: 20%
}

#pdp .interest-points .keyboard #three {
    right: 42%;
    bottom: 8%
}

#pdp .interest-points .keyboard #four {
    right: 45.5%;
    top: 1%
}

#pdp .interest-points .keyboard #five {
    right: 35%;
    top: 55%
}

#pdp .interest-points .keyboard.front #five,
#pdp .interest-points .keyboard.front #four,
#pdp .interest-points .keyboard.front #one,
#pdp .interest-points .keyboard.front #three,
#pdp .interest-points .keyboard.front #two {
    opacity: 1;
    pointer-events: auto
}

#pdp .interest-points .all {
    background-color: #000;
    border-radius: 3px;
    border: 1px solid #a9a9a9;
    color: #4e4e4e;
    height: 170px;
    width: 395px;
    overflow: hidden;
    z-index: 2
}

#pdp .interest-points .all .text {
    color: #4e4e4e;
    float: right;
    width: 57%
}

#pdp .interest-points .all .text .wrap {
    padding: 15px 30px 0 25px;
    text-align: left
}

#pdp .interest-points .all .text .wrap p {
    color: #a9a9a9;
    line-height: 1.5em !important
}

#pdp .interest-points .all .text .wrap h3 {
    line-height: 15px;
    letter-spacing: -.2px
}

#pdp .interest-points .all .image {
    float: left;
    overflow: hidden;
    width: 43%
}

#pdp .interest-points .all .image img {
    width: 171px
}

#pdp .interest-points .all h3 {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal
}

#pdp .interest-points .all p {
    font-size: 1.1em
}

#pdp .interest-points .all.new .image .new-label {
    bottom: 0;
    color: #fff;
    background: rgb(0, 132, 255, .8);
    position: absolute;
    text-align: center;
    transform: rotate(-90deg) translateX(-21px);
    transform-origin: 0 0;
    width: 172px
}

#pdp .interest-points .all.new .image .new-label p {
    margin: 0
}

#pdp .interest-points .flip-nav {
    background: rgba(255, 255, 255, .5);
    border-radius: 20px;
    display: block;
    margin: 4em auto 0;
    padding: 0 5px;
    position: relative;
    width: 130px
}

#pdp .interest-points .flip-nav .flip-option {
    cursor: pointer;
    display: inline-block;
    padding: .5em 0;
    width: 50%
}

#pdp .interest-points .flip-nav .flip-option.selected {
    pointer-events: none
}

#pdp .interest-points .flip-nav .flip-option#flip-front {
    border-right: 1px solid #b9b9b9;
    width: calc(50% - 5px)
}

#pdp .interest-points .flip-nav .flip-option h4 {
    color: #000;
    font-size: 10px;
    font-weight: 400;
    margin: 0;
    text-align: center;
    transition: .5s color
}

#pdp .interest-points .flip-nav .flip-option.selected h4 {
    color: #0084ff
}

#pdp .interest-points .flip-nav .flip-option:hover h4 {
    color: #848484
}

@media only screen and (min-width:1600px) and (max-width:2499px) {

    [lang ~ =pl] #pdp #accuracy h1.callout,
    [lang ~ =ru] #pdp #accuracy h1.callout {
        font-size: 6em;
        left: 12%
    }
}

@media only screen and (max-width:1600px) {
    #pdp .double .third:first-child {
        margin-left: 3%;
        width: 30%
    }

    [lang ~ =pl] #pdp #accuracy h1.callout,
    [lang ~ =ru] #pdp #accuracy h1.callout {
        font-size: 5em;
        left: 16%;
        max-width: 530px;
        top: 65%
    }
}

@media only screen and (max-width:1330px) {

    [lang ~ =pl] #pdp #accuracy h1.callout,
    [lang ~ =ru] #pdp #accuracy h1.callout {
        left: 10%;
        top: 64%
    }
}

@media only screen and (max-width:1200px) {
    .wide-460 {
        width: 460px !important
    }

    #pdp .panel-template .position-absolute.fromCenter {
        top: 50%
    }

    #pdp .double .dec-bar {
        display: none
    }

    #pdp .double .third,
    #pdp .double .two-thirds {
        margin-left: auto;
        width: 50%
    }

    #pdp .double .third.description-container {
        float: right
    }

    #pdp .double .third.description-container .description {
        margin: 0 auto;
        width: calc(100% - 30px)
    }

    #pdp .double#modes .third.description-container .description p {
        font-size: 1.4em;
        line-height: 1.5em;
        margin: 0;
        text-align: center;
        top: auto;
        transform: none;
        width: 100%
    }

    #pdp .double#modes .vertical-center {
        vertical-align: top
    }

    #pdp .double .third:first-child {
        margin-left: auto;
        width: 50%
    }

    #pdp .double#modes .third:nth-child(2) {
        height: calc(100% - 11em);
        position: relative;
        vertical-align: top;
        width: 50%
    }

    #pdp .double#modes .third .title-group {
        margin-top: 3em
    }

    #pdp .double#modes .third img {
        height: auto;
        left: 0;
        position: absolute;
        top: 0;
        transform: none;
        width: 100%
    }

    #pdp .double#modes .third.description-container {
        height: 28vw
    }

    #pdp .double#modes .third .description #descript-1 img {
        margin-bottom: .5em;
        position: relative;
        width: 160px
    }

    [lang ~ =pl] #pdp #accuracy h1.callout,
    [lang ~ =ru] #pdp #accuracy h1.callout {
        left: 20%;
        max-width: 230px;
        top: 56%
    }

    [lang ~ =pl] #pdp #accuracy h1.callout span,
    [lang ~ =ru] #pdp #accuracy h1.callout span {
        font-size: .6em
    }
}

@media only screen and (max-width:1150px) {
    #pdp .double#modes .content-wrapper .mode-numbers {
        top: 0
    }
}

@media only screen and (max-width:992px) {
    #pdp .wide-460 .col-third h1 {
        font-size: 1.8em !important
    }
}

@media only screen and (max-width:990px) {
    #pdp .interest-points .content_wrapper {
        margin: 0 auto;
        max-width: 100%;
        width: calc(100% - 15px);
        color: #fff
    }
}

@media only screen and (max-width:768px) {
    .mobile {
        display: block
    }

    .desktop {
        display: none
    }

    #pdp .panel-template.text-center-mobile {
        text-align: center
    }

    #pdp .double .content-wrapper {
        height: auto;
        margin: 7vw auto 10vw
    }

    #pdp .double#modes .content-wrapper .mode-numbers {
        top: 50%
    }

    #pdp .double .half-container {
        height: 50%;
        width: 100%
    }

    #pdp .double .half-container.left {
        bottom: auto;
        left: 0;
        top: 0
    }

    #pdp .double .half-container.right {
        bottom: 0;
        left: 0;
        top: auto
    }

    #pdp .double .vertical-center {
        display: block;
        height: 100%
    }

    #pdp .double .title h2 {
        text-align: center
    }

    #pdp .double .third,
    #pdp .double .two-thirds {
        width: 100%
    }

    #pdp .double .third {
        height: auto
    }

    #pdp .double .third:first-child {
        margin-left: auto;
        width: 100%
    }

    #pdp .double .third:nth-child(2) {
        height: auto
    }

    #pdp .double .third:nth-child(3) {
        height: auto
    }

    #pdp .double .third .title-group {
        margin-bottom: 4vw;
        margin-top: 4vw
    }

    #pdp .double .third .title-group .dec-bar {
        display: none
    }

    #pdp .double .third .feature-list {
        max-width: calc(100% - 30px);
        width: 385px
    }

    #pdp .double#modes .arrows {
        margin: 4vw auto 0
    }

    #pdp .double .third .title-group h3 {
        text-align: center
    }

    #pdp .double#modes .third img {
        display: block;
        height: 33vw;
        margin: 0 auto;
        width: auto
    }

    #pdp .double .third.description-container {
        float: none
    }

    #pdp .double#modes .vertical-center {
        vertical-align: middle
    }

    #pdp .double#modes .third:first-child {
        padding-bottom: 3em
    }

    #pdp .double#modes .third:nth-child(2) {
        display: block;
        height: auto;
        margin: 0 auto;
        width: 80%
    }

    #pdp .double#modes .third img {
        display: block;
        height: auto;
        left: auto;
        margin: auto;
        position: relative;
        transform: none;
        width: 100%
    }

    #pdp .double#modes .third .description {
        height: auto;
        position: relative
    }

    #pdp .double#modes .third .description #descript-1 img {
        margin-bottom: 0
    }

    #pdp #qi-charging {
        min-height: 300px
    }

    #pdp #grip.panel-template {
        background: #000 url(//cwsmgmt.corsair.com/pdp/darkcore-rgb-pro/videos/corsair_darkcore2020_webloop_side_v1a_compressed.gif) center no-repeat;
        background-size: cover
    }

    #pdp .vid-bg-wrapper {
        display: none
    }

    #pdp .interest-points {
        height: 90vw
    }

    #pdp .interest-points .keyboard {
        margin: 0 auto;
        width: calc(100% - 30px)
    }

    #pdp .interest-points .keyboard img.product-img.front {
        width: 50%
    }

    #pdp .interest-points .keyboard img.product-img-shadow.back {
        transform: translate(-50%, -65%) scale(.7)
    }

    #pdp .interest-points .popup {
        border-radius: 0;
        left: 50% !important;
        overflow: hidden;
        top: calc(78vw + 40px) !important;
        transform: translateX(-50%) !important
    }

    #pdp .interest-points .all .image img {
        transform: scale(1.1)
    }

    #pdp .interest-points .flip-nav {
        margin: 10vw auto 0
    }
}

@media only screen and (max-width:600px) {
    #pdp .interest-points {
        height: 100vw
    }

    #pdp .interest-points .popup {
        border-radius: 0;
        bottom: 4vw;
        left: 50% !important;
        overflow: hidden;
        top: auto !important;
        transform: translateX(-50%) !important
    }
}

@media only screen and (max-width:579px) {
    #pdp .double#modes .third:nth-child(2) {
        width: 90%
    }

    #pdp .double#modes .third img.mode-img.spacer {
        margin-bottom: 30vw
    }
}

@media only screen and (max-width:570px) {
    #pdp .panel-template .col-half.mobile100 {
        position: relative;
        text-align: center;
        width: 100%
    }

    #pdp .panel-template.tall110 {
        height: 110vw
    }

    #pdp .panel-template.padding-bottom-4,
    #pdp .panel-template.padding-top-4 {
        padding: 7em 0 7em
    }

    #pdp .panel-template .wrapper .vertical-center {
        display: block
    }

    #pdp .panel-template .position-absolute.col-half.right.fromCenter {
        bottom: 5vw;
        height: auto;
        left: 5%;
        width: 90%
    }

    #pdp .panel-template .col-half {
        margin-top: 0
    }

    #pdp .panel-template p.description {
        margin: 2em auto 0
    }
}

@media only screen and (max-width:500px) {
    #pdp .double .content-wrapper {
        height: 134vw
    }

    #pdp .double#modes .content-wrapper .mode-numbers {
        height: 32vw;
        left: auto;
        position: absolute;
        right: 0;
        width: 32vw
    }

    #pdp .double#modes .content-wrapper .mode-numbers .mode-num {
        font-size: 32vw;
        line-height: 32vw
    }

    #pdp .double#modes .third img {
        height: auto;
        width: calc(100% - 30px)
    }

    #pdp .double#modes .right {
        height: 40%
    }

    #pdp .double#modes .third.description-container {
        margin-bottom: 2em;
        position: relative
    }

    #pdp .double#modes .third .description {
        height: 100%
    }

    #pdp .double#modes .third .description .descript {
        bottom: 0;
        top: auto
    }
}

@media only screen and (max-width:470px) {
    .wide-460 {
        width: 100% !important
    }

    #pdp .wide-460 .col-third h1 {
        font-size: 1.4em !important
    }
}

@media only screen and (max-width:454px) {
    #pdp .interest-points {
        height: 106vw
    }
}

@media only screen and (max-width:440px) {
    #pdp #tempered.panel-template .col-half.left {
        width: 100%
    }
}

@media only screen and (max-width:404px) {
    #pdp .interest-points {
        height: 138vw
    }

    #pdp .interest-points .popup {
        border-radius: 0;
        left: 50% !important;
        overflow: hidden;
        transform: translateX(-50%) !important
    }
}

@media only screen and (max-width:400px) {
    #pdp .interest-points .all {
        top: 124vw !important;
        width: 100%
    }

    #pdp .interest-points .all .text .wrap {
        padding: 8px
    }

    #pdp .interest-points .all.new .image .new-label {
        width: 170px
    }
}