/*   Frameworks: jQuery 3.3.1 & Material Design Iconic Font 2.0
 *   Author: Asif Mughal
 *   GitHub: https://github.com/CodeHimBlog
 *   URL: https://www.codehim.com
 *   License: MIT License
 *   Copyright (c) 2018 - Asif Mughal
 */

 
*{margin:0;padding:0}
.hs-menubar
{
    background:#555;
    width:100%;
    height:50px;
    line-height:50px;
    color:#fff;
    position:relative;
    box-shadow:1px 2px 4px rgba(0,0,0,0.3);
    z-index:999
}
.hs-menubar.sticky{position:fixed;top:0;left:0}
.hs-navigation{
    width:270px;
    height:100vh;
    background:#666;
    position:fixed;
    top:50px;
    left:-320px;
    z-index:999;
    overflow:hidden;
    box-shadow:1px 2px 4px rgba(0,0,0,0.3)
}
.hs-navigation.open{left:0}
.hs-navigation,.hs-navigation.open
{
    transition:.6s;
    -webkit-transition:.6s;
    -moz-transition:.6s
}
.hs-menubar,.hs-navigation
{
    font-family:'Nanum Gothic',sans-serif;
    font-style:normal;
    font-weight:300;
    font-smoothing:antialiased;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale
}
.hs-user{right:50px;overflow:hidden}
.hs-user img{width:32px;height:32px;transition:.3s}
.hs-user img:hover{opacity:.8;-webkit-opacity:.8;-moz-opacity:.8;transform:scale(1.1);transition:.3s}

.lang-penal{
    width:100px;
    box-shadow:2px 2px 6px rgba(0,0,0,0.33);
    background:#fff;
    list-style:none;
    position:fixed;
    display:none;
    top:50px;
    right:50px;
    line-height:1.5;
    z-index:100;
    text-align: center;
}
.lang-penal li{
    margin-bottom: 5px;
    margin-top: 5px;
}
.lang-penal img{
    border: 1px solid black;
    width: 30px;
    object-fit: contain;
}

