#teammember_list
{
	padding-bottom:  		50px;
	max-width:  			1600px;
	margin:  				0 auto;
}



#teammember .commons_wrap
{
	background-color: 	#f4f4f4;
	padding:   			0 5%;
}

.teammember_list_group
{
	margin-bottom: 			50px;
}

	.teammember_list_group:after
	{
		content: 			" ";
		display: 			block;
		clear: 				both;
	}

	
.teammember_list_group h2
{
	text-transform: 	uppercase;
	font-size: 			18pt;
}
.teamemember_type_description
{
	font-size: 			12pt;
	color: 				#999;
	margin-bottom: 		20px;
}

/**************************
 * List
 **************************/
#teammember_list::after
{
	content: 			" ";
	display: 			block;
	clear: 				both;
}
#teammember_list_items
{
	padding-bottom: 			100px;
}
	#teammember_list_items::after
	{
		content: 			" ";
		display: 			block;
		clear: 				both;
	}
	

/**************************
 * Items
 **************************/
.teammember_list_item
{
	display: 				block;
	position: 				relative;
	float: 					left;
	width: 					19%;
	margin-right: 			1%;
	margin-bottom: 			3%;
	height: 				500px;
	overflow: 				hidden;
	background-color: 		#fff;
	-moz-border-radius:		5px;
	-webkit-border-radius:	5px;
	border-radius:			5px;
	-webkit-transition:		all .2s ease-out;
	-moz-transition:		all .2s ease-out;
	-o-transition:			all .2s ease-out;
	transition:				all .2s ease-out;
	box-shadow:  			0 0 0 rgba(0,0,0,.15);
	cursor:  				pointer;
}



.teammember_list_item.hidden
{
	display:  				none;
}

#teammember_list_button
{
	text-align:  			center;
	padding-bottom:  		100px;
}


.teammember_list_item:hover,
.teammember_list_item.hover
{
	box-shadow:  			0 10px 30px rgba(0,0,0,.15);
}
	.teammember_list_item_photo
	{
		position:  			relative;
		padding-top:  		100%;
		background-color:  	rgba(0,0,0,.05);
	}
	.teammember_list_item_photo::after
	{
		content: 			" ";
		display: 			block;
		clear: 				both;
		position:   		absolute;
		left:  				50%;
		bottom:  			0;
		height:  			4px;
		background-color:	#7BD5F5;
		width:   			0;
		z-index:  			100;
		-webkit-transition:	all .2s ease-out;
		-moz-transition:	all .2s ease-out;
		-o-transition:		all .2s ease-out;
		transition:			all .2s ease-out;
	}

	.teammember_list_item:hover .teammember_list_item_photo::after,
	.teammember_list_item.hover .teammember_list_item_photo::after
	{
		left:  				0;
		width:  			100%;
	}
	.teammember_list_picture
	{
		position: 				absolute;
		top: 					0;
		left: 					0;
		right: 					0;
		z-index: 				1;
		bottom: 				0;
		opacity: 				0;
		background-color: 		#ddd;
		background-position: 	center center;
		background-repeat: 		no-repeat;
		background-size: 		cover;
		-webkit-transition:		all .2s ease-out;
		-moz-transition:		all .2s ease-out;
		-o-transition:			all .2s ease-out;
		transition:				all .2s ease-out;
	}
	/*.teammember_list_picture2*/
	/*{*/
		/*position: 				absolute;*/
		/*top: 					0;*/
		/*left: 					0;*/
		/*right: 					0;*/
		/*bottom: 				0;*/
		/*z-index: 				0;*/
		/*background-position: 	center center;*/
		/*background-repeat: 		no-repeat;*/
		/*background-size: 		cover;*/
		/*-webkit-transition:		all .2s ease-out;*/
		/*-moz-transition:		all .2s ease-out;*/
		/*-o-transition:			all .2s ease-out;*/
		/*transition:				all .2s ease-out;*/
	/*}*/
	.teammember_list_picture.display
	{
		opacity: 				1;
	}
	
	/*.teammember_list_item:hover .teammember_list_picture*/
	/*{*/
		/*opacity:				0 !important;*/
	/*}*/
	
	
	.teammember_list_info
	{
		padding: 			30px 30px;
		height: 			170px;
	}
	.teammember_list_close
	{
		position:  				absolute;
		right:  				0;
		bottom:  				0;
		margin:  				10px 20px;
		font-size: 				20pt;
		color:  				#7BD5F5;
		width:  				20px;
		height:  				20px;
		z-index:  				1000;
		background-image: 		url(../images/commons/arrow.svg);
		background-position:	center center;
		background-repeat: 		no-repeat;
		background-size: 		cover;
		cursor:  				pointer;
	}
		.teammember_list_name
		{
			font-weight: 			700;
			font-size: 				15pt;
		}
	
		.teammember_list_function
		{
			color:  				#7BD5F5;
		}

		.teammember_list_description
		{
			font-weight: 			300;
			font-size: 				11pt;
			margin:  				10px 0;
			color:  				#777;
		}

		.teammember_list_detail
		{
			display:  			none;
		}

