/* Tailwind CSS CDN alternative - using utility classes via inline styles or custom CSS */

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
		Ubuntu, Cantarell, sans-serif;
}

/* Force navigation to have background and fixed position immediately on this page */
.nav,
.nav.animated {
	background-color: #0b2945 !important;
	opacity: 1 !important;
	position: fixed !important;
	top: 0 !important;
}

.nav__wrapper {
	background-color: #0b2945 !important;
}

/* Add padding to tap-story-page to account for fixed header */
.tap-story-page {
	padding-top: 120px; /* Desktop nav height */
}

@media screen and (max-width: 767px) {
	.tap-story-page {
		padding-top: 60px; /* Mobile nav height */
		height: 100vh; /* Full viewport height on mobile */
		margin-top: 110px;
	}
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
	.tap-story-page {
		padding-top: 100px; /* Tablet nav height */
	}
}

picture {
	width: 100%;
	height: 100%;
}

/* Social Share Styles */
.social-share-wrapper {
	position: absolute;
	top: 2.8rem;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	justify-content: flex-end;
	z-index: 50;
	width: 100%;
	max-width: 1280px;
	padding-left: 1rem;
	padding-right: 1rem;
}

.social-share-container {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	transition: all 0.3s ease;
	flex-direction: row-reverse;
}

.social-share-toggle {
	width: 2.2rem;
	height: 2.2rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(0, 0, 0, 0.3);
	padding: 8px;
	border: none;
	cursor: pointer;
	transition: opacity 0.3s ease;
}

.social-share-toggle:hover {
	opacity: 0.8;
}

.social-icons-wrapper {
	display: flex;
	gap: 0.75rem;
	opacity: 0;
	transform: translateX(10px);
	transition: all 0.3s ease;
	pointer-events: none;
}

.social-icon {
	width: 2.2rem;
	height: 2.2rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(0, 0, 0, 0.3);
	padding: 8px;
	transition: opacity 0.3s ease;
	text-decoration: none;
}

.social-icon:hover {
	opacity: 0.8;
}

.social-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Mobile positioning - bottom right */
@media screen and (max-width: 767px) {
	.social-share-wrapper {
		top: auto;
		bottom: 2rem;
		left: auto;
		right: 1rem;
		transform: none;
		width: auto;
		padding: 0;
	}

	.social-share-toggle {
		width: 1.8rem;
		height: 1.8rem;
	}

	.social-icon {
		width: 1.8rem;
		height: 1.8rem;
	}
}

/* Tablet positioning */
@media screen and (min-width: 768px) {
	.social-share-wrapper {
		top: 3.75rem;
		padding-left: 2.5rem;
		padding-right: 2.5rem;
	}
}

@media screen and (min-width: 1024px) {
	.social-share-wrapper {
		padding-left: 0;
		padding-right: 0;
	}
}

/* Utility Classes */
.w-full {
	width: 100%;
}

.h-full {
	height: 100%;
}

.flex {
	display: flex;
}

.flex-col {
	flex-direction: column;
}

.items-center {
	align-items: center;
}

.justify-center {
	justify-content: center;
}

.justify-end {
	justify-content: flex-end;
}

.justify-between {
	justify-content: space-between;
}

.relative {
	position: relative;
}

.absolute {
	position: absolute;
}

.bg-black {
	background-color: #000000;
}

.bg-white {
	background-color: #ffffff;
}

.text-white {
	color: #ffffff;
}

.z-50 {
	z-index: 50;
}

.z-20 {
	z-index: 20;
}

.overflow-hidden {
	overflow: hidden;
}

.cursor-pointer {
	cursor: pointer;
}

.pointer-events-none {
	pointer-events: none;
}

.opacity-100 {
	opacity: 1;
}

.opacity-0 {
	opacity: 0;
}

.hidden {
	display: none;
}

.uppercase {
	text-transform: uppercase;
}

.text-left {
	text-align: left;
}

.rounded-full {
	border-radius: 9999px;
}

.rounded-\[2em\] {
	border-radius: 2em;
}

.aspect-square {
	aspect-ratio: 1 / 1;
}

.gap-2 {
	gap: 0.5rem;
}

.gap-5 {
	gap: 1.25rem;
}

.gap-\[1rem\] {
	gap: 1rem;
}

