/** {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}*/

*:before,
*:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

/* Navigation Push Styles */
#layout {position:fixed; width: 100%; background: #fff;padding-right: 0; height:50px;  border-bottom: 1px solid #eee;}
#layout .mob-logo{position: absolute;top:7px; left: 0px; right: 0px; margin:0 auto; width:145px;}
#layout .mob-logo a{ margin-top: 0px;  }
#layout .mob-logo i{font-size: 24px}
#layout.active #menu {left: 100%;width: 100%;height: 100%;}

/* Main Navigation Bar Styles*/
#layout,#menu,.menu-link {
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

.pure-menu-heading{padding: .5em 15px; color: #000}


/*#layout.active .menu-link {right: 200px;}*/
#menu {
    margin-left: -100%;
    /* "#menu" width*/
    width: 100%;
    position:fixed;
    top:50px;left: 0;bottom: 0; border-top: 1px solid #eee;
    z-index: 15;
    /* so the menu or its navicon stays above all content*/
    background: #fafafa;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;color:#919191; 
}
#menu h6{color:#666; text-align: left;}
#menu a {border: none;white-space: normal; color:#919191; text-align: left; line-height: 24px;}
#menu a.on{color: #ccc}


.mob-cp-fl li{width: 50%;float: left;}


.menu-link {
    position: fixed;
    display: block;
    /* show this only on small screens*/
    top: 7px;
    left: 0;
    /* "#menu width"*/
    font-size: 11px;
    /* change this value to increase/decrease button size*/
    z-index: 15;
    width:20px;
    height:23px;
    padding:10px 15px;
}
.menu-link:hover, .menu-link:focus {color: #fff;}
.menu-link span {position: relative;display: block;margin-top:1.1em;}
.menu-link span, .menu-link span:before, .menu-link span:after {
    background-color: #212121;
    width: 100%;
    height: .1em;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}
.menu-link span:before, .menu-link span:after {
    position: absolute;top: -.33em;
    content: " ";
}
.menu-link span:after {top: .33em;}
.menu-link.active span {background: transparent;}
.menu-link.active span:before {
    -webkit-transform: rotate(45deg) translate(.2em, .3em);
    -moz-transform: rotate(45deg) translate(.2em, .3em);
    -ms-transform: rotate(45deg) translate(.2em, .3em);
    -o-transform: rotate(45deg) translate(.2em, .3em);
    transform: rotate(45deg) translate(.2em, .3em);
}
.menu-link.active span:after {
    -webkit-transform: rotate(-45deg) translate(.2em, -.3em);
    -moz-transform: rotate(-45deg) translate(.2em, -.3em);
    -ms-transform: rotate(-45deg) translate(.2em, -.3em);
    -o-transform: rotate(-45deg) translate(.2em, -.3em);
    transform: rotate(-45deg) translate(.2em, -.3em);
}

#menu .pure-menu-selected {background: #1f8dd6;}
#menu .pure-menu-selected a {color: #fff;}
#menu li.pure-menu-selected a:hover, #menu li.pure-menu-selected a:focus {
    background: none;
}


.m-lang {
    position:fixed; text-align: right;
    display: block;
    /* show this only on small screens*/
    top: 21px;
    right: 15px;
    /* "#menu width"*/
    font-size: 12px;
    /* change this value to increase/decrease button size*/
    z-index: 15;
    width:35px;
    height:18px;
}
.m-lang i{font-size: 12px; vertical-align: 0px;}


@media (min-width:1025px) {
    #layout {padding-right: 100%; /* left col width "#menu" */
        right: 0;}
    #menu {right: 100%;display: none;}
    .menu-link {position: fixed; right: 100%;display: none;}
    #layout.active .menu-link {right: 100%;}

}