/*общие стили*/
#map{
    background: url("../i/mapbg.svg") no-repeat;
    margin-bottom:40px;
}

#map path {
    opacity: 0;
    stroke: #fff;
}

#map svg > g .hide {
    display: block;
    opacity: 0;
    font-size: 5px;
}

#map text {
    font-family: RobotoRegular;
}

#map text,
#map rect {
    pointer-events: none;
    -webkit-pointer-events: none;
    -moz-pointer-events: none;
    -o-pointer-events: none;
    -ms-pointer-events: none;
    fill: #fff;
    text-shadow: 1px 0px 2px rgba(0, 0, 0, 0.86);
}

#map svg > g {
    cursor: pointer;
    transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    -moz-transform: scale(1);
    
}

#map svg > g > g {
    pointer-events: none;
    -webkit-pointer-events: none;
    -moz-pointer-events: none;
    -o-pointer-events: none;
    -ms-pointer-events: none;
}

#map svg > g.hover > a:hover path {
    fill: #0098bf;
}

#map svg > g#dalnevostok.hover > a path {
    fill: #0098bf;
}

#map svg > g.hover path {
    fill: #0083a5;
    stroke: #66b5c9;
}

#map svg > g.hover .hide {
    animation: text-fade 0.2s 1 ease-in-out 0.4s both;
    -webkit-animation: text-fade 0.2s 1 ease-in-out 0.4s both;
    -moz-animation: text-fade 0.2s 1 ease-in-out 0.4s both;
    -o-animation: text-fade 0.2s 1 ease-in-out 0.4s both;
    -ms-animation: text-fade 0.2s 1 ease-in-out 0.4s both;
}

#map svg > g.hover text.hide {
    fill: #fff;
}

#map svg > g .main-city {
    display: block;
    font-size: 15px;
    opacity: 1;
    text-shadow: none;
    fill: #4d4d4d;
}

#map svg > g rect.main-city {
    fill: #0083a5;
}

#map svg > g text.main-city {
    fill: #4d4d4d;
}

#map svg > g.hover .main-city {
    fill: #fff;
    text-shadow: 1px 0px 2px rgba(0, 0, 0, 0.86);
}

#map svg > g.hover .help-area {
    display: block;
    opacity: 0;
}

#map g.hover .no-active text,
#map g.hover .no-active rect {
    animation: text-fade2 0.2s 1 ease-in-out 0.4s both;
    -webkit-animation: text-fade2 0.2s 1 ease-in-out 0.4s both;
    -moz-animation: text-fade2 0.2s 1 ease-in-out 0.4s both;
    -o-animation: text-fade2 0.2s 1 ease-in-out 0.4s both;
    -ms-animation: text-fade2 0.2s 1 ease-in-out 0.4s both;
}




/*center*/

#center {
    transform-origin: 70px 300px;
    -ms-transform-origin: 70px 300px;
    -webkit-transform-origin: 70px 300px;
    -moz-transform-origin: 70px 300px;
    -o-transform-origin: 70px 300px;
}

#center.hover {
    animation: scale_center 0.2s 1 ease-in-out 0.4s both;
    -ms-animation: scale_center 0.2s 1 ease-in-out 0.4s both;
    -webkit-animation: scale_center 0.2s 1 ease-in-out 0.4s both;
    -moz-animation: scale_center 0.2s 1 ease-in-out 0.4s both;
    -o-animation: scale_center 0.2s 1 ease-in-out 0.4s both;
}

#center.hover a path {
    animation: stroke_center 0.2s 1 ease-in-out 0.4s both, path-fade 0.2s 1 ease-in-out both;
    -ms-animation: stroke_center 0.2s 1 ease-in-out 0.4s both, path-fade 0.2s 1 ease-in-out both;
    -webkit-animation: stroke_center 0.2s 1 ease-in-out 0.4s both, path-fade 0.2s 1 ease-in-out both;
    -moz-animation: stroke_center 0.2s 1 ease-in-out 0.4s both, path-fade 0.2s 1 ease-in-out both;
    -o-animation: stroke_center 0.2s 1 ease-in-out 0.4s both, path-fade 0.2s 1 ease-in-out both;
}