.gap-\[1\.3rem\] {
	gap: 1.3rem;
}

.gap-\[1\.25rem\] {
	gap: 1.25rem;
}

.gap-\[1\.85rem\] {
	gap: 1.85rem;
}

/* Hero Section Styles */
.tap-story-page {
	width: 100%;
	height: calc(100vh - 16px);
}

.tap-story-wrapper {
	width: 100%;
	height: 100%;
}

.container {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem;
	padding-right: 1rem;
}

@media (min-width: 768px) {
	.container {
		padding-left: 2.5rem;
		padding-right: 2.5rem;
	}
}

@media (min-width: 1024px) {
	.container {
		padding-left: 0;
		padding-right: 0;
		max-width: 1280px;
	}
}

.hero-slides-container {
	position: relative;
	width: 100%;
	height: 100%;
}

.hero-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
	z-index: 1;
}

.hero-slide[style*="opacity: 1"] {
	z-index: 2;
}

.hero-slide img,
.video__wrapper img,
.hero-slide video,
.video__wrapper video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	object-position: 50% 80%;
}

.slide-video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.video__progress {
	width: 100%;
	max-width: 1280px;
}

@media screen and (max-width: 767px) {
	.video__progress {
		gap: 0.35rem !important;
		top: 0.85rem !important;
	}
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
	.video__progress {
		gap: 0.4rem !important;
	}
}

.video__track {
	flex: 1;
	position: relative;
	cursor: pointer;
	background-color: rgba(203, 200, 200, 0.47);
}

.video__progress-bar {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background-color: white;
	border-radius: 2em;
	transition: width 0.5s linear;
}

.progress-bar {
	height: 0.35em;
}

@media (min-width: 768px) {
	.progress-bar {
		height: 0.5em;
	}
}

.video__mute,
.social-share-btn {
	box-shadow: 1px 1px 3px black;
}

.video__mute svg,
.social-share-btn svg {
	width: 12px;
	height: 12px;
}

.video__mute svg {
	transform: scale(1.4);
}

.video__wrapper {
	position: relative;
	width: 100%;
	height: calc(100vh - 120px);
	background-color: #000000;
}

@media screen and (max-width: 767px) {
	.video__wrapper {
		height: calc(100vh - 60px);
	}
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
	.video__wrapper {
		height: calc(100vh - 100px);
	}
}

.video__text {
	transition: opacity 0.5s;
}

@media screen and (max-width: 767px) {
	.video__text {
		padding-top: 3.5rem !important;
		padding-bottom: 2rem !important;
		gap: 1rem !important;
	}

	.video__text.padding-top {
		padding-top: 4.5rem !important;
	}
}

.video__text-heading {
	font-size: 1.875rem;
	line-height: 1.2;
	font-weight: 400;
	text-shadow: 1px 2px 3px black;
	font-family: "Bebas Neue", "Arial Narrow", Arial, sans-serif;
}

@media screen and (max-width: 767px) {
	.video__text-heading {
		font-size: 1.5rem;
		line-height: 1.3;
	}
}

.button--black:hover {
	background-color: #fff;
}

@media (min-width: 768px) {
	.video__text-heading {
		font-size: 2.5rem;
	}
}

@media (min-width: 1920px) {
	.video__text-heading {
		font-size: 60px;
	}
}

.video__text-content {
	text-shadow: 1px 2px 3px black;
}

.video__text-content span {
	display: block;
}

/* Make text content visible on mobile */
@media screen and (max-width: 767px) {
	.video__text-content {
		display: flex !important;
		flex-direction: column;
		gap: 1rem;
		font-size: 0.875rem;
		line-height: 1.3;
	}
}

.text-content-desktop {
	font-size: 1rem;
	line-height: 1.15;
}

@media (min-width: 1920px) {
	.text-content-desktop {
		font-size: 24px;
	}
}

.text-content-mobile {
	font-size: 0.875rem;
	line-height: 1.15;
}

/* Position Classes */
.bottom-left-class {
	position: absolute;
	bottom: 9.5vh;
	left: 0;
}

@media screen and (max-width: 767px) {
	.bottom-left-class {
		bottom: 6vh;
	}
}

.bottom-right-class {
	position: absolute;
	bottom: 12vh;
	right: 0;
}

@media screen and (max-width: 767px) {
	.bottom-right-class {
		bottom: 8vh;
	}
}

