/* ==========================================================
   VOSTOK LOGISTIKA
   MOBILE HEADER V2
   ONLY <= 980px
   ========================================================== */

html body.vlx-menu-locked{
    overflow:hidden !important;
}


/* ==========================================================
   HEADER
   ========================================================== */

html body .wrapper{
    padding-top:74px !important;
}

html body .vlx-header,
html body .vlx-header.is-scrolled{
    height:74px !important;

    background:rgba(255,255,255,.975) !important;

    border-bottom:
        1px solid rgba(11,22,32,.065) !important;

    box-shadow:
        0 5px 22px rgba(11,22,32,.045) !important;

    backdrop-filter:
        blur(22px)
        saturate(145%) !important;

    -webkit-backdrop-filter:
        blur(22px)
        saturate(145%) !important;
}


html body .vlx-shell,
html body .vlx-header.is-scrolled .vlx-shell{
    position:relative !important;
    z-index:20 !important;

    width:calc(100% - 28px) !important;
    max-width:none !important;

    height:74px !important;

    margin:0 auto !important;
    padding:0 !important;

    display:flex !important;
    align-items:center !important;
}


/* ==========================================================
   LOGO
   ========================================================== */

html body .vlx-brand,
html body .vlx-header.is-scrolled .vlx-brand{
    width:210px !important;
    min-width:210px !important;
    max-width:210px !important;

    height:62px !important;

    margin:0 !important;
    padding:0 !important;

    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:flex-start !important;
}


html body .vlx-logo-image,
html body .vlx-header.is-scrolled .vlx-logo-image{
    display:block !important;

    width:205px !important;
    max-width:205px !important;

    height:auto !important;
    max-height:48px !important;

    margin:0 !important;

    object-fit:contain !important;
    object-position:left center !important;
}


html body .vlx-brand-tagline{
    display:block !important;

    width:205px !important;

    margin:1px 0 0 !important;
    padding:0 !important;

    color:#929CA1 !important;

    font-size:6.7px !important;
    line-height:8px !important;

    font-weight:500 !important;

    letter-spacing:.035em !important;

    text-align:center !important;

    white-space:nowrap !important;
}


/* ==========================================================
   DESKTOP ELEMENTS OFF
   ========================================================== */

html body .vlx-nav,
html body .vlx-contact{
    display:none !important;
}


/* ==========================================================
   MENU BUTTON
   ========================================================== */

html body .vlx-menu-button{
    position:relative !important;

    width:44px !important;
    min-width:44px !important;
    max-width:44px !important;

    height:44px !important;
    min-height:44px !important;
    max-height:44px !important;

    margin-left:auto !important;
    padding:0 !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;

    gap:6px !important;

    border:
        1px solid rgba(11,22,32,.09) !important;

    border-radius:50% !important;

    background:
        rgba(255,255,255,.94) !important;

    box-shadow:
        0 4px 15px rgba(11,22,32,.04) !important;

    overflow:hidden !important;

    -webkit-tap-highlight-color:
        transparent !important;

    transition:
        border-color .32s ease,
        background .32s ease,
        box-shadow .32s ease !important;
}


html body .vlx-menu-button::before{
    content:"" !important;

    position:absolute !important;

    inset:3px !important;

    border-radius:50% !important;

    background:
        radial-gradient(
            circle,
            rgba(88,195,217,.14),
            transparent 67%
        ) !important;

    opacity:0 !important;

    transition:opacity .35s ease !important;
}


html body .vlx-menu-button span{
    position:relative !important;
    z-index:2 !important;

    width:18px !important;
    height:1.5px !important;

    margin:0 !important;

    border-radius:999px !important;

    background:#0B1620 !important;

    transform-origin:center !important;

    transition:
        transform .42s cubic-bezier(.2,.8,.2,1),
        background .3s ease !important;
}


html body .vlx-header.menu-open
.vlx-menu-button{
    border-color:
        rgba(23,107,135,.19) !important;

    background:#F7FBFC !important;

    box-shadow:
        0 6px 20px rgba(23,107,135,.075) !important;
}


html body .vlx-header.menu-open
.vlx-menu-button::before{
    opacity:1 !important;
}


html body .vlx-header.menu-open
.vlx-menu-button span{
    background:#176B87 !important;
}


html body .vlx-header.menu-open
.vlx-menu-button span:first-child{
    transform:
        translateY(3.75px)
        rotate(45deg) !important;
}


html body .vlx-header.menu-open
.vlx-menu-button span:last-child{
    transform:
        translateY(-3.75px)
        rotate(-45deg) !important;
}


