@charset "utf-8";
/* CSS Document */
body{
 margin: 0;
 padding: 0;
 font-family: Arial, Helvetica, sans-serif;
 overflow-x: hidden;
}

a{
	text-decoration:none; color: #06F;	}

#container{
		background-color:#fff;
		/*center the whole page in the middle with 800pixel wide, then to center it set the margin right & left of the containe to auto*/
		width:100%; /*originally was set to 830px;*/
	}
#header{display: flex;
	align-items: center;
	justify-content: space-between;
	height:70px;
	width: 100%;
	background-color:#FFF;
	color:#000;
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
	border-bottom: 2px solid #000;
	padding-left: 0;
	margin-bottom: 5px;
	}
.header-text-wrapper{
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
}
.header-text-wrapper img{
    margin-left: 20px;
}

/*.headText{font-family: myFont;
  font-size: 30px;
  text-shadow: 4px 4px 4px #aaa;
  letter-spacing: 1px;
  margin-left: 5px;
}*/
.regNo{
	margin-left: 900px;
	color: #191970;
}
/*We want the content to have 10pixels of padding*/

#menu ul {width: 50%;
		margin-top: 0;
		margin-left: auto;
		margin-right: auto;
		padding-right: 10px;
		list-style-type: none;
		padding-left: 0;
		display: flex;
		/* flex-direction: row-reverse; */
		float: right;
		margin-bottom: 0;
	}
	#menu ul li {flex: 1; height: 25px;
	transition: all 0.7s ease-out;
	margin-bottom:5px;
}

#menu ul ul{display: none;
	}
#menu li:hover ul{
	display: block;
	position: absolute;
	z-index: 3;
	margin-left: -15px;
	margin-top: -7px;
	width: 10%;
	transition: 0.7s;
	border: 1px solid black;
	border-radius: 10px;
}
#menu li ul li{
    margin-left: 10px;
    margin-top: 5px;
}

#menu .w3{display: none;}

#menu ul li a {
color:#FFF;
/*padding: 10px;*/
text-decoration: none;
background-color:#000;
display:block;
transition: all 0.7s ease-out;
text-align:center;
padding-bottom: 10px;
font-weight: 100px;
font-size: 14px;
/*letter-spacing: -1px;*/
-webkit-border-bottom-right-radius:3em;
-webkit-border-top-left-radius:3em;
-moz-border-bottom-right-radius:3em;
-moz-border-top-left-radius:3em;
-o-border-bottom-right-radius:3em;
-o-border-top-left-radius:3em;
-ms-border-bottom-right-radius:3em;
-ms-border-top-left-radius:3em;
border-bottom-right-radius:3em;
border-top-left-radius:3em;
height: 1.0em;
box-shadow: 5px 5px 5px grey;
margin-bottom: 3px;
}
#menu ul li:hover{
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 4px solid #4b545f;
}

#menu ul li a:hover {
color:#F00;
text-decoration: underline;
transform: rotate(2deg);
}
#menu .fas{display: none;}
#open .fas{display: none;}
.whtwedo{ font-family:"Comic Sans MS", cursive;
	}
.whtwedo1{margin-top: 100px;}

/* #content{
	position:absolute;
	width:800px;
	margin-right:5px;
	margin-left:5px;;
	padding:2px;
	text-shadow: 0px 0px;
} */

/*---For index.html alone begin here----*/

.cont2{ 
	width:500px;

	margin-left:auto; height: auto;
	margin-right: auto;
	margin-bottom: 10px;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
}
/*---For index.html alone end here----*/
		
/*About page begins*/
#abtcontent .aboutSpn{
	display: block;
	width: 600px;
	margin-left:   auto;
	margin-right: auto;
	margin-bottom: 10px;
}
/*About page end here*/

	/*---------cctv-------------- */
#ctvContent{display: block;
 			margin-right: 15px;
			margin-left: 5px;
			padding: 15px;
			/*margin-right: 5px;*/
}
#ct0{width: 260px; margin-left: auto; margin-right:auto;}

.txtc1{width: 600px; margin-left:auto;margin-right: auto;}

.lngD, .outD {width: 600px; display: flex; margin-left: auto;margin-right: auto;}
.forOutdoorPTZ{width:250px;
	height:200px;
}

.txtOutDoor{ font-family:"Times New Roman", Times, serif; font-size:12px;
margin-top: 8px; padding-left: 5px; text-align:justify;
}

