.aumenta{
   width: 100%;
  animation-name: aumenta;
  animation-duration: 2s;
  animation-iteration-count: 1;
 
}
.contenedor {
	margin: auto;
	display: table;
}


.texto{
    position:absolute;
    right:0;
    width:0;
    border-left: 1px solid #000;
    animation: escribir 5s steps(30) infinite alternate;
}

@keyframes escribir {
    from { width: 100% }
    to { width:0 }
}

.imagen{
  background-color: white;

}
.body{
font-family: Verdana;
}
.imagen:hover{
	background-color: black;
  color: white;
	transition: 1s; 
	border-radius: 10px;
	margin-top:20px;
}
.colorpagina{
  background-color:#9800B4;
  -webkit-box-shadow: 0px 10px 10px -8px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 10px 10px -8px rgba(0,0,0,0.75);
box-shadow: 0px 10px 10px -8px rgba(0,0,0,0.75);
}

.descripcion{
  position: relative;
  animation-name: descripcion;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-direction: alternate;
}

@keyframes descripcion{
     from { margin-left:  -25% }
    to { margin-left: 0% }
}

@keyframes aumenta{
      from { width: 12%; }
    to {width: 100%; }
}

#galeria{
  
  background: linear-gradient(70deg, white, green);

}
.watsap{
   margin-top: 20%; 

  z-index: 1;
  animation-name: descripcion;
  animation-duration: 1s;
 animation-iteration-count: 1;
  animation-direction: alternate;
}

@keyframes descripcion{
     from { width: 12%; }
    to {width: 20%; }
}
.fuentcolo{
    color:black;
    animation-name: colp;
  animation-duration: 5s;
  animation-iteration-count: 1;
animation-direction: normal;
}
@keyframes colp{
     from { color:white; }
    to {color:black; }
}