/**************************************************************************
*	 Zozo Tabs: Mobile
*
*    1. Horizontal Structure
*    2. Horizontal Positioning 
*    3. Horizontal Rounded Cornors
     4. Horizontal Shadows
*    
*   Most of the time you shouldn't delete/edit section 1 (structure).
*   - You can delete/edit part of positioning
*   - You can delete/edit rounded and shadows section if you need.
* 
**************************************************************************/
    
/*#region ==========================================================================
    Zozo Tabs Mobile Menu
========================================================================== */


/*reset*/
.z-tabs.mobile > ul.z-tabs-nav,
.z-tabs.mobile > ul.z-tabs-nav > li,
.z-tabs.mobile > ul.z-tabs-nav > li.z-active,
.z-tabs.mobile > .z-container,
.z-tabs.mobile > .z-container > .z-content
{
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    text-shadow: none;
}



.z-tabs.mobile > ul.z-tabs-desktop
{
    height: auto;
    opacity: 1;
    visibility: visible;
    -webkit-transition: opacity 400ms ease-in-out;
    -moz-transition: opacity 400ms ease-in-out;
    transition: opacity 400ms ease-in-out;
}


.z-tabs.mobile.z-shadows > ul.z-tabs-mobile
{
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
}

.z-tabs.mobile > ul.z-tabs-nav.z-tabs-desktop > li
{
    float: none;
    display: block;
}

.z-tabs.mobile > ul.z-tabs-desktop.z-hide-menu
{
    opacity: 0;
    height: 0;
    visibility: hidden;
}

.z-tabs.mobile > .z-container
{
    margin-top: 2px;
    width: auto;
}

.z-tabs.mobile.horizontal.top-compact > .z-container,
.z-tabs.mobile.horizontal.bottom-compact > .z-container {
margin-right: 0px !important;
}




/*arrow mobile icons*/
.z-tabs.mobile > ul.z-tabs-mobile > li > a.z-link > span.z-title
{
    margin-left: 6px;
    opacity: 1;
}


.z-tabs.mobile > ul.z-tabs-mobile.z-state-closed > li > a.z-link > span.z-title
{
    margin-left: 6px;
    opacity: 1;
}

.z-tabs.mobile.horizontal > ul.z-tabs-nav > li > a.z-link,
.z-tabs.mobile.vertical > ul.z-tabs-nav > li > a.z-link
{
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 18px !important;
}

.z-tabs.mobile > ul.z-tabs-mobile.z-state-closed > li > a.z-link > span.z-arrow
{
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
    opacity: 1;
}


.z-tabs.mobile > ul.z-tabs-mobile > li > a.z-link > span.z-arrow
{
    right: -10px;
    position: absolute;
    opacity: .25;
    background: url(../../img/z-tabs-icons.png) no-repeat top left;
    background-position: -132px -4px;
    width: 25px;
    height: 40px;
    top: 50%;
    margin-top: -23px;
    /* CSS3 transition */
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    transform: rotate(90deg);
}


