/*-----lighting-----*/

#Helios-width-full #lighting{
	padding-top: 80px;
	position: relative;
	z-index: 2;
	overflow: hidden;
	text-align: center;
	background: #000 url(../img/aura_bg.jpg) top center repeat-y;
	background-size: 100%;
}
#Helios-width-full #lighting .aura_note_bg{
	background: #000 url(../img/aura_note_bg.jpg) top center repeat-y;
	background-size: 100%;
	padding-bottom: 50px;
}
#Helios-width-full #lighting .aura_note_bg .maintitle{
	max-width: 790px;
}
#Helios-width-full #lighting .aura_note_bg .maintitle p.note{
	/*text-align: left;*/
}
#Helios-width-full #lighting .maintitle {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 18px
}
#Helios-width-full #lighting h2{
	padding: 0 0 30px;
}

#Helios-width-full #lighting .w1100 > p{
	padding:0 5px;
	margin-bottom: 50px;
}

#Helios-width-full #lighting .hd-lighting{
	text-align: center;
	margin: -19% auto 0;
	position: relative;
	overflow:hidden;
	z-index: -1;
}
#Helios-width-full #lighting .hd-lighting img{
	max-width: 100%
}

#Helios-width-full #lighting .hd-controls{
	position: relative;
    margin: 50px auto;
    max-width: 800px;
}
#Helios-width-full #lighting .hd-controls li{
	display: inline-block;
	vertical-align: top;
	width: 14.28%;
	margin-left: -6px;
	margin-bottom: 30px;
	opacity: .6;
	cursor: pointer;
}
#Helios-width-full #lighting .hd-controls li:hover{
	opacity: 1
}
#Helios-width-full #lighting .hd-controls li img{
	display: block;
	max-width: 58px;
	max-height: 58px;
	margin:0 auto 10px !important;
}
#Helios-width-full #lighting .hd-controls li b{
	display: block;
    font-size: 1.05rem;
    font-weight: 400;
    letter-spacing: 0.5px;
    color: #fff
}
#Helios-width-full #lighting .hd-controls li.hd-active:before{
	content: "";
	filter: drop-shadow(0px 0 #FF0000);
    z-index: 222;
    position: relative;
}
#Helios-width-full #lighting .hd-controls li .act,
#Helios-width-full #lighting .hd-controls li.hd-active .nom{
	display: none
}
#Helios-width-full #lighting .hd-controls li.hd-active .act{
	display: block;
}
#Helios-width-full #lighting .hd-controls li.hd-active b{
	color: #28e1ff
}
#Helios-width-full #lighting .hd-controls li.hd-active{
	opacity: 1;
}
@media (max-width: 719px) {
	#Helios-width-full #lighting .hd-controls li{
		width: 25%;
	}
	#Helios-width-full #lighting .hd-controls li b{
		font-size: 1.2em;
		line-height: 1.1
	}
}
#Helios-width-full #color,
#Helios-width-full #greybg{
	position: absolute;
	width: 60%;
	height: 88%;
	top:2px;
	left: 0;
	right: 0;
	margin:0 auto;
	z-index: -2;
	-webkit-transition: opacity .4s ease;
	   -moz-transition: opacity .4s ease;
		-ms-transition: opacity .4s ease;
		 -o-transition: opacity .4s ease;
			transition: opacity .4s ease;
}
#Helios-width-full #greybg {
	background-color: #000000;
	z-index: -3;
}
#Helios-width-full #greybg.hd-zindex{
	z-index: -1;
}

#Helios-width-full #colorpicker {
	width: 140px;
	position: absolute;
	left: 0;
	right: 0;
	bottom: -210px;
	margin: 0 0 0 auto;
}
#Helios-width-full #colorpicker .farbtastic-mask,
#Helios-width-full #colorpicker .farbtastic-overlay{
	top: 0;
	left: 0;
}
#Helios-width-full #reactive {
  position: absolute;
  width: 90px;
  height: 90px;
  top: 65%;
    left: 33%;
  background: url(../img/icons/click.png) center center no-repeat;
  z-index: 1;
  cursor: pointer;
}
@media (min-width: 719px) and (max-width: 1200px) {
	#Helios-width-full #reactive{
		top: 72%;
    	left: 30%;
	}
}
@media (max-width: 719px) {
	#Helios-width-full #reactive{
        top: 73%;
        left: 3%;
    }
    #Helios-width-full #lighting .hd-lighting{
    	margin-top: 5%
	}
}

