﻿.zima.slide-outer {
  width: 100%;
  height: 280px;
  position: relative;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
}
.zima .slide-inner {
  width: 5000px;
  height: 100%;
  position: absolute;
  left: 50%;
  margin-left: -2500px;
  text-align: center;
}
.zima .bg-wrapper {
  position: relative;
  display: inline-block;
}
.zima .marker {
  width: 60px;
  height: 77px;
  background-image: url(../../img/Redesign/Banners/Zima/marker.png);
  position: absolute;
  z-index: 9;
}
.zima .marker:hover .signature {
  display: block;
  z-index: 9999999;
}
.zima .signature {
  padding: 15px 20px;
  display: block;
  width: 220px;
  text-align: left;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.8);
  position: absolute;
  top: 10px;
  left: 55px;
  display: none;
  z-index: 2;
}
.zima .signature a {
  color: black;
  font-size: 14px;
  font-family: Arial, 'sans-serif';
}
.zima .signature:before {
  content: '';
  position: absolute;
  top: 10px;
  right: 100%;
  display: block;
  width: 0;
  height: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 10px solid transparent;
  border-right-color: rgba(255, 255, 255, 0.8);
  z-index: 1;
}
.zima .signature.left {
  right: 55px;
  left: auto;
}
.zima .signature.left:before {
  left: 100%;
  right: auto;
  border: 10px solid transparent;
  border-right-color: transparent;
  border-left-color: rgba(255, 255, 255, 0.8);
}
.zima .data-set-1 {
  width: 277px;
  height: 182px;
  position: absolute;
  top: 0;
  left: 225px;
  background: no-repeat url(../../img/Redesign/Banners/Zima/metro.png);
}
.zima .data-set-1.hover {
  background-image: url(../../img/Redesign/Banners/Zima/metro-h.png);
}
.zima .data-set-1 .marker {
  top: 0px;
  left: 105px;
}
.zima .data-set-2 {
  width: 373px;
  height: 189px;
  position: absolute;
  top: 91px;
  left: 719px;
  background: no-repeat url(../../img/Redesign/Banners/Zima/hill.png);
}
.zima .data-set-2.hover {
  background-image: url(../../img/Redesign/Banners/Zima/hill-h.png);
}
.zima .data-set-2 .marker {
  top: 73px;
  left: 225px;
  z-index: 99;
}
.zima .hill-person {
    position: absolute;
    top: -55px;
    left: 185px;
    width: 150px;
    height: 150px;
    background-image: url('../../img/Redesign/Banners/Zima/hill-person-anim.png');
    background-repeat: no-repeat;
    background-position: 0;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
}
    .zima .hill-person.anim-bg {
        -webkit-animation: none !important;
        -moz-animation: none !important;
        -o-animation: hill-anim-bg 3s infinite linear;
        animation: hill-anim-bg 3s infinite linear;
    }
    .zima .hill-person.anim {
        -webkit-animation: hill-anim 2s infinite linear;
        -moz-animation: hill-anim-moz 2s infinite linear;
        -o-animation: hill-anim 2s infinite linear;
        animation: hill-anim 2s infinite linear;
        background-image: url(../../img/Redesign/Banners/Zima/hill-person.png);
    }
@-webkit-keyframes hill-anim-bg {
  0%,
  49.99999999%,
  75.00000001%,
  100% {
    background-position: 0;
  }
  50%,
  75% {
    background-position: -250px;
  }
}
@keyframes hill-anim-bg {
  0%,
  49.99999999%,
  75.00000001%,
  100% {
    background-position: 0;
  }
  50%,
  75% {
    background-position: -250px;
  }
}
@-webkit-keyframes hill-anim {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    /*background-position: 125px;*/
  }
  49.99999999% {
    /*background-position: 125px;*/
  }
  50% {
    -webkit-transform: translate(-90px, 95px);
    transform: translate(-90px, 95px);
    /*background-position: 0;*/
  }
  100% {
    -webkit-transform: translate(-280px, 210px);
    transform: translate(-280px, 210px);
    /*background-position: 0;*/
  }
}
@keyframes hill-anim {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    /*background-position: 125px;*/
  }
  49.99999999% {
    /*background-position: 125px;*/
  }
  50% {
    -webkit-transform: translate(-90px, 95px);
    transform: translate(-90px, 95px);
    /*background-position: 0;*/
  }
    100% {
        -webkit-transform: translate(-280px, 210px);
        -moz-transform: translate(-280px, 210px);
        -ms-transform: translate(-280px, 210px);
        -o-transform: translate(-280px, 210px);
        transform: translate(-280px, 210px);
        /*background-position: 0;*/
    }
}

