#kb-configurator { background-color: #000; width: 100%; }

@media screen and (max-width: 767px) {
    #kb-configurator {display:none;}
}

#kb-wrapper { max-width: 750px; margin: 0 auto 100px;} 
#kb-wrapper > h2 { text-transform: uppercase; color: #44D62C; display: block; text-align: center; margin-top: -20px; margin-bottom: 20px; font-family: RazerF5Thin, Arial;}
.non-ee #kb-wrapper > h2 { font-family: Conv_RazerF5Thin,Arial; }

.kb-layout { position:relative; width: 100%; height:594px;}
.kb-base { position:absolute; width: 100%; height:594px; background-repeat: no-repeat; background-size: contain;}
.kb-base:first-child { z-index: 1; }
.kb-area { display: flex; position: absolute; top:156px; left:50%; margin-left: -358px; width: 718px; height: 201px; z-index: 2}
.kb-row { display: flex; position: relative; height: 32px; margin:0; }

.sec-1, .sec-2, .sec-3 { display: inline-block; font-size: 16px;}
.sec-1 { width: 475px; margin-right: 11px;}
.sec-2 { width: 95px; margin-right: 10px;}
.sec-3 { width: 127px;}
.r1 { margin-bottom: 11px; }

.key { display: inline-block; position:relative; width: 1.969em; height: 1.97em; float: left; overflow: hidden; cursor:pointer;}
.key.empty { visibility: hidden; }
.key.active {webkit-box-shadow: 0px 0px 2px 0.5px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 2px 0.5px rgba(0,0,0,0.3); box-shadow: 0px 0px 2px 0.5px rgba(0,0,0,0.3);}
.key > span { position:absolute; top: -156px; left: -17px; height: 576px; width: 750px; width: 750px; background-repeat: no-repeat; background-size: contain;}

#k-esc.key { margin-right: 32px;}
#k-f4.key { margin-right: 16px;}
#k-f8.key { margin-right: 16px;}
#k-pause.key { margin-right: 15px;}

#k-tab.key { width: 47px;} 
#k-backspace.key { width: 48px;}
#k-caps.key { width: 55px;}
#k-backspace.key { width: 64px;}
#k-backslash.key { width: 47px;}
#k-enter.key { width: 71px;}
#k-leftshift.key { width: 4.4em;}
#k-rightshift.key { width: 87px;}
#k-leftctrl,
#k-rightctrl,
#k-leftalt { width: 47px; }
#k-rightalt { width: 46px; }
#k-spacebar { width: 191px; }
#num-plus.key,
#num-enter.key { position: absolute; right: 0; height: 63px; }
#num-plus.key { top:75px;}
#num-enter.key { top:137px;}
#num-zero.key { width: 63px; }

/*Layout and Key Configurator*/
#kb-option { display:flex; }
#kb-option h3{ font-size: 18px; color:#999999; margin-bottom: 15px; font-family: Conv_RazerF5Light,Arial;}
#kb-option > div { padding:0 30px; border-left: 1px solid #333; }
#kb-option > div:first-child { min-width: 350px; border-left: none }

#choose-kb h3:before,
#choose-cl h3:before { }

#kb-wrapper > h2:before {content:'Try out different color combinations';}
#choose-kb h3:before { content: '1 . Select a keyboard' }
#choose-cl h3:before { content: '2 . Select a color and click on the keycaps' }
#choose-cl a.reset-btn:before { content:'RESET' ;} 

.language-fr #kb-wrapper > h2:before {content:'Essayez d’autres combinaisons de couleurs';}
.language-fr #choose-kb h3:before { content: '1 . Sélectionnez votre clavier' }
.language-fr #choose-cl h3:before { content: '2 . Sélectionner une couleur, appuyer sur les touches' }
.language-fr #choose-cl a.reset-btn:before { content:'Réinitialisez' ;} 

.language-de #kb-wrapper > h2:before {content:'Probiere verschiedene Farbkombinationen aus';}
.language-de #choose-kb h3 { padding-bottom: 20px }
.language-de #choose-kb h3:before { content: '1 . Wähle deine Tastatur' }
.language-de #choose-cl h3:before { content: '2 . Wähle eine Farbe und klicke dann auf die Tastenkappen ' }
.language-de #choose-cl a.reset-btn:before { content:'Zurücksetzen' ;} 


