/* =========================================================
   VOSTOK LOGISTIKA CONTACT PAGE
   ========================================================= */

body.vlc-contact-page,
body.vlc-contact-page *{
    box-sizing:border-box;
}


body.vlc-contact-page{
    --vlc-ink:#102833;
    --vlc-blue:#176B87;
    --vlc-cyan:#58C3D9;
    --vlc-muted:#73878F;
    --vlc-line:rgba(23,107,135,.13);
}


body.vlc-contact-page .vlc-page{
    overflow:hidden;

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

    background:#F5F8F9;
}


body.vlc-contact-page .vlc-shell{
    position:relative;

    width:min(
        1460px,
        calc(100% - 56px)
    );

    margin:0 auto;
}



/* =========================================================
   HERO
   ========================================================= */

body.vlc-contact-page .vlc-hero{
    --mx:72%;
    --my:30%;

    position:relative;

    min-height:260px;

    display:flex;
    align-items:center;

    overflow:hidden;
    isolation:isolate;

    background:
        linear-gradient(
            118deg,
            #06151D 0%,
            #092631 55%,
            #0B3340 100%
        );
}


body.vlc-contact-page .vlc-hero-bg,
body.vlc-contact-page .vlc-grid,
body.vlc-contact-page .vlc-orbit,
body.vlc-contact-page .vlc-glow,
body.vlc-contact-page .vlc-scan,
body.vlc-contact-page .vlc-signal{
    position:absolute;
    pointer-events:none;
}


body.vlc-contact-page .vlc-hero-bg{
    inset:0;
    overflow:hidden;
}


body.vlc-contact-page .vlc-grid{
    inset:-30%;

    opacity:.34;

    background-image:
        linear-gradient(
            rgba(116,219,238,.07) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(116,219,238,.07) 1px,
            transparent 1px
        );

    background-size:
        58px 58px;

    transform:
        perspective(700px)
        rotateX(67deg)
        translateY(22%);

    transform-origin:center bottom;

    animation:
        vlcGridFlow
        16s
        linear
        infinite;
}


body.vlc-contact-page .vlc-glow{
    border-radius:50%;

    filter:
        blur(10px);

    mix-blend-mode:screen;
}


body.vlc-contact-page .vlc-glow-a{
    width:560px;
    height:560px;

    left:
        calc(var(--mx) - 280px);

    top:
        calc(var(--my) - 280px);

    background:
        radial-gradient(
            circle,
            rgba(88,195,217,.20) 0%,
            rgba(45,137,166,.08) 37%,
            transparent 70%
        );

    transition:
        left .7s ease,
        top .7s ease;
}


body.vlc-contact-page .vlc-glow-b{
    width:390px;
    height:390px;

    left:-140px;
    bottom:-260px;

    background:
        radial-gradient(
            circle,
            rgba(88,195,217,.15),
            transparent 69%
        );

    animation:
        vlcGlowFloatA
        11s
        ease-in-out
        infinite alternate;
}


body.vlc-contact-page .vlc-glow-c{
    width:300px;
    height:300px;

    right:-70px;
    top:-180px;

    background:
        radial-gradient(
            circle,
            rgba(105,226,243,.14),
            transparent 68%
        );

    animation:
        vlcGlowFloatB
        13s
        ease-in-out
        infinite alternate;
}


body.vlc-contact-page .vlc-orbit{
    border:
        1px solid
        rgba(88,195,217,.11);

    border-radius:50%;
}


body.vlc-contact-page .vlc-orbit-a{
    width:570px;
    height:570px;

    right:-270px;
    top:-325px;

    animation:
        vlcOrbit
        22s
        linear
        infinite;
}


body.vlc-contact-page .vlc-orbit-b{
    width:360px;
    height:360px;

    right:-88px;
    top:-245px;

    border-color:
        rgba(88,195,217,.19);

    animation:
        vlcOrbit
        15s
        linear
        reverse
        infinite;
}


body.vlc-contact-page .vlc-orbit-a::before,
body.vlc-contact-page .vlc-orbit-b::before{
    content:"";

    position:absolute;

    width:7px;
    height:7px;

    left:50%;
    top:-4px;

    border-radius:50%;

    background:#72E0EF;

    box-shadow:
        0 0 0 7px rgba(88,195,217,.07),
        0 0 24px rgba(88,195,217,.8);
}


body.vlc-contact-page .vlc-scan{
    width:36%;
    height:180%;

    left:-45%;
    top:-38%;

    transform:
        rotate(17deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(120,229,246,.035),
            rgba(147,237,249,.12),
            rgba(120,229,246,.035),
            transparent
        );

    filter:
        blur(1px);

    animation:
        vlcScan
        7.5s
        cubic-bezier(.42,0,.18,1)
        infinite;
}


