/**
 * The following styles get applied both on the front of your site
 * and in the editor.
 *
 * Replace them with your own styles or remove the file completely.
 */

.wp-block-webl-textrotator {}

.wp-block-webl-textrotator .cd-words-wrapper b {
	font-weight: inherit;
	font-style: inherit;
}

.wp-block-webl-textrotator .cd-words-wrapper b>i,
.wp-block-webl-textrotator .cd-words-wrapper b>i>em {
	font-style: inherit;
}

.cd-words-wrapper {
	position: relative;
}

.cd-words-wrapper b {
	position: absolute;
	left: 0;
	top: 0;
}


.cd-words-wrapper.nowrap {
	display: inline-block;
}

.cd-words-wrapper.nowrap b {
	display: inline-block;
	white-space: nowrap;
}

.cd-words-wrapper b.is-visible {
	position: relative;
}

.no-js .cd-words-wrapper b {
	opacity: 0;
}

.no-js .cd-words-wrapper b.is-visible {
	opacity: 1;
}

/* Flip */

.flip .cd-words-wrapper {
	perspective: 300px;
}

.flip .cd-words-wrapper b {
	opacity: 0;
	transform: rotateX(180deg);
	transform-origin: 50% 100%;
}

.flip .cd-words-wrapper .is-visible {
	animation: cd-flip-in 1.2s;
	opacity: 1;
	transform: rotateX(0deg);
}

.flip .cd-words-wrapper .is-hidden {
	animation: cd-flip-out 1.2s;
	transform: rotateX(180deg);
}

@keyframes cd-flip-in {
	0% {
		opacity: 0;
		transform: rotateX(180deg);
	}

	35% {
		opacity: 0;
		transform: rotateX(120deg);
	}

	65% {
		opacity: 0;
	}

	to {
		opacity: 1;
		transform: rotateX(1turn);
	}
}

@keyframes cd-flip-out {
	0% {
		opacity: 1;
		transform: rotateX(0deg);
	}

	35% {
		opacity: 1;
		transform: rotateX(-40deg);
	}

	65% {
		opacity: 0;
	}

	to {
		opacity: 0;
		transform: rotateX(180deg);
	}
}

/* Drop-in */

.drop-in .cd-words-wrapper {
	perspective: 300px;
}

.drop-in .cd-words-wrapper b {
	opacity: 0;
}

.drop-in .cd-words-wrapper .is-visible {
	animation: drop-in-in 0.8s;
	opacity: 1;
}

.drop-in .cd-words-wrapper .is-hidden {
	animation: drop-in-out 0.8s;
}

