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

body div.bios {display: flex; align-items: flex-start; flex-wrap: wrap;}
body div.bios .bio {width: calc(100% / 3);}
body div.bios .bio .profile {min-height:105px; overflow:hidden;  border: 1px solid #000000; margin-bottom: 16px; cursor: pointer; margin-top: 0px; width: calc(100% - 11px); position: relative; z-index: 1;}
body div.bios .bio:nth-child(3n + 1) .profile {margin-right: 11px;}
body div.bios .bio:nth-child(3n + 2) .profile {margin-left: calc(11px / 2); margin-right: calc(11px / 2);}
body div.bios .bio:nth-child(3n + 3) .profile {margin-left: 11px;}
body div.bios .bio .profile.has-image {margin-top: 0px;}
body div.bios .bio .profile .image {display: none;}
body div.bios .bio .profile.has-image .image {display: block; background-position: center center; background-size: cover; background-repeat: no-repeat; width: 100%; height: 175px; 
	position: relative; background-image: url(../img/placeholder.jpg);}
body div.bios .bio .profile.has-image .image::after {content:''; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; background-color: #000000; opacity: 0; 
	transition: all 0.25s ease-in-out; pointer-events: none;}


body div.bios .bio .profile.has-image:hover .image::after {opacity: 0.75;}
body div.bios .bio .profile:not(.has-image)::after {content:''; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; background-color: #000000; opacity: 0; 
	transition: all 0.25s ease-in-out; pointer-events: none; z-index: -1;}
body div.bios .bio .profile:not(.has-image):hover .text h5, body div.bios .bio .profile:not(.has-image):hover .text .title {color: #ffffff !important;}
body div.bios .bio .profile:not(.has-image):hover::after {opacity: 1;}
body div.bios .bio .profile .text {padding: 18px 32px;}
body div.bios .bio .profile.has-image .text {padding: 18px 26px 18px 20px;}
body div.bios .bio .profile h5 {margin: 0px;}
body div.bios .bio .profile .title {margin: 0px;}
body div.bios .bio .body {width: 300%; opacity: 0; height: 0px; min-height: 0px; transition: height 0.5s ease-in-out; pointer-events: none; position: relative; z-index: 0; overflow: hidden;}
body div.bios .bio:nth-of-type(3n + 2) .body {transform: translateX(calc(-100% / 3));}
body div.bios .bio:nth-of-type(3n + 3) .body {transform: translateX(calc(-100% / 1.5));}
body div.bios .bio .body .title {margin: 0px 0px 30px 0px;}
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-top: 1px solid #000000; 
	border-bottom: 1px solid #000000; margin-bottom: 16px;}
body div.bios .bio.open .body h4 {margin-bottom: 0px;}

/* ---|MOBILE ADJUSTMENTS|--- */
@media screen and (max-width: 1200px) {
body div.bios .bio .profile {min-height: 150px; }
}
@media screen and (max-width: 1100px) {
body div.bios {display: block;}
body div.bios .bio {width: 100% !important;}
body div.bios .bio .profile {min-height: 0; margin-left: 0px !important; margin-right: 0px !important; width: 100% !important; margin-top: 0px !important; margin-bottom: 18px !important;}
body div.bios .bio .profile.has-image .image {display: none;}
body div.bios .bio .profile:not(.has-image):hover .text h5, body div.bios .bio .profile:not(.has-image):hover .text .title {color: initial !important;}
body div.bios .bio.open .profile:not(.has-image):hover .text h5, body div.bios .bio.open .profile:not(.has-image):hover .text .title {color: #ffffff !important;}
body div.bios .bio .profile .image::after, body div.bios .bio .profile::after {background-color: initial !important;}
body div.bios .bio .profile::after {content:''; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; background-color: #000000; opacity: 0; transition: all 0.25s ease-in-out; 
	pointer-events: none; z-index: -1;}
body div.bios .bio.open .profile .text h5, body div.bios .bio.open .profile .text .title {color: #ffffff !important;}
body div.bios .bio.open .profile::after {opacity: 0.75; background-color: #000000 !important;}
body div.bios .bio .profile .text {padding: 15px 15px 30px 15px !important;}
body div.bios .bio .body {width: 100% !important; transform: none !important;}
body div.bios .bio .body .title {margin: 0px 0px 15px 0px;}
}