/* ==========================================================================
   Erick van Egeraat: portrait and quotes, biography, lists by year.
   Measured on the original /erick-van-egeraat at 1612, 1024 and 375 wide.
   ========================================================================== */

.eve-erick {
	margin-top: 55px;
	margin-bottom: 15px;
}

@media (min-width: 768px) {
	.eve-erick {
		margin: 0;
		padding: 100px 0 50px;
	}
}

@media (min-width: 990px) {
	.eve-erick {
		padding-top: 0;
	}
}

/* --------------------------------------------------------------------------
   Header: portrait left, the quote beside it, Beyond Architecture top right
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
	.eve-erick__header {
		background-color: var(--eve-bg-footer);
	}
}

.eve-erick__header-in {
	position: relative;
	display: flow-root;
}

.eve-erick__portrait img {
	display: block;
	width: 100%;
	height: auto;
}

@media (min-width: 768px) {
	.eve-erick__portrait,
	.eve-erick__quotes {
		float: left;
		width: 40%;
	}

	.eve-erick__portrait {
		margin-left: -120px;
	}

	.eve-erick__portrait img {
		width: auto;
	}
}

@media (min-width: 990px) {
	.eve-erick__portrait {
		margin-left: 0;
	}
}

/* The quote: 34px on a 13px line, as the original (its quote lines are
   34 high); on phones an empty 126px box sat above it */
.eve-erick__quotes {
	width: 100%;
	margin: 10% 0 15px;
	padding: 126px 15px 0;
	line-height: 1.2;
}

@media (min-width: 768px) {
	.eve-erick__quotes {
		width: 60%;
		margin: 19% 0 15% -1%;
		padding: 0;
		line-height: 1.1;
	}
}

@media (min-width: 990px) {
	.eve-erick__quotes {
		width: 40%;
		margin: 18% 0 15% -3%;
	}
}

@media (min-width: 1280px) {
	.eve-erick__quotes {
		margin: 15% 0 15% -5%;
	}
}

.eve-erick__quote {
	font-size: 34px;
	line-height: 1;
}

.eve-erick__quote span {
	display: inline-block;
	visibility: hidden;
}

.eve-erick__quote span.is-in {
	visibility: visible;
	animation: eve-letter-in 1s both;
}

.eve-erick__quote span.is-out {
	animation: eve-letter-out 1s both;
}

@keyframes eve-letter-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes eve-letter-out {
	from { opacity: 1; }
	to { opacity: 0; }
}

/* Beyond Architecture: the outlined button, the label sliding on hover */
.eve-erick__beyond {
	position: absolute;
	top: 25px;
	right: 45px;
	display: none;
	height: 42px;
	overflow: hidden;
	font-size: 15px;
	line-height: 1.7;
	color: #fff;
	border: 1px solid #fff;
	transition: border-color 0.3s, background-color 0.3s;
	transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

@media (min-width: 768px) {
	.eve-erick__beyond { display: block; }
}

@media (min-width: 990px) {
	.eve-erick__beyond { right: 40px; }
}

@media (min-width: 1280px) {
	.eve-erick__beyond { top: 65px; right: 10px; }
}

.eve-erick__beyond > span {
	display: block;
	height: 44px;
	padding: 6px 30px;
	background-color: var(--eve-bg);
	transition: transform 0.3s, opacity 0.3s;
	transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.eve-erick__beyond > span + span {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding-top: 7px;
	background: none;
	opacity: 0;
	transform: translate3d(0, 25%, 0);
}

.eve-erick__beyond:hover {
	border-color: rgba(69, 72, 74, 0.8);
	background-color: rgba(69, 72, 74, 0.8);
}

.eve-erick__beyond:hover > span {
	opacity: 0;
	transform: translate3d(0, -25%, 0);
}

.eve-erick__beyond:hover > span + span {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

/* --------------------------------------------------------------------------
   Biography and the lists: the original's 10/12 (phone, 768) and 8/12 column
   -------------------------------------------------------------------------- */

/* Phone: biography and lists on a dark panel */
@media (max-width: 767px) {
	.eve-erick__main {
		display: flow-root;
		margin-bottom: 40px;
		padding-bottom: 37px;
		background-color: var(--eve-bg-footer);
	}
}

.eve-erick__col {
	position: relative;
	display: flow-root;
	width: calc((100% + 40px) * 10 / 12);
	margin-left: calc((100% + 40px) / 12 - 20px);
	padding: 0 20px;
}

@media (min-width: 990px) {
	.eve-erick__col {
		width: calc((100% + 40px) * 8 / 12);
		margin-left: calc((100% + 40px) * 2 / 12 - 20px);
	}
}

.eve-erick__bio {
	padding-bottom: 65px;
}

@media (min-width: 990px) {
	.eve-erick__bio {
		margin-top: -6px;
	}
}

@media (min-width: 1280px) {
	.eve-erick__bio {
		margin-top: -35px;
	}
}

.eve-erick__bio-title {
	margin: 20px 0 22px;
	font-size: 28px;
}

@media (min-width: 768px) {
	.eve-erick__bio-title {
		margin-bottom: 25px;
		font-size: 33px;
	}
}

@media (min-width: 990px) {
	.eve-erick__bio p {
		margin-bottom: 30px;
	}
}

.eve-erick__acrd {
	display: block;
	width: 100%;
	margin: 0 0 10px;
	padding: 0;
	font-size: 22px;
	line-height: 1.7;
	text-align: left;
	color: #fff;
	background: none;
	border: 0;
}

.eve-erick__count {
	margin-left: 6px;
	font-size: 16px;
	color: #41484d;
}

.eve-erick__acrd .eve-glyph {
	position: absolute;
	top: 13px;
	right: 46px;
	width: 10px;
	font-size: 11px;
	transition: transform 0.5s ease;
}

@media (max-width: 767px) {
	.eve-erick__acrd .eve-glyph {
		right: 20px;
	}
}

.eve-erick__acrd[aria-expanded="true"] .eve-glyph {
	transform: rotate(-180deg);
}

.eve-erick__line {
	height: 1px;
	margin: 0 -20px 20px;
	border-bottom: 1px solid #2e3134;
}

/* Opens with a height transition, as Bootstrap's collapse (0.35s) */
.eve-erick__body {
	overflow: hidden;
	transition: height 0.35s ease;
}

.eve-erick__items {
	padding-bottom: 50px;
}

.eve-erick__items ul {
	margin: 0 0 10px;
	padding-left: 40px;
}