.bio-wrapper { display: flex; flex-wrap: wrap; }
.bio-wrapper .bio { display: flex; flex-direction:column; color: #606870; position: relative; -webkit-flex-basis: calc(33% - ((32px * 2) / 3)); flex-basis: calc(33% - ((32px * 2) / 3)); margin-right: 32px; margin-bottom: 32px; }
.bio-wrapper .bio:nth-of-type(3n) { margin-right: 0; }
.bio-wrapper .bio .image { position: relative; background-repeat: no-repeat; background-size: cover; -webkit-flex-basis: 260px; flex-basis: 260px; min-height: 260px; background-position: center; }
.bio-wrapper .bio .image:before { content:""; position: absolute; top:0; left:0; width:100%; height:100%; background: linear-gradient(90deg, rgba(234,234,234,1) 0%, rgba(237,237,237,1) 100%); z-index:-1; }
.bio-wrapper .bio .details { -webkit-flex-basis: calc(100% - 260px); flex-basis: calc(100% - 260px); padding:30px; background-color: #EDF2F6; }
.bio-wrapper .bio .name { color: #414042; font-size: 22px; font-weight: 700; line-height: 26px; margin-bottom: 5px; }
.bio-wrapper .bio .name span { display: inline-block; margin-left: 10px; color: #606870; font-size: 16px; }
.bio-wrapper .bio .title { font-size: 18px; font-weight: 700; }
.bio-wrapper .bio .details .description { margin: 24px 0; }
.bio-wrapper .bio.no-image .image { display: none; }
.bio-wrapper .bio .details { -webkit-flex-basis: 100%; flex-basis: 100%; }

.bio-wrapper .bio .bio-popup { display: none; background: rgba(65, 64, 66, 0.8); position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1010; align-items: center; justify-content: center; }
.bio-wrapper .bio .bio-popup .content { height: 90vh; display: flex; flex-direction:column; flex:1; position: relative; margin-left: auto; margin-right: auto; background-color: #EDF2F6; padding: 0; max-width: 660px; width: 100%; }
.bio-wrapper .bio .bio-popup .content .image { -webkit-flex-basis: 350px; flex-basis: 350px; background-repeat: no-repeat; background-position:  50% -50px; background-size:cover;  }
.bio-wrapper .bio .bio-popup .content .close { cursor: pointer; color: #414042; font-size: 16px; text-align: right; font-weight: 700; -webkit-flex-basis: 50px; flex-basis: 50px; padding:20px 30px; }
.bio-wrapper .bio .bio-popup .content .close i { color: #00B6DE; }
.bio-wrapper .bio .bio-popup .content .scrollable {  -webkit-flex-basis: calc(100% - 400px); flex-basis: calc(100% - 400px); overflow-y: scroll; padding: 10px 30px; font-size: 18px; line-height: normal; }
.bio-wrapper .bio .bio-popup .content .name-title { font-size: 20px; line-height: 28px; color: #062232; }
.bio-wrapper .bio .bio-popup .content .name-title strong { font-size: 40px; line-height: 42px; display: inline-block; margin-bottom: 10px; }
.bio-wrapper .bio .bio-popup .content h3 { font-size: 20px; line-height: 32px; font-weight: 600; margin-bottom: 10px; }

.bio-wrapper .bio.no-image .bio-popup .content .image { display: none; }
.bio-wrapper .bio.no-image .bio-popup .content .scrollable { -webkit-flex-basis: calc(100% - 50px); flex-basis: calc(100% - 50px); }

@media screen and (min-width: 1600px) {
	.bio-wrapper .bio  .image { background-size:80%; background-position: top center; }
}


@media screen and (max-width: 1024px) {
	.bio-wrapper .bio { -webkit-flex-basis: calc(50% - (32px  / 2)); flex-basis: calc(50% - (32px / 2)); }
	.bio-wrapper .bio:nth-of-type(3n) { margin-right: 32px; }
	.bio-wrapper .bio:nth-of-type(even) { margin-right: 0; }
	.bio-wrapper .bio .details { padding: 30px 20px; }
	.bio-wrapper .bio .bio-popup { padding:20px; }
	.bio-wrapper .bio .bio-popup .content .image { display: none; }
	.bio-wrapper .bio .bio-popup .content .scrollable { -webkit-flex-basis: calc(100% - 50px); flex-basis: calc(100% - 50px); }
}

@media screen and (max-width: 650px) {
	.bio-wrapper .bio { -webkit-flex-basis: 100%; flex-basis: 100%; margin-right: 0 !important; }
	.bio-wrapper .bio .name span { display: block; margin-left: 0; }
}