/* ------------ Header Colorrun Aura Sync----------- */
/*---------------------------------------------------*/
/*---------------------------------------------------*/
/*---------------------------------------------------*/
/*---------------------------------------------------*/

    @keyframes colorrun{
        from{filter:hue-rotate(0deg); }
        to  {filter:hue-rotate(359deg); }
    }
    @-webkit-keyframes colorrun{
        from{-webkit-filter:hue-rotate(0deg); }
        to  {-webkit-filter:hue-rotate(359deg); }
    }
    .colorrun{
        -webkit-animation: colorrun 4s infinite linear;
        -o-animation: colorrun 4s infinite linear;
        animation: colorrun 4s infinite linear;
    }
    
    .overlay-img{
        width: 100%;
        position: relative;
        overflow: hidden;
    }
    .overlay-img .hd-img-stable {
        position: relative;
        z-index: 9;
        width: 100%;
    }
    .hd-img-colorrun {
        position: absolute;
        z-index: 8;
        width: 100%;
        top: 0;
        left: 0;
        -webkit-animation: colorrun 10s infinite;
        -moz-animation: colorrun 10s infinite;
        -ms-animation: colorrun 10s infinite;
        -o-animation: colorrun 10s infinite;
        animation: colorrun 10s infinite;
    }



/* ------------------- Aura Sync-------------------- */
/*---------------------------------------------------*/
/*---------------------------------------------------*/
/*---------------------------------------------------*/
/*---------------------------------------------------*/

    #aura .hd-sec-lighting{
        position: relative;
        margin-top: 30px
    }

    #aura .hd-lighting > img{
        width: 100%;
    }

    #aura .hd-lightingbox{
        padding-bottom: 70%
    }

    #aura .hd-lightingbox p{
        display: block;
        font-size: 10px;
        font-weight: 400;
        text-transform: uppercase;
        margin-bottom: 0;
        position: absolute;
        left: 2%;
    }

    #aura #strip_add{
        top: 78%;
        color: #fff;
    }

    #aura #strip_rgb{
        top: 88%;
        color: #fff;
    }

    #aura #strip_add span,
    #aura #strip_rgb span{
        margin-right: 7px;
        padding: 1px 5px;
        border: 1px solid #851fff;
        border-radius: 100%;
    }

    #aura .hd-lighting{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        overflow: hidden;
    }

    #aura .hd-sec-lighting ul{
        width: 50%;
        margin: 0;
        position: relative;
        z-index: 2;
    }

    #aura .hd-controls li{
        height: 85px ;
        cursor:pointer;
        opacity: 0.5;
        list-style: none;
        text-align: center;
        display: inline-block;
        color: #fff;
        margin-bottom: 10px;
    }

    #aura .hd-controls li:hover,
    #aura .hd-controls li.hd-active{
        opacity: 1;
    }

    #aura .hd-controls b{
        font-size: 10px;
        letter-spacing: 2px;
        font-weight: 300;
        margin: 5px 0;
    }

    #aura .hd-controls small{
        width: 113px;
        height: 65px;
        margin: 0 auto;
    }

    #colorpicker{
        width: 100px;
        position: absolute;
        bottom: 85px;
        left: 130px
    }

    #color,
    #greybg{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }

    #greybg {
        background-color: #000000;
        z-index: -2;
    }


