@media screen and (max-width: 1440px) {
	#hd h2{
		font-size: 36px;
		line-height: 1.1;
	}
	/*------------ switches ----------*/
	#hd #switches.h750{height: auto;}
	#hd #switches .info{
		width: 60%;
		left: 40%;
	}

	#hd #switches .bg{
		left: 50px;
	}
	/*------------ built ----------*/
	#hd #built .text h2,
	#hd #built .text p{
		margin-left: 90px;
	}
	/*------------ play ----------*/
	#hd #play h2{
		width: calc(50% - 194px);
		margin-top: 50px;
		margin-left: 190px;
	}
	#hd #play .right{
		margin-top: 90px;
	}
	#hd #play .bg{
		bottom: 70px;
	}
	/*------------ armoury ----------*/
	#hd #armoury .text h2,
	#hd #armoury .text p,
	#hd #armoury .text a{
		margin-left: 90px;
	}
	#hd #armoury .text h2,
	#hd #armoury .text a{
		margin-right: -90px;
	}

	/*------------ colorDiv ----------*/
	#built-colorDiv .s,
	#built-colorDiv::before,
	#switches-colorDiv .s,
	#switches-colorDiv::before,
	#play-colorDiv .s,
	#play-colorDiv::before,
	#magnetic-colorDiv .s,
	#magnetic-colorDiv::before{
		margin-left: -60px;
	}
	#built-colorDiv::after,
	#switches-colorDiv::after,
	#play-colorDiv::after,
	#magnetic-colorDiv::after{
		margin-right: 60px;
	}
	#armoury-colorDiv .s,
	#armoury-colorDiv::before,
	#instant-colorDiv .s,
	#instant-colorDiv::before{
		margin-left: 60px;
	}
	#armoury-colorDiv::after,
	#instant-colorDiv::after{
		margin-right: -60px;
	}
}
@media screen and (max-width: 1366px){
	#hd #feature li:nth-child(3) h3{
		/* margin-right: -30px; */
	}
}
@media screen and (max-width:1280px) {
	#hd .h750{height: 650px;}
	#hd .hd-btn{
		font-size: 16px;
		padding:5px 20px;
	}


	#kv .kv-info {
		background-size: 120% auto;
		padding-top: 48%;
	}


	#hd #built .ppic{
		right: 30%;
	}
	/*------------ switches ----------*/
	#hd #switches h2,
	#hd #switches h2+p{
		margin-left: 90px;
		max-width: none;
	}
	#hd #switches .info{
		width: 100%;
		max-width: none;
		left: 0%;
	}
	#hd #switches #switch_img,
	#hd #switches #switch_content{
		width: 60%;
		position: relative;
		left: 40%;
	}
	/*------------ play ----------*/
	#hd #play h2{
		width: 100%;
		margin-top: 50px;
		margin-left: 90px;
		padding-right: 90px;
	}
	#hd #play h2::before{
		height: 100%;
		top: -30px;
	}
	#hd #play .right{
		width: 100%;
		margin-top: 10px;
		margin-left: 90px;
		padding-right: 90px;
	}
	#hd #play .bg{
		bottom: 0;
	}

	/*------------ LIGHTING -------*/
	#hd #lighting .hd-controls{margin:10px auto; }
	#hd .lighting_options{margin:0 auto 10px; }
	/*------------ armoury -------*/
	#hd #armoury.h750{height: auto;}
	#hd #armoury .fright{width: 50%;}
	#hd #armoury .fright img{margin:10px 0;}
	/*------------ feature -------*/
	#hd #feature li:nth-child(2) h3{/* font-size: 18px; margin-right: -20px; */}
	#hd #feature li:nth-child(3) h3,
	#hd #feature li:nth-child(5) h3{
		/* font-size: 20px; */
		 /* margin-right: -30px; */}
	/*------------ colorDiv ----------*/
	#built-colorDiv .s,
	#built-colorDiv::before,
	#switches-colorDiv .s,
	#switches-colorDiv::before,
	#play-colorDiv .s,
	#play-colorDiv::before,
	#magnetic-colorDiv .s,
	#magnetic-colorDiv::before{
		margin-left: -90px;
	}
	#built-colorDiv::after,
	#switches-colorDiv::after,
	#play-colorDiv::after,
	#magnetic-colorDiv::after{
		margin-right: 90px;
	}
	#armoury-colorDiv .s,
	#armoury-colorDiv::before,
	#instant-colorDiv .s,
	#instant-colorDiv::before{
		margin-left: 90px;
	}
	#armoury-colorDiv::after,
	#instant-colorDiv::after{
		margin-right: -90px;
	}
}
@media screen and (max-width:1024px) {
	/*#hd .h750{height: 650px;}*/
	#hd h1{font-size: 30px; }

	/*------------ switch -------*/
	#switch_content li p{max-width: 450px; }
	/*------------ built -------*/
	#hd #built .text{
		margin-top: 6%;
	}
	#hd #built .text h2{
		margin-right: -90px;
	}
	/*------------ LIGHTING -------*/
	#colorpicker {
		width: 90px;
		height: 90px;
		bottom: 40%;
	}
	#colorpicker div,
	#colorpicker canvas{
		max-width: 100%;
		max-height: 100%;
	}
	#colorpicker .farbtastic-solid{
		width: 48px !important;
		height: 48px !important;
		top: 21px !important;
		left: 21px !important;
	}
	#hd #lighting small.txt-red{
		position: relative;
		left: 0;
		height: auto;
		margin-bottom: 20px;
		display: block;
		text-align: center;
	}
	/*------------ feature -------*/
	#hd #feature li{margin:50px 0 50px -7px; }
	#hd #feature li img{width: 30%; }
	#hd #feature li img + div{width: 80%; }
	/* #hd #feature li:nth-child(2) h3{font-size: 18px;} */
}
@media screen and (max-width:1023px){
	#hd h4{
		font-size: 22px;
	}

	#kv .kv-info h2::before,
	#hd #built h2::before,
	#hd #switches h2::before,
	#hd #armoury h2::before,
	#hd #lighting h2::before,
	#hd #sdk h2::before,
	#hd #play h2::before,
	#hd #instant h2::before{
		display: none;
	}

	/*------------ KV -------------*/
	#kv .kv-info {
		background-size: 120% auto;
		padding-top: 50%;
		padding-bottom: 60px;
	}
	/*------------ switch -------*/
	#hd #switches{padding:80px 0 0;}
	#hd #switches h2{
		display: inline-block;
	}
	#hd #switches h2,
	#hd #switches h2+p{
		margin-left: 0;
		text-align: center;
		max-width: none;
	}
	#hd #switches .info{
		text-align: center;
	}
	#hd #switches #switch_img,
	#hd #switches #switch_content{
		width: 90%;
		left: 0;
	}
	#hd #switches #switch_img{
		margin: auto;
	}
	#hd #switches #switch_content{
		text-align: left;
	}
	#hd #switches .bg{
		height: 500px;
		margin-top: -80px;
		position: relative;
		background-size: 170%;
		background-position: 0px 50px;
		bottom: 0;
	}
	/*------------ built -------*/	
	#hd #built{
		height: auto;
		padding-bottom: 35%;
		background-size: 100%;
		background-position: bottom; 
		background-repeat: no-repeat;
	}
	#hd #built .text > div{
		width: 100%;
	}
	#hd #built .text{
		margin-top: 0;
	}
	#hd #built .text h2,
	#hd #built .text p{
		margin-left: 0;
		margin-right: 0;
		text-align: center;
	}

	#hd #built .ppic{
		width: 100%;
		padding-bottom: 39.0625%;
		bottom: 0;
		right: 0;
	}
	#hd #built .ppic img{
		position: absolute;
		bottom: 35%;
		right: 30%;
	}
	/*------------ play ----------*/
	#hd #play{
		height: auto;
		padding-bottom: 25%;
	}
	#hd #play h2{
		width: 100%;
		margin-top: 0;
		margin-left: 0;
		padding-right: 0;
		text-align: center;
	}
	#hd #play h2::before{
		height: 100%;
		top: -30px;
	}
	#hd #play .right{
		width: 100%;
		margin-top: 10px;
		margin-left: 0;
		padding-right: 0;
	}
	#hd #play .right p{
		text-align: center;
	}
	#hd #play .high{
		margin-left: 30px;
	}
	#hd #play .bg{
		bottom: 0;
	}
	/*------------ armoury -------*/		
	#hd #armoury h2{
		display: inline-block;
	}
	#hd #armoury .text h2,
	#hd #armoury .text p,
	#hd #armoury .text a{
		margin: 0;
	}
	#hd #armoury .text{
		width: 100%;
		text-align: center;
	}
	#hd #armoury .pic{
		width: 100%;
		left: 0;
	}

	/*------------ colorDiv -------*/	
	#built-colorDiv .s,
	#built-colorDiv::before,
	#switches-colorDiv .s,
	#switches-colorDiv::before,
	#play-colorDiv .s,
	#play-colorDiv::before,
	#magnetic-colorDiv .s,
	#magnetic-colorDiv::before,
	#versatile-colorDiv .s,
	#versatile-colorDiv::before{
		margin-left: -110px;
	}
	#built-colorDiv::after,
	#switches-colorDiv::after,
	#play-colorDiv::after,
	#magnetic-colorDiv::after,
	#versatile-colorDiv::after{
		margin-right: 110px;
	}
	#armoury-colorDiv .s,
	#armoury-colorDiv::before,
	#instant-colorDiv .s,
	#instant-colorDiv::before{
		margin-left: 110px;
	}
	#armoury-colorDiv::after,
	#instant-colorDiv::after{
		margin-right: -110px;
	}

	#lightbox .box {
		width: 90%;
		height: 0;
		padding-bottom: 56.25%;
	}
}
@media screen and (max-width:980px) {
	.hd-wave:before{
		-webkit-animation: wave_block 1.9s -1.1s infinite;
		-o-animation: wave_block 1.9s -1.1s infinite;
		animation: wave_block 1.9s -1.1s infinite;
	}



	/* #hd #built img{
		width: 30%;
		bottom: 22%;
		right: 31%;
	} */
	/*------------ feature -------*/
	#hd #feature.h750{height: auto;}
	#hd #feature li{
		width: 50%;
		margin:30px 0 30px -7px;
	}
	#hd #feature li:after{height: 5px;}
}
@media screen and (max-width:768px) {
	#hd .mobile-on{display: block; }
	#hd .h750{height: auto;}
	#hd h1{font-size: 26px; }

	#kv .kv-info p,
	#hd #switches .info > p,
	#hd #built .text p,
	#hd #lighting p,
	#hd #armoury .text p,
	#hd #sdk .text p,
	#hd #play .text p{
		font-size: 14px;
	}
	/*------------ KV -------------*/
	/*------------ switches -------*/
	#hd #switches{padding:30px 0 0;}
	#hd #switch_img li:first-child{margin-left: 0;}
	#hd #switch_content li p{max-width: none; }
	#hd #switches > img{
		position: relative;
		width: 100%;
		margin-top: -5%;
	}
	#hd #switches .bg{
		left: 0;
	}



	#hd #built .ppic img{
		width: 40%;
	}
	/*------------ play ----------*/
	#hd #play .contol span{
		font-size: 25px;
	}
	#hd #play .contol .btnset1,
	#hd #play .contol .btnset2{
		width: 50px;
		height: 50px;
	}


	#hd #instant{
		height: auto;
		padding-bottom: 25%;
	}
	#hd #instant .contol{
		margin: 7px 0;
	}
	#hd #instant .contol,
	#hd #instant .show{
		text-align: center;
	}
	#hd #instant .contol img{
		width: 50px;
		height: 50px;
	}
	#hd #instant .show .audio img,
	#hd #instant .show .hide img{
		margin-left: 10px;
		width: 70px;
		height: 70px;
	}
	#hd #instant .show .audio p,
	#hd #instant .show .hide p{
		margin-top: 80px;
	}
	/*------------ LIGHTING -------*/
	.hd-wave:before{display: none; }
	#colorpicker{display: none !important;}
	/*------------ colorDiv -------*/
	#built-colorDiv .s,
	#built-colorDiv::before,
	#switches-colorDiv .s,
	#switches-colorDiv::before,
	#play-colorDiv .s,
	#play-colorDiv::before,
	#magnetic-colorDiv .s,
	#magnetic-colorDiv::before{
		margin-left: -140px;
	}
	#built-colorDiv::after,
	#switches-colorDiv::after,
	#play-colorDiv::after,
	#magnetic-colorDiv::after{
		margin-right: 140px;
	}
	#armoury-colorDiv .s,
	#armoury-colorDiv::before,
	#instant-colorDiv .s,
	#instant-colorDiv::before{
		margin-left: 140px;
	}
	#armoury-colorDiv::after,
	#instant-colorDiv::after{
		margin-right: -140px;
	}
}
@media screen and (max-width:620px) {
	#hd h2{font-size: 28px; }
	#hd .hd-btn{font-size: 14px;}




	#hd #built img{
		width: 40%;
		bottom: 19%;
		right: 30%;
	}
	/*------------ switches -------*/
	#hd #switch_img{
		text-align: center;
	}
	#hd #switch_img li{
		display: inline-block;
		vertical-align: top;
		width: 30%;
		margin-left: -7px;
		margin: 30px 0 20px;
		padding: 10px 0;
		text-align: center;
		position: relative;
	}
	#hd #switch_img li:nth-child(n+4){
		margin-top: 0;
	}
	#hd #switch_img li:nth-child(-n+3){
		margin-bottom: 0;
	}
	#hd #switches .bg{
		height: 410px;
		margin-top: -90px;
	}
	/*------------ LIGHTING -------*/
	#hd #lighting .hd-controls{margin-bottom: 0; }
	#hd #lighting .hd-controls li{
		width: 20%;
		margin-bottom: 20px;
	}
	/*------------ feature -------*/
	#hd #feature li{
		width: 100%;
		margin:10px 0;
	}
	#hd #feature li h3{
		font-size: 20px;
	}
	#hd #feature li:nth-child(2) h3,
	#hd #feature li:nth-child(3) h3,
	#hd #feature li:nth-child(5) h3{
		/* font-size: 20px; */
		margin-right: 0;
	}
	#hd #feature li:after{height: 4px;}
	#hd #feature li:last-child:after{display: none;}
	#hd #feature p{
		min-height: 0;
		padding-bottom: 5px;
	}
	/*------------ colorDiv -------*/
	#built-colorDiv .s,
	#built-colorDiv::before,
	#switches-colorDiv .s,
	#switches-colorDiv::before,
	#play-colorDiv .s,
	#play-colorDiv::before,
	#magnetic-colorDiv .s,
	#magnetic-colorDiv::before{
		margin-left: -160px;
	}
	#built-colorDiv::after,
	#switches-colorDiv::after,
	#play-colorDiv::after,
	#magnetic-colorDiv::after{
		margin-right: 160px;
	}
	#armoury-colorDiv .s,
	#armoury-colorDiv::before,
	#instant-colorDiv .s,
	#instant-colorDiv::before{
		margin-left: 160px;
	}
	#armoury-colorDiv::after,
	#instant-colorDiv::after{
		margin-right: -160px;
	}
}
@media screen and (max-width:480px) {
	#hd h2{font-size: 26px; }


	#hd #built .ppic img{
		width: 45%;
	}
	/*------------ switches -------*/
	#hd #switch_img li{padding:30px 0 10px;}
	#hd #switch_img li p{
		font-size: 12px;
		margin-top: 5px;
	}
	#hd #switch_img li:nth-child(n+4){
		margin-top: -20px;
	}
	#hd #switch_img li:nth-child(-n+3){
		margin-top: 0;
	}
	#hd #switches .bg{
		height: 330px;
		margin-top: -50px;
	}
	/*------------ play ----------*/
	#hd #play .high{
		width: 100%;
		margin-right: 0;
		margin-left: 0;
	}
	#hd #play .contol{
		width: 100%;
		text-align: center;
	}
	/*------------ LIGHTING -------*/
	#hd #lighting{padding-top: 30px;}
}
@media screen and (max-width:375px){
	#hd #built .ppic img{
		width: 52%;
	}
	#hd #cherry .cherry_video{
		min-width: 280px;
	}
}