* {	margin: 0;}
	
.contenedor {
	width: 100%;
	margin: 0px auto 0px auto;
	display: grid;
	grid-gap: 10px;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(6, auto);
	grid-template-areas: "titulo titulo titulo titulo"
	                     "subtitulo subtitulo subtitulo subtitulo"						 						 
						 "tresA tresA tresA tresA"
	                     "cuatro cuatro cuatro cuatro"						 
	                     "tres tres tres tres"			 
	                     "dos dos dos dos";
}

.contenedor .titulo {grid-area:titulo;  display: flex; align-items: center; justify-content: center;}
.contenedor .titulo h2{grid-area:titulo; font-size:24px;    padding:20px 25px; }
.contenedor .titulo h3{grid-area:subtitulo; font-size:30px; padding:25px 25px;  }

.contenedor .subtitulo {grid-area:subtitulo;   display: flex; align-items: center; justify-content: center;}
.contenedor .subtitulo h3{grid-area:subtitulo; font-size:30px; padding:10px 25px;  }

.contenedor .cuatro {grid-area: cuatro;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(4, auto);
	grid-template-areas: "cuatro1 cuatro1 cuatro1 cuatro1"
	                     "cuatro2 cuatro2 cuatro2 cuatro2"
	                     "cuatro3 cuatro3 cuatro3 cuatro3"
	                     "cuatro4 cuatro4 cuatro4 cuatro4"						;
}
.contenedor .cuatro .cuatro1 {grid-area: cuatro1;	display: flex; align-items: center; justify-content: center; padding:15px 40px;}
.contenedor .cuatro .cuatro2 {grid-area: cuatro2;   display: flex; align-items: center; justify-content: center; padding:15px 40px;}
.contenedor .cuatro .cuatro3 {grid-area: cuatro3; 	display: flex; align-items: center; justify-content: center; padding:15px 40px;}
.contenedor .cuatro .cuatro4 {grid-area: cuatro4;	display: flex; align-items: center; justify-content: center; padding:15px 40px;}


.contenedor .tres {grid-area: tres;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(3, auto);
	grid-template-areas: "tres1 tres1 tres1 tres1"
	                     "tres2 tres2 tres2 tres2";
}
.contenedor .tres .tres1 {grid-area: tres1;	display: flex; align-items: center; justify-content: center; padding:5px 40px;}
.contenedor .tres .tres2 {grid-area: tres2; display: flex; align-items: center; justify-content: center;}
.contenedor .tres h3{grid-area:subtitulo; font-size:30px; padding:10px 25px;  }

.contenedor .tresA {grid-area: tresA;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(1, auto);
	grid-template-areas: "tresA1 tresA1 tresA1 tresA1";
	margin:0px 25px;
}
.contenedor .tresA .tresA1 {grid-area: tresA1;	display: flex; align-items: center; justify-content: center;}
.contenedor .tresA .tresA1 P{grid-area:tres2; font-size:18px; padding:10px 40px;  }   

.contenedor .dos {grid-area: dos;
	display: grid;
	font-size:15px;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(5, auto);
	grid-template-areas: "dos1 dos1 dos1 dos1"
	                     "dos2 dos2 dos2 dos2"
	                     "dos3 dos3 dos3 dos3"
	                     "dos4 dos4 dos4 dos4"
	                     "dos5 dos5 dos5 dos5";
}
.contenedor .dos .dos1 {grid-area: dos1;   display: flex; align-items: center; justify-content: center;}
.contenedor .dos .dos2 {grid-area: dos2;   display: flex; align-items: center; justify-content: center;}
.contenedor .dos .dos3 {grid-area: dos3;   display: flex; align-items: center; justify-content: center;}
.contenedor .dos .dos4 {grid-area: dos4;   display: flex; align-items: center; justify-content: center;}
.contenedor .dos .dos5 {grid-area: dos5;   display: flex; align-items: center; justify-content: center; padding:20px 10px;}


