:root {
    --color-1: #c0c0c0;  /*celeste*/
	 --color-2: #55c5f1;   /* turquesa oscuro*/
	  --color-3: #abb38c;     /*gris*/
	   --color-4: #ddcf72;       /*celeste fondo over */
	    --color-5: #dbc84c;   /*celeste fondo over2*/
		 --color-6: #e1dab0;     /* azul */
		  --color-7: #f6d6ac;     /* fondito suave */
		   --color-8: #f5e2c9;     /* fondito más suave */
		     --color-9: #f49d21;     /* alerta */
			  --color-10: #b2a96d;     /* oscuro grisaceo */
			   --color-11: #f27e20;     /* oscuro grisaceo2 */
                --color-12: #c0d450;     /* oscuro grisaceo3 */
				 --color-13: #50d4c3;     /* oscuro grisaceo4 */
				  --color-14: #f2fabb;  /* fonndo suave*/
				   --color-15: #e5b371;     /* fondito suave intenso */
				    --color-16: #dd8bd4;     /* oscuro grisaceo5 */
					  --color-17: #d1dd67;     /* oscuro grisaceo6 */
					   --color-18: #0c43a7;     /* oscuro azul */
					    --color-19: #0c2453;     /* oscuro azul oscuro */
						--color-20: #afc3eb;     /*  azul claro */
						--color-21: #d6ddeb;     /*  azul mas claro */
						--color-22: #cfedf8;     /*  azul mas claro 2*/
						--color-23: #cd6d50;     /*  bordo 2*/
						--color-24: #0d388b;     /*  azul medio oscuro*/

}


<!-- TIPOGRAFIAS  -->
 
  .titulo3{
	   font-family: arial;
      color: black; 
 	 font-size: 1rem;
	 text-transform: none;
  }  
  .titulo4{
	   font-family: arial;
      color: black; 
 	 font-size: 2rem;
	 text-transform: none;
  }  
     .titulo5{
	   font-family: arial;
      color:var(--color-2); 
 	 font-size: 1.2rem;
	 text-transform: none;
	  font-weight: bold; 
	  text-align: center;
   justify-content: center;
   align-items: center;
  }
  .titulo6{
	   font-family: arial;
      color:var(--color-2);
 	 font-size: 0.8rem;
	 text-transform: none;
	 /* font-weight: bold;   */
	  text-align: center;
   justify-content: center;
   align-items: center;
  }
  .titulo7{
	   font-family: arial;
      color: var(--color-2);
 	 font-size: 0.6rem;
	 text-transform: none;
	 /* font-weight: bold;   */
	  text-align: center;
   justify-content: center;
   align-items: center;
  }
   .titulo8{
	   font-family: arial;
      color: var(--color-2);
 	 font-size: 2.5rem;
	 text-transform: none;
	  font-weight: bold; 
	  text-align: center;
   justify-content: center;
   align-items: center;
  }
  .titulo9{
	   font-family: arial;
      color: var(--color-2); 
 	 font-size: 2rem;
	 text-transform: none;
	  font-weight: bold; 
	  text-align: center;
   justify-content: center;
   align-items: center;
  }
    .titulo10{
	   font-family: arial;
      color: white; 
 	 font-size: 1rem;
	 text-transform: none;
	 text-align: center;
  }
  .titulo11{
	   font-family: arial;
      color: white; 
 	 font-size: 2rem;
	 text-transform: none;
	 text-align: center;
  }
  .titulo12{
	   font-family: arial;
      color: white; 
 	 font-size: 3rem;
	 text-transform: none;
	 text-align: center;
  }
   .titulo13{
	   font-family: arial;
      color: white; 
 	 font-size: 1rem;
	 text-transform: none;
	 text-align: center;
	   font-weight: bold; 
  }
  .titulo14{
	   font-family: arial;
      color: var(--color-2); 
 	 font-size: 2rem;
	 text-transform: none;
	 text-align: center;
	   font-weight: bold; 
  }
  .titulo15{
	   font-family: arial;
      color: white; 
 	 font-size: 3rem;
	 text-transform: none;
	 text-align: center;
	   font-weight: bold; 
  }
  .titulo16{
	   font-family: arial;
      color: var(--color-2); 
 	 font-size: 1.4rem;
	 text-transform: none;
	  font-weight: bold; 
	  text-align: center;
   justify-content: center;
   align-items: center;
  }
   .titulo17{
	   font-family: arial;
      color:black; 
 	 font-size: 1rem;
	 text-transform: none;
	  /*font-weight: bold; */
	  text-align: center;
   justify-content: center;
   align-items: center;
  }
  .titulo18{
	   font-family: arial;
      color: black; 
 	 font-size: 2rem;
	 text-transform: none;
	  
	  text-align: center;
   justify-content: center;
   align-items: center;
  }
  .titulo19{
	   font-family: arial;
      color: blue; 
 	 font-size: 1.4rem;
	 text-transform: none;
	  font-weight: bold; 
	  text-align: center;
   justify-content: center;
   align-items: center;
  }
 .titulo20{
	   font-family: arial;
      color:black; 
 	 font-size: 0.7rem;
	 text-transform: none;
	  /*font-weight: bold; */
	  text-align: center;
   justify-content: center;
   align-items: center;
  } 
  
  .titulo21{
	   font-family: arial;
      color:black; 
 	 font-size: 1.1rem;
	    font-weight: bold;
	 text-transform: none;
	  /*font-weight: bold; */
	  text-align: center;
   justify-content: center;
   align-items: center;
  } 
  .titulo22{
	   font-family: arial;
      color:black; 
 	 font-size: 0.7rem;
	 text-transform: none;
	  /*font-weight: bold; */
	  text-align: left;
   justify-content: center;
   align-items: center;
  }
  .titulo22{
	   font-family: arial;
      color: white; 
 	 font-size: 0.6rem;
	 text-transform: none;
	 text-align: center;
  }
  .titulo23{
	   font-family: arial;
      color:black; 
 	 font-size: 1.3rem;
	 text-transform: none;
	  /*font-weight: bold; */
	  text-align: center;
   justify-content: center;
   align-items: center;
  }
   .titulo24{
	   font-family: arial;
      color:black; 
 	 font-size: 0.7rem;
	 text-transform: none;
	  /*font-weight: bold; */
	  text-align: left;
   justify-content: center;
   align-items: center;
  } 
  .titulo25{
	   font-family: arial;
      color: black; 
 	 font-size: 1rem;
	 text-transform: none;
	 font-weight: bold; 
  } 
  .titulo26{
	   font-family: arial;
      color: black; 
 	 font-size: 3rem;
	 text-transform: none;
  }
   .titulo27{
	   font-family: arial;
      color: red; 
 	 font-size: 1rem;
	 text-transform: none;
  } 
  .titulo28{
	   font-family: arial;
      color: red; 
 	 font-size: 1.2rem;
	 text-transform: none;
  }
  .titulo29{
	   font-family: arial;
      color: red; 
 	 font-size: 1.5rem;
	 text-transform: none;
  }  
    
   