.forPOEIPTZLongD{width:250px; height:200px; }

.txtPOE{ width: 600px;font-family:"Times New Roman", Times, serif;text-align:justify;} 

#hidden{display: flex; width:600px; margin-left:auto; margin-right:auto; margin-bottom: 10px;}
.forSpy{width:250px; height:200px;/* margin-left:auto;*/ flex:1;}
.txtSpy{font-family:"Times New Roman", Times, serif; font-size:12px; width: 600px;}

.cslide{display: block;
		  margin-left: auto;
		  margin-right: auto;
		  margin-top: 70px;
}

.last{margin-left: 20px;}
/*cctv end here*/

#footer{
		clear:both;
		height: 250px;
		padding:20px;
		background-color:#000;
		font-family: 'Fjalla one', sans-serif;
		font-size:12px; font-weight:bold;
		color:#FFF;
		box-shadow: 5px 5px 10px #3c2f00;
		margin-bottom: 0;
		z-index:0;

		}
#footer a{color:#FFFFFF;}
.ftrContact{float: right;
/*height:100px;*/
	margin-right:12px;
	padding:15px;}

.ftrContact ul{list-style:none;}
.ftrContact .ph{background:#FFF;}
.ftrContact .map{background-color:#FFFFFF;}

.ftrSmedia{ width:200px;}
.ftrSmedia ul{ list-style-type:none;}
.ftrSmedia li{display:block;}
.ftrSmedia a{color:#FFFFFF;}
.ftrSmedia span{color:#FFFFFF;
 margin-left:5px;
 /*I use this to differentiate it from the other span elsewhere*/
}
#footer .cpright{ height:100px; margin-top:40px; /*margin-left:24px;*/ font-family:"Comic Sans MS", cursive; font-style:italic; font-weight:lighter;}
.cpright a{color:#FFF; }
.oruko{font-family: myFont;
font-size:16px;}
hr{background-color:#FFFFFF;}

#footer .center{width: 300px; color: #e0ac1c;
float: right; margin-top: 7px;
 padding-right:12px;
}

#footer .footer-links{color: #e0ac1c;}
#footer .footer-links a{color: #e0ac1c;}
#footer .cpright{color: #e0ac1c;}
		 .selected{
			font-weight:bold;
			/*to be specific in case we have another selected class in another place on the page, we can say "#nav .selected" this rule will
			only be applied to .selected inside nav div*/
			}
	/*Tis column applies to contact page alone alone*/

				/*---form css declarations----*/
				/* form{align:center;}	 */
				.textArea{
					width:400px; height:200px;
					background:#FCC;
					box-shadow: 5px 5px 10px #3c2f00;
					resize: none;

				}
				legend{color:#FF0033;
				}

/*top bar declarations begins here---*/
.topBar{height:40px; width: 100%;
		background-color:#000000;
 		color:#FFF;
	}
.phone{display: inline-block;
		float: left;
		padding-left:4px;
 		line-height:40px;
		}
.phone a:hover{color: #fd6802; }
.phone a{color: #ffffff; font-size: 16px;}
.phone a i{padding: 0px 5px;}
.ph{margin-top:3px;
/*phone icon originally facing backward, I applied "transform" to force it to face the phone number it is pointin at*/
/*and this affects all pages*/
	transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	-ms-transform: rotate(180deg)
}/*phone icon*/

/*social media*/
.social li{display:inline-block;
		float:right; line-height: 48px;
		margin-left:6px;
		margin-right:8px;
		margin-top:4px;}

.facebook a:hover{color: #fd6802;}
.twitter a:hover{color: #fd6802;}
.google a:hover{color: #fd6802;}
.facebook{margin-top:4px;}
.twitter{margin-top:4px;}
.google{margin-top:4px;}
.whatsapp{margin-top:4px;}
/*---end of top bar*/

/*---Exclusively for Solar.html begins--------*/
#solarContent{
	display: block; width: 600px;
	 height: auto; margin-right: auto;
	 margin-left: auto; margin-bottom: 5px;
	}
#solarContent ul li{
    margin-bottom: 15px;
}
.strt1{ width:350px; height:300px;float:right;
margin-left: 30px;
	z-index:0;
}

.im1{ margin-left:150px;
	margin-left: 0;
}

.soslide{display: block;
	 margin-left: auto;
	margin-right: auto;
	margin-top: 70px;
}
/*---Solar.html end here--------------------------*/
/*-----------fence begins----------------------*/
#fnzcontent{display: block; width: 800px;
margin-left: auto; margin-right: auto;
}
.fenceHead{margin-right:10px;
	margin-left: 10px;
	margin-bottom: 20px;
	padding: 20px;
	font-size: 25px;
}
.fenceP1{display:block;
    width: 650px;
	padding: 20px;
	margin-right:10px;
	margin-left: 10px;
	margin-top: -50px;
	text-align: justify;
}
.fenceP1 ul li, ol li{
    margin-bottom: 15px;
}
.fenZ{
	margin-top: 10px;
	margin-bottom: 20px;
}

.fnc{display: block; margin-left:auto;
	margin-right:auto;
	margin-top: 70px;
}

/*-----------fence ends------------------------*/
/*----------Contact page----------------------*/
#frmcontent {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	width: 1000px;
	margin: auto auto 20px;
	padding: 10px;
	border: 1px solid aliceblue;
	}

#offices {
	margin-left: 10px;
}

.oshodi {
	float: left;
	padding-right: 20px;
}

.ikeja {
	padding-left: 20px;
	float: right;
	margin-right: 20px;
	margin-bottom: 20px;
}

.main-form {
	/*background:#FFFFCC; outline: dotted;*/
	/* margin: 20px; */
	 min-width:600px; 
	max-width:700px;
	height: auto;outline: none;
	border:none;
	outline: none;
	box-shadow: none;
	}
	.main-form{
		position: relative;
	}
.main-form .textArea {
	width: 300px;
	height: 150px;
	margin-left: 100px;
	margin-right: auto;
	margin-top: -10px;
	background: aliceblue;
	border:none;
	box-shadow: none;
	resize: none;
	outline: none;
	font-family: myFont;
	font-size: 13px;
}
.main-form input{
	margin-top: 5px;
	width:250px;
	height: 30px;
	background-color: aliceblue;
	border:none;
	outline: none;
	font-family: myFont;
	font-size: 13px;

}
.main-form input.long-text{
	/* width: 250px; */
	margin-left: 130px; 
}
/* .main-form #email{
	
} */
/* #main-form #phone{

} */
/* #main-form #name{

} */
/* legend {
	color: #FF0033;
} */
/* .fieldset{outline-style: ridge !important;} */
/*.textArea {
	background: #EBE9EA;
	
}
*/
.frmTop{
     width: 400px; font-size: 18px; 
     margin-top: 70px; 
     margin-right: auto; 
     margin-left: auto; 
     text-align: center;
}
.frmBottom {
	margin-left: 10px;
}

.mq {
	display: block;
	width: 70%;
	margin-left: auto;
	margin-right: auto;
	animation-delay: 3s;
}

.main-form #btnSmt {
	width: 80px;
	margin-top: 5px;
	margin-left:210px;margin-right: auto;
	text-transform: uppercase;
	font-size: 12px;
	border:none;
	border-radius: 1em;
	
}

#status {
	width: 60%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	border-radius: 8px;
	margin-bottom: 10px;
}

#status.success {
	background-color: rgb(211, 250, 153);
	animation: status 4s ease fowards;
}

#status.error {
	background-color: rgb(250, 120, 92);
	color: white;
	animation: status 4s ease fowards;
}

