/*
Reglas para trabajar con CSS

1) Primero se definen los estilos para ETIQUETAS html. por ejemplo : header, footer, div, a, p, etc.

2) Despues se definen los estilos para IDENTIFICADORES (id), los id's son elementos unicos en el html,
   en el css se declaran con el simbolo de # ejemplo: #nombre-id{  estilos  } y en el html se llaman
   mediante el atributo id ejemplo :   <div id="publicidad"></div>
   
3) Al fnal se definen los estilos para las CLASES (class), las clases son elementos que se pueden
   repetir 'n' veces en el html, en el css se declaran con el simbolo de . ejemplo :   .nombre-clase{  estilos  }
   y en el html se llaman mediante el atributo class, ejemplo : <div class="borde-logos"></div> 

4) Todos los estilos se ordenan conforme van apareciendo en la disposicion del html, teniendo en cuenta
   la prioridad anterior, es decir, primero ETIQUETAS, luego IDENTIFICADORES y al final las CLASES

5) Los atributos se declaran de la siguiente forma : { atributo:valor1; atributo:valor2; ...atributoN:valorN; }

6) Todos los atributos se ordenan alfabeticamente, por ejemplo si tengo width, color, display
   entonces el orden seria primero color, luego display y al final width
   
7) Si tenemos estilos para el comodin *, o para las etiquetas html y/o body, estos estilos son los
   primeros en definirse. 

8) En el body debemos declarar un tamaņo de fuente global.

9) Si tenemos estilos para resetear elementos html, estos iran antes de cualquier estilo.

*/

/*   reseteo universal   */
* {
	border: 0;
	margin: 0;
	padding: 0;
}

@font-face {
    font-family: "Chalet";
    src: url("../fonts/Chalet.eot");	
    src: url("../fonts/Chalet.eot?#iefix") format("embedded-opentype"),	
         url("../fonts/Chalet.woff") format("woff"),
         url("../fonts/Chalet.ttf") format("truetype"),
         url("../fonts/Chalet.svg#Chalet") format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Pecita";
    src: url("../fonts/Pecita.eot");	
    src: url("../fonts/Pecita.eot?#iefix") format("embedded-opentype"),	
         url("../fonts/Pecita.woff") format("woff"),
         url("../fonts/Pecita.ttf") format("truetype"),
         url("../fonts/Pecita.svg#Chalet") format("svg");
    font-weight: normal;
    font-style: normal;
}

/*   16px = 12pt = 100% = 1em   */
body {
  	/*
  	background-color: #CCCCCC;   /* fondo plomo     
  	background-color: #fff;
  opacity: 1;
  z-index: 100;   /* recien lo use el 2015/10/06. por q' la galeria cuando roleaba se iva encima del titulo  
  	*/
  	width: 100%;
}

#wubi_raya {
  /*   cuadramos rayita roja, de acuerdo a la animacion. 2014-11-20   (ya no va la raya roja 2015-10-14)
  padding: 5px 5px 5px 5px;
  */
  margin: -4px 0px -10px 0px;
}

section#partebaja_seis_cuadros {
	/*
  	width: 98%;   
  	border-radius: 5px;
    margin: 10px 0px 10px -9px;
    margin: -4px 0px 10px -9px;
  	background-color: #fff;   
  	border-radius: 8px;
  	border-radius: 22px 22px 22px 22px;
    padding: 5px 5px 5px 5px;
    background-color: #fff;

    background: -webkit-gradient(linear, left top, left bottom, from(#34466D), to(#ffffff));
    background: -moz-linear-gradient(top,  #34466D,  #ffffff);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#D7E9F3', endColorstr='#ffffff');

    background: -webkit-gradient(linear, left top, left bottom, from(#000030), to(#ffffff));
    background: -moz-linear-gradient(top,  #000030,  #ffffff);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#000030', endColorstr='#ffffff');
    background: linear-gradient(to right,  #000030, #fff, #000030);
    background: linear-gradient(to right,  #CCCCCC, #fff, #CCCCCC);
    background: linear-gradient(to right,  #808080, #fff, #808080);
    background: linear-gradient(to right,  #000, #fff, #000);
	*/
	/*
    box-shadow: 5px 5px 5px 5px rgba(53,72,110,.5);
	*/
  	display:block;
	  width: 101.1%;   
    min-height: 60px;
	  margin: -9px 0px 10px -9px;
  /*
  z-index: 100;   /* recien lo use el 2015/10/06. por q' la galeria cuando roleaba se iva encima del titulo  
  */
}

section#trescuadros {
  /*
	  border-radius: 5px;

    background: -webkit-gradient(linear, left top, left bottom, from(#CCCCCC), to(#ffffff));
    background: -moz-linear-gradient(top,  #CCCCCC,  #ffffff);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#D7E9F3', endColorstr='#ffffff');

  	background-color: #424242;
    background-color: #CCCCCC;
    margin: 8px auto;
    padding: 16px 16px 16px 16px;   
    margin: 5px 0px 5px 0px;
  */
	  display:block;
  	margin: 5px 0px 5px 0px;
  	max-width: 97%;   /*	ancho del header (titulo)   */
    min-height: 100px;
  /*	
  */
    padding: 16px 32px 16px 32px;   
    text-align: center;
  /*  
  z-index: 100;   /* recien lo use el 2015/10/06. por q' la galeria cuando roleaba se iva encima del titulo  
  */
}

