/*
data-wow-duration: Меняем продолжительность анимации;
data-wow-delay: Задержка перед началом анимации;
data-wow-offset: Расстояние до запуска анимации (относительно нижней части окна браузера);
data-wow-iteration: Повторяем анимацию «столько-то раз».
*/

.spark {
background-color: #DE4A00;
font-family: 'Helvetica', sans-serif;
visibility: hidden;
position: absolute;
width: 4px;
height: 4px;
border-radius: 30%;
box-shadow: 0 0 5px #AB000B;
}
.preloader {
  position: fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:10001; 
  text-align: center;
  background-color: #fff;
}

.preloader-image {
  position:absolute;
  top:50%; 
  left:50%;
  margin-left: -337px; 
  width: 675px;
    height: 259px;
  background-image:url(../images/logo.png);
  background-position:center;
  background-repeat:no-repeat;
  animation: blinking 1s infinite linear;
  -webkit-transition: all 700ms ease-in-out;
  -moz-transition: all 700ms ease-in-out;
  -o-transition: all 700ms ease-in-out;
  transition: all 700ms ease-in-out;
  z-index: 10100;
}
.preloader-image.logo {
    margin-left: -176px; 
    width: 353px;
    height: 90px;
    background-image:url(../images/logo.png);
    z-index: 90;
    top: 90px;
    left: 84.4%;
    animation: none;
}
.preloader-image.logo:hover {
  transform: scale(0.9);
  filter: brightness(120%);
}
.preloader-image.logo a {
    display: block;
    width: 100%;
    height: 100%;
}

@keyframes preloading {
    0% {
    background-image: url('../images/animation/1.png');
    }
    5% {
    background-image: url('../images/animation/2.png');
    }
    10% {
    background-image: url('../images/animation/3.png');
    }
    15% {
    background-image: url('../images/animation/4.png');
    }
    20% {
    background-image: url('../images/animation/5.png');
    }
    25% {
    background-image: url('../images/animation/6.png');
    }
    30% {
    background-image: url('../images/animation/7.png');
    }
    35% {
    background-image: url('../images/animation/8.png');
    }
    40% {
    background-image: url('../images/animation/9.png');
    }
    45% {
    background-image: url('../images/animation/10.png');
    }
    50% {
    background-image: url('../images/animation/11.png');
    }
    55% {
    background-image: url('../images/animation/12.png');
    }
    60% {
    background-image: url('../images/animation/13.png');
    }
    65% {
    background-image: url('../images/animation/14.png');
    }
    70% {
    background-image: url('../images/animation/15.png');
    }
    75% {
    background-image: url('../images/animation/16.png');
    }
    80% {
    background-image: url('../images/animation/17.png');
    }
    85% {
    background-image: url('../images/animation/18.png');
    }
    90% {
    background-image: url('../images/animation/19.png');
    }
    95% {
    background-image: url('../images/animation/20.png');
    }
}
.preload-anim {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    animation: preloading 2000ms infinite linear;
  position: fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:99; 
}
.preload-anim-p {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    animation: preloading 2000ms infinite linear;
    animation-direction: reverse;
  position: fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:99; 
}
/* N‡?°N?N‚??N†N‹ */

.part-green__container {
    display: block;
    width: 60px;
    position: absolute;
    left: 25px;
    top: 50px;
    display: flex;
    justify-content: space-between;
    z-index: 1;
}

.part-green {
    display: block;
    width: 5px;
    height: 5px;
    position: relative;
    pointer-events: none;
}

.part-green:after {
    content: "";
    display: block;
    background: url(../images/part-green.png) no-repeat center;
    width: 34px;
    height: 29px;
    position: absolute;
    left: -10px;
    top: -10px;
    opacity: 0;
    pointer-events: none;
}

.part-green-1:after {
    animation: part-green 4s linear infinite;
}

.part-green-2:after {
    animation: part-green 6s linear infinite;
    animation-delay: .5s;
}

.part-green-3:after {
    animation: part-green 3.5s linear infinite;
    animation-delay: .2s;
}

.part-green-4:after {
    animation: part-green 4.6s linear infinite;
    animation-delay: 2.2s;
}

@keyframes part-green {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-35px);
        opacity: 1;
    }
    100% {
        transform: translateY(-70px) scale(0.7);
    }
}

.part-yellow__container {
    display: block;
    width: 60px;
    position: absolute;
    left: 25px;
    top: 50px;
    display: flex;
    justify-content: space-between;
    z-index: 1;
}

.part-yellow {
    display: block;
    width: 5px;
    height: 5px;
    position: relative;
    pointer-events: none;
}