.hney {
	display: none;
	visibility: hidden;
}
.location {
	min-width: 300px;
	height: 300px;
	background-color: aliceblue;
	margin: 30px 30px auto auto;
}
.location-hd{
	margin:10px auto 0px 115px;
	
}
#map-9cd199b9cc5410cd3b1ad21cab2e54d3 {
	/* margin-left: auto;
margin-right:auto; */
	max-height: auto;
/*width: 150px; */
}

#wrapper-9cd199b9cc5410cd3b1ad21cab2e54d3 {
	margin-top: 10px;
	margin-left: auto;
	margin-right: auto;
	/* border: 1px solid red; */
	/* max-height: 150px;
	width: 150px; */
}
/*--------------Pop-up form---desktop----------------*/

.open-button {
  background-color:#08088A;
  color: white;
  padding: 8px auto;
  border: none;
  cursor: pointer;
  opacity: 0.8;
  position: fixed;
  bottom: 23px;
  right: 28px;
  width: 80px;
  /* border-radius: 40%; */
  border-top-right-radius: 5px;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 15px;
}
.form-popup{
   display: none;
  position: fixed;
  bottom: 10px;
  right: 15px;
  background-color: #000;
  border: 3px solid #f1f1f1;
  z-index: 9;
}

.side-form{
  max-width: 300px;
  padding: 10px;
  height: 480px;
  background-color: white;
  font-size: 13px;
}