section#cuadro1, section#cuadro2, section#cuadro3 {
  /*	
    background: -webkit-gradient(linear, left top, left bottom, from(#34466D), to(#ffffff));
    background: -moz-linear-gradient(top,  #34466D,  #ffffff);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#D7E9F3', endColorstr='#ffffff');
  */
  	background-color: #fff;
  	border-radius: 8px;
  	display: inline-block;
  	width: 100%;
  /*	
  	min-height: 10em;	
  	min-height: 200px;	
  	min-height: 100px;	
    margin: 10px;
  */
    margin: 10px 5px 10px 5px;
    min-height: 300px;
    opacity: 1;
  /*	
    padding: 16px 16px 16px 16px;   
    padding: 8px 8px 8px 8px;   
    padding: 4px 4px 4px 4px;   
  */
  	vertical-align: top;      
  /*	vertical-align: middle;   */   /*  en medio del bloque  */
  /*	regresa a su sitio easy (lentamente)   */
    -ms-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
    -webkit-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
}

section#cuadro1 {
  /*
    width: 23%;	
    border-bottom: 3px solid #1345ED;    azul
  */
    border-bottom: 3px solid #DD4330;
    margin: 8px;
    padding: 4px 4px 4px 4px;   
    width: 25.7%;	
}

section#cuadro2 {
  /*
    width: 23%;	
  */
    border-bottom: 3px solid #03A010;
    margin: 8px;
    padding: 4px 4px 4px 4px;   
    width: 25.7%;	
}

section#cuadro3 {
  /*
    width: 23%;	
  */
    border-bottom: 3px solid #F8B00F;
    margin: 8px;
    padding: 4px 4px 4px 4px;   
    width: 25.7%;	
}

section#cuadro1:hover {
  /*
    opacity: 0.5;
  */
    opacity: 0.7;
    -webkit-transform: perspective(2200px) rotateY(25deg);
    -moz-transform: perspective(2200px) rotateY(25deg);
    -ms-transform: perspective(2200px) rotateY(25deg);
    -o-transform: perspective(2200px) rotateY(25deg);
    transform: perspective(2200px) rotateY(25deg);

  /*	se mueve a un costado easy (lentamente)   */
    -ms-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
    -webkit-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
}

section#cuadro2:hover {
  /*
  */
    opacity: 0.7;
    -webkit-transform: perspective(2200px) rotateY(25deg);
    -moz-transform: perspective(2200px) rotateY(25deg);
    -ms-transform: perspective(2200px) rotateY(25deg);
    -o-transform: perspective(2200px) rotateY(25deg);
    transform: perspective(2200px) rotateY(25deg);

  /*	se mueve a un costado easy (lentamente)   */
    -ms-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
    -webkit-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
}

section#cuadro3:hover {
  /*
  */
    opacity: 0.7;
    -webkit-transform: perspective(2200px) rotateY(25deg);
    -moz-transform: perspective(2200px) rotateY(25deg);
    -ms-transform: perspective(2200px) rotateY(25deg);
    -o-transform: perspective(2200px) rotateY(25deg);
    transform: perspective(2200px) rotateY(25deg);

  /*	se mueve a un costado easy (lentamente)   */
    -ms-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
    -webkit-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
}

section#cuadro4, section#cuadro5, section#cuadro6 {
  /*  
    background-color: #fff;
    min-height: 300px;
    height: 100%;
    min-height: 100%;
  */
    border-radius: 8px;
    display: inline-block;
    width: 100%;
    min-height: 100%;
    margin: 10px;
    vertical-align: top;      
    opacity: 1;

  /*  regresa a su sitio easy (lentamente)   */
    -ms-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
    -webkit-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
}

section#cuadro4 {
  /*
    width: 23%; 
  */
    background-color: #fff;
    border-bottom: 3px solid #DD4330;
    height: 450px;
    margin: 8px;
    padding: 4px 4px 4px 4px;   
    width: 25.7%; 
}

section#cuadro5 {
  /*
    width: 23%; 
  */
    background-color: #fff;
    border-bottom: 3px solid #03A010;
    margin: 8px;
    padding: 4px 4px 4px 4px;   
    width: 25.7%; 
}

section#cuadro6 {
  /*
    width: 23%; 
  */

  /*
    background-color: #424242;
    border-bottom: 3px solid #F8B00F;
    margin: 8px;
    padding: 4px 4px 4px 4px;   
    width: 25.7%; 
    background-color: #424242;
    border-bottom: 3px solid #F8B00F;
    height: 250%;

    height: 50%;       lo dejamos como estaba, 2023-04-14
    height: 100%;
  */
    height: 50%;
    width: 25.7%; 
}

section#cuadro7 {
  /*
    width: 23%; 
    width: 25.7%; 
    margin: 0px 0px 0px 0px;
    min-height: 100px;
    height: 220px;
    max-height: 1%;
    background-color: #000;
    min-height: 10%;
  */
    background-color: #fff;
    border-radius: 8px;
    border-bottom: 3px solid #F8B00F;
    min-height: 250%;
    padding: 4px 4px 4px 4px;   
    width: 100%;
  /*  regresa a su sitio easy (lentamente)   */
    -ms-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
    -webkit-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
}

