/*---------------------------------------------------
			3.5 Works
	---------------------------------------------------*/
	
	#works .item { margin-bottom: 40px; }

		#works .item h3 {
			color: #555;
			font-size: 16px;
			line-height: 26px;
			font-weight: bold;
			text-transform:uppercase;
			text-align:center;
			/* Colocamos el texto en el centro del div */
			margin: 41% 0 0 0;
		}

		#works a.permalink:hover h3 { color: #111; }

	#works .item span.category {
		color: #ccc;
		display: block;
		font-size: 16px;
		line-height: 16px;
		margin-bottom: 10px;
		text-transform:uppercase;
		font-weight: bold;
		text-align:center
	}
/* Color del enlace del trabajo */
		#works a.permalink:hover span.category { color: #c7c7c7; }

	#works .item p.excerpt {
		font-size: 13px;
		line-height: 18px;
		margin-top: 10px;
	}

	/* Stackgrid */
	#works.stackgrid .item {
		width: 25%;
		float: left;
		margin-bottom: 0;
		position: relative;
	}

		#works.stackgrid .item img {
			width: 100%;
		}
		/* Color de fondo: en CHROME se ve una fina línea entre trabajo y trabajo, por lo que si el color de fondo es otro que no sea blanco esa línea se ve */
		#works.stackgrid .item {
		background: #fff;
}
/* Color para el hover */
	#works.stackgrid .item:hover {
		background: #ec2214;
}
		/* Viramos a pantone ligeramente la IMAGEN antes del hover.
		Al darle un valor de 1 elimino el efecto de virar, pero tengo que ponerlo para que funcione el viraje en el hover. Quito la opacidad para que salga plano el color*/
		#works.stackgrid .item img {
		opacity: 1;
	-webkit-transition: opacity 0s;
	transition: opacity 0s;
}
		/* Ponemos la transparencia a la IMAGEN con hover
		Con 0 la anulamos */
		#works.stackgrid .item:hover img {
			opacity: 0;
		} 

	@media screen and (min-width: 1600px) { 
		#works.stackgrid .item { width: 20%; }
	}

	@media screen and (min-width: 960px) and (max-width: 1599px) { 
		#works.stackgrid .item { width: 25%; }
	}

	@media screen and (min-width: 768px) and (max-width: 959px) { 
		#works.stackgrid .item { width: 33.333333%; }
	}

	@media screen and (min-width: 480px) and (max-width: 767px) { 
		#works.stackgrid .item { width: 50%; }
	}

	@media screen and (max-width: 479px) { 
		#works.stackgrid .item { width: 100%; }
	}

	#works.stackgrid .item .box-desc {
		padding: 15px 30px;
		text-align: center;
	}

	#works.stackgrid.images-only {
		/* Navigation */
		margin-top: 0;
	}

		#works.stackgrid.images-only .item .box-desc {
			display: none;
			text-align: left;
			padding: 25px 30px;
			background: url('../imagenes/alpha/bg_alpha60.png');
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
		}
			
			#works.stackgrid.images-only .item .box-desc h3 { color: white; }

		#works.stackgrid.images-only .nav-pages { margin-top: 0; }

			#works.stackgrid.images-only .nav-pages a.link-prev,
			#works.stackgrid.images-only .nav-pages a.link-next { border-top: none; }

		#works.stackgrid.images-only a.link-prev,
		#works.stackgrid.images-only a.link-next { border-top: none; }

			#works.stackgrid .item .box-desc span.category {
				margin-bottom: 2px;
			}
	
	/* Single */
	#works.single {
	
	}

		#works.single img { 
			margin-bottom: 60px; 
		}

		#works.single .box-info {
			margin-bottom: 40px; 
			font-size: 14px;
			line-height: 25px;
		}
			
			#works.single .box-info p.project-desc {
				color: #ddd; 
				font-weight: bold; 
				margin-top: 0; 
			}

			#works.single .box-info h4 {
				font-size: 11px; 
				line-height: 21px; 
				text-transform: uppercase; 
				letter-spacing: 3px; 
			}

				#works.single .box-info h4.border-top {
					padding-top: 20px; 
				}

			#works.single .box-info p {
				margin-top: 15px; 
			}

			@media screen and (max-width: 767px) {
				#works.single .box-info p {
					font-size: 12px; 
					line-height: 24px; 
				}
			}