/*********** BIO CSS ***********/

body div.bios {display: flex; justify-content: space-between; flex-wrap: wrap;}
body div.bios .bio {width: calc(50% - 12px);}
body div.bios .bio .profile {min-height:200px; overflow:hidden;  border: 1px solid #c7cacc; margin-bottom: 20px; cursor: pointer; margin-top: 0px; width: 100%; position: relative; z-index: 1; display: flex; align-items:  stretch;}
body div.bios .bio:nth-child(2n + 1) .profile {margin-right: 24px;}
body div.bios .bio .profile.has-image { min-height: 270px; }
body div.bios .bio .profile .image {display: none; background-position: center center; background-size: cover; background-repeat: no-repeat; width: 248px; min-height: 270px; background-image: url(../img/placeholder.jpg);}
body div.bios .bio .profile.has-image .image {display: block;}
body div.bios .bio .profile .text {padding: 43px 27px 18px 27px; width: 100%}
body div.bios .bio .profile.has-image .text {width: calc(100% - 248px);}
body div.bios .bio .profile h4 {margin-top: 0; margin-bottom: 7px;}
body div.bios .bio .profile .title {margin: 0px; opacity: 1; transition: all 0.25s ease-in-out; font-family: aktiv-grotesk, sans-serif; font-size: 18px; font-weight: 500; font-stretch: normal; font-style: normal; line-height: 1.33; letter-spacing: normal; color:  #617f95;}
body div.bios .bio .body {width: calc(200% + 24px); opacity: 0; height: 0px; min-height: 0px; transition: height 0.5s ease-in-out; pointer-events: none; position: relative; z-index: 0; overflow: hidden; display: flex;}
body div.bios .bio:nth-of-type(2n) .body {transform: translateX(calc(((-100% / 2) - 12px)));}
body div.bios .bio .body .image {width: 248px; padding-bottom: 20px; padding-right: 66px;}
body div.bios .bio .body .text {width: calc(100% - 248px); padding-top: 6px;}
body div.bios .bio .body .name {display:  flex; justify-content: flex-start; align-items: flex-end; margin-bottom: 10px;}
body div.bios .bio .body .name h4 {margin-top: 0; margin-bottom: 0px; line-height: 1;}
body div.bios .bio .body .name p {margin-bottom: 1px; margin-left: 28px; padding-left: 28px; line-height: 1; position:  relative;}
body div.bios .bio .body .name p::before {content: ''; position: absolute; left: 0px; top: -5px; bottom: 2px; width: 1px; background-color: #979797;}
body div.bios .bio .body .title {margin: 0px 0px 30px 0px; font-family: aktiv-grotesk, sans-serif; font-size: 18px; font-weight: 500; font-stretch: normal; font-style: normal; line-height: 1.33; letter-spacing: normal; color:  #617f95; margin-bottom: 43px;}
body div.bios .bio.open .profile {border: 1px solid #175494;}
body div.bios .bio.open .profile .title {opacity: 1;}
body div.bios .bio.open .body {opacity: 1; height: auto; pointer-events: all; transition: height 0.5s ease-in-out, opacity 0.5s ease-in; border: solid 1px #c7cacc; margin-bottom: 20px; padding: 48px;}
body div.bios .bio.open .body h4 {margin-bottom: 0px;}

/* ---|MOBILE ADJUSTMENTS|--- */
@media screen and (max-width: 1023px) {
	body div.bios .bio .profile {min-height: 120px;}
	body div.bios .bio .profile.has-image { min-height: 164px; }
	body div.bios .bio .profile .image {width: 150px; min-height: 164px;}
	body div.bios .bio .profile .text {padding: 18px;}
	body div.bios .bio .profile.has-image .text {width: calc(100% - 150px);}
	body div.bios .bio .profile .title {font-size: 14px;}
	body div.bios .bio.open .body {padding: 40px 24px;}
	body div.bios .bio .body .image {width: 150px; padding-right: 46px;}
	body div.bios .bio .body .text {width: calc(100% - 150px);}
	body div.bios .bio .body .title {font-size: 14px;}

}
@media screen and (max-width: 767px) {
	body div.bios .bio {width: 100%;}
	body div.bios .bio .body {width: 100% !important; display: block;}
	body div.bios .bio:nth-of-type(2n) .body {transform:  translateX(0);}
	body div.bios .bio .body .text {width:  100%; padding-top: 0;}
	body div.bios .bio .body .title {margin-bottom:  20px;}
	body div.bios .bio.open .body {padding: 24px 16px;}

}