@import url("bootstrap-reboot.min.css");
@import url("bootstrap.min.css");
@import url("bootstrap-grid.min.css");
@import url("fonts.css");
@import url("main.css");
@import url("animate.css");
@import url("nprogress.css");

@media (max-width: 543px) {
}

@media (max-width: 768px) {
    body {font-size: 4vw !important}
    h1, h2{font-size: 5vw  !important}
    {font-size: 5vw  !important}
    p {font-size: 3vw !important}
    #people .label {font-size: .8vw !important;}
    .nav-item, .nav-link{font-size: 2vw !important}
    .col-2 p {font-size: 2.1vw !important}
    #download {width: 15px !important}
    .icon_nav {width: 18vw !important}
    .town_label p {font-size: 2.5vw !important}
    #russia_salute{margin-left: 13%}
    #map_russia{display:none !important}
    #tth {font-size: 3vw !important;}
    .width {width: 30%!important;}
    .create_tech p {font-size: 5vw !important;}
    .training, .training a, #link, #link1 {font-size: 3vw !important;}
     {font-size: 3vw !important;}
    .training span {font-size: 12vw !important;}
    .width-33 {width: 33% !important;}
    #name_div_id {margin-top: 50% !important;}
    .dropdown-menu {font-size: .5rem !important;}
    #place {top: 10px}
    #history_salute {width: 90%; margin: 0 5%;font-size: 3vw !important;}
}

#list {
    font-size: 1.25vw !important;
    margin-top: 20%;
    margin-left: 20%;
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {}

@media (max-width: 992px) {.slick-dots{display: none !important;}}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {.slick-dots{display: block !important;}}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {}

@media (min-width: 1320px) {}

/* Landscape*/

@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2)  and (orientation: landscape)  {

}

/* Portrait*/
@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2)  and (orientation: portrait)  {}

.scale-1-5, .scale-1-025, .scale-1-2 {
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
.scale-1-5:hover {
    transform: scale(1.5);
}
.scale-1-2:hover {
    transform: scale(1.2);
}
.scale-1-025:hover {
    transform: scale(1.025);
}

.fixed {
    position: fixed;
}
.fixed.hidden {
    display: none;
}
progress{
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:2px;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    border:none;
    background:transparent;
    color:#dc3545;
    z-index: 10000;
}
progress::-webkit-progress-bar{
    background:transparent;
    border-radius:5px;
}
progress::-webkit-progress-value{
    background:#dc3545;
    border-radius:5px;
}
progress::-moz-progress-bar{
    background:#dc3545;
    border-radius:5px;
}
.progress-container{
    width:100%;
    background:transparent;
    position:fixed;
    top:0;
    left:0;
    height:2px;
    display:block;
}
.progress-bar{
    background:#dc3545;
    width:0;
    display:block;
    height:inherit;
}

.close {
    position: absolute;
    right: 22px;
    top: 22px;
    width: 32px;
    height: 32px;
    opacity: 0.3;
    z-index: 100000;
}
.close:hover {
    opacity: 1;
}
.close:before, .close:after {
    position: absolute;
    left: 15px;
    content: ' ';
    height: 33px;
    width: 2px;
    background-color: #333;
}
.close:before {
    transform: rotate(45deg);
}
.close:after {
    transform: rotate(-45deg);
}

.red_color {
   color: rgba(182, 19, 23, 1);
}

.city_line {
    background-color: rgba(182, 19, 23, 1);
}

.draw {
    fill:none;
    stroke:#B61216;
    stroke-width:3;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-dasharray: 5, 15;
    stroke-dashoffset: 1000%;
    animation: draw 60s linear forwards;
    animation-iteration-count: infinite;
}

path {
    transition: all 2s ease-in-out;
}

path:hover {
    fill: rgba(255, 255, 255, .9);
    transition: all 2s ease-in-out;
}

@keyframes draw {
    from {
        stroke-dashoffset: 1000;
    }
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes dash {
    from {
        stroke-dashoffset: 200;
    }
    to {
        stroke-dashoffset: 0;
    }
}

.link_wheel:focus {
    border-radius: 50% !important;
}

#link {
    border: 2px solid rgba(109, 109, 109, .75) !important;
    border-radius: 30px;
    font-size: 1.2vw;
    color: rgba(109, 109, 109, .75); !important;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    box-shadow: 0 0 10px rgba(109, 109, 109, 1) !important
}

#link:hover {
    background: rgba(109, 109, 109, 0) !important;
    box-shadow: 0 0 35px rgba(109, 109, 109, 1) !important;
    border: 2px solid rgba(109, 109, 109, 1) !important;
    color: rgba(109, 109, 109, 1);
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

#link1 {
    border: 2px solid rgba(109, 109, 109, .75) !important;
    border-radius: 30px;
    font-size: 1.2vw;
    color: rgba(109, 109, 109, .75); !important;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    box-shadow: 0 0 10px rgba(109, 109, 109, 1) !important
}

