body {
	/*-webkit-font-smoothing: antialiased;*/
}
.story_card__overlay {
	width: 100%;
	height: 100vh;
	z-index: 1;
	background: rgba(0, 0, 0, .5);
	margin-bottom: -50vh;
	position: relative;
	z-index: 1;
}
.story_card {
	padding-top: 60px;
	height: calc(100% - 60px);
	min-height: 490px;
	color: #333;
	position: relative;
}
.story_card__image img {
	display: none;
}
.story_card__list {
	height: 100%;
	overflow: hidden;
}
.story_card__item {
	width: 14.2857%;
	height: 100%;
	float: left;
	position: relative;
}
.story_card__item.is_inactive::before {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	content: '';
}

.story_card__item.is_inactive .story_card__image_container::before {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(0,0,0,.7);
	z-index: 1;
	content: '';
}
.story_card__link {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
	.story_card__item:not(.is_inactive) .story_card__link:hover {
		z-index: 1;
	}

.story_card__dummy {
	display: none;
}

.story_card__image_container {
	position: absolute;
	width: 100.5%;
	height: 62.5%;
	left: 50%;
	transform: translateX(-50%);
	overflow: hidden;
}
	.story_card__item:not(.is_inactive) .story_card__link:hover .story_card__image_container {
		width: 140%;
	}

.story_card__item:first-child .story_card__image_container,
.story_card__item:first-child .story_card__text {
	left: 0;
	transform: translateX(0%);
}

.story_card__item:last-child .story_card__image_container,
.story_card__item:last-child .story_card__text {
	right: 0;
	left: auto;
	transform: translateX(0%);
}
.story_card__image {
	position: absolute;
	top: 0;
	left: 50%;
	display: block;
	height: 100.5%;
	width: 140%;
	transform: translateX(-50%);
	background-position: 50% 50%;
	background-size: cover;
}
	.story_card__item:not(.is_inactive) .story_card__link:hover .story_card__image {
		width: 100%;
	}

.story_card__image {
	transition: transform 0s cubic-bezier(.39, .58, .7, 1) 0s,
				opacity 0s cubic-bezier(.39, .58, .7, 1) 0s;
	transform: translateX(-50%);
	will-change: opacity, transform;
}
	.story_card__item:not(.is_inactive) .story_card__link:hover .story_card__image {
		transition: transform 15s cubic-bezier(0.39, 0.58, 0.7, 1),
					opacity 12s cubic-bezier(.39, .58, .7, 1) 0s;
		transform: translateX(-50%) scale(1.5);
	}
	.story_card__item:not(.is_inactive) .story_card__link:hover .story_card__image_default {
		opacity: 0;
	}
.story_card__item.story_card__item:first-child .story_card__image {
	transform: translateX(0);
	left: 0;
}
.story_card__item.story_card__item:last-child .story_card__image {
	transform: translateX(0);
	left: auto;
	right: 0;
}
.story_card__item.story_card__item:not(.is_inactive):first-child:hover .story_card__image,
.story_card__item.story_card__item:not(.is_inactive):last-child:hover .story_card__image {
	transform: translateX(0) scale(1.5);
}

.story_card__text {
	position: absolute;
	width: 100.5%;
	height: 37.6%;
	background: #eee;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
	font-size: 2.1rem;
	font-family: BrutalMedium, Arial, sans-serif;
	line-height: 1;
}
	.story_card__item:not(.is_inactive) .story_card__link:hover .story_card__text {
		height: 43%;
		width: 140.5%;
		background: #fff;
		box-shadow: 0 0 24px rgba(0, 0, 0, 0.1);
	}

	.story_card__text::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		width: 10px;
		height: 100%;
		opacity: 0.1;
		background-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0) 100%);
	}
		.story_card__item:not(.is_inactive) .story_card__link:hover .story_card__text::before {
			display: none;
		}

.story_card__date {
	position: absolute;
	font-size: 25px;
	right: -230px;
	bottom: 35px;
	width: 250px;
	transform-origin: 0 100%;
	transform: rotate(-90deg);
	pointer-events: none;
	-webkit-font-smoothing: antialiased;
	color: #2554b3;
}
.story_card__item.is_inactive .story_card__date {
	color: hsla(220, 66%, 42%, .3);
}
.story_card__title {
	position: relative;
	font-size: 25px;
	opacity: 0;
	pointer-events: none;
	padding: 8%;
}
	.story_card__item:not(.is_inactive) .story_card__link:hover .story_card__title {
		opacity: 1;
	}

.story_card__blind {
	background-color: #699bff;
	height: 50%;
}