body.vlc-contact-page .vlc-signal{
    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(89,205,225,.72),
            transparent
        );

    filter:
        drop-shadow(
            0 0 5px rgba(88,195,217,.8)
        );
}


body.vlc-contact-page .vlc-signal-a{
    width:270px;

    right:13%;
    top:31%;

    animation:
        vlcSignal
        6s
        ease-in-out
        infinite;
}


body.vlc-contact-page .vlc-signal-b{
    width:180px;

    left:5%;
    bottom:20%;

    opacity:.34;

    animation:
        vlcSignal
        8s
        ease-in-out
        .9s
        infinite;
}


body.vlc-contact-page .vlc-hero::after{
    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(88,195,217,.40),
            transparent
        );
}


body.vlc-contact-page .vlc-hero-copy{
    position:relative;
    z-index:3;

    padding:45px 0 48px;
}


body.vlc-contact-page .vlc-kicker{
    margin-bottom:13px;

    display:flex;
    align-items:center;

    gap:10px;

    color:
        rgba(200,231,238,.62);

    font-size:8px;
    line-height:1;
    font-weight:760;
    letter-spacing:.20em;

    opacity:0;

    transform:
        translateY(12px);

    animation:
        vlcHeroIn
        .7s
        cubic-bezier(.16,1,.3,1)
        .08s
        forwards;
}


body.vlc-contact-page .vlc-kicker i{
    width:6px;
    height:6px;

    border-radius:50%;

    background:
        var(--vlc-cyan);

    box-shadow:
        0 0 0 6px rgba(88,195,217,.08),
        0 0 20px rgba(88,195,217,.50);

    animation:
        vlcDotPulse
        2.2s
        ease-out
        infinite;
}


body.vlc-contact-page .vlc-hero h1{
    max-width:980px;

    margin:0 !important;

    color:#FFFFFF !important;

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

    font-size:
        clamp(
            42px,
            4.8vw,
            70px
        ) !important;

    line-height:.96 !important;

    font-weight:
        760 !important;

    letter-spacing:
        -.058em !important;

    opacity:0;

    transform:
        translateY(19px);

    animation:
        vlcHeroIn
        .9s
        cubic-bezier(.16,1,.3,1)
        .15s
        forwards;
}


body.vlc-contact-page .vlc-hero h1 span{
    color:
        var(--vlc-cyan);

    font:inherit;
}


body.vlc-contact-page .vlc-hero-copy > p{
    margin:
        17px 0 0 !important;

    color:
        rgba(215,234,239,.64) !important;

    font-size:
        12px !important;

    line-height:
        1.5 !important;

    font-weight:
        520 !important;

    letter-spacing:
        .01em;

    opacity:0;

    transform:
        translateY(14px);

    animation:
        vlcHeroIn
        .75s
        cubic-bezier(.16,1,.3,1)
        .26s
        forwards;
}



/* =========================================================
   LOCATIONS
   ========================================================= */

body.vlc-contact-page .vlc-location{
    position:relative;

    padding:
        26px 0;

    background:
        linear-gradient(
            180deg,
            #F5F8F9 0%,
            #FFFFFF 100%
        );

    border-bottom:
        1px solid
        rgba(23,107,135,.10);
}


body.vlc-contact-page .vlc-location:nth-of-type(odd){
    background:
        linear-gradient(
            180deg,
            #FFFFFF 0%,
            #F6F9FA 100%
        );
}


body.vlc-contact-page .vlc-row{
    display:grid;

    grid-template-columns:
        minmax(0,.93fr)
        minmax(460px,1.07fr);

    align-items:stretch;

    gap:
        clamp(
            42px,
            5vw,
            82px
        );

    min-height:270px;
}


body.vlc-contact-page .vlc-map-left{
    grid-template-columns:
        minmax(460px,1.07fr)
        minmax(0,.93fr);
}



/* =========================================================
   DETAILS
   ========================================================= */

body.vlc-contact-page .vlc-details{
    min-width:0;

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:
        14px 0;
}


body.vlc-contact-page .vlc-country-head{
    display:flex;
    align-items:center;

    gap:18px;

    margin-bottom:17px;
}