section#cuadro8 {
  /*
    width: 23%; 
    width: 25.7%; 
    margin: 0px 0px 0px 0px;
    min-height: 100px;
    height: 200px;
    min-height: 30%;
    height: -5%;
    height: 180px;
    min-height: 5%;
    background-color: #000;
  */
    background-color: #fff;
    border-radius: 8px;
    border-bottom: 3px solid #DD4330;
    min-height: 30%;
    height: 180px;
    padding: 4px 4px 4px 4px;   
    width: 100%;
  /*  regresa a su sitio easy (lentamente)   */
    -ms-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
    -webkit-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
}

section#cuadro4:hover {
  /*
    opacity: 0.5;
  */
    opacity: 0.7;
    -webkit-transform: perspective(2200px) rotateY(25deg);
    -moz-transform: perspective(2200px) rotateY(25deg);
    -ms-transform: perspective(2200px) rotateY(25deg);
    -o-transform: perspective(2200px) rotateY(25deg);
    transform: perspective(2200px) rotateY(25deg);

  /*  se mueve a un costado easy (lentamente)   */
    -ms-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
    -webkit-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
}

section#cuadro5:hover {
  /*
  */
    opacity: 0.7;
    -webkit-transform: perspective(2200px) rotateY(25deg);
    -moz-transform: perspective(2200px) rotateY(25deg);
    -ms-transform: perspective(2200px) rotateY(25deg);
    -o-transform: perspective(2200px) rotateY(25deg);
    transform: perspective(2200px) rotateY(25deg);

  /*  se mueve a un costado easy (lentamente)   */
    -ms-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
    -webkit-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
}

/*
  section#cuadro6:hover {
    opacity: 0.7;
    -webkit-transform: perspective(2200px) rotateY(25deg);
    -moz-transform: perspective(2200px) rotateY(25deg);
    -ms-transform: perspective(2200px) rotateY(25deg);
    -o-transform: perspective(2200px) rotateY(25deg);
    transform: perspective(2200px) rotateY(25deg);


    -ms-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
    -webkit-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
}
*/


/*
*/
section#cuadro7:hover {
    opacity: 0.7;
    -webkit-transform: perspective(2200px) rotateY(25deg);
    -moz-transform: perspective(2200px) rotateY(25deg);
    -ms-transform: perspective(2200px) rotateY(25deg);
    -o-transform: perspective(2200px) rotateY(25deg);
    transform: perspective(2200px) rotateY(25deg);


    -ms-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
    -webkit-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
}

section#cuadro8:hover {
    opacity: 0.7;
    -webkit-transform: perspective(2200px) rotateY(25deg);
    -moz-transform: perspective(2200px) rotateY(25deg);
    -ms-transform: perspective(2200px) rotateY(25deg);
    -o-transform: perspective(2200px) rotateY(25deg);
    transform: perspective(2200px) rotateY(25deg);


    -ms-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
    -webkit-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
}

/*   se dice q' no es necesario
a:active {
	text-decoration: none;
}
*/

a:link {
	text-decoration: none;
}

a:visited {
	text-decoration: none;
}

/*
a:hover {
	text-decoration: none;
}
*/

.wtitulo30 {   /* raquete para manejar el margin. */
  /*
  */
    margin: -60px 10px -60px 10px;
}

.wtitulo31 {   /* raquete para manejar el margin. */
  /*
    margin: -60px 10px -60px 10px;
    margin: 10px 10px 10px 10px;
  */
}



body {
  /*
    font-family: 'Open Sans';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizelegibility;
  */
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    position: relative;
    height: 100%;
}
    
/*          inicio importante para los cuadros   2014-11-21       */
    
.tc_body .tc_card .tc_inner_card .tc_click_target {
    font-size: 20px;
    color: #888;
    line-height: 25px;
    font-weight: 300;
    text-align: left;
  /*
    padding: 30px 30px 30px 30px;
  */
}


/*          inicio de las nuevas cajas de texto  2014-11-20       */

.tc_front {
    min-height: 300px;
}
    
.tc_front h1 {
  /*
    font-size: 32px;
  */
    margin-top: 20px;
    font-size: 12px;
    text-align: left;
    margin-bottom: 35px;
}
    
.tc_front p {
  /*
    font-size: 24px;
  */
    text-align: left;
    min-height: 70px;
    font-size: 12px;
    line-height: 180%;
}

.tc_card:nth-child(1n+1) .tc_inner_card  {
    border-bottom: 3px solid #1345ED;
}
    
.tc_card:nth-child(2n+2) .tc_inner_card  {
    border-bottom: 3px solid #03A010;
}
    
.tc_card:nth-child(3n+3) .tc_inner_card  {
    border-bottom: 3px solid #F8B00F;
}
    
.tc_card:nth-child(4n+4) .tc_inner_card {
    border-bottom: 3px solid #DD4330;
}


.wtitulo {
  /*
    margin-top: 20px;
    font-size: 12px;
    text-align: left;
    margin-bottom: 35px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  */
    font-family: "noto serif";
    font-weight: bold;
    font-size: 20px;
    line-height: 100%;
    padding: 10px 20px 10px 20px;
  /*
    margin: 10px 10px 10px 10px;
    margin: 30px 30px 30px 30px;
  */
    text-align: left;
}