@keyframes hill-anim-moz {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    /*background-position: 125px;*/
  }
  49.99999999% {
    /*background-position: 125px;*/
  }
  50% {
    -webkit-transform: translate(-90px, 95px);
    transform: translate(-90px, 95px);
    /*background-position: 0;*/
  }
    100% {
        -webkit-transform: translate(-280px, 210px);
        -moz-transform: translate(-280px, 210px);
        -ms-transform: translate(-280px, 210px);
        -o-transform: translate(-280px, 210px);
        transform: translate(-280px, 210px);
        /*background-position: 0;*/
    }
}

.zima .data-set-3 {
  width: 117px;
  height: 221px;
  position: absolute;
  top: 40px;
  left: 1162px;
  background-image: url(../../img/Redesign/Banners/Zima/monument-anim.png);
}
    .zima .data-set-3.anim-bg {
        -webkit-animation: monument-bg 5s steps(10) infinite;
        -moz-animation: monument-bg 5s steps(10) infinite;
        -o-animation: monument-bg 5s steps(10) infinite;
        animation: monument-bg 5s steps(10) infinite;
    }
.zima .data-set-3.hover {
  background-image: url(../../img/Redesign/Banners/Zima/monument-h.png);
  background-repeat: no-repeat;
}

.zima .data-set-3 .marker {
  top: 105px;
  left: 0px;
}
@-webkit-keyframes monument-bg {
  0%,
  20%,
  100% {
    background-position: 0 0;
  }
  20.00000001% {
    background-position: 0 0;
  }
  40% {
    background-position: -1250px 0;
  }
  40.00000001% {
    background-position: 0 0;
  }
}
@keyframes monument-bg {
  0%,
  20%,
  100% {
    background-position: 0 0;
  }
  20.00000001% {
    background-position: 0 0;
  }
  40% {
    background-position: -1250px 0;
  }
  40.00000001% {
    background-position: 0 0;
  }
}
.zima .data-set-4 {
  width: 304px;
  height: 220px;
  position: absolute;
  top: 7px;
  left: 1287px;
  background: no-repeat url(../../img/Redesign/Banners/Zima/rink.png);
}
.zima .data-set-4.hover {
  background-image: url(../../img/Redesign/Banners/Zima/rink-h.png);
}
.zima .data-set-4 .marker {
  top: 70px;
  left: 170px;
  z-index: 999;
}
@-webkit-keyframes rink-anim {
  0% {
    top: -20px;
    left: 150px;
  }
    40%, 10% {
        -webkit-transform: rotateY(0);
        -moz-transform: rotateY(0);
        -ms-transform: rotateY(0);
        -o-transform: rotateY(0);
        transform: rotateY(0);
    }
  50% {
    left: -10px;
    top: -20px;
  }
    60%, 90% {
        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
        -ms-transform: rotateY(180deg);
        -o-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }
}
@keyframes rink-anim {
  0% {
    top: -20px;
    left: 150px;
  }
    40%, 10% {
        -webkit-transform: rotateY(0);
        -moz-transform: rotateY(0);
        -ms-transform: rotateY(0);
        -o-transform: rotateY(0);
        transform: rotateY(0);
    }
  50% {
    left: -10px;
    top: -20px;
  }
    60%, 90% {
        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
        -ms-transform: rotateY(180deg);
        -o-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }
}
@-webkit-keyframes rink-anim-bg {
    0%, 40%, 100% {
        -webkit-transform: rotateY(0);
        -moz-transform: rotateY(0);
        -ms-transform: rotateY(0);
        -o-transform: rotateY(0);
        transform: rotateY(0);
    }
    20% {
        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
        -ms-transform: rotateY(180deg);
        -o-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }
}
@-moz-keyframes rink-anim-bg {
    0%, 40%, 100% {
        -webkit-transform: rotateY(0);
        -moz-transform: rotateY(0);
        -ms-transform: rotateY(0);
        -o-transform: rotateY(0);
        transform: rotateY(0);
    }
    20% {
        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
        -ms-transform: rotateY(180deg);
        -o-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }
}