/* ==========================================================
   MOBILE PANEL
   ========================================================== */

html body .vlx-mobile-panel{
    position:fixed !important;

    z-index:10 !important;

    top:74px !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;

    width:100% !important;
    height:calc(100dvh - 74px) !important;

    margin:0 !important;

    padding:
        24px
        18px
        calc(24px + env(safe-area-inset-bottom))
        18px !important;

    box-sizing:border-box !important;

    display:flex !important;
    flex-direction:column !important;

    overflow-x:hidden !important;
    overflow-y:auto !important;

    overscroll-behavior:contain !important;

    visibility:hidden !important;
    opacity:0 !important;

    pointer-events:none !important;

    transform:
        translate3d(0,-8px,0) !important;

    background:
        radial-gradient(
            420px circle at 110% -8%,
            rgba(88,195,217,.075),
            transparent 66%
        ),
        linear-gradient(
            180deg,
            #FFFFFF 0%,
            #F8FAFB 100%
        ) !important;

    border:0 !important;

    box-shadow:none !important;

    transition:
        opacity .28s ease,
        transform .40s cubic-bezier(.2,.8,.2,1),
        visibility .28s ease !important;
}


html body .vlx-header.menu-open
.vlx-mobile-panel{
    visibility:visible !important;
    opacity:1 !important;

    pointer-events:auto !important;

    transform:
        translate3d(0,0,0) !important;
}


/* ==========================================================
   NAVIGATION
   ========================================================== */

html body .vlx-mobile-panel nav{
    width:100% !important;

    margin:0 !important;
    padding:0 !important;

    display:flex !important;
    flex-direction:column !important;
}


html body .vlx-mobile-panel nav a{
    position:relative !important;

    width:100% !important;
    min-height:53px !important;

    margin:0 !important;
    padding:15px 36px 15px 2px !important;

    box-sizing:border-box !important;

    display:flex !important;
    align-items:center !important;

    color:#111A20 !important;

    border:0 !important;
    border-bottom:
        1px solid rgba(11,22,32,.065) !important;

    background:transparent !important;

    font-family:'Montserrat',Arial,sans-serif !important;

    font-size:17px !important;
    line-height:22px !important;

    font-weight:600 !important;

    letter-spacing:-.025em !important;

    text-decoration:none !important;

    opacity:0 !important;

    transform:
        translate3d(0,9px,0) !important;

    transition:
        color .26s ease,
        opacity .36s ease,
        transform .42s cubic-bezier(.2,.8,.2,1) !important;

    -webkit-tap-highlight-color:
        transparent !important;
}


/* ЧИСТАЯ CSS-СТРЕЛКА.
   НИКАКИХ EMOJI */

html body .vlx-mobile-panel nav a::after{
    content:"" !important;

    position:absolute !important;

    right:8px !important;
    top:50% !important;

    width:8px !important;
    height:8px !important;

    margin-top:-5px !important;

    border-top:
        1.5px solid #829097 !important;

    border-right:
        1.5px solid #829097 !important;

    background:none !important;

    border-radius:0 !important;

    box-shadow:none !important;

    transform:
        rotate(45deg) !important;

    transition:
        border-color .25s ease,
        transform .25s ease !important;
}


html body .vlx-mobile-panel nav a:active{
    color:#176B87 !important;
}


html body .vlx-mobile-panel nav a:active::after{
    border-color:#176B87 !important;

    transform:
        translateX(2px)
        rotate(45deg) !important;
}


/* появление */

html body .vlx-header.menu-open
.vlx-mobile-panel nav a{
    opacity:1 !important;

    transform:
        translate3d(0,0,0) !important;
}


html body .vlx-header.menu-open
.vlx-mobile-panel nav a:nth-child(1){
    transition-delay:.035s !important;
}

html body .vlx-header.menu-open
.vlx-mobile-panel nav a:nth-child(2){
    transition-delay:.07s !important;
}

html body .vlx-header.menu-open
.vlx-mobile-panel nav a:nth-child(3){
    transition-delay:.105s !important;
}

html body .vlx-header.menu-open
.vlx-mobile-panel nav a:nth-child(4){
    transition-delay:.14s !important;
}

html body .vlx-header.menu-open
.vlx-mobile-panel nav a:nth-child(5){
    transition-delay:.175s !important;
}


/* ==========================================================
   CONTACTS
   ========================================================== */

html body .vlx-mobile-contact{
    width:100% !important;

    margin:22px 0 0 !important;
    padding:0 !important;

    display:block !important;

    opacity:0 !important;

    transform:
        translate3d(0,7px,0) !important;

    transition:
        opacity .35s .14s ease,
        transform .40s .14s cubic-bezier(.2,.8,.2,1) !important;
}