body.vlc-contact-page .vlc-country-number{
    width:48px;
    height:48px;

    flex:0 0 48px;

    display:grid;
    place-items:center;

    border:
        1px solid
        rgba(23,107,135,.18);

    border-radius:50%;

    color:
        var(--vlc-blue);

    font-size:10px;
    line-height:1;
    font-weight:760;
    letter-spacing:.09em;

    background:
        rgba(255,255,255,.65);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.8),
        0 8px 24px rgba(23,107,135,.05);
}


body.vlc-contact-page .vlc-country-kicker{
    margin-bottom:4px;

    color:
        #809198;

    font-size:8px;
    line-height:1;
    font-weight:760;
    letter-spacing:.18em;
}


body.vlc-contact-page .vlc-details h2{
    margin:0 !important;

    color:
        var(--vlc-ink) !important;

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

    font-size:
        clamp(
            30px,
            3vw,
            47px
        ) !important;

    line-height:1 !important;

    font-weight:
        760 !important;

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


body.vlc-contact-page .vlc-detail-list{
    border-top:
        1px solid
        var(--vlc-line);
}


body.vlc-contact-page .vlc-detail-line{
    display:grid;

    grid-template-columns:
        105px
        minmax(0,1fr);

    gap:18px;

    padding:
        9px 0;

    border-bottom:
        1px solid
        var(--vlc-line);
}


body.vlc-contact-page .vlc-detail-label{
    padding-top:2px;

    color:
        #81949B;

    font-size:7.5px;
    line-height:1.35;
    font-weight:760;
    letter-spacing:.16em;
}


body.vlc-contact-page .vlc-detail-value{
    color:
        #263E48;

    font-size:
        11.5px;

    line-height:
        1.46;

    font-weight:
        540;

    overflow-wrap:anywhere;
}


body.vlc-contact-page .vlc-detail-value a{
    position:relative;

    color:
        #173B4A !important;

    text-decoration:none !important;

    transition:
        color .23s ease;
}


body.vlc-contact-page .vlc-detail-value a::after{
    content:"";

    position:absolute;

    left:0;
    right:100%;
    bottom:-2px;

    height:1px;

    background:
        var(--vlc-cyan);

    transition:
        right .3s
        cubic-bezier(.16,1,.3,1);
}


body.vlc-contact-page .vlc-detail-value a:hover{
    color:
        var(--vlc-blue) !important;
}


body.vlc-contact-page .vlc-detail-value a:hover::after{
    right:0;
}


body.vlc-contact-page .vlc-address-cn{
    align-items:start;
}


body.vlc-contact-page .vlc-cn,
body.vlc-contact-page .vlc-en{
    display:block;
}


body.vlc-contact-page .vlc-cn{
    margin-bottom:5px;

    color:#173B4A;

    font-weight:590;
}


body.vlc-contact-page .vlc-en{
    color:#647A84;

    font-size:
        10px;

    line-height:
        1.48;

    font-weight:
        480;
}



/* =========================================================
   MAP
   ========================================================= */

body.vlc-contact-page .vlc-map{
    position:relative;

    min-width:0;
    height:270px;

    overflow:hidden;

    border-radius:
        25px;

    background:
        #D9E4E7;

    border:
        1px solid
        rgba(23,107,135,.13);

    box-shadow:
        0 19px 48px
        rgba(20,58,72,.10),
        0 5px 15px
        rgba(20,58,72,.06);

    isolation:isolate;
}


body.vlc-contact-page .vlc-map iframe{
    position:absolute;

    inset:-1px;

    width:
        calc(100% + 2px);

    height:
        calc(100% + 2px);

    border:0;

    filter:
        saturate(.72)
        contrast(.96)
        brightness(1.03);

    transition:
        filter .5s ease,
        transform .8s
        cubic-bezier(.16,1,.3,1);

    transform:
        scale(1.005);
}


body.vlc-contact-page .vlc-map:hover iframe{
    filter:
        saturate(.95)
        contrast(1)
        brightness(1);

    transform:
        scale(1.015);
}


body.vlc-contact-page .vlc-map-vignette{
    position:absolute;

    inset:0;

    z-index:2;

    pointer-events:none;

    background:
        linear-gradient(
            180deg,
            rgba(10,42,54,.02) 48%,
            rgba(5,28,38,.24) 100%
        );

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


body.vlc-contact-page .vlc-map-marker{
    position:absolute;

    z-index:4;

    left:20px;
    right:20px;
    bottom:17px;

    min-height:51px;

    display:grid;

    grid-template-columns:
        30px
        minmax(0,1fr)
        25px;

    align-items:center;

    gap:11px;

    padding:
        8px 10px;

    border:
        1px solid
        rgba(255,255,255,.26);

    border-radius:
        15px;

    color:#FFFFFF !important;

    text-decoration:none !important;

    background:
        linear-gradient(
            105deg,
            rgba(7,35,47,.88),
            rgba(12,65,82,.82)
        );

    box-shadow:
        0 13px 38px
        rgba(3,20,28,.23),
        inset 0 1px 0
        rgba(255,255,255,.10);

    backdrop-filter:
        blur(13px)
        saturate(1.12);

    -webkit-backdrop-filter:
        blur(13px)
        saturate(1.12);

    transition:
        transform .3s
        cubic-bezier(.16,1,.3,1),
        border-color .3s ease,
        box-shadow .3s ease;
}


body.vlc-contact-page .vlc-map-marker:hover{
    transform:
        translateY(-2px);

    border-color:
        rgba(111,223,240,.42);

    box-shadow:
        0 17px 45px
        rgba(3,20,28,.28),
        0 0 0 1px
        rgba(88,195,217,.10);
}


body.vlc-contact-page .vlc-map-dot{
    position:relative;

    width:27px;
    height:27px;

    display:grid;
    place-items:center;
}


body.vlc-contact-page .vlc-map-dot::before,
body.vlc-contact-page .vlc-map-dot::after{
    content:"";

    position:absolute;

    inset:4px;

    border:
        1px solid
        rgba(88,195,217,.68);

    border-radius:50%;

    animation:
        vlcMapPulse
        2.1s
        ease-out
        infinite;
}


body.vlc-contact-page .vlc-map-dot::after{
    animation-delay:
        .75s;
}


body.vlc-contact-page .vlc-map-dot i{
    position:relative;

    z-index:3;

    width:8px;
    height:8px;

    border-radius:50%;

    background:
        #63D4E7;

    box-shadow:
        0 0 0 5px
        rgba(88,195,217,.14),
        0 0 20px
        rgba(88,195,217,.90);

    animation:
        vlcMarkerGlow
        1.7s
        ease-in-out
        infinite alternate;
}


body.vlc-contact-page .vlc-map-marker-copy{
    min-width:0;

    display:block;
}


body.vlc-contact-page .vlc-map-marker-copy small{
    display:block;

    margin-bottom:3px;

    color:
        rgba(183,226,235,.64);

    font-size:6.5px;
    line-height:1;
    font-weight:720;
    letter-spacing:.13em;
}


body.vlc-contact-page .vlc-map-marker-copy strong{
    display:block;

    overflow:hidden;

    color:#FFFFFF;

    font-size:9.5px;
    line-height:1.3;
    font-weight:650;

    text-overflow:ellipsis;
    white-space:nowrap;
}


body.vlc-contact-page .vlc-map-arrow{
    display:grid;
    place-items:center;

    width:25px;
    height:25px;

    border-radius:50%;

    background:
        rgba(255,255,255,.09);

    color:
        #87E2EF;

    font-size:12px;

    transition:
        transform .3s
        cubic-bezier(.16,1,.3,1);
}


body.vlc-contact-page .vlc-map-marker:hover
.vlc-map-arrow{
    transform:
        translate(2px,-2px);
}



/* =========================================================
   REVEAL
   ========================================================= */

body.vlc-contact-page
.vlc-location[data-vlc-reveal]{
    opacity:0;

    transform:
        translateY(22px);

    transition:
        opacity .68s ease,
        transform .85s
        cubic-bezier(.16,1,.3,1);
}


body.vlc-contact-page
.vlc-location[data-vlc-reveal]
.vlc-details{
    opacity:0;

    transform:
        translateX(-20px);

    transition:
        opacity .68s ease .08s,
        transform .85s
        cubic-bezier(.16,1,.3,1)
        .08s;
}


body.vlc-contact-page
.vlc-location[data-vlc-reveal]
.vlc-map{
    opacity:0;

    transform:
        translateX(20px)
        scale(.985);

    transition:
        opacity .72s ease .13s,
        transform .9s
        cubic-bezier(.16,1,.3,1)
        .13s;
}


body.vlc-contact-page
.vlc-location.vlc-map-left[data-vlc-reveal]
.vlc-details{
    transform:
        translateX(20px);
}


body.vlc-contact-page
.vlc-location.is-visible{
    opacity:1;

    transform:none;
}


body.vlc-contact-page
.vlc-location.is-visible
.vlc-details,
body.vlc-contact-page
.vlc-location.is-visible
.vlc-map{
    opacity:1;

    transform:none;
}



/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes vlcHeroIn{

    to{
        opacity:1;
        transform:none;
    }

}


@keyframes vlcGridFlow{

    from{
        background-position:
            0 0,
            0 0;
    }

    to{
        background-position:
            0 58px,
            58px 0;
    }

}


@keyframes vlcGlowFloatA{

    from{
        transform:
            translate3d(0,0,0)
            scale(1);
    }

    to{
        transform:
            translate3d(80px,-22px,0)
            scale(1.15);
    }

}


@keyframes vlcGlowFloatB{

    from{
        transform:
            translate3d(0,0,0);
    }

    to{
        transform:
            translate3d(-80px,35px,0);
    }

}


@keyframes vlcOrbit{

    to{
        transform:
            rotate(360deg);
    }

}


@keyframes vlcScan{

    0%,
    16%{
        left:-47%;
        opacity:0;
    }

    29%{
        opacity:1;
    }

    55%{
        left:115%;
        opacity:.9;
    }

    56%,
    100%{
        left:115%;
        opacity:0;
    }

}


@keyframes vlcSignal{

    0%,
    100%{
        opacity:.12;
        transform:
            scaleX(.45);
    }

    48%{
        opacity:.8;
        transform:
            scaleX(1);
    }

}


@keyframes vlcDotPulse{

    0%{
        box-shadow:
            0 0 0 0
            rgba(88,195,217,.26),
            0 0 18px
            rgba(88,195,217,.38);
    }

    75%,
    100%{
        box-shadow:
            0 0 0 11px
            rgba(88,195,217,0),
            0 0 21px
            rgba(88,195,217,.45);
    }

}


@keyframes vlcMapPulse{

    0%{
        opacity:.75;
        transform:
            scale(.5);
    }

    90%,
    100%{
        opacity:0;
        transform:
            scale(1.75);
    }

}


@keyframes vlcMarkerGlow{

    from{
        filter:
            brightness(.95);
    }

    to{
        filter:
            brightness(1.25);
    }

}



/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1024px){

    body.vlc-contact-page .vlc-shell{
        width:
            calc(100% - 42px);
    }


    body.vlc-contact-page .vlc-row,
    body.vlc-contact-page .vlc-map-left{
        grid-template-columns:
            minmax(0,1fr)
            minmax(390px,1fr);

        gap:34px;
    }


    body.vlc-contact-page .vlc-map{
        height:255px;
    }

}



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

@media(max-width:767px){

    body.vlc-contact-page .vlc-shell{
        width:
            calc(100% - 28px);
    }


    body.vlc-contact-page .vlc-hero{
        min-height:
            230px;
    }


    body.vlc-contact-page .vlc-hero-copy{
        padding:
            39px 0 40px;
    }


    body.vlc-contact-page .vlc-hero h1{
        font-size:
            clamp(
                37px,
                11vw,
                49px
            ) !important;

        line-height:
            .99 !important;
    }


    body.vlc-contact-page .vlc-hero-copy > p{
        margin-top:
            14px !important;
    }


    body.vlc-contact-page .vlc-grid{
        opacity:.22;

        background-size:
            45px 45px;
    }


    body.vlc-contact-page .vlc-orbit-a{
        width:360px;
        height:360px;

        right:-230px;
        top:-210px;
    }


    body.vlc-contact-page .vlc-orbit-b{
        width:240px;
        height:240px;

        right:-90px;
        top:-180px;
    }


    body.vlc-contact-page .vlc-location{
        padding:
            23px 0 27px;
    }


    body.vlc-contact-page .vlc-row,
    body.vlc-contact-page .vlc-map-left{
        display:flex;

        flex-direction:column;

        gap:18px;

        min-height:0;
    }


    /*
     * На телефоне сначала контакты,
     * затем карта.
     */

    body.vlc-contact-page .vlc-details{
        order:1;

        padding:
            3px 0;
    }


    body.vlc-contact-page .vlc-map{
        order:2;

        width:100%;
        height:245px;

        border-radius:
            21px;
    }


    body.vlc-contact-page .vlc-country-head{
        gap:14px;

        margin-bottom:
            14px;
    }


    body.vlc-contact-page .vlc-country-number{
        width:42px;
        height:42px;

        flex-basis:42px;

        font-size:
            9px;
    }


    body.vlc-contact-page .vlc-details h2{
        font-size:
            34px !important;
    }


    body.vlc-contact-page .vlc-detail-line{
        grid-template-columns:
            78px
            minmax(0,1fr);

        gap:12px;

        padding:
            9px 0;
    }


    body.vlc-contact-page .vlc-detail-value{
        font-size:
            11px;
    }


    body.vlc-contact-page .vlc-map-marker{
        left:10px;
        right:10px;
        bottom:10px;

        grid-template-columns:
            26px
            minmax(0,1fr)
            24px;

        gap:8px;

        min-height:49px;

        padding:
            7px 8px;

        border-radius:
            13px;
    }


    body.vlc-contact-page
    .vlc-map-marker-copy strong{
        font-size:
            8.7px;
    }


    /*
     * На touch никаких тяжёлых hover эффектов.
     */

    body.vlc-contact-page
    .vlc-map:hover iframe{
        transform:
            scale(1.005);

        filter:
            saturate(.72)
            contrast(.96)
            brightness(1.03);
    }


    body.vlc-contact-page
    .vlc-location[data-vlc-reveal]
    .vlc-details,
    body.vlc-contact-page
    .vlc-location[data-vlc-reveal]
    .vlc-map{
        transform:
            translateY(15px);
    }


    body.vlc-contact-page
    .vlc-location.is-visible
    .vlc-details,
    body.vlc-contact-page
    .vlc-location.is-visible
    .vlc-map{
        transform:none;
    }

}



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

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

    body.vlc-contact-page *,
    body.vlc-contact-page *::before,
    body.vlc-contact-page *::after{
        animation:none !important;
        transition:none !important;
    }


    body.vlc-contact-page
    .vlc-location[data-vlc-reveal],
    body.vlc-contact-page
    .vlc-location[data-vlc-reveal]
    .vlc-details,
    body.vlc-contact-page
    .vlc-location[data-vlc-reveal]
    .vlc-map,
    body.vlc-contact-page
    .vlc-kicker,
    body.vlc-contact-page
    .vlc-hero h1,
    body.vlc-contact-page
    .vlc-hero-copy > p{
        opacity:1 !important;
        transform:none !important;
    }

}


