/*----------------------------------------------------------------------------*\
	ALO TABS ELEMENT
\*----------------------------------------------------------------------------*/

/* Animation Keyframes */
@keyframes transitionFadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes transitionFlipXIn {
	from { opacity: 0; transform: perspective(400px) rotateX(90deg); }
	to { opacity: 1; transform: perspective(400px) rotateX(0deg); }
}

@keyframes transitionFlipYIn {
	from { opacity: 0; transform: perspective(400px) rotateY(90deg); }
	to { opacity: 1; transform: perspective(400px) rotateY(0deg); }
}

@keyframes transitionSwoopIn {
	from { opacity: 0; transform: scale(0.1) translate(-100%, 0); }
	to { opacity: 1; transform: scale(1) translate(0, 0); }
}

@keyframes transitionWhirlIn {
	from { opacity: 0; transform: scale(0.1) rotate(-270deg); }
	to { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes transitionShrinkIn {
	from { opacity: 0; transform: scale(1.5); }
	to { opacity: 1; transform: scale(1); }
}

@keyframes transitionExpandIn {
	from { opacity: 0; transform: scale(0); }
	to { opacity: 1; transform: scale(1); }
}

@keyframes transitionBounceIn {
	0% { opacity: 0; transform: scale(0.3); }
	50% { opacity: 1; transform: scale(1.05); }
	70% { transform: scale(0.9); }
	100% { transform: scale(1); }
}

@keyframes transitionSlideUpIn {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes transitionSlideDownIn {
	from { opacity: 0; transform: translateY(-20px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes transitionSlideLeftIn {
	from { opacity: 0; transform: translateX(20px); }
	to { opacity: 1; transform: translateX(0); }
}

@keyframes transitionSlideRightIn {
	from { opacity: 0; transform: translateX(-20px); }
	to { opacity: 1; transform: translateX(0); }
}

@keyframes transitionPerspectiveUpIn {
	from { opacity: 0; transform: perspective(400px) rotateX(45deg) translateY(20px); }
	to { opacity: 1; transform: perspective(400px) rotateX(0deg) translateY(0); }
}

@keyframes transitionPerspectiveDownIn {
	from { opacity: 0; transform: perspective(400px) rotateX(-45deg) translateY(-20px); }
	to { opacity: 1; transform: perspective(400px) rotateX(0deg) translateY(0); }
}

@keyframes transitionPerspectiveLeftIn {
	from { opacity: 0; transform: perspective(400px) rotateY(45deg) translateX(-20px); }
	to { opacity: 1; transform: perspective(400px) rotateY(0deg) translateX(0); }
}

@keyframes transitionPerspectiveRightIn {
	from { opacity: 0; transform: perspective(400px) rotateY(-45deg) translateX(20px); }
	to { opacity: 1; transform: perspective(400px) rotateY(0deg) translateX(0); }
}

/* Animation Classes */
.alo-animated.transitionFadeIn { animation-name: transitionFadeIn; }
.alo-animated.transitionFlipXIn { animation-name: transitionFlipXIn; }
.alo-animated.transitionFlipYIn { animation-name: transitionFlipYIn; }
.alo-animated.transitionSwoopIn { animation-name: transitionSwoopIn; }
.alo-animated.transitionWhirlIn { animation-name: transitionWhirlIn; }
.alo-animated.transitionShrinkIn { animation-name: transitionShrinkIn; }
.alo-animated.transitionExpandIn { animation-name: transitionExpandIn; }
.alo-animated.transitionBounceIn { animation-name: transitionBounceIn; }
.alo-animated.transitionSlideUpIn { animation-name: transitionSlideUpIn; }
.alo-animated.transitionSlideDownIn { animation-name: transitionSlideDownIn; }
.alo-animated.transitionSlideLeftIn { animation-name: transitionSlideLeftIn; }
.alo-animated.transitionSlideRightIn { animation-name: transitionSlideRightIn; }
.alo-animated.transitionPerspectiveUpIn { animation-name: transitionPerspectiveUpIn; }
.alo-animated.transitionPerspectiveDownIn { animation-name: transitionPerspectiveDownIn; }
.alo-animated.transitionPerspectiveLeftIn { animation-name: transitionPerspectiveLeftIn; }
.alo-animated.transitionPerspectiveRightIn { animation-name: transitionPerspectiveRightIn; }

.alo-tabs {
	display: block;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.alo-tabs.alo-init {
	-webkit-transition: none;
	transition: none;
}

.alo-tabs:before,
.alo-tabs:after {
	display: block;
	content: "";
	float: none;
	clear: both;
}

.alo-tabs--left,
.alo-tabs--right {
	display: -ms-flexbox;
	display: flex;
}

.alo-tabs__content {
	position: relative;
	display: block;
	overflow: hidden;
	-ms-flex-positive: 1;
	flex-grow: 1;
}

.alo-tabs__content .wpb_content_element:last-child,
.alo-tabs__content .wpb_row:last-child,
.alo-tabs__content p:last-child {
	margin-bottom: 0 !important;
}

.alo-tabs__content .wpb_content_element:first-child,
.alo-tabs__content .wpb_row:first-child,
.alo-tabs__content p:first-child {
	margin-top: 0 !important;
}

.alo-tabs__nav {
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
}

.alo-tabs__nav ul {
	display: block;
	list-style: none;
	padding: 0;
	margin: 0;
	width: 100%;
	cursor: pointer;
}

.alo-tabs__nav ul:after,
.alo-tabs__nav ul:before {
	clear: both;
	float: none;
	content: "";
	display: block;
}

.alo-tabs__nav ul .alo-tabs__nav-item {
	margin-bottom: 0;
}

.alo-tabs__nav-item {
	display: block;
	position: relative;
	padding: 0;
}

.alo-tabs__nav-item:after {
	content: "" !important;
	border: 0 !important;
}

.alo-tab-button {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 8px;
	padding: 12px 20px;
	cursor: pointer;
	-webkit-transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.alo-tab-title {
	white-space: nowrap;
}

.alo-tabs .alo-tab {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	opacity: 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	z-index: 1;
}

.alo-tabs .alo-tab[data-active="true"] {
	position: relative;
	opacity: 1;
	z-index: 2;
}

/* Decor Line */
.alo-tabs--decor-line .alo-tabs__nav {
	position: relative;
	z-index: 2;
}

.alo-tabs--decor-line .alo-tabs__nav-item,
.alo-tabs--decor-line .alo-tabs__content {
	border-style: solid;
}

.alo-tabs--decor-line .alo-tabs__nav-item:after {
	display: block;
	position: absolute;
	content: "";
	opacity: 0;
	z-index: 2;
	-webkit-transition: all .25s;
	transition: all .25s;
}

.alo-tabs--decor-line .alo-tabs__nav-item:hover:after,
.alo-tabs--decor-line .alo-tabs__nav-item.alo-active:after {
	opacity: 1;
}

/* Tabs Top */
.alo-tabs--top .alo-tabs__nav {
	margin-top: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.alo-tabs--top .alo-tabs__nav-item {
	display: inline-block;
	vertical-align: bottom;
	padding-top: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.alo-tabs--top.alo-tabs--decor-line .alo-tabs__nav-item {
	border-top: none;
	border-left: none;
	border-right: none;
	padding-top: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.alo-tabs--top.alo-tabs--decor-line .alo-tabs__nav-item:after {
	left: 0;
	bottom: 0;
	width: 100% !important;
	margin-left: 0 !important;
}

.alo-tabs--top.alo-tabs--decor-line .alo-tabs__content {
	border-bottom: none;
	border-left: none;
	border-right: none;
}

/* Tabs Bottom */
.alo-tabs--bottom .alo-tabs__nav {
	margin-bottom: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.alo-tabs--bottom .alo-tabs__nav-item {
	display: inline-block;
	vertical-align: top;
	padding-bottom: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.alo-tabs--bottom.alo-tabs--decor-line .alo-tabs__nav-item {
	border-bottom: none;
	border-left: none;
	border-right: none;
	padding-bottom: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.alo-tabs--bottom.alo-tabs--decor-line .alo-tabs__nav-item:after {
	left: 0;
	top: 0;
	width: 100% !important;
	margin-left: 0 !important;
}

.alo-tabs--bottom.alo-tabs--decor-line .alo-tabs__content {
	border-top: none;
	border-left: none;
	border-right: none;
}

/* Tabs Left */
.alo-tabs--left {
	-ms-flex-direction: row;
	flex-direction: row;
}

.alo-tabs--left .alo-tabs__nav {
	-ms-flex-order: 0;
	order: 0;
	margin-left: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.alo-tabs--left .alo-tabs__nav .alo-tabs__nav-item {
	width: 100%;
	display: block;
}

.alo-tabs--left .alo-tab-button {
	width: 100%;
	display: block;
}

.alo-tabs--left.alo-tabs--decor-line .alo-tabs__nav-item {
	border-left: none;
	border-top: none;
	border-bottom: none;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	padding-left: 0 !important;
}

.alo-tabs--left.alo-tabs--decor-line .alo-tabs__nav-item:after {
	top: 0;
	right: 0;
	height: 100% !important;
	margin-top: 0 !important;
}

.alo-tabs--left.alo-tabs--decor-line .alo-tabs__content {
	border-right: none;
	border-top: none;
	border-bottom: none;
}

/* Tabs Right */
.alo-tabs--right {
	-ms-flex-direction: row-reverse;
	flex-direction: row-reverse;
}

.alo-tabs--right .alo-tabs__nav {
	-ms-flex-order: 2;
	order: 2;
	margin-right: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.alo-tabs--right .alo-tabs__nav-item {
	display: block;
	width: 100%;
}

.alo-tabs--right .alo-tab-button {
	width: 100%;
	display: block;
}

.alo-tabs--right.alo-tabs--decor-line .alo-tabs__nav-item {
	border-right: none;
	border-top: none;
	border-bottom: none;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	padding-right: 0 !important;
}

.alo-tabs--right.alo-tabs--decor-line .alo-tabs__nav-item:after {
	top: 0;
	left: 0;
	height: 100% !important;
	margin-top: 0 !important;
}

.alo-tabs--right.alo-tabs--decor-line .alo-tabs__content {
	border-left: none;
	border-top: none;
	border-bottom: none;
}

/* Vertical Alignment */
.alo-tabs--v-top .alo-tabs__nav {
	-ms-flex-item-align: flex-start;
	align-self: flex-start;
}

.alo-tabs--v-middle .alo-tabs__nav {
	-ms-flex-item-align: center;
	align-self: center;
}

.alo-tabs--v-bottom .alo-tabs__nav {
	-ms-flex-item-align: flex-end;
	align-self: flex-end;
}

/* Horizontal Alignment */
.alo-tabs--left .alo-tabs__nav {
	text-align: left;
}

.alo-tabs--center .alo-tabs__nav {
	text-align: center;
}

.alo-tabs--right .alo-tabs__nav {
	text-align: right;
}

/* Animation */
.alo-animation {
	opacity: 0;
}

.alo-animation.alo-animated {
	opacity: 1;
}

/* Responsive */
@media screen and (min-width: 769px) and (max-width: 992px) {
	.alo-column:not(.vc_col-sm-12) .alo-tabs {
		margin-right: 0 !important;
		margin-left: 0 !important;
	}

	.alo-tabs__content .alo-tab {
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.alo-tabs--top .alo-tabs__content {
		width: 100%;
	}

	.alo-tabs--top .alo-tabs__content .alo-tab {
		padding: 1em 0 0 0 !important;
	}

	.alo-tabs--bottom .alo-tabs__content {
		width: 100%;
	}

	.alo-tabs--bottom .alo-tabs__content .alo-tab {
		padding: 0 0 1em 0 !important;
	}

	.alo-tabs__nav {
		text-align: center;
	}

	.alo-tabs__nav ul .alo-tabs__nav-item {
		margin: .5em;
	}

	.alo-tabs__nav ul .alo-tabs__nav-item,
	.alo-tabs__nav ul .alo-tabs__nav-item:last-child {
		margin-bottom: .5em !important;
	}

	.alo-tabs--decor-line .alo-tabs__nav-item {
		border: 0 !important;
	}

	.alo-tabs--decor-line:after {
		display: none !important;
	}
}

@media screen and (max-width: 768px) {
	.alo-tabs {
		margin-right: 0 !important;
		margin-left: 0 !important;
	}

	.alo-tabs--top .alo-tabs__content {
		width: 100%;
		padding: 1em 0 0 0 !important;
	}

	.alo-tabs--bottom .alo-tabs__content {
		width: 100%;
		padding: 0 0 1em 0 !important;
	}

	.alo-tabs__content .alo-tab {
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.alo-tabs__nav {
		text-align: center;
	}

	.alo-tabs__nav ul .alo-tabs__nav-item {
		margin: .5em;
	}

	.alo-tabs__nav ul .alo-tabs__nav-item,
	.alo-tabs__nav ul .alo-tabs__nav-item:last-child {
		margin-bottom: .5em !important;
	}

	.alo-tabs--decor-line .alo-tabs__nav-item {
		border: 0 !important;
	}

	.alo-tabs--decor-line:after {
		display: none !important;
	}

	/* Convert left/right to top on mobile */
	.alo-tabs--left,
	.alo-tabs--right {
		-ms-flex-direction: column;
		flex-direction: column;
	}

	.alo-tabs--left .alo-tabs__nav,
	.alo-tabs--right .alo-tabs__nav {
		-ms-flex-order: 0;
		order: 0;
		margin: 0 !important;
	}

	.alo-tabs--right .alo-tabs__content {
		-ms-flex-order: 1;
		order: 1;
	}
}

/* RTL Support */
.rtl .alo-tabs--left,
.rtl .alo-tabs--right {
	-ms-flex-direction: row-reverse;
	flex-direction: row-reverse;
}

.rtl .alo-tabs__nav-item .alo-tab-icon.alo-icon--left {
	margin-right: 0;
	margin-left: 8px;
}

.rtl .alo-tabs__nav-item .alo-tab-icon.alo-icon--right {
	margin-left: 0;
	margin-right: 8px;
}
