<!-------SLIDE--------->

.slideanim {visibility:hidden;}
  .slide {
	  /*Nombre de la animacion*/
      animation-name: slide;
      -webkit-animation-name: slide;
	  /*Duracion de la animacion*/
      animation-duration: 1s;	
      -webkit-animation-duration: 1s;
	  /*hacer visible*/
      visibility: visible;			
  }

/*Ir de 0% a 100% de opacidad (ver-a través) y especificar el porcentaje 
de cuándo se desliza en el elemento a lo largo del eje Y*/
@keyframes slide {
    0% {
      opacity: 0;
      -webkit-transform: translateY(20%);
    } 
    100% {
      opacity: 1;
      -webkit-transform: translateY(0%);
    }	
  }
  @-webkit-keyframes slide {
    0% {
      opacity: 0;
      -webkit-transform: translateY(20%);
    } 
    100% {
      opacity: 1;
      -webkit-transform: translateY(0%);
    }
	
	
<!-------background-------->

.bgguarda {
	background-image:url(../images/guaraN.png);
	 }
	 
.bgbeige {background-color:#fcf9f3;}
	 
<!-- TEXTO-->

p.uppercase {
    text-transform: uppercase;
	letter-spacing:5px;
}

p.lowercase {
    text-transform: lowercase;
}