.footer {
    font-size: 16px;
    padding-top: 32px;
}

.footer__text-blue {
    color: #00b5c7;
}

footer__animation {
    position: relative;
    width: 100%;
    height: 350px;
    overflow: hidden;
    display: block;
}


.skyline > * {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.skyline:after {
    position: absolute;
    z-index: 10;
    bottom: 0;
    content: "";
    width: 100%;
    height: 97px;
    background-color: #f0f0f0;
}

.skyline__back:before {
    position: absolute;
    content: "";
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #f0f0f0;
    right: 100px;
}

.skyline__back > .skyline__slide {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-image: url(/img/skyline-back.svg);
    background-size: contain;
    background-position: bottom center;
}

.skyline__center > .skyline__slide {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-image: url(/img/skyline-center.svg);
    background-size: contain;
    background-position: bottom center;
}

.skyline__front > .skyline__slide {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-image: url(/img/skyline-front.svg);
    background-size: contain;
    background-position: bottom center;
}

.skyline__road > .skyline__slide {
    width: 100%;
    height: 100%;
    max-width: 100%;
    background-repeat: repeat-x;
    background-image: url(/img/skyline-road.svg);
    background-position: bottom center;
    bottom: 55px;
    z-index: 15;
}

    .skyline__road > .skyline__slide:before {
        position: absolute;
        content: "";
        width: 40px;
        height: 80px;
        bottom: 35px;
        left: 660px;
        background-repeat: no-repeat;
        background-image: url(/img/skyline-tree.svg);
        background-size: contain;
    }

.skyline__trees > .skyline__slide {
    width: 100%;
    height: 100%;
    z-index: 30;
}

    .skyline__trees > .skyline__slide:before, .skyline__trees > .skyline__slide:after {
        position: absolute;
        content: "";
        width: 50px;
        height: 100px;
        bottom: -85px;
        background-repeat: no-repeat;
        background-image: url(/img/skyline-tree.svg);
        background-size: contain;
    }

    .skyline__trees > .skyline__slide:before {
        left: 160px;
    }

    .skyline__trees > .skyline__slide:after {
        right: 200px;
    }

.skyline__buzz {
    width: 122px;
    height: 68px;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 40px;
    z-index: 20;
    transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1);
}

    .skyline__buzz > * {
        position: absolute;
        outline: 1px solid transparent;
    }

    .skyline__buzz .front-wheel, .skyline__buzz .rear-wheel {
        width: 26px;
        height: 26px;
    }

    .skyline__buzz .front-wheel {
        animation: rotate-front-wheel .5s linear infinite;
    }

    .skyline__buzz .rear-wheel {
        animation: rotate-rear-wheel .5s linear infinite;
    }

.skyline__ufo {
    z-index: 30;
    display: none;
}

    .skyline__ufo.d-block {
        display: block;
    }

    .skyline__ufo > * {
        position: absolute;
        outline: 1px solid transparent;
        left: 0;
        right: 0;
        margin: 0 auto;
    }

    .skyline__ufo .ufo {
        top: 30px;
    }

    .skyline__ufo .ufo-beam {
        bottom: 0;
    }

.skyline__slide {
    position: absolute;
    min-width: 685px;
    max-width: 1370px;
    max-height: 254px;
    transform: translate(100vw, 0);
    will-change: transform;
}

    .skyline__slide.start {
        left: 0;
        right: 0;
        margin: auto;
        transform: none;
    }



@keyframes rotate-front-wheel {
    0% {
        transform: translate(10px, 46px) rotate(0deg);
    }

    100% {
        transform: translate(10px, 46px) rotate(360deg);
    }
}

@keyframes rotate-rear-wheel {
    0% {
        transform: translate(88px, 46px) rotate(0deg);
    }

    100% {
        transform: translate(88px, 46px) rotate(360deg);
    }
}

@keyframes slide-right-back {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(50vw, 0);
    }
}

@keyframes slide-right-front {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(100vw, 0);
    }
}

.footer__partners .footer__partners--wrapper {
    margin-top: 16px;
    display: flex;
    justify-content: space-between;
}

    .footer__partners .footer__partners--wrapper div {
        display: inline-block;
        vertical-align: top;
    }

.btn-social {
    min-width: 50px;
    font-size: 23px;
    color: #00b5c7;
    padding: 7px 15px;
}

    .btn-social:before, .btn-social:after {
        content: "";
        outline: 1px solid transparent;
        padding: 2px;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        border-radius: 5px;
        transform: scale(1.1) rotateY(-6deg) rotateX(-5deg) translateX(-4%) translateZ(-11px);
        transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
        z-index: 0;
        border: 2px solid #00b5c7;
    }

    .btn-social:before {
        border: 0;
        box-shadow: none;
        background-color: #00b5c7;
        transform: scale(0.1);
        opacity: 0;
    }

    .btn-social:hover {
        color: #fff;
    }

        .btn-social:hover:before {
            transform: scale(1) scale(1.1) rotateY(-6deg) rotateX(-5deg) translateX(-4%) translateZ(-11px);
            opacity: 1;
        }

        .btn-social:hover:after {
            opacity: 0;
        }

.footer__image {
    position: relative;
    width: 100%;
    height: 154px;
    background-repeat: no-repeat;
    background-image: url(/img/background-rotterdam@3x.png);
    background-size: contain;
    background-position: bottom center;
}

    .footer__image:after {
        position: absolute;
        content: "";
        width: 100%;
        height: 42px;
        background-color: #f0f0f0;
        bottom: -42px;
    }

    .footer__image img {
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0);
        width: 106px;
        bottom: -20px;
        image-rendering: -webkit-optimize-contrast;
        z-index: 1;
    }

