/* Font */
@import url("//hello.myfonts.net/count/396129");
@import url("https://use.typekit.net/syi3qwd.css");
/*@font-face {
  font-family: 'BebasNeuePro-SmEBd', sans-serif;
  src: url("https://assets.corsair.com/raw/upload/v1/akamai/_ui/responsive/common/fonts/webfonts/396129_0_0.eot");
  src: url("https://assets.corsair.com/raw/upload/v1/akamai/_ui/responsive/common/fonts/webfonts/396129_0_0.eot?#iefix") format("embedded-opentype"), url("https://assets.corsair.com/raw/upload/v1/akamai/_ui/responsive/common/fonts/webfonts/396129_0_0.woff2") format("woff2"), url("https://assets.corsair.com/raw/upload/v1/akamai/_ui/responsive/common/fonts/webfonts/396129_0_0.woff") format("woff"), url("https://assets.corsair.com/raw/upload/v1/akamai/_ui/responsive/common/fonts/webfonts/396129_0_0.ttf") format("truetype"); }

@font-face {
  font-family: 'Helvetica Neue LT Pro R';
  src: url("https://assets.corsair.com/raw/upload/v1/akamai/_ui/responsive/common/fonts/helvetica-neue/HelveticaNeueLTPro-Roman.eot");
  src: url("https://assets.corsair.com/raw/upload/v1/akamai/_ui/responsive/common/fonts/helvetica-neue/HelveticaNeueLTPro-Roman.eot?#iefix") format("embedded-opentype"), url("https://assets.corsair.com/raw/upload/v1/akamai/_ui/responsive/common/fonts/helvetica-neue/HelveticaNeueLTPro-Roman.woff2") format("woff2"), url("https://assets.corsair.com/raw/upload/v1/akamai/_ui/responsive/common/fonts/helvetica-neue/HelveticaNeueLTPro-Roman.woff") format("woff"), url("https://assets.corsair.com/raw/upload/v1/akamai/_ui/responsive/common/fonts/helvetica-neue/HelveticaNeueLTPro-Roman.ttf") format("truetype");
  font-style: normal; }*/

.main-content {
  overflow: visible !important; }

.pos-sticky #smalcode .sequence {
  height: 600vh; }
  .pos-sticky #smalcode .sequence .rel {
    height: 100vh;
    position: -webkit-sticky;
    position: sticky;
    top: 0; }