@-ms-keyframes rink-anim-bg {
    0%, 40%, 100% {
        -webkit-transform: rotateY(0);
        -moz-transform: rotateY(0);
        -ms-transform: rotateY(0);
        -o-transform: rotateY(0);
        transform: rotateY(0);
    }
    20% {
        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
        -ms-transform: rotateY(180deg);
        -o-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }
}

@keyframes rink-anim-bg {
    0%, 40%, 100% {
        -webkit-transform: rotateY(0);
        -moz-transform: rotateY(0);
        -ms-transform: rotateY(0);
        -o-transform: rotateY(0);
        transform: rotateY(0);
    }
    20% {
        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
        -ms-transform: rotateY(180deg);
        -o-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }
}
.zima .rink-person {
    position: absolute;
    top: -20px;
    left: 150px;
    width: 125px;
    height: 125px;
    background: no-repeat url(../../img/Redesign/Banners/Zima/rink-person.png) top right;
    -webkit-transform: translate(0, 0)rotate(0);
    -ms-transform: translate(0, 0) rotate(0);
    -moz-transform: translate(0, 0) rotate(0);
    -o-transform: translate(0, 0) rotate(0);
    transform: translate(0, 0) rotate(0);
}
    .zima .rink-person.anim-bg {
        -webkit-animation: rink-anim-bg 3s infinite linear;
        -moz-animation: rink-anim-bg 3s infinite linear;
        -o-animation: rink-anim-bg 3s infinite linear;
        animation: rink-anim-bg 3s infinite linear;
    }
    .zima .rink-person.anim {
        -webkit-animation: rink-anim 2s infinite linear;
        -moz-animation: rink-anim 2s infinite linear;
        -o-animation: rink-anim 2s infinite linear;
        animation: rink-anim 2s infinite linear;
    }
.zima .data-set-5 {
  width: 454px;
  height: 262px;
  position: absolute;
  top: 18px;
  left: 1576px;
  background: no-repeat url(../../img/Redesign/Banners/Zima/ski.png);
}
.zima .data-set-5.hover {
  background-image: url(../../img/Redesign/Banners/Zima/ski-h.png);
}
.zima .data-set-5 .marker {
  top: 60px;
  left: 65px;
  z-index: 99;
}
.zima .ski-person {
    position: absolute;
    top: 60px;
    left: -35px;
    width: 125px;
    height: 125px;
    background: no-repeat url(../../img/Redesign/Banners/Zima/ski-person.png) top right;
    -webkit-transform: translate(0, 0) rotate(0);
    -ms-transform: translate(0, 0) rotate(0);
    -moz-transform: translate(0, 0) rotate(0);
    -o-transform: translate(0, 0) rotate(0);
    transform: translate(0, 0) rotate(0);
}
    .zima .ski-person.anim-bg {
        -webkit-animation: ski-anim-bg 4s infinite linear;
        -moz-animation: none !important;
        -o-animation: ski-anim-bg 4s infinite linear;
        animation: ski-anim-bg 4s infinite linear;
    }
    .zima .ski-person.anim {
        -webkit-animation: ski-anim 2s infinite linear;
        -moz-animation: ski-anim-moz 2s infinite linear !important;
        -o-animation: ski-anim 2s infinite linear;
        animation: ski-anim 2s infinite linear;
    }
