/*============================*/
/*	PORTFOLIO
/*============================*/

.isotope-item
	z-index: 2

.isotope-hidden.isotope-item
	pointer-events: none
	z-index: 1

.isotope
	/* change duration value to whatever you like */
	-webkit-transition-duration: 0.8s
	-moz-transition-duration: 0.8s
	transition-duration: 0.8s

	.isotope-item
		-webkit-transition-duration: 0.8s
		-moz-transition-duration: 0.8s
		transition-duration: 0.8s
		-webkit-transition-property: -webkit-transform, opacity
		-moz-transition-property: -moz-transform, opacity
		transition-property: transform, opacity
		line-height: 0
		float: left
		-webkit-transition-property: height, width
		-moz-transition-property: height, width
		transition-property: height, width





.portfolio-filters

	margin-bottom: 20px

	ul
		width: 100%

	ul , li
		margin: 0
		padding: 0
		display: inline-block
		text-align: center
		list-style: none

	a
		display: block
		padding: 8px 20px
		position: relative
		background: #909090
		font-family: $primary-font
		font-size: 16px
		color: #fff
		text-transform: uppercase
		margin-bottom: 20px

		&:before
			position: absolute
			z-index: -1
			content: ''
			left: calc(50% - 8px)
			bottom: 0
			border: 8px solid transparent
			border-bottom-width: 0
			border-top-color:  #909090
			+transition(inherit)


		&:hover , &.active
			color: #fff 
			background: $main-color

			&:before
				+transform(translateY(8px))
				border-top-color:  $main-color

.portfolio-items
	width: 100%
	position: relative

.portfolio-item
	display: block
	position: relative
	overflow: hidden
	float: left
	width: 25%

	@media (max-width: 990px)
		width: 50% !important

	@media (max-width: 765px)
		width: 100% !important

	> a
		display: block
		width: 100%
		height: 100%	

	.caption
		+position(absolute, 0)
		background: rgba( #000 , 0.6 )
		color: #fff
		padding: 20px
		+opacity(0)
		@extend .transition

		h3
			margin: 0 0 10px
			color: inherit

		.icon
			display: inline-block
			font-size: 16px
			height: 35px
			width: 35px
			line-height: 35px
			margin: 0 10px 30px
			position: relative
			z-index: 0

			&:before
				content: ""
				+position(absolute, 0)
				+transform(rotate(45deg))
				border: 1px solid #fff
				z-index: -1
				@extend .transition

			&:hover
				&:before
					background: $main-color
					border-color:  $main-color 

	&:hover
		.caption
			+opacity(1)
