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: 0px;}
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, #00b7ff, transparent); border: 0; height: 2px; margin: 0px;}

.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;}
.section-intro {background-color: #000; /*background: url('intro_bg.jpg') center; background-size: cover;overflow: hidden;*/}
.section-obs {background: url('obs_bg.jpg') center; background-size: cover; overflow: hidden;}
.section-stream {background-color: #101010;}
.section-stream .streambg1 {background: url('stream_bg1.png') no-repeat center center / contain; overflow: hidden;}
.section-stream .streambg2 {background: url('stream_bg2.png') no-repeat center center / contain; overflow: hidden;}

main #xr1-card-img {position: relative; pointer-events: none; z-index: 1; height: 100%; width: 100%;}
main #knob {z-index: 2; -webkit-clip-path: circle(17% at 50% 50%); cursor: pointer;}
main .custom-img {margin: 0.5rem 15%; position: relative; overflow: hidden;}
main .header-rgb {position: absolute; top: 0;}
main .hue-animation {animation: color-hue 3.5s 0.2s linear infinite;}
@keyframes color-hue {
 from {-webkit-filter: hue-rotate(0deg); filter: hue-rotate(0deg);}
 to {-webkit-filter: hue-rotate(359deg); filter: hue-rotate(359deg);}
}

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;}

main .slider-precision h3 {font-size: 26px; margin-top: 49px; color: rgb(211,211,211);}
main .slider-precision p {font-size: 1.15rem; line-height: 1.25rem;}
main .slider-precision > button {top: 39%}
main .slider-precision ul {bottom: 1% !important;}
main .slider-precision ul > li {height: 15px; width: 15px; line-height: 15px; text-align: center; background-color: #666;}
main .slider-precision li button {height: 15px; width: 15px; line-height: 15px; text-align: center;}
main .slider-precision .slick-dots li button::before {font-size: 45px; height: 15px; width: 15px; line-height: 15px; text-align: center; left: 50%; top: 50%; transform: translate(-50%,-52%); vertical-align: middle;}
main .slider-precision .slick-track {width: 100%;}
main .slider-precision .slick-arrow {position: absolute; z-index: 3;}
main .slider-precision .slick-next, main .slider-precision .slick-prev {width: 30px; height: 30px; border-radius: 50%;}
main .slider-precision .slick-next {right: 5px;}
main .slider-precision .slick-prev {left: 5px;}
main .slider-precision .slick-list {width: 95%; text-align: center; margin-right: auto; margin-left: auto;}
main .slider-precision .slick-prev:before, main .slider-precision .slick-next:before {color: #626262; font-size: 30px;}

main .section-rgb > div > div.row.flex-center {display: none;}
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;}

.item-none {display: none !important;}
.item-block {display: block !important;}
.rgb-states {color: #fff;}
.specTitle {color: #46b8d1;}
.specHr {display: flex; align-items: stretch; margin-top: 5px; border: 0; height: 3px; background: #7be3f7;}
.specHr::after {content: ""; flex: 1; background: linear-gradient(to left, black, #7be3f7);}
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 .waveLightBar-animation {animation: waveLightBarIng 3s 0.2s linear infinite;}
#rgb-individual-bg.waveLightBar-animation:before{content:''; display: block; width: 7.5%; height: 500px; position: absolute; top: 0; left: 0; background-color: #0093ff; opacity: 1;}
#rgb-individual-bg.waveLightBar-animation:after{content:''; display: block; width: 7.5%; height: 500px; position: absolute; top: 0; right: 0; background-color: #0093ff; opacity: 1;}
@keyframes waveLightBarIng {0% {transform:translateX(-750px);} 50% {transform:translateX(750px);} 100% {transform:translateX(-750px);}}

main .breath-animation {animation: breathIng 2s 0.2s linear infinite;}
main .wave-animation {animation: waveIng 5s 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;}
main .fade-animation {animation: fadeIng 4s 0.2s linear infinite;}
main .flashing-animation {animation: flashingIng 0.17s 0.2s linear infinite;}
@keyframes breathIng {0% {opacity: 1} 50% {opacity: 0}}
@keyframes waveIng {
  0% {background-color: orange;} 13.28% {background-color: orange;} 
  14.28% {background-color: yellow;} 27.56% {background-color: yellow;}
  28.56% {background-color: green;} 41.84% {background-color: green;} 
  42.84% {background-color: blue;} 56.12% {background-color: blue;} 
  57.12% {background-color: blueviolet;} 70.4% {background-color: blueviolet;} 
  71.4% {background-color: white;} 84.68% {background-color: white;} 
  85.68% {background-color: red;} 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}}
@keyframes fadeIng {0% {opacity: 1} 65% {opacity: 0.3} 75% {opacity: 0} 80% {opacity: 0.5} 100% {opacity: 1}}
@keyframes flashingIng {from {opacity: 0; transform:translateY(300px);} to {opacity: 1; transform:translateY(-300px);}}

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-full-bg {position: absolute; width: 85%; max-width: 1100px; height: 100%; max-height: 80%; top: 10%; left: 7.5%; margin: 0 auto; z-index: 0; background-color: white;}
#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: -5% 0 0 55%; transform: scale(0.7);}
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;}

.responstable {margin: 0 auto; width: 100%; overflow: hidden; background: #2E2C2D; color: #fff; border-radius: 5px; border: 1px solid #000;}
.responstable tr {border: 1px solid #000;}
.responstable tr.highlight {background-color: #ffff99 !important;}
.responstable tr:nth-child(odd) {background-color: #404040;}
.responstable th {display: none; border: 0px solid #000; background-color: #161211; color: #FFF; padding: 1em;}
.responstable th:first-child {display: table-cell;}
.responstable th:nth-child(2) {display: table-cell;}
.responstable th:nth-child(2):after {display: none;}
.responstable td {display: block; word-wrap: break-word; border: 0px solid #000;}
.responstable td:first-child {display: table-cell; text-align: center;}
.responstable th, .responstable td {display: table-cell; text-align: center; vertical-align: middle; margin: .5em 1em; padding: 0.5em 1em;}

@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;}
  .section-stream .streambg1, .section-stream .streambg2 {background: none;}
}

@media (max-width: 600px) {
  main .slider-precision ul {display: none;}
  main .slider-precision h3 {margin-top: 25px; font-size: 1.5rem; line-height: 1.3; font-weight: 500;}
  main .section-where-to-buy img {width: 80%;}
}

@media (max-width: 768px) {
  #rgb-container {clip-path: inset(0px 15px 0px 15px) !important;}
  .rgb-states {transform: scale(0.8); transform-origin: center;}
}

@media (max-width: 480px){
  .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.63); transform-origin: left;}
  #picker {margin: -4% 0% -10% 22% !important; transform: scale(1.0);}

  #responstable td:first-child {position: relative; width: 100px; border-right: 0px solid #D9E4E6; margin-top: 0; vertical-align: middle;}
  #responstable td:first-child input {transform: scale(1.5);}
  #responstable td:not(:first-child) {clear: both; margin-left: 0px; padding: 5px; position: relative; text-align: left;}
  #responstable td:not(:first-child):before {color: #817f80; content: ''; display: block; left: 0; position: relative; font-weight: 600;}
  #responstable td:nth-child(2):before {content: 'EVGA XR1 lite';}
  #responstable td:nth-child(3):before {content: 'EVGA XR1';}
  #responstable td:nth-child(4):before {content: 'EVGA XR1 PRO';}
  #responstable tr {padding: 10px 0; position: relative; line-height: 24px;}
  #responstable tr:first-child {display: none;}
  #responstable tr:nth-child(2) {display: none;}
  .responstable th, .responstable td {display: block; margin: .5em 0;}
}