.demoTyleContainer {
	position: relative;
	padding-bottom: 3rem;
}

.demoTyleContainer .tiq-unit {
	width: 100%;
}

.homepage-tyle .demoTyleContainer {
	margin-left: -2rem;
}

@media (max-width: 820px) {
	.demoTyleContainer {
		position: relative !important;
		left: 50%;
		right: 50%;
		margin-left: -50vw !important;
		margin-right: -50vw;
		width: 100vw;
	}
}

.fadeDiv {
	position: relative;
	color: #ffffff;
	padding: 2rem 0;
	border-radius: 0.5rem;
	border: 2px solid transparent;
	display: block !important;
	opacity: 1 !important;
	overflow: visible;
	width: 100%;
}

.fadeDiv::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-radius: inherit;
	/*border: 2px solid rgba(69, 227, 255, 1);*/
	/*box-shadow: 0 0 24px rgba(69, 227, 255, 0.53), 0 0 36px rgba(255, 255, 255, 0.2);*/
	box-shadow: 0 0 20px rgb(69 227 255 / 13%), 0 0 26px rgba(255, 255, 255, 0.2);
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
}

.tyleContent {
	position: relative;
	z-index: 1;
	padding: 0 2em;
	background: transparent;
	color: #ffffff;
	display: flex;
	align-items: center;
	width: 100%;
	pointer-events: auto;
}

.tyleContent p {
	font-size: var(--wp--preset--font-size--medium) !important;
	margin: 0;
	padding: 0;
}

.fadeDiv .caption {
	position: absolute;
	left: -40px;
	bottom: -80px;
	font-weight: 600;
	font-size: 1rem;
	color: #45e3ff;
	z-index: 3;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.35s ease;
	white-space: normal;
	padding-left: 4.5rem;
	min-height: 80px;
}

/*.fadeDiv .caption::before {*/
/*	content: '';*/
/*	position: absolute;*/
/*	left: 0;*/
/*	bottom: 62px;*/
/*	width: 50px;*/
/*	height: 80px;*/
/*	background-image: url(/wp-content/plugins/fade-area-block/arrow.png);*/
/*	background-size: cover;*/
/*	background-repeat: no-repeat;*/
/*	filter: invert(1);*/
/*	opacity: 0;*/
/*	transition: opacity 0.35s ease;*/
/*}*/

/* ON state */
.fadeDiv.fade-on::before,
.fadeDiv.fade-on .caption,
.fadeDiv.fade-on .caption::before {
	opacity: 1;
}

/* MID state (optional) */
.fadeDiv.fade-mid::before,
.fadeDiv.fade-mid .caption,
.fadeDiv.fade-mid .caption::before {
	opacity: 0.5;
}

/* OFF state (default) */
.fadeDiv.fade-off::before,
.fadeDiv.fade-off .caption,
.fadeDiv.fade-off .caption::before {
	opacity: 0;
}

/* Mobile */
@media (max-width: 820px) {
	.fadeDiv {
		font-size: 1rem;
		padding: 1rem;
		margin-bottom: 1rem;
	}

	.tyleContent {
		padding: 0 1rem;
		font-size: 1rem;
	}

	.fadeDiv .caption {
		bottom: -30px;
		min-height: 0;
	}

	.fadeDiv .caption::before {
		left: 1%;
		top: 0;
		bottom: auto;
		transform: translateX(-50%) rotate(-35deg);
	}
}

@media (max-width: 480px) {
	.demoTyleContainer {
		padding-bottom: 0;
	}
	.tight-spacing-mobile .tyleContent {
		padding: 0;
	}
}

/* Editor always on */
body.block-editor-page .fadeDiv::before,
.block-editor-block-list__block .fadeDiv::before,
body.block-editor-page .fadeDiv .caption,
.block-editor-block-list__block .fadeDiv .caption,
body.block-editor-page .fadeDiv .caption::before,
.block-editor-block-list__block .fadeDiv .caption::before {
	opacity: 1;
}