.wtitulo2 {
  /*
    color: #888;
    font-weight: bold;
    padding: 5px 20px 20px 20px;
  */
    color: red;
    font-family: "noto serif";
    font-size: 16px;
    line-height: 100%;
    padding: 0px 20px 0px 20px;
    text-align: left;
}

.wtitulo2_especial {
  /*
    color: #888;
    font-weight: bold;
  */
    color: red;
    font-family: "noto serif";
    font-size: 16px;
    line-height: 100%;
    padding: 22px 20px 20px 20px;
    text-align: left;
}

.wtitulo3 {
  /*
    padding: 5px 20px 20px 20px;
  */
    color: #888;
    font-family: "noto serif";
    font-size: 16px;
    line-height: 100%;
    padding: 5px 20px 5px 20px;
    text-align: left;
}

  .wmasinfo {
  /*
    padding: 5px 20px 20px 20px;
    color: #0000FF;
    margin: -50px 0px -20px 0px;
    font-size: 16px;
    margin: 5px 0px 0px -50px;
  */
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;   /*   Ver animacion   */
    font-size: 16px;
    line-height: 10%;
    margin: 5px 0px 0px -125px;
    text-align: left;
  }

  .wmasinfo:hover {
  /*
  */
    text-decoration: underline;
  }

  .resaltado {
  /*
  */
    color: red;
    font-size: 16px;
    line-height: 10%;
  }

  .noresaltado {
  /*
  */
    color: black;
    font-size: 14px;
    line-height: 10%;
  }

  .resaltadogranate {
  /*
    font-size: 16px;
  */
    color: #DE504F;
    line-height: 10%;
  }

#imagen_nos_01:hover {
    -webkit-transition: 3s;
    -webkit-transform: rotate3d(0,100,0, 90deg);
}


/*
#wubica_img_01 {
  background-image: url(../../cuadros_seis/media/imgs/paso1.jpg);
  border-radius: 8px;
  height: 150px;
  margin: 7px 15px 5px 45px;
  width: 70%;
}

#wubica_img_01:hover {
    -webkit-transition: 3s;
    -webkit-transform: rotate3d(0,100,0, 90deg);
}
*/
#wubica_img_04 {   /* Es la unica imagen que traigo desde el CSS, para poderla mover en el Responsive Design */
/*
  margin: 7px 15px 5px 45px;
<img src="cuadros_seis/media/imgs/paso2.jpg" style="border-radius:8px; margin: 15px 15px 32px 50px; width:70%; height:150px;" />
*/
  background-image: url(../../cuadros_seis/media/imgs/paso2.jpg);
  border-radius: 8px;
  height: 150px;
  margin: 15px 15px 32px 40px;
  width: 70%;
}


/*          fin de las nuevas cajas de texto  2014-11-20       */

/*	manejo de Responsive Web Design (media cuery)   */
/*     Anterior; tiene desde hasta.
@media screen and (min-width: 921px) and (max-width: 1080px) {   
}
*/
@media screen and (max-width: 1024px) {   /* Titulo de Color Negro */
  section#partebaja_seis_cuadros {
    /*
      width: 101.1%;   
      margin: -4px 0px 10px -9px;
      background: linear-gradient(to right,  #cb1d3e, #fff, #cb1d3e);
      background: linear-gradient(to right,  #808080, #fff, #808080); (lo pone el inicio_animacion.html)
    */
      display:block;
      width: 101.4%;   
      min-height: 60px;
      margin: -9px 0px 10px -9px;
  }

    section#cuadro1 {
      /*
        margin: 8px;
        height: 720px;
      */
        border-bottom: 3px solid #DD4330;
        margin: 8px 0px 8px 0px;
        height: 690px;
        padding: 4px 4px 4px 4px;   
        width: 25.7%; 
    }

    section#cuadro2 {
      /*
        min-height: 300px;
      */
        border-bottom: 3px solid #03A010;
        margin: 8px;
        height: 690px;
        padding: 4px 4px 4px 4px;   
        width: 25.7%; 
    }

    section#cuadro3 {
      /*
        height: 655px;
      */
        border-bottom: 3px solid #F8B00F;
        margin: 8px;
        height: 690px;
        padding: 4px 4px 4px 4px;   
        width: 25.7%; 
    }


    section#cuadro4 {
      /*
        height: 515px;
      */
        border-bottom: 3px solid #03A010;
        margin: 8px;
        height: 535px;
        padding: 4px 4px 4px 4px;   
        width: 25.7%; 
    }

    section#cuadro5 {
      /*
        min-height: 300px;
      */
        border-bottom: 3px solid #F8B00F;
        margin: 8px;
        height: 535px;
        padding: 4px 4px 4px 4px;   
        width: 25.7%; 
    }

    section#cuadro6 {
      /*
        background-color: #424242;
      */
        height: 50%;
        width: 25.7%; 
    }

    section#cuadro7 {
      /*
      */
        background-color: #fff;
        border-radius: 8px;
        border-bottom: 3px solid #F8B00F;
        height: 305px;
        padding: 4px 4px 4px 4px;   
        width: 100%;
      /*  regresa a su sitio easy (lentamente)   */
        -ms-transition: all 0.5s ease-in;
        -moz-transition: all 0.5s ease-in;
        -o-transition: all 0.5s ease-in;
        -webkit-transition: all 0.5s ease-in;
        transition: all 0.5s ease-in;
    }

    section#cuadro8 {
      /*
        height: 180px;
        height: 200px;
      */
        background-color: #fff;
        border-radius: 8px;
        border-bottom: 3px solid #DD4330;
        min-height: 30%;
        height: 210px;
        padding: 4px 4px 4px 4px;   
        width: 100%;
      /*  regresa a su sitio easy (lentamente)   */
        -ms-transition: all 0.5s ease-in;
        -moz-transition: all 0.5s ease-in;
        -o-transition: all 0.5s ease-in;
        -webkit-transition: all 0.5s ease-in;
        transition: all 0.5s ease-in;
    }

      .wmasinfo {
      /*
      */
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;   /*   Ver animacion   */
        font-size: 16px;
        line-height: 10%;
        margin: 5px 0px 0px -60px;
        text-align: left;
      }

      #wubica_img_04 {
      /*
      */
        background-image: url(../../cuadros_seis/media/imgs/paso2.jpg);
        border-radius: 8px;
        height: 150px;
        margin: 15px 15px 32px 15px;
        width: 85%;
      }

      .wtitulo3 {
        /*
        hoy
        */
          color: #888;
          font-family: "noto serif";
          font-size: 16px;
          line-height: 100%;
          margin: 0px 0px 0px 0px;
          padding: 5px 20px 20px 20px;
          text-align: left;
      }
}

