*
{
   /*  box-sizing: border-box;   */
}
/******************************************/  
.body 
{
  /*  Puts the Page in the middle  */
 margin:0 auto;
 max-width: 980px;
 
 font-family: Arial, Helvetica, sans-serif; 
/* background-color: yellow; */
}
/******************************************/  
/* The grid container */
.grid-container
{
  display: grid; 
  grid-template-columns: 200px 580px 200px;
  grid-template-rows: 100px 100px 30px;   /* Row Size   auto; */
  grid-template-areas: 
    'header_L header_M header_R'   
    'content_Left content_Middle content_Right' 
    'footer_1 footer_2 footer_3';
  
  /* Draws black line around page */ 
  /* Page Size */
  min-width: 400px;
  max-width: 980px;   
  Height:1100px;    
  /* border: 2px solid black; 111*/
  border-top: 2px solid black;  
  border-right: 2px solid black;  
  border-left: solid black;  
  border-bottom: solid black;  
  
 /*  background-color:rgba(0,255,0,.5);  */

}
/******************************************/ 
/* Style the header */
.header_L 
{
  grid-area: header_L;
   height:  100px;  /*  45px; */     
  
   /*  background-color:rgba(0,255,0,.5);  */
}
/* Style the header */
.header_M 
{
  grid-area: header_M;
  height:  100px;  /*  45px; */      
  
 /*  background-color:rgba(0,255,0,.5);  */
}
/* Style the header */
.header_R 
{
  grid-area: header_R;
 
   height:  100px;  /*  45px; */     
  
 /*  background-color:rgba(0,255,0,.5);  */ 
}
/******************************************/ 
/* Style the left column */
.content_Left 
{
  grid-area: content_Left;
 /*  background-color:rgba(255,0,0,.5);  */
}

/* Style the middle column */
.content_Middle 
{
  grid-area: content_Middle;
 /*  background-color:rgba(0,255,0,.5);   */ 
}

/* Style the right column */
.content_Right 
{
  grid-area: content_Right;
 /*  background-color:rgba(0,0,255,.5);    */
}

/* Style the footer */
.footer_1 
{
  grid-area: footer_1;
  padding: 10px;
  text-align: center;
}
.footer_2 
{
  grid-area: footer_2;
  padding: 10px;
  text-align: center;
}
.footer_3 
{
  grid-area: footer_3;
  padding: 10px;
  text-align: center;
}
/******************************************/ 
.CompanyLogo /* logos end up in diferent x positons */
{
  position: relative;          /* relative; absolute */
  top: 20px; 
  left: 0px;
  /**/
  width:  418px; /*  384px; */
  height: 66px;  /*  64px; */      
/*  margin-left: 0px;  */
/*  float: left;  set to left or it will not let Logo scroll from left to right*/
/*  clear: none;  specifies on which sides of an element floating elements are not allowed to float */      
/*  display: block;  */
 background-image: url("../images/MC3Automation.png");  
   transition: transform 3s;        
   /* Round the Edges of buttons*/
   padding: 4px ; 
   border-radius: 1rem;  
   border: 4px solid black;  
   /**/  
   z-index: 1;

/*  background-color:rgba(0,0,255,.5);  */
} 
/******************************************/
.Boddy_MiddlePage_2A1
{
  /* grid-area: content_Middle;   */
  position: relative; 
  top: 0px; 
  left: 0px;  
/*  grid-area: content_Middle;  */
  /* you need to sub 100 from 800 since we are starting at top: 100px */  
  width: 520px; 
  Height: 200px; /* 350px Height - top 100px*/  
   
/*  background-color:rgba(0,125,0,.5);  */
background-color:rgb(255,255,255);
  padding: 10px 10px 10px 10px;	               
  /* Round the Edges of buttons*/
  border-radius: 1rem;  
  border: 4px solid black;              
  /**/  
  margin-left:  10px;  
/**/
/**/
   padding-bottom:20px; 
   margin:10px;
//   background: -moz-linear-gradient(bottom, #DDDDDD, #F0F0F0 175px);
//   background: -webkit-linear-gradient(bottom, #DDDDDD, #F0F0F0 175px);
//   background: -ms-linear-gradient(bottom, #DDDDDD, #F0F0F0 175px);
   border-radius: 10px; box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
   
 /* background-color:rgba(255,0,0,.5);   */   
}
/******************************************/ 
 .Boddy_MiddlePage_2A2
{
grid-area: content_Middle;   
  position: relative; 
  top: 50px; 
  left:  -60px;  /*170px;  */
  width: 400px; 
  Height: 140px; /* 350px Height - top 100px*/  
   
/*  background-color:rgba(0,125,0,.5);  */
background-color:rgb(255,255,255);
  padding: 10px 10px 10px 10px;	               
  /* Round the Edges of buttons*/
  border-radius: 1rem;  
  border: 4px solid black;              
  /**/  
 margin-left:  10px;  
/**/
   padding-bottom:20px; 
   margin:10px;
   border-radius: 10px;
   box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);

 /* background-color:rgba(0,255,0,.5);   */
}
/******************************************/ 
.Boddy_MiddlePage_2A3
{
 /*  grid-area: content_Middle;   */ 
  position: relative;       /* relative; absolute */
  top: 175px; 
  left:  -120px;  
  /* you need to sub 100 from 800 since we are starting at top: 100px */  
  width: 240px; 
  Height: 210px; /* 350px Height - top 100px*/  
   
/*  background-color:rgba(0,125,0,.5);  */
background-color:rgb(255,255,255);
  padding: 10px 10px 10px 10px;	               
  /* Round the Edges of buttons*/
  border-radius: 1rem;  
  border: 4px solid black;              
  /**/  
  margin-left:  10px;  
/**/
/**/
   padding-bottom:20px; 
   margin:10px;
   border-radius: 10px; box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
   
/* background-color:rgba(0,0,255,.5);    */

/**/
}
/******************************************/ 
/******************************************/ 
/******************************************/ 
/******************************************/ 
.Boddy_Left
{
/*  grid-area: content_Left;  */
  position: relative;  /* relative; */
  top:0px; 
  /* you need to sub 100 from 800 since we are starting at top: 100px */  
  Height: 530px;  /* 800px Height - top 100px*/
  /**/
  /**/
  /*background-color:rgba(255,0,0,.5); */
/* background-color: #F8F8F8; */

}
/**/
/**/
.Boddy_Middle
{
  position: relative; 
  top:100px; 
  grid-area: content_Middle;
  /* you need to sub 100 from 800 since we are starting at top: 100px */  
  Height: 600px; /* 800px Height - top 100px*/
  /**/
 /*  background-color:rgba(0,255,0,.5);  */
  }