.side-form h1{font-size: 18px;
}

.side-form textarea{
	resize: none;
}
.side-form input[type=text], .side-form textArea, .side-form input[type=list], .side-form input[type=email]{
  width: 90%;
  padding: 10px;
  margin: 5px 0 10px 0; 
  border: none;
  background: aliceblue; 
  font-family: myFont; font-size: 13px;
}
.side-form list{
	background-color: aliceblue;
	outline: none;
	font-family: myFont; font-size: 13px; 
}
.side-form .d-list{
    background-color:aliceblue;
    width: 95%;
    height: 30px;
    border:none;
    outline: none;
}
.side-form #subject.datalist{
    background-color:aliceblue;
}
/* When the inputs get focus, do something */
.side-form input[type=text]:focus,  .side-form textArea:focus, .side-form input:focus[type=list], .side-form input[type=email]:focus{
  background-color: #ddd;
  outline: none;
}

/* Set a style for the submit/login button for side form */
.side-form #btnSmt {
	float: none;
  background-color: #234237; 
  color: white;
  /* padding: 16px 20px;*/
  font-family: myFont; font-size: 13px;
  cursor: pointer; 
  width: 30%;
  text-transform: none;
  margin-top: 5px;
  margin-bottom: 10px;
  margin-left: 30px;
  border-radius: 0;
  opacity: 0.8;
}

/* Add a red background color to the cancel button */
.side-form .cancel {
	background-color: #234237;
  font-family: myFont; font-size: 13px;
  width: 30%;
  cursor: pointer; 
  margin-top: 5px;
  margin-bottom: 10px;
  margin-left: 50px;
  color: white;
  opacity: 0.8;
}

/* Add some hover effects to buttons */
.side-form .btn:hover, #btnSmt:hover, .open-button:hover {
  opacity: 1;
}
.side-form .hney{
	display:none;
	visibility: hidden;
}
#status{width: 100%; margin-left: auto;
	margin-right: auto;
	text-align: center;
	/* border-radius: 8px;
	margin-bottom: 10px; */
background-color: #20EDBD;
font-family: myFont; font-size: 12px;
	}
#status.success{background-color: rgb(211, 250, 153);
	animation: status 4s ease fowards;
	}	
/*----------------POP_UP FORM END-----------------*/

@keyframes status{
  0%{
	  opacity: 1;
	  pointer-events: all;
	}
 90%{
	 opacity: 1;
	 pointer-events: all;
	}
 100%{
	 opacity: 0;
	  pointer-events: none;
	 }
}
.frmBottom{font-family: 'Tangerine', sans-serif; font-size:25px;
}

/*input:required{border: 2px dotted red;}*/
/*end of contact page*/

/*------------------Computer.html-------------------------*/
#compCont{display: block; width:900px; height:auto;
			margin-left:auto; margin-right:auto;
			margin-bottom: 10px;
			/*text-align:justify;*/}
#compCont h1{
    font-size: 25px;
}
#compCont h2{
    font-size: 20px;
}
#compCont ul li{
    margin-bottom: 15px;
}
.cmp{width:400px;
		height:400px;
		margin-left: 5px;}

.anote{
      color: #F69;/*black/* it was formally set to this before I changed it*/;
      font-size: 12px;
      padding: 8px;
      position: relative;
           /* top: 10px;*/
      width: auto;
      text-align:justify;
        }


.cptHead{margin: 10px;}

.cmslide{display: block;
		  margin-left: auto;
		  margin-right: auto;
		  margin-top: 70px;
	}
	/*----computer ends---------------*/
.readMore{ color:#06F;
			border:0px; text-decoration:none;} /*index page*/
/*Our Store*/
.store-text{
	display: block;
	width: 700px;
	margin-right:auto;
	margin-left: auto;
}
#strcontent{display: block;
 			margin-right: 5px;
			margin-left: 5px;
			padding-top: 15px; }

.tdImg{padding: 5px; position: relative;
	}
