@-webkit-keyframes supersize 
{
  0% { -webkit-transform:scale(.9); }
  100% { -webkit-transform:scale(1); }
}

@-webkit-keyframes lightbox {
  0% { -webkit-transform: scale(5) rotateY(-270deg); }
  100% { -webkit-transform: scale(1) rotateY(0deg); }
}

@-moz-keyframes lightbox {
  0% { -moz-transform: scale(5) /* rotateY(-270deg) */; }
  100% { -moz-transform: scale(1) /* rotateY(0deg) */; }
}

img 
{
  vertical-align:middle;
}

.peque ul 
{
  list-style:none;
  /*padding:0;*/
}

.cartel
{
  /*width: 100%;float: left;*/
  text-align: left;
  margin-left: 125px;
  margin-bottom: 50px;
  clear: both;
  /*position: relative;*/
  text-shadow: #fff 0 2px 2px;
}

.peque 
{
  margin: 50px auto;
  width:100%;
  text-align:center;
}

.peque li 
{
  display:inline;
  margin:0 10px;
}

.peque img 
{
  width: 250px;
  height: auto;
  opacity: 0.75;
  border-radius:4px;
  -moz-border-radius:4px;
  -webkit-box-shadow:0 1px 0 #fff;
  -moz-box-shadow:0 1px 0 #fff;
  box-shadow:0 1px 0 #fff;
  -webkit-transition:opacity .2s linear;
  -moz-transition:opacity .2s linear;
  -o-transition:opacity .2s linear;
  transition:opacity .2s linear;
}
.peque img:hover
{
  opacity:1;
}

.peque a:active img 
{
  margin-top:1px;
}

li[id] 
{
  overflow:hidden;
  position:absolute;
  width:0;
  height:0;
  left:0;
  top:0;
  opacity:0;
  background:none repeat scroll 0 0 rgba(0, 0, 0, 0.8);
  -webkit-transition:opacity 1.2s cubic-bezier(0,0,0,1);
  -moz-transition:opacity 1.2s cubic-bezier(0,0,0,1);
  -o-transition:opacity 1.2s cubic-bezier(0,0,0,1);
  transition:opacity 1.2s cubic-bezier(0,0,0,1);
  z-index: 10;
}

li[id] a:before 
{
  content:url(../imagenes/close.png);
  opacity:0;
  position: absolute;
  left:-15px;
  top:-15px;
}

li[id] a:hover:before 
{
  opacity:1;
}

li[id]:target 
{
  width:100%;
  height:100%;
  opacity:1;
}

li[id]:target a 
{
  position:absolute;
  top:50%;
  left:50%;
  z-index: 5;
  margin:-300px 0 0 -380px;
  -webkit-box-shadow:0 1px 8px #000;
  -moz-box-shadow:0 1px 8px #000;
  box-shadow:0 1px 8px #000;
  -webkit-animation:supersize .8s cubic-bezier(0,0,0,1);

}

li[id]:target div { -webkit-animation: lightbox 0.75s cubic-bezier(0,0,0,1); }


.grid { /*margin: 35px 0;*/ }

/*
Add the transition affect to the images in the grid. Any changes to the element will be transtioned from it's current state, for example on :hover */
.grid li 
{ 
  float: left; 
  list-style: none; 
  margin: 0 0 6% 12%; 
  position: relative; 
  overflow: hidden; 
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  -webkit-transition: all 0.15s ease-in;
  -moz-transition: all 0.15s ease-in;
  -ms-transition: all 0.15s ease-in;
  transition: all 0.15s ease-in;
}
.grid li.end 
{ 
  margin-right: 0;
  clear:right; 
}

.grid li.first
{ 
  clear: left;
}

.grid li:nth-child(3n) { margin-right: 0; }
.grid li:hover { z-index: 2;
  -webkit-transform: scale(1.6) translateY(-40px);  
  -moz-transform: scale(1.6) translateY(-40px); 
  -ms-transform: scale(1.6) translateY(-40px);  
  transform: scale(1.6) translateY(-40px);  
  -webkit-box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}
/*
Rotate left hand column to the left upon hover */
.grid li:nth-child(3n-2):hover {
  -webkit-transform: scale(1.6) translate3d(0, -30px, 0) rotate(-2.5deg);
  -moz-transform: scale(1.6) translateY(-30px) rotate(-2.5deg);
  -ms-transform: scale(1.6) translateY(-30px) rotate(-2.5deg);
  transform: scale(1.6) translateY(-30px) rotate(-2.5deg);
}
/*
Rotate every third li with :nth-child(3n) (right hand column in this demo) to the right upon hover */
.grid li:nth-child(3n):hover {
  -webkit-transform: scale(1.6) translate3d(0, -30px, 0) rotate(2.5deg);  
  -moz-transform: scale(1.6) translateY(-30px) rotate(2.5deg);  
  -ms-transform: scale(1.6) translateY(-30px) rotate(2.5deg); 
  transform: scale(1.6) translateY(-30px) rotate(2.5deg); 
}

.grid img, li[id]:target div, #grid li, .backface {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}