.z-tabs.mobile.right > ul.z-tabs-mobile > li > a.z-link > span.z-arrow
{
    left: -10px;
    margin-top: -16px;
    /* CSS3 transition */
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.z-tabs.mobile.right > ul.z-tabs-mobile.z-state-closed > li > a.z-link > span.z-arrow
{
    opacity: 1;
    margin-top: -23px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
}

.z-tabs.mobile > ul.z-tabs-mobile > li > a.z-link > i.z-icon-menu
{
    background: url(../../img/z-tabs-icons.png) no-repeat top left;
    background-position: -1470px -3px;
    width: 28px;
    height: 30px;
    margin-top: -24px;
    margin-left: -6px;
    display: inline-block;
}

.z-tabs.mobile.z-icons-light > ul.z-tabs-mobile > li > a.z-link > i.z-icon-menu {background-position: -1470px -60px;}
.z-tabs.mobile.z-icons-light > ul.z-tabs-mobile > li > a.z-link > span.z-arrow   {background-position: -132px -61px;}


/*closed*/
/*.z-tabs.mobile.vertical > ul.z-tabs-mobile.z-state-closed,*/
.z-tabs.mobile > ul.z-tabs-mobile.z-state-closed > li > a.z-link > span.z-arrow {right: 0px;}
.z-tabs.mobile > ul.z-tabs-nav.z-tabs-mobile.z-state-closed
{
    border-width: 1px;
}

.z-tabs.mobile.vertical.z-rounded > ul.z-tabs-mobile.z-state-closed,
.z-tabs.mobile.horizontal.z-rounded > ul.z-tabs-mobile.z-state-closed
{
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -khtml-border-radius: 6px;
    border-radius: 6px;
}

    .z-tabs.mobile.vertical.z-rounded > ul.z-tabs-mobile.z-state-closed > li,
    .z-tabs.mobile.vertical.z-rounded > ul.z-tabs-mobile.z-state-closed > li > a.z-link,
    .z-tabs.mobile.horizontal.z-rounded > ul.z-tabs-mobile.z-state-closed > li,
    .z-tabs.mobile.horizontal.z-rounded > ul.z-tabs-mobile.z-state-closed > li > a.z-link
    {
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -khtml-border-radius: 5px;
        border-radius: 5px;
    }




/*open*/
.z-tabs.mobile.vertical.z-rounded > ul.z-tabs-mobile,
.z-tabs.mobile.horizontal.z-rounded > ul.z-tabs-mobile
{
    -webkit-border-radius: 6px 6px 0 0;
    -moz-border-radius: 6px 6px 0 0;
    -khtml-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
}

    .z-tabs.mobile.vertical.z-rounded > ul.z-tabs-mobile > li,
    .z-tabs.mobile.horizontal.z-rounded > ul.z-tabs-mobile > li
    {
        -webkit-border-radius: 5px 5px 0 0;
        -moz-border-radius: 5px 5px 0 0;
        -khtml-border-radius: 5px 5px 0 0;
        border-radius: 5px 5px 0 0;
    }

.z-tabs.mobile.vertical.z-rounded > ul.z-tabs-nav > li.z-last,
.z-tabs.mobile.vertical.z-rounded > ul.z-tabs-nav > li.z-last > a.z-link,
.z-tabs.mobile.horizontal.z-rounded > ul.z-tabs-nav > li.z-last,
.z-tabs.mobile.horizontal.z-rounded > ul.z-tabs-nav > li.z-last > a.z-link
{
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    -khtml-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}

.z-tabs.mobile.vertical.z-rounded > ul.z-tabs-desktop,
.z-tabs.mobile.horizontal.z-rounded > ul.z-tabs-desktop
{
    -webkit-border-radius: 0 0 6px 6px;
    -moz-border-radius: 0 0 6px 6px;
    -khtml-border-radius: 0 0 6px 6px;
    border-radius: 0 0 6px 6px;
}
    





/*mobile horizontal style*/
.z-tabs.mobile.horizontal > ul.z-tabs-nav > li.z-active
{
    margin: 0;
    padding: 0;
}

.z-tabs.mobile.horizontal > ul.z-tabs-nav > li
{
    border-width: 0px 0px 1px 0px;
}

    .z-tabs.mobile.horizontal > ul.z-tabs-nav > li > a.z-link
    {
        text-align: left;
    }

.z-tabs.mobile.horizontal > ul.z-tabs-nav.z-tabs-desktop > li.z-last
{
    border-bottom-width: 0;
}

.z-tabs.mobile.horizontal > ul.z-tabs-nav > li
{
    margin: 0;
}



/*underlined tabs*/
.z-tabs.mobile.underlined.horizontal > ul.z-tabs-nav > li, 
.z-tabs.mobile.underlined.horizontal > ul.z-tabs-nav > li.z-active, 
.z-tabs.mobile.underlined.horizontal > ul.z-tabs-nav > li:hover {
margin-left: 0;
}

.z-tabs.mobile.horizontal.underlined > .z-container {border-width: 0;}
.z-tabs.mobile.horizontal.underlined > ul.z-tabs-nav > li:hover, .z-tabs.mobile.horizontal.underlined > ul.z-tabs-nav > li.z-active {border-bottom-width: 1px;}

/* vertical */
/* general*/
.z-tabs.mobile.vertical > ul.z-tabs-nav,
.z-tabs.mobile.horizontal > ul.z-tabs-nav {
    width: auto;
    border-width: 1px 1px 0 1px;
    float: none;
    border-bottom-width: 1px;
     display:block;
     padding:0;
     margin:0;
     min-width:0 !important;
}

.z-tabs.mobile.vertical ul.z-tabs-mobile,
.z-tabs.mobile.horizontal ul.z-tabs-mobile {
    border-bottom-width: 0px;
}

    .z-tabs.mobile.vertical ul.z-tabs-mobile > li,
    .z-tabs.mobile.horizontal ul.z-tabs-mobile > li{
        float: none;
        border-width: 0px;
    }



.z-tabs.mobile.horizontal.bottom > .z-container {margin-bottom: 4px;}

.z-tabs.mobile.vertical.z-rounded > .z-container,
.z-tabs.mobile.horizontal.z-rounded > .z-container {
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -khtml-border-radius: 6px;
    border-radius: 6px;
}

.z-tabs.mobile.vertical >.z-container > .z-content .z-content-inner{padding: 2em;}

.z-tabs.mobile.horizontal.top > ul.z-tabs-nav.z-tabs-desktop > li.z-first, 
.z-tabs.mobile.horizontal.bottom > ul.z-tabs-nav.z-tabs-desktop > li.z-first {border-top-width: 0;}

/* mobile themes*/
.z-tabs.mobile.underlined > ul.z-tabs-nav > li > a.z-link {text-transform: uppercase;text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); }
.z-tabs.mobile.underlined > ul.z-tabs-desktop > li,
.z-tabs.mobile.underlined > ul.z-tabs-desktop > li > a {
    -moz-transition: background-color 200ms ease-out, color 200ms ease-out,text-shadow 200ms ease-out;
    -o-transition: background-color 200ms ease-out, color 200ms ease-out,text-shadow 200ms ease-out;
    -webkit-transition: background-color 200ms ease-out, color 200ms ease-out,text-shadow 200ms ease-out;
    -ms-transition: background-color 200ms ease-out, color 200ms ease-out,text-shadow 200ms ease-out;
    transition: background-color 200ms ease-out, color 200ms ease-out,text-shadow 200ms ease-out;
}
    
