﻿h2.head + .our-team-box{
	margin-top: 50px;
}

.our-team-box,.our-team-item,.our-team-member-box{
	letter-spacing: -1em;
	margin-bottom: 50px;
}
.our-team-image-box{
	position: relative;
	width: 300px;
	height: 300px;
	float: right;
	margin: 0 0 0 40px;
	overflow: hidden;
}
.our-team-name{
	font-size: 36px;
	display: inline-block;
	vertical-align: bottom;
	margin-bottom: 20px;
}
.our-team-title{
	font-style: 12px;
	display: inline-block;
	vertical-align: bottom;
	margin: 0 0 30px 10px;
}

.our-team-box .our-team-item:nth-child(even) .our-team-image-box{
	float: left;
	margin-left: 0;
	margin: 0 40px 0 0;
}




a.linkedin-link{
	position: absolute;
	content: "In";
	color: #000;
	background-color: #FFF;
	display: inline-block;
	top: 80%;
	left: 50%;
	margin-left: -15px;
	width: 30px;
	height: 30px;
	border-radius: 15px;
	line-height: 30px;
	font-weight: bold;
	text-align: center;
	opacity: 0;
	z-index: 152;
}
a.linkedin-link:before{
	position: absolute;
	left: 0;
	content: "In";
	width: 30px;
}
a[href="https://scrum.vc/ja/join-scrum/"]{
	opacity: 1 !important;
}


.our-team-member-item,.our-community-item{
	position: relative;
	width: 200px;
	height: 200px;
	display: block;
	vertical-align: top;
	overflow: hidden;
	text-align: center;
	background-color: #FFF;
	float: left;
}


.our-team-image-box img,.our-team-member-item img,.our-community-item img{
	display: block;
	width: 100%;
	height: 100%;
    transition: 0.2s linear;
	z-index: 150;
}
.our-team-image-box:hover img,.our-team-member-item:hover img,.our-community-item:hover img{
	transform:scale(1.1);
}
.our-community-item img{
    -webkit-filter: grayscale(50%);
    -moz-filter: grayscale(50%);
    -o-filter: grayscale(50%);
    -ms-filter: grayscale(100%);
    filter: grayscale(50%);	
}

.our-team-box *,.our-team-member-item *,.our-community-item *{
	letter-spacing: 0px;
}

.our-team-member-item a.linkedin-link,
.our-community-item a.linkedin-link{
	top: 70%;
}


.our-team-member-item .our-team-name,
.our-community-item .our-team-name{
	position: absolute;
	top: 40px;
	width: 100%;
	font-size: 20px;
	display: block;
	margin: 0;
	color: #FFF;
	opacity: 0;
	z-index: 152;
}

.our-team-member-item .our-team-title,
.our-community-item .our-team-title{
	position: absolute;
	top: 70px;
	width: 100%;
	font-style: 12px;
	display: block;
	margin: 0;
	color: #FFF;
	opacity: 0;
	z-index: 152;
}


.our-team-member-item.show .our-team-name,
.our-community-item.show .our-team-name,
.our-team-member-item.show .our-team-title,
.our-community-item.show .our-team-title{
	opacity: 1 !important;
}






@media screen and (min-width: 701px){
	.our-team-image-box:hover:after,
	.our-team-member-item:hover:after,
	.our-community-item:hover:after{
		position: absolute;
		content: " ";
		top: 0px;
		left:0px;
		display: inline-block;
		background-color: rgba(0,0,0,0.5);
		width: 100%;
		height: 100%;
		color: #FFF;
		transition:all 0.5s ease;
		text-align: center;
		z-index: 151;
	}

	.our-team-image-box.show:hover:after,
	.our-team-member-item.show:hover:after,
	.our-community-item.show:hover:after{
		background-color: rgba(0,0,0,0);
	}
	.our-team-image-box:hover *,
	.our-team-member-item:hover *,
	.our-community-item:hover *{
		opacity: 1
	}

	.our-team-image-box:hover a.linkedin-link,
	.our-team-member-item:hover a.linkedin-link,
	.our-community-item:hover a.linkedin-link{
		opacity: 0.7 !important;
	}
}

.our-team-member-item.big{
	display: none;
}

.our-team-member-item.big:nth-child(1),
.our-team-member-item.big:nth-child(2),
.our-team-member-item.big:nth-child(3)
{
	display: inline-block;
}


@media screen and (min-width: 701px){

	.our-team-member-item.big{
		width: 180px;
		height: 180px;
	}
	.our-team-member-item.big img{
	}
	.our-team-member-item.big a.linkedin-link{
	}
	.our-team-member-item.big .our-team-name{
		top: 35%;
		font-size: 24px;
	}
	.our-team-member-item.big .our-team-title{
		top: 50%;
	}


	.our-team-member-item.big.show{
		display: none;
	}

}

@media screen and (max-width: 700px){
	.our-team-image-box,.our-team-item:nth-child(even) .our-team-image-box{
	    width: 250px;
	    height: 250px;
	    float: none;
	    margin: auto auto 20px;
	}
	.our-team-box .our-team-item:nth-child(even) .our-team-image-box{
		margin: auto auto 20px;
		float: none;
	}

	.our-team-member-item, .our-community-item {
	    width: 50%;
	    height: auto;
	}
}