/*************************************
 *
 *************************************/
#teammember_popin
{
	content: 			" ";
	display: 			block;
	clear: 				both;
	position: 			fixed;
	z-index: 			-1;
	top: 				0;
	left: 				0;
	right: 				0;
	bottom: 			0;
	opacity: 			0;
	background-color: 	rgba(0,0,0,.8);
	text-align: 		center;
	-webkit-transition:	all .4s ease-out;
	-moz-transition:	all .4s ease-out;
	-o-transition:		all .4s ease-out;
	transition:			all .4s ease-out;
}
#teammember_popin.display
{
	opacity: 			1;
	z-index: 			10000;
}

	#teammember_popin_inner:empty { display: none; }
	#teammember_popin_inner
	{
		position:   			relative;
		-webkit-transition:		all .2s ease-out;
		-moz-transition:		all .2s ease-out;
		-o-transition:			all .2s ease-out;
		transition:				all .2s ease-out;
	}
	#teammember_popin .teammember_list_item_inner
	{
		position:  				relative;
		background-color:  		#fff;
		height:  				60vh;
		max-width:  			1000px;
		margin:  				20vh auto;
		-moz-border-radius:		5px;
		-webkit-border-radius:	5px;
		border-radius:			5px;
		overflow:  				hidden;
		box-shadow:  			0 0 0 rgba(0,0,0,.15);
		text-align:  			left;
	}

	#teammember_popin .teammember_list_item_photo
	{
		float:  			left;
		height:  			500px;
		width:  			40%;
		padding:  			0;
		margin:  			30px 0 0 30px;
		border-bottom:    	4px solid #7BD5F5;
		-moz-border-radius:		5px;
		-webkit-border-radius:	5px;
		border-radius:			5px;
		overflow:  				hidden;
	}
	#teammember_popin .teammember_list_name
	{
		font-weight: 			700;
		font-size: 				22pt;
	}
	#teammember_popin .teammember_list_info
	{
		float:  			right;
		width:  			54%;
		height:  			100%;
		overflow-y:  		auto;
		padding:  			30px 30px;
	}
	#teammember_popin .teammember_list_info_head
	{
	}

	#teammember_popin .teammember_list_function
	{
		color:  				#7BD5F5;
	}

	#teammember_popin .teammember_list_description
	{
		font-size: 				13pt;
		color:  				#AAA;
		font-weight:  			600;
	}

	#teammember_popin .teammember_list_detail::after
	{
		content: 			" ";
		display: 			block;
		clear: 				both;
	}
	#teammember_popin .teammember_list_detail
	{
		clear:  			both;
		display:  			block;
		font-weight:  		200;
		color:  			rgba(0,0,0,.5);
		line-height:  		1.6;
		/*padding-top:  		20px;*/
	}

	#teammember_popin .teammember_list_close
	{
		top:  					0;
		right:  				0;
		background-size: 		36px;
		margin:  				40px;
		background-image: 		url(../images/commons/close-color.svg);
		background-position:	center center;
		background-repeat: 		no-repeat;
		opacity:  				0.5;
		-webkit-transition:	all .2s ease-out;
		-moz-transition:	all .2s ease-out;
		-o-transition:		all .2s ease-out;
		transition:			all .2s ease-out;
	}
	#teammember_popin .teammember_list_close:hover
	{
		transform:  			rotate(180deg);
	}

/***************************
 *
 * Responsive
 *
 ***************************/
/*@media only screen !* Smartphone Horizontal *!*/
/*and (min-width : 2500px)*/
/*{*/
	/*.teammember_list_item*/
	/*{*/
		/*width:        15%;*/
		/*margin-right: 1%;*/
		/*height:       500px;*/
	/*}*/
/*}*/
/*@media only screen !* Smartphone Horizontal *!*/
/*and (min-width : 2000px)*/
/*{*/
	/*.teammember_list_item*/
	/*{*/
		/*width:        19%;*/
		/*margin-right: 1%;*/
		/*height:       500px;*/
	/*}*/
/*}*/


/*************************************
 * Dimensionnement des members
 *************************************/