.bottom-left-10-class {
	position: absolute;
	bottom: 16vh;
	left: 0;
}

@media screen and (max-width: 767px) {
	.bottom-left-10-class {
		bottom: 10vh;
	}
}

.heading-bottom-left-10-class {
	justify-content: flex-end;
	padding-bottom: 14vh !important;
}

@media screen and (max-width: 767px) {
	.heading-bottom-left-10-class {
		padding-bottom: 8vh !important;
	}
}

.top-0-mobile-class {
	top: 0;
}

.top-10-mobile-class {
	top: 3.5rem;
}

@media screen and (max-width: 767px) {
	.top-10-mobile-class {
		top: 2.5rem;
	}
}

.top-left-class {
	position: absolute;
	top: 10vh;
	left: 0;
}

@media screen and (max-width: 767px) {
	.top-left-class {
		top: 6vh;
	}
}

@media (min-width: 768px) {
	.top-0-mobile-class {
		top: 0;
	}
}

/* Navigation Buttons */
.custom-buttons-container {
	width: 100%;
	max-width: 1280px;
}

.custom-button-prev,
.custom-button-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 2.4rem;
	height: 2.4rem;
	cursor: pointer;
	z-index: 10;
	background-color: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 1px 1px 3px black;
	transition: opacity 0.5s ease;
}

.custom-button-prev {
	left: -2.8rem;
}

.custom-button-next {
	right: -2.8rem;
}

.custom-button-prev svg,
.custom-button-next svg {
	width: 14px;
	height: 15px;
}

@media (max-width: 1023px) {
	.custom-button-prev,
	.custom-button-next {
		display: none;
	}
}

/* Text sizing utilities */
.text-\[1\.875rem\] {
	font-size: 1.875rem;
}

.text-\[0\.875rem\] {
	font-size: 0.875rem;
}

.text-\[2\.5rem\] {
	font-size: 2.5rem;
}

.w-\[2\.2rem\] {
	width: 2.2rem;
}

.left-1\/2 {
	left: 50%;
}

.top-1\/2 {
	top: 50%;
}

.transition-fade {
	transition: opacity 0.5s ease-in-out;
}

.transition-scale {
	transition: transform 0.3s ease-in-out;
}

.carousel-item {
	width: 100%;
	height: 100%;
}

.leading-\[1\.2\] {
	line-height: 1.2;
}

.leading-\[1\.15\] {
	line-height: 1.15;
}

/* Mobile specific overrides */
@media screen and (max-width: 767px) {
	.md\:w-1\/2 {
		width: 100% !important;
	}

	.w-\[2\.2rem\] {
		width: 1.8rem;
	}

	.social-share-btn {
		width: 1.8rem;
		height: 1.8rem;
	}
}

@media (min-width: 768px) {
	.md\:flex-row {
		flex-direction: row;
	}

	.md\:flex {
		display: flex;
	}

	.md\:hidden {
		display: none;
	}

	.md\:w-1\/2 {
		width: 50%;
	}

	.md\:text-\[2\.5rem\] {
		font-size: 2.5rem;
	}

	.md\:text-\[1rem\] {
		font-size: 1rem;
	}

	.md\:top-\[3\.75rem\] {
		top: 3.75rem;
	}

	.md\:top-0 {
		top: 0;
	}

	.md\:gap-\[1\.85rem\] {
		gap: 1.85rem;
	}
}

/* 3xl breakpoint for large screens */
@media (min-width: 1920px) {
	[class*="3xl:text-[60px]"] {
		font-size: 60px;
	}

	[class*="3xl:text-[24px]"] {
		font-size: 24px;
	}
}

/* Transform utilities */
.-translate-x-1\/2 {
	transform: translateX(-50%);
}

.-translate-y-1\/2 {
	transform: translateY(-50%);
}

/* Padding utilities */
.\!pt-\[4\.35rem\] {
	padding-top: 4.35rem !important;
}

.\!pb-10 {
	padding-bottom: 2.5rem !important;
}

@media (min-width: 768px) {
	.\!md\:pt-\[3\.6rem\] {
		padding-top: 3.6rem !important;
	}
}

.padding-top {
	padding-top: 7rem !important;
}

.margin-top-auto {
	margin-top: auto !important;
}