.footer__animation {
    position: relative;
    width: 100%;
    height: 350px;
    overflow: hidden;
    display: block;
}

.footer__partners {
    margin-top: 40px;
    margin-bottom: 40px;
    text-align: center;
}

    .footer__partners .header {
        text-align: left;
        margin-bottom: 16px;
    }


    .footer__partners img {
        max-height: 80px;
        max-width: 100px;
        margin: 10px 10px;
        filter: grayscale(100%);
        transition: filter 1s cubic-bezier(0.23, 1, 0.32, 1);
        margin-left: 0px;
    }

        .footer__partners img:hover {
            filter: grayscale(0);
        }

.footer__social {
    border-top: 1px solid #e8e8e8;
    padding-top: 20px;
    text-align: center;
    position: relative;
    padding-bottom: 6px;
}

    .footer__social .btn-social {
        margin: 0 5px;
    }

.footer__social__icons {
    margin: 20px 20px 20px 0;
}

.footer__social__row {
    display: block;
    text-align: center;
}


    .footer__social__row > div {
        height: 100%;
    }


.footer__social__icons {
    display: inline-block;
    vertical-align: top;
}

.footer__contact {
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 522px);
    text-align: left;
    margin-top: 15px;
}

    .footer__contact .wrapper div {
        display: inline-block;
    }

        .footer__contact .wrapper div a {
            font-size: 12px;
            text-align: left;
        }

            .footer__contact .wrapper div a:after {
                content: "";
                display: inline-block;
                width: 3px;
                height: 3px;
                background-color: var(--color-primary);
                border-radius: 100%;
                position: relative;
                margin-left: 5px;
                top: -2px;
            }

        .footer__contact .wrapper div:nth-last-of-type(2) a:after {
            display: none;
        }

        .footer__contact .wrapper div:last-child a:after {
            display: none;
        }

        .footer__contact .wrapper div:last-child {
            display: block;
        }

.footer__social__kcr {
    display: inline-block;
    vertical-align: top;
    width: 300px;
    position: relative;
    text-align: right;
}

    .footer__social__kcr img {
        width: 148px;
        height: 85px;
    }

    .footer__social__kcr span {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        display: inline-block;
        left: 0px;
    }


footer .newsletter-wrapper {
    position: absolute;
    width: 620px;
    height: 200px;
    z-index: 10;
    margin: auto;
    left: 0px;
    right: 0px;
}

    footer .newsletter-wrapper:after {
        content: "";
        background-image: url(/img/newsletter.svg);
        background-size: cover;
        background-repeat: no-repeat;
        width: 100%;
        position: absolute;
        bottom: 0px;
        height: 100%;
        background-position-y: bottom;
        right: 0px;
        z-index: -1;
    }


    footer .newsletter-wrapper .title {
        color: #FFF;
        text-align: center;
        font-size: 24px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        margin-top: 44px;
        text-align: left;
        margin-left: 32px;
        margin-right: 32px;
    }

    footer .newsletter-wrapper .sub {
        color: #FFF;
        text-align: center;
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        margin-top: 4px;
        margin-bottom: 16px;
        text-align: left;
        margin-left: 32px;
        margin-right: 32px;
    }

    footer .newsletter-wrapper .btn-link.mobile {
        display: none;
    }

    footer .newsletter-wrapper .btn-link {
        color: #00B5C7;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 24px;
        margin-left: 32px;
        margin-right: 32px;
        width: calc(100% - 64px);
        border-radius: 4px;
        background-color: #FFF;
        height: 48px;
        padding: 0px 16px;
        display: inline-block;
        text-align: center;
        border: none;
        font-family: 'Rubik',sans-serif;
        cursor: pointer;
    }

        footer .newsletter-wrapper .btn-link .icon-right {
            top: 12px;
        }


@media (max-width: 1200px) {
    footer .container {
        max-width: 960px;
        margin: auto;
    }
}

@media (max-width: 990px) {
    footer .container {
        max-width: 720px;
    }

    .footer__partners .header {
        margin-top: 40px;
        margin-bottom: 40px;
        text-align: center;
    }

    .footer__partners .footer__partners--wrapper {
        display: block;
    }

    .footer__social__icons {
        display: block;
        margin: auto;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .footer__contact {
        display: block;
        width: 100%;
        border-bottom: 1px solid #e8e8e8;
    }

    footer .footer__social .container {
        max-width: 100%;
        width: 100%;
    }

    .footer__contact {
        display: block;
        width: 100%;
        border-bottom: 1px solid #e8e8e8;
    }

        .footer__contact .wrapper {
            max-width: 720px;
            margin: auto;
            margin-bottom: 20px;
            width: calc(100% - 48px);
            margin-left: 24px;
            margin-right: 24px;
        }

    .footer__social__kcr {
        width: calc(100% - 48px);
        margin-left: 24px;
        margin-right: 24px;
    }

        .footer__social__kcr span {
            right: 150px;
        }
}


@media (max-width: 648px) {
    footer .newsletter-wrapper {
        width: calc(100% - 48px);
        height: 185px;
    }

        footer .newsletter-wrapper .title {
            font-size: 20px;
            margin-top: 28px;
        }

        footer .newsletter-wrapper .sub {
            font-size: 14px;
            margin-bottom: 8px;
        }

        footer .newsletter-wrapper .btn-link.mobile {
            display: inline-block;
        }

        footer .newsletter-wrapper .btn-link.desktop {
            display: none;
        }
}