@-webkit-keyframes ski-anim-bg {
  0%,
  24.99999999%,
  50.00000001%,
  100% {
    background-position: right;
  }
  25%,
  50% {
    background-position: -125px;
  }
}
@keyframes ski-anim-bg {
  0%,
  24.99999999%,
  50.00000001%,
  100% {
    background-position: right;
  }
  25%,
  50% {
    background-position: -125px;
  }
}
@-webkit-keyframes ski-anim {
    0% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    40% {
        -webkit-transform: translate(70px, 100px);
        -moz-transform: translate(70px, 100px);
        -ms-transform: translate(70px, 100px);
        -o-transform: translate(70px, 100px);
        transform: translate(70px, 100px);
    }
    
    100% {
        -webkit-transform: translate(260px, 200px);
        -moz-transform: translate(260px, 200px);
        -ms-transform: translate(260px, 200px);
        -o-transform: translate(260px, 200px);
        transform: translate(260px, 200px);
    }
}
@keyframes ski-anim {
    0% {
        /*-webkit-transform: translate(0, 0);*/
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
        background-position: right;
    }
    15% {
        /*-webkit-transform: translate(25px, 15px);*/
        -moz-transform: translate(25px, 15px);
        -ms-transform: translate(25px, 15px);
        -o-transform: translate(25px, 15px);
        transform: translate(25px, 15px);
        background-position: right;
    }
    15.00000001% {
        /*-webkit-transform: translate(30px, 15px);*/
        -moz-transform: translate(30px, 15px);
        -ms-transform: translate(30px, 15px);
        -o-transform: translate(30px, 15px);
        transform: translate(30px, 15px);
        background-position: left;
    }
    40% {
        /*-webkit-transform: translate(70px, 100px);*/
        -moz-transform: translate(70px, 100px);
        -ms-transform: translate(70px, 100px);
        -o-transform: translate(70px, 100px);
        transform: translate(70px, 100px);
        background-position: left;
    }
  40.00000001% {
    background-position: right;
  }
    100% {
        /*-webkit-transform: translate(260px, 200px);*/
        -moz-transform: translate(260px, 200px);
        -ms-transform: translate(260px, 200px);
        -o-transform: translate(260px, 200px);
        transform: translate(260px, 200px);
        background-position: right;
    }
}

@keyframes ski-anim-moz {
    0% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    15% {
        -webkit-transform: translate(25px, 15px);
        -moz-transform: translate(25px, 15px);
        -ms-transform: translate(25px, 15px);
        -o-transform: translate(25px, 15px);
        transform: translate(25px, 15px);
    }
    15.00000001% {
        -webkit-transform: translate(30px, 15px);
        -moz-transform: translate(30px, 15px);
        -ms-transform: translate(30px, 15px);
        -o-transform: translate(30px, 15px);
        transform: translate(30px, 15px);
    }
    40% {
        -webkit-transform: translate(70px, 100px);
        -moz-transform: translate(70px, 100px);
        -ms-transform: translate(70px, 100px);
        -o-transform: translate(70px, 100px);
        transform: translate(70px, 100px);
    }
  40.00000001% {
  }
    100% {
        -webkit-transform: translate(260px, 200px);
        -moz-transform: translate(260px, 200px);
        -ms-transform: translate(260px, 200px);
        -o-transform: translate(260px, 200px);
        transform: translate(260px, 200px);
    }
}
.zima .data-set-6 {
  width: 192px;
  height: 156px;
  position: absolute;
  top: 70px;
  left: 1833px;
  background: no-repeat url(../../img/Redesign/Banners/Zima/stop.png);
}
.zima .data-set-6.hover {
  background-image: url(../../img/Redesign/Banners/Zima/stop-h.png);
}
.zima .data-set-6 .marker {
  top: -25px;
  left: 15px;
    z-index: 100;
}
.zima .data-set-7 {
  width: 495px;
  height: 255px;
  position: absolute;
  top: 0;
  left: 1904px;
  background: no-repeat url(../../img/Redesign/Banners/Zima/parking.png);
}
.zima .data-set-7.hover {
  background-image: url(../../img/Redesign/Banners/Zima/parking-h.png);
}
.zima .data-set-7 .marker {
  top: 45px;
  left: 290px;
}
.zima .data-set-8 {
  width: 425px;
  height: 246px;
  position: absolute;
  top: 0;
  left: 2136px;
  background: no-repeat url(../../img/Redesign/Banners/Zima/mfc.png);
}
.zima .data-set-8.hover {
  background-image: url(../../img/Redesign/Banners/Zima/mfc-h.png);
}
.zima .data-set-8 .marker {
  top: 70px;
  left: 340px;
}
.zima .data-set-9 {
  width: 59px;
  height: 129px;
  position: absolute;
  top: 0;
  left: 2288px;
  background: no-repeat url(../../img/Redesign/Banners/Zima/parkomat.png);
}
.zima .data-set-9.hover {
  background-image: url(../../img/Redesign/Banners/Zima/parkomat-h.png);
}
.zima .data-set-9 .marker {
  top: -10px;
  left: 2px;
}
