1#@!#!123s

: / home / stickain / www / itosu-ryu.us / wp-content / themes / betheme / css / elements /
Filename : tabber.css
back
/* tabber css  */

.mfn-section-tabber {
  --mfn-section-tabber-nav-width: 250px;
  --mfn-section-tabber-gap: 30px;
  --mfn-section-tabber-nav-gap: 15px;
  --mfn-section-tabber-nav-icon-wrapper-size: 40px;
  --mfn-section-tabber-nav-icon-size: 20px;
  --mfn-section-tabber-nav-link-gap: 15px;


}
.mfn-section-tabber .section_wrapper { gap: var(--mfn-section-tabber-gap); }
.mfn-section-tabber .section_wrapper:after { display: none; }

.mfn-section-tabber .mfn-tabber-nav{ display: flex; position: relative; z-index:3; flex-shrink: 0; box-sizing: border-box; }
.mfn-section-tabber .mfn-tabber-nav li { display: flex; align-items: stretch; }
.mfn-section-tabber .mfn-tabber-nav li a { display: flex; align-items: center; gap: var(--mfn-section-tabber-nav-link-gap); width: 100%; padding: 10px 0; text-decoration: none; transition: all .2s ease-in-out; background-color: var(--mfn-section-tabber-nav-bg);}
.mfn-section-tabber .mfn-tabber-nav li.active a{ background-color: var(--mfn-section-tabber-nav-active-bg, var(--mfn-section-tabber-nav-hover-bg, var(--mfn-section-tabber-nav-bg))); }
.mfn-section-tabber .mfn-tabber-nav li:not(.active) a:hover{ background-color: var(--mfn-section-tabber-nav-hover-bg, var(--mfn-section-tabber-nav-bg)); }

.mfn-section-tabber .mfn-tabber-nav .mfn-tabber-nav-li-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: var(--mfn-section-tabber-nav-icon-wrapper-size); height: var(--mfn-section-tabber-nav-icon-wrapper-size); line-height: 0; overflow: hidden; position: relative; }
.mfn-section-tabber .mfn-tabber-nav .mfn-tabber-nav-li-icon i { font-size: var(--mfn-section-tabber-nav-icon-size); line-height: 1; }
.mfn-section-tabber .mfn-tabber-nav .mfn-tabber-nav-li-icon img { max-width: var(--mfn-section-tabber-nav-icon-size); }
.mfn-section-tabber .mfn-tabber-nav .mfn-tabber-nav-li-desc { flex-grow: 1; }
.mfn-section-tabber .mfn-tabber-nav .mfn-tabber-nav-li-desc span { display: block; }
.mfn-section-tabber .mfn-tabber-nav .mfn-tabber-nav-desc { font-size: 90%; }

.mfn-section-tabber .mfn-tabber-content { flex-grow: 1 !important; }
.mfn-section-tabber .mfn-tabber-content:not(.active){ display: none; }


.mfn-section-tabber .mfn-tabber-nav-hover-sliding .mfn-tabber-nav-slide-helper{ position: absolute; top: 0; left: 0; background-color: var(--mfn-section-tabber-nav-active-bg); width: 0; height: 0; transition: 0.3s; }
.mfn-section-tabber .mfn-tabber-nav-hover-sliding li{ position: relative; z-index: 2; }