html body .vlx-header.menu-open
.vlx-mobile-contact{
    opacity:1 !important;

    transform:
        translate3d(0,0,0) !important;
}


html body .vlx-mobile-label{
    display:block !important;

    margin:0 0 9px 2px !important;

    color:#8D989D !important;

    font-size:8px !important;
    line-height:10px !important;

    font-weight:650 !important;

    letter-spacing:.16em !important;
}


html body .vlx-mobile-contact-row{
    width:100% !important;
    min-height:60px !important;

    margin:0 !important;
    padding:8px 8px 8px 16px !important;

    box-sizing:border-box !important;

    display:flex !important;
    align-items:center !important;

    gap:8px !important;

    border:
        1px solid rgba(11,22,32,.075) !important;

    border-radius:18px !important;

    background:
        rgba(255,255,255,.86) !important;

    box-shadow:
        0 7px 22px rgba(11,22,32,.03),
        inset 0 1px 0 rgba(255,255,255,.75) !important;
}


html body .vlx-mobile-phone{
    min-width:0 !important;

    margin:0 auto 0 0 !important;
    padding:0 !important;

    color:#0B1620 !important;

    font-size:15px !important;
    line-height:22px !important;

    font-weight:700 !important;

    letter-spacing:-.035em !important;

    white-space:nowrap !important;

    text-decoration:none !important;
}


html body .vlx-mobile-socials{
    margin:0 !important;
    padding:0 !important;

    display:flex !important;
    align-items:center !important;

    gap:6px !important;

    flex-shrink:0 !important;
}


html body .vlx-mobile-socials a{
    width:38px !important;
    min-width:38px !important;
    max-width:38px !important;

    height:38px !important;
    min-height:38px !important;
    max-height:38px !important;

    margin:0 !important;
    padding:0 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    color:#17232B !important;

    border:
        1px solid #DDE5E8 !important;

    border-radius:50% !important;

    background:#fff !important;

    box-shadow:
        0 3px 10px rgba(11,22,32,.03) !important;

    text-decoration:none !important;

    -webkit-tap-highlight-color:
        transparent !important;
}


html body .vlx-mobile-socials svg{
    width:17px !important;
    height:17px !important;

    fill:currentColor !important;
}


html body .vlx-mobile-socials a:active{
    color:#176B87 !important;

    border-color:
        rgba(23,107,135,.22) !important;

    background:#F5FAFB !important;
}


/* ==========================================================
   CTA
   ========================================================== */

html body .vlx-header .vlx-mobile-cta,
html body .vlx-header .vlx-mobile-cta:link,
html body .vlx-header .vlx-mobile-cta:visited,
html body .vlx-header .vlx-mobile-cta:hover,
html body .vlx-header .vlx-mobile-cta:focus,
html body .vlx-header .vlx-mobile-cta:active{
    position:relative !important;

    width:100% !important;
    min-width:0 !important;
    max-width:none !important;

    height:54px !important;
    min-height:54px !important;

    margin:11px 0 0 !important;
    padding:0 7px 0 20px !important;

    box-sizing:border-box !important;

    align-self:stretch !important;

    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;

    gap:12px !important;

    left:auto !important;
    right:auto !important;

    transform:none !important;

    overflow:hidden !important;

    color:#fff !important;

    background:
        linear-gradient(
            105deg,
            #176B87 0%,
            #14647E 52%,
            #10576F 100%
        ) !important;

    border:0 !important;
    border-radius:9999px !important;

    outline:0 !important;

    box-shadow:
        0 9px 22px rgba(23,107,135,.14),
        inset 0 1px 0 rgba(255,255,255,.13) !important;

    font-size:13px !important;
    line-height:1 !important;

    font-weight:700 !important;

    white-space:nowrap !important;

    text-decoration:none !important;

    opacity:0 !important;

    transition:
        opacity .4s .18s ease,
        box-shadow .25s ease !important;

    -webkit-tap-highlight-color:
        transparent !important;
}


html body .vlx-header.menu-open
.vlx-mobile-cta{
    opacity:1 !important;
}


html body .vlx-mobile-cta::before{
    content:"" !important;

    position:absolute !important;

    top:-75px !important;
    right:-20px !important;

    width:145px !important;
    height:145px !important;

    border-radius:50% !important;

    background:
        radial-gradient(
            circle,
            rgba(88,195,217,.20),
            transparent 67%
        ) !important;

    pointer-events:none !important;
}