<!-- FIN TIPOGRAFIAS  -->
		
 <!-- BOTONES  -->
 .botonera{
	  font-family:Verdana,Helvetica;
    text-decoration: none;
    border: none;
    font-family: arial;
    height:1.9rem; 
	 font-size: 0.8rem;
    color: white;
    background-color: var(--color-3);
	align: center;
  }
  .botonera:hover{
    color: blue;
    background-color: var(--color-4);
    text-decoration: none;
   border: none;
  }	
   
 .boton1{
	  
        font-family:Verdana,Helvetica;
        color:white;
        border:0px;
		 background-color: var(--color-1);
        width:100%;
        height:4rem; 
	 font-size: 1.4rem; 
	align: center;
	max-width: 400px;
	align: center;
	
  }
  .boton1:hover{
    color: #9b0e0e;
    background-color: gray;
    text-decoration: none;
	    border: none;
  }
   .boton2{
	  
        font-family:Verdana,Helvetica;
        color:white;
        border:0px;
		 background-color: var(--color-2);
        width:100%;
        height:4rem; 
	 font-size: 1.4rem; 
	align: center;
	max-width: 400px;
	align: center;
  }
  .boton2:hover{
    color: #9b0e0e;
    background-color: gray;
    text-decoration: none;
	    border: none;
  }
   .boton3{
	  
        font-family:Verdana,Helvetica;
        color:white;
        border:0px;
		 background-color: var(--color-5);
        width:100%;
        height:2rem; 
	 font-size: 1.4rem; 
	align: center;
	max-width: 400px;
	align: center;
  }
  .boton3:hover{
    color: #9b0e0e;
    background-color: var(--color-4);
    text-decoration: none;
	    border: none;
  }
  .boton4{
	  
        font-family:Verdana,Helvetica;
        color:white;
        border:0px;
		 background-color: var(--color-5);
        width:20%;
        height:1.4rem; 
	 font-size: 0.7rem; 
	align: center;
	max-width: 100px;
  }
  .boton4:hover{
    color: #9b0e0e;
    background-color: var(--color-4);
    text-decoration: none;
	    border: none;
  }
   .boton5{
	  
        font-family:Verdana,Helvetica;
        color:white;
        border:0px;
		 background-color: var(--color-10);
        width:10%;
        height:1.4rem; 
	 font-size: 0.7rem; 
	align: center;
	max-width: 100px;
  }
  .boton5:hover{
    color: #9b0e0e;
    background-color: var(--color-4);
    text-decoration: none;
	    border: none;
  }
  
  .boton6{
	  
        font-family:Verdana,Helvetica;
        color:white;
        border:0px;
		 background-color: #3199c2;
        width:80%;
        height:2rem; 
	 font-size: 0.7rem; 
	align: center;
	max-width: 300px;
  }
  .boton6:hover{
    color: white;
    background-color: gray;
    text-decoration: none;
	    border: none;
  }
  .boton7{	  
        font-family:Verdana,Helvetica;
        color: black;
        border:0px;
		 background-color: var(--color-15);
        width:80%;
        height:1.4rem; 
	 font-size: 0.7rem; 
	align: center;
	max-width: 300px;
  }
  .boton7:hover{
    color: #9b0e0e;
    background-color: var(--color-4);
    text-decoration: none;
	    border: none;
  }
   .boton8{	  
        font-family:Verdana,Helvetica;
        color: black;
        border:0px;
		 background-color: orange;
        width:80%;
        height:1rem; 
	 font-size: 0.6rem; 
	align: center;
	max-width: 300px;
  }
  .boton8:hover{
    color: #9b0e0e;
    background-color: var(--color-4);
    text-decoration: none;
	    border: none;
  }
   
  .boton9{
	  
        font-family:Verdana,Helvetica;
        color:white;
        border:0px;
		 background-color: #377993;
        width:80%;
        height:3rem; 
	 font-size: 0.7rem; 
	align: center;
	max-width: 300px;
  }
  .boton9:hover{
    color: white;
    background-color: gray;
    text-decoration: none;
	    border: none;
  }
  .boton_alerta{
	  
        font-family:Verdana,Helvetica;
        color:white;
        border:0px;
		 background-color: var(--color-9);
        width:80%;
        height:1.4rem; 
	 font-size: 0.7rem; 
	align: center;
	max-width: 300px;
  }
  .boton_alerta:hover{
    color: #9b0e0e;
    background-color: var(--color-4);
    text-decoration: none;
	    border: none;
  }
