@charset "utf-8";
/* CSS Document */

.fora{
	max-width:1100px;
	padding-top:1rem;
}
.fora ul,.fora li{
  list-style:none;
}
.fora ul{
  overflow:hidden;
  display: flex;
  width: 100vw;
  max-width: 1100px;
  flex-flow: row wrap;
  justify-content: space-around;
}
.fora ul li span{
  position:relative;
  text-decoration:none;
  color:#000;
  background:#efe8d5;
  display:block;
  height:16rem;
  width:16rem;
  padding:1em;
  -moz-box-shadow:5px 5px 7px rgba(33,33,33,1);
  -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);
  box-shadow: 5px 5px 7px rgba(33,33,33,.7);
}
.fora ul li{
  margin:1em;
  float:left;
}
.fora ul li div{
  position:absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(214, 214, 226, 0.5);
  font-size:140%;
  font-weight:bold;
  display: none;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  text-align: center;
}
.fora ul li p{
  /*font-family:"Reenie Beanie",arial,sans-serif;
  font-size:180%;*/
}
.fora ul li span{
  -webkit-transform: rotate(-6deg);
  -o-transform: rotate(-6deg);
  -moz-transform:rotate(-6deg);
}
.fora ul li:nth-child(even) span{
  -o-transform:rotate(4deg);
  -webkit-transform:rotate(4deg);
  -moz-transform:rotate(4deg);
  position:relative;
  top:5px;
}
.fora ul li:nth-child(3n) span{
  -o-transform:rotate(-3deg);
  -webkit-transform:rotate(-3deg);
  -moz-transform:rotate(-3deg);
  position:relative;
  top:-5px;
}
.fora ul li:nth-child(5n) span{
  -o-transform:rotate(5deg);
  -webkit-transform:rotate(5deg);
  -moz-transform:rotate(5deg);
  position:relative;
  top:-10px;
}
.fora ul li span:hover,ul li span:focus{
  box-shadow:10px 10px 7px rgba(0,0,0,.7);
  -moz-box-shadow:10px 10px 7px rgba(0,0,0,.7);
  -webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7);
  -webkit-transform: scale(1.25);
  -moz-transform: scale(1.25);
  -o-transform: scale(1.25);
  position:relative;
  z-index:5;
}
.fora ul li span:hover>div,ul li span:focus>div{
	display:flex;
	animation-name:inicial;
	animation-duration:2s;
	animation-iteration-count:1;
	
	-webkit-animation-name:inicial;
	-webkit-animation-duration:2s;
	-webkit-animation-iteration-count:1;
}

.foral{
	width:3rem;
	margin-left: auto;
    margin-right: auto;
}

@keyframes inicial{
	from { opacity:0; }
	to { opacity:1; }
}
@-webkit-keyframes inicial{
	from { opacity:0; }
	to { opacity:1; }
}

@media screen and (min-width:481px){
	.fora ul {
		width: inherit;
	}
	
}

@media screen and (min-width:769px){
	.fora ul {
		padding: 3rem;
	}
}