@media screen and (max-width: 768px) {   /* Titulo de Color Rojo */
  section#partebaja_seis_cuadros {
    /*
      width: 101.4%;   
      margin: -4px 0px 10px -9px;
      background: linear-gradient(to right,  #808080, #fff, #808080);
    */
      display:block;
      width: 101.8%;   
      min-height: 60px;
      margin: -9px 0px 10px -9px;
  }

    section#cuadro1 {
      /*
        margin: 8px;
        margin: 8px 8px 8px 8px;
        padding: 4px 14px 14px 14px;   
        width: 25.7%; 
      */
        border-bottom: 3px solid #DD4330;
        margin: 4px 4px 4px 4px;
        height: 720px;
        padding: 2px 2px 2px 2px;   
        width: 30%; 
    }

    section#cuadro2 {
      /*
        width: 25.7%; 
      */
        border-bottom: 3px solid #03A010;
        margin: 4px 4px 4px 4px;
        min-height: 300px;
        padding: 2px 2px 2px 2px;   
        width: 30%; 
    }

    section#cuadro3 {
      /*
        width: 25.7%; 
      */
        border-bottom: 3px solid #F8B00F;
        margin: 4px 4px 4px 4px;
        height: 720px;
        padding: 2px 2px 2px 2px;   
        width: 30%; 
    }


    section#cuadro4 {
      /*
        margin: 8px;
        padding: 4px 4px 4px 4px;   
        width: 25.7%; 
      */
        border-bottom: 3px solid #03A010;
        margin: 4px 4px 4px 4px;
        height: 562px;
        padding: 2px 2px 2px 2px;   
        width: 30%; 
    }

    section#cuadro5 {
      /*
      */
        border-bottom: 3px solid #F8B00F;
        margin: 4px 4px 4px 4px;
        min-height: 300px;
        padding: 2px 2px 2px 2px;   
        width: 30%; 
    }

    section#cuadro6 {
      /*
        background-color: #424242;
      */
        margin: 4px 4px 4px 4px;
        height: 50%;
        width: 30%; 
    }

    section#cuadro7 {
      /*
        height: 380px;
      */
        background-color: #fff;
        border-radius: 8px;
        border-bottom: 3px solid #F8B00F;
        height: 318px;
        padding: 2px 2px 2px 2px;   
        width: 100%;
      /*  regresa a su sitio easy (lentamente)   */
        -ms-transition: all 0.5s ease-in;
        -moz-transition: all 0.5s ease-in;
        -o-transition: all 0.5s ease-in;
        -webkit-transition: all 0.5s ease-in;
        transition: all 0.5s ease-in;
    }

    section#cuadro8 {
      /*
        height: 180px;
      */
        background-color: #fff;
        border-radius: 8px;
        border-bottom: 3px solid #DD4330;
        height: 220px;
        padding: 2px 2px 2px 2px;   
        width: 100%;
      /*  regresa a su sitio easy (lentamente)   */
        -ms-transition: all 0.5s ease-in;
        -moz-transition: all 0.5s ease-in;
        -o-transition: all 0.5s ease-in;
        -webkit-transition: all 0.5s ease-in;
        transition: all 0.5s ease-in;
    }

    .wmasinfo {
      /*
        margin: 5px 0px 0px -125px;
      */
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;   /*   Ver animacion   */
      font-size: 16px;
      line-height: 10%;
      margin: 5px 0px 0px -30px;
      text-align: left;
    }


    #wubica_img_04 {
      /*
      */
      background-image: url(../../cuadros_seis/media/imgs/paso2.jpg);
      border-radius: 8px;
      height: 150px;
      margin: 15px 15px 32px 5px;
      width: 85%;
    }
}