.mfn-tabber-nav.mfn-tabber-nav-hover-sliding li.active a, .mfn-tabber-nav.mfn-tabber-nav-hover-sliding li.active a:hover{ background-color: transparent !important; }


    /* Left * Right */
    .mfn-tabber-nav-left .section_wrapper,
    .mfn-tabber-nav-right .section_wrapper { flex-wrap: nowrap; }
    .mfn-tabber-nav-left .mfn-tabber-nav,
    .mfn-tabber-nav-right .mfn-tabber-nav { flex-direction: column; align-items: unset; width: var(--mfn-section-tabber-nav-width); gap: 0; }
    .mfn-tabber-nav-right .mfn-tabber-nav { order: 2; }

    /* Top * Bottom */
    .mfn-tabber-nav-top .section_wrapper,
    .mfn-tabber-nav-bottom .section_wrapper { flex-wrap: wrap; }
    .mfn-tabber-nav-top .mfn-tabber-nav,
    .mfn-tabber-nav-bottom .mfn-tabber-nav { width: auto; max-width: 100%; flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: var(--mfn-section-tabber-nav-gap); }
    .mfn-tabber-nav-top .mfn-tabber-content.mcb-wrap,
    .mfn-tabber-nav-bottom .mfn-tabber-content.mcb-wrap { width: 100%; }
    .mfn-tabber-nav-bottom .mfn-tabber-nav { order: 2; }

    /* Icon */
    .mfn-tabber-icon-left .mfn-tabber-nav-li-wrapper,
    .mfn-tabber-icon-right .mfn-tabber-nav-li-wrapper { flex-direction: row; }
    .mfn-tabber-icon-left .mfn-tabber-nav-li-icon { order: 1; }
    .mfn-tabber-icon-left .mfn-tabber-nav-li-desc { order: 2; }
    .mfn-tabber-icon-right .mfn-tabber-nav-li-icon { order: 2; }
    .mfn-tabber-icon-right .mfn-tabber-nav-li-desc { order: 1; }
    .mfn-tabber-icon-top .mfn-tabber-nav-li-wrapper { flex-direction: column; text-align: center; }
    .mfn-tabber-icon-top .mfn-tabber-nav-li-icon { order: 1; }
    .mfn-tabber-icon-top .mfn-tabber-nav-li-desc { order: 2; }

    .mfn-tabber-icon-center-left .mfn-tabber-nav-li-wrapper,
    .mfn-tabber-icon-center-right .mfn-tabber-nav-li-wrapper { flex-direction: row; justify-content: center; }
    .mfn-tabber-icon-center-left .mfn-tabber-nav .mfn-tabber-nav-li-desc,
    .mfn-tabber-icon-center-right .mfn-tabber-nav .mfn-tabber-nav-li-desc { flex-grow: unset; }
    .mfn-tabber-icon-center-left .mfn-tabber-nav-li-icon { order: 1; }
    .mfn-tabber-icon-center-left .mfn-tabber-nav-li-desc { order: 2; }
    .mfn-tabber-icon-center-right .mfn-tabber-nav-li-icon { order: 2; }
    .mfn-tabber-icon-center-right .mfn-tabber-nav-li-desc { order: 1; }

@media(max-width: 1440px) {

    /* Left * Right */
    .mfn-tabber-nav-laptop-left .section_wrapper,
    .mfn-tabber-nav-laptop-right .section_wrapper { flex-wrap: nowrap; }
    .mfn-tabber-nav-laptop-left .mfn-tabber-nav,
    .mfn-tabber-nav-laptop-right .mfn-tabber-nav { flex-direction: column; align-items: unset; width: var(--mfn-section-tabber-nav-width); gap: 0; }
    .mfn-tabber-nav-laptop-left .mfn-tabber-nav .mfn-tabber-nav-li-desc,
    .mfn-tabber-nav-laptop-right .mfn-tabber-nav .mfn-tabber-nav-li-desc { flex-grow: 1; }
    .mfn-tabber-nav-laptop-left .mfn-tabber-nav { order: 1; }
    .mfn-tabber-nav-laptop-left .mfn-tabber-content { order: 2; }
    .mfn-tabber-nav-laptop-right .mfn-tabber-nav { order: 2; }
    .mfn-tabber-nav-laptop-right .mfn-tabber-content { order: 1; }

    /* Top * Bottom */
    .mfn-tabber-nav-laptop-top .section_wrapper,
    .mfn-tabber-nav-laptop-bottom .section_wrapper { flex-wrap: wrap; }
    .mfn-tabber-nav-laptop-top .mfn-tabber-nav,
    .mfn-tabber-nav-laptop-bottom .mfn-tabber-nav { width: auto; max-width: 100%; flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: var(--mfn-section-tabber-nav-gap); }
    .mfn-tabber-nav-laptop-top .mfn-tabber-content.mcb-wrap,
    .mfn-tabber-nav-laptop-bottom .mfn-tabber-content.mcb-wrap { width: 100%; }
    .mfn-tabber-nav-laptop-top .mfn-tabber-nav { order: 1; }
    .mfn-tabber-nav-laptop-top .mfn-tabber-content { order: 2; }
    .mfn-tabber-nav-laptop-bottom .mfn-tabber-nav { order: 2; }
    .mfn-tabber-nav-laptop-bottom .mfn-tabber-content { order: 1; }

    /* Icon */
    .mfn-tabber-icon-laptop-left .mfn-tabber-nav-li-wrapper,
    .mfn-tabber-icon-laptop-right .mfn-tabber-nav-li-wrapper { flex-direction: row; justify-content: unset; }
    .mfn-tabber-icon-laptop-left .mfn-tabber-nav-li-icon { order: 1; }
    .mfn-tabber-icon-laptop-left .mfn-tabber-nav-li-desc { order: 2; }
    .mfn-tabber-icon-laptop-right .mfn-tabber-nav-li-icon { order: 2; }
    .mfn-tabber-icon-laptop-right .mfn-tabber-nav-li-desc { order: 1; }
    .mfn-tabber-icon-laptop-top .mfn-tabber-nav-li-wrapper { flex-direction: column; justify-content: unset; }
    .mfn-tabber-icon-laptop-top .mfn-tabber-nav-li-icon { order: 1; }
    .mfn-tabber-icon-laptop-top .mfn-tabber-nav-li-desc { order: 2; }

    .mfn-tabber-icon-laptop-center-left .mfn-tabber-nav-li-wrapper,
    .mfn-tabber-icon-laptop-center-right .mfn-tabber-nav-li-wrapper { flex-direction: row; justify-content: center; }
    .mfn-tabber-icon-laptop-center-left .mfn-tabber-nav .mfn-tabber-nav-li-desc,
    .mfn-tabber-icon-laptop-center-right .mfn-tabber-nav .mfn-tabber-nav-li-desc { flex-grow: unset; }
    .mfn-tabber-icon-laptop-center-left .mfn-tabber-nav-li-icon { order: 1; }
    .mfn-tabber-icon-laptop-center-left .mfn-tabber-nav-li-desc { order: 2; }
    .mfn-tabber-icon-laptop-center-right .mfn-tabber-nav-li-icon { order: 2; }
    .mfn-tabber-icon-laptop-center-right .mfn-tabber-nav-li-desc { order: 1; }

}

