/*===============

File Name: Daleth - Mobile-First Responsive Menu;
Version: 1.0;
Author: Tiberiu Alexander;
Author URL: http://codecanyon.net/user/tiberiualexander/portfolio ;
E-mail: tiberiu.alexander@gmail.com ;
Created: 17/10/2013;

=================*/

/* The main container */
.flexnav
{
    /* Some stylesheet reset */
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 20px; /* Layout */
    display: block;
    overflow: visible;
    width: 100%;
    /*height: 40px;*/ /* Responsive */
    height: auto;
    background: #3F7EAF; /*#50afde;*/
    font-family: "Lato" , Helvetica, sans-serif;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.flexnav:after
{
    content: "";
    display: table;
    clear: both;
}

/* Displaying the main links on the same line */
.flexnav > li
{
    float: right !important;  /*  ARABIC  */
}

.flexnav li
{
    display: block;
    position: relative;
}

/* The items which contain submenus have right padding */
.flexnav > li.item-with-ul > a
{
    padding-right: 71px;
}

/* The links */
.flexnav li a
{
    /* Layout */
    position: relative;
    display: block;
    z-index: 2;
    margin-right: 10px;
    padding: 10px 10px;
    overflow: hidden; /* Typography */
    font-size: 13px;
    color: #FFF; /*#d8eff6;*/
    text-decoration: none; /* Background & effects */
    background: #3F7EAF; /*#50afde;*/
    -webkit-transition: all 100ms ease-in;
    -moz-transition: all 100ms ease-in;
    -ms-transition: all 100ms ease-in;
    -o-transition: all 100ms ease-in;
    transition: all 100ms ease-in;
    margin-top: 5px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.flexnav li a:first-child
{
    margin-left: 10px;
}

/* The submenu links */
.flexnav ul li a
{
    width: 130px;
    padding: 13px 25px;
}

/* The hover state of the links */
.flexnav li a:hover, .flexnav li.active > a
{
    color: #FFF;
    background: #2BA9E4; /*#50afde;*/
}

/* The submenus */
.flexnav ul
{
    position: absolute;
    top: auto;
    left: 0;
    display: block;
    padding: 0;
}

/* The first level submenus */
.flexnav > li > ul
{
    left: auto;
    right: 0;
}

/* Level 2+ submenus */
.flexnav ul ul
{
    margin-left: 100%;
    top: 0;
}

/*  */
.flexnav li ul li
{
    position: relative;
    overflow: hidden;
}

.flexnav li ul.show li
{
    overflow: visible;
}

.flexnav li ul li a
{
    background: #46aadb;
}

.flexnav ul li ul li a
{
    background: #40a6d8;
}

.flexnav ul li ul li ul li a
{
    background: #3ca1d3;
}

.flexnav li ul.open
{
    display: block;
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

.flexnav li ul.open li
{
    overflow: visible;
    max-height: 100px;
}

.flexnav li ul.open ul.open
{
    margin-left: 100%;
    top: 0;
}


/* The buttons which shows/hides the menu on click/tap */
.flexnav .touch-button
{
    position: absolute;
    z-index: 999;
    top: 0;
    right: 0;
    width: 46px;
    height: 46px;
    display: inline-block;
    background: #46aadb;
    text-align: center;
}

.flexnav .touch-button:hover
{
    cursor: pointer;
}

/* The arrow which indicates a submenu */
.flexnav .touch-button::after
{
    height: 0;
    width: 0;
    content: "";
    border: 6px solid transparent;
    border-top-color: #d8eff6;
    display: block;
    position: absolute;
    top: 22px;
    left: 17px;
}

/* Changing the color of the arrow when the submenu is opened */
.flexnav > li:hover > .touch-button::after, .sm-screen .submenu-open::after
{
    border-top-color: #fff;
}

/* The button is smaller when it's contained by a submenu */
.flexnav ul li .touch-button
{
    width: 39px;
    height: 39px;
    background: #40a6d8;
    border-top-color: transparent;
}

.flexnav ul ul li .touch-button
{
    background: #3ca1d3;
}

.flexnav ul li .touch-button::after
{
    top: 15px;
}

.flexnav.lg-screen ul li .touch-button::after
{
    border-left-color: #d8eff6;
    border-top-color: transparent;
    border-width: 5px;
}

.flexnav.lg-screen ul li:hover > .touch-button::after
{
    border-left-color: #fff;
}

.flexnav.sm-screen ul li .touch-button::after
{
    border-width: 5px;
    left: 14px;
    top: 17px;
}

/* The button which opens the menu on mobile devices */
.menu-button
{
    position: relative;
    display: none;
    padding: 16px 25px;
    background: #50afde;
    color: #d8eff6;
    cursor: pointer;
    font-family: "Lato" , "Droid Arabic Naskh" , Helvetica, sans-serif;
    line-height: 1;
    font-weight: 700;
    font-size: 14px;
}
.menu-button.one-page
{
    position: fixed;
    top: 0;
    right: 5%;
    padding-right: 45px;
}

.menu-button .touch-button
{
    background: transparent;
    position: absolute;
    z-index: 999;
    top: 0;
    right: 0;
    width: 50px;
    height: 50px;
    display: inline-block;
    text-align: center;
}

.menu-button .touch-button .navicon
{
    font-size: 16px;
    position: relative;
    top: 1em;
    color: #666;
}

.menu-button::after
{
    position: absolute;
    content: "";
    right: 25px;
    top: 11px;
    height: 3px;
    width: 20px;
    border-top: 2px solid #d8eff6;
    border-bottom: 2px solid #d8eff6;
    z-index: 1;
}

.menu-button::before
{
    position: absolute;
    content: "";
    right: 25px;
    top: 18px;
    height: 3px;
    width: 20px;
    border-bottom: 2px solid #d8eff6;
    z-index: 1;
}

/* Styling for the mobile view */
@media all and (max-width: 800px)
{
    .flexnav
    {
        overflow: hidden;
        max-height: 0px;
        -moz-border-radius: 0 !important;
        border-radius: 0 !important;
        margin: 0px;
    }

    .flexnav.show
    {
        border-top: 1px solid #46aadb;
        overflow: visible;
        max-height: 2000px;
    }

    .flexnav li
    {
        float: none;
    }

    .flexnav li a:first-child
    {
        margin-left: 0px;
    }

    .flexnav li a
    {
        -webkit-border-radius: 0 !important;
        -moz-border-radius: 0 !important;
        border-radius: 0 !important;
        margin: 0px;
    }

    .TabColor
    {
        display: none;
    }

    .flexnav ul li a
    {
        width: auto;
    }

    .flexnav ul, .flexnav ul ul
    {
        position: relative;
        margin-left: 0;
        width: 100%;
    }

    .flexnav ul li a
    {
        padding-left: 37px;
    }

    .flexnav ul ul li a
    {
        padding-left: 49px;
    }

    .flexnav ul ul ul li a
    {
        padding-left: 61px;
    }

    .menu-button
    {
        display: block;
    }
}
.ontab
{
    background: #2BA9E4 !important;
}
.tabcontainer
{
    height: 35px;
}