#Helios-width-full #color.reactive{
	opacity: 0;
	-webkit-transition: opacity .4s ease;
	   -moz-transition: opacity .4s ease;
		-ms-transition: opacity .4s ease;
		 -o-transition: opacity .4s ease;
			transition: opacity .4s ease;
}

/* ---------- ANIMATIONS ---------- */

#Helios-width-full #cable .bg-cable-section,
#Helios-width-full #exclusive .w1200 .col50:nth-child(2) img {
	transition: all 1s ease 0s;
	-webkit-transition: all 1s ease 0s;
	-moz-transition: all 1s ease 0s;
	-ms-transition: all 1s ease 0s;
	-o-transition: all 1s ease 0s;
}
#Helios-width-full .colorrun{
	-webkit-animation: colorrun 5s infinite;
	-o-animation: colorrun 5s infinite;
	animation: colorrun 5s infinite;
}
#Helios-width-full .colorrun-flip{
	-webkit-animation: colorrun-flip 5s infinite;
	-o-animation: colorrun-flip 5s infinite;
	animation: colorrun-flip 5s infinite;
}
#Helios-width-full .exclusiverun{
	-webkit-animation: exclusiverun 5s infinite;
	-o-animation: exclusiverun 5s infinite;
	animation: exclusiverun 5s infinite;
}
@keyframes colorrun {
	from {
		-webkit-filter: hue-rotate(0deg);
		filter: hue-rotate(0deg);
	}
	to {
		-webkit-filter: hue-rotate(359deg);
		filter: hue-rotate(359deg);
	}
}
@-webkit-keyframes colorrun {
	from {-webkit-filter: hue-rotate(0deg);}
	to {-webkit-filter: hue-rotate(359deg);}
}

@keyframes colorrun-flip {
	from {
		-webkit-filter: hue-rotate(360deg);
		filter: hue-rotate(360deg);
	}
	to {
		-webkit-filter: hue-rotate(1deg);
		filter: hue-rotate(1deg);
	}
}
@-webkit-keyframes colorrun-flip {
	from {-webkit-filter: hue-rotate(360deg);}
	to {-webkit-filter: hue-rotate(1deg);}
}

@-webkit-keyframes prompt{
	0%{
		-webkit-transform: scale(.9);
				transform: scale(.9);
	}
	90%{
		-webkit-transform: scale(1);
				transform: scale(1);
	}
	100%{
		-webkit-transform: scale(.9);
				transform: scale(.9);
	}
}
@keyframes prompt{
	0%{
		-webkit-transform: scale(.9);
				transform: scale(.9);
	}
	90%{
		-webkit-transform: scale(1);
				transform: scale(1);
	}
	100%{
		-webkit-transform: scale(.9);
				transform: scale(.9);
	}
}

.animated-fadeIn{
	-webkit-animation: fadeIn .5s forwards;
	-o-animation: fadeIn .5s forwards;
	animation: fadeIn .5s forwards;
}

@-webkit-keyframes bigIn{
	0%	{
		-webkit-transform: scale(2) translateY(-20px);
			 -moz-transform: scale(2) translateY(-20px);
				-ms-transform: scale(2) translateY(-20px);
				 -o-transform: scale(2) translateY(-20px);
						transform: scale(2) translateY(-20px);
	}
	50%	{
		-webkit-transform: scale(2) translateY(-20px);
		   -moz-transform: scale(2) translateY(-20px);
			-ms-transform: scale(2) translateY(-20px);
			 -o-transform: scale(2) translateY(-20px);
				transform: scale(2) translateY(-20px);
	}
	100%	{
		-webkit-transform: scale(1) translateY(0);
		   -moz-transform: scale(1) translateY(0);
			-ms-transform: scale(1) translateY(0);
			 -o-transform: scale(1) translateY(0);
				transform: scale(1) translateY(0);
	}
}
@keyframes bigIn{
	0%	{
		-webkit-transform: scale(2) translateY(-20px);
		   -moz-transform: scale(2) translateY(-20px);
			-ms-transform: scale(2) translateY(-20px);
			 -o-transform: scale(2) translateY(-20px);
				transform: scale(2) translateY(-20px);
	}
	50%	{
		-webkit-transform: scale(2) translateY(-20px);
		   -moz-transform: scale(2) translateY(-20px);
			-ms-transform: scale(2) translateY(-20px);
			 -o-transform: scale(2) translateY(-20px);
				transform: scale(2) translateY(-20px);
	}
	100%	{
		-webkit-transform: scale(1) translateY(0);
		   -moz-transform: scale(1) translateY(0);
			-ms-transform: scale(1) translateY(0);
			 -o-transform: scale(1) translateY(0);
				transform: scale(1) translateY(0);
	}
}