@media(max-width: 959px) {

    /* Left * Right */
    .mfn-tabber-nav-tablet-left .section_wrapper,
    .mfn-tabber-nav-tablet-right .section_wrapper { flex-wrap: nowrap; }
    .mfn-tabber-nav-tablet-left .mfn-tabber-nav,
    .mfn-tabber-nav-tablet-right .mfn-tabber-nav { flex-direction: column; align-items: unset; width: var(--mfn-section-tabber-nav-width); gap: 0; }
    .mfn-tabber-nav-tablet-left .mfn-tabber-nav .mfn-tabber-nav-li-desc,
    .mfn-tabber-nav-tablet-right .mfn-tabber-nav .mfn-tabber-nav-li-desc { flex-grow: 1; }
    .mfn-tabber-nav-tablet-left .mfn-tabber-nav { order: 1; }
    .mfn-tabber-nav-tablet-left .mfn-tabber-content { order: 2; }
    .mfn-tabber-nav-tablet-right .mfn-tabber-nav { order: 2; }
    .mfn-tabber-nav-tablet-right .mfn-tabber-content { order: 1; }

    /* Top * Bottom */
    .mfn-tabber-nav-tablet-top .section_wrapper,
    .mfn-tabber-nav-tablet-bottom .section_wrapper { flex-wrap: wrap; }
    .mfn-tabber-nav-tablet-top .mfn-tabber-nav,
    .mfn-tabber-nav-tablet-bottom .mfn-tabber-nav { width: auto; max-width: 100%; flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: var(--mfn-section-tabber-nav-gap); }
    .mfn-tabber-nav-tablet-top .mfn-tabber-content.mcb-wrap,
    .mfn-tabber-nav-tablet-bottom .mfn-tabber-content.mcb-wrap { width: 100%; }
    .mfn-tabber-nav-tablet-top .mfn-tabber-nav { order: 1; }
    .mfn-tabber-nav-tablet-top .mfn-tabber-content { order: 2; }
    .mfn-tabber-nav-tablet-bottom .mfn-tabber-nav { order: 2; }
    .mfn-tabber-nav-tablet-bottom .mfn-tabber-content { order: 1; }

    /* Icon */
    .mfn-tabber-icon-tablet-left .mfn-tabber-nav-li-wrapper,
    .mfn-tabber-icon-tablet-right .mfn-tabber-nav-li-wrapper { flex-direction: row; justify-content: unset; }
    .mfn-tabber-icon-tablet-left .mfn-tabber-nav-li-icon { order: 1; }
    .mfn-tabber-icon-tablet-left .mfn-tabber-nav-li-desc { order: 2; }
    .mfn-tabber-icon-tablet-right .mfn-tabber-nav-li-icon { order: 2; }
    .mfn-tabber-icon-tablet-right .mfn-tabber-nav-li-desc { order: 1; }
    .mfn-tabber-icon-tablet-top .mfn-tabber-nav-li-wrapper { flex-direction: column; justify-content: unset; }
    .mfn-tabber-icon-tablet-top .mfn-tabber-nav-li-icon { order: 1; }
    .mfn-tabber-icon-tablet-top .mfn-tabber-nav-li-desc { order: 2; }

    .mfn-tabber-icon-tablet-center-left .mfn-tabber-nav-li-wrapper,
    .mfn-tabber-icon-tablet-center-right .mfn-tabber-nav-li-wrapper { flex-direction: row; justify-content: center; }
    .mfn-tabber-icon-tablet-center-left .mfn-tabber-nav .mfn-tabber-nav-li-desc,
    .mfn-tabber-icon-tablet-center-right .mfn-tabber-nav .mfn-tabber-nav-li-desc { flex-grow: unset; }
    .mfn-tabber-icon-tablet-center-left .mfn-tabber-nav-li-icon { order: 1; }
    .mfn-tabber-icon-tablet-center-left .mfn-tabber-nav-li-desc { order: 2; }
    .mfn-tabber-icon-tablet-center-right .mfn-tabber-nav-li-icon { order: 2; }
    .mfn-tabber-icon-tablet-center-right .mfn-tabber-nav-li-desc { order: 1; }

}