.z-tabs.underlined.mobile > ul.z-tabs-nav > li,
.z-tabs.underlined.mobile > ul.z-tabs-nav > li.z-active,
.z-tabs.underlined.mobile > ul.z-tabs-nav > li.z-last,
.z-tabs.underlined.mobile > ul.z-tabs-nav > li:hover,
.z-tabs.underlined.mobile > ul.z-tabs-nav > li.z-last:hover
{
    border-color: #E6E6E6;
    background: #fff;
    border-width: 0 0 1px 0 !important;
    opacity: 1;
    border-style: dotted;
}

.z-tabs.underlined.horizontal.mobile > ul.z-tabs-nav > li.z-last {border-width: 0 0 1px 0; }
.z-tabs.underlined.mobile > ul.z-tabs-nav.z-tabs-mobile,
.z-tabs.underlined.mobile > ul.z-tabs-nav.z-tabs-desktop{border-width:0;}
                                   
.z-tabs.underlined.mobile.hover > ul.z-tabs-nav.z-tabs-desktop > li.z-active,
.z-tabs.underlined.mobile.hover > ul.z-tabs-nav.z-tabs-desktop > li:hover {background: #FAFAFA;}
.z-tabs.underlined.mobile.hover > ul.z-tabs-nav.z-tabs-desktop > li.z-active > a,
.z-tabs.underlined.mobile.hover > ul.z-tabs-desktop > li:hover > a{color: #333;text-shadow: 1px 0px 1px rgba(175, 175, 175, 0.25);}        

.z-tabs.underlined.mobile.m-red > ul.z-tabs-desktop > li.z-active > a,
.z-tabs.underlined.mobile.hover.m-red > ul.z-tabs-desktop > li:hover > a{color: #DD4B39;}

.z-tabs.underlined.mobile.m-blue > ul.z-tabs-desktop > li.z-active > a,
.z-tabs.underlined.mobile.hover.m-blue > ul.z-tabs-desktop > li:hover > a{color: #00B0D8;}

.z-tabs.underlined.mobile.m-deepblue > ul.z-tabs-desktop > li.z-active > a,
.z-tabs.underlined.mobile.hover.m-deepblue > ul.z-tabs-desktop > li:hover > a{color: #1E69DE;}

.z-tabs.underlined.mobile.m-orange > ul.z-tabs-desktop > li.z-active > a,
.z-tabs.underlined.mobile.hover.m-orange > ul.z-tabs-desktop > li:hover > a{color: #FD9C00;}

.z-tabs.underlined.mobile.m-green > ul.z-tabs-desktop > li.z-active > a,
.z-tabs.underlined.mobile.hover.m-green > ul.z-tabs-desktop > li:hover > a{color: #093;}

/*#endregion*/




/*#region ==========================================================================
    Mobile Fixes
========================================================================== */
/* Prevent any object from being highlighted upon touch event*/
.z-tabs
.z-tabs *,
.z-tabs  ul,
.z-tabs  ul  li,
.z-tabs  ul  li a,
.z-tabs  .z-container  .z-content {-webkit-tap-highlight-color: rgba(0, 0, 0, 0);-webkit-touch-callout: none;outline: none;}

/*#endregion*/