.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;
font-family: 'Michroma', sans-serif;
}
.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);
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:rgba(255,255,255,0.2);
margin-bottom:20px;
position:relative;
z-index:99;
font-family: 'Michroma', sans-serif;
}
.colorful-tab-menu-item{
flex:1 1 auto;
align-self:stretch;
}
.colorful-tab-menu-item a{
display: block;
text-decoration: none;
font-family: 'Michroma', 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(0, 0, 0, 0.4);
}
.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-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;
}
}