.boton1-form{
	   border-color: rgb(38, 126, 137);
    box-shadow: 0 1px 1px rgba(229, 103, 23, 0.075)inset, 0 0 8px rgba(255,144,0,0.6);
    outline: 0 none;
        font-family:Verdana,Helvetica;
       /* font-weight:bold;*/
        color:var(--color-2);
        border:2px;
	 background-color: white;
        width:100%;
        height:2rem; 
	 font-size: 1.3rem; 
	align: center;
	max-width: 400px;
	align: center;
  }
      
   .boton2-form{
	   border-color: rgb(38, 126, 137);
    box-shadow: 0 1px 1px rgba(229, 103, 23, 0.075)inset, 0 0 8px rgba(255,144,0,0.6);
    outline: 0 none;
        font-family:Verdana,Helvetica;
       /* font-weight:bold;*/
        color:var(--color-2);
        border:2px;
	 background-color: white;
        width:100%;
        /*height:10rem;  */
	 font-size: 0.8rem; 
	align: center;
	max-width: 400px;
	align: center;
  }
  .boton3-form{
	   border-color: gray;
    box-shadow: 0 1px 1px rgba(214, 0, 235, 0.075)inset, 0 0 8px rgba(214,221,0,0.6);
    outline: 1 none;
        font-family:Verdana,Helvetica;
       /* font-weight:bold;*/
        color:var(--color-19);
        border:2px;
	 background-color: white;
        width:98%;
     height:1.6rem;
	 font-size: 1rem; 
	align: center;
	max-width: 900px;
	align: center;
  }
  .boton4-form{
	   border-color: rgb(38, 126, 137);
    box-shadow: 0 3px 1px rgba(229, 103, 23, 0.075)inset, 0 0 8px rgba(255,144,0,0.6);
    outline: 0 none;
        font-family:Verdana,Helvetica;
       /* font-weight:bold;*/
        color:var(--color-19);
        border:2px;
	 background-color: white;
        width:100%;
        height:1.1rem; 
	 font-size: 0.9rem; 
	align: center;
	max-width: 500px;
	align: center;
  }
   .boton5-form{
	   border-color: rgb(38, 126, 137);
    box-shadow: 0 3px 1px rgba(229, 103, 23, 0.075)inset, 0 0 8px rgba(255,144,0,0.6);
    outline: 0 none;
        font-family:Verdana,Helvetica;
       /* font-weight:bold;*/
        color:var(--color-19);
        border:2px;
	 background-color: white;
        width: 100%;
        height:2rem; 
	 font-size: 1.2rem; 
	align: center;
	max-width: 300px;
	align: center;
  }   
  .boton_ver{
    text-decoration: none;
    border: none;

    font-family: arial;
     padding-left: 10px;
    padding-right: 10px;
     width: 5rem;
	 hight: 3rem;
    font-size: 0.8rem;
    color: white;
    background-color: var(--color-2);
	align: center;
  }
  .boton_ver:hover{
     color: #9b0e0e;
    background-color: var(--color-4);
    text-decoration: none;
	    border: none;
  }	 
  .boton8{
	  
        font-family:Verdana,Helvetica;
        color:white;
        border:0px;
		 background-color: var(--color-2);
        width:100%;
        height:4rem; 
	 font-size: 1.4rem; 
	align: center;
	max-width: 700px;
	align: left;
	  text-align: center;
   justify-content: center;
   align-items: center;
	
  }
  .boton8:hover{
    color: #9b0e0e;
    background-color: var(--color-4);
    text-decoration: none;
	    border: none;
  }
  .boton9{
	  
        font-family:Verdana,Helvetica;
        color:white;
        border:0px;
		 background-color: var(--color-18);
       /* width:20%;*/
        height:1rem; 
	 font-size: 0.7rem; 
	align: center;
text-align: center;
line-height: 1rem;
   vertical-align: middle;
  /* padding: 0.5% 0;*/
    }
   
  .boton9:hover{
    color: #9b0e0e;
    background-color: var(--color-20);
    text-decoration: none;
	    border: none;
  }
   .boton10{
	  
        font-family:Verdana,Helvetica;
        color:white;
        border:0px;
		 background-color: var(--color-19);
        width:10%;
        height:1.4rem; 
	 font-size: 0.7rem; 
	align: center;
	max-width: 100px;
  }
  .boton10:hover{
    color: #9b0e0e;
    background-color: var(--color-20);
    text-decoration: none;
	    border: none;
  }
   .boton11{
	  
        font-family:Verdana,Helvetica;
        color:white;
        border:0px;
		 background-color: var(--color-19);
        width:80%;
        height:1.4rem; 
	 font-size: 0.7rem; 
	align: center;
	max-width: 300px;
  }
  .boton11:hover{
    color: #9b0e0e;
    background-color: var(--color-20);
    text-decoration: none;
	    border: none;
  }
  .boton12{
	  
        font-family:Verdana,Helvetica;
        color:white;
        border:0px;
		 background-color: var(--color-24);
        width:100%;
        height:4rem; 
	 font-size: 1.4rem; 
	align: center;
	max-width: 700px;
	align: left;
	  text-align: center;
   justify-content: center;
   align-items: center;
	
  }
  .boton12:hover{
    color: black;
    background-color: var(--color-16);
    text-decoration: none;
	    border: none;
  }
   .boton13{
	  
        font-family:Verdana,Helvetica;
        color:black;
        border:0px;
		 background-color: var(--color-20);
        width:4.8rem;
        height:1.6rem; 
	 font-size: 0.7rem; 
	align: center;
	/*max-width: 400px;*/
  }
  .boton13:hover{
    color: #9b0e0e;
    background-color: var(--color-21);
    text-decoration: none;
	    border: none;
  }
  .boton14{
	  
        font-family:Verdana,Helvetica;
        color:black;
        border:0px;
		 background-color: var(--color-19);
        width:7rem;
        height:2.2rem; 
	 font-size: 0.7rem; 
	align: center;
	/*max-width: 400px;*/
	align: center;
	display: flex;
   justify-content: center;
   align-items: center;
  }
  .boton14:hover{
    color: #9b0e0e;
    background-color: var(--color-21);
    text-decoration: none;
	    border: none;
  }
  .boton15{
	  
        font-family:Verdana,Helvetica;
        color:black;
        border:0px;
		 background-color: var(--color-24);
        width:7rem;
        height:2.2rem; 
	 font-size: 0.7rem; 
	align: center;
	/*max-width: 400px;*/
	align: center;
	display: flex;
   justify-content: center;
   align-items: center;
  }
  .boton15:hover{
    color: #9b0e0e;
    background-color: var(--color-21);
    text-decoration: none;
	    border: none;
  }
  .boton16{
	  
        font-family:Verdana,Helvetica;
        color:white;
        border:0px;
		 background-color: var(--color-18);
       /* width:20%;*/
        height:1rem; 
	 font-size: 0.7rem; 
	align: center;
text-align: center;
line-height: 1rem;
   vertical-align: middle;
  /* padding: 0.5% 0;*/
    }
   
  .boton16:hover{
    color: #9b0e0e;
    background-color: var(--color-22);
    text-decoration: none;
	    border: none;
  }
   .boton17{
	  
        font-family:Verdana,Helvetica;
        color:white;
        border:0px;
		 background-color: var(--color-21);
        width:10%;
        height:1.4rem; 
	 font-size: 0.7rem; 
	align: center;
	max-width: 100px;
  }
  .boton17:hover{
    color: #9b0e0e;
    background-color: var(--color-20);
    text-decoration: none;
	    border: none;
  }
  
   .boton18{
	  
        font-family:Verdana,Helvetica;
        color:black;
        border:0px;
		 background-color: white;
        width:20%;
        height:1.4rem; 
	 font-size: 0.7rem; 
	align: center;
	max-width: 100px;
  }
  .boton18:hover{
    color: #dddbcf;
    background-color: var(--color-4);
    text-decoration: none;
	    border: none;
  }
   .boton19{
	  
        font-family:Verdana,Helvetica;
        color:black;
        border:0px;
		 background-color:white;
        width:10%;
        height:1.4rem; 
	 font-size: 0.7rem; 
	align: center;
	max-width: 100px;
  }
  .boton19:hover{
    color: #dddbcf;
    background-color: var(--color-4);
    text-decoration: none;
	    border: none;
  }
  .boton20{
	  
        font-family:Verdana,Helvetica;
        color:white;
        border:0px;
		 background-color: var(--color-2);
        width:100%;
        height:1.5rem; 
	 font-size: 0.8rem; 
	align: center;
	max-width: 80px;
	align: center;
	
  }
  .boton20:hover{
    color: black;
    background-color:  #3399FF;
    text-decoration: none;
	    border: none;
  }
  .boton20:active{
	   border:0px;
    color: white;
    background-color:  #3399FF;
    text-decoration: none;
	    border: none;
  }
  .boton20:visited{
	   border:0px;
    color: white;
    background-color:  #3399FF;
    text-decoration: none;
	    border: none;
  }
  .boton21{
	  
        font-family:Verdana,Helvetica;
        color:white;
        border:0px;
		 background-color: orange;
        width:100%;
        height:1.5rem; 
	 font-size: 0.8rem; 
	align: center;
	max-width: 180px;
	align: center;
	
  }
  .boton21:hover{
    color: black;
    background-color:  yellow;
    text-decoration: none;
	    border: none;
  }
  .boton22{
	  
        font-family:Verdana,Helvetica;
        color:white;
        border:0px;
		 background-color: var(--color-2);
        width:100%;
        height:1.5rem; 
	 font-size: 0.8rem; 
	align: center;
	max-width: 180px;
	align: center;
	
  }
  .boton22:hover{
    color: black;
    background-color:  #3399FF;
    text-decoration: none;
	    border: none;
  }
   .boton23{
	  
        font-family:Verdana,Helvetica;
        color:white;
        border:0px;
		 background-color:red;
        width:100%;
        height:4rem; 
	 font-size: 1.4rem; 
	align: center;
	max-width: 400px;
	align: center;
	
  }
  .boton23:hover{
    color: #9b0e0e;
    background-color: gray;
    text-decoration: none;
	    border: none;
  }
  
  .boton24{
	  
        font-family:Verdana,Helvetica;
        color:white;
        border:0px;
		 background-color:#CCCCCC;
        width:250px;
        height:1.4rem; 
	 font-size: 0.8rem; 
	align: center;
	/*max-width: 400px; */
	align: center;
	
  }
  .boton24:hover{
    color: #9b0e0e;
    background-color: gray;
    text-decoration: none;
	    border: none;
  }
   <!-- FIN  BOTONES  -->