#map svg > g#center.hover g.main {
    transform: scale(1.0);
    -ms-transform: scale(1.0);
    -webkit-transform: scale(1.0);
    -moz-transform: scale(1.0);
    -o-transform: scale(1.0);
    transform-origin: 104px 272px;
    -ms-transform-origin: 104px 272px;
    -webkit-transform-origin: 104px 272px;
    -moz-transform-origin: 104px 272px;
    -o-transform-origin: 104px 272px;
    animation: rect-scale 0.2s 1 ease-in-out 0.4s both;
    -ms-animation: rect-scale 0.2s 1 ease-in-out 0.4s both;
    -webkit-animation: rect-scale 0.2s 1 ease-in-out 0.4s both;
    -moz-animation: rect-scale 0.2s 1 ease-in-out 0.4s both;
    -o-animation: rect-scale 0.2s 1 ease-in-out 0.4s both;
}








/*Северозапад*/

#severozapad {
    transform-origin: 100px 235px;
    -ms-transform-origin: 100px 235px;
    -webkit-transform-origin: 100px 235px;
    -moz-transform-origin: 100px 235px;
    -o-transform-origin: 100px 235px;
}

#severozapad.hover {
    animation: scale_severozapad 0.2s 1 ease-in-out 0.4s both;
    -ms-animation: scale_severozapad 0.2s 1 ease-in-out 0.4s both;
    -webkit-animation: scale_severozapad 0.2s 1 ease-in-out 0.4s both;
    -moz-animation: scale_severozapad 0.2s 1 ease-in-out 0.4s both;
    -o-animation: scale_severozapad 0.2s 1 ease-in-out 0.4s both;
}

#severozapad.hover a path {
    animation: stroke_severozapad 0.2s 1 ease-in-out 0.4s both, path-fade 0.2s 1 ease-in-out both;
    -ms-animation: stroke_severozapad 0.2s 1 ease-in-out 0.4s both, path-fade 0.2s 1 ease-in-out both;
    -webkit-animation: stroke_severozapad 0.2s 1 ease-in-out 0.4s both, path-fade 0.2s 1 ease-in-out both;
    -moz-animation: stroke_severozapad 0.2s 1 ease-in-out 0.4s both, path-fade 0.2s 1 ease-in-out both;
    -o-animation: stroke_severozapad 0.2s 1 ease-in-out 0.4s both, path-fade 0.2s 1 ease-in-out both;
}

#map svg > g#severozapad.hover g.main {
    transform: scale(1.0);
    -ms-transform: scale(1.0);
    -webkit-transform: scale(1.0);
    -moz-transform: scale(1.0);
    -o-transform: scale(1.0);

    transform-origin: 112px 214px;
    -ms-transform-origin: 112px 214px;
    -webkit-transform-origin: 112px 214px;
    -moz-transform-origin: 112px 214px;
    -o-transform-origin: 112px 214px;

    animation: rect-scale2 0.2s 1 ease-in-out 0.4s both;
    -ms-animation: rect-scale2 0.2s 1 ease-in-out 0.4s both;
    -webkit-animation: rect-scale2 0.2s 1 ease-in-out 0.4s both;
    -moz-animation: rect-scale2 0.2s 1 ease-in-out 0.4s both;
    -o-animation: rect-scale2 0.2s 1 ease-in-out 0.4s both;
}

#map svg > g#severozapad .hide {
    font-size: 0.47em;

}

#severozapad.hover .kaliningrad-move {
    animation: kaliningrad 0.2s 1 ease-in-out 0.4s both;
    -ms-animation: kaliningrad 0.2s 1 ease-in-out 0.4s both;
    -webkit-animation: kaliningrad 0.2s 1 ease-in-out 0.4s both;
    -moz-animation: kaliningrad 0.2s 1 ease-in-out 0.4s both;
    -o-animation: kaliningrad 0.2s 1 ease-in-out 0.4s both;
}

