.popup-footer.footer {
    position: absolute;
    padding-top: 0;
    padding-bottom: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

@media (max-width: 767px){
    .footer {
        padding-bottom: 15px;
        padding-top: 100px;
    }
    .footer-bg-waves {
        display: none;
    }
    .footer-bg{
        display:block;
        top:-100px
    }
}



@media (max-width:1250px){
    .footer{padding-top:172px;
    }
    .footer{
        width:100%;
        max-width:none;
        padding-right:40px;
        padding-left:40px;
        box-sizing:border-box
    }
}

.footer {
    position: relative;
    padding-top: 182px;
    padding-bottom: 56px;
    z-index: 1;
    overflow: hidden;
    bottom: 0;
    height: 200px;
}


.footer-bg-waves--item1 {
    background-image: url(../images/marea/wave1.svg);
    width: 4460px;
    height: 110px;
    z-index: 1;
    animation: wave1 14s cubic-bezier(.36,.45,.63,.53) infinite;
}

.footer-bg-waves--item2 {
    background-image: url(../images/marea/wave2.svg);
    width: 6400px;
    height: 90px;
    min-height: 100px;
    z-index: 2;
    animation: wave2 16s infinite;
    animation-timing-function: linear;
}

.footer-bg-waves--item3 {
    background-image: url(../images/marea/wave3.svg);
    width: 7288px;
    height: 80px;
    min-height: 100px;
    z-index: 3;
    animation: wave3 19s infinite;
    animation-timing-function: linear;
}

.footer-bg-waves {
    position: absolute;
    left: 0;
    bottom: 0;
    pointer-events: none;
    background-repeat: repeat-x;
    transform: translate3d(0,0,.01);
    will-change: transform
}


@keyframes wave1{
    0%{transform:translateX(-1115px)}
    100%{transform:translateX(0)}
}

@keyframes wave2{
    0%{transform:translateX(0)}
    100%{transform:translateX(-1600px)}
}

@keyframes wave3{
    0%{transform:translateX(0)}
    100%{transform:translateX(-1822px)}
}