/* Escribe aquí tu código CSS */

/* BLOQUE 1 */
.maq1 {width: 100%; padding: 7% 15%; float: left;}
h2.maq2 {text-align: center; color: #333;}
.maq3 {color: #cc3333;}
.maq4 {text-align: center;}

/* BLOQUE 2 */
.maq5 {width: 100%; background-color: #333; float: left;}
.maq6 {width: 50%; padding: 4% 3%; float: left;}
h3.maq7 {text-align: left; color: #fff;}
.maq8 {text-align: left; color: #fff;}
.maq9 {width: 50%; float: left;}
.cien {width:100%;}

/* BLOQUE 1/3 */
h3.maq10 {text-align: center;}
.maq11 {text-align: center;}

/* SERVICIO 1*/
.maq12 {width: 100%; background-color: #333; float: left;}
h3.maq13 {text-align: left; color: #fff;}
.maq14 {text-align: left; color: #fff;}

/* SERVICIO 2*/
.maq15 {width: 100%; background-color: #fff; float: left;}
h3.maq16 {text-align: left; color: #993333;}
.maq17 {text-align: left; color: #333;}

/* SERVICIO 3*/
.maq18 {width: 100%; background-color: #993333; float: left;}
h3.maq19 {text-align: left; color: #ccc;}

@media (max-width: 957px) {
/* BLOQUE 1 */
.maq1 {width: 100%; padding: 7% 5%; float: left;}
h2.maq2 {text-align: center; color: #333; font-size:1.5em;}
.maq3 {color: #cc3333;}
.maq4 {text-align: center;}

/* BLOQUE 2 */
.maq5 {width: 100%; background-color: #333; float: left;}
.maq6 {width: 100%; padding: 10% 3%; float: left;}
h3.maq7 {text-align: left; color: #fff; font-size:1.5em;}
.maq8 {text-align: left; color: #fff;}
.maq9 {width: 100%; float: left;}
.cien {width:100%;}

/* BLOQUE 1/3 */
h3.maq10 {text-align: center;}
.maq11 {text-align: center;}

/* SERVICIO 1*/
.maq12 {width: 100%; background-color: #333; float: left;}
h3.maq13 {text-align: left; color: #fff; font-size:1.5em;}
.maq14 {text-align: left; color: #fff; }

/* SERVICIO 2*/
.maq15 {width: 100%; background-color: #fff; float: left;}
h3.maq16 {text-align: left; color: #993333; font-size:1.5em;}
.maq17 {text-align: left; color: #333;}

/* SERVICIO 3*/
.maq18 {width: 100%; background-color: #993333; float: left;}
h3.maq19 {text-align: left; color: #ccc; font-size:1.5em;}
}