@media(max-width: 767px) {

    /* Left * Right */
    .mfn-tabber-nav-mobile-left .section_wrapper,
    .mfn-tabber-nav-mobile-right .section_wrapper { flex-wrap: nowrap; }
    .mfn-tabber-nav-mobile-left .mfn-tabber-nav,
    .mfn-tabber-nav-mobile-right .mfn-tabber-nav { flex-direction: column; align-items: unset; width: var(--mfn-section-tabber-nav-width); gap: 0; }
    .mfn-tabber-nav-mobile-left .mfn-tabber-nav .mfn-tabber-nav-li-desc,
    .mfn-tabber-nav-mobile-right .mfn-tabber-nav .mfn-tabber-nav-li-desc { flex-grow: 1; }
    .mfn-tabber-nav-mobile-left .mfn-tabber-nav { order: 1; }
    .mfn-tabber-nav-mobile-left .mfn-tabber-content { order: 2; }
    .mfn-tabber-nav-mobile-right .mfn-tabber-nav { order: 2; }
    .mfn-tabber-nav-mobile-right .mfn-tabber-content { order: 1; }

    /* Top * Bottom */
    .mfn-tabber-nav-mobile-top .section_wrapper,
    .mfn-tabber-nav-mobile-bottom .section_wrapper { flex-wrap: wrap; }
    .mfn-tabber-nav-mobile-top .mfn-tabber-nav,
    .mfn-tabber-nav-mobile-bottom .mfn-tabber-nav { width: auto; max-width: 100%; flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: var(--mfn-section-tabber-nav-gap); }
    .mfn-tabber-nav-mobile-top .mfn-tabber-content.mcb-wrap,
    .mfn-tabber-nav-mobile-bottom .mfn-tabber-content.mcb-wrap { width: 100%; }
    .mfn-tabber-nav-mobile-top .mfn-tabber-nav { order: 1; }
    .mfn-tabber-nav-mobile-top .mfn-tabber-content { order: 2; }
    .mfn-tabber-nav-mobile-bottom .mfn-tabber-nav { order: 2; }
    .mfn-tabber-nav-mobile-bottom .mfn-tabber-content { order: 1; }

    /* Icon */
    .mfn-tabber-icon-mobile-left .mfn-tabber-nav-li-wrapper,
    .mfn-tabber-icon-mobile-right .mfn-tabber-nav-li-wrapper { flex-direction: row; justify-content: unset; }
    .mfn-tabber-icon-mobile-left .mfn-tabber-nav-li-icon { order: 1; }
    .mfn-tabber-icon-mobile-left .mfn-tabber-nav-li-desc { order: 2; }
    .mfn-tabber-icon-mobile-right .mfn-tabber-nav-li-icon { order: 2; }
    .mfn-tabber-icon-mobile-right .mfn-tabber-nav-li-desc { order: 1; }
    .mfn-tabber-icon-mobile-top .mfn-tabber-nav-li-wrapper { flex-direction: column; justify-content: unset; }
    .mfn-tabber-icon-mobile-top .mfn-tabber-nav-li-icon { order: 1; }
    .mfn-tabber-icon-mobile-top .mfn-tabber-nav-li-desc { order: 2; }

    .mfn-tabber-icon-mobile-center-left .mfn-tabber-nav-li-wrapper,
    .mfn-tabber-icon-mobile-center-right .mfn-tabber-nav-li-wrapper { flex-direction: row; justify-content: center; }
    .mfn-tabber-icon-mobile-center-left .mfn-tabber-nav .mfn-tabber-nav-li-desc,
    .mfn-tabber-icon-mobile-center-right .mfn-tabber-nav .mfn-tabber-nav-li-desc { flex-grow: unset; }
    .mfn-tabber-icon-mobile-center-left .mfn-tabber-nav-li-icon { order: 1; }
    .mfn-tabber-icon-mobile-center-left .mfn-tabber-nav-li-desc { order: 2; }
    .mfn-tabber-icon-mobile-center-right .mfn-tabber-nav-li-icon { order: 2; }
    .mfn-tabber-icon-mobile-center-right .mfn-tabber-nav-li-desc { order: 1; }

}