@-webkit-keyframes bigOut{
	0%	{
		-webkit-transform: scale(1) translateY(0);
			 -moz-transform: scale(1) translateY(0);
				-ms-transform: scale(1) translateY(0);
				 -o-transform: scale(1) translateY(0);
						transform: scale(1) translateY(0);
	}
	30%	{
		-webkit-transform: scale(2) translateY(-20px);
			 -moz-transform: scale(2) translateY(-20px);
				-ms-transform: scale(2) translateY(-20px);
				 -o-transform: scale(2) translateY(-20px);
						transform: scale(2) translateY(-20px);
	}
	100%	{
		-webkit-transform: scale(2) translateY(-20px);
			 -moz-transform: scale(2) translateY(-20px);
				-ms-transform: scale(2) translateY(-20px);
				 -o-transform: scale(2) translateY(-20px);
						transform: scale(2) translateY(-20px);
	}
}
@keyframes bigOut{
	0%	{
		-webkit-transform: scale(1) translateY(0);
			 -moz-transform: scale(1) translateY(0);
				-ms-transform: scale(1) translateY(0);
				 -o-transform: scale(1) translateY(0);
						transform: scale(1) translateY(0);
	}
	30%	{
		-webkit-transform: scale(2) translateY(-20px);
			 -moz-transform: scale(2) translateY(-20px);
				-ms-transform: scale(2) translateY(-20px);
				 -o-transform: scale(2) translateY(-20px);
						transform: scale(2) translateY(-20px);
	}
	100%	{
		-webkit-transform: scale(2) translateY(-20px);
			 -moz-transform: scale(2) translateY(-20px);
				-ms-transform: scale(2) translateY(-20px);
				 -o-transform: scale(2) translateY(-20px);
						transform: scale(2) translateY(-20px);
	}
}

@-webkit-keyframes fadeIn{
	0%	{opacity: 0;}
	50%	{opacity: 0;}
	100%	{opacity: 1;}
}
@keyframes fadeIn{
	0%	{opacity: 0;}
	50%	{opacity: 0;}
	100%	{opacity: 1;}
}

@-webkit-keyframes fadeOut{
	0%	{opacity: 1;}
	30%	{opacity: 0;}
	100%	{opacity: 0;}
}
@keyframes fadeOut{
	0%	{opacity: 1;}
	30%	{opacity: 0;}
	100%	{opacity: 0;}
}
/* ---------- color effect ---------- */
.hd-rainbow{
	background: url(../img/lighting/lighting-wave.png) 0 0 repeat;
	background-size: 150%;
}
.hd-comet{
	background: url(../img/lighting/lighting-comet.png) 0 0 repeat;
	/* background-size: cover; */
	background-size: auto 100%;
	box-shadow: 0 0 0px rgba(0, 0, 0, 1) inset;
}

@keyframes comet {
	0% {
		 background-position: -1000px 0;
	}
	100% {
		background-position: 50px 0;
	}
}
@-webkit-keyframes comet {
	0% {
		 background-position: -100px 0;
	}
	100% {
		background-position: 50px 0;
	}
}