.tdText{width: 120px;
	 padding: 5px;
	font-family: myFont3, Arial, Helvetica, sans-serif;
	font-size:12px;
	/*text-wrap: supress;*/}
	
	.stRHd{margin-top: 50px;margin-left: 20px;
	font-size: 25px;
	}/*This applies to so many headings in so many pages*/
.tbHr{display:none;}

	/*Store End*/

	 .mvebk{
		margin-left: 28px;
	}
	.tut{
	    width: 400px;
	    height: 400px;
	    margin-right: auto;
	    margin-left: auto;
	    padding: 10px;
	    background-color: aliceblue;
	}
@media screen and (max-width:900px){
    body{
        width: 100%;
        font-size: 25px;
    }
	.topBar{height: 80px; /*from 175*/
		width: 100%;
	   display: block;
	  /* position: relative;*/
		font-size: 13px;
	}
	.topBar .phone{
	margin-left: 75px;margin-right: auto;
	margin-top: 10px;margin-bottom: -10px;
	}
	.phone a{font-size:13px;}
	
    .topBar .social{
		margin-left: 60px;margin-right: auto;
	padding-top: 8px;
	}
	.topBar .social ul{
  		 display: inline-block;
		 margin-left: 0;
		 margin-top:0;
		margin-left: 10px;
	}
	.topBar .social ul li{margin-left: 0px;
	}
	.topBar .social ul li img{
		max-width: 18px; height: 18px;
	}


	#header{display: block;
		width: 100%;
		height: 70px;
		/* padding: 10px; */
		text-align: center;
	}

	.headText{/*display: block; */
			width: 100%; 
		margin-top: 20px;
		margin-right:auto;
		margin-left: 3px;
		font-size: 15.5px;
		letter-spacing: 1.0px; 
  		text-shadow: 4px 4px 4px #aaa;
	}
	#header .header-text-wrapper{
	/* display: block; */
	width: 80vw;
	}
	#header .header-text-wrapper img{
	    margin-left:15px;
	}
	#header .regNo{
	display: inline-block; 
	width: 100px;
	font-size: x-small;
	margin-top: 20px;
	margin-left: 10px;
	font-weight: bold;
	text-align: center;
	margin-right: -50px;
	}

	#content{display: block; width: 100%;
	padding-left: 5px; padding-right: 10px;
	}
	#content img{display: block; width: 80%;
	}

	.cont1{display: block; width:100%;}
	.cont1 img{display: block;
		width: 250px; height: 200px;
		margin-left: 130px;}
	.cont2{display: block; width: 90%;
		box-shadow: 0px 0px 0px;
		border: 0;/*1px solid #903*/
	}
	.cont2 h3, .pContent{
	font-size: 15px;
 	margin-left: 10px;
 	font-weight: 2500;
 	text-align: justify; 
	}
.cont2 marquee{
    font-weight: 700;
}
	#compCont, #solarContent, #abtcontent{display: block; width: 95%;
	}
	#compHolder{
            display: none;
	}
	#compHolder .cmp{display:none;
	}


	#footer{display: block;
	height: 470px;
	width:90%;
	margin-bottom: 0px; 

	}
	.ftrContact{width: 100%;margin-left:auto; margin-right:auto;
	    font-size: 12px;
	}
	
	#footer .ftrCOntact ul{display:block;
	    margin-right: auto; margin-left: 80px;
	}

	#footer .ftrCOntact ul li{display: block;
	            margin-left: 100px;
		}

	#footer .ftrSmedia ul{display:block;margin-left: 65px; margin-right: auto;
	    	width: 100%;
	}
	#footer .center{display: block;
		padding-left:10px; width: 95%;
	}

/*.ftrSmedia{margin-left: 20px; margin-right: auto;
    border: 1px solid red;height: 20px;
}*/
	.ftrSmedia ul li{
		display: inline; margin: 5px;}
	/*.f, .t, .w, .g{display: none;}*/

	.ftrSmedia span{display: none;}
	.oruko{
	font-family: myFont, Arial, Helvetica, sans-serif;
	font-size: 10px;
	}
	#footer .cpright{
	font-size: 10px;
	}
	/*-------computer page--------------------*/
	#content .cptspn1, .cptspn2, .cptspn3{
		display: block;
		width: 85%;
		padding-left: 15px;
		padding-right:10px;
		text-align:justify;
	}

	#content .cptspn2{
		display: block;
		width: 85%;
		padding-left: 15px;
		padding-right:10px;
		text-align:justify;
	}

	#content .cptspn1{
		display: block;
		width: 85%;
		padding-left: 15px;
		padding-right:10px;
		text-align:justify;
	}

	.cmpCont{width:280px;
		height:200px;
		margin-left: 60px;
	padding-left: 10px;}

	.cmp{display:block;width: 200px; height: 150px;
	margin-right: 20px; padding: 30px;
	}
	.stRHd{
	margin-top: 10px;
	}
