@charset "utf-8";
/* CSS Document */
@font-face {
  font-family: logofonts;
  src: url(fonts/BOOKOS.TTF);
}
@font-face {
  font-family: slidefonts;
  src: url(fonts/BloodyFrozen.otf);
}

@font-face {
  font-family:Arial, Helvetica, sans-serif;
  /*src: url(fonts/proximanova-reg-webfont.ttf);*/
}
body{
	width:100%;
	margin:0px;
	font-family:Arial, Helvetica, sans-serif;
}
#menu-logo{
	width:100%;
	height:59px;
	background-color:white;
	//background-color:#014874;
}
#logo{
	width:85%;
	height:auto;
	padding-left:15px;
	float:left;
	color:#FFF;
	line-height:56px;
	vertical-align:middle;
	font-family:logofonts;
	font-size:25px;
	font-weight:bold;
	font-style:italic;
}
#logo img {
	margin-top:15px;
}
.bar {
  display: inline-block;
  cursor: pointer;
  background-color:#609816;
  padding:10px;
  float:right;
  position:fixed;
  top:0px;
  right:0px;
  z-index:1000;
}

.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #FFF;
  margin: 6px 0;
  transition: 0.4s;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}
.csidepanel{
	width:300px;
	height:600px;
	background-color:rgba(0,0,0,0.75);
	position:fixed;
	top:-670px;
	right:0px;
	z-index:999;
	transition: 0.5s;
	padding-top:59px;
}
.menubt{
	display:block;
	width:98%;
	margin-top:5px;
	margin-bottom:5px;
	padding-top:3px;
	padding-bottom:3px;
	padding-left:2%;
	color:#FFF;
	text-decoration:none;
	font-family:Arial, Helvetica, sans-serif;
	font-size:18px;
}
#serviceblock{
	display:none;
}
#banner{
	width:100%;
	position:relative;
	overflow:hidden;
}
@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: 0%; }
}
#bannerpict img { width: 25%; float: left; }
#bannerpict{
	position:relative;
	width:400%;
	margin: 0;
  	left: 0;
  	text-align: left;
  	font-size: 0;
  	animation: 40s slidy infinite;
	z-index:95;
}
#bannerpict1{
	position:relative;
	margin:0px;
	top:-505px;
	left:0px;
	z-index:96;
	transition: 0.5s;
}

#txt0{
	display:block;
	position:absolute;
	width:100%;
	height:100%;
	left:0%;
	top:-20%;
	z-index:100;
	font-family:slidefonts;
	font-size:50px;
	text-align:center;
	//transition: 0.5s;
	color:#609816;
	text-shadow: 0 0 5px #000000, 0 0 10px #0000FF;
	animation: 40s txtslidy0 infinite;
}
@keyframes txtslidy0 {
0%{top: -50%;}
3%{top: 70%;}
16% { top: 70%; }
19% { top: -50%; }
}

#txt1{
	display:block;
	position:absolute;
	width:100%;
	height:100%;
	left:0%;
	top:-20%;
	z-index:100;
	font-family:slidefonts;
	font-size:50px;
	text-align:center;
	//transition: 0.5s;
	color:#FFF;
	text-shadow: 0 0 5px #000000, 0 0 10px #0000FF;
	animation: 40s txtslidy1 infinite;
}
@keyframes txtslidy1 {
0%{top: -20%;}
25%{top: -20%;}
28% { top: 70%; }
41% { top: 70%; }
44% { top: -20%; }
}
#txt2{
	display:block;
	position:absolute;
	width:100%;
	height:100%;
	left:0%;
	top:-20%;
	z-index:100;
	font-family:slidefonts;
	font-size:50px;
	text-align:center;
	//transition: 0.5s;
	color:#FFF;
	text-shadow: 0 0 5px #000000, 0 0 10px #0000FF;
	animation: 40s txtslidy2 infinite;
}
@keyframes txtslidy2 {
0%{top: -20%;}
50%{top: -20%;}
53% { top: 70%; }
68% { top: 70%; }
70% { top: -20%; }
}

#txt3{
	display:block;
	position:absolute;
	width:100%;
	height:100%;
	left:0%;
	top:-20%;
	z-index:100;
	font-family:slidefonts;
	font-size:50px;
	text-align:center;
	color:#FFF;
	text-shadow: 0 0 5px #000000, 0 0 10px #0000FF;
	animation: 40s txtslidy3 infinite;
}
@keyframes txtslidy3 {
0%{top: -20%;}
75%{top: -20%;}
78% { top: 70%; }
93% { top: 70%; }
95% { top: -20%; }
}

