/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

.paywall-image {
	max-width: 80%;
	height: auto !important;
}

.paywall-episode-block .paywall-image {
	max-width: 100px;
}

.paywall-title {
	font-size: 2rem;
}

.paywall-nav {
	display: flex;
	flex-direction: column;
}

.paywall-nav > * {
	margin-bottom: 1rem;
}

.paywall-container {
	margin-top: 2rem !important;
}

.paywall-btn {
	padding-left: 16px !important;
	padding-right: 16px !important;

	display: inline-flex !important;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;

	flex-wrap: wrap;
}

.paywall-section {
	font-size: 1.5rem;
}

.paywall-episode-block-info {
	margin-left: 1rem;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.paywall-episode-block-duration {
	display: block;
	text-align: right;
	padding-right: 1rem;
	padding-bottom: 1rem;
}

.paywall-episode-block {
	background-color: white;
	display: flex;
	flex-direction: row;
	height: 100px;

	position: relative;

	box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, .19);
}

.paywall-episode-block.episode-active {
	border-right: 4px solid #ff0d69;
}

.paywall-episode-block img {
	max-height: 100px;
}

.paywall-episode-block-title {
	font-size: 1.5rem;
	margin-top: 1rem;
}

.paywall-content {
	min-height: 600px !important;
	background-color: white;
	box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, .19);

	padding: 5rem !important;
}

.paywall-content img {
	max-width: 100%;
	height: auto !important;
}

.paywall-not-owned img, .paywall-coming-soon img {
	filter: opacity(0.5);
}

.paywall-lock {
	filter: none !important;
	position: absolute;
	top: calc(50% - 25px / 2);
	left: calc(50px - 22px / 2);
}

.paywall-not-owned::before {
	opacity: 0;
	content: "Purchase Access";
	background-color: #FF0D69;
	color: white;
	font-weight: bold;
	transform: scale(.8);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: .3s;
	position: absolute;
	left: 30px;
	right: 30px;
	top: 25px;
	bottom: 25px;
	z-index: 100;
}

.paywall-not-owned:hover::before {
	opacity: 1;
	transform: scale(1);
}

.paywall-coming-soon::before {
	opacity: 0;
	content: var(--coming-soon-message);
	background-color: #585858;
	color: white;
	cursor: not-allowed;
	font-weight: bold;
	transform: scale(.8);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: .3s;
	position: absolute;
	left: 30px;
	right: 30px;
	top: 25px;
	bottom: 25px;
	z-index: 100;
}

.paywall-coming-soon:hover::before {
	opacity: 1;
	transform: scale(1);
}

.paywall-message {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.paywall-price {
	margin-left: 1rem;
}

.paywall-people-grid {
	display: grid;
	grid-template-areas: "a a";
	gap: 30px;
	grid-auto-columns: 1fr;
	grid-auto-rows: auto;
}

@media (max-width: 440px) {
	.paywall-people-grid {
		grid-template-areas: "a";
	}

	.paywall-person img {
		max-width: 80px;
	}
}

.paywall-person {
	display: flex;
	flex-direction: column;

	text-align: center;

	align-items: center;
}

.paywall-photo {
	border-radius: 50%;
	width: 140px;
	height: 140px;
}

.paywall-episode-title {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-bottom: 3rem;
	margin-top: 0px;
}

.paywall-episode-title > hr {
	flex: 1;
	margin-left: 3rem;
}

.paywall-episode-block-duration {
	color: #939393;

}

#paywall-video-placeholder {
	width: 100%;
	background-color: #939393;
}

#paywall-video-placeholder > div {
	padding-bottom: calc((9/16) * 100%);
}


.paywall-progress {
	position: absolute;
	bottom: 0px;
	height: 5px;
	left: 100px;
	right: 0px;
	background-color: #E0E0E0;
}

.paywall-progress > div {
	height: 5px;
	background-color: #FF0D69;
}

.paywall-image-anchor {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 50px;
}

#ppc-button {
	text-align: center;
}

.nysd-paywall-next {
	display: flex;
	flex-direction: column;
	margin-top: 0px;
}

.nysd-paywall-next .paywall-episode-block {
	/* margin-top: 10px; */
	min-width: 320px;
}

@media (max-width: 900px) {
	.nysd-paywall-next .paywall-episode-block {
		min-width: unset;
	}
}

.paywall-description-row {
	display: flex;
	flex-direction: row;
}

.paywall-description-column:first-child {
	flex: 1;
	margin-right: 35px;
	padding-top: 29px;
}

.paywall-description-column:last-child {
	max-width: 337px;
	min-width: 337px;
	padding-top: 9px;
}

.paywall-description-column .paywall-episode-block {
	margin-bottom: 20px;
}

.paywall-description-column h3.paywall-section {
	display: flex;
	flex-direction: row;
	align-items: center;

	margin-bottom: 20px;
}

.paywall-description-column h3.paywall-section::after {
	content: "";
	flex: 1;
	margin-left: 3rem;
	border-top: 1px solid #ceae7e;
}

.paywall-featuring::after {
	content: "";
	flex: 1;
	margin-left: 3rem;
	border-top: 1px solid #ceae7e;
}

.paywall-featuring::before {
	content: "";
	flex: 1;
	margin-right: 3rem;
	border-top: 1px solid #ceae7e;
}

.paywall-featuring {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 30px;
}

.paywall-mock-video {
	max-width: 100%;
	position: relative;

	background-image: url("https://www.newyorksocialdiary.com/wp-content/uploads/2022/02/docu_coming_soon.png");
	background-size: cover;
}

.paywall-mock-video-aspect {
	padding-bottom: 56.25%;
}

.paywall-mock-video-wrap {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.paywall-mock-video-panel {
	background-color: white;
	padding: 10px;
}

.paywall-container .paywall-splash-content {
	font-size: 16px;
}

@media (max-width: 991px) {
	.posts-column.paywall-content {
		padding: 10px !important;
	}

	.paywall-container {
		display: flex;
		flex-direction: column-reverse;
	}

	.paywall-description-row {
		flex-direction: column;
	}

	.paywall-description-column {
		margin-right: 0px !important;
		margin-left: 0px !important;
	}

	.paywall-description-column:last-child {
		max-width: unset;
		min-width: unset;
		width: 100%;
		padding-top: 9px;
	}
}

@media (max-width: 764px) {
	.paywall-mock-video-wrap {
		position: static;
	}

	.paywall-mock-video-aspect {
		padding-bottom: unset;
	}
}