Mini Shell

.colorful-tab-wrapper{
	width:100%;
	margin:0px auto;
	background:#aaa;
	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:#fff
}
.colorful-tab-wrapper.active:before{
	content:attr(active-tab);
	transform:scale(1) rotate(0deg);	
	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:rgba(255,255,255,0.2);
	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: 'Marvel', sans-serif;
	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:rgba(255,255,255,0.1);
}
.colorful-tab-container{
	width:100%;
	display:flex;
	flex-wrap:wrap;
	flex-direction:column;
}
.colorful-tab-content{
	height:0;
	overflow:hidden;
	opacity:0;
	color:#fff;
	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:3px;
	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}}
.colorful-tab-wrapper.elliptic .colorful-tab-menu {
    margin: 0;
    padding: 0em;
    list-style: none;
}
.colorful-tab-content p {
    font-size: 1em;
    color: #fff;
    line-height: 2em;
    font-family: 'Roboto', sans-serif;
}
/*--media quiries start here--*/
@media (max-width:991px){
.colorful-tab-content p {
    font-size: 0.87em;
}
}
@media (max-width:768px){
.colorful-tab-menu-item a {
    padding: 10px 0;
}
}