OwlCyberSecurity - MANAGER

Edit File: animated-box.css

.lakit-animated-box {
	position: relative;
	perspective: 1000px;
	color: #fff
}
.lakit-animated-box__back, .lakit-animated-box__front {
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: stretch;
	flex-flow: row nowrap
}
.lakit-animated-box__front {
	background-color: #c36
}
.lakit-animated-box__back {
	background-color: #000
}
.lakit-animated-box__subtitle, .lakit-animated-box__title {
	color: inherit
}
.lakit-animated-box__overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	display: block;
	top: 0;
	left: 0;
	z-index: 1
}
.lakit-animated-box__inner {
	min-width: 100%;
	z-index: 2;
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-content: center;
	align-items: stretch
}
.lakit-animated-box__icon {
	min-width: 100%;
	display: flex;
	justify-content: center
}
.lakit-animated-box .lakit-animated-box__button, .lakit-animated-box__icon .lakit-animated-box-icon-inner {
	display: flex;
	justify-content: center;
	align-items: center
}
.lakit-animated-box__content {
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-content: center;
	align-items: stretch
}
.lakit-animated-box .lakit-animated-box__button--icon-before .lakit-animated-box__button-text {
	order: 2
}
.lakit-animated-box .lakit-animated-box__button--icon-after .lakit-animated-box__button-text, .lakit-animated-box .lakit-animated-box__button--icon-before .lakit-animated-box__button-icon {
	order: 1
}
.lakit-animated-box .lakit-animated-box__button--icon-after .lakit-animated-box__button-icon {
	order: 2
}
.lab-ef-1 .lakit-animated-box__front {
	transform-style: preserve-3d;
	transform: rotateY(0);
	backface-visibility: hidden;
	z-index: 2;
	transition: .7s cubic-bezier(.11, .6, .24, .89)
}
.lab-ef-1 .lakit-animated-box__back {
	transform-style: preserve-3d;
	transform: rotateY(-180deg);
	backface-visibility: hidden;
	z-index: 1;
	transition: .7s cubic-bezier(.11, .6, .24, .89)
}
.lab-ef-1.flipped .lakit-animated-box__front {
	transform: rotateY(180deg);
	transition: .7s cubic-bezier(.11, .6, .24, .89)
}
.lab-ef-1.flipped .lakit-animated-box__back {
	transform: rotateY(0);
	transition: .7s cubic-bezier(.11, .6, .24, .89)
}
.lab-ef-2 .lakit-animated-box__front {
	transform-style: preserve-3d;
	transform: rotateX(0);
	backface-visibility: hidden;
	z-index: 2;
	transition: .7s cubic-bezier(.11, .6, .24, .89)
}
.lab-ef-2 .lakit-animated-box__back {
	transform-style: preserve-3d;
	transform: rotateX(-180deg);
	backface-visibility: hidden;
	z-index: 1;
	transition: .7s cubic-bezier(.11, .6, .24, .89)
}
.lab-ef-2.flipped .lakit-animated-box__front {
	transform: rotateX(180deg);
	transition: .7s cubic-bezier(.11, .6, .24, .89)
}
.lab-ef-2.flipped .lakit-animated-box__back {
	transform: rotateX(0);
	transition: .7s cubic-bezier(.11, .6, .24, .89)
}
.lab-ef-3 .lakit-animated-box__front {
	transform-style: preserve-3d;
	transform: rotateX(0) translateY(0) scale(1);
	z-index: 2;
	transition: .7s cubic-bezier(.11, .6, .24, .89)
}
.lab-ef-3 .lakit-animated-box__back {
	transform-style: preserve-3d;
	transform: rotateX(-90deg) translateY(150%) scale(0);
	z-index: 1;
	transition: .5s cubic-bezier(.63, .07, .78, .55)
}
.lab-ef-3.flipped .lakit-animated-box__front {
	transform: rotateX(90deg) translateY(-150%) scale(0);
	transition: .5s cubic-bezier(.63, .07, .78, .55);
	z-index: 1
}
.lab-ef-3.flipped .lakit-animated-box__back {
	transform: rotateX(0) translateY(0) scale(1);
	transition: .7s cubic-bezier(.11, .6, .24, .89);
	z-index: 2
}
.lab-ef-4 .lakit-animated-box__front {
	transform-style: preserve-3d;
	transform: rotateY(0) translateX(0) scale(1);
	z-index: 2;
	transition: .7s cubic-bezier(.11, .6, .24, .89)
}
.lab-ef-4 .lakit-animated-box__back {
	transform-style: preserve-3d;
	transform: rotateY(-90deg) translateX(-150%) scale(0);
	z-index: 1;
	transition: .5s cubic-bezier(.63, .07, .78, .55)
}
.lab-ef-4.flipped .lakit-animated-box__front {
	transform: rotateY(90deg) translateX(150%) scale(0);
	transition: .5s cubic-bezier(.63, .07, .78, .55);
	z-index: 1
}
.lab-ef-4.flipped .lakit-animated-box__back {
	transform: rotateY(0) translateX(0) scale(1);
	transition: .7s cubic-bezier(.11, .6, .24, .89);
	z-index: 2
}
.lab-ef-5, .lab-ef-6 {
	overflow: hidden
}
.lab-ef-5 .lakit-animated-box__front, .lab-ef-5.flipped .lakit-animated-box__back {
	transform: translateY(0);
	transition: .7s cubic-bezier(.5, .12, .46, .88)
}
.lab-ef-5 .lakit-animated-box__back {
	transform: translateY(-100%);
	transition: .7s cubic-bezier(.5, .12, .46, .88)
}
.lab-ef-5.flipped .lakit-animated-box__front {
	transform: translateY(100%);
	transition: .7s cubic-bezier(.5, .12, .46, .88)
}
.lab-ef-6 .lakit-animated-box__front, .lab-ef-6.flipped .lakit-animated-box__back {
	transform: translateX(0);
	transition: .7s cubic-bezier(.5, .12, .46, .88)
}
.lab-ef-6 .lakit-animated-box__back {
	transform: translateX(-100%);
	transition: .7s cubic-bezier(.5, .12, .46, .88)
}
.lab-ef-6.flipped .lakit-animated-box__front {
	transform: translateX(100%);
	transition: .7s cubic-bezier(.5, .12, .46, .88)
}
.lab-ef-7 .lakit-animated-box__front {
	transform-style: preserve-3d;
	transform: rotateY(0);
	backface-visibility: hidden;
	transition: .8s cubic-bezier(.5, .12, .46, .88)
}
.lab-ef-7 .lakit-animated-box__front .lakit-animated-box__inner {
	transform: translateZ(0);
	transition: .8s cubic-bezier(.5, .12, .46, .88);
	backface-visibility: hidden;
}
.lab-ef-7 .lakit-animated-box__back {
	transform-style: preserve-3d;
	transform: rotateY(-180deg);
	backface-visibility: hidden;
	z-index: 2;
	transition: .8s cubic-bezier(.5, .12, .46, .88)
}
.lab-ef-7 .lakit-animated-box__back .lakit-animated-box__inner {
	transform: translateZ(120px);
	transition: .8s cubic-bezier(.5, .12, .46, .88);
	backface-visibility: hidden;
}
.lab-ef-7.flipped .lakit-animated-box__front {
	transform: rotateY(180deg)
}
.lab-ef-7.flipped .lakit-animated-box__front .lakit-animated-box__inner {
	transform: translateZ(120px)
}
.lab-ef-7.flipped .lakit-animated-box__back {
	transform: rotateY(0)
}
.lab-ef-7.flipped .lakit-animated-box__back .lakit-animated-box__inner {
	transform: translateZ(0)
}
.lab-ef-8 .lakit-animated-box__front {
	transform-style: preserve-3d;
	transform: rotateX(0);
	backface-visibility: hidden;
	z-index: 2;
	transition: .8s cubic-bezier(.5, .12, .46, .88)
}
.lab-ef-8 .lakit-animated-box__front .lakit-animated-box__inner {
	transform: translateZ(0);
	transition: .8s cubic-bezier(.5, .12, .46, .88);
	backface-visibility: hidden;
}
.lab-ef-8 .lakit-animated-box__back {
	transform-style: preserve-3d;
	transform: rotateX(-180deg);
	backface-visibility: hidden;
	z-index: 1;
	transition: .8s cubic-bezier(.5, .12, .46, .88)
}
.lab-ef-8 .lakit-animated-box__back .lakit-animated-box__inner {
	transform: translateZ(125px);
	transition: .8s cubic-bezier(.5, .12, .46, .88);
	backface-visibility: hidden;
}
.lab-ef-8.flipped .lakit-animated-box__front {
	transform: rotateX(180deg)
}
.lab-ef-8.flipped .lakit-animated-box__front .lakit-animated-box__inner {
	transform: translateZ(125px)
}
.lab-ef-8.flipped .lakit-animated-box__back {
	transform: rotateX(0)
}
.lab-ef-8.flipped .lakit-animated-box__back .lakit-animated-box__inner {
	transform: translateZ(0)
}
.elementor-wrap-icon svg,
.lakit-animated-box-icon-inner svg {
	width: 1em;
	height: 1em;
	vertical-align: middle
}