.txt-mask{
	--text-left: 60%;
	--text-top: 55%;
	--text-left-mov: 50%;
	--text-top-mov: 40%;
	--stroke-size: 2px;
	--split: 61%;
	--split-mov: 70%;
	--mask-text-width: 5%;
	--mask-text-width-mov: 20%;
	--txt-mask-panel-color: url(#txt-mask-gradient);

	position: relative;
	width: 100%;
	height: 100dvh;
	margin: 0;
	overflow: hidden;
}

.txt-mask .txt-mask-media{
	position:absolute;
	inset:0;
	z-index:1;
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	overflow:hidden;
}

.txt-mask .txt-mask-img{
	position:absolute;
	inset:0;
	z-index:1;
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center;
	filter:grayscale(1) !important;
	-webkit-filter:grayscale(1) !important;
}

.txt-mask .txt-mask-media figcaption{
	display: none
}

.txt-mask .txt-mask-panel{
	position:absolute;
	inset: 0;
	z-index:2;
	background:none;
	mix-blend-mode:normal;
	pointer-events:none;
}

.txt-mask .txt-mask-color-layer{
	position:absolute;
	inset:0;
	z-index:2;
	display:block;
	width:100%;
	height:100%;
	overflow:visible;
	pointer-events:none !important;
	mix-blend-mode: normal;
	opacity: .85
}

.txt-mask .txt-mask-color-fill{
	fill: var(--txt-mask-panel-color);
	clip-path: inset(3rem calc(100% - var(--split)) 3rem 0);
}

.txt-mask .txt-mask-svg-title{
	text-align: center;
	font-family:inherit;
	font-size:12rem;
	font-weight:700;
	dominant-baseline:middle;
	text-transform:uppercase;
	writing-mode:horizontal-tb !important;
	text-orientation:mixed !important;
	glyph-orientation-vertical:0deg;
	rotate:none !important;
	transform:none !important;
	pointer-events:none !important;
}

.txt-mask .txt-mask-svg-title tspan{
	writing-mode:horizontal-tb !important;
	text-orientation:mixed !important;
	glyph-orientation-vertical:0deg;
	rotate:none !important;
	transform:none !important;
}

.txt-mask .txt-mask-svg-text-group{
	transform:none !important;
	pointer-events:none !important;
}

.txt-mask .txt-mask-svg-outline{
	fill:transparent;
	stroke:var(--txt-mask-panel-color);
	stroke-width:var(--stroke-size);
	paint-order:stroke fill;
}

.txt-mask .txt-mask-border{
	position:absolute;
	inset:0;
	z-index:3;
	pointer-events:none !important;
}

.txt-mask .txt-mask-title{
	position: absolute;
	left: var(--text-left);
	top: var(--text-top);
	width: var(--mask-text-width);
	max-width:calc(100% - 0);
	margin:0;
	padding:0;
	font-size:12rem;
	line-height:.8;
	font-weight:900;
	text-align:left;
	text-transform:uppercase;
	word-break:normal;
	overflow-wrap:break-word;
	hyphens:none;
	-webkit-hyphens:none;
	white-space:normal;
	text-shadow:none !important;
	writing-mode:horizontal-tb !important;
	text-orientation:mixed !important;
	glyph-orientation-vertical:0deg;
	rotate:none !important;
}

.txt-mask .txt-mask-panel .txt-mask-title{
	z-index:1;
	color:transparent;
	opacity:0;
}

.txt-mask .txt-mask-border .txt-mask-title{
	z-index:1;
	color:transparent;
	-webkit-text-fill-color:transparent;
	-webkit-text-stroke:var(--stroke-size) var(--txt-mask-panel-color);
	text-stroke:var(--stroke-size) var(--txt-mask-panel-color);
}

.txt-mask .txt-mask-border{
	opacity:0;
}

.txt-mask .artxt{
	position:absolute;
	left:25%;
	top:50%;
	z-index:30 !important;
	width:27%;
	margin:0;
	transform:translate(-50%, -50%);
	pointer-events:auto !important;
}

body.simple-edit-mode .txt-mask .txt-mask-panel,
body.simple-edit-mode .txt-mask .txt-mask-border{
	pointer-events:none;
}

body.simple-edit-mode .txt-mask .txt-mask-panel .txt-mask-title,
body.simple-edit-mode .txt-mask .txt-mask-border .txt-mask-title{
	pointer-events:auto;
	cursor:pointer;
}

body.simple-edit-mode .txt-mask .txt-mask-panel .txt-mask-title{
	z-index:30;
}

body.simple-edit-mode .txt-mask .txt-mask-border .txt-mask-title{
	z-index:31;
}

body.simple-edit-mode .txt-mask .artxt{
	z-index:40;
}

body.simple-edit-mode .txt-mask .artxt *,
body.is-edit-mode .txt-mask .artxt * {
	pointer-events:auto !important;
}

section.hide-txt-clean .txt-mask .artxt,
section.hide-txt-clean .txt-mask .txt-mask-panel,
section.hide-txt-clean .txt-mask .txt-mask-color-layer,
section.hide-txt-clean .txt-mask .txt-mask-border,
section.hide-txt-clean .txt-mask .txt-mask-title,
section.hide-txt-clean.txt-mask .artxt,
section.hide-txt-clean.txt-mask .txt-mask-panel,
section.hide-txt-clean.txt-mask .txt-mask-color-layer,
section.hide-txt-clean.txt-mask .txt-mask-border,
section.hide-txt-clean.txt-mask .txt-mask-title{
	opacity:0 !important;
	visibility:hidden !important;
	pointer-events:none !important;
	transition:
		opacity .35s ease,
		visibility .35s ease;
}

section.hide-txt-clean .txt-mask .txt-mask-panel,
section.hide-txt-clean.txt-mask .txt-mask-panel{
	background:none !important;
	mix-blend-mode:normal !important;
}

section.hide-txt-clean .txt-mask .txt-mask-border,
section.hide-txt-clean.txt-mask .txt-mask-border{
	display:none !important;
}

@media (max-width:767px){
	.txt-mask{
		--text-left: var(--text-left-mov);
		--text-top: var(--text-top-mov);
		--txt-mask-panel-color: url(#txt-mask-gradient);
	}

	section.txt-mask .txt-mask-color-fill{
		clip-path: inset(50dvh calc(100% - var(--split-mov)) 0 0);
		fill: var(--txt-mask-panel-color);
	}

	.txt-mask .txt-mask-panel .txt-mask-title {
		left: var(--text-left-mov);
		top: var(--text-top-mov);
	}

	section.txt-mask .txt-mask-title {
		width: var(--mask-text-width-mov) !important;
	}

	.txt-mask .txt-mask-media{
		background-attachment: scroll;
	}

	.txt-mask .txt-mask-title{
		font-size: 6rem;
	}

	.txt-mask .txt-mask-svg-title{
		font-size: 6rem;
	}

	.txt-mask .artxt {
		max-width: 100%;
		top: auto !important;
		bottom: 5dvh !important;
		left: 0;
		width: 100%;
		max-height: 38dvh;
		transform: none;
		padding: 0 3rem;
		overflow-y: auto;
		overflow-x: hidden;
	}
	
	.txt-mask .artxt h2{
		font-size: 2rem;
	}

	.txt-mask .artxt h4{
		font-size: 1.1rem;
	}
	
	.txt-mask .artxt p {
		max-height: 2lh;
		margin: 0;
		overflow: hidden;
		transition: max-height .9s ease;
	}
	
	.txt-mask .artxt p.active {
		max-height: 12lh;
		overflow: auto;
	}
}