#severozapad.hover #kalingrad {
    transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    
    animation: kaliningrad 0.2s 1 ease-in-out 0.4s both, path-fade 0.2s 1 ease-in-out both;
    -ms-animation: kaliningrad 0.2s 1 ease-in-out 0.4s both, path-fade 0.2s 1 ease-in-out both;
    -webkit-animation: kaliningrad 0.2s 1 ease-in-out 0.4s both, path-fade 0.2s 1 ease-in-out both;
    -moz-animation: kaliningrad 0.2s 1 ease-in-out 0.4s both, path-fade 0.2s 1 ease-in-out both;
    animation: kaliningrad 0.2s 1 ease-in-out 0.4s -o-both, path-fade 0.2s 1 ease-in-out both;
    
    stroke: none;
}




/*Южный*/
#ugny {
    transform-origin: 33px 440px;
    -ms-transform-origin: 33px 440px;
    -webkit-transform-origin: 33px 440px;
    -moz-transform-origin: 33px 440px;
    -o-transform-origin: 33px 440px;
}

#ugny.hover {
    animation: scale_ugny 0.2s 1 ease-in-out 0.4s both;
    -ms-animation: scale_ugny 0.2s 1 ease-in-out 0.4s both;
    -webkit-animation: scale_ugny 0.2s 1 ease-in-out 0.4s both;
    -moz-animation: scale_ugny 0.2s 1 ease-in-out 0.4s both;
    -o-animation: scale_ugny 0.2s 1 ease-in-out 0.4s both;
}

#ugny.hover a path {
    animation: stroke_ugny 0.2s 1 ease-in-out 0.4s both, path-fade 0.2s 1 ease-in-out both;
    -ms-animation: stroke_ugny 0.2s 1 ease-in-out 0.4s both, path-fade 0.2s 1 ease-in-out both;
    -webkit-animation: stroke_ugny 0.2s 1 ease-in-out 0.4s both, path-fade 0.2s 1 ease-in-out both;
    -moz-animation: stroke_ugny 0.2s 1 ease-in-out 0.4s both, path-fade 0.2s 1 ease-in-out both;
    -o-animation: stroke_ugny 0.2s 1 ease-in-out 0.4s both, path-fade 0.2s 1 ease-in-out both;
}

#map svg > g#ugny.hover g.main {
    transform: scale(1.0);
    -ms-transform: scale(1.0);
    -webkit-transform: scale(1.0);
    -moz-transform: scale(1.0);
    -o-transform: scale(1.0);    
    
    transform-origin: 59px 352px;
    -ms-transform-origin: 59px 352px;
    -webkit-transform-origin: 59px 352px;
    -moz-transform-origin: 59px 352px;
    -o-transform-origin: 59px 352px;
    
    animation: rect-scale3 0.2s 1 ease-in-out 0.4s both;
    -ms-animation: rect-scale3 0.2s 1 ease-in-out 0.4s both;
    -webkit-animation: rect-scale3 0.2s 1 ease-in-out 0.4s both;
    -moz-animation: rect-scale3 0.2s 1 ease-in-out 0.4s both;
    -o-animation: rect-scale3 0.2s 1 ease-in-out 0.4s both;
}

#map svg > g#ugny .hide {
    font-size: 0.38em;
}






/*Приволжье*/

#privolge {
    transform-origin: 150px 360px;
    -ms-transform-origin: 150px 360px;
    -webkit-transform-origin: 150px 360px;
    -moz-transform-origin: 150px 360px;
    -o-transform-origin: 150px 360px;
}

#privolge.hover {
    animation: scale_privolge 0.2s 1 ease-in-out 0.4s both;
    -ms-animation: scale_privolge 0.2s 1 ease-in-out 0.4s both;
    -webkit-animation: scale_privolge 0.2s 1 ease-in-out 0.4s both;
    -moz-animation: scale_privolge 0.2s 1 ease-in-out 0.4s both;
    -o-animation: scale_privolge 0.2s 1 ease-in-out 0.4s both;
}

