.crust-tabs {
display: flex;
flex-direction: column;
}
.crust-tabs .crust-tabs-nav,
.crust-tabs .crust-tabs-content{
position: relative;
}
.crust-tabs-inline-nav{
flex: 0 0 0;
width: auto;
max-width: fit-content;
}
.crust-tabs .crust-tabs-nav > ul {
position: relative;
padding: 0;
margin: 0;
list-style-type: none;
display: flex;
justify-content: flex-start;
align-items: center;
z-index: 1;
}
.crust-tabs .crust-tabs-nav > ul li {
position: relative;
padding: 8px 20px;
cursor: pointer;
display: flex;
font-size: 16px;
justify-content: center;
align-items: center;
text-align: center;
will-change: transform;
transition: all .5s cubic-bezier(0.2,1,0.3,1), border 0s;
}
.crust-tabs .crust-tabs-nav > ul li.active{
z-index: 2;
}
.crust-tabs.crust-full-tabs .crust-tabs-nav > ul li{
flex: 1 1 auto;
}
.crust-tab-inline-icon li i{
margin-right: 16px;
}
.crust-tabs-content {
display: flex;
flex: 1 1 auto;
}
.crust-tabs:not(.crust-tabs-creative) .crust-tabs-content > div {
display: none;
transform: translateY(30px);
opacity: 0;
}
.crust-tabs .crust-tabs-content > div.active,
.crust-tabs .crust-tabs-content > div.active-default {
display: block;
width: 100%;
padding: 30px;
opacity: 1;
transform: translateY(0);
animation: fadeInUpTabs .4s linear;
}
.crust-sticky-tabs .crust-tabs-nav{
position: -webkit-sticky;
position: sticky;
top: 20px;
}
.crust-sticky-header .crust-sticky-tabs .crust-tabs-nav{
top: 140px
}
.crust-tabs-vertical.crust-sticky-tabs{
align-items: flex-start;
} .crust-tab-inline-icon li a .fa {
margin-right: 10px;
line-height: 1;
}
.crust-tab-top-icon li {
display: flex;
flex-wrap: wrap;
text-align: center;
}
.crust-tab-top-icon li a {
display: flex;
flex-wrap: wrap;
text-align: center;
}
.crust-tab-top-icon li .fa,
.crust-tab-top-icon li .crust-tab-title {
flex: 1 1 100%;
}
.crust-tab-top-icon li .fa{
line-height: 1;
}
.crust-tab-top-icon li a .crust-tab-title {
margin-top: 10px;
} .crust-tabs.crust-tabs-vertical {
flex-direction: row;
}
.crust-tabs.crust-tabs-vertical .crust-tabs-nav {
flex: 0 0 auto;
}
.crust-tabs.crust-tabs-vertical .crust-tabs-nav > ul {
flex-flow: column wrap;
}
.crust-tabs.crust-tabs-vertical .crust-tabs-nav > ul > li {
width: 100%;
padding: 8px 10px;
}
.crust-tabs.crust-tabs-vertical .crust-tabs-nav > ul li::after {
bottom: auto !important;
right: -10px;
top: calc( 50% - 10px );
left: auto !important;
border-left: 10px solid #444;
border-right: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}
.crust-tabs-creative .crust-tabs-slider {
position: absolute;
left: 0;
top: 0;
background: #333;
height: 100%;
}
.crust-tabs-creative .crust-tabs-content {
overflow: hidden;
position: relative;
width: 100%;
}
.crust-tabs-creative .crust-tabs{
position: relative;
}
.crust-tabs-creative .crust-tab-element {
position: absolute;
left: 0;
top: 0;
width: 100%;
opacity: 0;
}
@keyframes fadeInUpTabs {
from {
transform: translateY(30px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@media only screen and (max-width: 767px) {
.crust-tabs .crust-tabs-nav > ul {
flex-wrap: wrap;
flex-flow: row wrap;
}
.crust-tabs .crust-tabs-nav > ul li {
flex: 1 1 auto;
}
.responsive-vertical-layout.crust-tabs .crust-tabs-nav > ul li {
flex: 1 1 100%;
}
.crust-tabs.crust-tabs-vertical {
flex-wrap: wrap;
}
.crust-tabs.crust-tabs-vertical div.crust-tabs-nav {
flex: 1 100%;
}
.crust-tabs.crust-tabs-vertical ul {
flex: 1 100%;
}
.crust-tabs.crust-tabs-vertical ul li {
flex: 1 100%;
}
div.crust-tabs.crust-tabs-vertical div.crust-tabs-nav > ul li::after {
bottom: -20px !important;
left: 0 !important;
right: 0 !important;
top: auto !important;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top-color: #444 !important;
}
.crust-tabs.crust-tabs-vertical .crust-tabs-content > div {
padding: 20px 0 !important;
}
}.crust-cta {
display: flex;
align-items: center;
}
.crust-cta.cta-left{
justify-content: flex-start;
text-align: left;
}
.crust-cta.cta-center{
flex-wrap: wrap;
flex-direction: column;
text-align: center;
}
.crust-cta.cta-right{
flex-direction: row-reverse;
text-align: right;
}
.crust-cta.crust-cta-block-btn{
flex-wrap: wrap;
}
.crust-cta-button{
white-space: nowrap;
}
.crust-cta.crust-cta-block-btn .crust-cta-button{
flex-basis: 100%;
width: 100%;
text-align: left;
}
.crust-cta .crust-cta-icon{
margin: 0 20px 0 0;
}
.crust-cta .crust-cta-content{
padding-right: 20px;
flex: 1 1 auto;
}
.crust-cta .crust-cta-title{
word-wrap: break-word;
max-width: 100%;
margin-bottom: 5px;
}
.crust-cta-content + .crust-cta-button {
text-align: right;
}
.crust-cta-text p{
margin: 0;
} .crust-cta.cta-center{
flex-wrap: wrap;
flex-direction: column;
text-align: center;
}
.crust-cta.cta-center .crust-cta-icon{
margin: 0 0 20px;
}
.crust-cta.cta-center .crust-cta-content{
margin: 0 0 20px;
} .crust-cta.cta-right .crust-cta-icon{
margin: 0 0 0 20px;
}
.crust-cta.cta-right .crust-cta-content{
padding-right: 0;
padding-left: 20px;
}
.crust-cta .crust-cta-icon[class*="crust-cta-icon-bg-"] i {
text-align: center;
}
.crust-cta .crust-cta-icon i{
transition: all .4s ease-in-out;
display: inline-block;
}
.crust-cta .crust-cta-icon.crust-cta-icon-bg-circle i{
border-radius: 50%;
}
.crust-cta .crust-cta-icon.crust-cta-icon-bg-radius i{
border-radius: 10px;
}
@media (max-width: 992px) {
.crust-cta{
flex-direction: column;
}
.crust-cta .crust-cta-content,
.crust-cta .crust-cta-icon{
margin-right: 0 !important;
padding-right: 0 !important;
text-align: center;
}
.crust-cta .crust-cta-text{
margin-bottom: 16px;
}
.crust-cta.crust-cta-block-btn .crust-cta-button{
flex-basis: auto;
width: auto;
}
.crust-cta-button .crust-btn{
margin-left: auto !important;
margin-right: auto !important;
}
}
@media (max-width: 768px) {
.crust-cta{
justify-content: center !important;
text-align: center !important;
}
}