/* porfolio.css */

     {
       box-sizing: border-box;
      }

	#masonry{
		  max-width: 1200px;
		  margin: 0;
		  overflow: hidden;
		  padding-top:80px;
	  }

      .item {
        width: 300px;
        height: 350px;
        float: left;
        background: #EFEFEF;
     
      }

      .item.small {
        width:  300px;
        height: 275px;
        background: #EFEFEF;
      }
	  
      .item.medium {
        width: 300px;
        height: 425px;
		background-color:#EFEFEF;
		
	   }
	  .item.large {
        width: 300px;
        height: 500px;
        background-color:#EFEFEF;
		/*float: left;
		overflow: hidden;
		text-align: center;
		cursor: default;
		background: #fff;*/
      }
	    /* item small cont*/
		.item.small .mascara,.item.small  .contenido {
		width: 300px;
		height: 275px;
		position: absolute;
		overflow: hidden;
		top: 0;
		left: 0;

		}
	   /* item medium cont*/
		.item.medium .mascara,.item.medium  .contenido {
		width: 300px;
		height: 425px;
		position: absolute;
		overflow: hidden;
		top: 0;
		left: 0;
		}
	 /* item large cont*/
		.item.large .mascara,.item.large .contenido{
		width: 300px;
		height: 600px;
		position: absolute;
		overflow: hidden;
		top: 0;
		left: 0
		}
	/* item cont*/
		.item .mascara,.item .contenido{
		width: 300px;
		height: 350px;
		position: absolute;
		overflow: hidden;
		top: 0;
		left: 0;
		}
		.item img{
		display: block;
		position: relative;

		}
		.item  .izq{
		width:120px;
		float:left;
		text-transform: uppercase;
		color: #000;
		text-align: right;
		position: relative;
		font-size: 14px;
		margin-top: 160px;
		/*padding-top:160px;*/
		}
		.item .der{
		width:180px;
		float:left;
		font-family: 'verdana';
		font-size: 14px;
		text-transform: uppercase;
		position: relative;
		color: #000;
		margin-top: 160px;
		/*padding-top:140px;*/
		padding-left:5px;
		text-align: left;
		}
	
		.item a.link {
		margin:0;
		display: inline-block;
		text-decoration: none;
		width:300px;
		height:500px;
		text-transform: uppercase;
		opacity: 0;
		transition: all 0.4s ease-in-out;

		}
		.item a.link:hover {
		background: #FFF;
		opacity: 1;
		}
	
		/*transitions*/
		.item tr img {
		transition: all 0.2s linear;
		}
		.item tr .mascara {
		opacity: 0;
		background-color: rgba(46,157,120, 0.7);
		transition: all 0.3s ease-in-out;
		}
		.tr .izq {
		transform: translateX(-200px);/*Desplazamiento Izq*/
		opacity: 0;
		transition: all 0.7s ease-in-out;
		}
		.tr .der {
		transform: translateX(200px);/*Desplazamiento Der*/
		opacity: 0;
		transition: all 0.4s linear;
		}
		
		.tr:hover .mascara {
		opacity: 1;
		}
		.tr:hover .izq,.tr:hover .der{
		opacity: 1;
		transform: translateX(0px);/*Regresamos a las posiciones originales*/
		}
		.tr:hover .der {
		transition-delay: 0.1s;
		}
@media (max-width: 768px){
	#masonry{
		  max-width:768px;
		  margin-left:auto;
		  display: block;
	  }
	
}
@media only screen and (min-device-width: 300px) and (max-device-width: 480px){
	#masonry{
		  max-width:300px;
		  margin:auto;
		  /*display: block;*/
	  }
}