<!-- RECTANGULOS  -->
.rectangulo1{
	  font-family:Verdana,Helvetica;
	  	 font-size: 1.4rem;
		 color: white;
	align: center ;
	width:100%;
	  height:4rem;  
	 background-color: var(--color-5);
	 max-width: 400px;
	 display: flex;
   justify-content: center;
   align-items: center;
  }
  .rectangulo2{
	  font-family:Verdana,Helvetica;
	  	 font-size: 1.4rem;
		 color: white;
	align: center ;
	width:100%; 
	  height:4rem; 
	 background-color: var(--color-2);
	 max-width: 400px;
	 display: flex;
   justify-content: center;
   align-items: center;
  }
  .rectangulo3{
	  font-family:Verdana,Helvetica;
	  	 font-size: 1.4rem;
		 color: white;
	align: center ;
	width:100%; 
	  height:4rem; 
	 background-color: var(--color-3);
	 max-width: 400px;
	 display: flex;
   justify-content: center;
   align-items: center;
  }
  .rectangulo4{
	  font-family:Verdana,Helvetica;
        color:white;
        border:0px;
		 background-color: var(--color-5);
        width:100%;
        height:4rem; 
	 font-size: 1.4rem; 
	align: center;
	max-width: 400px;
	align: center;
	display: flex;
   justify-content: center;
   align-items: center;
  }
  .rectangulo5{
	    font-family: arial;
      color: var(--color-2);
 	 font-size: 1rem;
	    padding-left: 10px;
    padding-right: 10px;
	align: center ;
	width:96%; 
	
	 background-color: var(--color-8);
  }
  .rectangulo6{
	   font-family: arial;
      color: var(--color-2);
 	 font-size: 1rem;
	    padding-left: 10px;
    padding-right: 10px;
	align: center ;
	width:96%; 
	
	 background-color: white;
  }
  .rectangulo7{
	    font-family: arial;
      color: white;
 	 font-size: 1rem;
	    padding-left: 10px;
    padding-right: 10px;
	align: center ;
	width:96%;
	
	 background-color: var(--color-2);
  }
   .rectangulo8{
	  font-family:Verdana,Helvetica;
        color:white;
        border:0px;
		 background-color: var(--color-5);
        width:100%;
        height:8rem; 
	 font-size: 1.4rem; 
	align: center;
	max-width: 400px;
	align: center;
	display: flex;
   justify-content: center;
   align-items: center;
  }
  .rectangulo9{
	  font-family:Verdana,Helvetica;
	  	 font-size: 1.4rem;
		 color: white;
	align: center ;
	width:100%;
	  height:4rem;  
	 background-color: var(--color-10);
	 display: flex;
   justify-content: center;
   align-items: center;
  }
  .rectangulo10{
	  font-family:Verdana,Helvetica;
	  	 font-size: 1.4rem;
		 color: white;
	align: center ;
	width:100%;
	  height:4rem;  
	 background-color: var(--color-2);
	 display: flex;
   justify-content: center;
   align-items: center;
  }
   .rectangulo11{
	  font-family:Verdana,Helvetica;
	  	 font-size: 1.4rem;
		 color: white;
	align: center ;
	width:100%;
	  height:4rem;  
	 background-color: var(--color-11);
	 display: flex;
   justify-content: center;
   align-items: center;
  }
   .rectangulo12{
	  font-family:Verdana,Helvetica;
	  	 font-size: 1.4rem;
		 color: white;
	align: center ;
	width:100%;
	  height:4rem;  
	 background-color: var(--color-12);
	 display: flex;
   justify-content: center;
   align-items: center;
  }
  .rectangulo13{
	  font-family:Verdana,Helvetica;
	  	 font-size: 1.4rem;
		 color: white;
	align: center ;
	width:100%;
	  height:4rem;  
	 background-color: var(--color-13);
	 display: flex;
   justify-content: center;
   align-items: center;
  }
  .rectangulo14{
	  
	  
	   font-family: arial;
      color: black;
 	 font-size: 1rem;
	    padding-left: 10px;
    padding-right: 10px;
	align: center ;
	width:96%; 
	background-color: var(--color-14);
	 

  }
   .rectangulo15{
	  font-family:Verdana,Helvetica;
	  	 font-size: 1.4rem;
		 color: white;
	align: center ;
	width:100%;
	  height:4rem;  
	 background-color: var(--color-16);
	 display: flex;
   justify-content: center;
   align-items: center;
  }
   .rectangulo16{
	  font-family:Verdana,Helvetica;
	  	 font-size: 1.4rem;
		 color: white;
	align: center ;
	width:100%;
	  height:4rem;  
	 background-color: var(--color-17);
	 display: flex;
   justify-content: center;
   align-items: center;
  }
   .rectangulo17{
	   display: flex;
   align-items: center;
	  font-family:Verdana,Helvetica;
		 color: white;
	width:100%;
	 height:3rem;  
	 background-color: #3199c2;
	 display: flex;
   justify-content: center;
   align-items: left;   
	 font-size: 1.3rem; 
	align: center;
  }
   .rectangulo18{
	  font-family:Verdana,Helvetica;
	  	 font-size: 0.8rem;
		 color: black;
	align: left ;
	width:100%;
	 /* height:4rem;  */
	 background-color: var(--color-21);
	 display: flex;
   justify-content: center;
   align-items: center;
  }
  .rectangulo19{
	  font-family:Verdana,Helvetica;
	  	 font-size: 1rem;
		 color: black;
	align: left ;
	width:100%;
	  height:2rem;  
	 background-color: var(--color-20);
	 display: flex;
   justify-content: center;
   align-items: center;
  }
  .rectangulo20{
	  font-family:Verdana,Helvetica;
	  	 font-size: 0.8rem;
		 color: black;
	align: left ;
	width:100%;
	 /* height:4rem;  */
	 background-color: var(--color-22);
	 display: flex;
   justify-content: center;
   align-items: center;
  }
  .rectangulo21{
	  font-family:Verdana,Helvetica;
	  	 font-size: 1rem;
		 color: black;
	align: left ;
	width:100%;
	  height:2rem;  
	 background-color: var(--color-21);
	 display: flex;
   justify-content: center;
   align-items: center;
  }
  .rectangulo22{
	  font-family:Verdana,Helvetica;
	  	 font-size: 1rem;
		 color: black;
	align: left ;
	width:100%;
	  height:2rem;  
	 background-color: var(--color-22);
	 display: flex;
   justify-content: center;
   align-items: center;
  }
  .rectangulo23{
	  font-family:Verdana,Helvetica;
	  	 font-size: 2.5rem;
		 color: white;
		 font-weight: bold;
	align: center ;
	width:100%;
	  height:6rem;  
	 background-color: var(--color-23);
	 display: flex;
   justify-content: center;
   align-items: center;
  }
  .rectangulo24{
	  font-family:Verdana,Helvetica;
	  	 font-size: 1.2rem;
		 color: white;
	align: center ;
	width:100%;
	 /* height:4rem;  */
	 background-color: var(--color-2);
	 display: flex;
   justify-content: center;
   align-items: center;
  }
  .rectangulo25{
	  font-family:Verdana,Helvetica;
        color:black;
        border:0px;
		 background-color: var(--color-22);
        width:100%;
       /* height:8rem; */
	 font-size: 1rem; 
	align: center;
	max-width: 800px;
	align: center;
	display: flex;
   justify-content: center;
   align-items: center;
  }
  .rectangulo26{
	  font-family:Verdana,Helvetica;
	  	 font-size: 1rem;
		 color:  white;
	align: center ;
	width:100%;
	  height:2.5rem;  
	 background-color: var(--color-19);
	 display: flex;
   justify-content: center;
   align-items: center;
  }
  .rectangulo27{
	  font-family:Verdana,Helvetica;
	  	 font-size: 1rem;
		 color:  white;
	align: center ;
	width:100%;
	  height:2.5rem;  
	 background-color: var(--color-24);
	 display: flex;
   justify-content: center;
   align-items: center;
  }
  .rectangulo28{
	  font-family:Verdana,Helvetica;
	  	 font-size: 0.8rem;
		 color: black;
	align: center ;
	width:100%;
	 /* height:6rem;  */
		 background-color: var(--color-5);
	 display: flex;
   justify-content: center;
   align-items: center;
  }
  .rectangulo29{
	  font-family:Verdana,Helvetica;
	  	 font-size: 0.8rem;
		 color: white;
	align: center ;
	width:100%;
	  height:2rem;  
	 background-color: var(--color-11);
	 display: flex;
   justify-content: center;
   align-items: center;
  }
   .rectangulo30{
	  font-family:Verdana,Helvetica;
	  	 font-size: 1.4rem;
		 color: white;
	align: center ;
	width:100%;
	  height:4rem;  
	 background-color: #3199c2;
	 display: flex;
   justify-content: center;
   align-items: center;
  }
  
  .rectangulo31{
	  font-family:Verdana,Helvetica;
	  	 font-size: 1.2em;
		 color: white;
	align: center ;
	width:100%;
	  height:2em;  
	 background-color: #0EA8E2;
	 display: flex;
   justify-content: center;
   align-items: center;
  }
  .rectangulo32{
	  padding: 5px;
	  font-family:Verdana,Helvetica;
	  	 font-size: 0.8em;
		 color: black;
	align: left ;
	width:100%;
	  height:4em;  
	 background-color: #C9EEFC;
	 display: flex;
   justify-content: left;
   align-items: center;
  }
  
  .rectangulo33{
	 float: center;
  width: 100%;
  color: gray;
   background-color: white;
   border: 1px solid black;
  align:center;
  text-align:center;
  font-size: 1rem; 
  height:6em;
 display: flex;
   justify-content: center;
   align-items: center;  }
   
   
   .rectangulo34{
	  padding: 5px;
	  font-family:Verdana,Helvetica;
	  	 font-size: 0.8em;
		 color: black;
	align: left ;
	width:100%;
	  height:4em;  
	 background-color: #FFDF9D;
	 display: flex;
   justify-content: left;
   align-items: center;
  }
  .rectangulo35{
	  padding: 5px;
	  font-family:Verdana,Helvetica;
	  	 font-size: 0.8em;
		 color: black;
	align: left ;
	width:100%;
	  height:4em;  
	 background-color: #E2E4E7;
	 display: flex;
   justify-content: left;
   align-items: center;
  }
  
  .rectangulo36{
	  font-family:Verdana,Helvetica;
	  	 font-size: 1.1rem;
		 color: black;
	align: center ;
	width:100%;
	  height:6rem;
	  padding: 10px;
	     border: 2px solid black; 
	 background-color: white;
	/* max-width: 400px;*/
	 display: flex;
   justify-content: left;
   align-items: left;
  }
  .rectangulo37{
	  font-family:Verdana,Helvetica;
	  	 /*font-size: 1.1rem;*/
		 color: black;
	/*align: center ;*/
	width:100%;
	 /* height:6rem;*/
	  padding: 10px;
	     border: 1px solid blue; 
	 background-color: #F1E6E2;
	/* max-width: 400px;*/
	/* display: flex;*/
  /* justify-content: left;*/
   align-items: left;
  }
  .rectangulo38{
	  font-family:Verdana,Helvetica;
	  	 /*font-size: 1.1rem;*/
		 color: black;
	/*align: center ;*/
	width:100%;
	 /* height:6rem;*/
	  padding: 10px;
	     border: 1px solid blue; 
	 background-color: #FFFFCC;
	/* max-width: 400px;*/
	/* display: flex;*/
  /* justify-content: left;*/
   align-items: left;
  }
  .rectangulo39{
	  font-family:Verdana,Helvetica;
	  	 /*font-size: 1.1rem;*/
		 color: black;
	/*align: center ;*/
	width:100%;
	 /* height:6rem;*/
	  padding: 10px;
	     border: 1px solid blue; 
	 background-color: #D9F2F2;
	/* max-width: 400px;*/
	/* display: flex;*/
  /* justify-content: left;*/
   align-items: left;
  }
  .rectangulo40{
	  font-family:Verdana,Helvetica;
	  	 /*font-size: 1.1rem;*/
		 color: black;
	/*align: center ;*/
	width:100%;
	 /* height:6rem;*/
	  padding: 10px;
	     border: 1px solid blue; 
	 background-color: #CAFFDB;
	/* max-width: 400px;*/
	/* display: flex;*/
  /* justify-content: left;*/
   align-items: left;
  }
  .rectangulo41{
	    font-family: arial;
      color:white;
 	 font-size: 1rem;
	    padding: 10px;
	align: center ;
	width:99%; 
	text-align: center;
	align: center;
	 background-color:#F3DDC7;
  }