.part-yellow:after {
    content: "";
    display: block;
    background: url(../images/part-yellow.png) no-repeat center;
    width: 34px;
    height: 29px;
    position: absolute;
    left: -10px;
    top: -10px;
    opacity: 0;
    pointer-events: none;
}

.part-yellow-1:after {
    animation: part-green 6s linear infinite;
}

.part-yellow-2:after {
    animation: part-green 3.5s linear infinite;
    animation-delay: .5s;
}

.part-yellow-3:after {
    animation: part-green 4s linear infinite;
    animation-delay: .2s;
}

.part-yellow-4:after {
    animation: part-green 5s linear infinite;
    animation-delay: 2.2s;
}

@keyframes part-yellow {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-35px);
        opacity: 1;
    }
    100% {
        transform: translateY(-70px) scale(0.7);
    }
}

.part-aqua__container {
    display: block;
    width: 60px;
    position: absolute;
    left: 25px;
    top: 50px;
    display: flex;
    justify-content: space-between;
    z-index: 1;
}

.part-aqua {
    display: block;
    width: 5px;
    height: 5px;
    position: relative;
    pointer-events: none;
}

.part-aqua:after {
    content: "";
    display: block;
    background: url(../images/part-aqua.png) no-repeat center;
    width: 34px;
    height: 29px;
    position: absolute;
    left: -10px;
    top: -10px;
    opacity: 0;
    pointer-events: none;
}

.part-aqua-1:after {
    animation: part-green 6s linear infinite;
}

.part-aqua-2:after {
    animation: part-green 3.5s linear infinite;
    animation-delay: .5s;
}

.part-aqua-3:after {
    animation: part-green 4s linear infinite;
    animation-delay: .2s;
}

.part-aqua-4:after {
    animation: part-green 5s linear infinite;
    animation-delay: 2.2s;
}

@keyframes part-aqua {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-35px);
        opacity: 1;
    }
    100% {
        transform: translateY(-70px) scale(0.7);
    }
}

.part-red__container {
    display: block;
    width: 60px;
    position: absolute;
	top:20px;
    display: flex;
    justify-content: space-between;
    z-index: 1;
}

.part-red {
    display: block;
    width: 5px;
    height: 5px;
    position: relative;
    pointer-events: none;
}

.part-red:after {
    content: "";
    display: block;
    background: url(../images/part-red.png) no-repeat center;
    width: 34px;
    height: 29px;
    position: absolute;
    left: -10px;
    top: -10px;
    opacity: 0;
    pointer-events: none;
}

.part-red-1:after {
    animation: part-green 5s linear infinite;
}

.part-red-2:after {
    animation: part-green 4.5s linear infinite;
    animation-delay: .5s;
}

.part-red-3:after {
    animation: part-green 3s linear infinite;
    animation-delay: .2s;
}

.part-red-4:after {
    animation: part-green 6s linear infinite;
    animation-delay: 2.2s;
}

@keyframes part-red {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-35px);
        opacity: 1;
    }
    100% {
        transform: translateY(-70px) scale(0.7);
    }
}



.part-blue {
    display: block;
    width: 5px;
    height: 5px;
    position: relative;
    pointer-events: none;
}
.part-blue__container {
    display: block;
    width: 60px;
    position: absolute;
    left: 1005px;
    top: 750px;
    display: flex;
    justify-content: space-between;
    z-index: 1;
}
.part-blue:after {
    content: "";
    display: block;
    background: url(../images/part-blue.png) no-repeat center;
    width: 34px;
    height: 29px;
    position: absolute;
    left: -10px;
    top: -10px;
    opacity: 0;
    pointer-events: none;
}

.part-blue-1:after {
    animation: part-green 5s linear infinite;
}

.part-blue-2:after {
    animation: part-green 6s linear infinite;
    animation-delay: .5s;
}

.part-blue-3:after {
    animation: part-green 3.7s linear infinite;
    animation-delay: .2s;
}

.part-blue-4:after {
    animation: part-green 4s linear infinite;
    animation-delay: 2.2s;
}