.Boddy_Right
{
  position: relative; 
  top:100px; 
  grid-area: content_Right;
  /* you need to sub 100 from 800 since we are starting at top: 100px */  
Height: 600px;   /* 800px Height - top 100px*/
/**/
/* Height: 700px;  */
  padding: 10px 0px 10px 10px;	    
/* background-color:rgba(0,0,255,.5);  */
}
/***************************************/
/**/
/***************************************/  
/* Page 2 */
.Boddy_MiddlePage_2B
{
 /* grid-area: content_Left;   */
  position: relative; 
  top: -50px; 
  left: 15px;
  /*  grid-area: content_Middle; */
  /* you need to sub 100 from 800 since we are starting at top: 100px */  
  Height: 370px; /* 570px Height - top 100px*/
  width: 900px;
  /**/
  /*  background-color:rgba(0,125,0,.5);  */

 background-color:rgb(255,255,255);
   
  padding: 10px 10px 10px 10px;	               
  /* Round the Edges of buttons*/
  border-radius: 1rem;  
  border: 4px solid black;              
  /**/  
  margin-top: 0px;
  /* margin-right: 0px;  */
  margin-left: 10px;   
  /**/
  padding-bottom:20px; 
  margin:10px;
//  background: -moz-linear-gradient(bottom, #DDDDDD, #F0F0F0 175px);
//  background: -webkit-linear-gradient(bottom, #DDDDDD, #F0F0F0 175px);
//  background: -ms-linear-gradient(bottom, #DDDDDD, #F0F0F0 175px);
  border-radius: 10px; 
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
  }  
/**/   

/******/  
/***************************************/  
/**/
.Font_Header  /* font Size biger */
{
  font-family: "Times New Roman", Times, serif;
  /**/
  /* font-weight: normal; */
  font-weight: bold;
  /* font-style: normal;*/
  font-style: italic;
  /* font-style: oblique; */
  Height: 24px;  
  font-size: 24px;
}
/**/
.Font_Boddy  /* font Size smaller */
{
 font-family: "Times New Roman", Times, serif;
 /**/
  /* font-weight: normal; */
  font-weight: bold;
 
 /* font-style: normal;*/
 font-style: italic;
 /* font-style: oblique; */
 Height: 18px;  
 font-size: 20px;
}
/**/
.Font_RightSideHeader  /* font Size biger */
{
  font-family: "Times New Roman", Times, serif;
  /**/
  /* font-weight: normal; */
  font-weight: bold;
  /* font-style: normal;*/
  font-style: italic;
  /* font-style: oblique; */
  Height: 20px;  
  font-size: 24px;
}
.Font_RightSideBody  /* font Size biger */
{

  font-family: "Times New Roman", Times, serif;
  /**/
  /* font-weight: normal; */
  font-weight: bold;
  /* font-style: normal;*/
  font-style: italic;
  /* font-style: oblique; */
  Height: 20px;  
  font-size: 20px;
}
/**/
/**/
/******/  
/* Page 2 Picture of Roberto*/




