@charset "utf-8";
/* CSS Document style sheet for Products inc page*/

input[name=Category]{
	height:30px;
	border-radius:10px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:white;
	font-stretch:expanded;
	transition:all 0.4s;
	
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cc0000+0,4c0008+100 */
background: #cc0000; /* Old browsers */
background: -moz-linear-gradient(top, #cc0000 0%, #4c0008 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #cc0000 0%,#4c0008 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #cc0000 0%,#4c0008 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc0000', endColorstr='#4c0008',GradientType=0 ); /* IE6-9 */	
	
}


#frmProducts{
	position:fixed;
	float:left;
	top:10px;
	left:100px;
	display:inline;
}

#catRes{
	width:94%;
	height:auto;
	background:rgba(255,255,255,0.3);
	padding:10px;
	margin-top:50px;
	padding-left:5%;
	padding-bottom:450px;

	
}
.prodBox{
	width:200px;
	height:300px;
	background:rgba(0,0,0,0.5);
	display:inline-block;
	text-align:center;
	margin-top:10px;
	margin-bottom:3px;
	margin-right:20px;
	/*margin-left:10px;changed to correct spelling, seems to be fine.*/
	padding:10px;
	border-radius:10px;
	
	
}
.ProdImg:after{
	content:"Click Image";
	width: 100px;
	height:10px;
	position:relative;
	top:-160px;
	padding:5px;
	background:rgba(125, 179, 198,0.5);
	border-radius:-10px;

}
.ProdImg{/** image DIV **/
	background:rgba(255,255,255,0.3);
	height:auto;	
}
.imgView{/** image **/
	height:150px;
	width:150px;
	margin:8px;
	border-radius:10px;
}
.ItemCode{
	background:rgba(255,255,255,0.9);
	height:80px;
	
}
.Description{
	background:blue;
	height:250px;
	display:none;
}
.Category{
	padding-top:4px;
	color:white;
}

.dbImgL, .dbImgR{/*Images From Database*/
	display:inline-block;
	
	height:auto;
	margin:30px;
	border:solid 5px white;
	border-radius:20px;
	box-shadow:0 0 20px black;
}
.dbImgL{
	float:left;
	width:35%;
	
}
.dbImgR{
	float:right;
	width:15%;
}

/******** ImgIcon For Mouse Hover start *****/

#iconSlide{
	width:87%;
	height:auto;
	background:rgba(0,0,0,0.1);
	margin-left:-30px;
	column-count:3;
	column-gap: 150px;
	column-rule: 1px dashed gray;
	border:1px gray dashed;
	border-radius:10px;
	
	
}

#imgIconTxt0,#imgIconTxt1,#imgIconTxt2,#imgIconTxt3, #imgIconTxt4,
#imgIconTxt5, #imgIconTxt6, #imgIconTxt7, #imgIconTxt8,#imgIconTxt9{
	width:200px;
	height:100px;
	background:white;
	margin-left:200px;
	transition:all, 2s;
	overflow:hidden;
	margin-top:10px;
	padding:10px;
	border-radius:20px;
	display:none;
}



#imgIcon0, #imgIcon1, #imgIcon2, #imgIcon3, #imgIcon4 , #imgIcon5, #imgIcon6, #imgIcon7, #imgIcon8, #imgIcon9{
	width:150px;
	height:150px;
	overflow:hidden;
	transition:all, 1s;
	background-color:red;
	display:inline-block;
	margin:20px;
	box-shadow:0 0 15px  black;
	background-repeat:no-repeat;
	
	
}

#imgIcon0{
	background-image:url('../images/GaurdMon/thumbs/guard-patrol_t.jpg');
	background-size:160px;
	background-position:0 -10px;

}

#imgIcon1{
	background-image:url('../images/Tracking/thumbs/Tracking_t.jpg');
	background-size:160px;
	background-position:0 -10px;
}

#imgIcon2{
	background-image:url('../images/CCTV/thumbs/CCTV_t.jpg');
	background-size:200px;
	background-position:-20 -10px;
	/*margin-right:30%;*/

}

#imgIcon3{
	background-image:url('../images/Access/thumbs/Access_t.jpg');
	background-size:160px;
	background-position:0 -10px;
	
	
}
#imgIcon4{
	background-image:url('../images/Fire/thumbs/Fire_t.jpg');
	background-size:150px;

	
}

