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


.masonry {
    margin-top: 20px;
  background: #EEE;
  
}

/* clearfix */
.masonry:after {
  content: '';
  display: block;
  clear: both;
}

.masonry .item {
  width:  10%;
    height: auto;
  float: left;
  background: #fff;
  border: 5px solid #ccc;
  border-radius: 5px;
    display: block;
    position: relative;
    overflow: hidden; /* make sure this doesn't cause unexpected behaviour */
    padding: 0;
    
    
}

.item > div{
    width:100%;
    height:0;
    background-size:100%;
    pointer-events: none;
padding-bottom: 49%;}

.item > div img{
    float: left;
    width: 100%;}

.item.g2 { width:  15%; }
.item.g3 { width:  20%; }
.item.g4 { width:  30%; }



.item.gigante {
    min-width: 40%;
    width: 55%;
    max-width: 700px;
    max-height: 800px;
    box-shadow: 0px 0px 1px 1px black;
}

.item.gigante > div{
    width:100%;
    height:0;
    background-size:100%;
    }

.item:hover {
  background: #A2C;
  border-color: white;
  cursor: pointer;
}