#compCont h1{
    font-size: 14.5px;
    margin-left: 0;
}
#compCont h2{
    font-size: 13px;
    margin-left: 30px;
}

	/*-------computer page end--------------*/

	/*-----------About page---------------*/
	#abtcontent .aboutSpn{display: block;
				width: 89%;
				/* text-align:justify; */
				margin-bottom: 10px;
				padding-left: 10px;
				padding-right:4px;
	}

	/*-----------About page--------------------*/
	/*---contact page form-------*/
	.frmTop {
		display: block;
		width: 100%;
	}
	
.frmTop h1{
   display: block;
   width: 200px;
   margin-left: auto;
   margin-right: auto;
   font-family: myFont;
   font-size: 15px;
}
	#frmcontent {
		display: block;
		max-width: 90%;/*was 80%*/
		margin-left: 10px;
		height:auto;
		margin-right: 10px;
		padding-right: 10px;
		padding-left: 10px;
		
	}

	.main-form{display: block;
		min-width: 55%;
		max-width: 85%; /*100% before*/
		height:auto;
		margin-left:auto;
		margin-right: auto;
		margin-bottom: 10px;
		/* background-color: #20EDBD; */
	}

.main-form input {
		display: block;
		width: 72%; 
		height: 35px;
		margin-left: 35px;
		z-index: -1;
		font-size: 13px;
		font-weight:700;
	}
	.main-form #name{
		margin-bottom: -14px;
	}
	.main-form #email{
		margin-left: 35px;
		margin-top: 2px;
	}
    .main-form #mySubj{
		margin-top:-13px;
	}
	.main-form input.long-text{
	margin-left: 35px; 
}
.main-form .textArea{
	width:72%; 
	height: 100px;
	margin-left:35px;
	margin-right: auto;
	margin-top: -28px;
	font-size: 13px;
	font-weight: 700;
	border:0;
	outline:none;
	box-shadow:none;
}
.main-form #btnSmt{
	margin-left:100px; 
	width: 30%;
}
.location{
	max-width:45%;
	margin-left:10px;
}
#wrapper-9cd199b9cc5410cd3b1ad21cab2e54d3{
	max-width:100%;
	/* height: 130px; */
	margin-right: auto;
	margin-left: auto;
}
#map-9cd199b9cc5410cd3b1ad21cab2e54d3{
	width: 100%;
	/* min-height: 150px;
	max-height: 40%; */
}
	#frM .hney {
		display: none;
		/*#frM is created just to add style to the contact page form alone
		and it is used only on mobile*/
	}

	.hney {
		display: none;
		visibility: hidden;
	}

	/*---contact page form end------*/

	/*---store page ------*/
	#content table, td, td{display: block;
	width: 90%;
	margin-left: 10px; margin-right: 10px;
	}
	.tbHr{display: block;}
	.tdText{
		margin: 20px;
	}
	.tdText1{
		margin-left: 60px;
	}
	.tdText2{
		margin-left: 60px;
		margin-top: -20px; 
	}
	.store-text{
		display: block;
		width: 100%;
		margin: 0 auto;
		font-size: 12px;
		padding-right:5px;padding-left:5px;
	}

	/*---store page end------*/

	/*---solar page ------*/
	#solarContent{display: block;
	width: 90%;
	margin-left: 10px;
	margin-right: 10px;
	padding-left: 4px;
	padding-right: 4px;
	text-align:justify;
	}
	#solarContent h3{
	text-align: center;
	font-size: 20px;
	}
	.im1{display:block;
     margin-left: 5px;
	}

	.strt1{
		width: 200px;
		height: 150px;
		margin-left: 10px;
		margin-top: 40px;
	} 
		#solarContent .pContent h3{
		font-size: 20px;
	}
	/*---solar page end------*/

	/*---cctv------ refer to no 210 for large screen*/
	#ctvContent{display: block;
		width: 85%; margin-right: 5px; padding-left:15px;
        padding-left: 20px;
	}
	#ctvContent h3{
	font-size: 13px;
	margin-left: 10px;
	font-weight: 2500;
	text-align: center; 
	}
	#ct0{display: block; width: 80%; margin-left: 5px; margin-right: 20px;}
	.txtc1{display: block; width: 100%; margin-left: auto; margin-right: auto;}
	.txtc1{display: block; padding-right:20px;}
	.outD{display: block; width: 100%;}

	.lngD{display: block; width: 100%;}
	.forOutdoorPTZ, .forPOEIPTZLongD, .forSpy{display: block;
	margin-left: 60px;
	margin-right: auto;
	}
	.txtOutDoor{display: block; width: 95%;
	}
	.txtPOE{display: block; width: 95%; text-align:justify;
	margin-top: -5px;}

	#hidden{ display: block; width: 100%;}
	.txtSpy{display: block; width: 100%;}
	/*---  cctv end------*/
	/*Electric Fenc*/
	.fenceHead{
	font-size: 13px;
	 margin-left: 10px;
	 font-weight: 2500;
	 text-align: center; 
	}
	/*End Electric Fenc*/

	/*----------------Pop up-------------------------*/
	.side-form label{
		display: none;
	}