@media only screen
and (max-width : 1800px)
{
	#teammember_list
	{
		max-width:  			1300px;
		margin:  				0 auto;
	}
	.teammember_list_item
	{
		 width: 				24%;
		 margin-right: 			1%;
		 /*height: 				500px;*/
	}
}

@media only screen
and (max-width : 1400px)
{
	#teammember_list
	{
		max-width:  			970px;
		margin:  				0 auto;
	}
	.teammember_list_item
	{
		width: 					32%;
		margin-right: 			1%;
		/*height: 				500px;*/
	}
}
@media only screen
and (max-width : 1000px)
{
	#teammember_list
	{
		max-width:  			650px;
	}
	.teammember_list_item
	{
		width: 					49%;
		margin-right: 			1%;
		/*height: 				500px;*/
	}
}



/*@media only screen !* Smartphone Horizontal *! */
/*and (max-width : 1300px)*/
/*{*/

/*}*/


@media only screen /* Smartphone Horizontal */
and (max-width : 1000px)
{
	#teammember_popin .teammember_list_item_inner
	{
		max-width:        800px;
	}

	#teammember_popin .teammember_list_item_photo
	{
		position:  			absolute;
		top:  				0;
		left:  				0;
		bottom:  			auto;
		margin:  			35px 26px;
		width:  			200px;
		height:  			200px;
	}
	#teammember_popin .teammember_list_name
	{
		font-weight: 			700;
		font-size: 				21pt;
	}
	#teammember_popin .teammember_list_info
	{
		margin-left:   		0 !important;
		padding:  			25px 25px;
	}
	#teammember_popin .teammember_list_info_head
	{
		float:  				none;
		max-width:  			none;
		padding:  				0;
	}

	#teammember_popin .teammember_list_function
	{
		color:  				#7BD5F5;
		font-size: 				15pt;
	}

	#teammember_popin .teammember_list_description
	{
		float:  				none;
		width:  				auto;
		border-left:  			0;
		line-height:  			1.2;
		padding-left:  			0;
		color:  				#777;
		margin-left:  			0;
	}

	#teammember_popin .teammember_list_detail::after
	{
		content: 			" ";
		display: 			block;
		clear: 				both;
	}
	#teammember_popin .teammember_list_detail
	{
		clear:  			both;
		display:  			block;
		font-weight:  		200;
		color:  			rgba(0,0,0,.5);
		padding-top:  		20px;
	}


}


@media only screen /* Smartphone Horizontal */
and (max-width : 750px)
{

	/*************************************
	 * Popin
	 *************************************/

	#teammember_popin:empty { display: none; }
	#teammember_popin
	{
	}

	#teammember_popin .teammember_list_item_inner
	{
		margin:  				0;
		height:  				100%;
		top:  					0;
		left:  					0;
		right:  				0;
		bottom:  				0;
		-moz-border-radius:		0;
		-webkit-border-radius:	0;
		border-radius:			0;
	}
	#teammember_popin .teammember_list_info
	{
		float:   		none;
		width:  		100%;
		height:  		50vh;
		padding-bottom:  150px;
		overflow-y:  	auto;
	}
	#teammember_popin .teammember_list_item_inner
	{
	}
	#teammember_popin .teammember_list_detail
	{
		/*padding-top:  			0;*/
	}
	#teammember_popin .teammember_list_item_photo
	{
		float:   				none;
		position:  				relative;
		top:  					0;
		left:  					0;
		right:  				0;
		bottom:  				0;
		margin: 				0;
		width: 					100%;
		height:  				50vh;
		overflow-y:  			auto;
		-moz-border-radius:		0;
		-webkit-border-radius:	0;
		border-radius:			0;
	}

	#teammember_popin .teammember_list_close
	{
		margin:          30px;
	}
}
@media only screen /* Smartphone Horizontal */
and (max-width : 600px)
{
	#teammember .commons_wrap
	{
		padding:  			10px 20px;
		margin:  			0;
	}
	.teammember_list_item
	{
		float: 					none;
		width: 					auto;
		height: 				auto;
		min-height:  			150px;
		margin-bottom:  		20px;
	}
	.teammember_list_item_photo
	{
		position:  			absolute;
		top:  				0;
		left:  				0;
		bottom:  			0;
		padding:   			0;
		width:  			40%;
		height:  			auto;
	}
	.teammember_list_info
	{
		margin-left:   		40%;
		padding: 			5px 10px;
	}
	.teammember_list_name
	{
		font-size: 				13pt;
	}

	.teammember_list_function
	{
		font-size: 				11pt;
	}

	.teammember_list_description
	{
		font-size: 				9pt;
		margin:  				5px 0;
	}
	.teammember_list_info::after
	{
		content: "";
	}


}