.\!px-\[2\.5rem\] {
	padding-left: 2.5rem !important;
	padding-right: 2.5rem !important;
}

@media (min-width: 768px) {
	.md\:\!px-\[2\.5rem\] {
		padding-left: 2.5rem !important;
		padding-right: 2.5rem !important;
	}
}

@media (min-width: 1024px) {
	.lg\:\!px-0 {
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}
}

/* Top positioning */
.top-5 {
	top: 1.25rem;
}

.top-10 {
	top: 2.5rem;
}

.top-\[2\.8rem\] {
	top: 2.8rem;
}

/* Max width */
.max-w-full {
	max-width: 100%;
}

/* Border */
.border-none {
	border: none;
}

/* Flex utilities */
.flex-1 {
	flex: 1 1 0%;
}

/* Article Section Styles */
.article-section {
	background-color: #ffffff;
}

.article-section .container {
	max-width: 56rem; /* 896px - max-w-5xl equivalent */
}
.article-section .container a {
	color: #2563eb !important;
	-webkit-text-fill-color: #2563eb;
}
.article-section .container a:hover {
	text-decoration: underline;
}

.article-title {
	color: #111827;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.02em;
}

.article-meta {
	color: #6b7280;
	font-size: 0.875rem;
}

.article-divider {
	width: 5rem;
	height: 0.25rem;
	background-color: #2563eb;
}

.article-content h3 {
	margin-top: 3rem;
	margin-bottom: 1.5rem;
}

.article-content p {
	line-height: 1.75;
}

.article-cta {
	background-color: #eff6ff;
	border-left: 4px solid #2563eb;
	border-radius: 0.5rem;
}

.article-cta a {
	display: inline-block;
	text-decoration: none;
	transition: all 0.3s ease;
}

.article-cta a:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.article-footer {
	border-top: 1px solid #e5e7eb;
}

.article-tags .tag {
	transition: all 0.2s ease;
}

.article-tags .tag:hover {
	background-color: #e5e7eb;
}

.social-icon {
	transition: all 0.2s ease;
}

.social-icon:hover {
	transform: translateY(-2px);
}

/* Color utilities for article */
.text-gray-500 {
	color: #6b7280;
}

.text-gray-600 {
	color: #4b5563;
}

.text-gray-700 {
	color: #374151;
}

.text-gray-900 {
	color: #111827;
}

.bg-gray-100 {
	background-color: #f3f4f6;
}

.bg-blue-50 {
	background-color: #eff6ff;
}

.bg-blue-600 {
	background-color: #2563eb;
}

.hover\:bg-blue-700:hover {
	background-color: #1d4ed8;
}

.hover\:text-blue-400:hover {
	color: #60a5fa;
}

.hover\:text-blue-600:hover {
	color: #2563eb;
}

.hover\:text-blue-700:hover {
	color: #1d4ed8;
}

.border-blue-600 {
	border-color: #2563eb;
}

.border-gray-200 {
	border-color: #e5e7eb;
}

/* Spacing utilities */
.py-16 {
	padding-top: 4rem;
	padding-bottom: 4rem;
}

