.colorful-tab-wrapper {

	width:100%;

	margin:0px auto;

	background: #ededed;

	padding: 20px;

	box-sizing: border-box;

	overflow: hidden;

	position: relative;

	transition: background .3s ease 0s

}

.colorful-tab-wrapper:before {

	position: absolute;

	height: 100%;

	width: 100%;

	display: flex;

	opacity: 0;

	visibility: hidden;

	left: 0;

	top: 0;

	content: "";

	box-sizing: border-box;

	overflow: hidden;

	transform: scale(2) rotate(10deg);

	font-size: 50px;

	transition: all .6s ease 0s;

	padding-top: 60px;

	align-items: center;

	justify-content: center;

	color: #9e9e9e !important; 

}

.colorful-tab-wrapper.active:before {

	content: attr(active-tab);

	transform: scale(1) rotate(0deg);

	font-family: "Montserrat";

	z-index: 9;

	opacity: 1;

	visibility: visible

}

.colorful-tab-wrapper.active .colorful-tab-content {

	color: white

}

.colorful-tab-background-image {

	background-attachment: fixed !important;

	background-position: center center !important;

	background-repeat: no-repeat !important;

	background-size: cover !important

}

.colorful-tab-background-image:after {

	transition: .5s ease 0s;

	content: "";

	width: 100%;

	height: 100%;

	position: absolute;

	left: 0;

	opacity: 0;

	top: 0;

	background: #000

}

.colorful-tab-background-image.active {

	background-image: none

}

.colorful-tab-background-image.active:after {

	width: 100%;

	opacity: .5

}

.colorful-tab-menu {

	display: flex;

	flex-wrap: wrap;

	background:#dc583b;

	margin-bottom: 20px;

	position: relative;

	z-index: 99

}

.colorful-tab-menu-item {

	flex: 1 1 auto;

	align-self: stretch

}

.colorful-tab-menu-item a {

	display: block;

	text-decoration: none;

	font-family: "Montserrat";

	color: #fff ;

	text-align: center;

	padding: 20px 0;

	font-size: 18px;

	transition: background .3s ease 0s, color .3s ease 0s

}

.colorful-tab-menu-item.active a {

	background: #482e1f;

}

.colorful-tab-container {

	width: 100%;

	display: flex;

	flex-wrap: wrap;

	flex-direction: column

}

.colorful-tab-content {

	height: 0;

	overflow: hidden;

	opacity: 0;

	color: #6d6d6d !important;

	visibility: hidden;

	position: relative;

	z-index: 9;

	font-family: "Questrial";

	font-size: 15px;

	line-height: 28px;

	width: 0;

	letter-spacing: .4px;

	transform: scale(0.9);

	transition: all .3s ease-in;

	filter: blur(2px)

}

.colorful-tab-content.active {

	height: auto;

	overflow: auto;

	transition-delay: .7s;

	width: auto;

	opacity: 1;

	filter: blur(0);

	visibility: visible;

	transform: scale(1)

}

.colorful-tab-wrapper.elliptic {

	border-radius: 10px;

	padding: 0

}

.colorful-tab-wrapper.elliptic:before {

	padding-top: 55px

}

.colorful-tab-wrapper.elliptic .colorful-tab-menu {

	margin: 0

}

.colorful-tab-wrapper.elliptic .colorful-tab-container {

	padding: 20px;

	box-sizing: border-box

}

.colorful-tab-wrapper.flatline {

	padding: 10px 20px 20px 20px

}

.colorful-tab-wrapper.flatline:before {

	padding-top: 55px

}

.colorful-tab-wrapper.flatline .colorful-tab-menu {

	background: none;

	margin-bottom: 15px;

	box-shadow: 0 -2px 0 rgba(255,255,255,0.2) inset

}

.colorful-tab-wrapper.flatline .colorful-tab-menu-item a {

	transition: box-shadow .3s ease 0s, opacity .3s ease 0s;

	opacity: .5

}

.colorful-tab-wrapper.flatline .colorful-tab-menu-item.active a {

	background: none;

	opacity: 1;

	box-shadow: 0 -2px 0 #fff inset

}

@media (max-width: 767px) {

.colorful-tab-menu {

	flex-direction: column

}

}