<!-- FIN RECTANGULOS  -->   

 .form1{
	   border-color: rgb(38, 126, 137);
    box-shadow: 0 1px 1px rgba(229, 103, 23, 0.075)inset, 0 0 8px rgba(255,144,0,0.6);
    outline: 0 none;
        font-family:Verdana,Helvetica;
       /* font-weight:bold;*/
        color:var(--color-2);
        border:2px;
	 background-color: white;
        width:100%;
        height:1.6rem; 
	 font-size: 1rem; 
	align: center;
	max-width: 300px;
	align: center;
  }
  .form2{
	   border-color: rgb(38, 126, 137);
    box-shadow: 0 1px 1px rgba(229, 103, 23, 0.075)inset, 0 0 8px rgba(255,144,0,0.6);
    outline: 0 none;
        font-family:Verdana,Helvetica;
       /* font-weight:bold;*/
        color:var(--color-2);
        border:2px;
	 background-color: white;
        width:100%;
        height:1.6rem; 
	 font-size: 1rem; 
	align: center;
	max-width: 200px;
	align: center;
  }
  .form3{
	   border-color: rgb(38, 126, 137);
    box-shadow: 0 1px 1px rgba(229, 103, 23, 0.075)inset, 0 0 8px rgba(255,144,0,0.6);
    outline: 0 none;
        font-family:Verdana,Helvetica;
       /* font-weight:bold;*/
        color:var(--color-2);
        border:2px;
	 background-color: white;
        width:90%;
        height: auto; 
	 font-size: 1rem; 
	align: center;
	max-width: 50px;
	align: center;
  }