/* =========================================================
   CONTACT PAGE
   REMOVE LEGACY BRIDGE TITLE
   ========================================================= */

body.page-id-866 .title_outer{
    display:none !important;
}

body.page-id-866 .content,
body.page-id-866 .content_inner,
body.page-id-866 .full_width,
body.page-id-866 .full_width_inner{
    margin-top:0 !important;
    padding-top:0 !important;
}

body.page-id-866 .content{
    min-height:0 !important;
}



/* =========================================================
   CONTACT STATIC MAPS FINAL
   ========================================================= */

body.vlc-contact-page .vlc-row{
    grid-template-columns:
        minmax(0,.92fr)
        minmax(420px,1.08fr) !important;
}


body.vlc-contact-page .vlc-map-left{
    grid-template-columns:
        minmax(0,.92fr)
        minmax(420px,1.08fr) !important;
}


/* old iframe maps no longer used */

body.vlc-contact-page .vlc-map{
    display:none !important;
}


/* static screenshot map */

body.vlc-contact-page .vlc-map-card{
    position:relative;

    display:block;

    width:100%;
    height:270px;

    overflow:hidden;

    border-radius:24px;

    border:
        1px solid
        rgba(23,107,135,.12);

    background:#DCE6EA;

    box-shadow:
        0 18px 46px
        rgba(20,58,72,.10),
        0 5px 16px
        rgba(20,58,72,.06);

    text-decoration:none !important;

    isolation:isolate;

    transition:
        transform .32s
        cubic-bezier(.16,1,.3,1),
        box-shadow .32s ease,
        border-color .32s ease;
}