/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
   .contenedor {
	width: 100%;
	margin: 0px auto 0px auto;
	display: grid;
	grid-gap: 10px;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(9, auto);
	grid-template-areas: "titulo titulo titulo titulo"
	                     "subtitulo subtitulo subtitulo subtitulo"						 
						 "tresA tresA tresA tresA"
	                     "cuatro cuatro cuatro cuatro"						 
	                     "tres tres tres tres"			 
	                     "dos dos dos dos";
}

.contenedor .titulo {grid-area:titulo;  display: flex; align-items: center; justify-content: center;}
.contenedor .titulo h2{grid-area:titulo; font-size:30px;  padding:20px 25px;  }
.contenedor .titulo h3{grid-area:subtitulo; font-size:35px; padding:25px 25px;  }

.contenedor .subtitulo {grid-area:subtitulo;   display: flex; align-items: center; justify-content: center;}
.contenedor .subtitulo h3{grid-area:subtitulo; font-size:35px; padding:10px 25px;  }

.contenedor .cuatro {grid-area: cuatro;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(4, auto);
	grid-template-areas: "cuatro1 cuatro1 cuatro1 cuatro1"
	                     "cuatro2 cuatro2 cuatro2 cuatro2"
	                     "cuatro3 cuatro3 cuatro3 cuatro3"
	                     "cuatro4 cuatro4 cuatro4 cuatro4";
}
.contenedor .cuatro .cuatro1 {grid-area: cuatro1;	display: flex; align-items: center; justify-content: center; padding:15px 150px;}
.contenedor .cuatro .cuatro2 {grid-area: cuatro2;   display: flex; align-items: center; justify-content: center; padding:15px 40px;}
.contenedor .cuatro .cuatro3 {grid-area: cuatro3; 	display: flex; align-items: center; justify-content: center; padding:15px 40px;}
.contenedor .cuatro .cuatro4 {grid-area: cuatro4;	display: flex; align-items: center; justify-content: center; padding:15px 40px;}

.contenedor .tres {grid-area: tres;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(3, auto);
	grid-template-areas: "tres1 tres1 tres1 tres1"
	                     "tres2 tres2 tres2 tres2";
}
.contenedor .tres .tres1 {grid-area: tres1;	display: flex; align-items: center; justify-content: center; padding:5px 40px;}
.contenedor .tres .tres2 {grid-area: tres2; display: flex; align-items: center; justify-content: center;}
.contenedor .tres h3{grid-area:subtitulo; font-size:30px; padding:10px 25px;  }

.contenedor .tresA {grid-area: tresA;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(1, auto);
	grid-template-areas: "tresA1 tresA1 tresA1 tresA1";
	margin:0px 35px;
}
.contenedor .tresA .tresA1 {grid-area: tresA1;	display: flex; align-items: center; justify-content: center;}
.contenedor .tresA .tresA1 P{grid-area:tres2; font-size:18px; padding:10px 40px;  }  

.contenedor .dos {grid-area: dos;
	display: grid;
	font-size:20px;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(5, auto);
	grid-template-areas: "dos1 dos1 dos1 dos1"
	                     "dos2 dos2 dos2 dos2"
	                     "dos3 dos3 dos3 dos3"
	                     "dos4 dos4 dos4 dos4"
	                     "dos5 dos5 dos5 dos5";
}
.contenedor .dos .dos1 {grid-area: dos1;   display: flex; align-items: center; justify-content: center;}
.contenedor .dos .dos2 {grid-area: dos2;   display: flex; align-items: center; justify-content: center;}
.contenedor .dos .dos3 {grid-area: dos3;   display: flex; align-items: center; justify-content: center;}
.contenedor .dos .dos4 {grid-area: dos4;   display: flex; align-items: center; justify-content: center;}
.contenedor .dos .dos5 {grid-area: dos5;   display: flex; align-items: center; justify-content: center; padding:20px 10px;} 

}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
   .contenedor {
	width: 100%;
	margin: 0px auto 0px auto;
	display: grid;
	grid-gap: 10px;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(6, auto);
	grid-template-areas: "titulo titulo titulo titulo"
	                     "subtitulo subtitulo subtitulo subtitulo"						 
						 "tresA tresA tresA tresA"
	                     "cuatro cuatro cuatro cuatro"						 
	                     "tres tres tres tres"			 
	                     "dos dos dos dos";
}

