.series-openingdoors {
	position: relative;
	overflow: hidden;
	background-color: #fff;
}

.series-openingdoors-title-wrapper {
	position: relative;
	width: 33.333%;
	height: 50vw;
	z-index: 1;
}

.series-openingdoors-title-wrapper::before {
	content: '';
	display: block;
	position: absolute;
	right: 0;
	width: 200%;
	height: 100%;
	background-color: #3d1d74;
	-webkit-transform: skewX(15deg);
	-moz-transform: skewX(15deg);
	-ms-transform: skewX(15deg);
	transform: skewX(15deg);
    -webkit-transform-origin: 100% 0%;
    -moz-transform-origin: 100% 0%;
    -ms-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
}

.series-openingdoors-title-wrapper::after {
	content: '';
	display: block;
	position: absolute;
	background: repeating-linear-gradient( 
		90deg, 
		transparent 0px, 
		transparent 3px, 
		#fff 4px, 
		#fff 7px, 
		transparent 8px 
	);

	bottom: 0;
	height: 20%;
	width: 400%;
	-webkit-transform: skewX(15deg) translateX(-10%);
	-moz-transform: skewX(15deg) translateX(-10%);
	-ms-transform: skewX(15deg) translateX(-10%);
	transform: skewX(15deg) translateX(-10%);
    -webkit-transform-origin: 100% 0%;
    -moz-transform-origin: 100% 0%;
    -ms-transform-origin: 100% 0%;
    transform-origin: 100% 0%;

    opacity: 0.125;
}

.series-openingdoors-title-graphic {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	left: 25%;
	filter: drop-shadow(-1vw 1vw 0 #3d1d74);
}

.series-openingdoors-photo {
	position: absolute;
	top: 0;
	left: 33.333%;
	width: 66.666%;
	height: 50vw;
	display: block;
	object-fit: cover;
	object-position: 50% 25%;
	font-family: 'object-fit: cover; object-position: 50% 25%;';
	-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
	filter: grayscale(100%);
}

.series-openingdoors-details {
	padding: 1em;
	position: relative;
	text-align: center;
	z-index: 1;
}

.series-openingdoors-details::before {
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	bottom: 0;
	right: -50%;
	background-color: #eaaa56;

	-webkit-transform: skewX(15deg);
	-moz-transform: skewX(15deg);
	-ms-transform: skewX(15deg);
	transform: skewX(15deg);
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}

.publication-bostonia .series-openingdoors-name,
.publication-bostonia .series-openingdoors-title {
	position: relative;
	font-family: "BentonSansComp","Benton-Sans","Helvetica",sans-serif;
	margin: 0;
	line-height: 1.25em;
}

.publication-bostonia .wp-block-separator,
hr {
	background: url(/bostonia/wpassets/features/series-openingdoors/hr.png);
	height: 30px;
	background-repeat: repeat;
	width: calc(50% - 60px);
	width: 100%;
}

@media screen and (min-width: 500px) {
	.publication-bostonia .wp-block-separator,
	hr {
		width: 80%;
	}
}

@media screen and (min-width: 768px) {

	.series-openingdoors-title-wrapper {
		width: 40%;
	}


	.series-openingdoors-title-wrapper::after {
		background: repeating-linear-gradient( 
			90deg, 
			transparent 0px, 
			transparent 7px, 
			#fff 8px, 
			#fff 15px, 
			transparent 16px 
		);
		height: 10%;
	}

	.series-openingdoors-title-graphic {
		width: 80%;
		left: 50%;
	}

	.series-openingdoors-photo {
		left: 40%;
		width: 60%;
	}

	.series-openingdoors-details {
		position: absolute;
		bottom: 30px;
		right: 0;
		max-width: 40%;
		text-align: right;
	}

	.publication-bostonia .wp-block-separator,
	hr {
		width: calc(66.666% - 3.6855vw);
	}
}

@media screen and (min-width: 992px) {
	.series-openingdoors-details {
		max-width: 33%;
	}
}

@media screen and (min-width: 1200px) {
	.publication-bostonia .wp-block-separator,
	hr {
		width: calc(50% - 3.6855vw);
	}
}

@media screen and (min-width: 1628px) {

	.series-openingdoors-title-wrapper {
		height: 814px;
	}

	.series-openingdoors-photo {
		height: 814px;

	}
}