/**
 * Extensions
 */

/*--------------------------------------------------------------
# Animation
--------------------------------------------------------------*/

.flext-has-animation {
	animation-play-state: paused;
	opacity: 0.01;
}

.flext-animated {
	animation-duration: 1s;
	animation-fill-mode: both;
	animation-play-state: running;
	animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
	opacity: 1;
}

.flext-animation-delay-125 {
	animation-delay: 0.125s;
}

.flext-animation-delay-250 {
	animation-delay: 0.25s;
}

.flext-animation-delay-375 {
	animation-delay: 0.375s;
}

.flext-animation-delay-500 {
	animation-delay: 0.5s;
}

.flext-animation-delay-625 {
	animation-delay: 0.625s;
}

.flext-animation-delay-750 {
	animation-delay: 0.75s;
}

.flext-animation-delay-875 {
	animation-delay: 0.875s;
}

.flext-animation-delay-1000 {
	animation-delay: 1s;
}

.flext-animation-delay-1125 {
	animation-delay: 1.125s;
}

.flext-animation-delay-1250 {
	animation-delay: 1.25s;
}

.flext-animation-delay-1375 {
	animation-delay: 1.375s;
}

.flext-animation-delay-1500 {
	animation-delay: 1.5s;
}

.flext-animation-delay-1625 {
	animation-delay: 1.625s;
}

.flext-animation-delay-1750 {
	animation-delay: 1.75s;
}

.flext-animation-delay-1875 {
	animation-delay: 1.875s;
}

.flext-animation-delay-2000 {
	animation-delay: 2s;
}

/*--------------------------------------------------------------
## Animation - Fade In
--------------------------------------------------------------*/