body.vlc-contact-page .vlc-map-card:hover{
    transform:
        translateY(-3px);

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

    box-shadow:
        0 23px 56px
        rgba(20,58,72,.14),
        0 7px 18px
        rgba(20,58,72,.07);
}


body.vlc-contact-page .vlc-map-image{
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    transition:
        transform .7s
        cubic-bezier(.16,1,.3,1);
}


body.vlc-contact-page .vlc-map-card:hover
.vlc-map-image{
    transform:
        scale(1.015);
}


body.vlc-contact-page .vlc-map-shade{
    position:absolute;

    inset:0;

    z-index:1;

    pointer-events:none;

    background:
        linear-gradient(
            180deg,
            transparent 56%,
            rgba(5,25,34,.19) 100%
        );
}


/* =========================================================
   OFFICE POINT
   ========================================================= */

body.vlc-contact-page .vlc-map-pin{
    position:absolute;

    left:
        var(--pin-x);

    top:
        var(--pin-y);

    z-index:4;

    width:14px;
    height:14px;

    transform:
        translate(-50%,-50%);

    pointer-events:none;
}


body.vlc-contact-page .vlc-map-pin::before{
    content:"";

    position:absolute;

    inset:3px;

    border-radius:50%;

    background:
        #58C3D9;

    border:
        2px solid
        rgba(255,255,255,.96);

    box-shadow:
        0 0 10px
        rgba(88,195,217,.92),
        0 0 20px
        rgba(88,195,217,.48);

    z-index:3;
}


