/*
Wave Animation
*/

.bloghash-waves {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    max-height: 100px;
}

.bloghash-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;
}

@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);
    }
}

.bloghash-parallax>use:first-child {
    -webkit-animation-delay: -2s;
    animation-delay: -2s;
    -webkit-animation-duration: 7s;
    animation-duration: 7s;
}

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

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

#colophon .bloghash-waves {
    position: absolute;
    top: auto;
    bottom: 0;
    height: 30%;
    z-index: -1;
}

.bloghash-waves-wrapper {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
}

.bloghash-waves-page {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -5;
    width: 4000px;
    height: 100vh;
    left: -200px;
    -webkit-transform: rotate3d(1,1,1,-20deg);
    transform: rotate3d(1,1,1,-20deg);
}

.bloghash-waves-page .wave {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-animation: slide 15s linear infinite;
    animation: slide 15s linear infinite;
    will-change: transform;
    z-index: 3;
}

.bloghash-waves-page .wave-2 {
    left: -16rem;
    -webkit-animation: swell 15s linear infinite;
    animation: swell 15s linear infinite;
    z-index: -1;
}

.bloghash-waves-page .wave-3 {
    left: -6rem;
}

.bloghash-wave-color {
    fill: #04400c;
}

.bloghash-wave-color2 {
    fill: #1a3c87
}

@keyframes slide {
    0% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px);
    }
    
    100% {
        -webkit-transform: translateX(-1000px);
        transform: translateX(-1000px);
    }
}

@keyframes swell {
    0% {
        -webkit-transform: translate(0px,0px);
        transform: translate(0px,0px);
    }
    
    50% {
        -webkit-transform: translate(-500px,50px);
        transform: translate(-500px,50px);
    }
    100% {
        -webkit-transform: translate(-1000px,0px);
        transform: translate(-1000px,0px);
    }
}