@keyframes flext-fade-in {

	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.flext-animation-fade-in.flext-animated {
	animation-name: flext-fade-in;
}

/*--------------------------------------------------------------
## Animation - Fade Up
--------------------------------------------------------------*/

@keyframes flext-fade-up {

	from {
		opacity: 0;
		transform: translateY(7rem);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.flext-animation-fade-up.flext-animated {
	animation-name: flext-fade-up;
	transform-origin: 50% 0;
}

/*--------------------------------------------------------------
## Animation - Fade Down
--------------------------------------------------------------*/

@keyframes flext-fade-down {

	from {
		opacity: 0;
		transform: translateY(-7rem);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.flext-animation-fade-down.flext-animated {
	animation-name: flext-fade-down;
	transform-origin: 50% 100%;
}

/*--------------------------------------------------------------
## Animation - Fade Left
--------------------------------------------------------------*/

@keyframes flext-fade-left {

	from {
		opacity: 0;
		transform: translateX(-7rem);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.flext-animation-fade-left.flext-animated {
	animation-name: flext-fade-left;
	transform-origin: 50% 0;
}

/*--------------------------------------------------------------
## Animation - Fade Right
--------------------------------------------------------------*/

@keyframes flext-fade-right {

	from {
		opacity: 0;
		transform: translateX(7rem);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.flext-animation-fade-right.flext-animated {
	animation-name: flext-fade-right;
	transform-origin: 50% 0;
}

/*--------------------------------------------------------------
## Animation - Elastic In Up
--------------------------------------------------------------*/

@keyframes flext-elastic-in-up {

	from {
		opacity: 0;
		transform: translateY(7rem) scaleY(1.35);
	}

	to {
		opacity: 1;
		transform: translateY(0) scaleY(1);
	}
}

.flext-animation-elastic-in-up.flext-animated {
	animation-name: flext-elastic-in-up;
	transform-origin: 50% 0;
}

/*--------------------------------------------------------------
## Animation - Elastic In Down
--------------------------------------------------------------*/

@keyframes flext-elastic-in-down {

	from {
		opacity: 0;
		transform: translateY(-7rem) scaleY(1.35);
	}

	to {
		opacity: 1;
		transform: translateY(0) scaleY(1);
	}
}

.flext-animation-elastic-in-down.flext-animated {
	animation-name: flext-elastic-in-down;
	transform-origin: 50% 100%;
}

/*--------------------------------------------------------------
## Animation - Elastic In Left
--------------------------------------------------------------*/

@keyframes flext-elastic-in-left {

	from {
		opacity: 0;
		transform: translateX(-7rem) scaleX(1.35);
	}

	to {
		opacity: 1;
		transform: translateX(0) scaleX(1);
	}
}

.flext-animation-elastic-in-left.flext-animated {
	animation-name: flext-elastic-in-left;
	transform-origin: 100% 50%;
}

/*--------------------------------------------------------------
## Animation - Elastic In Right
--------------------------------------------------------------*/

@keyframes flext-elastic-in-right {

	from {
		opacity: 0;
		transform: translateX(7rem) scaleX(1.35);
	}

	to {
		opacity: 1;
		transform: translateX(0) scaleX(1);
	}
}

.flext-animation-elastic-in-right.flext-animated {
	animation-name: flext-elastic-in-right;
	transform-origin: 0% 50%;
}

/*--------------------------------------------------------------
## Animation - Fade Zoom In
--------------------------------------------------------------*/

@keyframes flext-zoom-in {

	from {
		opacity: 0;
		transform: scale(0);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

.flext-animation-zoom-in.flext-animated {
	animation-name: flext-zoom-in;
	transform-origin: 50% 50%;
}

/*--------------------------------------------------------------
## Animation - Fade Zoom In Up
--------------------------------------------------------------*/

@keyframes flext-zoom-in-up {

	from {
		opacity: 0;
		transform: translateY(30rem) scale(0);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.flext-animation-zoom-in-up.flext-animated {
	animation-name: flext-zoom-in-up;
	transform-origin: 50% 100%;
}

/*--------------------------------------------------------------
## Animation - Fade Zoom In Down
--------------------------------------------------------------*/

@keyframes flext-zoom-in-down {

	from {
		opacity: 0;
		transform: translateY(-30rem) scale(0);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.flext-animation-zoom-in-down.flext-animated {
	animation-name: flext-zoom-in-down;
	transform-origin: 50% 0;
}

/*--------------------------------------------------------------
## Animation - Fade Zoom In Left
--------------------------------------------------------------*/

@keyframes flext-zoom-in-left {

	from {
		opacity: 0;
		transform: translateX(-15rem) scale(0);
	}

	to {
		opacity: 1;
		transform: translateX(0) scale(1);
	}
}

.flext-animation-zoom-in-left.flext-animated {
	animation-name: flext-zoom-in-left;
	transform-origin: 0% 50%;
}

/*--------------------------------------------------------------
## Animation - Fade Zoom In Right
--------------------------------------------------------------*/

@keyframes flext-zoom-in-right {

	from {
		opacity: 0;
		transform: translateX(15rem) scale(0);
	}

	to {
		opacity: 1;
		transform: translateX(0) scale(1);
	}
}

.flext-animation-zoom-in-right.flext-animated {
	animation-name: flext-zoom-in-right;
	transform-origin: 100% 50%;
}

/*--------------------------------------------------------------
## Animation - Stretch In Left
--------------------------------------------------------------*/

@keyframes flext-stretch-in-left {

	from {
		transform: scaleX(0);
		transform-origin: center left;
	}

	to {
		transform: scaleX(1);
		transform-origin: center left;
	}
}

.flext-animation-stretch-in-left.flext-animated {
	animation-name: flext-stretch-in-left;
}

/*--------------------------------------------------------------
## Animation - Stretch In Right
--------------------------------------------------------------*/

@keyframes flext-stretch-in-right {

	from {
		transform: scaleX(0);
		transform-origin: center right;
	}

	to {
		transform: scaleX(1);
		transform-origin: center right;
	}
}

.flext-animation-stretch-in-right.flext-animated {
	animation-name: flext-stretch-in-right;
}

/*--------------------------------------------------------------
## Animation - Rotate In Up Left
--------------------------------------------------------------*/

@keyframes flext-rotate-in-up-left {

	from {
		opacity: 0;
		transform: rotate(10deg) scale(1, 0.5) translate(0, 10px);
	}

	to {
		opacity: 1;
		transform: scaleX(0deg) scale(0) translate(0);
	}
}

.flext-animation-rotate-in-up-left.flext-animated {
	animation-name: flext-rotate-in-up-left;
	transform-origin: 0 0;
}

/*--------------------------------------------------------------
## Animation - Rotate Up right
--------------------------------------------------------------*/

@keyframes flext-rotate-in-up-right {

	from {
		opacity: 0;
		transform: rotate(-10deg) scale(1, 0.5) translate(0, 10px);
	}

	to {
		opacity: 1;
		transform: scaleX(0deg) scale(0) translate(0);
	}
}

.flext-animation-rotate-in-up-right.flext-animated {
	animation-name: flext-rotate-in-up-right;
	transform-origin: 100% 0;
}

/*--------------------------------------------------------------
## Animation - Flip In from Top
--------------------------------------------------------------*/

@keyframes flext-flip-in-from-top {

	from {
		opacity: 0;
		transform: perspective(1000px) translate3d(0, -130%, 0) rotateX(40deg);
	}

	20% {
		opacity: 1;
	}

	to {
		transform: perspective(1000px) translate3d(0, 0, 0) rotateX(0);
	}
}

.flext-animation-flip-in-from-top.flext-animated {
	animation-name: flext-flip-in-from-top;
	animation-duration: 1.4s;
}

/*--------------------------------------------------------------
## Animation - Flip In from Bottom
--------------------------------------------------------------*/

@keyframes flext-flip-in-from-bottom {

	from {
		opacity: 0;
		transform: perspective(1000px) translate3d(0, 130%, 0) rotateX(-40deg);
	}

	20% {
		opacity: 1;
	}

	to {
		transform: perspective(1000px) translate3d(0, 0, 0) rotateX(0);
	}
}

.flext-animation-flip-in-from-bottom.flext-animated {
	animation-name: flext-flip-in-from-bottom;
	animation-duration: 1.4s;
	transform-style: preserve-3d;
}

/*--------------------------------------------------------------
## Animation - Slide Back
--------------------------------------------------------------*/

@keyframes flext-slide-back {

	from {
		clip-path: inset(0 0 99% 0);
		transform: scale(1.4);
	}

	60% {
		clip-path: inset(-5% -5% -5% -5%);
	}

	to {
		clip-path: none;
		transform: scale(1);
	}

}

.flext-animation-slide-back.flext-animated {
	animation-name: flext-slide-back;
	animation-duration: 2s;
}

/*--------------------------------------------------------------
## Animation - Fly In
--------------------------------------------------------------*/

@keyframes flext-fly-in {

	from {
		opacity: 0;
		transform: scale(1.4);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}

}

.flext-animation-fly-in.flext-animated {
	animation-name: flext-fly-in;
	animation-duration: 2s;
}

/*--------------------------------------------------------------
## Animation - Reveal
--------------------------------------------------------------*/

@keyframes flext-reveal {

	from {
		opacity: 1;
		-webkit-mask-image: linear-gradient(315deg, transparent 25%, #000 75%);
		mask-image: linear-gradient(315deg, transparent 25%, #000 75%);
		-webkit-mask-position: 100%;
		mask-position: 100%;
		-webkit-mask-size: 1000% 1000%;
		mask-size: 1000% 1000%;
	}

	to {
		opacity: 1;
		-webkit-mask-image: linear-gradient(315deg, #0000 25%, #000 75%);
		mask-image: linear-gradient(315deg, #0000 25%, #000 75%);
		-webkit-mask-position: 0;
		mask-position: 0;
		-webkit-mask-size: 1000% 1000%;
		mask-size: 1000% 1000%;
	}

}

.flext-animation-reveal.flext-animated {
	animation-name: flext-reveal;
	animation-duration: 2s;
	-webkit-mask-size: 1000% 1000%;
	mask-size: 1000% 1000%;
}

/*--------------------------------------------------------------
## Animation - Swing
--------------------------------------------------------------*/

@keyframes flext-swing {

	0% {
		transform: rotate(-15deg);
	}

	5% {
		transform: rotate(25deg);
	}

	10% {
		transform: rotate(-10deg);
	}

	40% {
		transform: rotate(380deg);
	}

	50% {
		transform: rotate(330deg);
	}

	55% {
		transform: rotate(370deg);
	}

	80% {
		transform: rotate(-20deg);
	}

	90% {
		transform: rotate(30deg);
	}

	to {
		transform: rotate(-15deg);
	}
}

.flext-animation-swing.flext-animated {
	animation-name: flext-swing;
	animation-direction: alternate;
	animation-duration: 5s;
	animation-iteration-count: infinite;
	animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
	transform-origin: center;
}

/*--------------------------------------------------------------
## Animation - Rotate
--------------------------------------------------------------*/

@keyframes flext-rotate {

	0% {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(-360deg);
	}
}

.flext-animation-rotate.flext-animated > * {
	animation-name: flext-rotate;
	animation-duration: 20s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	transform-origin: center;
}

/*--------------------------------------------------------------
# Format - Highlight
--------------------------------------------------------------*/

.flext-has-highlight {
	--flext-highlight-color: #000;
	background-color: transparent;
	display: inline-block;
	position: relative;
	z-index: 1;
}

.flext-has-highlight::before {
	content: "";
	display: inline-block;
	opacity: 0.7;
	position: absolute;
	z-index: -1;
}

/* Underline */

.flext-has-highlight.flext-is-style-underline {
	padding-bottom: 0.25rem;
}

.flext-has-highlight.flext-is-style-underline::before {
	border-top: 2px solid var(--flext-highlight-color);
	border-radius: 0.2em 0 0 0;
	bottom: -0.25rem;
	height: 1rem;
	left: 0;
	transform: rotate(-2deg);
	transform-origin: right top;
	transition: width 0.25s ease-in 0.3s;
	width: 0;
}

.flext-has-highlight.flext-is-style-underline.flext-animated::before {
	width: 100%;
}

.flext-has-highlight.flext-is-style-underline::after {
	border-left: 2px solid transparent;
	border-radius: 0.1em 0 0 0.4em;
	bottom: -0.25rem;
	content: "";
	height: 1rem;
	opacity: 0.7;
	position: absolute;
	right: -1rem;
	transform: rotate(75deg);
	transform-origin: left top;
	transition: border-left-color 0.1s ease-out 0.6s;
	width: 1rem;
	z-index: -1;
}

.flext-has-highlight.flext-is-style-underline.flext-animated::after {
	border-left-color: var(--flext-highlight-color);
}

/* Strikethrough */

.flext-has-highlight.flext-is-style-strikethrough {
	padding-bottom: 0.25rem;
}

.flext-has-highlight.flext-is-style-strikethrough::before {
	background: var(--flext-highlight-color);
	border-radius: 0.36em 0;
	bottom: 0.25em;
	height: 0.3em;
	left: 0;
	transform: rotate(-1deg);
	transition: width 0.25s ease-in 0.3s;
	width: 0;
}

.flext-has-highlight.flext-is-style-strikethrough.flext-animated::before {
	width: 100%;
}

/* Rectangle */

.flext-has-highlight.flext-is-style-rectangle {
	--flext-rec-clip-path: min(15%, 15px);
	padding: 0.25rem;
}

.flext-has-highlight.flext-is-style-rectangle::before {
	border: 2px solid var(--flext-highlight-color);
	border-radius: 255px 15px 255px 15px / 15px 255px 15px 255px;
	bottom: 0;
	clip-path: inset(100%);
	left: -0.25rem;
	right: -0.25rem;
	top: 0;
}

.flext-has-highlight.flext-is-style-rectangle.flext-animated::before {
	animation: flext-rectangle-draw 1s ease 0.3s forwards;
}

@keyframes flext-rectangle-draw {

	0% {
		clip-path: polygon(var(--flext-rec-clip-path) var(--flext-rec-clip-path), calc(100% - var(--flext-rec-clip-path)) var(--flext-rec-clip-path), calc(100% - var(--flext-rec-clip-path)) calc(100% - var(--flext-rec-clip-path)), var(--flext-rec-clip-path) calc(100% - var(--flext-rec-clip-path)), var(--flext-rec-clip-path) var(--flext-rec-clip-path), 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0);
	}

	0.1% {
		clip-path: polygon(var(--flext-rec-clip-path) var(--flext-rec-clip-path), calc(100% - var(--flext-rec-clip-path)) var(--flext-rec-clip-path), calc(100% - var(--flext-rec-clip-path)) calc(100% - var(--flext-rec-clip-path)), var(--flext-rec-clip-path) calc(100% - var(--flext-rec-clip-path)), var(--flext-rec-clip-path) var(--flext-rec-clip-path), 0 0, 0 0, 0 var(--flext-rec-clip-path), var(--flext-rec-clip-path) var(--flext-rec-clip-path), 0 0, 0 0, 0 0, calc(100% - var(--flext-rec-clip-path)) calc(100% - var(--flext-rec-clip-path)), calc(100% - var(--flext-rec-clip-path)) calc(100% - var(--flext-rec-clip-path)), 100% 100%, 100% 100%, calc(100% - var(--flext-rec-clip-path)) calc(100% - var(--flext-rec-clip-path)), var(--flext-rec-clip-path) calc(100% - var(--flext-rec-clip-path)), var(--flext-rec-clip-path) calc(100% - var(--flext-rec-clip-path)), 0 100%, 0 100%, var(--flext-rec-clip-path) calc(100% - var(--flext-rec-clip-path)));
	}

	23.9% {
		clip-path: polygon(var(--flext-rec-clip-path) var(--flext-rec-clip-path), calc(100% - var(--flext-rec-clip-path)) var(--flext-rec-clip-path), calc(100% - var(--flext-rec-clip-path)) calc(100% - var(--flext-rec-clip-path)), var(--flext-rec-clip-path) calc(100% - var(--flext-rec-clip-path)), var(--flext-rec-clip-path) var(--flext-rec-clip-path), 0 0, 100% 0, calc(100% - var(--flext-rec-clip-path)) var(--flext-rec-clip-path), calc(100% - var(--flext-rec-clip-path)) 0, 100% 0, 100% 0, calc(100% - var(--flext-rec-clip-path)) var(--flext-rec-clip-path), calc(100% - var(--flext-rec-clip-path)) calc(100% - var(--flext-rec-clip-path)), calc(100% - var(--flext-rec-clip-path)) calc(100% - var(--flext-rec-clip-path)), 100% 100%, 100% 100%, calc(100% - var(--flext-rec-clip-path)) calc(100% - var(--flext-rec-clip-path)), var(--flext-rec-clip-path) calc(100% - var(--flext-rec-clip-path)), var(--flext-rec-clip-path) calc(100% - var(--flext-rec-clip-path)), 0 100%, 0 100%, var(--flext-rec-clip-path) calc(100% - var(--flext-rec-clip-path)));
	}

	50% {
		clip-path: polygon(var(--flext-rec-clip-path) var(--flext-rec-clip-path), calc(100% - var(--flext-rec-clip-path)) var(--flext-rec-clip-path), calc(100% - var(--flext-rec-clip-path)) calc(100% - var(--flext-rec-clip-path)), var(--flext-rec-clip-path) calc(100% - var(--flext-rec-clip-path)), var(--flext-rec-clip-path) var(--flext-rec-clip-path), 0 0, 100% 0, calc(100% - var(--flext-rec-clip-path)) var(--flext-rec-clip-path), calc(100% - var(--flext-rec-clip-path)) calc(100% - var(--flext-rec-clip-path)), 100% 100%, 100% 0, calc(100% - var(--flext-rec-clip-path)) var(--flext-rec-clip-path), calc(100% - var(--flext-rec-clip-path)) calc(100% - var(--flext-rec-clip-path)), calc(100% - var(--flext-rec-clip-path)) calc(100% - var(--flext-rec-clip-path)), 100% 100%, 100% 100%, calc(100% - var(--flext-rec-clip-path)) calc(100% - var(--flext-rec-clip-path)), var(--flext-rec-clip-path) calc(100% - var(--flext-rec-clip-path)), var(--flext-rec-clip-path) calc(100% - var(--flext-rec-clip-path)), 0 100%, 0 100%, var(--flext-rec-clip-path) calc(100% - var(--flext-rec-clip-path)));
	}

	73.9% {
		clip-path: polygon(var(--flext-rec-clip-path) var(--flext-rec-clip-path), calc(100% - var(--flext-rec-clip-path)) var(--flext-rec-clip-path), calc(100% - var(--flext-rec-clip-path)) calc(100% - var(--flext-rec-clip-path)), var(--flext-rec-clip-path) calc(100% - var(--flext-rec-clip-path)), var(--flext-rec-clip-path) var(--flext-rec-clip-path), 0 0, 100% 0, calc(100% - var(--flext-rec-clip-path)) var(--flext-rec-clip-path), calc(100% - var(--flext-rec-clip-path)) calc(100% - var(--flext-rec-clip-path)), 100% 100%, 100% 0, calc(100% - var(--flext-rec-clip-path)) var(--flext-rec-clip-path), calc(100% - var(--flext-rec-clip-path)) calc(100% - var(--flext-rec-clip-path)), var(--flext-rec-clip-path) calc(100% - var(--flext-rec-clip-path)), 0 100%, 100% 100%, calc(100% - var(--flext-rec-clip-path)) calc(100% - var(--flext-rec-clip-path)), var(--flext-rec-clip-path) calc(100% - var(--flext-rec-clip-path)), var(--flext-rec-clip-path) calc(100% - var(--flext-rec-clip-path)), 0 100%, 0 100%, var(--flext-rec-clip-path) calc(100% - var(--flext-rec-clip-path)));
	}

	100% {
		clip-path: polygon(var(--flext-rec-clip-path) var(--flext-rec-clip-path), calc(100% - var(--flext-rec-clip-path)) var(--flext-rec-clip-path), calc(100% - var(--flext-rec-clip-path)) calc(100% - var(--flext-rec-clip-path)), var(--flext-rec-clip-path) calc(100% - var(--flext-rec-clip-path)), var(--flext-rec-clip-path) var(--flext-rec-clip-path), 0 0, 100% 0, calc(100% - var(--flext-rec-clip-path)) var(--flext-rec-clip-path), calc(100% - var(--flext-rec-clip-path)) calc(100% - var(--flext-rec-clip-path)), 100% 100%, 100% 0, calc(100% - var(--flext-rec-clip-path)) var(--flext-rec-clip-path), calc(100% - var(--flext-rec-clip-path)) calc(100% - var(--flext-rec-clip-path)), var(--flext-rec-clip-path) calc(100% - var(--flext-rec-clip-path)), 0 100%, 100% 100%, calc(100% - var(--flext-rec-clip-path)) calc(100% - var(--flext-rec-clip-path)), var(--flext-rec-clip-path) calc(100% - var(--flext-rec-clip-path)), var(--flext-rec-clip-path) var(--flext-rec-clip-path), 0 0, 0 100%, var(--flext-rec-clip-path) calc(100% - var(--flext-rec-clip-path)));
	}
}

/* Oval */

.flext-has-highlight.flext-is-style-oval {
	padding: 0.25rem;
}

.flext-has-highlight.flext-is-style-oval::before {
	border: 2px solid transparent;
	border-radius: 48%;
	bottom: 0.1em;
	left: -0.2em;
	right: -0.2em;
	top: 0.1em;
	transform: rotate(-3deg);
}

@keyframes flext-oval-draw {

	0% {
		border-left-color: transparent;
		border-top-color: transparent;
		border-right-color: transparent;
		border-bottom-color: transparent;
	}

	1% {
		border-left-color: var(--flext-highlight-color);
		border-top-color: transparent;
		border-right-color: transparent;
		border-bottom-color: transparent;
	}

	23.9% {
		border-left-color: var(--flext-highlight-color);
		border-top-color: transparent;
		border-right-color: transparent;
		border-bottom-color: transparent;
	}

	50% {
		border-left-color: var(--flext-highlight-color);
		border-top-color: var(--flext-highlight-color);
		border-right-color: transparent;
		border-bottom-color: transparent;
	}

	73.9% {
		border-left-color: var(--flext-highlight-color);
		border-top-color: var(--flext-highlight-color);
		border-right-color: var(--flext-highlight-color);
		border-bottom-color: transparent;
	}

	100% {
		border-top-color: var(--flext-highlight-color);
		border-right-color: var(--flext-highlight-color);
		border-bottom-color: var(--flext-highlight-color);
		border-left-color: var(--flext-highlight-color);
	}
}

.flext-has-highlight.flext-is-style-oval.flext-animated::before {
	animation: flext-oval-draw 0.3s ease-in-out 0.3s forwards;
}

/* Background */

.flext-has-highlight.flext-is-style-background::before,
.flext-has-highlight.flext-is-style-background::after {
	background-color: var(--flext-highlight-color);
	height: 90%;
	margin-left: -0.2rem;
	margin-right: -0.2rem;
	transform: scaleX(0);
	transform-origin: 0 0;
	transition: transform 0.3s ease-in 0.3s;
	width: 100%;
}

.flext-has-highlight.flext-is-style-background::before {
	left: -0.1rem;
	transform: scaleX(0) rotate(2deg);
	top: -0.1rem;
}

.flext-has-highlight.flext-is-style-background::after {
	content: "";
	display: inline-block;
	opacity: 0.7;
	position: absolute;
	right: -0.2rem;
	top: 0.3rem;
	transition-delay: 0.6s;
	z-index: -1;
}

.flext-has-highlight.flext-is-style-background.flext-animated::before {
	transform: scaleX(1) rotate(2deg);
}

.flext-has-highlight.flext-is-style-background.flext-animated::after {
	transform: scaleX(1);
}

/*--------------------------------------------------------------
# Format - Underline
--------------------------------------------------------------*/

.flext-format-underline {
	text-decoration: underline;
}

/*--------------------------------------------------------------
# Format - Inline Animation
--------------------------------------------------------------*/

.flext-has-inline-animation {
	display: inline-block;
	opacity: 0;
	position: relative;
	vertical-align: top;
	white-space: nowrap;
}

.flext-has-inline-animation.flext-is-animated {
	opacity: 1;
}

.flext-has-inline-animation * {
	display: inline-block;
	position: relative;
	vertical-align: top;
	white-space: nowrap;
}

.flext-has-inline-animation em,
em .flext-has-inline-animation,
.flext-has-inline-animation i,
i .flext-has-inline-animation {
	padding-right: 0.2em;
}

.flext-has-inline-animation .flext-inline-word {
	left: 0;
	position: absolute;
	top: 0;
}

.flext-has-inline-animation .flext-is-hidden {
	opacity: 0;
}

.flext-inline-animation .flext-inline-letter {
	display: inline-block;
	white-space: pre;
}

/*--------------------------------------------------------------
# Inline Animation - Clip
--------------------------------------------------------------*/

.flext-inline-clip {
	border-right: 1px solid #000;
	box-sizing: content-box;
	overflow: hidden;
	padding: 0 2px 0 0;
	width: 0;
}

.flext-inline-clip.flext-is-animated {
	width: auto;
}

/*--------------------------------------------------------------
# Inline Animation - Fade In Up
--------------------------------------------------------------*/

.flext-inline-fade-up.flext-inline-animation,
.flext-inline-fade-up .flext-inline-animation {
	overflow: hidden;
	transition: width 0.3s;
}

.flext-inline-fade-up .flext-inline-word {
	backface-visibility: hidden;
	opacity: 0;
	transform: translateY(50%);
}

.flext-inline-fade-up .flext-is-visible {
	animation: flext-inline-fade-up-in 0.5s forwards;
}

.flext-inline-fade-up .flext-is-hidden {
	animation: flext-inline-fade-up-out 0.5s forwards;
}

@keyframes flext-inline-fade-up-in {

	0% {
		opacity: 0;
		transform: translateY(50%);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes flext-inline-fade-up-out {

	0% {
		opacity: 1;
		transform: translateY(0);
	}

	100% {
		opacity: 0;
		transform: translateY(50%);
	}
}

/*--------------------------------------------------------------
# Inline Animation - Flip Horizontal
--------------------------------------------------------------*/

.flext-inline-flip-horizontal {
	perspective: 300px;
}

.flext-inline-flip-horizontal.flext-inline-animation,
.flext-inline-flip-horizontal .flext-inline-animation {
	transition: width 0.3s;
}

.flext-inline-flip-horizontal .flext-is-hidden {
	opacity: 1;
}

.flext-inline-flip-horizontal .flext-inline-letter {
	backface-visibility: hidden;
	transform: rotateY(180deg);
}

.flext-inline-flip-horizontal .flext-in {
	animation: flext-inline-flip-horizontal-in 0.3s forwards;
}

.flext-inline-flip-horizontal .flext-out {
	animation: flext-inline-flip-horizontal-out 0.3s forwards;
}

@keyframes flext-inline-flip-horizontal-in {

	0% {
		transform: rotateY(180deg);
	}

	100% {
		transform: rotateY(0);
	}
}

@keyframes flext-inline-flip-horizontal-out {

	0% {
		transform: rotateY(0);
	}

	100% {
		transform: rotateY(-180deg);
	}
}

/*--------------------------------------------------------------
# Inline Animation - Flip Vertical
--------------------------------------------------------------*/

.flext-inline-flip-vertical.flext-inline-animation,
.flext-inline-flip-vertical .flext-inline-animation {
	perspective: 300px;
	transition: width 0.3s;
}

.flext-inline-flip-vertical .flext-is-hidden {
	opacity: 1;
}

.flext-inline-flip-vertical .flext-inline-letter {
	backface-visibility: hidden;
	transform: translateZ(-20px) rotateX(90deg);
	transform-style: preserve-3d;
}

.flext-inline-flip-vertical .flext-in {
	animation: flext-inline-flip-vertical-in 0.3s forwards;
}

.flext-inline-flip-vertical .flext-out {
	animation: flext-inline-flip-vertical-out 0.3s forwards;
}

@keyframes flext-inline-flip-vertical-in {

	0% {
		opacity: 0;
		transform: translateZ(-20px) rotateX(90deg);
	}

	60% {
		opacity: 1;
		transform: translateZ(-20px) rotateX(-10deg);
	}

	100% {
		opacity: 1;
		transform: translateZ(-20px) rotateX(0deg);
	}
}

@keyframes flext-inline-flip-vertical-out {

	0% {
		opacity: 1;
		transform: translateZ(-20px) rotateX(0);
	}

	60% {
		opacity: 0;
		transform: translateZ(-20px) rotateX(-100deg);
	}

	100% {
		opacity: 0;
		transform: translateZ(-20px) rotateX(-90deg);
	}
}

/*--------------------------------------------------------------
# Inline Animation - Slide Horizontal
--------------------------------------------------------------*/

.flext-inline-slide-horizontal.flext-inline-animation,
.flext-inline-slide-horizontal .flext-inline-animation {
	overflow: hidden;
	transition: width 0.3s;
}

.flext-inline-slide-horizontal .flext-is-visible {
	animation: flext-inline-slide-horizontal-in 0.6s forwards;
}

.flext-inline-slide-horizontal .flext-is-hidden {
	animation: flext-inline-slide-horizontal-out 0.6s forwards;
}

@keyframes flext-inline-slide-horizontal-in {

	0% {
		opacity: 0;
		transform: translateX(-100%);
	}

	60% {
		opacity: 1;
		transform: translateX(20%);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes flext-inline-slide-horizontal-out {

	0% {
		opacity: 1;
		transform: translateX(0);
	}

	60% {
		opacity: 0;
		transform: translateX(120%);
	}

	100% {
		opacity: 0;
		transform: translateX(100%);
	}
}

/*--------------------------------------------------------------
# Inline Animation - Slide Vertical
--------------------------------------------------------------*/

.flext-inline-slide-vertical.flext-inline-animation,
.flext-inline-slide-vertical .flext-inline-animation {
	overflow: hidden;
	transition: width 0.3s;
}

.flext-inline-slide-vertical .flext-is-visible {
	animation: flext-inline-slide-vertical-in 0.6s;
}

.flext-inline-slide-vertical .flext-is-hidden {
	animation: flext-inline-slide-vertical-out 0.6s;
}

@keyframes flext-inline-slide-vertical-in {

	0% {
		opacity: 0;
		transform: translateY(-100%);
	}

	60% {
		opacity: 1;
		transform: translateY(20%);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes flext-inline-slide-vertical-out {

	0% {
		opacity: 1;
		transform: translateY(0);
	}

	60% {
		opacity: 0;
		transform: translateY(120%);
	}

	100% {
		opacity: 0;
		transform: translateY(100%);
	}
}

/*--------------------------------------------------------------
# Inline Animation - Typewriter
--------------------------------------------------------------*/

.flext-inline-typewriter {
	width: 0;
}

.flext-inline-typewriter.flext-is-animated {
	width: auto;
}

.flext-inline-typewriter .flext-inline-word {
	position: relative;
}

.flext-inline-typewriter .flext-inline-word.flext-is-selected {
	background: #000;
	color: #fff;
}

.flext-inline-typewriter .flext-inline-word::after {
	display: inline-block;
	content: "|";
	vertical-align: top;
}

.flext-inline-typewriter .flext-inline-word.flext-cursor-blink::after {
	animation: flext-inline-typewriter-blink 1s step-end infinite;
}

@keyframes flext-inline-typewriter-blink {

	from,
	to {
		color: transparent;
	}

	50% {
		color: inherit;
	}
}

/*--------------------------------------------------------------
# Inline Animation - Zoom In
--------------------------------------------------------------*/

.flext-inline-zoom-in.flext-inline-animation,
.flext-inline-zoom-in .flext-inline-animation {
	transition: width 0.3s;
}

.flext-inline-zoom-in .flext-inline-word {
	backface-visibility: hidden;
}

.flext-inline-zoom-in .flext-is-visible {
	animation: flext-inline-zoom-in-in 0.6s forwards;
}

.flext-inline-zoom-in .flext-is-hidden {
	animation: flext-inline-zoom-in-out 0.6s forwards;
}

@keyframes flext-inline-zoom-in-in {

	0% {
		opacity: 0;
		transform: scale(0);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes flext-inline-zoom-in-out {

	0% {
		opacity: 1;
		transform: scale(1);
	}

	100% {
		opacity: 0;
		transform: scale(0);
	}
}

/*--------------------------------------------------------------
# Inline Animation - Zoom Out
--------------------------------------------------------------*/

.flext-inline-zoom-out.flext-inline-animation,
.flext-inline-zoom-out .flext-inline-animation {
	transition: width 0.3s ease-out 0.15s;
}

.flext-inline-zoom-out .flext-inline-word {
	backface-visibility: hidden;
}

.flext-inline-zoom-out .flext-is-visible {
	animation: flext-inline-zoom-out-in 0.6s forwards;
}

.flext-inline-zoom-out .flext-is-hidden {
	animation: flext-inline-zoom-out-out 0.6s forwards;
}

@keyframes flext-inline-zoom-out-in {

	0% {
		opacity: 0;
		transform: scale(2);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes flext-inline-zoom-out-out {

	0% {
		opacity: 1;
		transform: scale(1);
	}

	100% {
		opacity: 0;
		transform: scale(2);
	}
}