html body .vlx-mobile-cta > span{
    position:relative !important;
    z-index:2 !important;
}


html body .vlx-mobile-cta i{
    position:relative !important;
    z-index:2 !important;

    width:40px !important;
    min-width:40px !important;
    max-width:40px !important;

    height:40px !important;
    min-height:40px !important;
    max-height:40px !important;

    margin:0 !important;
    padding:0 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    flex-shrink:0 !important;

    background:
        rgba(255,255,255,.13) !important;

    border:
        1px solid rgba(255,255,255,.12) !important;

    border-radius:50% !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10) !important;
}


html body .vlx-mobile-cta i svg{
    width:17px !important;
    height:17px !important;

    fill:none !important;

    stroke:#fff !important;
    stroke-width:1.6 !important;

    stroke-linecap:round !important;
    stroke-linejoin:round !important;

    transition:
        transform .25s ease !important;
}


html body .vlx-mobile-cta:active i svg{
    transform:
        translate(1px,-1px) !important;
}


/* ==========================================================
   SMALL PHONES
   ========================================================== */

@media(max-width:360px){

    html body .vlx-shell{
        width:calc(100% - 22px) !important;
    }

    html body .vlx-brand{
        width:186px !important;
        min-width:186px !important;
        max-width:186px !important;
    }

    html body .vlx-logo-image{
        width:182px !important;
        max-width:182px !important;
    }

    html body .vlx-brand-tagline{
        width:182px !important;

        font-size:5.9px !important;
    }

    html body .vlx-mobile-panel{
        padding-left:14px !important;
        padding-right:14px !important;
    }

    html body .vlx-mobile-phone{
        font-size:13.5px !important;
    }

    html body .vlx-mobile-socials a{
        width:35px !important;
        min-width:35px !important;
        max-width:35px !important;

        height:35px !important;
        min-height:35px !important;
        max-height:35px !important;
    }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media(prefers-reduced-motion:reduce){

    html body .vlx-mobile-panel,
    html body .vlx-mobile-panel *,
    html body .vlx-menu-button,
    html body .vlx-menu-button *{
        animation:none !important;
        transition:none !important;
    }

}


/* ==========================================================
   MOBILE CONTACTS V3
   Messenger labels + larger phone
   ========================================================== */

html body .vlx-mobile-contact-row{
    min-height:0 !important;

    padding:15px !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;

    gap:13px !important;

    border-radius:20px !important;

    background:
        rgba(255,255,255,.90) !important;

    box-shadow:
        0 8px 26px rgba(11,22,32,.035),
        inset 0 1px 0 rgba(255,255,255,.8) !important;
}


/* НОМЕР +25% */

html body .vlx-mobile-phone{
    width:100% !important;

    margin:0 !important;
    padding:2px 2px 4px !important;

    display:block !important;

    color:#0B1620 !important;

    font-family:'Montserrat',Arial,sans-serif !important;

    font-size:19px !important;
    line-height:25px !important;

    font-weight:700 !important;

    letter-spacing:-.045em !important;

    text-align:left !important;
}


/* ДВЕ ПОНЯТНЫЕ КНОПКИ */

html body .vlx-mobile-socials{
    width:100% !important;

    margin:0 !important;
    padding:0 !important;

    display:grid !important;
    grid-template-columns:1fr 1fr !important;

    gap:8px !important;
}


html body .vlx-mobile-socials a{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;

    height:46px !important;
    min-height:46px !important;
    max-height:46px !important;

    margin:0 !important;
    padding:0 13px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    gap:8px !important;

    border-radius:9999px !important;

    font-family:'Montserrat',Arial,sans-serif !important;

    font-size:12px !important;
    line-height:1 !important;

    font-weight:650 !important;

    letter-spacing:-.01em !important;

    box-shadow:none !important;
}


/* WHATSAPP */

html body .vlx-mobile-socials
a[aria-label="WhatsApp"]{
    color:#168C48 !important;

    background:
        rgba(37,211,102,.065) !important;

    border:
        1px solid rgba(37,211,102,.20) !important;
}


html body .vlx-mobile-socials
a[aria-label="WhatsApp"]::after{
    content:"WhatsApp" !important;

    display:block !important;

    color:#157D42 !important;
}


/* TELEGRAM */

html body .vlx-mobile-socials
a[aria-label="Telegram"]{
    color:#1687BD !important;

    background:
        rgba(34,158,217,.065) !important;

    border:
        1px solid rgba(34,158,217,.20) !important;
}


html body .vlx-mobile-socials
a[aria-label="Telegram"]::after{
    content:"Telegram" !important;

    display:block !important;

    color:#137EAF !important;
}


/* ИКОНКИ */

html body .vlx-mobile-socials svg{
    width:18px !important;
    min-width:18px !important;

    height:18px !important;

    fill:currentColor !important;
}


/* TAP */

html body .vlx-mobile-socials
a[aria-label="WhatsApp"]:active{
    background:
        rgba(37,211,102,.12) !important;

    border-color:
        rgba(37,211,102,.32) !important;
}


html body .vlx-mobile-socials
a[aria-label="Telegram"]:active{
    background:
        rgba(34,158,217,.12) !important;

    border-color:
        rgba(34,158,217,.32) !important;
}


/* МАЛЕНЬКИЕ ТЕЛЕФОНЫ */

@media(max-width:360px){

    html body .vlx-mobile-phone{
        font-size:18px !important;
    }

    html body .vlx-mobile-socials a{
        padding:0 9px !important;

        font-size:11px !important;
    }

}


/* ==========================================================
   MOBILE MESSENGERS FIX
   ========================================================== */

html body .vlx-mobile-socials{
    width:100% !important;

    display:grid !important;
    grid-template-columns:
        minmax(0,1fr)
        minmax(0,1fr) !important;

    gap:9px !important;

    margin:0 !important;
    padding:0 !important;

    box-sizing:border-box !important;
}


html body .vlx-mobile-socials a,
html body .vlx-mobile-socials
a[aria-label="WhatsApp"],
html body .vlx-mobile-socials
a[aria-label="Telegram"]{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;

    height:44px !important;
    min-height:44px !important;
    max-height:44px !important;

    margin:0 !important;
    padding:0 10px !important;

    box-sizing:border-box !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    gap:7px !important;

    overflow:hidden !important;

    border-radius:9999px !important;

    font-size:11.5px !important;
    line-height:1 !important;

    font-weight:650 !important;

    white-space:nowrap !important;
}


/* WHATSAPP */

html body .vlx-mobile-socials
a[aria-label="WhatsApp"]{
    color:#158749 !important;

    background:
        rgba(37,211,102,.055) !important;

    border:
        1px solid rgba(37,211,102,.20) !important;
}


/* TELEGRAM */

html body .vlx-mobile-socials
a[aria-label="Telegram"]{
    color:#1688BD !important;

    background:
        rgba(34,158,217,.055) !important;

    border:
        1px solid rgba(34,158,217,.20) !important;
}


/* ИКОНКИ */

html body .vlx-mobile-socials svg{
    width:17px !important;
    min-width:17px !important;
    max-width:17px !important;

    height:17px !important;

    flex:0 0 17px !important;
}


/* ТЕКСТ */

html body .vlx-mobile-socials
a[aria-label="WhatsApp"]::after,
html body .vlx-mobile-socials
a[aria-label="Telegram"]::after{
    flex:0 1 auto !important;

    min-width:0 !important;

    margin:0 !important;
}


/* КОНТАКТНАЯ КАРТОЧКА */

html body .vlx-mobile-contact-row{
    width:100% !important;

    padding:14px !important;

    box-sizing:border-box !important;

    overflow:hidden !important;

    gap:12px !important;
}


/* НОМЕР ОСТАВЛЯЕМ КРУПНЫМ */

html body .vlx-mobile-phone{
    font-size:19px !important;
    line-height:25px !important;

    font-weight:700 !important;

    letter-spacing:-.045em !important;
}


/* МАЛЕНЬКИЕ ТЕЛЕФОНЫ */

@media(max-width:360px){

    html body .vlx-mobile-socials{
        gap:7px !important;
    }

    html body .vlx-mobile-socials a{
        padding:0 7px !important;

        font-size:10.5px !important;
    }

    html body .vlx-mobile-socials svg{
        width:15px !important;
        min-width:15px !important;
        max-width:15px !important;

        height:15px !important;

        flex-basis:15px !important;
    }

}


/* MOBILE LOGO TAGLINE ALIGNMENT */

html body .vlx-brand-tagline{
    width:174px !important;

    margin:
        1px
        0
        0
        27px !important;

    padding:0 !important;

    display:block !important;

    color:#929CA1 !important;

    font-family:'Montserrat',Arial,sans-serif !important;

    font-size:6.8px !important;
    line-height:8px !important;

    font-weight:500 !important;

    letter-spacing:.025em !important;

    text-align:center !important;

    white-space:nowrap !important;
}


@media(max-width:360px){

    html body .vlx-brand-tagline{
        width:156px !important;

        margin-left:25px !important;

        font-size:6px !important;
    }

}