.animated-circle > .elementor-container:before {
  animation: rotation 20s infinite linear;
}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

.animated-play-button:hover:before {
  -webkit-animation: animated-play-button-beat 1.5s ease-out infinite;
          animation: animated-play-button-beat 1.5s ease-out infinite;
}
.animated-play-button:hover:after {
  -webkit-animation: animated-play-button-beat 1.5s ease-out 0.4s infinite;
          animation: animated-play-button-beat 1.5s ease-out 0.4s infinite;
}

@-webkit-keyframes animated-play-button-beat {
  0% {
    opacity: 0.8;
    transform: scale(1);
  }
  70% {
    opacity: 0;
    transform: scale(1.4);
  }
  100% {
    opacity: 0;
  }
}
@keyframes animated-play-button-beat {
  0% {
    opacity: 0.8;
    transform: scale(1);
  }
  70% {
    opacity: 0;
    transform: scale(1.4);
  }
  100% {
    opacity: 0;
  }
}

.floating {  
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    margin-left: 30px;
    margin-top: 5px;
}
@keyframes floating {
    from { transform: translate(0,  0px); }
    55%  { transform: translate(0, 15px); }
    to   { transform: translate(0, -0px); }    
}
.floating2 {  
    animation-name: floating;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    margin-left: 30px;
    margin-top: 5px;
}
@keyframes floating2 {
    from { transform: translate(0,  0px); }
    75%  { transform: translate(0, 45px); }
    to   { transform: translate(0, -0px); }    
}

.floating3 {  
    animation: floating3 6s infinite ease-in-out;
    margin-left: 30px;
    margin-top: 5px;
}

@keyframes floating3 {
  50% { transform: translate(0, 15px); }
}

.floating4 {  
    animation: floating4 12s infinite ease-in-out;
    margin-left: 50px;
    margin-top: 5px;
}

@keyframes floating4 {
  25%, 100% { transform: translate(0, 0); }
  50% { transform: translate(0, 15px); }
}

.floating5 {  
  animation: floating5 3s infinite ease-in-out;
  margin-left: 60px;
  margin-top: 5px;
}

@keyframes floating5 {
65% { transform: translate(0, 10px); }
}

.floating6 {  
    animation: floating6 12s infinite ease-in-out;
    margin-left: 30px;
    margin-top: 5px;
}

@keyframes floating6 {
  0% {transform: translate(0, 0);}
  16.66% {transform: translate(0, -15px);}
  33.33%, 100% { transform: translate(0, 0); }
}

.floating7 {  
    animation: floating7 12s infinite ease-in-out;
    margin-left: 50px;
    margin-top: 5px;
}

@keyframes floating7 {
  0%, 33.33% {transform: translate(0, 0);}
  50% { transform: translate(0, -15px); }
  66.64%, 100% { transform: translate(0, 0); }
}

.floating8 {  
  animation: floating8 12s infinite ease-in-out;
  margin-left: 60px;
  margin-top: 5px;
}

@keyframes floating8 {
0%, 66.65% {transform: translate(0, 0);}
80.33% { transform: translate(0, -15px); }
100% {transform: translate(0, 0);}
}

.waves {
  position:relative;
  width: 100%;
  height:15vh;
  margin-bottom:-7px; /*Fix for safari gap*/
  min-height:100px;
  max-height:150px;
}

.flex { /*Flexbox for containers*/
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}
@keyframes move-forever {
  0% {
   transform: translate3d(-90px,0,0);
  }
  100% { 
    transform: translate3d(85px,0,0);
  }
}
/*Shrinking for mobile*/
@media (max-width: 768px) {
  .waves {
    height:40px;
    min-height:40px;
  }
}
.svg-waves {
    width: 100%;
    height: 140px;
}
.svg-waves__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;
}
  
.svg-waves__parallax > use:nth-child(1) {
    -webkit-animation-delay: -2s;
            animation-delay: -2s;
    -webkit-animation-duration: 7s;
            animation-duration: 7s;
    fill: rgba(227, 229, 254, 0.7);
}
  
.svg-waves__parallax > use:nth-child(2) {
    -webkit-animation-delay: -3s;
    animation-delay: -3s;
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
    fill: rgba(227, 229, 254, 0.5);
}

.svg-waves__parallax > use:nth-child(3) {
-webkit-animation-delay: -4s;
		animation-delay: -4s;
-webkit-animation-duration: 13s;
		animation-duration: 13s;
fill: rgba(227, 229, 254, 0.3);
}

.svg-waves__parallax > use:nth-child(4) {
-webkit-animation-delay: -5s;
animation-delay: -5s;
-webkit-animation-duration: 20s;
animation-duration: 20s;
fill: rgba(255, 255, 255, 1);
}
@-webkit-keyframes move-forever {
	0% {
	  transform: translate3d(-90px, 0, 0);
	}
	100% {
	  transform: translate3d(85px, 0, 0);
	}
}

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