@charset "UTF-8";
/* CSS Document */

.subtitle-space{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.subtitle-text-space {
	width: fit-content;
}
.story-wrap {
	max-width: 870px;
	width: 70vw;
	margin: 0 auto;
	margin-bottom: 2.5em;
}
.secondary-nav {
	padding: 0 10vw;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: stretch;
	gap: 2.5vw;
}
.secondary-buttons {
	background-color: #E1D5AC;
	width: 5vw;
	display: flex;
	cursor: pointer;
}
.rollover-state{
	background-color: #F195A5;
	height: 0;
	align-self: flex-end;
	width: 100%;
	transition-timing-function: ease-in-out;
	transition: height 0.5s;
}
.rollover-focus {
	height: 30%;
}
.selected {
	height: 50%;
}

.case-studies {
	text-transform: uppercase;
	font-size: 24px;
}
.case-studies a {
	text-decoration: underline;
	font-size: 48px;
}

.content-hidden {
	opacity: 0;
	transition: opacity 0.5s;
	transition-timing-function: ease-in-out;
}
.content-show {
	opacity: 100;
	transition: opacity 0.5s;
	transition-timing-function: ease-in-out;
  	transition-delay: 0.3s;
}

.design-story {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	grid-column-gap: 0px;
	grid-row-gap: 0px;
}
.story-part {
	grid-area: 1/1/2/2;
	margin-bottom: 16px;
	width: 70vw;
}
.story-head{
	font-size: 35px;
	line-height: 1.1;
	margin-bottom: 8px;
}
.story-paragraph {
	margin-top: 16px;;
	font-size: 18px;
	line-height: 1.4;
	max-width: 850px;
}
.story-image {
	width: 100%;
	max-width: 870px;
	aspect-ratio: 3.4 / 1;
}
.story-image img {
	width: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

@media screen and (max-width: 800px) {
	.secondary-nav {
		padding: 0 8vw;
	}
	.secondary-buttons {
		width: 5vw;
	}
	.story-part {
		width: 90vw;
	}
	.story-wrap {
		width: 90vw;
	}
	.story-head {
		font-size: 27px;
	}
	.story-paragraph {
		 font-size: 16px;
	}
	.case-studies {
		font-size: 22px;
	}
	.case-studies a {
		font-size: 32px;
	}
}
@media screen and (max-width: 670px) {
	.secondary-nav {
		padding: 0 6vw;
	}
	.secondary-buttons {
		width: 4vw;
	}
}

@media screen and (min-width: 889px) {
	.secondary-nav {
		padding: 0 4vw;
	}
}

@media screen and (min-width: 1065px) {
	
	.secondary-buttons {
		width: 3vw;
	}
}
@media screen and (min-width: 1200px) {
	
}