body {font-size: 11px;
			     background-image: url("../macroimg/debut_light.png");}
				 
				.box { width: 1100px; 
						margin: 30px auto 20px auto;
						border-top-right-radius: 10px; 
						border-top-left-radius: 10px;
						}	
				.nimage {
						height: 32px; 
						width: 1100px;
						margin-bottom: -60px;
						margin-left: -1px;
						-moz-box-shadow: 0 0 7px #777777;
 						-webkit-box-shadow: 0 0 7px #777777;
 						box-shadow: 0 0 7px #777777;
 						border:none;
 						transition: none;
 						margin-top: 585px;
 					} 
 				.nimage:hover {opacity: 1;}
				.para {	font-size: 19px; 
						text-align: justify;
					   	width: 50%;} 
				.mirror {margin-bottom: -39px;}
 
.news{ padding-left: 22px; 
	   margin-top: -23px;
	   color: #6b6b6b;}  
.headline {	display: inline-block; 
			color: #6b6b6b; 
			margin-left: 345px;
			font-size: 17px; 
			margin-top: 33px;}

.button {display: inline-block; 
		 position: absolute;
		 margin-left: 960px;
		 margin-top: -42px;
		 padding-right: 40px; 
		 padding-left: 40px; 
		 padding-top: 5px;
		 padding-bottom: 5px;
		  height: 28px;
		 
	}
.footer {height: 200px; 
		width: 1100px; 
		background-color: #d3d3d3;
		background: #e5e5e5; /* For browsers that do not support gradients */
    	background: -webkit-linear-gradient(#fafafc, #d3d3d3); /* For Safari 5.1 to 6.0 */
    	background: -o-linear-gradient(#fafafc, #d3d3d3); /* For Opera 11.1 to 12.0 */
    	background: -moz-linear-gradient(#fafafc, #d3d3d3); /* For Firefox 3.6 to 15 */
    	background: linear-gradient(#fafafc, #d3d3d3); /* Standard syntax */
		margin-top: 15px;
		-moz-box-shadow: 0 0 3px #777777;
 		-webkit-box-shadow: 0 0 3px #777777;
 		box-shadow: 0 0 3px #777777;
 		} 

.foot2 {display:block;
		float:left;
		margin-top: 15px;
		font-size: 15px;
		margin-right: 60px;
		color: #000000;} 
.foot1 {display:block;
		margin-left: 25px;
		margin-right: 60px; 
		float:left;
		margin-top: 15px;
	
		color: #000000;}  
.foot3 {float: left;
		margin-top: 15px;
		color: #000000;} 
.links {
		display: inline-block;
		padding: 4px;
		font-size: 12px;
		color: #000000;}
.workimg {display:block;
		  
		  margin: -275px 0 0 595px;
		  border-top-right-radius: 5px;
		  border-top-left-radius: 5px;
		  border-bottom-left-radius: 5px;
		  border-bottom-right-radius: 5px;}

			
#header2 {font-size: 18px;}

#e-gun {margin-left:389px;
		margin-top: -250px;
	-webkit-animation: NAME-YOUR-ANIMATION 3s;
    -moz-animation: NAME-YOUR-ANIMATION 3s;
    -o-animation: NAME-YOUR-ANIMATION 3s;
    animation: NAME-YOUR-ANIMATION 3s;
    opacity: 1;

		}

#hardware1{margin-left: 30px;
		   margin-top: 20px;
		   
  
    	
    --webkit-animation: NAME-YOUR-ANIMATION 3s;
    -moz-animation: NAME-YOUR-ANIMATION 3s;
    -o-animation: NAME-YOUR-ANIMATION 3s;
    animation: NAME-YOUR-ANIMATION 3s;
    opacity: 1;}
@keyframes NAME-YOUR-ANIMATION {
    0% {
        opacity: 0;
    }
    49% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    99% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes NAME-YOUR-ANIMATION {
    0% {
        opacity: 0;
    }
    49% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    99% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}
@-moz-keyframes NAME-YOUR-ANIMATION {
    0% {
        opacity: 0;
    }
    49% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    99% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}
@-o-keyframes NAME-YOUR-ANIMATION {
    0% {
        opacity: 0;
    }
    49% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    99% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}
@keyframes NAME-YOUR-ANIMATION {
    0% {
        opacity: 0;
    }
    49% {
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    99% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}
#hardware3{margin-left: 743px;
		   margin-top: -250px;
		   -webkit-animation: NAME-YOUR-ANIMATION 3s;
    -moz-animation: NAME-YOUR-ANIMATION 3s;
    -o-animation: NAME-YOUR-ANIMATION 3s;
    animation: NAME-YOUR-ANIMATION 3s;
    opacity: 1;}
#hardware4 {margin-left: 30px;
   --webkit-animation: NAME-YOUR-ANIMATION 3s;
    -moz-animation: NAME-YOUR-ANIMATION 3s;
    -o-animation: NAME-YOUR-ANIMATION 3s;
    animation: NAME-YOUR-ANIMATION 3s;
    opacity: 1;
			}
#hardware5 {margin-left: 389px;
			 margin-top: -250px;
			   
      -webkit-animation: NAME-YOUR-ANIMATION 3s;
    -moz-animation: NAME-YOUR-ANIMATION 3s;
    -o-animation: NAME-YOUR-ANIMATION 3s;
    animation: NAME-YOUR-ANIMATION 3s;
    opacity: 1;}
#hardware6 {margin-left: 743px;
			margin-top: -250px;
	-webkit-animation: NAME-YOUR-ANIMATION 3s;
    -moz-animation: NAME-YOUR-ANIMATION 3s;
    -o-animation: NAME-YOUR-ANIMATION 3s;
    animation: NAME-YOUR-ANIMATION 3s;
    opacity: 1;}
#title1{font-size: 30px;
		padding-left: 35px;
		color: #575757;
		font-weight: 100;
		font-family: 'Open Sans', sans-serif;}
#title2 {font-size: 18px;
		 margin-bottom: 33px;
		 color: #575757;
		 margin-top: -2px;
		 
		 padding-left:35px;
		 padding-right: 550px;
		 text-align: justify;
		 font-weight:100;
		 list-style: none;}
.hardtitle {font-size: 12px;
			 
			}
#border {
		width: 1066px;
		height: 543px;
		 padding-right: 30px; 
		 padding-top: 10px; 
		 padding-bottom: 30px; 
		 border: 2px solid #f0f0f0;
		 margin-top: -15px;
		 background-color: #fafafc;
		 margin-bottom: -570px;
		-moz-box-shadow: 0 0 6px #777777;
 		 -webkit-box-shadow: 0 0 6px #777777;
 		box-shadow: 0 0 6px #777777;
}
.content{margin: 0 auto;
		 height: 360px; 
		 width: 1100px;
		 padding-top: 10px;
		 padding-bottom: 4px;
		 margin-top: 20px;
		 -moz-box-shadow: 0 0 6px #777777;
 		 -webkit-box-shadow: 0 0 6px #777777;
 		 box-shadow: 0 0 6px #777777;
 		 background-color: #fafafc;}
.lis{margin-top: 8px;}
img{-webkit-transition: all 1.3s ease;
     -moz-transition: all 1.3s ease;
       -o-transition: all 1.3s ease;
      -ms-transition: all 1.3s ease;
          transition: all 1.3s ease;
    -moz-box-shadow: 0 0 4px #777777;
 	-webkit-box-shadow: 0 0 4px #777777;
 	box-shadow: 0 0 4px #777777;
 	border: 4px solid #d3d3dc;

          }
img:hover{
		  -moz-box-shadow: 0 0 7px #777777;
 	-webkit-box-shadow: 0 0 7px #777777;
 	box-shadow: 0 0 7px #777777;
 	opacity: 0.6;
		
          cursor: pointer;}
.draw{position: absolute;
	  margin-left: 655px;
	  margin-top: 75px;
	  -moz-box-shadow: 0 0 6px #777777;
 	-webkit-box-shadow: 0 0 6px #777777;
 	box-shadow: 0 0 6px #777777;
 	border:2px solid #d3d3d3;
 	-webkit-animation: NAME-YOUR-ANIMATION 3s;
    -moz-animation: NAME-YOUR-ANIMATION 3s;
    -o-animation: NAME-YOUR-ANIMATION 3s;
    animation: NAME-YOUR-ANIMATION 3s;
    opacity: 1;

}
.draw:hover{border-radius: 0;
			}
			
	
			
			.modal {display: none;
					position: fixed; 
					z-index: 2; 
					padding-top: 100px;
					left: 0;
					top: 0; 
					width: 100%;
					height: 100%;
					overflow: auto;
							background: #e5e5e5; /* For browsers that do not support gradients */
    	background: -webkit-linear-gradient(#ffffff, #d3d3d3); /* For Safari 5.1 to 6.0 */
    	background: -o-linear-gradient(#ffffff, #d3d3d3); /* For Opera 11.1 to 12.0 */
    	background: -moz-linear-gradient(#ffffff, #d3d3d3); /* For Firefox 3.6 to 15 */
    	background: linear-gradient(#ffffff, #d3d3d3); /* Standard syntax */
}
			
					.modal-content {margin: auto; 
									display: block; 
									width: 380px;; 
									max-width: 700px;
									
									margin-top: 50px;}
					.modal-content:hover {border-radius: 0;
										  opacity: 1;
									}
					#caption {margin: auto; 
							  display: block;
							  width: 420px; 
							  margin-top: 20px;
							  max-width: 700px;
							  text-align: justify;
							  color: #626870;
							  padding: 10px 0; 
							  height: 150px;
							  font-size: 19px;}
					.modal-content, #caption {-webkit-animation-name:zoom;
											  -webkit-animation-duration: 0.6s; 
											  animation-name: zoom;
											  animation-duration: 0.6s;}
					@-webkit-keyframes zoom {from {-webkit-transform:scale(0)} to {-webkit-transform: scale(1)}}
					@keyframes zoom {from {transform: scale(0)} to {transform: scale(1)}}
					.close {position: absolute; 
							top: 15px; 
							right: 35px;
							color: #626870;
							font-size: 30px;
							font-weight: bold;
							transition: 0.3s;
							cursor: pointer;
							}
					.close:hover {}, .close:focus {color: #bbb; 
													text-decoration: none; 
													cursor: pointer;}
					@media only screen and (max-width: 700px)
					{.modal-content {width: 100%;}}
.head {text-align: center;
		margin-top: -40px;
		font-size: 40px;
		font-family: 'Open Sans', sans-serif;} 
	
#closeimg {border-radius: 60%;
			border: none;
			background-color: #fafafc;
			}
figcaption{		   -webkit-animation: fadein 8s; /* Safari, Chrome and Opera > 12.1 */
       		-moz-animation: fadein 8s; /* Firefox < 16 */
        	-ms-animation: fadein 8s; /* Internet Explorer */
        	 -o-animation: fadein 8s; /* Opera < 12.1 */
            animation: fadein 8s;}