body,html{margin:0; padding:0;overflow-x:hidden;background:#fff;font-family:arial;}


.image-container {
  position: relative;
  width: 50%;
}
 img {width:auto;
       height: auto;
}
  

/* --this line of code here is very important; it fits the chosen color, yellow in this case nicely on the frame and set the transition */
 .image-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 500px;
  width: 1200px;
  opacity: 0;
  transition: .8s ease;
  background-color: #ffae00;
}

/*-- this line of code gives the color opacity, yellow in this case when mouse is move over the picture */
.image-container:hover .image-overlay {
  opacity: 0.8; 
}

/*-- this code here sets the text properties and fits it to scale over the pictures */
.image-text {
  color: #fff;
  font-size: 25px; font-family:arial;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* note: this line is CSS 3 fix text to center */
  -ms-transform: translate(-50%, -50%);
}

  
   .gallery:hover {
    border: 0px solid #777; opacity:  .7;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}

 

 
 
.container{position:absolute;top:870px;left:45px;}

.footer {position:relative;
    
   width:100%;
   height:248px;   /* Height of the footer */
   background:#333;}
   .footer a{width:100%;color:#fff;font-family:sans-serif;font-size:15px;text-decoration:none;}
   
   .footer1 {width:100%;position:relative;
   height:63px;   /* Height of the footer */
   background:#404040;color:#e6e6e6;font-size:11px;font-family:sans-serif;}
   
   .footer1 a{color:#fff;font-family:arial;font-size:11px;text-decoration:none;}
   
     .topmenu1 {width:100%;position:absolute;top:111px;left:0;
	white-space:nowrap;padding:14px;}
 
  
 
  
 .menu1 a:link{text-decoration:none;color:#000;font-family:Sans Serif;font-size:18px;font-size:bold;white-space:nowrap;}
.menu1 a:visited{text-decoration:none;color:#000;}
.menu1 a:hover{text-decoration:underline;color:#ffae00;}

   
 .container2{width:100%;height:45px;margin:0px;border:0px solid orange;background:#404040;position:relative;}
	 .container3{width:100%;height:auto;margin:0px;border:0px solid orange;background:#fff;position:relative;}
	 .container4{position:relative;}
	
	
	.content1 {position:absolute;top:10px;right:60px;color:#fff;}
	.content2{position:absolute;top:10px;right:190px;}
     .content3{position:absolute;top:10px;right:250px;}
	 .content4{position:relative;top:0px;left:0px;}
	.content5{position:relative;background:#e6e6e6;height:17%;padding:7px;}
	.content6{position:relative;top:4px;}
  
  
	
	.footer {position:relative;
    
   max-width:100%; width:auto;
   height:380px;   /* Height of the footer */
   background:#333;}
   
   .footer a{color:#fff;font-family:arial;font-size:15px;text-decoration:none;}
   
    .footer1 {width:100%;position:relative;
   height:63px;   /* Height of the footer */
   background:#1E1E1E;color:#e6e6e6;font-size:11px;font-family:arial;}
   
    .footer1 a{color:#fff;font-family:arial;font-size:11px;text-decoration:none;}
    
   max-width:100%; width:auto;
   height:380px;   /* Height of the footer */
   background:#333;}
   
    
 
 
    
	.imgop {
    opacity: 0.9;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}
	.imgop:hover {
    opacity:  .7;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}
	 	
.img1{position:relative;top:6px;}	
.parag1{position:absolute;top:40px;left:435px;font-size:18px;font-family:arial;color:#fff;font-weight:bold;}
  table{width:auto; border: 1px solid #BCBCBC;}