.oc-bio {
	position: relative; /** To position label as overlay */
	padding-top: 1em;
}

.oc-bio__header {
	display: table;
	table-layout: fixed;
	margin-bottom: .8em;
	border-bottom: 1px solid #c7dfe9;
	width: 100%;
}

.oc-bio__headerItem {
	display: table-cell;
	vertical-align: bottom;
	width: 75%;
}

.oc-bio__image {
	width: 100%;
}

.oc-bio__text {
	padding: 0 0 .5em 1em;
}

.oc-bio__text > span {
	display: block;
}

.oc-bio__name {
	margin-bottom: .15em;
	font-size: 1.65em;
	line-height: 1.2;
}

.oc-bio__title {
	font-weight: bold;
}

.oc-bio__org {
	font-style: italic;
	opacity: .7;
	margin-bottom: .3em;
}

.oc-bio__intro {
	display: block;
	max-height: 4.5em;
	overflow: hidden;
	opacity: 1;
	transition: max-height .2s ease , opacity .2s;
	margin-bottom: 0;
}

.oc-more {
	white-space: nowrap;
}

.oc-more:after {
	content: "\00a0\2193";
	font-family: "icons";
}

@media screen and (max-width: 480px){
	.oc-more:after {
		position: absolute;
		left: 50%;
		bottom: .4em;
	}
}

/**
 * Show/hide full story
 */

.oc-bio__label {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	text-indent: -999em;
}

.oc-bio__checker {
	position: absolute;
	left: -999em;
}

.oc-bio__body {
	transform: translateY(-3em);
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height .3s ease .1s, opacity .1s;
}

@media screen and (min-width: 481px) {
	.oc-bio__body {
		padding-left: calc(25% + 1em);
	}
}

.oc-bio__checker:checked + .oc-bio .oc-bio__intro {
	max-height: 0;
	opacity: 0;
}

.oc-bio__checker:checked + .oc-bio .oc-bio__body {
	transform: translateY(0);
	max-height: 120em;
	opacity: 1;
}