.membre {
	 box-shadow: 0px 2px 6px 0px #ccc;
	 position: relative;
	 overflow: hidden;
	 width: 240px;
	 /* height: 200px; */
	 transition: all 0.5s ease-in;
}
.imgs-wds{
	width: 255px;
    height: 270px;
}
 .membre .info {
	 background-color: rgba(0, 0, 0, 0.5);
	 padding: 5px 5px;
	 position: absolute;
	 text-align: center;
	 bottom: 0;
	 height: 110px;
	 width: 100%;
	 transition: all 0.5s ease-in;
}
 .membre .name {
	 color: #fff;
	 font-size: 21px;
	 color: #f50319;
	 text-align: center;
	 font-weight: 700;
	 margin-bottom: 10px;
}
 .membre .sp-sub {
	 color: #fff;
	 text-align: center;
	 font-size: 14px;
	 font-weight: 600;
}
 .membre .text {
	 margin: 15px 10px 15px 0px;
	 font-size: 14px;
	 text-align: center;
	 color: #fff;
}
 .membre .overly {
	 height: 0;
	 background-color: rgba(0, 0, 0, 0.5);
	 padding: 0;
	 position: absolute;
	 width: 100%;
	 display: block;
	 transition: all 0.5s ease-in;
}
 .membre .top {
	 top: -100%;
	 left: 0;
}
 .membre .bottom {
	 bottom: -100%;
	 left: 0;
	 height: 100%;
}
 .membre .left {
	 top: 0;
	 right: -100%;
	 height: 100%;
}
 .membre .social-icones {
	 display: inline-flex;
	 position: relative;
}
 .membre .social-icones .icon {
	 width: 40px;
	 height: 40px;
	 line-height: 40px;
	 background-color: #fff;
	 display: block;
	 text-align: center;
	 margin-right: 5px;
	 color: #000;
}
 .membre .to-top {
	 bottom: 0px;
	 transition: all 0.5s ease-in;
}
 .membre:hover .overly {
	 height: 100%;
	 padding: 20px 10px;
}
 .membre:hover .info {
	 position: absolute;
	 bottom: -80px;
	 padding: 0;
	 transition: all 0.5s ease-in;
}
 .membre:hover .top {
	 top: 0;
	 bottom: 0px;
}
 .membre:hover .bottom {
	 bottom: 0;
}
 .membre:hover .left {
	 right: 0;
}
 .membre:hover .to-top {
	 bottom: 100% !important;
	 transition: all 0.5s ease-in;
}
 @media screen and (max-width: 868px) {
	 .wrapper {
		 grid-template-columns: repeat(2, 1fr);
	}
}
 @media screen and (max-width: 600px) {
	 .wrapper {
		 grid-template-columns: 1fr;
	}
}