#link1:hover {
    background: rgba(109, 109, 109, 0) !important;
    box-shadow: 0 0 35px rgba(109, 109, 109, 1) !important;
    border: 2px solid rgba(109, 109, 109, 1) !important;
    color: rgba(109, 109, 109, 1);
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}


.town {
    stroke-dasharray: 200;
    stroke-width: 1px;
    stroke: rgb(182, 19, 23);
    fill: rgba(182, 19, 23, 0);
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.town:hover {
    stroke-dasharray: 200;
    stroke: rgb(182, 19, 23);
    fill: rgba(255, 255, 255, .7);
    animation: dash .8s linear;
    r:6;
}


.district {
    stroke-dasharray: 200;
    stroke-width: 2px;
    stroke: rgb(182, 19, 23);
    fill: rgba(182, 19, 23, 0);
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.district:hover {
    stroke-dasharray: 200;
    stroke-width: 2px;
    stroke: rgb(182, 19, 23);
    animation: dash .8s linear;
    r:15;
}

#history_salute {
    border: 5px solid rgba(255,255,255, .75);
    color: rgba(255,255,255, .75);
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    border-radius: 30px;
    font-size: 1.2vw;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

#history_salute:hover {
    background: rgba(252, 58, 58, .85);
    box-shadow: 0 0 35px rgba(0,0,0,0.5);
    border: 5px solid rgba(255,255,255, 1);
    color: rgba(255,255,255, 1);
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

#russia_salute {
    border: 5px solid rgba(255,255,255, .75);
    box-sizing: border-box;
    border-radius: 30px;
    font-size: 1.5vw;
    padding: 1% 25% 1% 25%;
    color: rgba(255,255,255, .75);
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    box-shadow: 0 0 10px rgba(0,0,0,0.5)
}

#russia_salute:hover {
    background: rgba(252, 58, 58, .85);
    box-shadow: 0 0 35px rgba(0,0,0,0.5);
    border: 5px solid rgba(255,255,255, 1);
    color: rgba(255,255,255, 1);
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.icon_nav {
    width: 4vw;
    height: auto;
    margin: 1vw;
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(0,0,0,0.5);
}
.icon_nav:hover {
    box-shadow: 0 0 30px rgba(255,255,255, .75)
}

.town_label {
    font-size: 0.75vw;
    color: rgba(255,255,255, .5);
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    cursor: pointer;
}
.town_label p {
    color: rgba(255,255,255, .5);
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    cursor: pointer;
}
.town_label> li:hover p {
    color: rgba(255,255,255, 1);
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.town_label>li:hover .icon_nav {
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    transform: scale(1.2);
    box-shadow: 0 0 30px rgba(255,255,255, .75)
}

#map_russia {
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;

}
#map_moscow {
    opacity : 0;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

#div_salute {
    opacity : 0;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

circle {
    cursor: pointer;
}

/*#solder_bg {*/
    /*background: url("../img/oaAdyXnalYY.jpg") no-repeat 50% 50%;*/
    /*background-position: 50% 0%;*/
    /*background-size: cover;*/
    /*background-attachment: fixed;*/
    /*padding-bottom: 25%;*/
    /*!*min-height: 550px;*!*/
/*}*/


.slick-slide:focus {
    outline: -webkit-focus-ring-color none 5px;
}
button {
    outline: -webkit-focus-ring-color none 5px !important;
}
button::after {
    content: '';
 }

.col-2 {
    font-size: 1.5vw;
}

#tth {
    font-size: 1vw;
    text-align: justify;
    padding: 0 3vw;
    text-indent: 1.5em;
}

.training {
    font-size: 1.3vw;
}

.label {
    font-size: 1.1vw;
}

.st0{
    fill:#FFFFFF;
    fill-opacity:0.8;
}
.st1{
    fill:#FFFFFF;
    stroke:#000000;
    stroke-miterlimit:10;
}
.st3{
    font-size:4px;
    font-weight: 500;
}
.st4{
    fill:none;
}
.st5{
    font-size:10px;
    stroke: rgb(182, 19, 23);
}


.st7{
    fill: #6d6d6d !important;
}
.st8{
    font-size: 12px;

}
.st9{
    fill:none;
    stroke:#6D6D6D;
    stroke-width:1;
}
.st10{
    fill:none;
}

.autoplay button {
    display: none !important;
}

#wehicles .col-2 {
    display: none
}

#people .label {
    font-size: .9vw !important
}