#smalcode {
  font-family: 'Helvetica Neue LT Pro R';
  background-color: #000;
  position: relative;
  z-index: 1; }
  #smalcode * {
    margin: 0;
    box-sizing: border-box;
    cursor: none !important; }
  #smalcode img {
    width: 100%;
    height: auto; }
  #smalcode .rel {
    position: relative;
    width: 100%;
    height: 100%; }
  #smalcode h1,
  #smalcode h3,
  #smalcode h3,
  #smalcode h4,
  #smalcode h5 {
    font-weight: normal; }
  #smalcode .follower {
    width: 35px;
    min-height: 35px;
    position: fixed;
    transform: translate(-50%, -50%);
    background-image: url("https://assets.corsair.com/image/upload/v1/akamai/landing/brand/img/icon-cursor.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom;
    z-index: 999;
    pointer-events: none;
    opacity: 0.75; }
    @media (hover: none) and (pointer: coarse) {
      #smalcode .follower {
        display: none; } }
    #smalcode .follower .text {
      font-size: 16px;
      color: #fff;
      text-align: center;
      font-family: 'BebasNeuePro-SmEBd', sans-serif;
      padding-bottom: 40px; }
    #smalcode .follower.hover, #smalcode .follower.next, #smalcode .follower.prev {
      opacity: 1; }
    #smalcode .follower.hover {
      width: 60px;
      min-height: 60px;
      background-image: url("https://assets.corsair.com/image/upload/v1/akamai/landing/brand/img/icon-more.svg"); }
      #smalcode .follower.hover .text {
        padding-bottom: 67px; }
    #smalcode .follower.next {
      width: 60px;
      min-height: 60px;
      background-image: url("../img/button-arrow-right.svg"); }
    #smalcode .follower.prev {
      width: 60px;
      min-height: 60px;
      background-image: url("../img/button-arrow-left.svg"); }
  #smalcode .smal-panel {
    position: relative; }
    #smalcode .smal-panel.full {
      height: calc(100vh - 100px); }
  #smalcode .text-big {
    font-size: 180px;
    opacity: 0;
    transition: all 0.3s ease-out;
    line-height: 0.8em;
    letter-spacing: 1.5px;
    font-family: 'BebasNeuePro-SmEBd', sans-serif;
    text-align: center;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(5%);
    color: white; }
    #smalcode .text-big.active {
      opacity: 1;
      transform: translateY(0); }
    @media screen and (max-width: 1024px) {
      #smalcode .text-big {
        font-size: 140px; } }
    @media screen and (max-width: 767px) {
      #smalcode .text-big {
        font-size: 60px; } }
    #smalcode .text-big.yellow, #smalcode .text-big .yellow {
      color: #ECE81A; }
  #smalcode .overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    padding-top: 100px; }
    #smalcode .overlay .close {
      display: flex;
      justify-content: center;
      cursor: pointer;
      left: 50%;
      top: 30px;
      transform: translateX(-50%);
      position: absolute;
      z-index: 99;
      opacity: 1; }
      #smalcode .overlay .close img {
        width: 22px; }
    #smalcode .overlay .slideshow {
      padding-top: 60px; }
  #smalcode .slideshow {
    height: 100%; }
    @media screen and (max-width: 1023px) {
      #smalcode .slideshow {
        height: 80vh; } }
    #smalcode .slideshow .slide {
      padding: 30px;
      outline: 0; }
    #smalcode .slideshow .slick-arrow {
      border: 0 none;
      background: none;
      width: 59px !important;
      height: 67px !important;
      text-indent: -9999px;
      cursor: pointer;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 99;
      outline: 0; }
      @media screen and (max-width: 1023px) {
        #smalcode .slideshow .slick-arrow {
          top: 85%; } }
      @media screen and (min-width: 1024px) {
        #smalcode .slideshow .slick-arrow {
          display: none !important; } }
      #smalcode .slideshow .slick-arrow.slick-prev {
        background-image: url("../img/button-arrow-left.svg");
        left: 30px; }
      #smalcode .slideshow .slick-arrow.slick-next {
        background-image: url("../img/button-arrow-right.svg");
        right: 30px; }
  #smalcode .pos-helper {
    width: 100%;
    height: 100vh;
    position: relative;
    z-index: -1; }
  #smalcode .max-width {
    width: 100%;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto; }
  #smalcode .hero .watch-skip,
  #smalcode .hero .audio-icon {
    position: absolute;
    cursor: pointer;
    z-index: 10; }
  #smalcode .hero .watch-skip {
    bottom: 20px;
    right: 20px;
    display: flex;
    align-items: center; }
    @media screen and (max-width: 767px) {
      #smalcode .hero .watch-skip {
        right: 0;
        left: 0;
        width: 100%;
        padding: 0 20px;
        justify-content: space-between; } }
    #smalcode .hero .watch-skip .button {
      line-height: 46px;
      text-decoration: none;
      border: solid 1px #ECE81A;
      background-color: #ECE81A;
      color: black;
      padding: 0 30px;
      display: inline-block;
      margin-right: 30px;
      font-size: 14px;
      padding-top: 4px; }
      #smalcode .hero .watch-skip .button:hover {
        background-color: transparent;
        color: #ECE81A; }
  #smalcode .hero .skip {
    color: #ECE81A;
    background-image: url("https://assets.corsair.com/image/upload/v1/akamai/landing/brand/img/arrow-right.svg");
    background-position: center right;
    background-repeat: no-repeat;
    background-size: 60px 22px;
    padding-right: 55px;
    line-height: 22px;
    font-size: 14px;
    padding-top: 4px;
    width: auto;
    clip: auto;
    height: auto; 
    position: relative; }
  #smalcode .hero .audio-icon {
    background-image: url("../img/icon-mute.svg");
    background-position: left center;
    background-size: 32px 19px;
    height: 19px;
    width: 20px;
    top: 20px;
    left: 20px;
    transition: all 0.1s ease-out; }
    #smalcode .hero .audio-icon.muted {
      width: 32px; }
  #smalcode .hero .video {
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
    height: 100%;
    -o-object-position: center;
       object-position: center; }
  #smalcode .hero .overlay {
    padding: 0;
    display: none;
    background-color: black;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    cursor: default !important; }
    #smalcode .hero .overlay.active {
      display: block; }
    #smalcode .hero .overlay .close-wrap {
      margin-left: auto;
      margin-right: auto;
      width: 22px;
      margin-bottom: 30px; }
      #smalcode .hero .overlay .close-wrap img {
        cursor: pointer !important; }
    #smalcode .hero .overlay .video-wrap {
      width: 70%; }
    @media (min-aspect-ratio: 16/9) {
        #smalcode .hero .overlay .video-wrap {
          width: 50%; } }
    @media screen and (max-width: 1023px) {
        #smalcode .hero .overlay .video-wrap {
          width: 90%; } }
    #smalcode .hero .overlay .ratio-wrap {
      padding-bottom: 56.25%;
      height: 0;
      position: relative; }
    #smalcode .hero .overlay .abs-wrap {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0; }
    #smalcode .hero .overlay .rel {
      position: relative;
      height: 100%;
      width: 100%; }
    #smalcode .hero .overlay iframe {
      width: 100%;
      height: 100%;
      display: block;
      margin-left: auto;
      margin-right: auto; }
  #smalcode .text-container {
    height: 200vh;
    position: relative; }
    #smalcode .text-container.reduced {
      height: 100vh; }
    #smalcode .text-container:not(.reduced) .text-big {
      position: absolute;
      top: 0;
      height: 100%;
      left: 0; }
    #smalcode .text-container .full {
      height: 100vh;
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column; }
    #smalcode .text-container .flex {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      padding-top: 20vh;
      padding-bottom: 10vh; }
  #smalcode .sequence {
    height: 100vh; }
    #smalcode .sequence .product-overview {
      height: 100vh;
      position: absolute;
      overflow: hidden; }
    #smalcode .sequence .overlay-trigger {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 9999;
      pointer-events: none; }
      #smalcode .sequence .overlay-trigger.active {
        pointer-events: all; }
    #smalcode .sequence .overview-img {
      position: absolute;
      z-index: 2;
      width: 100%;
      height: 100%;
      -o-object-fit: contain;
         object-fit: contain;
      -o-object-position: center;
         object-position: center;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); }
      #smalcode .sequence .overview-img.gradient {
        background: black;
        background: radial-gradient(ellipse at center, #182e28 20%, rgba(0, 0, 0, 0) 80%);
        background-repeat: no-repeat;
        height: 35vw;
        transform: translate(-50%, -70%); }
        @media (min-aspect-ratio: 2880/1544) {
          #smalcode .sequence .overview-img.gradient {
            height: 50vh; } }
      #smalcode .sequence .overview-img.background {
        position: relative;
        z-index: 1;
        opacity: 0;
        visibility: hidden; }
        #smalcode .sequence .overview-img.background.gone {
          opacity: 0; }
      #smalcode .sequence .overview-img.left.gone {
        transform: translate(-100%, -50%);
        opacity: 0; }
      #smalcode .sequence .overview-img.right.gone {
        transform: translate(50%, -50%);
        opacity: 0; }
      #smalcode .sequence .overview-img.shadow.gone {
        transform: translate(-50%, 0);
        opacity: 0; }
      #smalcode .sequence .overview-img.gradient.gone {
        opacity: 0; }
    #smalcode .sequence .sequence-img {
      width: 48vw;
      height: 27vw;
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 99;
      transform: translate(-50%, -50%); }
      @media (min-aspect-ratio: 2880/1544) {
        #smalcode .sequence .sequence-img {
          width: 90vh;
          height: 50.625vh; } }
      #smalcode .sequence .sequence-img.active {
        width: 100%;
        height: 100%; }
      #smalcode .sequence .sequence-img img {
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
        -o-object-position: center bottom;
           object-position: center bottom;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        z-index: 99;
        transform: translate(-50%, -50%);
        opacity: 0; }
        #smalcode .sequence .sequence-img img.visible {
          opacity: 1; }
    #smalcode .sequence .btn.overlay-trigger {
      position: absolute;
      top: 50%;
      right: 20px;
      width: 100px;
      height: 100px;
      background-color: red; }
    #smalcode .sequence .slideshow {
      height: 100%; }
  #smalcode .down-to-the-details {
    padding-top: 20vh;
    background-image: url("https://assets.corsair.com/image/upload/v1/akamai/landing/brand/img/concrete-background.jpg");
    background-size: 100% auto;
    background-position: center bottom;
    opacity: 0;
    margin-bottom: -20vh;
    z-index: 1; }
    #smalcode .down-to-the-details.active {
      opacity: 1; }
    #smalcode .down-to-the-details .gradient {
      position: absolute;
      left: 0;
      width: 100%;
      height: 40vh;
      z-index: 99; }
      #smalcode .down-to-the-details .gradient.top-gradient {
        top: 0;
        background: black;
        background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, black 100%); }
      #smalcode .down-to-the-details .gradient.bottom-gradient {
        bottom: 0;
        background: black;
        background: linear-gradient(0deg, black 0%, rgba(0, 0, 0, 0) 100%);
        opacity: 0;
        pointer-events: none; }
        #smalcode .down-to-the-details .gradient.bottom-gradient.active {
          opacity: 1; }
    #smalcode .down-to-the-details .bottom-background {
      background-image: url("https://assets.corsair.com/image/upload/v1/akamai/landing/brand/img/concrete-background-end.png");
      background-size: 100% auto;
      background-position: center bottom;
      background-repeat: no-repeat;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      z-index: 0; }
    #smalcode .down-to-the-details .parallax-images {
      position: relative;
      padding: 0 0 40px;
      margin-top: -40vh;
      margin-bottom: -10vh; }
      @media screen and (min-width: 768px) {
        #smalcode .down-to-the-details .parallax-images {
          padding: 20vh 40px 40px;
          display: flex;
          flex-wrap: wrap; } }
      @media screen and (min-width: 768px) {
        #smalcode .down-to-the-details .parallax-images .left,
        #smalcode .down-to-the-details .parallax-images .right {
          width: 50%; } }
      #smalcode .down-to-the-details .parallax-images .left.active {
        transform: translateY(-20%); }
      #smalcode .down-to-the-details .parallax-images .left {
        padding-top: 10vh; }
      #smalcode .down-to-the-details .parallax-images .parallax-img {
        opacity: 0;
        transition: opacity 0.3s ease-out;
        overflow: hidden;
        margin: 20px; }
        #smalcode .down-to-the-details .parallax-images .parallax-img.active {
          opacity: 1; }
        @media screen and (min-width: 768px) {
          #smalcode .down-to-the-details .parallax-images .parallax-img {
            margin: 40px 20px; } }
        #smalcode .down-to-the-details .parallax-images .parallax-img img {
          transition: transform 0.3s ease-out;
          display: block; }
          #smalcode .down-to-the-details .parallax-images .parallax-img img:hover {
            transform: scale(1.1); }
    #smalcode .down-to-the-details .slideshow .ratio-wrap {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
    #smalcode .down-to-the-details .slideshow .slick-list,
    #smalcode .down-to-the-details .slideshow .slick-track {
      height: 100% !important;
      max-height: none !important; }
    #smalcode .down-to-the-details .slideshow .slide {
      position: relative;
      display: flex;
      align-items: flex-start;
      justify-content: center; }
    #smalcode .down-to-the-details .slideshow .slick-dots {
      margin: 0;
      padding: 0 0 20px;
      display: flex;
      align-items: center;
      justify-content: center; }
      @media screen and (max-width: 767px) {
        #smalcode .down-to-the-details .slideshow .slick-dots {
          display: none !important; } }
      #smalcode .down-to-the-details .slideshow .slick-dots li {
        margin: 0;
        padding: 0;
        list-style-type: none; }
      #smalcode .down-to-the-details .slideshow .slick-dots button {
        width: 80px;
        height: 2px;
        background-color: #787878;
        display: block;
        border: 0 none;
        margin: 0 10px;
        overflow: hidden;
        padding: 0; }
      #smalcode .down-to-the-details .slideshow .slick-dots .slick-active button {
        background-color: #fff; }
    #smalcode .down-to-the-details .slideshow .details {
      position: absolute;
      bottom: 3vh;
      left: 50%;
      transform: translate(-43vw, 0);
      width: 13vw;
      height: 0;
      padding-bottom: 9.45vw;
      transition: all 0.3s ease-out;
      opacity: 0;
      z-index: 999; }
      @media screen and (max-width: 1023px) {
        #smalcode .down-to-the-details .slideshow .details {
          width: 33vw;
          transform: translate(-50%, 0); } }
      #smalcode .down-to-the-details .slideshow .details:after {
        display: block;
        content: " ";
        width: 21px;
        height: 21px;
        background-image: url("https://assets.corsair.com/image/upload/v1/akamai/landing/brand/img/arrow-increase.svg");
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 1002;
        opacity: 1;
        transition: opacity 0.1s ease-out;
        transition-delay: 0.3s; }
      #smalcode .down-to-the-details .slideshow .details.hover {
        width: 86vw;
        height: 100%; }
        #smalcode .down-to-the-details .slideshow .details.hover:after {
          opacity: 0;
          transition-delay: 0s; }
      #smalcode .down-to-the-details .slideshow .details .image {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 13vw;
        transition: all 0.3s ease-out;
        z-index: 999; }
        @media screen and (max-width: 1023px) {
          #smalcode .down-to-the-details .slideshow .details .image {
            width: 33vw;
            bottom: 20%; } }
        #smalcode .down-to-the-details .slideshow .details .image img {
          width: 100%;
          height: 100%;
          -o-object-fit: contain;
             object-fit: contain;
          -o-object-position: top center;
             object-position: top center;
          transition: transform 0.3s ease-out; }
        #smalcode .down-to-the-details .slideshow .details .image:hover img {
          transform: scale(1.1); }
        #smalcode .down-to-the-details .slideshow .details .image.image-01 {
          opacity: 0;
          visibility: hidden; }
        #smalcode .down-to-the-details .slideshow .details .image.image-02 {
          z-index: 1000; }
        #smalcode .down-to-the-details .slideshow .details .image.image-03 {
          opacity: 0;
          visibility: hidden;
          z-index: 1001; }
      #smalcode .down-to-the-details .slideshow .details.hover .image {
        width: 37vw; }
        #smalcode .down-to-the-details .slideshow .details.hover .image.image-01 {
          opacity: 1;
          visibility: visible; }
        #smalcode .down-to-the-details .slideshow .details.hover .image.image-02 {
          opacity: 1;
          visibility: visible;
          left: 50%;
          bottom: 100%;
          transform: translate(-50%, 120%); }
          @media screen and (max-width: 1023px) {
            #smalcode .down-to-the-details .slideshow .details.hover .image.image-02 {
              bottom: 80%; } }
        #smalcode .down-to-the-details .slideshow .details.hover .image.image-03 {
          opacity: 1;
          visibility: visible;
          left: 100%;
          transform: translateX(-100%); }
    #smalcode .down-to-the-details .slideshow .slick-current .details {
      opacity: 1; }
  #smalcode .text-image {
    padding: 20px;
    color: #fff; }
    @media screen and (min-width: 768px) {
      #smalcode .text-image {
        padding: 40px; } }
    @media screen and (min-width: 1024px) {
      #smalcode .text-image {
        display: flex; }
        #smalcode .text-image.reversed {
          flex-direction: row-reverse; } }
    #smalcode .text-image .col {
      display: flex;
      flex-direction: column;
      justify-content: center; }
      #smalcode .text-image .col.col1 {
        opacity: 0;
        transform: translateY(10%);
        transition: all 0.5s ease-out; }
        #smalcode .text-image .col.col1.active {
          opacity: 1;
          transform: translateY(0); }
      @media screen and (max-width: 767px) {
        #smalcode .text-image .col.col1 {
          padding-bottom: 40px; } }
      @media screen and (min-width: 1024px) {
        #smalcode .text-image .col {
          width: 33.33%;
          padding: 0 20px; } }
    #smalcode .text-image .image {
      padding: 10px 0;
      opacity: 0;
      transition: opacity 0.3s ease-out;
      overflow: hidden; }
      #smalcode .text-image .image.active {
        opacity: 1; }
      @media screen and (min-width: 768px) {
        #smalcode .text-image .image {
          padding: 20px 0; } }
      #smalcode .text-image .image img {
        transition: transform 0.3s ease-out; }
      #smalcode .text-image .image:hover img {
        transform: scale(1.1); }
    #smalcode .text-image h3 {
      font-size: 60px;
      letter-spacing: 1.5px;
      margin: 0;
      font-family: 'BebasNeuePro-SmEBd', sans-serif;
      text-transform: uppercase; }
    #smalcode .text-image h4 {
      letter-spacing: 3px;
      text-transform: uppercase;
      color: #ECE81A;
      font-size: 14px;
      line-height: 1.7em;
      margin: 10px 0; }
    #smalcode .text-image p {
      font-size: 22px;
      letter-spacing: 0.5px;
      line-height: 1.3em; }
      @media screen and (max-width: 767px) {
        #smalcode .text-image p {
          font-size: 14px; } }
  #smalcode .learn-more {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px 0 100px; }
    #smalcode .learn-more .button {
      line-height: 50px;
      text-decoration: none;
      color: white;
      border: solid 1px #fff;
      padding: 0 30px;
      display: inline-block; }
  #smalcode .family-render {
    overflow: hidden; }
    #smalcode .family-render .title {
      position: absolute;
      padding: 40px;
      pointer-events: none; }
      @media screen and (max-width: 1023px) {
        #smalcode .family-render .title {
          margin-left: 33%; } }
      @media screen and (max-width: 767px) {
        #smalcode .family-render .title {
          padding: 20px; } }
      @media screen and (min-width: 1024px) {
        #smalcode .family-render .title {
          z-index: 9999;
          left: 50%;
          transform: translateX(-50%); } }
      #smalcode .family-render .title .text-big {
        opacity: 1;
        font-size: 30px;
        justify-content: flex-start;
        line-height: 1em;
        transform: translate(0, 0); }
        @media screen and (min-width: 768px) {
          #smalcode .family-render .title .text-big {
            font-size: 80px; } }
    #smalcode .family-render .overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: black;
      background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.4) 100%);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease-out;
      z-index: 100;
      padding-top: 100px; }
      #smalcode .family-render .overlay.active {
        opacity: 1;
        visibility: visible; }
    #smalcode .family-render .icon {
      opacity: 0;
      transition: opacity 0.3s ease-out;
      font-family: 'BebasNeuePro-SmEBd', sans-serif;
      border: 0 none;
      background: none;
      width: 110px;
      cursor: pointer;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -85%);
      z-index: 99;
      outline: 0;
      background-image: url("https://assets.corsair.com/image/upload/v1/akamai/landing/brand/img/icon-hotspot.svg");
      background-position: center bottom;
      background-repeat: no-repeat;
      background-size: 30px auto;
      text-align: center;
      text-decoration: none;
      font-size: 16px;
      min-height: 71px; }
      #smalcode .family-render .icon a {
        padding-bottom: 71px;
        display: none;
        text-decoration: none;
        color: #fff; }
      #smalcode .family-render .icon:hover {
        background-image: url("https://assets.corsair.com/image/upload/v1/akamai/landing/brand/img/icon-more.svg");
        background-size: 59px auto;
        z-index: 101; }
        #smalcode .family-render .icon:hover a {
          display: block; }
        #smalcode .family-render .icon:hover .text {
          opacity: 1;
          visibility: visible; }
      #smalcode .family-render .icon .text {
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease-out;
        text-shadow: 0 0 5px rgba(0, 0, 0, 0.7); }
      #smalcode .family-render .icon.light {
        top: 20vw;
        left: 60.6%;
        transition-delay: 0.05s; }
      #smalcode .family-render .icon.headphones {
        top: 42vw;
        left: 47%;
        transition-delay: 0.1s; }
      #smalcode .family-render .icon.keyboard {
        top: 36vw;
        left: 62%;
        transition-delay: 0.15s; }
      #smalcode .family-render .icon.mouse {
        top: 31vw;
        left: 70%;
        transition-delay: 0.2s; }
      #smalcode .family-render .icon.computer {
        top: 22vw;
        left: 76.5%;
        transition-delay: 0.25s; }
      #smalcode .family-render .icon.cooler {
        top: 14vw;
        left: 69%;
        transition-delay: 0.3s; }
    #smalcode .family-render.active .icon {
      opacity: 1; }
    @media screen and (max-width: 767px) {
      #smalcode .family-render .icon {
        background-size: 20px auto;
        font-size: 12px;
        width: 75px;
        min-height: 33px; }
        #smalcode .family-render .icon a {
          padding-bottom: 33px; }
        #smalcode .family-render .icon:hover {
          background-size: 30px auto; }
        #smalcode .family-render .icon.light {
          top: 32.4vw; }
        #smalcode .family-render .icon.headphones {
          top: 72vw; }
        #smalcode .family-render .icon.keyboard {
          top: 61.2vw; }
        #smalcode .family-render .icon.mouse {
          top: 52.2vw; }
        #smalcode .family-render .icon.computer {
          top: 36vw; }
        #smalcode .family-render .icon.cooler {
          top: 21.6vw; } }
    @media screen and (max-width: 1023px) {
      #smalcode .family-render {
        overflow: hidden; }
        #smalcode .family-render .rel {
          margin-left: -60%;
          width: auto;
          margin-right: -20%; }
        #smalcode .family-render .icon {
          font-size: 14px; }
          #smalcode .family-render .icon.light {
            top: 36vw; }
          #smalcode .family-render .icon.headphones {
            top: 75.6vw; }
          #smalcode .family-render .icon.keyboard {
            top: 64.8vw; }
          #smalcode .family-render .icon.mouse {
            top: 55.8vw; }
          #smalcode .family-render .icon.computer {
            top: 39.6vw; }
          #smalcode .family-render .icon.cooler {
            top: 25.2vw; } }
  #smalcode .helper {
    pointer-events: none;
    opacity: 0;
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%; }
    #smalcode .helper div {
      height: 100vh;
      width: 100%; }