/* ---------- color effect ---------- */

    .hd-rainbow{
        background: #ff0000;
        background: -moz-linear-gradient(180deg,#ff0000 0%, #ff9707 20%, #ff9707 30%, #ffeb3b 40%, #ffeb3b 50%, #00ff29 60%, #00ff29 70%, #00ffa3 80%, #00ffa3 90%, #00d0ff 100%);
        background: -webkit-linear-gradient(180deg,#ff0000 0%, #ff9707 20%, #ff9707 30%, #ffeb3b 40%, #ffeb3b 50%, #00ff29 60%, #00ff29 70%, #00ffa3 80%, #00ffa3 90%, #00d0ff 100%);
        background: linear-gradient(180deg,#ff0000 0%, #ff9707 20%, #ff9707 30%, #ffeb3b 40%, #ffeb3b 50%, #00ff29 60%, #00ff29 70%, #00ffa3 80%, #00ffa3 90%, #00d0ff 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#c600ff',GradientType=1 ); /* IE6-9 */
    }
    .hd-rainbow:before{
        content:'';
        display: block;
        width: 80%;
        height: 5%;
        position: absolute;
        top: 73.5%;
        left: 0;
        background: #000000;
    }
    .hd-rainbow:after{
        content:'';
        display: block;
        width: 50%;
        height: 4%;
        position: absolute;
        top: 73.5%;
        left: 0;
        background: #ff0000;
        background: -moz-linear-gradient(90deg,#ff0000 0%, #ff0000 20%, #ff9707 20%, #ff9707 42%, #ffeb3b 42%, #ffeb3b 52%, #00ff29 52%, #00ff29 66.5%, #00ffa3 66.5%, #00ffa3 78%, #00d0ff 78%);
        background: -webkit-linear-gradient(90deg,#ff0000 0%, #ff0000 20%, #ff9707 20%, #ff9707 42%, #ffeb3b 42%, #ffeb3b 52%, #00ff29 52%, #00ff29 66.5%, #00ffa3 66.5%, #00ffa3 78%, #00d0ff 78%);
        background: linear-gradient(90deg,#ff0000 0%, #ff0000 20%, #ff9707 20%, #ff9707 42%, #ffeb3b 42%, #ffeb3b 52%, #00ff29 52%, #00ff29 66.5%, #00ffa3 66.5%, #00ffa3 78%, #00d0ff 78%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#c600ff',GradientType=1 );
    }
    .hd-cycle:before{
        content:'';
        display: block;
        width: 80%;
        height: 5%;
        position: absolute;
        top: 83.5%;
        left: 0;
        background: #000000;
    }
    .hd-cycle:after{
        content:'';
        display: block;
        width: 80%;
        height: 5%;
        position: absolute;
        top: 83.5%;
        left: 0;
        background: #ff0000;
        -webkit-animation: cycle reverse infinite 8s;
        -o-animation: cycle reverse infinite 8s;
        animation: cycle reverse infinite 8s;
    }
    .hd-comet{
        background: #ff0000;
        background: -moz-linear-gradient(135deg,  #000000 30%, #ff0000 45%, #ffff00 50%, #000000 60%);
        background: -webkit-linear-gradient(135deg,  #000000 30%,#ff0000 45%, #ffff00 50%,#000000 60%);
        background: linear-gradient(135deg,  #000000 30%,#ff0000 45%, #ffff00 50%,#000000 60%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#000000',GradientType=1 );
    }
    .hd-comet:before{
        content:'';
        display: block;
        width: 100%;
        height: 5%;
        position: absolute;
        top: 83.5%;
        135deg: 0;
        background: #000000;
        -webkit-animation: cometReverse infinite 3s -.5s;
        -o-animation: cometReverse infinite 3s -.5s;
        animation: cometReverse infinite 3s -.5s;
    }
    .hd-comet:after{
        content:'';
        display: block;
        width: 100%;
        height: 5%;
        position: absolute;
        top: 83.5%;
        left: 0;
        background: #ff0000;
        -webkit-animation: cometReverse infinite 3s -.5s, cometStrobing infinite 3s;
        -o-animation: cometReverse infinite 3s -.5s, cometStrobing infinite 3s;
        animation: cometReverse infinite 3s -.5s, cometStrobing infinite 3s;
    }
    .hd-flash{
        background: #b70b00;
        background: -moz-linear-gradient(-45deg, #810000 30%, #810000 40%, #ff0000 50%, #810000 60%, #810000 70%);
        background: -webkit-linear-gradient(left, #810000 30%, #810000 40%, #ff0000 50%, #810000 60%, #810000 70%);
        background: linear-gradient(135deg, #810000 30%, #810000 40%, #ff0000 50%, #810000 60%, #810000 70%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b70b00', endColorstr='#b70b00',GradientType=1 );
    }
    .hd-flash:before{
        content:'';
        display: block;
        width: 100%;
        height: 5%;
        position: absolute;
        top: 83.5%;
        left: 0;
        background: #000000;
        -webkit-animation: flashReverse infinite 3s -.5s;
        -o-animation: flashReverse infinite 3s -.5s;
        animation: flashReverse infinite 3s -.5s;
    }
    .hd-flash:after{
        content:'';
        display: block;
        width: 100%;
        height: 5%;
        position: absolute;
        top: 83.5%;
        left: 0;
        background: #ff0000;
        -webkit-animation: flashReverse infinite 3s -.5s ,flashStrobing infinite 2.21s -2.45s;
        -o-animation: flashReverse infinite 3s -.5s ,flashStrobing infinite 2.21s -2.45s;
        animation: flashReverse infinite 3s -.5s ,flashStrobing infinite 2.21s -2.45s;
    }
    .hd-wave .starry_night{
        display: block !important;
        width: 100%;
        height: 0%;
        position: absolute;
        top: 72.5%;
        left: 47%;
        background: #000000;
        box-shadow: 0 0 50px #000000;
        -webkit-animation: yoyo infinite reverse 5s -.5s;
        -o-animation: yoyo infinite reverse 5s -.5s;
        animation: yoyo infinite reverse 5s -.5s;
    }
    .hd-wave .starry_night li{
        display: none;
    }
    .hd-wave:before{
        content:'';
        display: block;
        width: 100%;
        height: 5%;
        position: absolute;
        top: 83.5%;
        left: 0;
        background: #000000;
    }
    .hd-wave:after{
        content:'';
        display: block;
        width: 100%;
        height: 5%;
        position: absolute;
        top: 83.5%;
        left: 0;
        background: #ff0000;
        -webkit-animation: breathing infinite 8s -.5s;
        -o-animation: breathing infinite 8s -.5s;
        animation: breathing infinite 8s -.5s;
    }
    .hd-yoyo {
        width: 200%;
        background: #000000;
        background: -moz-linear-gradient(135deg, #ff0000 30%, #ffff00 50%, #ff0000 60%, #ffff00 80%,#ff0000 100%);
        background: -webkit-linear-gradient(135deg, #ff0000 30%, #ffff00 50%, #ff0000 60%, #ffff00 80%,#ff0000 100%);
        background: linear-gradient(135deg, #ff0000 30%, #ffff00 50%, #ff0000 60%, #ffff00 80%,#ff0000 100%);
        filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=1);
    }
    #color.hd-yoyo{
        width: 200%;
    }

    .hd-yoyo .starry_night{
        display: block !important;
        width: 40%;
        height: 5%;
        position: absolute;
        top: 72.5%;
        left: 17%;
        background: #000000;
        background: -moz-linear-gradient(left, #000000 0%, #000000 35%, #ff0000 40%, #000000 45%, #000000 100%);
        background: -webkit-linear-gradient(left, #000000 0%, #000000 35%, #ff0000 40%, #000000 45%, #000000 100%);
        background: linear-gradient(to right, #000000 0%, #000000 35%, #ff0000 40%, #000000 45%, #000000 100%);
        box-shadow: 0 0 50px #000000;
        -webkit-animation: yoyoStrobing infinite 6s;
        -o-animation: yoyoStrobing infinite 6s;
        animation: yoyoStrobing infinite 6s;
        z-index: 2;
    }
    .hd-yoyo .starry_night li{display: none;}
    .hd-yoyo .starry_night:after{
        content:'';
        display: block;
        width: 80%;
        height: 100%;
        position: absolute;
        top: 0;
        left: -100%;
        background: #ff0000;
        z-index: 0;
    }
    .hd-yoyo:after{
        content:'';
        display: block;
        width: 100%;
        height: 5%;
        position: absolute;
        top: 83.5%;
        left: 0;
        background: #ff0000;
        -webkit-animation: breathing infinite 8s -.5s;
        -o-animation: breathing infinite 8s -.5s;
        animation: breathing infinite 8s -.5s;
    }
    .hd-starryNight {background: #550000 !important; }
    .hd-starryNight:before{
        content:'';
        display: block;
        width: 100%;
        height: 5%;
        position: absolute;
        top: 83.5%;
        left: 0;
        background: #000000;
    }
    .hd-starryNight:after{
        content:'';
        display: block;
        width: 100%;
        height: 5%;
        position: absolute;
        top: 83.5%;
        left: 0;
        background: #ff0000;
        -webkit-animation: flashStrobing infinite 5s;
        -o-animation: flashStrobing infinite 5s;
        animation: flashStrobing infinite 5s;
    }
    /*.starry_night {display: none; }*/
    .starry_night li {
        width: 5%;
        height: 10%;
        background-color: #FFF;
        position: absolute;
        background: radial-gradient(circle, #ff0000,#ff0000, #990000, #550000, #550000);
        animation: breathing 3s infinite;
    }
    .starry_night li:nth-child(1) {left: 69%;  top: 56%; }
    .starry_night li:nth-child(2) {right: 7%;  top: 55%; animation: breathing 3s -1s infinite;}
    .starry_night li:nth-child(3) {right: 7%; top: 40%; animation: breathing 2s -1s infinite;}
    .starry_night li:nth-child(4) {right: 6%;  top: 10%; }
    .starry_night li:nth-child(5) {right: 6%; top: 25%;}
    .starry_night li:nth-child(7) {left: 3%;  top: 71%; animation: breathing 3s -2s infinite;}
    .starry_night li:nth-child(8) {left: 13%; top: 71%; animation: breathing 3s infinite;}
    .starry_night li:nth-child(9) {left: 19%;  top: 71%; animation: breathing 4s infinite;}
    .starry_night li:nth-child(10) {left: 29%; top: 71%; animation: breathing 3s infinite;}
    @-webkit-keyframes static{
        0% {opacity: 1}
        50%{opacity: 1}
    }
    @keyframes static{
        0% {opacity: 1}
        50%{opacity: 1}
    }
    @-webkit-keyframes breathing{
        0% {opacity: 1}
        50%{opacity: 0}
    }
    @keyframes breathing{
        0% {opacity: 1}
        50%{opacity: 0}
    }
    @-webkit-keyframes strobing{
        0% {opacity: 1}
        50%{opacity: 0}
    }
    @keyframes strobing{
        0% {opacity: 1}
        50%{opacity: 0}
    }
    @-webkit-keyframes cometStrobing{
        0% {opacity: 1}
        20%, 100%{opacity: 0}
    }
    @keyframes cometStrobing{
        0% {opacity: 1}
        20%, 100%{opacity: 0}
    }
    @-webkit-keyframes flashStrobing{
        2%, 12% {opacity: 1}
        0%, 4%, 11%, 13%, 100%{opacity: .6}
    }
    @keyframes flashStrobing{
        2%, 12% {opacity: 1}
        0%, 4%, 11%, 13%, 100%{opacity: .6}
    }
    @-webkit-keyframes music{
        0%  {opacity: 1}
        10% {opacity: .3}
        40% {opacity: 1}
        60% {opacity: .3}
        70% {opacity: 1}
        100%{opacity: .3}
    }
    @keyframes music{
        0%  {opacity: 1}
        10% {opacity: .3}
        40% {opacity: 1}
        60% {opacity: .3}
        70% {opacity: 1}
        100%{opacity: .3}
    }
    @-webkit-keyframes cycle{
        0%      {background-color: red}
        15%     {background-color: orange}
        30%     {background-color: yellow}
        45%     {background-color: #00CB07}
        60%     {background-color: #07A9FF}
        75%     {background-color: #1044FF}
        90%     {background-color: #a12fd9}
        100%    {background-color: red}
    }
    @keyframes cycle{
        0%      {background-color: red}
        15%     {background-color: orange}
        30%     {background-color: yellow}
        45%     {background-color: #00CB07}
        60%     {background-color: #07A9FF}
        75%     {background-color: #1044FF}
        90%     {background-color: #a12fd9}
        100%    {background-color: red}
    }
    @-webkit-keyframes rainbow{
        0%      {-webkit-filter:hue-rotate(359deg);filter:hue-rotate(359deg)}
        100%    {-webkit-filter:hue-rotate(0deg);filter:hue-rotate(0deg)}
    }
    @keyframes rainbow{
        0%      {-webkit-filter:hue-rotate(359deg);filter:hue-rotate(359deg)}
        100%    {-webkit-filter:hue-rotate(0deg);filter:hue-rotate(0deg)}
    }
    @-webkit-keyframes cpu{
        0%      {background-color: red}
        30%     {background-color: yellow}
        60%     {background-color: green}
        90%     {background-color: yellow;}
    }
    @keyframes cpu{
        0%      {background-color: red}
        30%     {background-color: yellow}
        60%     {background-color: green}
        90%     {background-color: yellow;}
    }
    @-webkit-keyframes comet{
        0%  {
            z-index: -1;
            width: 200%;
            -webkit-transform: translateX(-100%);
        }
        100%{
            z-index: -1;
            width: 200%;
            -webkit-transform: translateX(50%);
        }
    }
    @keyframes comet{
        0%  {
            z-index: -1;
            width: 200%;
            transform: translateX(-100%);
        }
        100%{
            z-index: -1;
            width: 200%;
            transform: translateX(50%);
        }
    }
    @-webkit-keyframes cometReverse{
        0%  {width: 200%; -webkit-transform: translateX(50%); }
        100%{width: 200%; -webkit-transform: translateX(-100%); }
    }
    @keyframes cometReverse{
        0%  {width: 200%; transform: translateX(50%); }
        100%{width: 200%; transform: translateX(-100%); }
    }
    @-webkit-keyframes flash{
        0%  {
            z-index: -1;
            width: 200%;
            -webkit-transform: translateX(-50%);
        }
        100%{
            z-index: -1;
            width: 200%;
            -webkit-transform: translateX(0%);
        }
    }
    @keyframes flash{
        0%  {
            z-index: -1;
            width: 200%;
            transform: translateX(-50%);
        }
        100%{
            z-index: -1;
            width: 200%;
            transform: translateX(0%);
        }
    }
    @-webkit-keyframes flashReverse{
        0%  {
            width: 200%;
            -webkit-transform: translateX(0%);
        }
        100%{
            width: 200%;
            -webkit-transform: translateX(-50%);
        }
    }
    @keyframes flashReverse{
        0%  {
            width: 200%;
            transform: translateX(0%);
        }
        100%{
            width: 200%;
            transform: translateX(-50%);
        }
    }
    @-webkit-keyframes yoyo {
        0% {-webkit-transform: translateX(-50%); }
        50% {-webkit-transform: translateX(0%); }
        100% {-webkit-transform: translateX(-50%); }
    }
    @keyframes yoyo {
        0% {transform: translateX(-50%); }
        50% {transform: translateX(0%); }
        100% {transform: translateX(-50%); }
    }
    @-webkit-keyframes yoyoStrobing {
        0% {-webkit-transform: translateX(-50%); opacity: 1;}
        50% {-webkit-transform: translateX(50%); opacity: 1;}
        60% {opacity: 1;}
        69.5%, 89% {opacity: 0;}
        90%{opacity: 1;}
        100% {-webkit-transform: translateX(-100%); opacity: 1;}
    }
    @keyframes yoyoStrobing {
        0% {transform: translateX(-50%); opacity: 1;}
        50% {transform: translateX(50%); opacity: 1;}
        60% {opacity: 1;}
        69.5%, 89% {opacity: 0;}
        90%{opacity: 1;}
        100% {transform: translateX(-100%); opacity: 1;}
    }