@media screen and (max-width: 640px) {   /* Titulo de Color Azul */
  section#partebaja_seis_cuadros {
    /*
      width: 101.8%;   
      margin: -4px 0px 10px -9px;
      background: linear-gradient(to right,  #808080, #fff, #808080);
    */
      display:block;
      width: 102.2%;   
      min-height: 60px;
      margin: -9px 0px 10px -9px;
  }

    section#trescuadros {
      /*
        background-color: #424242;
        background-color: #CCCCCC;
        max-width: 97%;   /*  ancho del header (titulo)   
        padding: 16px 32px 16px 32px;   
      */
        display:block;
        margin: 5px 0px 5px 0px;
        max-width: 98%;   /*  ancho del header (titulo)   */
        min-height: 100px;
        padding: 4px 8px 4px 18px;   
        text-align: center;
    }

    section#cuadro1, section#cuadro2, section#cuadro3 {
      /*  
        margin: 10px 5px 10px 5px;
        padding: 4px 4px 4px 4px;   
      */
        background-color: #fff;
        border-radius: 8px;
        display: inline-block;
        width: 100%;
        margin: 5px 5px 5px 5px;
        min-height: 300px;
        opacity: 1;
        vertical-align: top;      
      /*  vertical-align: middle;   */   /*  en medio del bloque  */
      /*  regresa a su sitio easy (lentamente)   */
        -ms-transition: all 0.5s ease-in;
        -moz-transition: all 0.5s ease-in;
        -o-transition: all 0.5s ease-in;
        -webkit-transition: all 0.5s ease-in;
        transition: all 0.5s ease-in;
    }



    section#cuadro1 {
      /*
        margin: 8px;
        margin: 8px 8px 8px 8px;
        padding: 4px 14px 14px 14px;   
        width: 25.7%; 
        height: 781px;
      */
        border-bottom: 3px solid #DD4330;
        margin: 4px 4px 4px 4px;
        height: 950px;
        padding: 2px 2px 2px 2px;   
        width: 30.8%; 
    }

    section#cuadro2 {
      /*
        width: 25.7%; 
        min-height: 300px;
      */
        border-bottom: 3px solid #03A010;
        margin: 4px 4px 4px 4px;
        height: 950px;
        padding: 2px 2px 2px 2px;   
        width: 30.8%; 
    }

    section#cuadro3 {
      /*
        width: 25.7%; 
        height: 781px;
      */
        border-bottom: 3px solid #F8B00F;
        margin: 4px 4px 4px 4px;
        height: 950px;
        padding: 2px 2px 2px 2px;   
        width: 30.8%; 
    }


    section#cuadro4 {
      /*
        margin: 8px;
        padding: 4px 4px 4px 4px;   
        width: 25.7%; 
        height: 579px;
      */
        border-bottom: 3px solid #03A010;
        margin: 4px 4px 4px 4px;
        height: 680px;
        padding: 2px 2px 2px 2px;   
        width: 30.8%; 
    }

    section#cuadro5 {
      /*
        min-height: 300px;
      */
        border-bottom: 3px solid #F8B00F;
        margin: 4px 4px 4px 4px;
        height: 680px;
        padding: 2px 2px 2px 2px;   
        width: 30.8%; 
    }

    section#cuadro6 {
      /*
        background-color: #424242;
      */
        margin: 4px 4px 4px 4px;
        height: 50%;
        width: 30.8%; 
    }

    section#cuadro7 {
      /*
        height: 380px;
        height: 334px;
      */
        background-color: #fff;
        border-radius: 8px;
        border-bottom: 3px solid #F8B00F;
        height: 400px;
        padding: 2px 2px 2px 2px;   
        width: 100%;
      /*  regresa a su sitio easy (lentamente)   */
        -ms-transition: all 0.5s ease-in;
        -moz-transition: all 0.5s ease-in;
        -o-transition: all 0.5s ease-in;
        -webkit-transition: all 0.5s ease-in;
        transition: all 0.5s ease-in;
    }

    section#cuadro8 {
      /*
        height: 220px;
        height: 250px;
      */
        background-color: #fff;
        border-radius: 8px;
        border-bottom: 3px solid #DD4330;
        height: 260px;
        padding: 2px 2px 2px 2px;   
        width: 100%;
      /*  regresa a su sitio easy (lentamente)   */
        -ms-transition: all 0.5s ease-in;
        -moz-transition: all 0.5s ease-in;
        -o-transition: all 0.5s ease-in;
        -webkit-transition: all 0.5s ease-in;
        transition: all 0.5s ease-in;
    }

    #wubica_img_04 {
      /*
      */
      background-image: url(../../cuadros_seis/media/imgs/paso2.jpg);
      border-radius: 8px;
      height: 150px;
      margin: 0px 15px 32px 5px;
      width: 85%;
    }
}