#privolge.hover a path {
    animation: stroke_privolge 0.2s 1 ease-in-out 0.4s both, path-fade 0.2s 1 ease-in-out both;
    -ms-animation: stroke_privolge 0.2s 1 ease-in-out 0.4s both, path-fade 0.2s 1 ease-in-out both;
    -webkit-animation: stroke_privolge 0.2s 1 ease-in-out 0.4s both, path-fade 0.2s 1 ease-in-out both;
    -moz-animation: stroke_privolge 0.2s 1 ease-in-out 0.4s both, path-fade 0.2s 1 ease-in-out both;
    -o-animation: stroke_privolge 0.2s 1 ease-in-out 0.4s both, path-fade 0.2s 1 ease-in-out both;
}

#map svg > g#privolge.hover g.main {
    transform: scale(1.0);    
    -ms-transform: scale(1.0);
    -webkit-transform: scale(1.0);
    -moz-transform: scale(1.0);
    -o-transform: scale(1.0);
    
    transform-origin: 138px 296px;
    -ms-transform-origin: 138px 296px;
    -webkit-transform-origin: 138px 296px;
    -moz-transform-origin: 138px 296px;
    -o-transform-origin: 138px 296px;
    
    animation: rect-scale4 0.2s 1 ease-in-out 0.4s both;
    -moz-animation: rect-scale4 0.2s 1 ease-in-out 0.4s both;
    -webkit-animation: rect-scale4 0.2s 1 ease-in-out 0.4s both;
    -moz-animation: rect-scale4 0.2s 1 ease-in-out 0.4s both;
    -o-animation: rect-scale4 0.2s 1 ease-in-out 0.4s both;
}

#map svg > g#privolge .hide {
    font-size: 6px;
}






/*Урал*/

#ural {
    transform-origin: 280px 330px;
    -ms-transform-origin: 280px 330px;
    -webkit-transform-origin: 280px 330px;
    -moz-transform-origin: 280px 330px;
    -o-transform-origin: 280px 330px;
}

#ural.hover {
    animation: scale_ural 0.2s 1 ease-in-out 0.4s both;
    -ms-animation: scale_ural 0.2s 1 ease-in-out 0.4s both;
    -webkit-animation: scale_ural 0.2s 1 ease-in-out 0.4s both;
    -moz-animation: scale_ural 0.2s 1 ease-in-out 0.4s both;
    -o-animation: scale_ural 0.2s 1 ease-in-out 0.4s both;

}

#ural.hover a path {
    animation: stroke_ural 0.2s 1 ease-in-out 0.4s both, path-fade 0.2s 1 ease-in-out both;
    -ms-animation: stroke_ural 0.2s 1 ease-in-out 0.4s both, path-fade 0.2s 1 ease-in-out both;
    -webkit-animation: stroke_ural 0.2s 1 ease-in-out 0.4s both, path-fade 0.2s 1 ease-in-out both;
    -moz-animation: stroke_ural 0.2s 1 ease-in-out 0.4s both, path-fade 0.2s 1 ease-in-out both;
    -o-animation: stroke_ural 0.2s 1 ease-in-out 0.4s both, path-fade 0.2s 1 ease-in-out both;
}

#map svg > g#ural.hover g.main {
    transform: scale(1.0);
    -ms-transform: scale(1.0);
    -webkit-transform: scale(1.0);
    -moz-transform: scale(1.0);
    -o-transform: scale(1.0);
    
    transform-origin: 229px 332px;
    -ms-transform-origin: 229px 332px;
    -webkit-transform-origin: 229px 332px;
    -moz-transform-origin: 229px 332px;
    -o-transform-origin: 229px 332px;
    
    animation: rect-scale5 0.2s 1 ease-in-out 0.4s both;
    -ms-animation: rect-scale5 0.2s 1 ease-in-out 0.4s both;
    -webkit-animation: rect-scale5 0.2s 1 ease-in-out 0.4s both;
    -moz-animation: rect-scale5 0.2s 1 ease-in-out 0.4s both;
    -o-animation: rect-scale5 0.2s 1 ease-in-out 0.4s both;
}

