.animate {
    animation-name: bubbles;
    animation-timing-function: ease-in;
    animation-iteration-count: infinite;
}

.animate.speed-1 {
    animation-duration: 5s;
    animation-delay: 2s;
}

.animate.speed-2 {
    animation-duration: 6s;
}
    
.animate.speed-3 {
    animation-duration: 7s;
}
    
.animate.speed-4 {
    animation-duration: 8s;
}
    
.animate.speed-5 {
    animation-duration: 9s;
}
    
.animate.speed-6 {
    animation-duration: 10s;
}
    
.animate.speed-7 {
    animation-duration: 11s;
}
    
.animate.speed-8 {
    animation-duration: 12s;
}
    
.animate.speed-9 {
    animation-duration: 13s;
}

@-webkit-keyframes bubbles {
  0% { bottom: -100px; }
  2% { transform: translateX(-5%); }
  4% { transform: translateX(5%); }
  6% { transform: translateX(-5%); }
  8% { transform: translateX(5%); }
  10% { transform: translateX(-5%); }
  12% { transform: translateX(5%); }
  14% { transform: translateX(-5%); }
  16% { transform: translateX(5%); }
  18% { transform: translateX(-5%); }
  20% { bottom: 110%; transform: translateX(5%) }
  100% { bottom: 110%; }
}

@-moz-keyframes bubbles {
  0% { bottom: -100px; }
  2% { transform: translateX(-5%); }
  4% { transform: translateX(5%); }
  6% { transform: translateX(-5%); }
  8% { transform: translateX(5%); }
  10% { transform: translateX(-5%); }
  12% { transform: translateX(5%); }
  14% { transform: translateX(-5%); }
  16% { transform: translateX(5%); }
  18% { transform: translateX(-5%); }
  20% { bottom: 110%; transform: translateX(5%) }
  100% { bottom: 110%; }
}

@-o-keyframes bubbles {
  0% { bottom: -100px; }
  2% { transform: translateX(-5%); }
  4% { transform: translateX(5%); }
  6% { transform: translateX(-5%); }
  8% { transform: translateX(5%); }
  10% { transform: translateX(-5%); }
  12% { transform: translateX(5%); }
  14% { transform: translateX(-5%); }
  16% { transform: translateX(5%); }
  18% { transform: translateX(-5%); }
  20% { bottom: 110%; transform: translateX(5%) }
  100% { bottom: 110%; }
}

@keyframes bubbles {
  0% { bottom: -100px; }
  2% { transform: translateX(-5%); }
  4% { transform: translateX(5%); }
  6% { transform: translateX(-5%); }
  8% { transform: translateX(5%); }
  10% { transform: translateX(-5%); }
  12% { transform: translateX(5%); }
  14% { transform: translateX(-5%); }
  16% { transform: translateX(5%); }
  18% { transform: translateX(-5%); }
  20% { bottom: 110%; transform: translateX(5%) }
  100% { bottom: 110%; }
}

.najezd {
    -webkit-transform: translateY(50%);
    -ms-transform: translateY(50%);
    -o- transform: translateY(50%);
    transform: translateY(50%);
    opacity:0;
    transition: 1s;
}

.najezd.start {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}

.v {
    display: none;
}


.smyk { 
    display: inline-block; opacity: 0; 
}

.smyk img {
    -webkit-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

.smyk.start { 
    -webkit-animation: lightSpeedInRight;
    animation: lightSpeedInRight;
    animation-fill-mode: forwards;
    animation-duration: 1s;
}


.scaleUp {
    -webkit-transition: 0.3s;
    transition: 0.3s;
}


.scaleUp:hover {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}



@-webkit-keyframes lightSpeedInRight{
    0%{-webkit-transform:translateX(2000px); -ms-transform:translateX(2000px); -o-transform:translateX(2000px); transform:translateX(2000px); opacity:0}
    to{-webkit-transform:translateX(0);-ms-transform:translateX(0); -o-transform:translateX(0); transform:translateX(0);opacity: 1;}
}
    
@-ms-keyframes lightSpeedInRight{
    0%{-webkit-transform:translateX(2000px); -ms-transform:translateX(2000px); -o-transform:translateX(2000px); transform:translateX(2000px);  opacity:0}
    to{-webkit-transform:translateX(0);-ms-transform:translateX(0); -o-transform:translateX(0); transform:translateX(0);opacity: 1;}
}
    
@-o-keyframes lightSpeedInRight{
    0%{-webkit-transform:translateX(2000px); -ms-transform:translateX(2000px); -o-transform:translateX(2000px); transform:translateX(2000px); opacity:0}
    to{-webkit-transform:translateX(0);-ms-transform:translateX(0); -o-transform:translateX(0); transform:translateX(0);opacity: 1;}
}
    
@keyframes lightSpeedInRight{
    0%{-webkit-transform:translateX(2000px); -ms-transform:translateX(2000px); -o-transform:translateX(2000px); transform:translateX(2000px); opacity:0}
    to{-webkit-transform:translateX(0);-ms-transform:translateX(0); -o-transform:translateX(0); transform:translateX(0);opacity: 1;}
}

.circle {
    animation-name: levitate;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.circle.right {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
    animation-name: levitate-right;
    animation-duration: 2s;
    animation-delay: 1s;
    animation-iteration-count: infinite;
}

@keyframes levitate {
    25% {-webkit-transform: translateY(10%) rotate(340deg);  transform: translateY(10%) rotate(340deg); }
    75% { -webkit-transform: translateY(-10%) rotate(350deg); transform: translateY(-10%) rotate(350deg); }
    to { -webkit-transform: translateY(0) rotate(345deg); transform: translateY(0) rotate(345deg); }
}

@keyframes levitate-right {
    25% { -webkit-transform: translateY(10%) rotate(10deg); transform: translateY(10%) rotate(10deg); }
    75% { -webkit-transform: translateY(-10%) rotate(20deg); transform: translateY(-10%) rotate(20deg); }
    to { -webkit-transform: translateY(0) rotate(15deg); transform: translateY(0) rotate(15deg); }
}