body.vlc-contact-page .vlc-map-pin::after{
    content:"";

    position:absolute;

    inset:-2px;

    border-radius:50%;

    border:
        1px solid
        rgba(88,195,217,.78);

    animation:
        vlcOfficePulse
        1.8s
        cubic-bezier(.15,.7,.25,1)
        infinite;
}


body.vlc-contact-page .vlc-map-pin i{
    position:absolute;

    inset:-7px;

    border-radius:50%;

    border:
        1px solid
        rgba(88,195,217,.34);

    animation:
        vlcOfficePulseOuter
        1.8s
        cubic-bezier(.15,.7,.25,1)
        .4s
        infinite;
}


/* =========================================================
   MAP LABEL
   ========================================================= */

body.vlc-contact-page .vlc-map-badge{
    position:absolute;

    left:15px;
    right:15px;
    bottom:14px;

    z-index:5;

    padding:
        11px 14px;

    border:
        1px solid
        rgba(255,255,255,.16);

    border-radius:
        14px;

    background:
        linear-gradient(
            110deg,
            rgba(5,28,38,.82),
            rgba(9,55,70,.76)
        );

    box-shadow:
        0 10px 28px
        rgba(4,20,28,.18);

    backdrop-filter:
        blur(9px);

    -webkit-backdrop-filter:
        blur(9px);
}


