.iq-tabs {
position: relative;
z-index: 1;
}
.iq-tabs.iq-box-shadow {
box-shadow: none;
}
.iq-tabs .tab-pane.fade.active.show {
display: block;
}
.iq-tabs .tab-pane.fade {
display: none;
}
.iq-tabs .nav.nav-pills {
display: block;
width: 100%;
margin-bottom: 30px;
-webkit-box-shadow: var(--primary-box-shadow);
-moz-box-shadow: var(--primary-box-shadow);
box-shadow: var(--primary-box-shadow);
background: var(--color-theme-white);
overflow: hidden;
border-radius: 5px;
}
.iq-tabs .nav.nav-pills li {
display: inline-block;
width: auto;
vertical-align: middle;
}
.iq-tabs .nav-pills .nav-link .tab-title {
display: inline-block;
vertical-align: middle;
}
.iq-tabs .nav-pills .nav-link i {
height: 80px;
width: 80px;
text-align: center;
font-size: 45px;
}
.iq-tabs .nav-pills .nav-link i::before {
vertical-align: middle;
line-height: 80px;
}
.iq-tabs .nav-pills .nav-link {
padding: 0px 15px;
position: relative;
text-align: center;
transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
}
.iq-tabs .nav-pills .nav-link.active-tab .tab-title, .iq-tabs .nav-pills .nav-link:hover .tab-title, .iq-tabs .nav-pills .nav-link.active-tab i, .iq-tabs .nav-pills .nav-link:hover i {
color: var(--color-theme-primary);
}
.iq-tabs .nav-pills .nav-link:before {
width: 0;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
height: 4px;
background: var(--color-theme-primary);
content: "";
position: absolute;
right: 0;
bottom: 0px;
}
.iq-tabs .nav-pills .nav-link.active:before, .iq-tabs .nav-pills .nav-link:hover:before .iq-tabs .nav-pills .nav-link .show {
content: "";
display: inline-block;
width: 100%;
height: 4px;
background: var(--color-theme-primary);
content: "";
position: absolute;
left: 0;
bottom: 0px;
border-radius: 5px;
}
.iq-tabs .nav-pills .nav-link.active {
background: transparent;
padding: 0;
}
.iq-tabs .show_content {
width: 100%;
}
.iq-tabs .nav-pills .nav-link .media-body {
align-self: center;
text-align: left;
}
.iq-tabs .nav-pills .nav-link .media-body .tab-title-desc {
display: none;
color: #838383;
transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
opacity: 0;
transform: translateY(35px);
color: #838383;
transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
}
.iq-tabs .nav-pills .nav-link.active .tab-title-desc {
display: none;
transform: translateY(0px);
opacity: 1;
transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-webkit-transition: all 1s;
} .iq-tabs.iq-tab-vertical .nav.nav-pills {
margin-bottom: 0;
box-shadow: none;
}
.iq-tabs.iq-tab-vertical .nav.nav-pills li {
width: 100%;
padding: 0 30px 20px;
}
.iq-tabs.iq-tab-vertical .nav-pills .nav-link {
overflow: hidden;
position: relative;
padding: 15px 25px;
border-radius: 5px;
text-align: left;
box-shadow: var(--primary-box-shadow);
transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
}
.iq-tabs.iq-tab-vertical .nav-pills .nav-link::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 0;
background-color: var(--color-theme-primary);
opacity: 0;
transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-webkit-transition: all 1s;
}
.iq-tabs.iq-tab-vertical .nav-pills .nav-link:before {
display: none;
}
.iq-tabs.iq-tab-vertical .nav-pills .nav-link.active::after, .iq-tabs.iq-tab-vertical .nav-pills .nav-link:hover::after, .iq-tabs.iq-tab-vertical .nav-pills .nav-link.active-tab::after {
opacity: 1;
height: 100%;
}
.iq-tabs.iq-tab-vertical .nav-pills .nav-link .tab-title {
font-size: 18px;
}
.iq-tabs.iq-tab-vertical .nav-pills .nav-link.active .tab-title-desc, .iq-tabs.iq-tab-vertical .nav-pills .nav-link.active-tab .tab-title-desc {
display: block;
transform: translateY(0px);
opacity: 1;
transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-webkit-transition: all 1s;
}
.iq-tabs.iq-tab-vertical .nav-pills .nav-link.active, .iq-tabs.iq-tab-vertical .nav-pills .nav-link:hover, .iq-tabs.iq-tab-vertical .nav-pills .nav-link.active-tab {
background: var(--global-body-lightcolor);
padding-top: 30px;
padding-bottom: 30px;
}
.iq-tabs.iq-tab-vertical .nav-pills .nav-link.active:before, .iq-tabs.iq-tab-vertical .nav-pills .nav-link:hover:before, .iq-tabs.iq-tab-vertical .nav-pills .nav-link.active-tab:before {
display: none;
} .iq-tabs.iq-tab-vertical-2 .nav.nav-pills {
margin-bottom: 0;
box-shadow: none;
}
.iq-tabs.iq-tab-vertical-2 .nav.nav-pills li {
width: 100%;
padding: 0 30px 30px;
}
.iq-tabs.iq-tab-vertical-2 .nav-pills .nav-link {
transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
border: 1px solid transparent;
text-align: left;
position: relative;
overflow: hidden;
padding: 0 15px;
border-radius: 5px;
}
.iq-tabs.iq-tab-vertical-2 .nav.nav-pills li .nav-link.active {
border-color: #f2f2f4;
padding: 15px;
-webkit-box-shadow: var(--primary-box-shadow);
-moz-box-shadow: var(--primary-box-shadow);
box-shadow: var(--primary-box-shadow);
}
.iq-tabs.iq-tab-vertical-2 .nav-pills li .nav-link:before {
display: none;
content: "";
display: block;
position: absolute;
bottom: 15px;
right: -100px;
background: #e8e9f0;
border-radius: 25px;
height: 60%;
left: auto;
transform: rotate(15deg);
width: 60px;
}
.iq-tabs.iq-tab-vertical-2 .nav-pills li .nav-link.active:before {
display: block;
right: -50px;
} .iq-tabs.iq-tab-horizontal-1 .nav.nav-pills {
box-shadow: none;
background: transparent;
border-radius: 5px;
}
.iq-tabs.iq-tab-horizontal-1 .nav.nav-pills li {
width: auto;
margin-right: 5px;
}
.iq-tabs.iq-tab-horizontal-1 .nav-pills .nav-link {
padding: 10px 15px;
border-radius: 5px;
}
.iq-tabs.iq-tab-horizontal-1 .nav-pills .nav-link.active:before, .iq-tabs.iq-tab-horizontal-1 .nav-pills .nav-link:hover:before {
display: none;
}
.iq-tabs.iq-tab-horizontal-1 .nav-pills .nav-link.active, .iq-tabs.iq-tab-horizontal-1 .nav-pills .nav-link:hover {
background: var(--color-theme-primary);
color: var(--color-theme-white);
}
.iq-tabs.iq-tab-horizontal-1 .nav-pills .nav-link.active .tab-title, .iq-tabs.iq-tab-horizontal-1 .nav-pills .nav-link:hover .tab-title {
color: var(--color-theme-white);
} .iq-tabs.iq-tab-horizontal .nav-pills .nav-link.active-tab::before, .iq-tabs .nav-pills .nav-link:hover:before, .iq-tabs .nav-pills .nav-link.show:before {
content: "";
width: 100%;
}
.scale-up-center, .tab-content>.active {
-webkit-animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}  @-webkit-keyframes scale-up-center {
0% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes scale-up-center {
0% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@media(max-width:992px) { .iq-tabs .nav-pills .nav-link {
padding-left: 15px;
padding-right: 15px;
}
.iq-tabs .nav.nav-pills li {
width: auto;
}
}
@media(max-width:767px) { .iq-tabs .nav.nav-pills li {
width: 100%;
}
}
@media(max-width:991px) { .iq-tabs.iq-tab-vertical .nav.nav-pills li {
padding: unset;
}
}