#fullservice{
	width:100%;
	height:auto;
	overflow:auto;
	background-size:auto 100%;
	background-position:100% 200px;
	background-repeat:no-repeat;
	overflow:hidden;
	animation-name: guard;
  	animation-duration: 2s;
	animation-iteration-count:1;
	animation-fill-mode: forwards;
}

@keyframes guard {
  from {background-position:100% 200px;}
  to {background-position: 100% 0px;}
}

#servicetab{
	display:block;
	width:80%;
	height:auto;
	margin-left:auto;
	margin-right:auto;
	overflow:auto;
}
#servicetab p{
	line-height:normal;
}
.readmore{
	text-decoration:none;
	color:#609816;
	padding:5px;
	border:1px solid #609816;
}
.readmore:hover{
	text-decoration:none;
	color:#FFF;
	background-color:#609816;
	padding:5px;
	border:1px solid #609816;
}
#objective{
	display:inline-block;
	width:250px;
	margin:5px;
	padding:5px;
	
}
.service_menu{
	width:300px;
	height:300px;
	transform:rotate(0deg);
	transition: 0.5s;
	display:inline-block;
}
.smenu{
	width:300px;
	height:300px;
	float:left;
}
.service_text{
	width:500px;
	height:225px;
	margin-top:50px;
	margin-left:-10px;
	background-color:#FF99CC;
	float:left;
	transition: 0.5s;
	overflow:hidden;
}
#servicechapter{
	position:relative;
	transition: 0.5s;
	top:0px;
}
#service_chap{
	height:225px;
	text-align:justify;
}
#textmatter{
	width:90%;
	margin-left:auto;
	margin-right:auto;
}
#catagory{
	clear:both;
	width:100%;
	padding-top:3%;
	padding-bottom:5%;
}
#allbox{
	clear:both;
	width:80%;
	text-align:justify;
	margin-left:auto;
	margin-right:auto;
	display:block;
}
#allbox2{
	clear:both;
	width:80%;
	text-align:justify;
	margin-left:auto;
	margin-right:auto;
	display:block;
}
#col{
	width:25%;
	margin:3%;
	display:inline-block;
	vertical-align:top;
}

#allbox h1,h2,h3,h4,h5,h6{
	margin:0px;

}
#allbox2 h1,h2,h3,h4,h5,h6{
	margin:0px;

}
#ico{
	display:block;
	margin-top:10px;
	margin-bottom:10px;
}
#map{
	width:340px;
	margin:10px;
	float:left;
	text-align:center;
	border:1px solid #9CF;
}
#catagorybox{
	width:200px;
	height:200px;
	margin:10px;
	padding-top:50px;
	border:1px solid #666;
	border-radius:10px;
	text-align:center;
	background-color:#609816;
	color:#FFF;
	font-size:20px;
	transition: 0.5s;
}
#catagorybox:hover{
	box-shadow: 10px 10px 0px 0px #014874;
}
//// Footer /////////////
#gap{
	clear:both;
	height:1px;
	background-color:#999;
}


#catagoryproduct{
	clear:both;
	width:100%;
	padding-top:3%;
	padding-bottom:5%;
}

#allbox{
	width:80%;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	display: grid;
	grid-template-columns: auto auto auto auto;
}
#catagorybox{
	width:200px;
	height:auto;
	margin-left:auto;
	margin-right:auto;
	padding-top:20px;
	border:1px solid #666;
	border-radius:10px;
	text-align:center;
	background-color:#609816;
	color:#000;
	font-size:20px;
	font-weight:bold;
	transition: 0.5s;
	line-height:normal;
}
#catagorybox:hover{
	box-shadow: 10px 10px 0px 0px #014874;
}

#footerback{
	width:100%;
	height:auto;
	background-image:url(images/unnamed.jpg);
	//background-position:bottom left;
	background-repeat:no-repeat;
	background-size:100% 100% ;
	background-color:#27488f;
}
#contactus{
	width:80%;
	height:auto;
	margin-top:35px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:15px;
	padding:20px;
	//background-color:rgba(0,165,135,.65);
	color:#FFF;
	text-align:center;
}

@media only screen and (max-width: 700px) {
#servicetab{
	width:100%;
	height:auto;
	margin-left:auto;
	margin-right:auto;
}
#servicetab p{
	line-height:normal;
	padding:5px;
}