#imgIcon5{
	background-image:url('../images/Electric/thumbs/Electric_t.jpg');
	background-size:160px 150px;

	
	
}
#imgIcon6{
	background-image:url('../images/Mobile/thumbs/Mobile_t.jpg');
	background-size:200px 160px;
}
#imgIcon7{
	background-image:url('../images/Panic/thumbs/Panic_t.jpg');
	background-size:170px  160px;
	background-position:-20 -10px;

}
#imgIcon8{
	background-image:url('../images/Automation/thumbs/Automation_t.jpg');
	background-size:150px  150px;
}
#imgIcon9{
	background-image:url('../images/Intercoms/thumbs/Intercom_t.jpg');
	background-size:150px  150px;
}

#imgIcon0:hover, #imgIcon1:hover, #imgIcon2:hover , #imgIcon3:hover, #imgIcon4:hover,
#imgIcon5:hover,#imgIcon6:hover,#imgIcon7:hover,#imgIcon8:hover,#imgIcon9:hover{/*,#imgIcon1:hover,#imgIcon2:hover */
	width:450px;
	height:150px;
	border-radius: 0 20px 20px 0 ;
	background-color:black;
	
}

#imgIcon0:hover > #imgIconTxt0{
	display:block;
}
#imgIcon1:hover > #imgIconTxt1{
	display:block;
}
#imgIcon2:hover > #imgIconTxt2{
	display:block;
}
#imgIcon3:hover > #imgIconTxt3{
	display:block;
}
#imgIcon4:hover > #imgIconTxt4{
	display:block;
}
#imgIcon5:hover > #imgIconTxt5{
	display:block;
}
#imgIcon6:hover > #imgIconTxt6{
	display:block;
}
#imgIcon7:hover > #imgIconTxt7{
	display:block;
}
#imgIcon8:hover > #imgIconTxt8{
	display:block;
}
#imgIcon9:hover > #imgIconTxt9{
	display:block;
}

/******** ImgIcon For Mouse Hover start *****/
@media only screen and (max-width: 1920px){
	#iconSlide{
		width:90%;
		column-count:3;
		column-gap: 250px;

	}
}

@media only screen and (max-width: 1620px){
	#iconSlide{
		width:90%;
		column-count:3;
		column-gap: 150px;

	}
}


@media only screen and (max-width: 1440px){
	#imgIcon0, #imgIcon1, #imgIcon2{
		display:block;
		margin-top:50px;
	}
	#catRes{
		height:auto;
		width:65.2%;
		padding-left:10%;
		margin-bottom:30px;
		
	}
	#frmProducts{
		left:30%;
		width:90%;
	}
	#iconSlide{
		width:75%;
		height:auto;
		background:rgba(0,0,0,0.1);
		margin-left:-30px;
		column-count:2;
		column-gap: 150px;
		column-rule: 1px dashed gray;
		border:1px gray dashed;
		border-radius:10px;
	}
}

@media only screen and (max-width: 1360px){

	#catRes{
		height:auto;
		width:75.2%;

	}

	#iconSlide{
		width:80%;
		column-count:2;
		column-gap: 150px;

	}
}

@media screen and (max-width:1200px){
	#iconSlide{
		columns:0;
		column-gap: 100%;
		background:rgba(255,0,0,0.1);
		width:30%;
		

	}
	#catRes{
		height:auto;
		
	}
	
}
@media only screen and (max-width: 1100px){

	#frmProducts{
		top:10px;
		left:50px;
		
	}
	input[name=Category]{
		margin:10px;
		min-width:120px;
		min-height:10px;
	}
	#catRes{
		height:auto;
		margin-top:80px;
		padding-bottom:150px;
		
	}
	#iconSlide{
		display:none;

	}
}

@media only screen and (max-width: 850px){
	#catRes{
		margin-top:250px;
		padding-bottom:650px;
		
	}
}
@media only screen and (max-width: 550px){
	#catRes{
		margin-top:250px;
		padding-bottom:250px;
		
	}
}

@media only screen and (max-width: 340px){
	#catRes{
		margin-top:550px;
		padding-bottom:650px;
		
	}
}