.xl-tab .tab-area {
	margin: 0;
	padding: 0;
	position: relative;
	display: table;
}

.xl-tab li {
	display: inline-block;
	cursor: pointer;
}

.xl-tab .tab-content {
	display: none;
}

.xl-tab .tab-content.active {
	display: block;
}

.xl-tab .tab-content.active {
	opacity: 1;
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: .5s;
}

.xl-tab .inrtab {
	position: relative;
}

/**/
.xl-tab.nvcenter ul.tab-area {
	margin: 0px auto;
	text-align: center;
}

.xl-tab.nvright ul.tab-area, .nvleft ul.tab-area {
	width: 100%;
}

.xl-tab.nvright ul.tab-area li {
	float: right;
}

.xl-tab.nvcenter .tab-area li {
	float: none;
}

/*1*/
.xl-tab.styleone .tab-area li.active .inrtab div:before {
	content: "";
	display: block;
	position: absolute;
	left: 0px;
	width: 100%;
	bottom: -2px;
	height: 2px;
	background: black;
}

.styleone .tab-area li .inrtab {
	background: #7a81f4;
	color: #fff;
	font-weight: bold;
	transition: all .3s ease-in 0s;
}

/*2*/
.styletwo li {
	position: relative;
	margin: 0px 10px;
}

.styletwo li span:before {
	content: "";
	width: 100%;
	height: 4px;
	background: #f6f6f6;
	position: absolute;
	bottom: 0;
	left: 0;
}

.styletwo li.active span:after {
	width: 100%;
	opacity: 1;
}

.styletwo li span:after {
	content: "";
	width: 0;
	height: 4px;
	background: #727cb6;
	position: absolute;
	bottom: 0;
	left: 0;
	opacity: 0;
	z-index: 1;
	transition: all 1s ease 0s;
}

/*3*/
.stylethree li span:after {
	content: "";
	width: 0;
	border-top: 3px solid #00a6ff;
	position: absolute;
	bottom: -1px;
	left: 0;
	transition: all .3s ease 0s;
	left: auto;
	right: 0;
}

.stylethree li span:hover:after, .stylethree li.active span:after {
	width: 100%;
}

/*5*/
.stylefive li:last-child .inrtab:before {
	display: none;
}

.stylefive .active .inrtab {
	background: #ff007a;
}

.stylefive li:last-child .inrtab:after, .stylefive li:last-child .inrtab div:after {
	display: none;
}

.stylefive .inrtab:before {
	border-bottom: 10px solid rgba(0, 0, 0, 0);
	border-left: 10px solid #fff;
	border-top: 10px solid rgba(0, 0, 0, 0);
	content: "";
	position: absolute;
	right: -8px;
	top: 11px;
	z-index: 2;
}

.stylefive .active .inrtab:before {
	border-left: 10px solid #ff007a;
}

.stylefive .active .inrtab:after, .stylefive .inrtab div:after {
	content: "";
	border-left: 10px solid #ff007a;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	position: absolute;
	top: 11px;
	right: -10px;
	z-index: 1;
}

.stylefive .inrtab:after {
	border-left: 10px solid red;
}

@keyframes fadeInOpacity {
	0% {
		opacity: 0;
		transform: translateY(-10px);
	}
	
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}