/* # ~~~~~ sticky-wrapper: ~~~~~ # */
.logonavheader {
    position: fixed;
    top:0;
    width: 100%;
    height: auto;
    border: none;
    /*background: #5A5A64;*/
    /*background: rgba(0, 0, 0, 0.5);*/
    /*margin: 0 !important;*/
    /*padding: 0 !important;*/
    opacity:.99;
    z-index: 9 !important;

}

/* # ~~~~~ hero-area: ~~~~~ # */
.is-hero .logonavheader, .blayout-pagets__hero_from_page .logonavheader, .blayout-pagets__heroimage .logonavheader, .blayout-pagets__heroimage_pure .logonavheader {
    /*background: rgba(255,255,255, 0.9);*/
    /*background: #fff;*/
    background: inherit
}

/* # ~~~~~ nav-wrapper: ~~~~~ # */
.msmart-is-grid {
    margin-left: auto;
    margin-right: auto;
    /*max-width: 1440px;*/
    max-width: 100%;
    height: auto;
}
/* # ~~~~~ logo or textlogo: ~~~~~ # */
.msmart-grid-logo p {
    margin: 0 !important;
    padding: 0 !important;
}
.textlogo-one,
.textlogo-second {
    text-transform: uppercase;
    display: none;
}
.textlogo-one {
    padding-right: .5em;
    color: black;
}
.textlogo-second {
    color: #333;
}
/*hide all gfx logo:*/
/*.msmart-grid-logo .ce-textpic .grid-container:nth-child(1),*/
/*.msmart-grid-logo .ce-textpic .grid-container:nth-child(2),*/
/*.msmart-grid-logo .ce-textpic .grid-container:nth-child(3) {*/
/*    display: none;*/
/*}*/
/*hide gfx logo on hero-top (if used in hero-content:)*/
.is-top .msmart-grid-logo .ce-textpic .grid-container:nth-child(2) {
    display: block;
    transition: all .5s;
    opacity: 1;
    padding-bottom: 10px;
}
.not-top .msmart-grid-logo .ce-textpic .grid-container:nth-child(2) {
    display: block;
    opacity: 0;
    max-height: 0 !important;
    transition: all .5s;
    /*position: absolute;*/

}
/*hide gfx logo on hero-top (if used in hero-content:)*/
.is-top .msmart-grid-logo .ce-textpic .grid-container:nth-child(1) {
    display: block;
    opacity: 0;
    max-height: 0 !important;
    /*height: 1px !important;*/
    transition: all .5s;
    /*position: absolute;*/
}
/*hide gfx logo on hero-top (if used in hero-content:)*/
.not-top .msmart-grid-logo .ce-textpic .grid-container:nth-child(1) {
    display: block;
    transition: all .5s;
    opacity: 1;
    padding-bottom: 10px;
}
/*for desktop only:*/
@media (min-width: 768px) {
    .logonavheader {
        position: fixed;
        width: 100%;
        height: auto;
        border: none;
        z-index: 1;
        transition: all .5s;
    }
    .is-top .logonavheader {
        background: rgb(0,0,0);
        background: -moz-linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.64861694677871145) 100%);
        background: -webkit-linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.64861694677871145) 100%);
        background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.64861694677871145) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
        margin: 0;
        padding: 1em 4em;
        transition: all .5s;
        /*background: rgb(0,0,0);*/
    }
    .not-top .hamburger-inner,.not-top .hamburger-inner::before,.not-top .hamburger-inner::after {
        background-color: #666;
        transition: all .5s;
    }
    /*use only with transparent logonavheader:*/
    .is-hero.offhero .logonavheader {
        /*background: rgba(0,0,0, 0.2);*/
    }
    .not-top .logonavheader,
    .is-hero.offhero .logonavheader {
        background: #fff;
        margin: 0;
        padding: 1em 4em;
        transition: all .5s;
    }
    /* # ~~~~~ wrapper: ~~~~~ # */
    .is-hero #wrapper {
        padding-top: 0;
    }
    .is-top #wrapper {
        padding-top: 0;
        transition: all .5s;
    }
    .not-top #wrapper {
        padding-top: 0;
        transition: all .5s;
    }
}
/*for small only:*/
@media only screen and (max-width: 768px) {
    .logonavheader {
        position: relative;
        margin: 0;
        padding: 0;
        height:auto !important;
        /*background: #fff;*/
        /*background: #5A5A64;*/
    }
    .msmart-grid-logo img {
        max-width: 200px;
        height: auto;
        transition: all .5s;
        padding: 1em !important
    }
    #wrapper {
        padding-top: 0;
    }
    /* # ~~~~~ smartmenu under hamburger ~~~~~ # */
    .sm {
        top: 0;
    }
    .textlogo {
        text-align: left;
        padding: 1em !important;
    }
    .textlogo-one {
        padding-right:.2em;
        color:#000;
    }
    .textlogo-second {
        padding-right: 1em !important;
        color: #750016
    }

}



@media only screen and (min-width: 640px) {
    .position-left {
        width: 650px;
        -webkit-transform: translateX(-650px);
        -ms-transform: translateX(-650px);
        transform: translateX(-650px); }
    .off-canvas-content .off-canvas.position-left {
        -webkit-transform: translateX(-650px);
        -ms-transform: translateX(-650px);
        transform: translateX(-650px); }
    .off-canvas-content.is-open-left.has-transition-push {
        -webkit-transform: translateX(650px);
        -ms-transform: translateX(650px);
        transform: translateX(650px); }
    .position-left.is-transition-push {
        -webkit-box-shadow: inherit;
        box-shadow: inherit;
    }
    .off-canvas {
        min-height: 100%;
        position: fixed;
    }
    .position-right {
        width: 650px;
        -webkit-transform: translateX(650px);
        -ms-transform: translateX(650px);
        transform: translateX(650px); }
    .off-canvas-content .off-canvas.position-right {
        -webkit-transform: translateX(650px);
        -ms-transform: translateX(650px);
        transform: translateX(650px); }
    .off-canvas-content .off-canvas.position-right.is-transition-overlap.is-open {
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0); }
    .off-canvas-content.is-open-right.has-transition-push {
        -webkit-transform: translateX(-650px);
        -ms-transform: translateX(-650px);
        transform: translateX(-650px); }
    .position-right.is-transition-push {
        -webkit-box-shadow: inherit;
        box-shadow: inherit;
    }
}
.off-canvas {
    /*background: #fff;*/
    background: rgba(255,255,255, 0.8);
    background: rgba(255,255,255, 1);
}
.msmart-grid-nav {
}
.off-canvas {
    /*transition: all 0.75s ease-out;*/
    z-index: 25;
}
/*if u donotwanna use hamburger when open*/
.off-canvas-content.is-open-right .sht-nav .hamburger-box,
.off-canvas-content.is-open-right .lnh-nav .hamburger-box {
    display:none;
    transition: all 1s;
}
.off-canvas-content.is-open-right .sht-nav,
.off-canvas-content.is-open-right .lnh-nav {
    width: 70px;
    height: 70px;
}
.off-canvas-content {
    margin-right: 0;
    /*transition: all 0.75s ease-in;*/
}

.off-canvas-content .scrollhidetop {
    /*z-index: 15;*/
}

.off-canvas .close-button {
    /*display: none;*/
    /*font-size: 4em;*/
}
@media only screen and (max-width: 40.063em) {
    .position-right {
        width: 100%;
    }
}