
.team-item{
	text-align: center;
	
	&-image{
		position: relative;
		overflow: hidden;
		&-overlay{
			position: absolute;
			width: 100%;
			height: 100%;
			background-color: fade(@theme-color,90%);
			top: -100%;
			left: 0;
			transition: all 300ms;
		}
		img{
			width: 100%;
		}
	}
	
	&-icons{
		position: absolute;
		padding: 15px 0;
		height: 50px;
		width: 100%;
		top: 50%;
		margin-top: -25px;
		font-size: 15px;
		a{
			color: @white-color;
			margin: 0 10px;
			i {
				width: 30px;
			    height: 30px;
			    border: 1px solid @white-color;
			    font-size: 15px;
			    line-height: 30px;
			    transition: all .3s ease-in-out;
			    &:hover {
			    	background: @white-color;
			    	color: @theme-color;
			    }
			}
		}
	}
	
	&-info {
	    background: darken(@white-color, 2%);
        box-shadow: 0px 1px 0px fade(@black-color, 10%);
        padding: 15px 0;
	}
	
	&-name{
		font-family: @brand-font;
		font-size: 15px;
	}
	
	&-position{
		font-size:11px;
		color: #aaaaaa;
	}
	
	&:hover{
		.team-item-image-overlay{
			top: 0;
		}
		.team-item-name{
			color: @theme-color;
		}
	}
	
}


//Responsive

@media screen and (max-width: 540px) {
    
	#team {

		.row [class*="col-"] {
		    width: 100%;
		}

		.team-item{
			&-icons{
				font-size: 24px;
			}
		}

	}

}

@media screen and (max-width: 360px) {
    
	#team {

		.team-item{
			&-icons{
				font-size: 15px;
			}
		}

	}

}