#leftNav
{
  position: absolute; 
  top:5px;
  left: 5px;
  width:175px; 
  height:585px; 
  font-size:20px;
/*  background-color: #99DDFF;  */  /* #AACCFF;    */
  border-radius: 10px; 
  border:2px groove blue;
}
/**/
.span_2 
{
  position: relative; 
  
  margin-top:  0px;
  margin-left: 5px; 
  
  background-image: -moz-linear-gradient(top , #f1f1f1, #8F8F8F); 
  background-image: -webkit-linear-gradient(top , #f1f1f1, #8F8F8F);
  background-image: -ms-linear-gradient(top , #f1f1f1, #8F8F8F);
  color:black; 
  border:3px ridge blue; 
  
  color: #000000; /* Text black */	
  font-weight: bold;  
  font-size:22px; 
  float:left; 
  cursor:pointer; 
  width:150px;
    
  text-align:center;
  padding: 0px 3px 3px 3px;	   
margin-bottom:50px; 
  
  border-radius: 1rem;  
  border: 4px solid black;       
}
.span_2:link, .span_2:visited  /* gradient */
{
  color: #000000; /* Text black */	
}
/**/
.span_2:hover, .span_2:active  /* gradient */
{
   color: #0000ff; /* Text blue */	
}
/**/
#MyTitleDiv
{
  position: absolute;  /* relative  absolute */
  float: left;
  width: 720px;
  height:75px;
  top:  5px;  
  left: 190px; 
  /**/
  background-color:blue; 
  color:white; 
  /*round the edges*/ 
  border-radius: 10px; 
  border:2px groove black;  
}
#MyTitle
{
  /* font-weight: normal; */
  font-weight: bold;
  /* font-style: normal;*/
  font-style: italic;
  /* font-style: oblique; */
  /* Note: JavaScriptPage_2.js uses this values so */
  /* if you change them here Change them there as well */  
  font-family: "Times New Roman";
  font-size:50px;  
}

/**/
/*Sub System*/
div_5
{
  display:inline-block; width:40px;  padding:1px; 
}
p_5
{ 
  text-align:center; margin:0px;
}
span_5
{ 
  display:block; width:30px; height:7px; margin:2px; border-radius: 40%; 
}
/**/
#MyCaptionDiv
{
  position: absolute;  /* relative  absolute */
  float: left;
   width:610px;
  height:80px;
  top:  505px;  
//  left: 240px; 
  margin-left: 240px;
  /**/
  // background-color:white; 
  color:black; 
  /*round the edges*/ 
  border-radius: 10px; 
  border:4px groove black;  
}
/**/
#MyNetWorkDiv
{ 
  position: absolute;  /* relative  absolute */
  float: left;
  top:  110px;   
  margin-left: 240px;    /* 180px;  */
  /* */
  width:610px;
  height:370px; 
  /**/
  /* Round the Edges of buttons*/
  border-radius: 1rem;  
  border: 5px solid black;         
}
/**/
#MyMaquilladoraDiv 
{ 
  position: absolute;  /* relative  absolute */
  float: left;
  top:  110px;   
  margin-left: 240px;    /* 180px;  */
  /* */
  width:610px;
  height:370px; 
  /**/
  /* Round the Edges of buttons*/
  border-radius: 1rem;  
  border: 5px solid black;         
}
/**/
#MyGreenHouseDiv
{
  position: absolute;  /* relative  absolute */
  float: left;
  top:  110px;   
  margin-left: 240px;    /* 180px;  */
  /* */
  width:610px;
  height:370px; 
  /**/
  /* Round the Edges of buttons*/
  border-radius: 1rem;  
  border: 5px solid black;         
}
/**/
/**/
#MyChillerDiv 
{ 
  position: absolute;  /* relative  absolute */
  float: left;
  top:  110px;   
  margin-left: 240px;    /* 180px;  */
  /* */
  width:610px;
  height:370px; 
  /**/
  /* Round the Edges of buttons*/
  border-radius: 1rem;  
  border: 5px solid black;         
}
/**/
#MyWaterTreatmentDiv 
{ 
  position: absolute;  /* relative  absolute */
  float: left;
  top:  110px;   
  margin-left: 240px;    /* 180px;  */
  /* */
  width:610px;
  height:370px; 
  /**/
  /* Round the Edges of buttons*/
  border-radius: 1rem;  
  border: 5px solid black;     
}
/**/
#MyCustomDiv 
{ 
 position: absolute;  /* relative  absolute */
  float: left;
  top:  110px;   
  margin-left: 240px;    /* 180px;  */
  /* */
  width:610px;
  height:370px; 
  /**/
  /* Round the Edges of buttons*/
  border-radius: 1rem;  
  border: 5px solid black;     
}
/**/
/**/
#MyNetWorkPage_2
{ 
  position: relative;  /* relative  absolute */
  float: left;   /* left */
  top:  10px;   
  margin-left: 10px;    
  /* */
  width:580px;   /* 580px */
  height:345px;  /* 345px */
  /**/
  /* Round the Edges of buttons*/
  border-radius: 1rem;  
  border: 5px solid black;    
}
/**/
#MyMaquilladoraPage_2
{ 
  position: relative;  /* relative  absolute */
  float: left;
  top:  10px;   
  margin-left: 10px;    
  /* */
  width:580px;
  height:345px; 
  /**/
  /* Round the Edges of buttons*/
  border-radius: 1rem;  
  border: 5px solid black;    
}
/**/
#MyGreenHousePage_2 
{ 
  position: relative;  /* relative  absolute */
  float: left;
  top:  10px;   
  margin-left: 10px;    
  /* */
  width:580px;
  height:345px; 
  /**/
  /* Round the Edges of buttons*/
  border-radius: 1rem;  
  border: 5px solid black;    
}
/**/
#MyChillerPage_2 
{ 
  position: relative;  /* relative  absolute */
  float: left;
  top:  10px;   
  margin-left: 10px;    
  /* */
  width:580px;
  height:345px; 
  /**/
  /* Round the Edges of buttons*/
  border-radius: 1rem;  
  border: 5px solid black;    
}
/**/
#MyWaterTreatmentPage_2 
{ 
  position: relative;  /* relative  absolute */
  float: left;
  top:  10px;   
  margin-left: 10px;    
  /* */
  width:580px;
  height:345px; 
  /**/
  /* Round the Edges of buttons*/
  border-radius: 1rem;  
  border: 5px solid black;    
}
/**/
#MyCustomPage_2 
{ 
  position: relative;  /* relative  absolute */
  float: left;
  top:  10px;   
  margin-left: 10px;    
  /* */
  width:580px;
  height:345px; 
  /**/
  /* Round the Edges of buttons*/
  border-radius: 1rem;  
  border: 5px solid black;    
}
/**/
.Page_2Image_RR
{
/* 
  position: absolute;  
  left: 0px;  
  top: 0px;  
*/ 
}
/**/
/**/  
.Boddy_Left ul 
{
  list-style: none; /* NO bullets or numbers */
}
.Boddy_Left li a:link, .Boddy_Left li a:visited , .MyDownLoadPage 
{
  font-size: 14pt;
  font-weight: bold;
  color: #000000;
  text-decoration: none;
  display: block;
  /**/
  font-weight: bold;
  background-color: #FFFFFF; /* # FFFFFF 00BFFF blueish*/
  color: #000000; /* Text black */	
  /* Round the Edges of buttons*/
  border-radius: 1rem;  
  border: 4px solid black;            
  /* padds the inside of the element */
  padding: 10px 0px 10px 10px;	               
  /**/  
  margin-top:   0px;
  margin-right: 20px;
  margin-bottom: 90px;
  margin-left: -20px;  
}
/**/
.Boddy_Left li a:hover, .Boddy_Left li a:active 
{
  font-size: 14pt;
  font-weight: bold;
  color: #000000;
  text-decoration: none;
  display: block;
  /**/ 
  background-color: #FFFFFF; /* # FFFFFF 00BFFF blueish*/
  color: #0000ff; /* Text blue */	
  /* Round the Edges of buttons*/
  border-radius: 1rem;  
  border: 4px solid black;            
  /* padds the inside of the element */
  padding: 10px 0px 10px 10px;	               
  /**/  
  margin-top:   0px;
  margin-right: 20px;
  margin-bottom: 90px;
  margin-left: -20px;  
}
/**/
/**/
/**/
/**/

/**/

/**/
footer  
{
  position: relative;
  float: left;
  width: 100%;
  margin-left: 220px;
  
 /* text-align:center; */
  /**/
  font-style: italic;
  /* background-color: #cccccc;  */
}
.footer_B
{
  grid-area: footer_2;  /*  content_Left content_Middle content_Right  */
  position: relative; 
  top: 520px;  
  /**/
  font-family: "Times New Roman", Times, serif;
  font-weight: bold;
  /* font-style: normal;*/
  /* font-style: oblique; */  
  font-style: italic;
  font-size: 18px;  
  
 /*   background-color:rgba(0,255,0,.5); */
}
/**/
/**/
h1 
{
  margin: 0;
}
#WallPaper_1
{
 background-image: url("../images/images_21.jpeg"); /* Pages/images.jpg */
 background-repeat: no-repeat; 
 background-size:  cover;    
  /**/
 }	   
/**/