body.vlc-contact-page
.vlc-map-badge small{
    display:block;

    margin-bottom:
        4px;

    color:
        rgba(185,227,236,.71);

    font-size:
        7px;

    line-height:1;

    font-weight:
        760;

    letter-spacing:
        .15em;
}


body.vlc-contact-page
.vlc-map-badge strong{
    display:block;

    color:
        #FFFFFF;

    font-size:
        11.5px;

    line-height:
        1.35;

    font-weight:
        620;
}


/* =========================================================
   BIGGER CONTACT TEXT
   ========================================================= */

body.vlc-contact-page .vlc-detail-value{
    font-size:
        14px !important;

    line-height:
        1.5 !important;

    font-weight:
        540 !important;
}


body.vlc-contact-page .vlc-detail-label{
    font-size:
        8px !important;
}


body.vlc-contact-page .vlc-detail-line{
    padding:
        11px 0 !important;
}


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

@media(max-width:767px){

    body.vlc-contact-page .vlc-row,
    body.vlc-contact-page .vlc-map-left{
        display:flex !important;

        flex-direction:
            column !important;

        gap:
            18px !important;
    }


    body.vlc-contact-page .vlc-details{
        order:1 !important;
    }


    body.vlc-contact-page .vlc-map-card{
        order:2 !important;

        height:
            220px;

        border-radius:
            20px;
    }


    body.vlc-contact-page .vlc-detail-value{
        font-size:
            14px !important;
    }


    body.vlc-contact-page .vlc-map-badge{
        left:10px;
        right:10px;
        bottom:10px;

        padding:
            10px 12px;
    }


    body.vlc-contact-page
    .vlc-map-badge strong{
        font-size:
            10.5px;
    }

}


@keyframes vlcOfficePulse{

    0%{
        transform:
            scale(.65);

        opacity:
            .95;
    }

    80%,
    100%{
        transform:
            scale(2.1);

        opacity:
            0;
    }

}


@keyframes vlcOfficePulseOuter{

    0%{
        transform:
            scale(.65);

        opacity:
            .55;
    }

    85%,
    100%{
        transform:
            scale(1.75);

        opacity:
            0;
    }

}



/* =========================================================
   CONTACT MAP FINAL CLEAN SYSTEM
   ========================================================= */


/* =========================================================
   MAP IMAGE
   ========================================================= */

body.vlc-contact-page .vlc-map-card{
    position:relative !important;

    display:block !important;

    width:100% !important;
    height:auto !important;

    overflow:hidden !important;

    line-height:0 !important;

    border-radius:24px !important;

    transform:none !important;
}


body.vlc-contact-page .vlc-map-image{
    position:relative !important;

    inset:auto !important;

    display:block !important;

    width:100% !important;
    height:auto !important;

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

    transform:none !important;

    filter:none !important;
}


body.vlc-contact-page
.vlc-map-card:hover
.vlc-map-image{
    transform:none !important;
}


/* =========================================================
   OFFICE PIN
   ========================================================= */