@keyframes part-blue {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-35px);
        opacity: 1;
    }
    100% {
        transform: translateY(-70px) scale(0.7);
    }
}
@keyframes blinking {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8);
    filter: brightness(120%);
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes rotating {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  30% {
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  70% {
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
    100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    }
}
.gradient {
    width: 100%;
    height: 400px;
    position: fixed;
    background: linear-gradient(to bottom, transparent, white);
    bottom: 0;
    left: 0;
    display: none;
}


@-webkit-keyframes swingsv {
  15% {
    -webkit-transform: translateX(9px);
    transform: translateX(9px);
  }
  30% {
    -webkit-transform: translateX(-9px);
    transform: translateX(-9px);
  }
  40% {
    -webkit-transform: translateX(6px);
    transform: translateX(6px);
  }
  50% {
    -webkit-transform: translateX(-6px);
    transform: translateX(-6px);
  }
  65% {
    -webkit-transform: translateX(3px);
    transform: translateX(3px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
 
@keyframes swingsv {
  15% {
    -webkit-transform: translateX(9px);
    transform: translateX(9px);
  }
  30% {
    -webkit-transform: translateX(-9px);
    transform: translateX(-9px);
  }
  40% {
    -webkit-transform: translateX(6px);
    transform: translateX(6px);
  }
  50% {
    -webkit-transform: translateX(-6px);
    transform: translateX(-6px);
  }
  65% {
    -webkit-transform: translateX(3px);
    transform: translateX(3px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
 
.swingsv:hover {
  -webkit-animation: swingsv 0.6s ease;
  animation: swingsv 0.6s ease;
   -webkit-animation-iteration-count: 1;
   animation-iteration-count: 1;
}


.parallax-viewport {
    position: relative;     /* relative, absolute, fixed */
    overflow: hidden;
}
.parallax-layer {
    position: absolute;
}

.clear {
    clear: both;
}
.scene {
	text-align: left;
	position: absolute;
	width: 1000px;
	left: 50%;
	margin-left: -500px;
	display: inline-block;
	z-index: 150;

}

.layer {
	line-height: 0;
}
.header_scene,header_scene_center,header_scene_back{
    position: absolute;
}
.footer_parallax {
	height: 50px;
	left: -450px;
	overflow: hidden;
	/*position: relative;
	bottom: 0;*/
	width: 1207px;
    margin-top: -80px;
	pointer-events: none;
}

.header_parallax {
	height: 365px;
	/*left: -450px;*/
	overflow: hidden;
	position: absolute;
	top: 0;
    z-index: 0;
	width: 100%;
	pointer-events: none;
}

.btn-aminate_1 {	animation:  scalesvleft  10s 0s infinite;}
.btn-aminate_2 {	animation:  scalesvleft2  10s 0s infinite;}
.btn-aminate_3 {	animation:  scalesv  10s 0s infinite;}
.btn-aminate_4 {	animation:  scalesv2  10s 0s infinite;}

@keyframes scalesv {
    
  0% {    transform: scale(1);  }
  48% {    transform: scale(1);  }
  50% {    transform: scale(1);
    background: url(../images/status/4.png) no-repeat center center;
    background-size: 100%;  }
  52% {    transform: scale(1);  }
  100% {    transform: scale(1);  }
}
@keyframes scalesv2 {
    
    0% {    transform: scale(1);  }
  48% {    transform: scale(1);  }
  50% {    transform: scale(1);
    background: url(../images/status/2.png) no-repeat center center;
    background-size: 100%;  }
    52% {    transform: scale(1);  }
  100% {    transform: scale(1);  }
}
@keyframes scalesvleft {
    
    0% {    transform: scale(1);  }
  48% {    transform: scale(1);  }
  50% {    transform: scale(1);
    background: url(../images/status/left4.png) no-repeat center center;
    background-size: 100%;  }
  52% {    transform: scale(1);  }
  100% {    transform: scale(1);  }
}
@keyframes scalesvleft2 {
    
0% {    transform: scale(1);  }
  48% {    transform: scale(1);  }
  50% {    transform: scale(1);
    background: url(../images/status/left2.png) no-repeat center center;
    background-size: 100%;  }
  52% {    transform: scale(1);  }
  100% {    transform: scale(1);  }
}

/*progress */
.meter {
	width:220px;
  box-sizing: content-box;
  height: 6px; /* Can be anything */
  position: relative;
  margin: 10px 0 10px 0; /* Just for demo spacing */
  background: #010101;
  border-radius: 5px;
      margin-top: 15px;
    margin-right: 6px;
    float: right;
  padding: 2px;
  box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
}
.meter > span {
  display: block;
  height: 100%;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background-color: rgb(43, 194, 83);
  background-image: linear-gradient(
    center bottom,
    rgb(43, 194, 83) 37%,
    rgb(84, 240, 84) 69%
  );
  box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3),
    inset 0 -2px 6px rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden;
}
.meter > span:after,
.animate > span > span {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%,
    transparent
  );
  z-index: 1;
  background-size: 50px 50px;
  animation: move 2s linear infinite;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  overflow: hidden;
}

.animate > span:after {
  display: none;
}

@keyframes move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 50px 50px;
  }
}

.orange > span {
  background-image: linear-gradient(#FF5C00, #FFC92D);
}

.red > span {
  background-image: linear-gradient(#f0a3a3, #f42323);
}

.nostripes > span > span,
.nostripes > span::after {
  background-image: none;
}


/*progress */