.px-6 {
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

.mb-4 {
	margin-bottom: 1rem;
}

.mb-6 {
	margin-bottom: 1.5rem;
}

.mb-8 {
	margin-bottom: 2rem;
}

.mb-12 {
	margin-bottom: 3rem;
}

.mt-12 {
	margin-bottom: 3rem;
}

.pt-8 {
	padding-top: 2rem;
}

.p-8 {
	padding: 2rem;
}

.px-4 {
	padding-left: 1rem;
	padding-right: 1rem;
}

.py-2 {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

.px-8 {
	padding-left: 2rem;
	padding-right: 2rem;
}

.py-3 {
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
}

.mr-2 {
	margin-right: 0.5rem;
}

/* Typography utilities */
.text-3xl {
	font-size: 1.875rem;
	line-height: 2.25rem;
}

.text-sm {
	font-size: 0.875rem;
	line-height: 1.25rem;
}

.text-base {
	font-size: 1rem;
	line-height: 1.5rem;
}

.text-lg {
	font-size: 1.125rem;
	line-height: 1.75rem;
}

.text-xl {
	font-size: 1.25rem;
	line-height: 1.75rem;
}

.text-2xl {
	font-size: 1.5rem;
	line-height: 2rem;
}

.font-medium {
	font-weight: 500;
}

.font-semibold {
	font-weight: 600;
}

.font-bold {
	font-weight: 700;
}

.leading-relaxed {
	line-height: 1.625;
}

/* Layout utilities */
.mx-auto {
	margin-left: auto;
	margin-right: auto;
}

.max-w-none {
	max-width: none;
}

.max-w-5xl {
	max-width: 64rem;
}

.inline-block {
	display: inline-block;
}

.border-l-4 {
	border-left-width: 4px;
}

.border-t {
	border-top-width: 1px;
}

.rounded-lg {
	border-radius: 0.5rem;
}

.rounded-full {
	border-radius: 9999px;
}

.flex-wrap {
	flex-wrap: wrap;
}

.gap-3 {
	gap: 0.75rem;
}

.gap-4 {
	gap: 1rem;
}

.prose {
	color: #374151;
	max-width: 65ch;
}

.prose-lg {
	font-size: 1.125rem;
	line-height: 1.75rem;
}

/* Transition utilities */
.transition-colors {
	transition-property: color, background-color, border-color;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 300ms;
}

.duration-300 {
	transition-duration: 300ms;
}

/* Responsive utilities for article */
@media (min-width: 768px) {
	.md\:py-24 {
		padding-top: 6rem;
		padding-bottom: 6rem;
	}

	.md\:px-12 {
		padding-left: 3rem;
		padding-right: 3rem;
	}

	.md\:text-4xl {
		font-size: 2.25rem;
		line-height: 2.5rem;
	}

	.md\:text-3xl {
		font-size: 1.875rem;
		line-height: 2.25rem;
	}

	.md\:text-2xl {
		font-size: 1.5rem;
		line-height: 2rem;
	}

	.md\:text-xl {
		font-size: 1.25rem;
		line-height: 1.75rem;
	}

	.md\:text-lg {
		font-size: 1.125rem;
		line-height: 1.75rem;
	}
}

@media (min-width: 1024px) {
	.lg\:px-16 {
		padding-left: 4rem;
		padding-right: 4rem;
	}

	.lg\:text-5xl {
		font-size: 3rem;
		line-height: 1;
	}
}

/* Additional mobile responsive styles */
@media screen and (max-width: 767px) {
	/* Article section improvements */
	.article-section {
		padding-top: 2.5rem;
		padding-bottom: 2.5rem;
	}

	.article-title {
		font-size: 1.875rem;
		line-height: 1.3;
	}

	.article-content h3 {
		font-size: 1.5rem;
		margin-top: 2rem;
		margin-bottom: 1rem;
	}

	.article-content p {
		font-size: 0.9375rem;
		margin-bottom: 1rem;
	}

	.quote-section {
		padding: 1.5rem;
		margin-top: 2rem;
		margin-bottom: 2rem;
	}

	.quote-section blockquote p {
		font-size: 1.125rem;
		line-height: 1.5;
	}

	.article-cta {
		padding: 1.5rem;
		margin-top: 2rem;
	}

	.article-cta h4 {
		font-size: 1.25rem;
	}

	.article-cta a {
		font-size: 0.9375rem;
		padding: 0.625rem 1.5rem;
	}

	/* Audio caption section */
	.audio-item {
		flex-direction: unset; /*column;*/
		align-items: flex-start;
		gap: 0.75rem;
	}

	.caption {
		font-size: 0.9375rem;
		line-height: 1.6;
	}

	/* Container adjustments */
	.article-section .container {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}

	/* Button styling */
	.button--black {
		font-size: 0.875rem;
		padding: 0.625rem 1.25rem;
	}

	/* Top positioning for social share */
	.top-\[2\.8rem\] {
		top: 2rem;
	}
}

/* Tablet specific styles */
@media screen and (min-width: 768px) and (max-width: 1023px) {
	.article-section {
		padding-top: 4rem;
		padding-bottom: 4rem;
	}

	.article-title {
		font-size: 2.25rem;
	}

	.article-content h3 {
		font-size: 1.75rem;
	}

	.quote-section blockquote p {
		font-size: 1.375rem;
	}
}

/* Ensure proper touch targets on mobile */
@media screen and (max-width: 767px) {
	.video__track {
		min-height: 8px;
		display: flex;
		align-items: center;
	}

	.social-share-btn {
		min-width: 44px;
		min-height: 44px;
	}
}

/* Landscape mobile improvements */
@media screen and (max-width: 767px) and (orientation: landscape) {
	.video__text {
		padding-top: 2.5rem !important;
		padding-bottom: 1.5rem !important;
	}

	.video__text-heading {
		font-size: 1.375rem;
	}

	.video__text-content {
		font-size: 0.8125rem;
		gap: 0.75rem !important;
	}

	.heading-bottom-left-10-class {
		padding-bottom: 5vh !important;
	}
}

/* Image responsiveness */
@media screen and (max-width: 767px) {
	.article-image-section img,
	.article-image-section picture {
		border-radius: 0.5rem;
	}

	.article-image-section figcaption {
		font-size: 0.8125rem;
		padding: 0 0.5rem;
	}
}

/* Better scrolling on mobile */
@media screen and (max-width: 767px) {
	.hero-slides-container {
		-webkit-overflow-scrolling: touch;
	}
}

/* Fix for very small mobile screens */
@media screen and (max-width: 360px) {
	.video__text-heading {
		font-size: 1.375rem;
	}

	.video__text-content {
		font-size: 0.8125rem;
	}

	.social-share-btn {
		width: 1.6rem;
		height: 1.6rem;
	}

	.article-section .container {
		padding-left: 1rem;
		padding-right: 1rem;
	}
}

/* Tablet portrait specific adjustments */
@media screen and (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
	.video__text-heading {
		font-size: 2.25rem;
	}

	.video__text {
		padding-top: 4rem !important;
	}
}

/* Better focus states for accessibility */
@media screen and (max-width: 1023px) {
	.video__track:focus,
	.social-share-btn:focus,
	.custom-button-prev:focus,
	.custom-button-next:focus {
		outline: 2px solid rgba(255, 255, 255, 0.8);
		outline-offset: 2px;
	}
}

/* Text animation for hero slides */
.video__text p,
.video__text a {
	opacity: 0;
	transform: translateX(50px);
	transition: all 0.6s ease-out;
}

.hero-slide.active .video__text p,
.hero-slide.active .video__text a {
	opacity: 1;
	transform: translateX(0);
}

.hero-slide.next-in .video__text p {
	transform: translateX(0);
}
.hero-slide.next-in .video__text a {
	transform: translateX(0);
}
.hero-slide.prev-in .video__text p {
	transform: translateX(0);
}
.hero-slide.prev-in .video__text a {
	transform: translateX(0);
}
/* .hero-slide:nth-child(2) .video__text p{
    margin-top: 23em;
} */

/* Staggered delays for each paragraph */
.hero-slide.active .video__text p:nth-child(1) {
	transition-delay: 0.2s;
}

.hero-slide.active .video__text p:nth-child(2) {
	transition-delay: 0.4s;
}

.hero-slide.active .video__text p:nth-child(3) {
	transition-delay: 0.6s;
}

.hero-slide.active .video__text p:nth-child(4) {
	transition-delay: 0.8s;
}

.hero-slide.active .video__text p:nth-child(5) {
	transition-delay: 1s;
}
.hero-slide.active .video__text p:nth-child(6) {
	transition-delay: 1.2s;
}

.hero-slide.active .video__text a {
	transition-delay: 0.4s;
}
/* end staggered */

.tap-story-related .content-heading .title {
	font-family: "econ-sans", sans-serif;
	font-weight: 700;
}
.tap-story-related .grid-explore .card--article {
	overflow: hidden;
}
.tap-story-related .grid-explore .card__text-container {
	padding: 1.25em !important;
}
.tap-story-related .card__text-container .card__title {
	margin-top: 0;
	margin-bottom: 0.2777777778em;
	font-family: "Bebas Neue", sans-serif !important;
	font-size: 1.5em !important;
	font-weight: 400 !important;
	color: #000;
}
.tap-story-related .card__text-container .card__author {
	position: absolute !important;
	bottom: 0 !important;
}

.tap-story-body .user-profile-w-audio-section {
	width: 100%;
	padding: 5%;
	background-color: #00274c;
	margin-bottom: 50px;
}
.tap-story-body .user-profile-w-audio-section .profile-inner {
	display: flex;
	gap: 4rem;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	align-items: start;
	justify-content: center;
}
.tap-story-body .user-profile-w-audio-section .article-image-section {
	width: 35%;
	padding: 0 5% 5%;
}
.tap-story-body .user-profile-w-audio-section .audio-caption-section {
	width: 65%;
}
.tap-story-body
	.user-profile-w-audio-section
	.article-image-section
	figure
	img:hover {
	transform: scale(1) !important;
}
.tap-story-body .user-profile-w-audio-section .audio-item label,
.tap-story-body .user-profile-w-audio-section .audio-caption .caption,
.tap-story-body .user-profile-w-audio-section .profile-author {
	color: #fff;
}
.tap-story-body .user-profile-w-audio-section .audio-caption .caption {
	margin-top: 30px;
}
.tap-story-body .user-profile-w-audio-section .profile-author {
	font-style: normal;
	font-weight: 700;
	font-size: 1.5rem;
	margin-top: 50px !important;
	text-align: left !important;
}
.tap-story-body .user-profile-w-audio-section .profile-author span {
	font-weight: 400;
	font-size: 1.25rem;
	display: block;
	padding-top: 8px;
}
.hero-slide .mobile-image-block {
	display: none;
}

@media only screen and (min-width: 320px) and (max-width: 576px) {
	.tap-story-page {
		margin-top: 110px;
	}
	.custom-button-prev,
	.custom-button-next {
		display: flex;
	}
	.custom-button-prev {
		left: 1rem;
	}
	.custom-button-next {
		right: 1rem;
	}
	.hero-slide .mobile-image-block {
		display: block;
	}
	.hero-slide:nth-child(2) .dekstop-image-block,
	.hero-slide:nth-child(4) .dekstop-image-block {
		display: none;
	}
	.hero-slide .video__text {
		padding-left: 2.5rem;
		padding-right: 2.5rem;
	}
	.hero-slide:first-child .video__text,
	.hero-slide:nth-child(4) .video__text {
		justify-content: start;
	}
	.hero-slide:nth-child(3) .video__text .video__text-heading {
		margin-top: 0 !important;
	}
	.tap-story-body .user-profile-w-audio-section .profile-inner {
		display: block;
	}
	.tap-story-body .user-profile-w-audio-section .article-image-section {
		width: 100%;
		margin-bottom: 20px;
		padding: 5% 15%;
	}
	.tap-story-body .user-profile-w-audio-section .audio-caption-section {
		width: 100%;
	}
}
@media only screen and (min-width: 577px) and (max-width: 768px) {
	.tap-story-page {
		position: relative;
		padding-top: calc(210px);
	}
	.custom-button-prev,
	.custom-button-next {
		display: flex;
	}
	.custom-button-prev {
		left: 1rem;
	}
	.custom-button-next {
		right: 1rem;
	}
	.hero-slide .mobile-image-block {
		display: none;
	}
	.hero-slide:nth-child(2) .dekstop-image-block,
	.hero-slide:nth-child(4) .dekstop-image-block {
		display: block;
	}
	.hero-slide:nth-child(2) .video__text {
		padding-top: 8rem !important;
	}
	.hero-slide:nth-child(3) .video__text .video__text-heading {
		margin-top: 20rem !important;
	}
	.hero-slide:nth-child(4) .video__text,
	.hero-slide:nth-child(5) .video__text,
	.hero-slide:nth-child(6) .video__text {
		justify-content: center;
	}
}
@media only screen and (min-width: 769px) and (max-width: 900px) {
	.tap-story-page {
		position: relative;
		padding-top: calc(224px);
	}
	.custom-button-prev,
	.custom-button-next {
		display: flex;
	}
	.custom-button-prev {
		left: 1rem;
	}
	.custom-button-next {
		right: 1rem;
	}
	.hero-slide .mobile-image-block {
		display: none;
	}
	.hero-slide:nth-child(2) .dekstop-image-block,
	.hero-slide:nth-child(4) .dekstop-image-block {
		display: block;
	}
	.hero-slide:nth-child(2) .video__text {
		padding-top: 8rem !important;
	}
	.hero-slide:nth-child(3) .video__text .video__text-heading {
		margin-top: 28rem !important;
	}
	.hero-slide:nth-child(4) .video__text,
	.hero-slide:nth-child(5) .video__text,
	.hero-slide:nth-child(6) .video__text {
		justify-content: center;
	}
}