.show {
  transition: opacity 400ms;
}
.hide {
  opacity: 0;
}
#main { min-height: 650px; position: relative; }
#sections-wrapper { position: relative; max-width: 1030px; width: 100%; margin: 0 auto; z-index: 5; }
#main .show {display: block}
#keyboard-container { display: inline-block; position: relative; overflow: hidden; width: 100%; }
#keyboard-container .masking { max-width:100%; position:absolute; left:0; z-index:998; }
#effects-wrapper { display: inline-block; height: 400px; max-width: 1030px; width: 100%; padding: 0; margin: 0; overflow: hidden; }
#effects-wrapper > div { display: none; height: 408px; width: 100%; overflow: hidden; }
#effects-wrapper > div img { width: 100%; max-width: 100%;}
#effects-wrapper .key { position: absolute; }
#effects-wrapper .wave { background-image:url('//assets2.razerzone.com/images/pnx.assets/517b47de99a65f696ec7a201a51fb48b/chroma-wave-bg.png'); }
#effects-wrapper .wave > div { display: inline-block; }
#wave-left, 
#wave-right { display: inline-block; width: 30px; height:26px; padding: 0 10px; border: 1px solid; border-color: #999; cursor: pointer; background-repeat: no-repeat; background-position: 50% 50%}
#wave-left { border-radius: 5px 0 0 5px; background-image: url(//assets.razerzone.com/eeimages/pages/blackwidow/chroma/images/wave-left-grey.png);}
#wave-right { border-radius: 0 5px 5px 0; background-image: url(//assets.razerzone.com/eeimages/pages/blackwidow/chroma/images/wave-right-grey.png);}
#wave-left:hover,
.to-left #wave-left { border-radius: 5px 0 0 5px; background-image: url(//assets.razerzone.com/eeimages/pages/blackwidow/chroma/images/wave-left.png);}
#wave-right:hover,
.to-right #wave-right { border-radius: 0 5px 5px 0; background-image: url(//assets.razerzone.com/eeimages/pages/blackwidow/chroma/images/wave-right.png);}
#effects-wrapper .static { background-color:#0ff; }
#effects-wrapper .breathe { background-color:#f00; }
#effects-wrapper .reactive .button { z-index:9999; }
#effects-wrapper .reactive .r1 { top:0; }
#effects-wrapper .reactive .r2 { top:32px; }
#effects-wrapper .reactive .r3 { top:56px; }
#effects-wrapper .reactive .r4 { top:81px; }
#effects-wrapper .reactive .r5 { top:105px; }
#effects-wrapper .reactive .r6 { top:129px; }
#effects-wrapper .reactive .keycaps div { display:inline-block; position:absolute; width: 24px; height:24px; margin:1px; border-radius: 2px; cursor:pointer}
#effects-wrapper .reactive .keycaps{ position: relative; height:155px; width: 550px; margin-top: 139px; margin-left:16px;}
#effects-wrapper .wheel .peri-section { position: relative; display: flex; justify-content: center; align-items: center; height: 100%; margin-top: 30px; }
#effects-wrapper .wheel .peri-section:before { content:' '; position: absolute; display: inline-block; width: 1600px; height: 1600px; background: url('//assets2.razerzone.com/images/pnx.assets/e703bedda394746fcc717d836e35f7e7/wheel-chroma.jpg') 50% 50% no-repeat; background-size: cover}
#effects-wrapper .wheel .peri-section { width: 56%; float: left }
.ef_wheel .wheel .peri-section:before {
    -webkit-animation: rotate-wheel 1.1s linear infinite both;
            animation: rotate-wheel 1.1s linear infinite both;
}
@-webkit-keyframes rotate-wheel {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotate-wheel {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
#effects-wrapper .covered:before  { content: " "; content: " "; position: absolute; height: 400px; width: 100%; border: 55px solid rgb(68 214 44 / 100%); border-top-width: 70px; border-bottom-width: 65px;}
#effects-wrapper .fire.covered:before { border-color: rgb(255 95 0 / 70%); }
#effects-wrapper .wheel.covered:before { border-color: rgb(0 0 0 / 70%); }
#effects-wrapper .starlight.covered:before { border-color: rgb(54 190 200 / 100%); }
#ef_selector,
#intro-wrapper { display: inline-block; margin: 0 auto; text-align: center; }
#intro-wrapper { width: 100%; margin: 1rem auto; padding:0 1rem}
#intro-wrapper > div { display: inline-block; text-align: center; }
#intro-wrapper > div > p + div { margin: 10px auto }
.picker-wrapper { display: inline-block; position: relative; width: 30px; height:30px; margin: 0 5px; overflow: hidden; border-radius: 5px; cursor: pointer; }
.picker-wrapper input[type=color] { position:absolute; top:-10px; left:-10px; width:50px; height: 50px; cursor: pointer; }
#ef_selector { color:#999; font-weight: 300; font-size: 18px; text-align: left; margin:0 10px; width: calc(100% - 20px); max-width: 650px; }
#ef_selector .active { color: #fff; }
#ef_current { border-radius: 5px; border: 1px solid #999; padding: 10px;}
#ef_current p {display:inline;}
#ef_current, #ef_dropdown { cursor: pointer; }
#intro-wrapper > div { display: none }
#intro-wrapper p { color: #999; font-size: 1rem; max-width: 650px; margin:0 auto; text-align: center; }
.f20 { text-transform: uppercase; color: #fff; font: 400 20px "RazerF5", Helvetica, Arial; margin-top: 25px; }
.bw { color: #888; font: 300 14px/16px "RazerF5", Helvetica, Arial; }
a.bw:hover { color: lime; }
/*.sp-replacer { background: none!important; border: none !important }
.sp-dd { display:none}
.sp-preview, .sp-alpha, .sp-thumb-el {background-image: none !important}*/
#ef_selector { display: inline-table; vertical-align: middle; font-size: 1.125rem; }
#ef_selector .subnav-arrow {
    position: relative;
    float: right;
    height: 2rem;
    width: 2rem;
    display: block;
    padding: 0em;
    margin: 0 auto;
    position: relative;
    cursor: pointer;
    border-radius: 4px;
}
#ef_selector .left-bar {
    position: absolute;
    background-color: transparent;
    top: 10px;
    left: 0;
    width: 18px;
    height: 3px;
    display: block;
    transform: rotate(40deg);
    float: right;
    border-radius: 2px;
}
#ef_selector .left-bar:after {
    content: "";
    background-color: white;
    width: 18px;
    height: 3px;
    display: block;
    float: right;
    border-radius: 6px 10px 10px 6px;
    transition: all 0.5s cubic-bezier(0.25, 1.7, 0.35, 0.8);
    z-index: -1;
}
#ef_selector .right-bar {
    position: absolute;
    background-color: transparent;
    top: 10px;
    left: 12px;
    width: 18px;
    height: 3px;
    display: block;
    transform: rotate(-40deg);
    float: right;
    border-radius: 2px;
}
#ef_selector .right-bar:after {
    content: "";
    background-color: white;
    width: 18px;
    height: 3px;
    display: block;
    float: right;
    border-radius: 10px 6px 6px 10px;
    transition: all 0.5s cubic-bezier(0.25, 1.7, 0.35, 0.8);
    z-index: -1;
}
#ef_selector .open .left-bar:after {
    transform-origin: center center;
    transform: rotate(-80deg);
}
#ef_selector .open .right-bar:after {
    transform-origin: center center;
    transform: rotate(80deg);
}
#ef_selector {
    color: #fff;
    display: block;
    position: relative;
    text-align: left;
    min-height: 40px;
    margin:0 auto;
    border: 1px solid #333;
    border-radius: 5px;
    background-color: #111;
}
#ef_dropdown {
    height: 0px;
    overflow: hidden;
}
#ef_dropdown.nav-opened {
    position: absolute;
    width: 100%;
    height: auto;
    padding:5px;
    background-color: #111;
    border: 1px solid #333;
    z-index: 1
}
#ef_dropdown > div {
    padding:5px 10px;
    font-size: 16px;
    color: #999
}
#ef_selector span br{
    display: none;
}
@-webkit-keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translatey(-10px);
        -moz-transform: translatey(-10px);
        -o-transform: translatey(-10px);
        transform: translatey(-10px);
    }
    to {
        opacity: 1;
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
    }
}
@-moz-keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translatey(-10px);
        -moz-transform: translatey(-10px);
        -o-transform: translatey(-10px);
        transform: translatey(-10px);
    }
    to {
        opacity: 1;
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
    }
}
@keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translatey(-10px);
        -moz-transform: translatey(-10px);
        -o-transform: translatey(-10px);
        transform: translatey(-10px);
    }
    to {
        opacity: 1;
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
    }
}
#ef_selector ul.nav-opened li {
    -webkit-animation-name: fadeInDown;
    -moz-animation-name: fadeInDown;
    -o-animation-name: fadeInDown;
    animation-name: fadeInDown;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
}
@media only screen and (max-width: 1029px) {
    .k-mobile { display: block!important ; }
    .k-desktop { display: none!important }
    #ef { text-align: center; max-width: 100%; width: 100%; margin:0 auto;}
    #keyboard-container { text-align: center; margin: 0 auto; max-width: 500px; width: 100%;}
    #keyboard-container .masking { position: relative; }
    .masking img.k-mobile { width: 100% }
    #effects-wrapper { height: 100%; position: absolute; top:0; left:0; }
    #effects-wrapper > div { height: 100% }
    #reactive {display: none!important; visibility: hidden!important}
    #effects-wrapper .wheel .peri-section { height: 35%; width: 100%; }
    #effects-wrapper .starlight { background: url('//assets2.razerzone.com/images/pnx.assets/e703bedda394746fcc717d836e35f7e7/starlight_m.gif') 100% 50% / contain no-repeat}
    #effects-wrapper .ripple { background: url('//assets2.razerzone.com/images/pnx.assets/e703bedda394746fcc717d836e35f7e7/ripple_m.gif') 100% 50% / contain no-repeat}
    #effects-wrapper .fire { background: url('//assets2.razerzone.com/images/pnx.assets/e703bedda394746fcc717d836e35f7e7/fire_m.gif') 100% 50% / contain no-repeat}
}
@media only screen and (min-width: 1030px) {
    .k-mobile { display: none!important; }
    .k-desktop { display: block ; }
    #effects-wrapper .starlight { background: url('//assets2.razerzone.com/images/pnx.assets/e703bedda394746fcc717d836e35f7e7/starlight_d.gif') 50% 50% no-repeat}
    #effects-wrapper .ripple { background: url('//assets2.razerzone.com/images/pnx.assets/e703bedda394746fcc717d836e35f7e7/ripple_d.gif') 50% 50% no-repeat}
    #effects-wrapper .fire { background: url('//assets2.razerzone.com/images/pnx.assets/e703bedda394746fcc717d836e35f7e7/fire_d.gif') 50% 50% no-repeat}
}
@media (max-width: 767px){
    #keyboard-container > img:first-child { left:-20px; }
    #ef_dropdown .reactive { display:none; }
}