@media screen and (max-width: 480px) {   /* Titulo de Color Azul */

  section#partebaja_seis_cuadros {
    /*
      width: 102.2%;   
      margin: -9px 0px 10px -9px;
      background: linear-gradient(to right,  #808080, #fff, #808080);
    */
      display:block;
      width: 102.9%;   
      min-height: 60px;
      margin: 0px 0px 10px -9px;
  }

    section#trescuadros {
      /*
        margin: 5px 0px 5px 0px;
      */
        display:block;
        margin: 15px 0px 5px 5px;
        max-width: 98%;   /*  ancho del header (titulo)   */
        min-height: 100px;
        padding: 1px 1px 1px 15px;   
        text-align: center;
    }

    section#cuadro1, section#cuadro2, section#cuadro3 {
      /*  
        margin: 0px 0px 0px 0px;
      */
        background-color: #fff;
        border-radius: 8px;
        display: inline-block;
        width: 100%;
        margin: 15px 0px 0px 0px;
        min-height: 300px;
        opacity: 1;
        vertical-align: top;      
      /*  vertical-align: middle;   */   /*  en medio del bloque  */
      /*  regresa a su sitio easy (lentamente)   */
        -ms-transition: all 0.5s ease-in;
        -moz-transition: all 0.5s ease-in;
        -o-transition: all 0.5s ease-in;
        -webkit-transition: all 0.5s ease-in;
        transition: all 0.5s ease-in;
    }



    section#cuadro1 {
      /*
        margin: 8px;
        margin: 8px 8px 8px 8px;
        margin: 4px 4px 4px 4px;
        margin: 2px 2px 2px 2px;
        padding: 4px 14px 14px 14px;   
        padding: 2px 2px 2px 2px;   
        width: 25.7%; 
      */
        border-bottom: 3px solid #DD4330;
        margin: 1px 1px 1px 1px;
        height: 730px;
        padding: 1px 1px 1px 1px;   
        width: 31.8%; 
    }

    section#cuadro2 {
      /*
        width: 25.7%; 
        min-height: 300px;
      */
        border-bottom: 3px solid #03A010;
        margin: 1px 1px 1px 1px;
        height: 730px;
        padding: 1px 1px 1px 1px;   
        width: 31.8%; 
    }

    section#cuadro3 {
      /*
        width: 25.7%; 
      */
        border-bottom: 3px solid #F8B00F;
        margin: 1px 1px 1px 1px;
        height: 730px;
        padding: 1px 1px 1px 1px;   
        width: 31.8%; 
    }


    section#cuadro4 {
      /*
        margin: 8px;
        padding: 4px 4px 4px 4px;   
        width: 25.7%; 
        height: 523px;
      */
        border-bottom: 3px solid #03A010;
        margin: 1px 1px 1px 1px;
        height: 545px;
        padding: 1px 1px 1px 1px;   
        width: 31.8%; 
    }

    section#cuadro5 {
      /*
        min-height: 300px;
      */
        border-bottom: 3px solid #F8B00F;
        margin: 1px 1px 1px 1px;
        height: 545px;
        padding: 1px 1px 1px 1px;   
        width: 31.8%; 
    }

    section#cuadro6 {
      /*
        background-color: #424242;
        margin: 4px 4px 4px 4px;
      */
        margin: 1px 1px 1px 1px;
        height: 50%;
        width: 31.8%; 
    }

    section#cuadro7 {
      /*
        height: 380px;
        height: 315px;
      */
        background-color: #fff;
        border-radius: 8px;
        border-bottom: 3px solid #F8B00F;
        height: 335px;
        padding: 2px 2px 2px 2px;   
        width: 100%;
      /*  regresa a su sitio easy (lentamente)   */
        -ms-transition: all 0.5s ease-in;
        -moz-transition: all 0.5s ease-in;
        -o-transition: all 0.5s ease-in;
        -webkit-transition: all 0.5s ease-in;
        transition: all 0.5s ease-in;
    }

    section#cuadro8 {
      /*
        height: 180px;
      */
        background-color: #fff;
        border-radius: 8px;
        border-bottom: 3px solid #DD4330;
        height: 190px;
        padding: 2px 2px 2px 2px;   
        width: 100%;
      /*  regresa a su sitio easy (lentamente)   */
        -ms-transition: all 0.5s ease-in;
        -moz-transition: all 0.5s ease-in;
        -o-transition: all 0.5s ease-in;
        -webkit-transition: all 0.5s ease-in;
        transition: all 0.5s ease-in;
    }



    .wtitulo {   /* Titulo */
      /*
        font-size: 20px;
        padding: 20px;
      */
        font-family: "noto serif";
        font-weight: bold;
        font-size: 18px;
        line-height: 100%;
        padding: 10px;
        text-align: left;
    }

    .wtitulo2 {   /* Sub-Titulo */
      /*
        font-size: 16px;
        padding: 5px 20px 20px 20px;
      */
        color: red;
        font-family: "noto serif";
        font-size: 14px;
        line-height: 100%;
        padding: 2px 10px 10px 10px;
        text-align: left;
    }

    .wtitulo2_especial {   /* Detalle */
      /*
      */
        color: red;
        font-family: "noto serif";
        font-size: 16px;
        line-height: 100%;
        padding: 22px 20px 20px 20px;
        text-align: left;
    }

    .wtitulo3 {   /* Detalle */
      /*
        font-size: 16px;
        padding: 5px 20px 20px 20px;
      */
        color: #888;
        font-family: "noto serif";
        font-size: 14px;
        line-height: 100%;
        padding: 2px 10px 10px 10px;
        text-align: left;
    }

    .wmasinfo {
    /*
      margin: 5px 0px 0px -125px;
    */
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;   /*   Ver animacion   */
      font-size: 12px;
      line-height: 10%;
      margin: 5px 0px 0px -30px;
      text-align: left;
    }

    #wubica_img_04 {
      /*
      */
      background-image: url(../../cuadros_seis/media/imgs/paso2.jpg);
      border-radius: 8px;
      height: 150px;
      margin: 0px 15px 32px 5px;
      width: 85%;
    }
}