/*
 * Сама точка неподвижна.
 * 20px достаточно, чтобы перекрыть
 * исходную красную отметку,
 * но она не выглядит огромной.
 */

body.vlc-contact-page
.vlc-location
.vlc-map-pin{

    position:absolute !important;

    width:20px !important;
    height:20px !important;

    margin:0 !important;

    border-radius:50% !important;

    background:#58C3D9 !important;

    border:
        2px solid
        rgba(255,255,255,.98) !important;

    box-shadow:
        0 0 0 2px
        rgba(13,44,56,.22),

        0 0 13px
        rgba(88,195,217,.88) !important;

    transform:
        translate(-50%,-50%) !important;

    transform-origin:
        center center !important;

    z-index:40 !important;

    pointer-events:none !important;

    animation:none !important;
}


/*
 * Внутренний i больше не участвует.
 */

body.vlc-contact-page
.vlc-map-pin i{
    display:none !important;
}


/* =========================================================
   PULSE RING 1
   ========================================================= */

body.vlc-contact-page
.vlc-map-pin::before{

    content:"" !important;

    position:absolute !important;

    left:50% !important;
    top:50% !important;

    width:20px !important;
    height:20px !important;

    margin:0 !important;

    border-radius:50% !important;

    border:
        2px solid
        rgba(88,195,217,.72) !important;

    background:
        transparent !important;

    transform:
        translate(-50%,-50%)
        scale(1);

    transform-origin:
        center center !important;

    opacity:.9;

    box-shadow:
        0 0 10px
        rgba(88,195,217,.28);

    pointer-events:none !important;

    animation:
        vlcOfficeWave
        2.1s
        cubic-bezier(.20,.65,.25,1)
        infinite !important;
}


/* =========================================================
   PULSE RING 2
   ========================================================= */

body.vlc-contact-page
.vlc-map-pin::after{

    content:"" !important;

    position:absolute !important;

    left:50% !important;
    top:50% !important;

    width:20px !important;
    height:20px !important;

    margin:0 !important;

    border-radius:50% !important;

    border:
        1px solid
        rgba(88,195,217,.48) !important;

    background:
        transparent !important;

    transform:
        translate(-50%,-50%)
        scale(1);

    transform-origin:
        center center !important;

    opacity:.6;

    pointer-events:none !important;

    animation:
        vlcOfficeWave
        2.1s
        cubic-bezier(.20,.65,.25,1)
        .72s
        infinite !important;
}


/* =========================================================
   EXACT PIN POSITIONS
   ========================================================= */


/* Москва */

body.vlc-contact-page
.vlc-location-russia
.vlc-map-pin{

    left:48.2915% !important;
    top:43.1848% !important;
}


/* Астана */

body.vlc-contact-page
.vlc-location-kz
.vlc-map-pin{

    left:49.0074% !important;
    top:49.4258% !important;
}


/* Бишкек */

body.vlc-contact-page
.vlc-location-kg
.vlc-map-pin{

    left:45.7883% !important;
    top:33.5570% !important;
}


/* Китай */

body.vlc-contact-page
.vlc-location-cn
.vlc-map-pin{

    left:50.2848% !important;
    top:47.6288% !important;
}


/* =========================================================
   WAVE ANIMATION
   ========================================================= */

@keyframes vlcOfficeWave{

    0%{

        transform:
            translate(-50%,-50%)
            scale(.92);

        opacity:.88;

    }


    62%{

        opacity:.28;

    }


    100%{

        transform:
            translate(-50%,-50%)
            scale(2.55);

        opacity:0;

    }

}


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

@media(max-width:767px){

    body.vlc-contact-page
    .vlc-map-card{
        height:auto !important;
    }


    body.vlc-contact-page
    .vlc-map-pin{
        width:18px !important;
        height:18px !important;
    }


    body.vlc-contact-page
    .vlc-map-pin::before,
    body.vlc-contact-page
    .vlc-map-pin::after{

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

}



/* =========================================================
   CONTACT PHONE LINKS
   ========================================================= */

body.vlc-contact-page .vlc-phone-value{
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;
    gap:6px 10px;
}


body.vlc-contact-page .vlc-phone-number{
    color:#173B4A !important;

    font-weight:650 !important;

    text-decoration:none !important;
}


body.vlc-contact-page .vlc-phone-person{
    color:#71878F;

    font-size:.88em;

    font-weight:520;
}


body.vlc-contact-page .vlc-phone-number:hover{
    color:#176B87 !important;
}


@media(max-width:767px){

    body.vlc-contact-page .vlc-phone-value{
        gap:4px 8px;
    }

}