.user-penal
{
    width:130px;
    box-shadow:2px 2px 6px rgba(0,0,0,0.33);
    background:#fff;
    list-style:none;
    position:fixed;
    display:none;
    top:50px;
    right:10px;
    line-height:1.5;
    z-index:1000
}
.user-penal li a
{
    font-size:12px;
    text-decoration:none;
    color:#666;
    display:block;
    padding:10px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    transition:.3s
}
.user-penal li .zmdi{font-size:14px;padding-right:10px}
.user-penal li a:hover{background:rgba(0,0,0,0.1);transition:.3s}
.search-trigger:hover,.menu-trigger:hover,.grid-trigger:hover,.more-trigger:hover, .lang-trigger:hover
{
    background:rgba(255,255,255,0.3);
    transition:.3s
}
.search-trigger,.menu-trigger,.grid-trigger,.hs-user,.more-trigger, .lang-trigger
{
    position:absolute;
    top:8px;
    color:#fff;
    font-size:22px;
    cursor:pointer;
    width:32px;
    height:32px;
    line-height:35px;
    border-radius: 12px;
    text-align:center;
    -webkit-tap-highlight-color:transparent;
    transition:.3s;
    z-index:100
}
.menu-trigger{
    left:8px;
    width:150px;
}
.menu-trigger:hover{
   border-radius: none;
}
.search-trigger{left:175px}
.grid-trigger{right:85px}
.more-trigger{right:10px}
.lang-trigger{right: 50px}
.grid-items
{
    width:230px;
    box-shadow:2px 2px 6px rgba(0,0,0,0.33);
    background:#fff;
    padding-top:10px;
    position:fixed;
    right:80px;
    top:50px;
    text-align:center;
    display:none;
    z-index:1200
}
.grid-items li.grid
{
    list-style:none;
    width:60px;
    height:60px;
    line-height:60px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    border:1px solid rgba(0,0,0,0.1);
    display:inline-block;
    box-sizing:border-box;
    margin:2px;
    border-radius:50%;
    font-size:11px
}
li.more-btn{height:32px;line-height:32px;margin:15px 15px 5px 15px;box-sizing:border-box;display:block;position:relative}
li.more-btn a{text-decoration:none;background:#e41b17;color:#fff;font-size:13px;display:block;cursor:pointer;border-radius:20px}
li.more-btn a:hover{opacity:.8;-webkit-opacity:.8;-moz-opacity:.8}
.grid-title{border:1px red solid}
.brand-logo{display:block;text-align:center}
.brand-logo img
{
    width:100px;
    height:auto;
    margin-top:12px
}
@-webkit-keyframes ripple-out
{
    from{opacity:1;-webkit-opacity:1}
    to{top:-12px;right:-12px;bottom:-12px;left:-12px;opacity:0}
}
@keyframes ripple-out
{
    from{opacity:1;-webkit-opacity:1}
    to{top:-12px;right:-12px;bottom:-12px;left:-12px;opacity:0}
}
.ripple-out
{
    display:inline-block;
    vertical-align:middle;
    -webkit-transform:perspective(1px) translateZ(0);
    transform:perspective(1px) 
    translateZ(0);
    box-shadow:0 0 1px rgba(0,0,0,0)
}
.ripple-out:before{
    content:'';
    position:absolute;
    border:rgba(255,255,255,0.3) solid 6px;
    border-radius:50%;
    top:0;
    right:0;
    bottom:0;
    left:0;
    animation:ripple-out .4s linear forwards;
    -webkit-animation:ripple-out .4s linear forwards
}
@-webkit-keyframes fadeInUp
{
    from{opacity:0;-webkit-transform:translate3d(0,100%,0); transform:translate3d(0,100%,0)}
    to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
}
@keyframes fadeInUp
{
    from{opacity:0;-webkit-transform:translate3d(0,100%,0);  transform:translate3d(0,100%,0)}
    to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
}
.fadeInUp{animation:fadeInUp .4s ease forwards;-webkit-animation:fadeInUp .4s ease forwards}
.dim-overlay{display:none}
.dim-overlay:before
{
    content:"";
    background-color:rgba(0,0,10,.4);
    height:100vh;
    left:0;
    position:fixed;
    top:0;
    width:100%;
    overflow:hidden;
    z-index:2
}
.search-box
{
    position:absolute;
    height:50px;
    background:#555;
    white-space:nowrap;
    overflow:hidden;
    width:0;
    top:0;
    z-index:500;
    left:210px
}
.search-box button.search-submit,.search-box input[type="text"]{padding:6px;border:0;outline:0}
.search-box input[type="text"]{background:transparent;color:rgba(255,255,255,0.8)}
button.search-submit
{
    -webkit-appearance:none;
    background:#e41b17;
    color:#fff;
    text-shadow:.1px .1px #444;
    margin-left:-5px;
    border-radius:4px;
    font-size:13px
}
button.search-submit:disabled
{
    background:#888;
    color:#555
}
.nav-controls
{
    height:36px;
    line-height:36px;
    background:rgba(0,0,0,0.12);
    text-align:right
}
.nav-controls .nav-full,.nav-controls .nav-fixed
{
    background:rgba(0,0,0,0.3);
    color:#fff;
    border-radius:2px;
    width:25px;
    height:25px;
    text-align:center;
    line-height:1;
    outline:0;
    border:0;
    margin:0 3px
}
.nav-controls .nav-full:hover,.nav-controls .nav-fixed:hover
{
    opacity:.8;
    -webkit-opacity:.8
}
.user-info
{
    position:fixed;top:50px;right:30px;
    width:230px;
    background:#fff;
    box-shadow:1px 2px 6px rgba(0,0,0,0.4);
    padding:10px;
    text-align:center;
    line-height:1;
    display:none
}
.user-info li{padding:10px;list-style:none}
.user-info .profile-pic img{width:70px;height:70px;border-radius:50%}
.user-info .user-name{font-size:14px;color:#222}
.user-info .user-bio{font-size:11px;color:#555;padding-bottom:0}
.nav-links{list-style:none;font-size:14px;color:rgba(255,255,255,0.9)}
.nav-links .its-parent,.nav-links li a{display:block;padding:10px;text-decoration:none;color:rgba(255,255,255,0.9)}
.nav-links .its-parent:hover,.nav-links li a:hover{background:rgba(0,0,0,0.2)}
.nav-links .icon{font-size:18px;padding-right:20px}
.nav-links ul .its-parent:before,.nav-links .has-child ul li a:before
{
    content:"--";
    display:inline-block;
    font-size:10px;
    color:rgba(255,255,255,0.4);
    width:15px;
    height:10px;
    position:relative;
    right:10px
}
.nav-links .has-child ul{margin-left:35px;border-left:1px dashed rgba(255,255,255,0.4)}
.nav-links .its-children{display:none;list-style:none}
.nav-links li{
    border-bottom: 1px solid rgba(255,255,255,0.4);
}
.its-parent:after
{
    content:"\f2f9";
    font-family:Material-Design-Iconic-Font;
    float:right;
    margin-right:20px;
    transition:.4s;
    font-size:16px
}
.its-parent.downed{background:rgba(0,0,0,0.1)}
.its-parent.downed:after
{
    transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
    -moz-transform:rotate(360deg);
    transition:.4s;
    -webkit-transition:.4s;
    -moz-transition:.4s
}



/* google translate */

.goog-te-banner-frame{
    display:none !important;
    }


  body{
    position: unset!important;
  }
.only-phone{
    display: none;
}
  @media screen and (max-width: 620px) {
    .only-desktop{
        display: none;
    }
    .only-phone{
        display: block;
    }
    .hs-menubar{
        height: 150px;
    }
    .hs-navigation{
        top: 150px;
        width:100%;
        left:-100%;
    }
    .search-trigger{
        display: none;
    }
    .menu-trigger
    {
        left: 50%;
        transform: translateX(-50%);
        top: 114px;
        font-size: 18px;

    }
   
    .search-box
    {   
        top: 50px;
        left: 0px;
        width: 100%;
        height: 60px;
        padding: 5px 10px;
        background-color: #fff;
        z-index: 1;
    }   
    .search-box form
    {   
        height: 100%;
        text-align: center;
    }
    .search-box input
    {   
        border: 1px solid #555!important;
        border-radius: 6px;
        height: 40px;
        width: 79%;
        margin-right: 1%;
        color: black!important;
        padding: 5px 10px!important;
    }
    .search-box button
    {   
        height: 40px;
        line-height: 0;
        width: 15%;
    }
    .brand-logo
    {
        text-align: left;
        padding-left: 20px;
    }

}