.blue {
    color: #39b5fb
}

.red {
    color: #bd0707
}

.white {
    color: #fff
}

.gray {
    color: #797979
}

.bg-beige {
    background: #ececec
}

.thin {
    font-weight: 100 !important
}

#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 #panel-hero {
    background-size: cover;
    display: table;
    padding: 0;
    min-height: 600px;
    margin-top: 0;
    overflow: hidden;
    position: relative;
    width: 100%;
    z-index: 1;
    transform: translateZ(0);
    -webkit-transform: translateZ(0)
}

#pdp #panel-hero video {
    display: block;
    left: 50%;
    min-height: 100%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 0
}

#pdp #panel-hero .hero-content-container {
    background: rgba(0, 0, 0, .25) linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, #000)
}

#pdp #panel-hero .background img {
    height: 100%;
    position: relative;
    z-index: 1
}

#pdp #panel-hero .h1 {
    font-size: 5em;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .5)
}

@keyframes hero-animation {
    0% {
        top: -100
    }

    100% {
        top: 0
    }
}

#pdp #panel-hero .hero-content-container {
    display: table;
    min-height: 800px;
    width: 100%
}

#pdp #panel-hero.panel-template .wrapper {
    display: table-cell;
    min-height: 0;
    padding: 10vw 0;
    vertical-align: middle
}

#pdp #panel-hero.panel-template p {
    letter-spacing: .5em;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .5)
}

#pdp #panel-hero .cta:link,
#pdp #panel-hero .cta:visited {
    background-color: #fecb00;
    color: #000
}

#pdp #panel-hero .cta:active,
#pdp #panel-hero .cta:hover {
    background-color: #f6dc73
}

#pdp .interest-points {
    background: #fed100;
    background-size: cover;
    height: 690px;
    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: #000;
    font-weight: 600;
    margin: 1em auto 0
}

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

#pdp .interest-points .harpoon_rgb_pro img.product-img {
    filter: drop-shadow(0 0 75px #6d3707);
    filter: url(#drop-shadow);
    left: 50%;
    margin: auto;
    position: relative;
    transform: translateX(-50%);
    transition: .5s opacity;
    width: 50%;
    z-index: 1;
    -webkit-filter: drop-shadow(0 0 75px #6d3707)
}

#pdp .interest-points .harpoon_rgb_pro img.product-img.back {
    left: 0
}

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

#pdp .interest-points .harpoon_rgb_pro.back img.product-img.front {
    opacity: 0
}

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

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

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

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

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

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

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

#pdp .interest-points .harpoon_rgb_pro 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 .harpoon_rgb_pro #one {
    right: 64%;
    top: 11%
}

#pdp .interest-points .harpoon_rgb_pro #two {
    right: 33%;
    top: 61%
}

#pdp .interest-points .harpoon_rgb_pro #three {
    right: 59%;
    top: 44%
}

#pdp .interest-points .harpoon_rgb_pro.front #one,
#pdp .interest-points .harpoon_rgb_pro.front #three,
#pdp .interest-points .harpoon_rgb_pro.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: 0 30px 0 25px;
    text-align: left
}

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

#pdp .interest-points #popup-g.all .text .wrap p {
    line-height: 1.1em !important
}

#pdp .interest-points #popup-c.all .text .wrap p {
    line-height: 1.25em !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: 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: 2em 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
}

#pdp .testimonial {
    min-height: 400px
}

#pdp .testimonial .h1 {
    border-left: 3px solid #39b5fb;
    font-weight: 300;
    letter-spacing: .05em !important;
    line-height: 1.6 !important;
    margin-left: 15px;
    padding: 25px 0 35px 25px
}

#pdp .testimonial #quote-info {
    font-size: 1.3em;
    font-weight: 100;
    letter-spacing: .1em;
    line-height: 1.6;
    position: relative;
    text-align: right
}

#pdp .testimonial .testimonial-mobile-img {
    display: none
}

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

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

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

    #pdp #panel-hero .h1 {
        font-size: 5em !important
    }

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

@media only screen and (max-width:768px) {
    #pdp .panel-template.text-center-mobile {
        text-align: center
    }

    #pdp #panel-hero {
        background: url(../Content/vengeance_pc_video_screenshot.jpg) #fff no-repeat center bottom;
        background-size: cover
    }

    #pdp #panel-hero.panel-template .wrapper {
        background: rgba(0, 0, 0, .4)
    }

    #pdp #panel-hero video {
        display: none !important
    }

    #pdp #panel-hero .h1 {
        font-size: 5em !important
    }

    #pdp #panel-hero p {
        font-size: 1.5em
    }

    #pdp #panel-hero .product-container {
        height: auto;
        width: 100%
    }

    #pdp #panel-hero .product-container .relative-container {
        height: auto
    }

    #pdp #panel-hero .background {
        display: block
    }

    #pdp #panel-hero .background img {
        height: auto;
        width: 100%
    }

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

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

    #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: 2.5vw auto 0
    }

    #pdp .testimonial {
        min-height: 0
    }

    #pdp .testimonial .testimonial-mobile-img {
        background: #222;
        border: 3px solid #333;
        border-radius: 100px;
        display: inline-block;
        height: 100px;
        margin-left: 15px;
        overflow: hidden;
        max-width: 50%;
        vertical-align: middle;
        width: 100px
    }

    #pdp .testimonial .testimonial-mobile-img img {
        margin: 10px auto 0;
        width: 100%
    }

    #pdp .testimonial #quote-info em {
        display: inline-block;
        transform: translateY(25%)
    }
}

@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: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
    }

    #pdp #panel-hero video {
        width: 100vh
    }

    #pdp #panel-hero.panel-template .wrapper {
        padding: 2vw 0
    }

    #pdp #panel-hero .h1 {
        font-size: 4em !important;
        margin: 0 auto;
        width: calc(100% - 20px)
    }

    #pdp #panel-hero p {
        font-size: 1.5em;
        margin: 2em auto;
        width: calc(100% - 20px)
    }
}

@media only screen and (max-width:479px) {
    #pdp #panel-hero {
        min-height: 140vw
    }
}

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

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

    #pdp .panel-template .h1 {
        font-size: 1.9em !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
    }
}