/*effect*/
.rotationimage,.rotation>* {
  -webkit-animation: rotationimage 1s infinite linear;
          animation: rotationimage 1s infinite linear;
}

@-webkit-keframes rotationimage {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes rotationimage {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
  .waves {
position:relative;
width: 100%;
height:15vh;
margin-bottom:-7px; /*Fix for safari gap*/
min-height:100px;
max-height:150px;
}
/* Animation */
.parallax > use {
-webkit-animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;
        animation: move-forever 25s cubic-bezier(.55,.5,.45,.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);
}
}
/*Shrinking for mobile*/
@media (max-width: 768px) {
.waves {
      position: absolute;
    top: 46%;
height:40px;
min-height:40px;
}
html{
      height: 100%;
}
}

   .bggradient {
        color:#fff;
  background: -o-linear-gradient(135deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  -webkit-animation: bggradient 15s ease infinite;
          animation: bggradient 15s ease infinite;
}

@-webkit-keyframes bggradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

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