#map svg > g#ural .hide {
    font-size: 0.45em;
}




/*Сибирь*/

#sibir {
    transform-origin: 430px 455px;
    -ms-transform-origin: 430px 455px;
    -webkit-transform-origin: 430px 455px;
    -moz-transform-origin: 430px 455px;
    -o-transform-origin: 430px 455px;
}

#sibir.hover {
    animation: scale_sibir 0.2s 1 ease-in-out 0.4s both;
    -ms-animation: scale_sibir 0.2s 1 ease-in-out 0.4s both;
    -webkit-animation: scale_sibir 0.2s 1 ease-in-out 0.4s both;
    -moz-animation: scale_sibir 0.2s 1 ease-in-out 0.4s both;
    -o-animation: scale_sibir 0.2s 1 ease-in-out 0.4s both;
}

#sibir.hover a path {
    animation: stroke_sibir 0.2s 1 ease-in-out 0.4s both, path-fade 0.2s 1 ease-in-out both;
    -ms-animation: stroke_sibir 0.2s 1 ease-in-out 0.4s both, path-fade 0.2s 1 ease-in-out both;
    -webkit-animation: stroke_sibir 0.2s 1 ease-in-out 0.4s both, path-fade 0.2s 1 ease-in-out both;
    -moz-animation: stroke_sibir 0.2s 1 ease-in-out 0.4s both, path-fade 0.2s 1 ease-in-out both;
    -o-animation: stroke_sibir 0.2s 1 ease-in-out 0.4s both, path-fade 0.2s 1 ease-in-out both;
}

#map svg > g#sibir .hide {
    font-size: 10px;
}






/*Дальний восток*/

#map svg > g#dalnevostok.hover path {
    animation: path-fade 0.2s 1 ease-in-out both;
    -ms-animation: path-fade 0.2s 1 ease-in-out both;
    -webkit-animation: path-fade 0.2s 1 ease-in-out both;
    -moz-animation: path-fade 0.2s 1 ease-in-out both;
    -o-animation: path-fade 0.2s 1 ease-in-out both;
}

#map svg > g#dalnevostok.hover g.main {
    transform: scale(1.0);
    -ms-transform: scale(1.0);
    -webkit-transform: scale(1.0);
    -moz-transform: scale(1.0);
    -o-transform: scale(1.0);
    
    transform-origin: 690px 336px;
    -ms-transform-origin: 690px 336px;
    -webkit-transform-origin: 690px 336px;
    -moz-transform-origin: 690px 336px;
    -o-transform-origin: 690px 336px;
    
    animation: rect-scale6 0.2s 1 ease-in-out 0.4s both;
    -ms-animation: rect-scale6 0.2s 1 ease-in-out 0.4s both;
    -webkit-animation: rect-scale6 0.2s 1 ease-in-out 0.4s both;
    -moz-animation: rect-scale6 0.2s 1 ease-in-out 0.4s both;
    -o-animation: rect-scale6 0.2s 1 ease-in-out 0.4s both;
}

#map svg > g#dalnevostok .hide {
    font-size: 14px;
}







/*кейфреймы*/

@keyframes scale_center {

    0% {}

    100% {
        transform: scale(2.8);
        -ms-transform: scale(2.8);
        -webkit-transform: scale(2.8);
        -moz-transform: scale(2.8);
        -o-transform: scale(2.8);
    }

}

@keyframes scale_severozapad {
    0% {}

    100% {
        transform: scale(2.1);
        -ms-transform: scale(2.1);
        -webkit-transform: scale(2.1);
        -moz-transform: scale(2.1);
        -o-transform: scale(2.1);
    }

}


@keyframes scale_ugny {
    0% {}

    100% {
        transform: scale(2.7);
        -ms-transform: scale(2.7);
        -webkit-transform: scale(2.7);
        -moz-transform: scale(2.7);
        -o-transform: scale(2.7);
    }
}