.contenedor .titulo {grid-area:titulo;        display: flex; align-items: center; justify-content: center;}
.contenedor .titulo h2{grid-area:titulo; font-size:30px;      padding:20px 25px; }
.contenedor .titulo h3{grid-area:subtitulo; font-size:35px; padding:25px 25px;  }

.contenedor .subtitulo {grid-area:subtitulo;   display: flex; align-items: center; justify-content: center;}
.contenedor .subtitulo h3{grid-area:subtitulo; font-size:35px; padding:10px 25px;  }

.contenedor .cuatro {grid-area: cuatro;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(4, auto);
	grid-template-areas: "cuatro1 cuatro1 cuatro1 cuatro1"
	                     "cuatro2 cuatro2 cuatro2 cuatro2"
	                     "cuatro3 cuatro3 cuatro3 cuatro3"
	                     "cuatro4 cuatro4 cuatro4 cuatro4";
}
.contenedor .cuatro .cuatro1 {grid-area: cuatro1;	display: flex; align-items: center; justify-content: center; padding:15px 300px;}
.contenedor .cuatro .cuatro2 {grid-area: cuatro2;   display: flex; align-items: center; justify-content: center; padding:15px 40px;}
.contenedor .cuatro .cuatro3 {grid-area: cuatro3; 	display: flex; align-items: center; justify-content: center; padding:15px 40px;}
.contenedor .cuatro .cuatro4 {grid-area: cuatro4;	display: flex; align-items: center; justify-content: center; padding:15px 40px;}

.contenedor .tres {grid-area: tres;
	display: grid;
	padding:10px 100px; 
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(2, auto);
	grid-template-areas: "tres1 tres1 tres1 tres1"
	                     "tres2 tres2 tres2 tres2";
}
.contenedor .tres .tres1 {grid-area: tres1;	display: flex; align-items: center; justify-content: center; padding:5px 40px;}
.contenedor .tres .tres2 {grid-area: tres2; display: flex; align-items: center; justify-content: center;}
.contenedor .tres p{grid-area:tres2; font-size:30px; padding:10px 40px;  }
.contenedor .tres h3{grid-area:tres1; font-size:30px; padding:10px 25px;  }

.contenedor .tresA {grid-area: tresA;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(1, auto);
	grid-template-areas: "tresA1 tresA1 tresA1 tresA1";
	margin:0px 60px;
}
.contenedor .tresA .tresA1 {grid-area: tresA1;	display: flex; align-items: center; justify-content: center;}
.contenedor .tresA .tresA1 P{grid-area:tres2; font-size:20px; padding:10px 40px;  }  