@media screen and (max-width: 320px) {
    /*
      Titulo de Color Blanco
    */
    section#cuadro1 {
      /*
        margin: 1px 0px 1px 0px;
        width: 49.2%; 
      */
        border-bottom: 3px solid #DD4330;
        margin: 10px 0px 10px 0px;
        padding: 1px 0px 1px 0px;   
        height: 390px;
        width: 100%; 
    }

    section#cuadro2 {
      /*
        width: 49.2%; 
        min-height: 300px;
        margin: 1px 0px 1px 0px;
      */
        border-bottom: 3px solid #03A010;
        margin: 10px 0px 10px 0px;
        padding: 1px 0px 1px 0px;   
        height: 370px;
        width: 100%; 
    }

    section#cuadro3 {
      /*
        width: 49.2%; 
        margin: 1px 0px 1px -152px;
        height: 500px;
      */
        border-bottom: 3px solid #F8B00F;
        margin: 10px 0px 0px 0px;
        padding: 1px 0px 1px 0px;   
        height: 400px;
        width: 100%; 
    }


    section#cuadro4 {
      /*
        width: 49.2%; 
        margin: -513px 0px 1px 154px;
        height: 500px;
      */
        border-bottom: 3px solid #03A010;
        margin: 10px 0px 10px 0px;
        height: 350px;
        padding: 1px 0px 1px 0px;   
        width: 100%; 
    }

    section#cuadro5 {
      /*
        width: 49.2%; 
        margin: -24px 1px 15px 0px;
        height: 454px;
      */
        border-bottom: 3px solid #F8B00F;
        margin: 10px 1px 10px 0px;
        height: 360px;
        padding: 1px 0px 1px 1px;   
        width: 100%; 
    }

    section#cuadro6 {
      /*
        background-color: #424242;
        width: 48.4%; 
        margin: -24px 0px 1px 0px;
        height: 50%;
      */
        margin: 10px 0px 10px 0px;
        width: 100%; 
    }

    section#cuadro7 {
      /*
        height: 270px;
      */
        background-color: #fff;
        border-radius: 8px;
        border-bottom: 3px solid #F8B00F;
        height: 180px;
        padding: 2px 2px 2px 2px;   
        width: 100%;
      /*  regresa a su sitio easy (lentamente)   */
        -ms-transition: all 0.5s ease-in;
        -moz-transition: all 0.5s ease-in;
        -o-transition: all 0.5s ease-in;
        -webkit-transition: all 0.5s ease-in;
        transition: all 0.5s ease-in;
    }

    section#cuadro8 {
      /*
        height: 180px;
        margin: -13px 0px 1px 0px;
      */
        background-color: #fff;
        border-radius: 8px;
        border-bottom: 3px solid #DD4330;
        height: 160px;
        margin: 0px 0px 1px 0px;
        padding: 2px 2px 2px 2px;   
        width: 100%;
      /*  regresa a su sitio easy (lentamente)   */
        -ms-transition: all 0.5s ease-in;
        -moz-transition: all 0.5s ease-in;
        -o-transition: all 0.5s ease-in;
        -webkit-transition: all 0.5s ease-in;
        transition: all 0.5s ease-in;
    }


    .wtitulo {   /* Titulo */
      /*
        font-size: 20px;
        padding: 20px;
        font-size: 18px;
      */
        font-family: "noto serif";
        font-weight: bold;
        font-size: 14px;
        line-height: 100%;
        padding: 10px;
        text-align: left;
    }

    .wtitulo2 {   /* Sub-Titulo */
      /*
        font-size: 16px;
        padding: 5px 20px 20px 20px;
      */
        color: red;
        font-family: "noto serif";
        font-size: 14px;
        line-height: 100%;
        padding: 2px 10px 10px 10px;
        text-align: left;
    }

    .wtitulo2_especial {   /* Detalle */
      /*
      */
        color: red;
        font-family: "noto serif";
        font-size: 16px;
        line-height: 100%;
        padding: 22px 20px 20px 20px;
        text-align: left;
    }

    .wtitulo3 {   /* Detalle */
      /*
        font-size: 16px;
        padding: 5px 20px 20px 20px;
      */
        color: #888;
        font-family: "noto serif";
        font-size: 12px;
        line-height: 100%;
        padding: 2px 10px 10px 10px;
        text-align: left;
    }

    .resaltado {
    /*
    */
      color: red;
      font-size: 14px;
      line-height: 10%;
    }

    .wmasinfo {
    /*
      margin: 5px 0px 0px -125px;
    */
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;   /*   Ver animacion   */
      font-size: 12px;
      line-height: 10%;
      margin: 5px 0px 0px -15px;
      text-align: left;
    }

    #wubica_img_04 {
      /*
      */
      background-image: url(../../cuadros_seis/media/imgs/paso2.jpg);
      border-radius: 8px;
      height: 100px;
      margin: 35px 15px 32px 5px;
      width: 84%;
    }
}