@-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 music {
  0%	{opacity: 1}
  10%	{opacity: .3}
  40%	{opacity: 1}
  60%	{opacity: .3}
  70%	{opacity: 1}
  95%	{opacity: .3}
  100%	{opacity: 1}
}
@keyframes music {
  0%	{opacity: 1}
  10%	{opacity: .3}
  40%	{opacity: 1}
  60%	{opacity: .3}
  70%	{opacity: 1}
  95%	{opacity: .3}
  100%	{opacity: 1}
}
@-webkit-keyframes cycle {
  0%	{background-color: red;}
  2%	{background-color: red;}
  10.3%	{background-color: orange;}
  18.6%	{background-color: yellow;}
  26.9%	{background-color: #b0ff00;}
  35.2%	{background-color: #00db4a;}
  43.5%	{background-color: #00ffd9;}
  51.8%	{background-color: #00deff;}
  60.1%	{background-color: #0093ff;}
  68.4%	{background-color: #0023ff;}
  76.7%	{background-color: #8e00ff;}
  85%	{background-color: #e100ff;}
  93.3%	{background-color: #ff008b;}
  100%	{background-color: red;}
}
@keyframes cycle {
  0%	{background-color: red;}
  2%	{background-color: red;}
  10.3%	{background-color: orange;}
  18.6%	{background-color: yellow;}
  26.9%	{background-color: #b0ff00;}
  35.2%	{background-color: #00db4a;}
  43.5%	{background-color: #00ffd9;}
  51.8%	{background-color: #00deff;}
  60.1%	{background-color: #0093ff;}
  68.4%	{background-color: #0023ff;}
  76.7%	{background-color: #8e00ff;}
  85%	{background-color: #e100ff;}
  93.3%	{background-color: #ff008b;}
  100%	{background-color: red;}
}


/*20191118 battery*/
#lighting .battery {
    width: 280px;
    position: absolute;
    left: 0;
    right: -10%;
    top: 150%;
    margin: 0 0 0 auto;
}
#lighting .battery img{
    width: 100%;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    max-width: inherit !important;
    max-height: inherit !important;
}
#lighting .battery img.battery-2{
    opacity: 0;
}
#lighting .battery img.battery-3{
    opacity: 0;
}
#lighting .battery.go img.battery-1{
    animation: batteryRed 9s 0s infinite;
}
#lighting .battery.go img.battery-2{
    animation: batteryBlue 9s 0s infinite;
}
#lighting .battery.go img.battery-3{
    animation: batteryGreen 9s 0s infinite;
}

@keyframes batteryRed{
	0%		{opacity: 1}
	10%		{opacity: 1}
	30%		{opacity: 0}
	45%		{opacity: 0}
	55%		{opacity: 0}
	80%		{opacity: 0}
	90%		{opacity: 1}
	100%    {opacity: 1}
}
@keyframes batteryBlue{
	0%		{opacity: 0}
	10%		{opacity: 0}
	30%		{opacity: 1}
	45%		{opacity: 1}
	55%		{opacity: 0}
	80%		{opacity: 0}
	90%		{opacity: 0}
	100%    {opacity: 0}
}
@keyframes batteryGreen{
	0%		{opacity: 0}
	10%		{opacity: 0}
	30%		{opacity: 0}
	45%		{opacity: 0}
	55%		{opacity: 1}
	80%		{opacity: 1}
	90%		{opacity: 0}
	100%    {opacity: 0}
}

@media screen and (max-width: 1350px) {
	#lighting .battery {
	    width: 280px;
	}
}
@media screen and (max-width: 1100px) {
	#lighting .battery {
	    width: 200px;
	    right: 2%;
	}
}
@media screen and (max-width: 950px) {
	#lighting .battery {
		left: 0%;
	}
}
@media screen and (max-width: 719px) {
	#lighting .battery {
		left: inherit;
	    right: inherit;
	    margin: 0 auto;
	    position: relative;
	    width: 100%;
	    max-width: 325px;
	    top: 30px;
	}
}
@media screen and (max-width: 450px) {
	#lighting .battery {
		left: inherit;
	    right: inherit;
	    margin: 0 auto;
	    position: relative;
	    width: 100%;
	    max-width: 325px;
	    top: 30px;
	}
}
@-webkit-keyframes battery{
	0%		{background-color: #000000}
	10%		{background-color: #ff0000}
	20%		{background-color: #ff0000}
	25%		{background-color: #000000}
	40%		{background-color: #00d7e7}
	55%		{background-color: #00d7e7}
	60%		{background-color: #000000}
	75%		{background-color: #2ae020}
	90%		{background-color: #2ae020}
	95%		{background-color: #2ae020}
	100%		{background-color: #000000}
}
@keyframes battery{
	0%		{background-color: #000000}
	10%		{background-color: #ff0000}
	20%		{background-color: #ff0000}
	25%		{background-color: #000000}
	40%		{background-color: #00d7e7}
	55%		{background-color: #00d7e7}
	60%		{background-color: #000000}
	75%		{background-color: #2ae020}
	90%		{background-color: #2ae020}
	95%		{background-color: #2ae020}
	100%		{background-color: #000000}
}