.contenedor .dos {grid-area: dos;
	display: grid;
	font-size:20px;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(5, auto);
	grid-template-areas: "dos1 dos1 dos1 dos1"
	                     "dos2 dos2 dos2 dos2"
	                     "dos3 dos3 dos3 dos3"
	                     "dos4 dos4 dos4 dos4"
	                     "dos5 dos5 dos5 dos5";
}
.contenedor .dos .dos1 {grid-area: dos1;   display: flex; align-items: center; justify-content: center;}
.contenedor .dos .dos2 {grid-area: dos2;   display: flex; align-items: center; justify-content: center;}
.contenedor .dos .dos3 {grid-area: dos3;   display: flex; align-items: center; justify-content: center;}
.contenedor .dos .dos4 {grid-area: dos4;   display: flex; align-items: center; justify-content: center;}
.contenedor .dos .dos5 {grid-area: dos5;   display: flex; align-items: center; justify-content: center; padding:20px 10px;}

} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {

   .contenedor {
	width: 100%;
	margin: 0px auto 0px auto;
	display: grid;
	grid-gap: 10px;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(6, auto);
	grid-template-areas: "titulo titulo titulo titulo"
	                     "subtitulo subtitulo subtitulo subtitulo"				 
						 "tresA tresA tresA tresA"
	                     "cuatro cuatro cuatro cuatro"						 
	                     "tres tres tres tres"			 
	                     "dos dos dos dos";
}

.contenedor .titulo {grid-area:titulo;        display: flex; align-items: center; justify-content: center;}
.contenedor .titulo h2{grid-area:titulo; font-size:35px;      padding:20px 25px; }
.contenedor .titulo h3{grid-area:subtitulo; font-size:35px; padding:25px 25px;  }

.contenedor .subtitulo {grid-area:subtitulo;   display: flex; align-items: center; justify-content: center;}
.contenedor .subtitulo h3{grid-area:subtitulo; font-size:35px; padding:10px 25px;  }

.contenedor .cuatro {grid-area: cuatro;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(4, auto);
	grid-template-areas: "cuatro1 cuatro1 cuatro1 cuatro1"
	                     "cuatro2 cuatro2 cuatro2 cuatro2"
	                     "cuatro3 cuatro3 cuatro3 cuatro3"
	                     "cuatro4 cuatro4 cuatro4 cuatro4";
}
.contenedor .cuatro .cuatro1 {grid-area: cuatro1;	display: flex; align-items: center; justify-content: center; padding:15px 350px;}
.contenedor .cuatro .cuatro2 {grid-area: cuatro2;   display: flex; align-items: center; justify-content: center; padding:15px 40px;}
.contenedor .cuatro .cuatro3 {grid-area: cuatro3; 	display: flex; align-items: center; justify-content: center; padding:15px 40px;}
.contenedor .cuatro .cuatro4 {grid-area: cuatro4;	display: flex; align-items: center; justify-content: center; padding:15px 40px;}

.contenedor .tres {grid-area: tres;
	display: grid;
	padding:10px 100px; 
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(2, auto);
	grid-template-areas: "tres1 tres1 tres1 tres1"
	                     "tres2 tres2 tres2 tres2";
}
.contenedor .tres .tres1 {grid-area: tres1;	display: flex; align-items: center; justify-content: center;}
.contenedor .tres .tres2 {grid-area: tres2; display: flex; align-items: center; justify-content: center;}
.contenedor .tres .tres2 p{grid-area:tres2; font-size:30px; padding:10px 40px;  }
.contenedor .tres .tres1 h3{grid-area:tres1; font-size:20px;  }

.contenedor .tresA {grid-area: tresA;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(1, auto);
	grid-template-areas: "tresA1 tresA1 tresA1 tresA1";
	margin:0px 120px;
}
.contenedor .tresA .tresA1 {grid-area: tresA1;	display: flex; align-items: center; justify-content: center;}
.contenedor .tresA .tresA1 P{grid-area:tres2; font-size:20px; padding:10px 40px;  } 

.contenedor .dos {grid-area: dos;
	display: grid;
	font-size:20px;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(5, auto);
	grid-template-areas: "dos1 dos1 dos1 dos1"
	                     "dos2 dos2 dos2 dos2"
	                     "dos3 dos3 dos3 dos3"
	                     "dos4 dos4 dos4 dos4"
	                     "dos5 dos5 dos5 dos5";
}
.contenedor .dos .dos1 {grid-area: dos1;   display: flex; align-items: center; justify-content: center;}
.contenedor .dos .dos2 {grid-area: dos2;   display: flex; align-items: center; justify-content: center;}
.contenedor .dos .dos3 {grid-area: dos3;   display: flex; align-items: center; justify-content: center;}
.contenedor .dos .dos4 {grid-area: dos4;   display: flex; align-items: center; justify-content: center;}
.contenedor .dos .dos5 {grid-area: dos5;   display: flex; align-items: center; justify-content: center; padding:20px 10px;}
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
   .contenedor {
	width: 100%;
	margin: 0px auto 0px auto;
	display: grid;
	grid-gap: 10px;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(6, auto);
	grid-template-areas: "titulo titulo titulo titulo"
	                     "subtitulo subtitulo subtitulo subtitulo"
						 "tresA tresA tresA tresA"
	                     "cuatro cuatro cuatro cuatro"						 
	                     "tres tres tres tres"			 
	                     "dos dos dos dos"	;
}

.contenedor .titulo {grid-area:titulo;        display: flex; align-items: center; justify-content: center;}
.contenedor .titulo h2{grid-area:titulo; font-size:35px;      padding:20px 25px;}
.contenedor .titulo h3{grid-area:subtitulo; font-size:35px; padding:25px 25px;  }
.contenedor .titulo p{grid-area:subtitulo; font-size:35px; padding:25px 25px;  }

.contenedor .subtitulo {grid-area:subtitulo;   display: flex; align-items: center; justify-content: center;}
.contenedor .subtitulo h3{grid-area:subtitulo; font-size:35px; padding:10px 25px;  }
.contenedor .subtitulo p{grid-area:subtitulo; font-size:35px; padding:10px 25px;  }

.contenedor .cuatro {grid-area: cuatro;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(4, auto);
	grid-template-areas: "cuatro1 cuatro1 cuatro1 cuatro1"
	                     "cuatro2 cuatro2 cuatro2 cuatro2"
	                     "cuatro3 cuatro3 cuatro3 cuatro3"
	                     "cuatro4 cuatro4 cuatro4 cuatro4";
}
.contenedor .cuatro .cuatro1 {grid-area: cuatro1;	display: flex; align-items: center; justify-content: center; padding:15px 450px;}
.contenedor .cuatro .cuatro2 {grid-area: cuatro2;   display: flex; align-items: center; justify-content: center; padding:15px 40px;}
.contenedor .cuatro .cuatro3 {grid-area: cuatro3; 	display: flex; align-items: center; justify-content: center; padding:15px 40px;}
.contenedor .cuatro .cuatro4 {grid-area: cuatro4;	display: flex; align-items: center; justify-content: center; padding:15px 40px;}

.contenedor .tres {grid-area: tres;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(3, auto);
	grid-template-areas: "tres1 tres1 tres1 tres1"
	                     "tres2 tres2 tres2 tres2";
}
.contenedor .tres .tres1 {grid-area: tres1;	display: flex; align-items: center; justify-content: center; padding:5px 40px;}
.contenedor .tres .tres2 {grid-area: tres2; display: flex; align-items: center; justify-content: center;}
.contenedor .tres p{grid-area:tres2; font-size:10px; padding:10px 40px;  }
.contenedor .tres h3{grid-area:tres1; font-size:30px; padding:10px 25px;  }

.contenedor .tresA {grid-area: tresA;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(1, auto);
	grid-template-areas: "tresA1 tresA1 tresA1 tresA1";
	margin:0px 120px;
}
.contenedor .tresA .tresA1 {grid-area: tresA1;	display: flex; align-items: center; justify-content: center;}
.contenedor .tresA .tresA1 P{grid-area:tres2; font-size:20px; padding:10px 40px;  }


.contenedor .dos {grid-area: dos;
	display: grid;
	font-size:20px;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(5, auto);
	grid-template-areas: "dos1 dos1 dos1 dos1"
	                     "dos2 dos2 dos2 dos2"
	                     "dos3 dos3 dos3 dos3"
	                     "dos4 dos4 dos4 dos4"
	                     "dos5 dos5 dos5 dos5";
}
.contenedor .dos .dos1 {grid-area: dos1;   display: flex; align-items: center; justify-content: center;}
.contenedor .dos .dos2 {grid-area: dos2;   display: flex; align-items: center; justify-content: center;}
.contenedor .dos .dos3 {grid-area: dos3;   display: flex; align-items: center; justify-content: center;}
.contenedor .dos .dos4 {grid-area: dos4;   display: flex; align-items: center; justify-content: center;}
.contenedor .dos .dos5 {grid-area: dos5;   display: flex; align-items: center; justify-content: center; padding:20px 10px;}

 }