@keyframes scale_privolge {

    0% {}

    100% {
        transform: scale(2.3);
        -ms-transform: scale(2.3);
        -webkit-transform: scale(2.3);
        -moz-transform: scale(2.3);
        -o-transform: scale(2.3);
    }
}

@keyframes scale_ural {

    0% {}

    100% {
        transform: scale(2.2);
        -ms-transform: scale(2.2);
        -webkit-transform: scale(2.2);
        -moz-transform: scale(2.2);
        -o-transform: scale(2.2);
    }

}

@keyframes scale_sibir {

    0% {}

    100% {
        transform: scale(1.4);
        -ms-transform: scale(1.4);
        -webkit-transform: scale(1.4);
        -moz-transform: scale(1.4);
        -o-transform: scale(1.4);
    }

}


@keyframes stroke_center {
    0% {}

    100% {
        stroke-width: 0.020em;
        stroke: #a6d4e0;
    }
}

@keyframes stroke_ugny {
    0% {}

    100% {
        stroke-width: 0.022em;
        stroke: #a6d4e0;
    }
}

@keyframes stroke_privolge {
    0% {}

    100% {
        stroke-width: 0.022em;
        stroke: #a6d4e0;
    }
}

@keyframes stroke_ural {
    0% {}

    100% {
        stroke-width: 0.030em;
        stroke: #a6d4e0;
    }
}

@keyframes stroke_severozapad {
    0% {}

    100% {
        stroke-width: 0.035em;
        stroke: #a6d4e0;
    }
}

@keyframes stroke_sibir {
    0% {}

    100% {
        stroke-width: 0.040em;
        stroke: #a6d4e0;
    }
}

@keyframes text-fade {

    0% {
        opacity: 0;
    }

    100% {

        opacity: 1;
    }
}

@keyframes text-fade2 {

    0% {
        opacity: 0;
    }

    100% {
        opacity: 0.4;
    }

}

@keyframes kaliningrad {

    0% {}

    100% {
        transform: translate(30px, -10px);
        -ms-transform: translate(30px, -10px);
        -webkit-transform: translate(30px, -10px);
        -moz-transform: translate(30px, -10px);
        -o-transform: translate(30px, -10px);
    }
}

@keyframes rect-scale {
    0% {}

    100% {
        transform: scale(0.5);
        -ms-transform: scale(0.5);
        -webkit-transform: scale(0.5);
        -moz-transform: scale(0.5);
        -o-transform: scale(0.5);
    }
}

@keyframes rect-scale2 {
    0% {}

    100% {
        transform: scale(0.66);
        -ms-transform: scale(0.66);
        -webkit-transform: scale(0.66);
        -moz-transform: scale(0.66);
        -o-transform: scale(0.66);
    }
}

@keyframes rect-scale3 {
    0% {}

    100% {
        transform: scale(0.51);
        -ms-transform: scale(0.51);
        -webkit-transform: scale(0.51);
        -moz-transform: scale(0.51);
        -o-transform: scale(0.51);
    }

}

@keyframes rect-scale4 {
    0% {}

    100% {
        transform: scale(0.6);
        -ms-transform: scale(0.6);
        -webkit-transform: scale(0.6);
        -moz-transform: scale(0.6);
        -o-transform: scale(0.6);
    }
}

@keyframes rect-scale5 {
    0% {}

    100% {
        transform: scale(0.65);
        -ms-transform: scale(0.65);
        -webkit-transform: scale(0.65);
        -moz-transform: scale(0.65);
        -o-transform: scale(0.65);
    }
}

@keyframes rect-scale6 {
    0% {}

    100% {
        transform: scale(1.4);
        -ms-transform: scale(1.4);
        -webkit-transform: scale(1.4);
        -moz-transform: scale(1.4);
        -o-transform: scale(1.4);
    }
}

@keyframes font-size-main-sity {

    0% {}

    100% {
        font-size: 7px;
    }
}

@keyframes path-fade {

    0% {}

    100% {
        opacity: 1;
    }

}