.language-zh_TW #kb-wrapper > h2:before {content:'嘗試不同的色彩組合';}
.language-zh_TW #choose-kb h3:before { content: '1 . 選擇你的鍵盤' }
.language-zh_TW #choose-cl h3:before { content: '2 . 選擇ㄧ個顏色，接著按一下鍵帽' }
.language-zh_TW #choose-cl a.reset-btn:before { content:'重設' ;} 

#choose-kb select{ padding: 10px; font-size: 16px; color: #999999; border: 1px solid #333333; border-radius: 5px; background: black; outline: none;}
#choose-kb select option,
#choose-kb select:focus,
#choose-kb select option:focus {outline: none;}
#choose-kb .nice-select { min-width: 250px;  padding: 10px; font-size: 16px; color: #999999; border: 1px solid #333333; border-radius: 5px; background: black; outline: none;}
#choose-kb .nice-select .list { margin-top: 5px; border: 1px solid #333333; border-radius: 5px; background: black;  }
#choose-kb .nice-select li.option { border-bottom: 1px solid #333333!important; }

#choose-cl ul { display: inline-block; float: left; padding:8px 0 0; }
#choose-cl li { display: inline-block; height: 25px; width: 25px; border-radius: 50%; margin: 0 5px; opacity: 0.5; list-style: none; text-indent: -1000px; overflow: hidden; cursor: pointer;border:2px solid transparent; -webkit-transition: all 0.3s; transition: all 0.3s;}
#choose-cl li:hover, 
#choose-cl li.selected {opacity: 1; border:2px solid #fff;}
#choose-cl li#key-black { background-color: #222 }
#choose-cl li:hover#key-black,
#choose-cl li#key-black.selected { background-color: #000 }
#choose-cl li#key-green { background-color: #44d62c }
#choose-cl li#key-quartz { background-color: #f8cad7 }
#choose-cl li#key-mercury { background-color: #ebebeb }
#choose-cl a.reset-btn { padding: 3px 15px; margin-left: 18px; margin-top: 5px; float: left; color: #fff; border: 1px solid #999; border-radius: 5px; font-size: 16px; text-transform: uppercase; font-family: Conv_RazerF5,Arial; -webkit-transition: all 0.3s; transition: all 0.3s; }
#choose-cl a.reset-btn:hover { color:#44d62c; border: 1px solid #44d62c;  } 

/*Individual Configuration*/
#huntsman-elite-black.kb-base { background-image: url("https://assets2.razerzone.com/images/pbt-keycap/huntsman-elite-black.jpg") }
#huntsman-black.kb-base { background-image: url("https://assets2.razerzone.com/images/pbt-keycap/huntsman-black.jpg") }
#huntsman-mercury.kb-base { background-image: url("https://assets2.razerzone.com/images/pbt-keycap/huntsman-mercury.jpg") }
#huntsman-quartz.kb-base { background-image: url("https://assets2.razerzone.com/images/pbt-keycap/huntsman-quartz.jpg") }
#huntsman-gears5.kb-base { background-image: url("https://assets2.razerzone.com/images/pbt-keycap/huntsman-gears5.jpg") }
#blackwidow-black.kb-base { background-image: url("https://assets2.razerzone.com/images/pbt-keycap/blackwidow-black.jpg") }
#blackwidow-elite-black.kb-base { background-image: url("https://assets2.razerzone.com/images/pbt-keycap/blackwidow-elite-black.jpg") }

#blackwidow-black-bs .kb-area { width: 714px; }
#blackwidow-black-bs .sec-1 { margin-right: 9px;}
#blackwidow-black-bs .sec-2 { margin-right: 8px;}
#blackwidow-elite-black-bs .kb-area { width: 708px; }
#blackwidow-elite-black-bs .sec-1 { margin-right: 6px;}
#blackwidow-elite-black-bs .sec-2 { margin-right: 5px;}

.kb-layout .key > span.black { background-image: url("https://assets2.razerzone.com/images/pbt-keycap/keycap-black.png") }
.kb-layout .key > span.green { background-image: url("https://assets2.razerzone.com/images/pbt-keycap/keycap-green.png") }
.kb-layout .key > span.quartz { background-image: url("https://assets2.razerzone.com/images/pbt-keycap/keycap-quartz.png") }
.kb-layout .key > span.mercury { background-image: url("https://assets2.razerzone.com/images/pbt-keycap/keycap-mercury.png") }