/* ------------ 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 buttons*/
#lighting_box .hd-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding-top: 30%;
    /*margin-bottom: 2em;*/
}
#lighting_box .hd-controls li {
  width: 25%;
  margin-bottom: 1em;
  cursor: pointer; 
  list-style: none;
}
#lighting_box .hd-controls li img {
    width: 65px;
    height: 65px;
    margin: 20px auto 10px; 
}
#lighting_box .hd-controls li b {
    display: block;
    margin: 1em 0; 
    text-align: center;
}


/*icons position*/
#lighting_box .hd-controls .hd-icon {
  width: 50px;
  height: 50px;
  margin: 0 auto;
  background-size: 200%;
  background-repeat: no-repeat;
  background-position: 0 0; 
}

#lighting_box .hd-controls li:hover .hd-icon,
#lighting_box .hd-controls li.hd-active .hd-icon {
    background-position: 100% 0; 
}

#lighting_box .hd-controls .hd-icon.static{background-image: url(../img/icon-static.png);}
#lighting_box .hd-controls .hd-icon.breathing{background-image: url(../img/icon-breathing.png);}
#lighting_box .hd-controls .hd-icon.strobing{background-image: url(../img/icon-strobing.png);}
#lighting_box .hd-controls .hd-icon.rainbow{background-image: url(../img/icon-rainbow.png);}
#lighting_box .hd-controls .hd-icon.color{background-image: url(../img/icon-cycle.png);}
#lighting_box .hd-controls .hd-icon.starry{background-image: url(../img/icon-night.png);}
#lighting_box .hd-controls .hd-icon.music{background-image: url(../img/icon-music.png);}
#lighting_box .hd-controls .hd-icon.smart{background-image: url(../img/icon-smart.png);}



/*headers*/
#lighting_box #light_headers{
  display: none;
}

#lighting_box #light_headers li {
  list-style: none;
}

#lighting_box #light_headers span {
  display: inline-block;
  vertical-align: top;
  background: #303132;
  border: 1px solid #da0100;
  border-radius: 50%;
  padding: 0 .5em;
  margin: 0 .5em; 
}
#lighting_box #light_headers figure {
  width: 100%;
  height: 0;
  padding-bottom: 9%;
  margin: 1em 0;
  position: relative;
  overflow: hidden; 
}
#lighting_box #light_headers figure img,
#lighting_box #light_headers figure div {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0; 
}


/*lightinbox*/
#lighting_box .hd-lightingbox {
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    position: relative;
    overflow: hidden; 
}
#lighting_box #aura_pd,
#lighting_box #color,
#lighting_box #greybg {
    width: 100%;
    /*height: 100%;*/
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0; 
}
#lighting_box #color,
#lighting_box #greybg {
    width: 98%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    z-index: 0; 
}
#lighting_box #greybg {
    background-color: #353535;
    z-index: -2; 
}


/*Starry nigth animation*/
#lighting_box .starry_night {
    display: none; 
}
#lighting_box .starry_night li {
  width: 12%;
  height: 0;
  padding-bottom: 12%;
  background-color: #ff0;
  position: absolute;
  background: radial-gradient(circle, #ff5555, #ff0000, #aa0000, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0));
  animation: breathing 2s infinite; 
  list-style: none;
}
#lighting_box .starry_night li:nth-child(1) {
    left: 8%;
    top: 10%; 
}
#lighting_box .starry_night li:nth-child(2) {
    left: 24%;
    top: 23%;
    animation: breathing 2s -1s infinite; 
}
#lighting_box .starry_night li:nth-child(3) {
    left: 41%;
    top: 58%;
    animation: breathing 3s -1s infinite; 
}
#lighting_box .starry_night li:nth-child(4) {
    left: 55%;
    top: 73%;
    animation: breathing 2s -1s infinite; 
}
#lighting_box .starry_night li:nth-child(5) {
    left: 70%;
    top: 83%;
    animation: breathing 3s -1s infinite; 
}
#lighting_box .starry_night li:nth-child(6) {
    left: 89%;
    top: 68%;
    animation: breathing 2s -1s infinite; 
}
#lighting_box .starry_night li:nth-child(7) {
    left: 74%;
    top: 75%;
    animation: breathing 3s -1s infinite; 
}
#lighting_box .starry_night li:nth-child(8) {
    left: 88%;
    top: 76%;
    animation: breathing 3s -1s infinite; 
}
#lighting_box .hd-rainbow {
    background: #1e5799;
    background-image: -moz-linear-gradient(135deg, #fd46a6, #ef212c, #ff7233, #ffd832, #d0f945, #77f168, #3ce448, #4eefac, #63e7ec, #3594f5, #253eda, #5216c1, #d748de, #fd46a6, #ef212c, #ff7233, #ffd832, #d0f945, #77f168, #3ce448, #4eefac, #63e7ec, #3594f5, #253eda, #5216c1, #d748de, #fd46a6);
    background-image: -webkit-linear-gradient(135deg, #fd46a6, #ef212c, #ff7233, #ffd832, #d0f945, #77f168, #3ce448, #4eefac, #63e7ec, #3594f5, #253eda, #5216c1, #d748de, #fd46a6, #ef212c, #ff7233, #ffd832, #d0f945, #77f168, #3ce448, #4eefac, #63e7ec, #3594f5, #253eda, #5216c1, #d748de, #fd46a6);
    background-image: linear-gradient(135deg, #fd46a6, #ef212c, #ff7233, #ffd832, #d0f945, #77f168, #3ce448, #4eefac, #63e7ec, #3594f5, #253eda, #5216c1, #d748de, #fd46a6, #ef212c, #ff7233, #ffd832, #d0f945, #77f168, #3ce448, #4eefac, #63e7ec, #3594f5, #253eda, #5216c1, #d748de, #fd46a6);
    background-size: 330%;
    background-repeat: repeat-x;
    background-position: 0 0; 
}
#lighting_box #color_a.hd-rainbow {
    background-size: 210%; 
}
#lighting_box #color_b.hd-rainbow {
    background-image: none;
    animation: cycle 8s 0s ease infinite !important; 
}
#lighting_box .hd-starry {
    background: #550000 !important; 
}
#lighting_box .hd-starry .starry_night {
  display: block; 
}
#lighting_box #color_a.hd-starry li {
    width: 6%;
    height: 100%;
    padding-bottom: 0;
    background: #f00;
    animation: breathing 2s infinite;
    top: 0; 
}
#lighting_box #color_a.hd-starry li:nth-child(1) {
  left: 4%; 
}
#lighting_box #color_a.hd-starry li:nth-child(2) {
  left: 21%;
  animation: breathing 2s -1s infinite; 
}
#lighting_box #color_a.hd-starry li:nth-child(3) {
  left: 57%;
  animation: breathing 3s -1s infinite; 
}
#lighting_box #color_a.hd-starry li:nth-child(4) {
  left: 75%;
  animation: breathing 2s -1s infinite; 
}
#lighting_box #color_a.hd-starry li:nth-child(5) {
  left: 93%;
  animation: breathing 3s -1s infinite; 
}
#lighting_box #color_b.hd-starry {
    background: #f00 !important;
    animation: flashStrobing 5s 0s ease infinite !important; 
}




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




/*keyframes animation*/

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


.farbtastic {margin:0 auto;}


@media (max-width: 575px) {
  .img-aura {
    margin-top:40px!important;
  }
}