#sparetline{
	width:95%
}

.csidepanel{
	width:95%;
	height:auto;
	background-color:rgba(0,0,0,0.75);
	position:fixed;
	top:-670px;
	right:0px;
	z-index:999;
	transition: 0.5s;
	padding-top:59px;
}

#txt0{
	display:block;
	position:absolute;
	width:100%;
	height:100%;
	left:0%;
	top:-50%;
	z-index:100;
	font-size:15px;
	text-align:center;
	//transition: 0.5s;
	color:#FFF;
	text-shadow: 0 0 5px #000000, 0 0 10px #0000FF;
	animation: 30s txtslidy0 infinite;
}
@keyframes txtslidy0 {
0%{top: -50%;}
3%{top: 70%;}
23% { top: 70%; }
26% { top: -50%; }
}


#txt1{
	display:block;
	position:absolute;
	width:100%;
	height:100%;
	left:0%;
	top:-50%;
	z-index:100;
	font-size:15px;
	text-align:center;
	//transition: 0.5s;
	color:#FFF;
	text-shadow: 0 0 5px #000000, 0 0 10px #0000FF;
	animation: 30s txtslidy1 infinite;
}
@keyframes txtslidy1 {
0%{top: -50%;}
3%{top: 70%;}
23% { top: 70%; }
26% { top: -50%; }
}
#txt2{
	display:block;
	position:absolute;
	width:100%;
	height:100%;
	left:0%;
	top:-50%;
	z-index:100;
	font-size:15px;
	text-align:center;
	//transition: 0.5s;
	color:#FFF;
	text-shadow: 0 0 5px #000000, 0 0 10px #0000FF;
	animation: 30s txtslidy2 infinite;
}
@keyframes txtslidy2 {
0%{top:-50%;}
35%{top:-50%;}
38%{top:70%;}
58% { top: 70%; }
61% { top: -50%; }
}

#txt3{
	display:block;
	position:absolute;
	width:100%;
	height:100%;
	left:0%;
	top:-20%;
	z-index:100;
	font-size:15px;
	text-align:center;
	color:#FFF;
	text-shadow: 0 0 5px #000000, 0 0 10px #0000FF;
	animation: 30s txtslidy3 infinite;
}
@keyframes txtslidy3 {
0%{top:-50%;}
65%{top:-50%;}
68%{top:70%;}
88% { top: 70%; }
91% { top: -50%; }
}

.smenu{
	width:300px;
	height:300px;
	margin-left:auto;
	margin-right:auto;
	float:right;
}

.service_menu{
	width:250px;
	height:250px;
	transition: 0.5s;
	float:none;
	text-align:center;
}

.service_text{
	width:100%;
	height:225px;
	margin-top:-55px;
	margin-left:0px;
	//background-color:#FF99CC;
	float:left;
	transition: 0.5s;
	overflow:hidden;
}

#allbox{
	width:80%;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	display:block;
}
#col{
	width:100%;
	margin:0;
	display:block;
	vertical-align:top;
}
#map{
	width:100%;
	margin:0px;
	float:none;
	text-align:center;
	border:1px solid #9CF;
}

#contactus{
	width:70%;
	height:auto;
	margin-top:0px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:0px;
	padding:20px;
	color:#FFF;
	text-align:center;
}
#contactus h1,h2,h3,h4,h5{
	margin:0px;
}

}

#m2{
	clear:both;
	width:100%;
	height:203px;
	overflow:hidden;
}

#machine{
	width:20050px;
	height:203px;
	position:relative;
	left:0px;
	-webkit-animation: mcslide 30s; /* Chrome, Safari, Opera */
    animation: mcslide 50s;
	animation-timing-function:linear;
	animation-iteration-count:infinite;
	-webkit-animation-timing-function:linear;
	-webkit-animation-iteration-count:infinite;
}
#ctl{
	width:150px;
	height:150px;
	margin:5px;
	text-align:center;
	display:inline-block;
	vertical-align:middle;
	vertical-align:central;
	border:2px solid #609816;
	
}
#machine img{
	height:100%;

}
@-webkit-keyframes mcslide {
    from { left:0px;}
    to { left:-6000px;}
}

/* Standard syntax */
@keyframes mcslide {
    from { left:0px;}
    to { left:-6000px;}
}
#machine:hover {
	animation-play-state:paused;
	-webkit-animation-play-state:paused;
}