.flext-tabs {
display: flex;
flex-wrap: wrap;
position: relative;
width: 100%;
}
.flext-tabs-nav {
border-bottom: 1px solid #3e3e3e;
box-sizing: border-box;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
line-height: 1.35;
list-style: none;
margin: 0 0 1rem;
padding: 0;
position: relative;
width: 100%;
z-index: 1;
}
.flext-tabs-nav a {
color: #333;
flex: 1 1 33.333333%;
outline: none;
padding: 1.5rem 0;
position: relative;
text-align: left;
text-decoration: none;
white-space: nowrap;
}
.flext-tabs-nav a span {
opacity: 0.6;
transition: opacity 0.3s;
}
.flext-tabs-nav a span:hover,
.flext-tabs-nav a span:focus,
.flext-tabs-nav a.is-active:hover span,
.flext-tabs-nav a.is-active:focus span,
.flext-tabs-nav a.is-active span {
opacity: 1;
outline: none;
}
.flext-tabs-nav a::after {
background: #333;
bottom: -2px;
content: "";
height: 3px;
left: 0;
opacity: 0;
position: absolute;
right: 0;
transition: opacity 0.3s, background-color 0.3s;
}
.flext-tabs-nav a.is-active::after {
opacity: 1;
}
.flext-tabs-nav i {
display: inline-block;
font-weight: 400;
font-size: 2rem;
margin: 0 0 5px 0;
transition: none;
vertical-align: middle;
}
.flext-tabs-nav span {
display: block;
}
.flext-tab-wrapper {
box-sizing: border-box;
overflow: hidden;
position: relative;
width: 100%;
}
.flext-tab {
box-sizing: border-box;
opacity: 0;
position: absolute;
transition: opacity 0.3s;
top: 0;
visibility: hidden;
width: 100%;
z-index: 0;
}
.flext-tab.is-active {
opacity: 1;
position: relative;
visibility: visible;
z-index: 10;
} .flext-tabs.is-vertical {
flex-wrap: nowrap;
}
.flext-tabs.is-vertical .flext-tabs-nav {
background: #f9f9f9;
border-bottom: none;
display: block;
min-width: 40px;
overflow-x: hidden;
width: 40px;
}
.flext-tabs.is-vertical .flext-tabs-nav a {
display: block;
padding: 10px;
text-align: left;
}
.flext-tabs.is-vertical .flext-tabs-nav a::after {
display: none;
}
.flext-tabs.is-vertical .flext-tabs-nav a span {
display: none;
}  @media (min-width: 1024px) {
.flext-tabs.is-vertical {
flex-wrap: nowrap;
}
.flext-tabs.is-vertical .flext-tabs-nav a {
border-bottom: 1px solid #eee;
}
.flext-tabs.is-vertical .flext-tabs-nav a i {
margin: 0 5px 0 0;
}
}
@media (min-width: 1200px) {
.flext-tabs.is-vertical .flext-tabs-nav {
width: 20%;
}
.flext-tabs.is-vertical .flext-tabs-nav a span {
display: inline-block;
}
}