@media screen and (min-width: 3000px){
	#hd #lighting .w1100{
		padding-bottom: 0%;
	}
}
@media screen and (min-width: 2500px) {
	#hd #lighting .w1100{
		padding-bottom: 10%;
	}
}
@media screen and (min-width: 2000px) {
	#hd #lighting .w1100{
		padding-bottom: 35%;
	}
	#hd #lighting .hd-lighting{
		margin-top: 0;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
	}
	#hd #reactive{
		top:auto;
		bottom:750px;
	}
	#hd #aura{
		/*margin-top: -15%;*/
	}
}
@media screen and (max-width: 1600px) {
	#hd #reactive{
		top: 568px;
	}
}
@media screen and (max-width: 1440px) {
	#hd h2,
	#hd #lighting h2{
		padding-bottom: 30px;
	}
	#hd #kv{
		padding-top: 0;
	}
	#hd #kv img{
		max-width: 80%;
	}

	#hd #sidebtn p{
		padding-bottom: 0;
	}

	#hd #features .w95{
		width: 100%;
	}
	/*#hd #features > ul > li,
	#hd #features > ul > li:nth-child(2){
		padding:0 3%;
	}*/

	#hd #lighting{
		padding-top: 70px;
	}
	#hd #lighting .w1100 > p{
		margin-bottom: 50px;
	}
	#hd #lighting .hd-lighting{
		margin-top: -30%;
	}

	#hd #aura{
		padding-top: 15%;
	}

	#hd #separate{
		margin-top: -12%;
	}

	#hd #armoury p{
		margin:0 auto;
	}

	#hd #reactive{
		top: 406px;
	}
}
@media screen and (max-width:1366px) {
	#hd h2{
		font-size: 3.25rem;
		line-height: 3.25rem;
	}
	#hd h3{
		font-size: 1.75rem;
		line-height: 1.75rem;
		margin-bottom: 15px;
	}

	#hd #switchsocket h2{
		max-width: 770px;
	}
	#hd #switchsocket img{
		margin-top: -23%;
	}

	/*#hd #features > ul > li:nth-child(2){
		padding:0 2%;
	}	*/
}
@media screen and (max-width:1200px) {
	#hd #switchsocket img{
		margin-top: -20%;
	}

	#hd #opticalsensor li{
		min-width: 46%;
	}
	#hd #reactive {
    top: 450px;
	}
}
@media screen and (max-width:1024px) {
	#hd h2{
		font-size: 2.75rem;
		line-height: 2.75rem;
	}

	#hd #kv img{
		max-width: 90%;
	}

	#hd #sidebtn .hint{
		width: 40%;
		left: -5%;
	}

	#hd #features .steps{
		height: 300px;
	}

	#hd #lighting .hd-lighting{
		margin-top: -30%;
		margin-bottom: 5%;
		margin-right: -10%;
	}

	#hd #switches .left{
		padding:10% 2% 0;
	}

	#hd #opticalsensor ul{
		margin-top: 20px;
	}

	#hd #separate{
		margin-top: -5%;
	}

	#hd #reactive {
    /*top: 45%;*/
	}
}
@media screen and (max-width:768px) {
	#hd #kv{
		padding: 5% 0;
	}
	#hd #kv p{
		padding: 0;
	}

	#hd #sidebtn{
		padding-top: 70px;
	}
	#hd #sidebtn .bg-aura{
		background-position: 26% bottom;
	}
	#hd #sidebtn p{
		padding-bottom: 50px;
	}

	#hd #switchsocket img{
		margin:30px auto 0;
	}

	#hd #features .steps{
		height: 250px;
	}

	#hd #lighting .w1100{
		padding:0;
	}
	#hd #lighting .w1100 > p{
		padding:0;
	}
	#hd #lighting .hd-controls li{
		margin-bottom: 15px;
	}

	#hd #aura img{
		max-width: none;
		width: 150%;
		margin-left: -25%;
	}

	#hd #switches .right{
		vertical-align: bottom;
		padding-bottom: 15%;
		padding-left: 8%;
		margin-right: -20%;
	}

	#hd #opticalsensor{
		text-align: center;
	}
	#hd #opticalsensor .left,
	#hd #opticalsensor .right{
		width: 100%;
		margin-left: 0;
	}
	#hd #opticalsensor li{
		min-width: 0;
	}

	#hd #separate{
		margin-top: -15%;
		padding-top: 15%;
	}
	#hd #separate .bg-aura{
		background-position: 72% top;
	}
	#hd #armoury{
		padding-bottom: 80px;
	}
}
@media screen and (max-width:767px){
	#hd #sidebtn .left{
		width: 100%;
		margin-top: 0;
		text-align: left;
	}
	#hd #sidebtn #sidebtn-toggle img{
		margin:0;
	}
	#hd #sidebtn .description{
		width: 50%;
		left: 50%;
		top: 35%;
		bottom: 0;
	}
	#hd #sidebtn .right{
		width: 100%;
		right: -10%;
		margin-top: -5%;
	}

	#hd #features > ul > li > h3 {
		max-width: none;
	}
	#hd #features > ul > li{
		display: block;
		width: 100%;
		padding:25px 5%;
	}
	#hd #features > ul > li:nth-child(2):before,
	#hd #features > ul > li:nth-child(2):after{
		width: 70%;
		min-width: 200px;
		height: 2px;
		background-image: url(../img/features/bar-mobile.png);
		background-size: cover;
		left: 0;
		right: 0;
		margin:0 auto;
	}
	#hd #features > ul > li:nth-child(2):before{
		top: 0;
		bottom:auto;
		transform-origin: center top;
	}
	#hd #features > ul > li:nth-child(2):after{
		top:auto;
		bottom:0;
		transform-origin: center bottom;
	}
	#hd #features p{
		padding-bottom: 10px;
	}
	#hd #features .steps{
		height: 300px;
	}

	#hd #lighting .hd-lighting{
		margin-top: -20%;
		width: 150%;
		margin-left: -50%;
	}
	#hd #lighting .hd-controls{
		max-width: 300px;
	}
	#hd #colorpicker{
		left: auto;
		right: -150px;
		top: 20px;
		bottom: 0;
		margin:auto 0;
	}

	#hd #switches h2+p{
		max-width: none;
	}
	#hd #switches .left,
	#hd #switches .right{
		padding-top:20px;
		display: block;
		margin-left: 0;
		width: 100%;
	}
	#hd #switches .left img,
	#hd #switches .left p{
		display: inline-block;
		vertical-align: middle;
		width: 50%;
		margin-left: -5px;
	}
	#hd #switches .left p{
		padding-left: 5%;
		padding-right: 0;
	}

	#hd #separate{
		padding-bottom: 10%;
	}
	#hd #separate .left,
	#hd #separate .right{
		width: 100%;
		display: block;
		margin-left: 0;
	}
	#hd #separate .right{
		text-align: center;
	}

	#hd #armoury .ui li{
		display: block;
		width: 100%;
		margin-left: 0;
		margin-bottom: 20px;
		padding:0 5%;
	}
	#hd #armoury .ui li:first-child img,
	#hd #armoury .ui li:last-child img{
		transform: none;
	}

	#hd #reactive {
    top: 57%;
    left: 17%;
	}
}
@media screen and (max-width:620px) {
	#hd #reactive {
    top: 68%;
    left: 17%;
	}
}
@media screen and (max-width:480px) {
	#hd small{
		font-size: 12px;
		line-height: 12px;
	}
	#hd h2{
		font-size: 2rem;
		line-height: 2.25rem;
	}
	#hd h3{
		font-size: 1.5rem;
	}

	#hd #sidebtn p{
		padding-bottom: 30px;
	}
	#hd #sidebtn .hint{
		bottom:auto;
		top:20%;
	}
	#hd #sidebtn .description{
		position: relative;
		margin-top: 10px;
		width: 100%;
		left: 0;
	}
	#hd #sidebtn .right{
		right: 0;
		margin-top: 20px;
		width: 120%;
		margin-left: -10%;
	}

	#hd #features{
		padding-top: 20px;
	}

	#hd #colorpicker{
		display: none!important;
	}
	#hd #lighting .hd-controls{
		max-width: 100%;
	}

	#hd #reactive {
	    top: 73%;
	    left: 13%;
	}
}
@media screen and (max-width:360px) {
	#hd #reactive {
			top: 79%;
			left: 3%;
	}
}