/* -------------------------------------------

Name: 		App Showcase
Author:		Nazar Miller (millerDigitalDesign)
Portfolio:  https://themeforest.net/user/millerdigitaldesign/portfolio?ref=MillerDigitalDesign

p.s. I am available for Freelance hire (UI design, web development). mail: miller.themes@gmail.com

------------------------------------------- */

.jump {
    position: relative;
    -webkit-animation: jump 2s ease-in-out infinite;
    animation: jump 2s ease-in-out infinite;
}

.puls {
    -webkit-animation: puls 3s ease-in-out infinite;
    animation: puls 3s ease-in-out infinite;
}

.bounce {
    -webkit-animation: bounce 4s ease-in-out infinite;
    animation: bounce 4s ease-in-out infinite;
}

.play-rotate {
    -webkit-animation: play-rotate 3s infinite;
    animation: play-rotate 3s infinite;
}

.bg-animation {
    -webkit-animation: bg-animation 25s ease-in-out infinite;
    animation: bg-animation 25s ease-in-out infinite;
}

.float_up_down{
    animation-name: float_up_down; 
    animation-duration: 5s; 
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    
    -webkit-animation-name: float_up_down; 
    -webkit-animation-duration: 5s; 
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    
    -moz-animation-name: float_up_down; 
    -moz-animation-duration: 5s; 
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    
    -ms-animation-name: float_up_down; 
    -ms-animation-duration: 5s; 
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    
    -o-animation-name: float_left_right; 
    -o-animation-duration: 5s; 
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
}

.up_down:hover{
	/*border: 1px dotted red;*/
	-webkit-animation:slideTopDown 1s infinite alternate;
	-moz-animation:slideTopDown 1s infinite alternate;
	-ms-animation:slideTopDown 1s infinite alternate;
	-o-animation:slideTopDown 1s infinite alternate;
	animation:slideTopDown 1s infinite alternate;
}

/* Bob Up Down*/
@-webkit-keyframes float_up_down {
  0% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    opacity: 1;
  }

  50% {
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    opacity: 1;
  }
}

@keyframes float_up_down {
  0% {
    transform: translateY(0px);
    transform: translateY(0px);
    opacity: 1;
  }

  50% {
    transform: translateY(30px);
    transform: translateY(30px);
    opacity: 1;
  }

  100% {
    transform: translateY(0px);
    transform: translateY(0px);
    opacity: 1;
  }
}

@-webkit-keyframes jump {
    0% {
        top: 5px;
    }
    50% {
        top: -5px;
    }
    100% {
       top: 5px;
    }
}

@keyframes jump {
    0% {
        top: 5px;
    }
    50% {
        top: -5px;
    }
    100% {
       top: 5px;
    }
}

@-webkit-keyframes puls {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    25% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
    50% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes puls {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    25% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
    50% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@-webkit-keyframes bounce {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    30% {
        -webkit-transform: translateY(-60px);
        transform: translateY(-60px);
    }

    40% {
        -webkit-transform: translateY(15px);
        transform: translateY(15px);
    }

    50% {
        -webkit-transform: translateY(-12px);
        transform: translateY(-12px);
    }
    60% {
        -webkit-transform: translateY(5px);
        transform: translateY(5px);
    }

    70% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes bounce {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    30% {
        -webkit-transform: translateY(-60px);
        transform: translateY(-60px);
    }

    40% {
        -webkit-transform: translateY(15px);
        transform: translateY(15px);
    }

    50% {
        -webkit-transform: translateY(-12px);
        transform: translateY(-12px);
    }
    60% {
        -webkit-transform: translateY(5px);
        transform: translateY(5px);
    }

    70% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@-webkit-keyframes play-rotate {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }


    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes play-rotate {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }


    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes bg-animation {
    0% {
        background-position: top;
    }

    50% {
        background-position: bottom;
    }
    100% {
        background-position: top;
    }
}

@keyframes bg-animation {
    0% {
        background-position: top;
    }

    50% {
        background-position: bottom;
    }
    100% {
        background-position: top;
    }
}

@-webkit-keyframes slideTopDown {
    0% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0)
    }
    100% {
        -webkit-transform: translateY(-6px);
        -moz-transform: translateY(-6px);
        -ms-transform: translateY(-6px);
        -o-transform: translateY(-6px);
        transform: translateY(-6px)
    }
}

@-moz-keyframes slideTopDown {
    0% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0)
    }
    100% {
        -webkit-transform: translateY(-6px);
        -moz-transform: translateY(-6px);
        -ms-transform: translateY(-6px);
        -o-transform: translateY(-6px);
        transform: translateY(-6px)
    }
}

@-ms-keyframes slideTopDown {
    0% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0)
    }
    100% {
        -webkit-transform: translateY(-6px);
        -moz-transform: translateY(-6px);
        -ms-transform: translateY(-6px);
        -o-transform: translateY(-6px);
        transform: translateY(-6px)
    }
}

@-o-keyframes slideTopDown {
    0% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0)
    }
    100% {
        -webkit-transform: translateY(-6px);
        -moz-transform: translateY(-6px);
        -ms-transform: translateY(-6px);
        -o-transform: translateY(-6px);
        transform: translateY(-6px)
    }
}

@keyframes slideTopDown {
    0% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0)
    }
    100% {
        -webkit-transform: translateY(-6px);
        -moz-transform: translateY(-6px);
        -ms-transform: translateY(-6px);
        -o-transform: translateY(-6px);
        transform: translateY(-6px)
    }
}








.waves {
  position: absolute;
  left:0px;
  bottom:0px;
  width: 100%;
  height: 15vh;
  margin-bottom: -8px;
  min-height: 100px;
  max-height: 150px; }

.waves .content {
  position: relative;
  height: 20vh;
  text-align: center;
  background-color: white; }

/* Animation */
.parallax > use {
  -webkit-animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
          animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite; }

.parallax > use:nth-child(1) {
  -webkit-animation-delay: -2s;
          animation-delay: -2s;
  -webkit-animation-duration: 7s;
          animation-duration: 7s; }

.parallax > use:nth-child(2) {
  -webkit-animation-delay: -3s;
          animation-delay: -3s;
  -webkit-animation-duration: 10s;
          animation-duration: 10s; }

.parallax > use:nth-child(3) {
  -webkit-animation-delay: -4s;
          animation-delay: -4s;
  -webkit-animation-duration: 13s;
          animation-duration: 13s; }

.parallax > use:nth-child(4) {
  -webkit-animation-delay: -5s;
          animation-delay: -5s;
  -webkit-animation-duration: 20s;
          animation-duration: 20s; }

@-webkit-keyframes move-forever {
  0% {
    -webkit-transform: translate3d(-90px, 0, 0);
            transform: translate3d(-90px, 0, 0); }
  100% {
    -webkit-transform: translate3d(85px, 0, 0);
            transform: translate3d(85px, 0, 0); } }

@keyframes move-forever {
  0% {
    -webkit-transform: translate3d(-90px, 0, 0);
            transform: translate3d(-90px, 0, 0); }
  100% {
    -webkit-transform: translate3d(85px, 0, 0);
            transform: translate3d(85px, 0, 0); } }

@-webkit-keyframes move-up-down {
  0% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px); }
  50% {
    -webkit-transform: translateY(-15px);
            transform: translateY(-15px); }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px); } }

@keyframes move-up-down {
  0% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px); }
  50% {
    -webkit-transform: translateY(-15px);
            transform: translateY(-15px); }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px); } }

@media (max-width: 768px) {
  .waves {
    height: 40px;
    min-height: 40px; }
}