/* ---------------------------------------------------------------------- */
/*	Reset
/* ---------------------------------------------------------------------- */

/**/*,
*:after,
*:before {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
			box-sizing: border-box;
}


ul { list-style: none outside;    }
ol { list-style-position: inside; }

img {
    border: 0;
	height: auto;
	max-width: 100%;
	-ms-interpolation-mode: bicubic;
}


/* ---------------------------------------------------------------------- */
/*	Portfolio
/* ---------------------------------------------------------------------- */

	/* -------------------------------------------------- */
	/*	Portfolio Filter
	/* -------------------------------------------------- */

	.portfolio-filter {
		margin-bottom: 45px;
		font-size: 0;
		text-align: center;
		width: 100%;
	}
	
		.portfolio-filter li {
			position: relative;
			display: inline-block;
			margin: 0 0 5px 0;
			padding: 6px 34px;
			border-color: #cfcfcf;
			border-style: solid;
			border-width: 1px 0 1px 1px;
			font-size: 14px;
			cursor: pointer;
			
			-webkit-transition: all .25s ease;
					transition: all .25s ease;
		}
		
		.ie8 .portfolio-filter li			   { border-width: 1px 1px 1px 0; }
		.ie8 .portfolio-filter li:first-child  { border-left-width: 1px; }
		
		.portfolio-filter li:first-child {
			-webkit-border-radius: 6px 0 0 6px;
					border-radius: 6px 0 0 6px;
		}
		
		.portfolio-filter li:last-child {
			border-right-width: 1px;
			-webkit-border-radius: 0 6px 6px 0;
					border-radius: 0 6px 6px 0;
		}
		
		.portfolio-filter li:hover { background-color: #f6f6f6; }
		
		.portfolio-filter li.active {
			border-color: #1582c2;
			background-color: #1582c2;
			color: #fff;
		}
		
		.portfolio-filter li.active + li { border-left-color: #1582c2; }

	/* -------------------------------------------------- */
	/*	Portfolio Items
	/* -------------------------------------------------- */
	
	ul.portfolio-items { 
		font-size: 0;
		
		-webkit-backface-visibility: hidden;
		-webkit-font-smoothing: antialiased;
		-webkit-user-select: none;
		   -moz-user-select: none;
				user-select: none;
	}
	
		ul.portfolio-items li {
			position: relative;
			display: inline-block;
			padding: 0 1px 1px 0;
			width: 20%;
			max-width: 20%;
			vertical-align: top;
			font-size: 0;
			text-align: left;
		}
		
		ul.portfolio-items .mix { display: none; }
		
				ul.portfolio-items img { display: block; }
			
		.work-item {
			position: relative;
			overflow: hidden;
		}
		
			.work-item img {
				display: block;
				-webkit-transition: -webkit-transform .25s ease-in-out;
						transition: transform .25s ease-in-out;
			}
			
			.work-item:hover img {
				-webkit-transform: scale(1.2);
						transform: scale(1.2);
			}
		
			.image-extra {
				position: absolute;
				top: 0;
				left: 0;
				z-index: 3;
				overflow: hidden;
				width: 100%;
				height: 100%;
				text-align: center;
				opacity: 0;
				filter: alpha(opacity = 0);
				background-color: rgba(0, 194, 169, 0.1);
				
				-webkit-transition: opacity .25s ease, background-color .45s ease;
						transition: opacity .25s ease, background-color .45s ease;
			}
			
			.ie8 .image-extra { visibility: hidden; }

			.work-item.touched .image-extra,
			.work-item:hover .image-extra {
				background-color: #00c2a9;
				background-color: rgba(21, 130, 194, 0.8);
				opacity: 1;
				filter: alpha(opacity = 80);
			}

			.ie8 .work-item:hover .image-extra { visibility: visible; }
				
				.extra-content {
					display: table;
					overflow: hidden;
					width: 100%;
					height: 100%;
					vertical-align: middle;
					text-align: center;
				}	

					.inner-extra {
						display: table-cell;
						margin: 0;
						padding: 0 10px;
						width: 100%;
						height: 100%;
						vertical-align: middle;
					}
					
					.link-icon .curtain,
					.plus-icon .curtain {

						display: inline-block;
						width: 50px;
						height: 50px;
						border: 1px solid #fff;
						
						-webkit-border-radius: 50%;
								border-radius: 50%;	
						-webkit-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1);
						-webkit-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
						   -moz-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
							-ms-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
							 -o-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
								transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
					}
				
					.single-image.link-icon .curtain {
						-webkit-transform: translateX(-300%);
								transform: translateX(-300%);
					}

					.single-image.plus-icon .curtain {
						-webkit-transform: translateX(300%);
								transform: translateX(300%);
					}
					
					.work-item:hover .link-icon .curtain,
					.work-item:hover .plus-icon .curtain {
						-webkit-transform: translateX(0);
								transform: translateX(0);
					}
					
					.link-icon .curtain:hover,
					.plus-icon .curtain:hover {
						border-color: transparent;
						background-color: #fff;
						background-color: rgba(255,255,255,.9);
					}

					.link-icon .curtain:after,
					.plus-icon .curtain:after {
						position: absolute;
						left: 0;
						top: 0;
						display: block;
						width: 100%;
						height: 100%;
						color: #fff;
						text-align: center;
						font-size: 20px;
						font-family: 'fontello';
						line-height: 50px;

						-webkit-border-radius: 50%;
								border-radius: 50%;
						-webkit-transition: color .25s ease-in-out;
								transition: color .25s ease-in-out;
					}

					.plus-icon .curtain:after  { content: '\e9a1'; font-size: 28px; }
					.link-icon .curtain:after  { content: '\e84f'; }
					
					.link-icon .curtain:hover:after,
					.plus-icon .curtain:hover:after { color: #1582c2; }

						.extra-title  { 
							margin-bottom: 6px;
							color: #fff;
							font-family: 'Roboto Condensed', sans-serif;
							text-transform: uppercase;
						}

						.extra-category {
							margin-bottom: 0;
							color: #fff;
							font-weight: 300;
						}