@keyframes drop-in-in {
	0% {
		opacity: 0;
		transform: translateZ(100px);
	}

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

@keyframes drop-in-out {
	0% {
		opacity: 1;
		transform: translateZ(0);
	}

	to {
		opacity: 0;
		transform: translateZ(-100px);
	}
}

/* Slide */

.slide b {
	opacity: 0;
}

.slide .cd-words-wrapper .is-visible {
	animation: cd-slide-in 0.6s;
	opacity: 1;
}

.slide .cd-words-wrapper .is-hidden {
	animation: cd-slide-out 0.6s;
}

@keyframes cd-slide-in {
	0% {
		opacity: 0;
		transform: translateX(-100%);
	}

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

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

@keyframes cd-slide-out {
	0% {
		opacity: 1;
		transform: translateX(0);
	}

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

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

/* Slide Down */

.slide-down.cd-headline span {
	display: inline-block;
	padding: 0.2em 0;
}

.slide-down .cd-words-wrapper {
	overflow: hidden;
	vertical-align: top;
}

.slide-down .cd-words-wrapper b {
	opacity: 0;
	top: 0.2em;
}

.slide-down .cd-words-wrapper .is-visible {
	animation: cd-slide-down-in 0.6s;
	opacity: 1;
	top: 0;
}

.slide-down .cd-words-wrapper .is-hidden {
	animation: cd-slide-down-out 0.6s;
}

@keyframes cd-slide-down-in {
	0% {
		opacity: 0;
		transform: translateY(-100%);
	}

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

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

@keyframes cd-slide-down-out {
	0% {
		opacity: 1;
		transform: translateY(0);
	}

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

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

/* Type */

.cd-headline.type .cd-words-wrapper {
	vertical-align: top;
	overflow: hidden;
}

.cd-headline.type .cd-words-wrapper::after {
	/* vertical bar */
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	bottom: auto;
	transform: translateY(-50%);
	height: 90%;
	width: 1px;
	background-color: #aebcb9;
}

.cd-headline.type .cd-words-wrapper.waiting::after {
	animation: cd-pulse 1s infinite;
}

.cd-headline.type .cd-words-wrapper.selected {
	background-color: #aebcb9;
}

.cd-headline.type .cd-words-wrapper.selected::after {
	visibility: hidden;
}

.cd-headline.type .cd-words-wrapper.selected b {
	color: #0d0d0d;
}

.cd-headline.type b {
	visibility: hidden;
}

.cd-headline.type b.is-visible {
	visibility: visible;
}

.cd-headline.type i {
	position: absolute;
	visibility: hidden;
}

.cd-headline.type i.in {
	position: relative;
	visibility: visible;
}

@keyframes cd-pulse {
	0% {
		opacity: 1;
		transform: translateY(-50%) scale(1);
	}

	40% {
		opacity: 0;
		transform: translateY(-50%) scale(0.9);
	}

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

/* Clip */

.cd-headline.clip span {
	display: inline-block;
	padding: .2em 0;
}

.cd-headline.clip .cd-words-wrapper {
	overflow: hidden;
	vertical-align: top;
}

.cd-headline.clip .cd-words-wrapper::after {
	/* line */
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 2px;
	height: 100%;
	background-color: #aebcb9;
}

.cd-headline.clip b {
	opacity: 0;
	white-space: nowrap;
}

.cd-headline.clip b.is-visible {
	opacity: 1;
}

/* Swirl */

.swirl .cd-words-wrapper {
	perspective: 300px;
}

.swirl .cd-words-wrapper i {
	backface-visibility: hidden;
	display: inline-block;
}

.swirl .cd-words-wrapper b {
	opacity: 0;
	transform: scaleX(1.0005);
}

.swirl .cd-words-wrapper i {
	opacity: 0;
	transform: translateZ(-20px) rotateX(90deg);
	transform-style: preserve-3d;
}

.swirl .is-visible .cd-words-wrapper i {
	opacity: 1;
}

.swirl .cd-words-wrapper i.in {
	animation: cd-swirl-in 0.4s forwards;
}

.swirl .cd-words-wrapper i:not(.in) {
	animation: cd-swirl-out 0.4s forwards;
}

@keyframes cd-swirl-in {
	0% {
		opacity: 0;
		transform: translateZ(-20px) rotateX(90deg);
	}

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

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

@keyframes cd-swirl-out {
	0% {
		opacity: 1;
		transform: translateZ(-20px) rotateX(0);
	}

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

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

/* Blinds */

.blinds .cd-words-wrapper {
	perspective: 300px;
}

.blinds .cd-words-wrapper b {
	opacity: 0;
}

.blinds .cd-words-wrapper i {
	backface-visibility: hidden;
	display: inline-block;
	transform: rotateY(180deg);
}

.blinds .cd-words-wrapper i {
	transform: rotateY(0deg);
}

.blinds .cd-words-wrapper i.in {
	animation: cd-blinds-in 0.6s forwards;
}

.blinds .cd-words-wrapper i:not(.in) {
	animation: cd-blinds-out 0.6s forwards;
}

@keyframes cd-blinds-in {
	0% {
		transform: rotateY(180deg);
	}

	to {
		transform: rotateY(0deg);
	}
}

@keyframes cd-blinds-out {
	0% {
		transform: rotateY(0);
	}

	to {
		transform: rotateY(-180deg);
	}
}

/* Wave */

.wave .cd-words-wrapper b {
	opacity: 0;
}

.wave .cd-words-wrapper i {
	display: inline-block;
	opacity: 0;
	transform: scale(0);
}

.wave .cd-words-wrapper i {
	opacity: 1;
}

.wave .cd-words-wrapper i.in {
	animation: cd-wave-up 0.6s forwards;
}

.wave .cd-words-wrapper i:not(.in) {
	animation: cd-wave-down 0.6s forwards;
}

@keyframes cd-wave-up {
	0% {
		opacity: 0;
		transform: scale(0);
	}

	60% {
		opacity: 1;
		transform: scale(1.2);
	}

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

@keyframes cd-wave-down {
	0% {
		opacity: 1;
		transform: scale(1);
	}

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

.blinds .cd-words-wrapper,
.drop-in .cd-words-wrapper,
.flip .cd-words-wrapper,
.slide .cd-words-wrapper,
.slide-down .cd-words-wrapper,
.swirl .cd-words-wrapper,
.wave .cd-words-wrapper,
.fade .cd-words-wrapper {
	transition: width 0.5s;
}

/*
.blinds .cd-words-wrapper,
.swirl .cd-words-wrapper,
.wave .cd-words-wrapper {
	overflow: hidden;
}

.blinds .cd-words-wrapper,
.swirl .cd-words-wrapper,
.wave .cd-words-wrapper {
	white-space: nowrap;
}*/

/* Fade */
.cd-headline.fade b {
	opacity: 0;
}

.cd-headline.fade b.is-visible {
	opacity: 1;
}

.cd-headline.fade b.is-visible {
	animation: fadeIn 1s;
}

.cd-headline.fade b.is-hidden {
	animation: fadeOut 0.6s;
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}

	60% {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes fadeOut {
	0% {
		opacity: 1;
	}

	40% {
		opacity: 0;
	}

	to {
		opacity: 0;
	}
}