.side-form	#btnSmt{float: none; margin-left: 6px;}
.form-popup{
  display: none;
  position: fixed;
  bottom: 10px;/*30*/
  right: 20px;
  /*border: 3px solid #f1f1f1;*/
  z-index: 9;
  background-color: #000; 
 }
.open-button {
  background-color: #555;
  color: rgb(213, 243, 106);
  font-size: 10px;
  padding: 3px;
  /*padding-bottom: 15px;*/
  border: none;
  cursor: pointer;
  opacity: 0.5;
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 17%;
  text-align: center;
	height: 30px;
}
 
.side-form {display: block;
	max-width: /*250px;*/300px;
	height: 100%;
	padding: 10px;
	background: white;
	margin-left: 0;
	border: none;
	}
.side-form h1{font-size: 13px;}

/*Full-width input fields */
/*.side-form input[type=text], .side-form input[type=list], .side-form input[type=email] {
  width: 95%;
  padding: 15px;
  height: 10px;
  margin: 3px 0 10px 0;
  border: none;
  background: aliceblue; 
}*/
/*.side-form input{
    width:100%;
}*/
.side-form .d-list{
    background-color:aliceblue;
    width: 95%;
    height: 30px;
    border:none;
    outline: none;
}
.side-form #name, .side-form #email, .side-form #phone, .side-form #mySubj{
    background-color:aliceblue;
    width: 90%;
    height: 10px;
    border:none;
    outline: none;
}
.side-form #textArea{
    width: 90%;
}
/*.side-form #subject{
    background-color:aliceblue;
     width: 90%;
    height: 30px;
}*/
.side-form #subject.datalist{
    background-color: aliceblue;
}
/*.side-form label{
  font-size: 10px;
  font-style: normal;
}*/
  
/* Set a style for the submit/login button */
.side-form #btnSmt {
	background-color: #234237; 
  padding: 5px 5px;
  width: 32%;
  border-radius: 1em;
}

/* Add a red background color to the cancel button */
.side-form .cancel {
	background-color: #234237; 
	 width: 32%; 
	 margin-left: 20px;
	 padding: 5px 5px;
	border-radius: 1em;
}

/* Add some hover effects to buttons */
.side-form  #btnSmt:hover, .btn:hover, .open-button:hover {
  opacity: 1;
}
.side-form .hney{
	display:none;
	visibility: hidden;
}
#status{width: 60%; margin-left: auto;
		margin-right: auto;
		text-align: center;
		border-radius: 8px;
		margin-bottom: 10px;
    background-color: #20EDBD;
		}
