/* body {
	display: flex;
	  justify-content: center;
	  align-items: center;
	  min-height: 100vh;
	  } */
  
  .recuerdos {
	  width: 300px;
	  height: 300px;
	  margin: 8% auto;
  }
  
  .box-area {
	  -webkit-animation: animate 10s ease-in-out infinite;
			  animation: animate 10s ease-in-out infinite;
	  -webkit-transform-style: preserve-3d;
			  transform-style: preserve-3d;
	  -webkit-transform-origin: 100px 100px 0;
		  -ms-transform-origin: 100px 100px 0;
			  transform-origin: 100px 100px 0;
  }
  
  @-webkit-keyframes animate {
	  from, to {
		  -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
				  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	  }
  
	  16% {
		  -webkit-transform: rotateY(-90deg);
				  transform: rotateY(-90deg);
	  }
  
	  33% {
		  -webkit-transform: rotateY(-90deg) rotateZ(90deg);
				  transform: rotateY(-90deg) rotateZ(90deg);
	  }
  
	  50% {
		  -webkit-transform: rotateY(-180deg) rotateZ(90deg);
				  transform: rotateY(-180deg) rotateZ(90deg);
	  }
  
	  66% {
		  -webkit-transform: rotateY(-270deg) rotateZ(90deg);
				  transform: rotateY(-270deg) rotateZ(90deg);
	  }
  
	  83% {
		  -webkit-transform: rotateX(-270deg);
				  transform: rotateX(-270deg);
	  }
	  
  }
  
  @keyframes animate {
	  from, to {
		  -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
				  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	  }
  
	  16% {
		  -webkit-transform: rotateY(-90deg);
				  transform: rotateY(-90deg);
	  }
  
	  33% {
		  -webkit-transform: rotateY(-90deg) rotateZ(90deg);
				  transform: rotateY(-90deg) rotateZ(90deg);
	  }
  
	  50% {
		  -webkit-transform: rotateY(-180deg) rotateZ(90deg);
				  transform: rotateY(-180deg) rotateZ(90deg);
	  }
  
	  66% {
		  -webkit-transform: rotateY(-270deg) rotateZ(90deg);
				  transform: rotateY(-270deg) rotateZ(90deg);
	  }
  
	  83% {
		  -webkit-transform: rotateX(-270deg);
				  transform: rotateX(-270deg);
	  }
	  
  }
  
  .box-area div {
	  position: absolute;
	  width: 300px;
	  height: 300px;
	  line-height: 300px;
  }
  
  .box-area .box1 {
	  background-image: url(../img/pi\ 1.jpeg);
	  background-size: cover;
	  background-position: center center;
	  -webkit-transform: translateZ(100px);
			  transform: translateZ(100px);
  }
  
  .box-area .box2 {
	  background-image: url(../img/pi\ 2.jpeg);
	  background-size: cover;
	  background-position: center center;
	  -webkit-transform: rotateY(90deg) translateZ(100px);
			  transform: rotateY(90deg) translateZ(100px);
  }
  
  .box-area .box3 {
	  background-image: url(../img/pi\ 3.jpeg);
	  background-size: cover;
	  background-position: center center;
	  -webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(100px);
			  transform: rotateY(90deg) rotateX(90deg) translateZ(100px);
  }
  
  .box-area .box4 {
	  background-image: url(../img/pi\ 4.jpeg);
	  background-size: cover;
	  background-position: center center;
	  -webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(100px);
			  transform: rotateY(180deg) rotateZ(90deg) translateZ(100px);
  }
  
  .box-area .box5 {
	  background-image: url(../img/pi\ 5.jpeg);
	  background-size: cover;
	  background-position: center center;
	  -webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(100px);
			  transform: rotateY(-90deg) rotateZ(90deg) translateZ(100px);
  }
  
  .box-area .box6 {
	  background-image: url(../img/pi\ 6.jpeg);
	  background-size: cover;
	  background-position: center center;
	  -webkit-transform: rotateX(-90deg) translateZ(100px);
			  transform: rotateX(-90deg) translateZ(100px);
  }