/* CSS Document */
body {
	/*background-color: #EBEBEB; */
	top:2px;	
}

a:link, a:visited, a:active {
    text-decoration:none;
}

.grid-container {
  display: grid;
  /*gap: 10px;*/
  grid-template:
    "EncaPagi" 100px
    "DetaPagi" auto
    "PiePagi"  60px;
}

/*------------------------------------------------------
					 Encabezado							*/
header{
	grid-area: EncaPagi;   
    top: 0;					/*Posiciona en la parte superior*/
    left: 0px;				/*Posicion en el lado izquierdo*/
    position: fixed;		/*El encabezado lo deja fijo*/
    width: 100%;
    height: 60px;
    background: #fff;
    color: #fff;
    z-index: 100;
	border-bottom-style:groove; 
	border-bottom-color:#333333;
}

/*------------------------------------------------------
					 Menu								*/
nav {
	background:#333333;
	padding: 5px;
	display: flex;
	justify-content: space-around; /*Para ajustar el menu */
} 

/*Boton del menu*/
.nav-boton {
	width:100%;
	background: #CCCCCC;
	color:#999999;
	padding:4px 0;
	border: 2px solid #fff;
	display:none;
}

.nav-enlace{
	diaplay: inline-block;
	color:#FFFFFF;
	padding:5px; 20px;
	text-decoration:none;
} 

.nav-enlace:hover{
	background: #999999;
}

nav, section footer {
  display: block;
}

/*------------------------------------------------------
					 Conetenido							*/
.ImagSIMGA {
   border-radius: 5%;				/*150px para hacer un circulo*/
  -webkiy-border-radius: 5%;
  -moz-border-radius: 5%;		/*Para Mozila*/
  -o-border-radius: 5%;			/*Opera */
  -ms-border-radius: 5%;
}

section { 
	grid-area: DetaPagi; 
	top=0px;
}

/*Contenido Gral*/
.Contenido { 
  min-height: calc(100vh - 100px); }

.ContenidoDeta { 
  min-height: calc(100vh - 160px); }

.ubicadiv{
  padding-top:70px;
}

/*Quienes somos */
.ContColumQui{ 	
   width: calc(100% / 3);
   color: #333;
   margin: 15px 4px 15px;			/*arriba, derecha, abajao, izq  */
   padding:10px;
   border: 1px solid #333; 
   border-radius:15px;				/*para redonderar las esquinas*/
   box-shadow: 5px 5px #2D7572; 	/*Sombra del cuadro*/
   box-sizing: border-box; 
}

.AlineImagTextAbaj {
  vertical-align: text-bottom;  
}

.ColoTitu { 
  color: #2D7572;
  text-shadow:1px 1px 1px #333;
  font-size:25px; 
}

/*Plataforma*/
.ContColumPla { 	
	width: calc(100% / 3);
	color: #333;
	margin: 15px 4px 15px;
	padding:10px;
	border: 1px solid #333;
	border-radius:15px;	/*para redonderar las esquinas*/
	box-shadow: 5px 5px #888; /*Sombra del cuadro*/
	box-sizing: border-box; 
}

.ColoTituPla { 
  color: #2D7572;
  text-shadow:1px 0px 0px #333;
  font-size:15px;
  vertical-align: top;
}

.Plataform{
  width:100% }
  
/*Clientes */
.ContColumCli {
	width: calc(100% / 3);
	color: #333;
	margin: 15px 4px 15px;
	padding:10px;
}

.ColoTituCli {
  color: #2D7572;
  text-align:center;
  text-shadow:1px 1px 1px #333;
  font-size:15px;
}

.PlecaTexto{
	background: #2D7572;
	color:#fff;
	display: block;
	padding: 2px;
	margin-top: 3px;
	margin-bottom: 3px;
	border-radius: 3px;
	-webkiy-border-radius: 3px;
	-moz-border-radius: 3px;		/*Para Mozila*/
	-o-border-radius: 3px;			/*Opera */
	-ms-border-radius: 3px;
}

/*------------------------------------------------------
					 Pie de Pagina						*/
footer{
	grid-area: PiePagi;
	bottom:0;			/*Pocisionarse en la parte inferior */
	left:0px;			/*Pocisionarse del lado izquierdo   */
	position:fixed;		/*El Pie de paguina lo deja fijo    */
    width: 100%;
    height: 80px;
	background: #333333;
	color: #fff;
	font-size:15px;
	border-bottom-style:groove; 
	border-bottom-color:#333333;
}

.PieColumna
{ width: calc(100% / 3);
}

.flex{
	display: flex;
	flex-wrap:center; /*para ajustar las columnas*/
}

/*@media(max-width:768px){
las resoluciones son:
480, 768, 1024, 1280, 1360, 1366
*/
@media only screen and (min-width : 300px) and (max-width : 480px) {
	/*------------------------------------------------------
					 Menu								*/
	.nav-boton {
		/*display:inline-block;		/*Activa boton de menu*/
		display:block;
	}

	.nav-enlace{
		display: block;
		height: 10px;
		text-decoration: none;
		padding: 10px;
		border-bottom: 1px solid rgba(255,255,255,0.3);
	}
	
	.desaparece {
		display: none;				/*Desaparece el menu*/
	}
	
	/*------------------------------------------------------
					 Conetenido							*/
	.ContenidoDeta{ 
	 display: block;
	}
	
	.ImagSIMGA {
	 width:90%;
	}

	/*Contenido de Quienes somos*/
	.ContColumQui{				
	width:97%;
	font-size:14px;
	}
	
	.AlineImagTextAbaj{
	 width:4%;
	 height:4%;
	}

	.ColoTitu{ 
	font-size:18px; 
	}
	
	/*Plataforma*/
	.ContColumPla{
	width:97%;
	}
	
	.Plataform{
	 width:50%;	
	}
	
	/*Clientes */
	.ContColumCli{
	width:97%;
	}

	.ColoTituCli{
	background: #999999;
	display: block;
	padding: 2px;
	color:#fff;
	margin-top: 0px;
	margin-bottom: 0px;
	border-radius: 3px;
	-webkiy-border-radius: 3px;
	-moz-border-radius: 3px;		/*Para Mozila*/
	-o-border-radius: 3px;			/*Opera */
	-ms-border-radius: 3px;
    }

	.LineActi{ 
	display:none;
	}
	
	/*------------------------------------------------------
					 Pie de pagina							*/
	footer{
	 font-size:8px;
	}

	.ImagAyto{
	 width:50%
	}
}


@media only screen and (min-width : 481px) and (max-width : 768px) {
	
	.ImagSIMGA {
	 width:70%;
	}
	
	/*------------------------------------------------------
					 Pie de pagina							*/		
   footer{
	 font-size:10px;
	}	
	
	.ImagAyto{
	 width:50%;
	}
	
	
}

/*@media(max-width:1200px)*/
@media only screen and (min-width : 769px) and (max-width : 1024px){
	.ImagSIMGA{ 
	width:50%; }
}

@media only screen and (min-width : 1025px) and (max-width : 1280px){
	.ImagSIMGA {
	 width:40%;
	}

	/*------------------------------------------------------
					 Pie de pagina							*/	
	footer{
	 font-size:8px;
	}	

}

@media only screen and (min-width : 1281px) and (max-width : 1366px){
	.ImagSIMGA {
	 width:30%;
	}
	
	/*------------------------------------------------------
					 Pie de pagina							*/
   footer{
	 font-size:8px;
	}	
}