html {overflow-x: hidden; -ms-overflow-style: -ms-autohiding-scrollbar;}

@font-face {font-family: "GeForce"; src: url("https://images.evga.com/common/fonts/GeForce/GeForce-Bold-Alt.woff") format("woff2");}
main h1 {font-family: "GeForce", Arial, Helvetica, sans-serif; font-size: 2.8rem; font-weight: 600;letter-spacing: -0.03rem; line-height: 1.4em; letter-spacing: .5px; margin-bottom: 15px;}
main h2 {font-family: "GeForce", Arial, Helvetica, sans-serif; font-weight: 600;font-size: 1.4rem; line-height: 1.1em; letter-spacing: .5px;}
main p {font-family: "Rubik", Arial, Helvetica, sans-serif; font-size: 1.3em; font-weight: 300; line-height: 1.5em; letter-spacing: .5px;}
main .row {margin: 0;}
main hr.title-row {background-image: linear-gradient(to left, transparent, #fff, transparent); border: 0; height: 2px; margin: 0px;}

.loading-page,.loading-page img {display: none;}
.text-center {text-align: center;}
.text-left {text-align: left;}
.flex-center {display: flex; justify-content: center; align-items: center;}
footer .footer-block .footer-column p {margin-bottom: 0em;}

main section:not(.section-header) {padding: 60px 0;}
main .spillIMG {display: block;}
main .spillIMG2 {display: none;}
.section-spill {background: url('spill_bg.jpg') center; background-size: cover;overflow: hidden;}
.section-control {background: url('control_bg.jpg') center; background-size: cover;overflow: hidden;}
.section-ergonomics {background: url('ergonomics_bg.jpg') center; background-size: cover; overflow: hidden;}
main .section-where-to-buy .row .col-4 h3 {font-size: 1.15rem !important; margin-top: 10px; line-height: 1.5;}

section .slick-track {width: 100%;}
section .slick-arrow {position: absolute; z-index: 3;}
section .slick-next,section .slick-prev {width: 30px; height: 30px; border-radius: 50%; background-color: #000;}
section .slick-next {right: 5px;}
section .slick-prev {left: 5px;}
section .slick-list {width: 95%; text-align: center; margin-right: auto; margin-left: auto;}
.slick-prev:before, .slick-next:before {color: #626262;}

@media (max-width: 800px) {
  main section:not(.section-header) {padding: 20px 0;}
  main p, main h1, main h2 {padding: 0.4em; line-height: 1.2em; text-align: center !important;}
  main h1 {font-size: 2.2em !important;}
  .flex-center {display: block;}
  #picker {margin: 0% 0% 0% 35% !important;}
  .rgb-states {text-align: center !important;}
  main .spillIMG {display: none;}
  main .spillIMG2 {display: block;}
  .section-spill {background: url('spill_bg2.jpg') center; background-size: cover;overflow: hidden;}
}

@media (max-width: 600px) {
  main .section-where-to-buy img {width: 80%;}
}





/***************************************************** Keyboard Setting *****************************************************/
.loading-page,.loading-page img {display: none;}
main .hue-animation {animation: color-hue 5s 0.2s linear infinite;}
main .section-header {position: relative;}
@keyframes color-hue {
  from {-webkit-filter: hue-rotate(0deg); filter: hue-rotate(0deg);}
  to {-webkit-filter: hue-rotate(359deg); filter: hue-rotate(359deg);}
 }

@media (max-width: 768px) {
  .flex-center {display: block;}
  section h1 {font-size: 2.5rem; line-height: 1.2; text-align: center;}
  section h2 {font-size: 2rem; line-height: 2.5rem; text-align: center;}
  section:not(.section-header) {padding: 20px 1rem;}

  #rgb-container {clip-path: inset(0px 15px 0px 15px) !important;}
  .rgb-states {transform: scale(0.8); transform-origin: center;}
}
@media (max-width: 480px){
  section h1 {font-size: 2rem; line-height: 1.2; text-align: center;}
  .section-rgb > div:nth-child(3).separate, .section-rgb > div:nth-child(4).separate {transform: scale(0.85) translateX(-15%);}
  .rgb-states .rgb-txt-intro {margin: 0px 0px 5px 5px !important;}
  .rgb-states {transform: scale(0.6); transform-origin: left;}
  #picker {margin: 0% 0% 0% 25% !important;}
}


main #rgb-container #rgb-main-img {position: relative; pointer-events: none; z-index: 4; margin: 0; height: 100%; width: 100%; filter: brightness(0.8);}
#rgb-container {max-width: 100%; position: relative; z-index: 10; overflow: hidden; clip-path: inset(40px 20px 0px 20px); -webkit-user-select:none; -moz-user-select:none; -o-user-select:none; user-select:none;}
#rgb-circle-bg {margin: 0 auto; width: 100px; height: 100px; border: 17px solid rgba(155, 155, 55, 1.0); border-radius: 50%; position: absolute; top: 40%; left: 50%; transform: translate(50%, 50%);}
#rgb-full-bg {position: absolute; width: 92%; max-width: 1100px; height: 100%; max-height: 89%; top: 9%; left: 4%; margin: 0 auto; z-index: -1; background-color: white;}
#rgb-full-bg-bk {position: absolute; width: 92%; max-width: 1100px; height: 100%; max-height: 89%; top: 9%; left: 4%; margin: 0 auto; z-index: -11; background-color: #2d2d2d;}
#rgb-individual-bg li div {padding-bottom: 215%; float: left; opacity: 0; z-index: -99;}
.end-game-box { margin:11.5em 0; padding: 1.5em; background-color: rgba(127, 63, 191, 0.5)}
#rgb-individual-bg li {position: absolute; left: 0; width: 100%; height: 0; padding-bottom: 4%; margin: 0; max-width: 1200px;}
.img-effect-positioning {position: absolute; top: 0; left: 50%; height: 100%; transform: translateX(-50%);}
#picker {z-index: 5; margin: 0 0 0 45%;}

.item-none {display: none !important;}
.item-block {display: block !important;}
.rgb-states {color: #fff;}
main .rgb-list-active img {filter: opacity(1);}
main #rgb-individual-bg .key-response:hover {opacity: 1; transition: opacity .5s ease; cursor: pointer;}
main #rgb-individual-bg {list-style: none; margin: 0;}

main .breath-animation {animation: breathIng 2s 0.2s linear infinite;}
main .wave-animation {animation: waveIng 2s 0.2s linear infinite;}
main .pulse-animation {animation: pulseIng 12s forwards steps(6) infinite;}
main .static-animation {animation: staticIng 2s 0.2s linear infinite;}
main .trigger-animation {animation: triggerIng 2s 0.2s linear infinite;}
@keyframes breathIng {0% {opacity: 1} 50% {opacity: 0}}
@keyframes waveIng {0% {background-color: red;} 2% {background-color: red;} 10.3% {background-color: orange;} 18.6% {background-color: yellow;} 35.2% {background-color: #00db4a;} 51.8% {background-color: #00deff;} 68.4% {background-color: #0023ff;} 85% {background-color: #e100ff;} 100% {background-color: red;}}
@keyframes pulseIng {from {-webkit-filter: hue-rotate(0deg); filter: hue-rotate(0deg); 0% {opacity: 1};} to {-webkit-filter: hue-rotate(359deg); filter: hue-rotate(359deg); 50% {opacity: 0};}}
@keyframes staticIng {0% {opacity: 1} 50% {opacity: 1}}
@keyframes triggerIng {0% {opacity: 1} 50% {opacity: 1}}

main .farbtastic .color {margin: 0;}
.rgb-states {text-align: left; white-space: nowrap;}
.rgb-states li {display: inline-block; cursor: pointer; vertical-align: top;}
.rgb-states img {filter: opacity(.5); margin: 0px 10px; width: 81px;}
.rgb-states .rgb-txt {line-height: 1.2; padding-top: 12px; font-size: 18px; text-align: center;}
main .rgb-states p {color: black; text-align: center;}

main #rgb-row-1 {top: 19.5%; padding-bottom: 5.5%;}
main #rgb-row-2 {top: 37.8%;}
main #rgb-row-3 {top: 49.7%; padding-bottom: 3.7%;}
main #rgb-row-4 {top: 60.6%; padding-bottom: 3.5%;}
main #rgb-row-5 {top: 71.5%; padding-bottom: 3.5%;}
main #rgb-row-6 {top: 82.3%;}

main #rgb-column-1 {top: 20%; padding-bottom: 24%; left: 8%; width: 19.5%;}
main #rgb-column-2 {top: 20%; padding-bottom: 24%; left: 27.4%; width: 19.5%;}
main #rgb-column-3 {top: 20%; padding-bottom: 24%; left: 46.8%; width: 19.5%;}
main #rgb-column-4 {top: 20%; padding-bottom: 24%; left: 66.4%; width: 11.2%;}
main #rgb-column-5 {top: 20%; padding-bottom: 24%; left: 77.6%; width: 15%;}

#rgb-individual-bg div {width: 100%; height: 100%;}

main #rgb-row-1 div:nth-child(1) {margin-left: 8.5%;}
main #rgb-row-1 div:nth-child(2) {margin-left: 1.0%;}
main #rgb-row-1 div:nth-child(3) {margin-left: 3.4%;}
main #rgb-row-1 div:nth-child(7) {margin-left: 1.6%;}
main #rgb-row-1 div:nth-child(11) {margin-left: 1.4%;}
main #rgb-row-1 div:nth-child(15) {margin-left: 0.6%;}
main #rgb-row-1 div:nth-child(18) {margin-left: 0.6%;}

main #rgb-row-2 div:nth-child(1) {margin-left: 8.2%; width: 4.2%;}
main #rgb-row-2 div:nth-child(2) {margin-left: 0.5%;}
main #rgb-row-2 div:nth-child(6) {margin-left: -0.2%;}
main #rgb-row-2 div:nth-child(10) {margin-left: -0.2%; width: 3.5%;}
main #rgb-row-2 div:nth-child(12) {width: 3.5%;}
main #rgb-row-2 div:nth-child(13) {width: 3.5%;}
main #rgb-row-2 div:nth-child(14) {margin-left: 0.0%; width: 3.5%;}
main #rgb-row-2 div:nth-child(15) {width: 7.5%;}
main #rgb-row-2 div:nth-child(16) {margin-left: 0.4%;}
main #rgb-row-2 div:nth-child(19) {margin-left: 0.5%;}
main #rgb-row-2 div:nth-child(22) {margin-left: -0.3%;}

main #rgb-row-3 div:nth-child(1) {margin-left: 8.7%;}
main #rgb-row-3 div:nth-child(2) {margin-left: 0.3%; width: 5.8%}
main #rgb-row-3 div:nth-child(3) {margin-left: 0.1%; width: 3.5%}
main #rgb-row-3 div:nth-child(6) {margin-left: -0.2%; width: 3.5%}
main #rgb-row-3 div:nth-child(10) {margin-left: -0.2%; width: 3.5%}
main #rgb-row-3 div:nth-child(11) {width: 3.5%;}
main #rgb-row-3 div:nth-child(12) {width: 3.5%;}
main #rgb-row-3 div:nth-child(14) {margin-left: 0.0%; width: 3.5%}
main #rgb-row-3 div:nth-child(15) {width: 5.75%;}
main #rgb-row-3 div:nth-child(16) {margin-left: 0.3%; padding-top: 0.3%;}
main #rgb-row-3 div:nth-child(19) {margin-left: 0.5%;}
main #rgb-row-3 div:nth-child(22) {margin-left: -0.2%; padding-top: 3.3%;}

main #rgb-row-4 div:nth-child(1) {margin-left: 8.7%;}
main #rgb-row-4 div:nth-child(2) {margin-left: 0.7%; width: 6.3%}
main #rgb-row-4 div:nth-child(6) {margin-left: -0.2%; width: 3.5%;}
main #rgb-row-4 div:nth-child(8) {margin-left: 0.0%; width: 3.5%;}
main #rgb-row-4 div:nth-child(10) {margin-left: 0.0%; width: 3.5%;}
main #rgb-row-4 div:nth-child(11) {width: 3.5%;}
main #rgb-row-4 div:nth-child(12) {width: 3.5%;}
main #rgb-row-4 div:nth-child(14) {width: 8.0%;}
main #rgb-row-4 div:nth-child(15) {margin-left: 11.7%;}

main #rgb-row-5 div:nth-child(1) {margin-left: 8.8%;}
main #rgb-row-5 div:nth-child(2) {margin-left: 0.5%; width: 8.2%}
main #rgb-row-5 div:nth-child(5) {margin-left: -0.1%; width: 3.5%;}
main #rgb-row-5 div:nth-child(6) {width: 3.5%;}
main #rgb-row-5 div:nth-child(9) {margin-left: -0.1%; width: 3.5%;}
main #rgb-row-5 div:nth-child(10) {width: 3.5%;}
main #rgb-row-5 div:nth-child(11) {width: 3.5%;}
main #rgb-row-5 div:nth-child(12) {width: 3.5%;}
main #rgb-row-5 div:nth-child(13) {width: 10.0%;}
main #rgb-row-5 div:nth-child(14) {margin-left: 3.7%; width: 4.0%;}
main #rgb-row-5 div:nth-child(15) {margin-left: 3.9%;}
main #rgb-row-5 div:nth-child(18) {margin-left: -0.2%; padding-top: 3.9%;}

main #rgb-row-6 div:nth-child(1) {margin-left: 8.7%;}
main #rgb-row-6 div:nth-child(2) {margin-left: 0.7%; width: 4.5%}
main #rgb-row-6 div:nth-child(3) {width: 4.5%;}
main #rgb-row-6 div:nth-child(4) {width: 4.4%;}
main #rgb-row-6 div:nth-child(5) {width: 22%;}
main #rgb-row-6 div:nth-child(6) {width: 4.4%;}
main #rgb-row-6 div:nth-child(7) {width: 4.3%;}
main #rgb-row-6 div:nth-child(8) {width: 4.4%;}
main #rgb-row-6 div:nth-child(9) {width: 4.5%;}
main #rgb-row-6 div:nth-child(10) {width: 3.6%; margin-left: 0.6%;}
main #rgb-row-6 div:nth-child(11) {width: 3.5%;}
main #rgb-row-6 div:nth-child(12) {width: 3.7%;}
main #rgb-row-6 div:nth-child(13) {width: 7.2%; margin-left: 0.4%}