#status.success{background-color: rgb(211, 250, 153);
				animation: status 4s ease fowards;
				}	
	/*-----------------pop up end-----------------*/

 #menu .w3{display: block;
			width: 270px;
			height: 40%;
			top: 10px;
			margin-left: 20px;
			margin-right: 0px;
			padding: 5px;
			/* background:#ffc; */
			font-size: x-small;
			color: #fff;
			border: 2px solid red;
			text-align: center;
			margin-top: 40px;
			 z-index: 1;
	}
	.w3 .advert{ 
		display: block;
	}

	#menu {
	position:fixed;
	display: block;
	top: 0;
	left: 0;
 	background-color: #000;/*#ccc;*/ 
	z-index: 3;
	height: 100%;
	overflow:hidden;
	transition: 0.7s;
	width: 0;
	}

	#open{position:fixed;
		display: block;
		top: 0px;
		left:5px;
	}
	#open .fas{display: block;
	height: 10px;
	width: 10px;
	top: 10px;
	left:0px;
	color:#fff;
	font-size: 30px;
	border-radius: 30%; 
	line-height: 10px;
	}
	#menu .fas{display: block;
	height: 10px;
	width: 10px;
	 color:#fff;
	 font-size: 30px;
	border-radius: 30%; 
	margin-left: 250px; 
	line-height: 10px;
	}

	/*#menu ul li a {background-color: rgba(168,188,206,.9);}*/

	#menu ul {top: -31px;
	padding-right: 10px;
	list-style-type: none;
	padding-left: 0;
	display: block;
	float: none;
	background: #000;/*rgba(168,188,206,.9);*/
	width: 90%;
	height: 100%;
	padding-left: 0px;
	}

	#menu ul li {
	display: block;
	/* background-color: rgba(168,188,206,.0); I am here*/
	height: 40px; width: 130px;/*Set to 150*/
	/* margin-left: 20px; */
 	margin-left: 75px; 
	border-top: 1px solid #fff;
	}
	#menu ul li a{border-radius: 0;
		/* margin: 5px; */
		height: 15px;
		padding: 10px;
		width: 100px;
		background-color: inherit;/*rgba(168,188,206,.9);*/
	box-shadow: none;}

	.fas{display: block; height: 10px;
	 width: 10px;
	/* background:#CCC;
	 opacity: .7;*/
	 color:#FFFFFF;
	 border-radius: 50%;
	 padding: 15px;
	}


	#menu li:hover > ul{display: block; width: 70%;
	position: relative; margin-left: 30px; margin-top: 20px;
	/*padding-bottom: 10; padding-bottom: 0;*/
	}

#menu li ul li{
    background-color:#000;
    border-bottom:0;
    margin-top: 6px;
}
	#menu ul li:hover ul{margin-left: -10px;
	}
	/*fence*/
	#fnzcontent{display:block; width: 100%;}
	.solarEnergizer{display: block;
				width: 200px; height: 150px;
				margin-left: 25px;
				margin-right: 5px;}

	.fenZ{display: block;
				width: 200px; height: 100px;
				margin: 0 auto 35px 30px;
	}
	.fenceP1{
	    width: 90%;
	display:block;
	padding: 5px;
	margin-left: 10px;
	}
	.fenceHead{
		margin-bottom: 30px;
		font-size: 18px;
}
.servingNig{
    margin-top: 40px;
}
	.fnc, .soslide, .cslide, .cmslide{
	 display: block;
	 width: 200px;
	 height: 100px;
	 margin-left: auto;
	 margin-right: auto;
	 margin-top: 25px; 
	/*end of fence*/
	}

	#slider{
	display: block;
	width: 100%; z-index: 0;
	}
	#slider img{
	display: block;
	width: 350px;
	height:100px;
 	}

 
	.whtwedo{
		font-size: 15px;
	}
	#abtcontent, #ctvContent, #compCont, #fnzcontent, #solarContent, #frmcontent, .cont2, .tut{
	font-size: 15px;
	font-family: myFont;
	}
	.whtwedo1, .whtwedo{
	margin-top: 10px;
	}

	.tut{display: block;
		max-width: 95%;
		margin-right: 0; margin-left: 0;
		padding-left:10px;
		margin-top: -50px;
	   /*	margin-bottom: 30px;*/
	}
	/*	.tut1{display: block;
		max-width: 90%;
		margin-right: 10px; margin-left: 10px;
		padding: 0;
		margin-top: -50px;
		margin-bottom: 30px;
	}*/
	.tut img{
		border-radius: 50%;
		outline:none;
		width: 50px;
		height: 50px;
	}
	.tut h3{
		margin-bottom: 50px;
	}
/*	.tut marquee{
		width: 250px;
		margin-bottom: 60px;
		margin-top: -20px;
	}*/
	#success-page{display: block;
		max-width: 90%;
		font-size: 13px;
		
	}
	.backTo{
		margin-bottom: 20px;
		color: #000;
		font-size: 13px;
	}
	
	
}