footer{
    background-color: var(--color-black);
    padding: var(--footer-padding) 0;
    color: #ffffff;
    border-top: 2px solid var(--color-gray);
}
.footer-wrapper{
    display: flex;
    flex-direction: column;
    color: #ffffff;
}

.footer-top{
    display: flex;
}

.footer-contact{
    display: flex;
    flex-direction: column;
}
.footer-logo{
    width: 336px;
    max-width: 236px;
}
footer .divider {
    width: 100%;
    height: 2px;
    background-color: var(--color-gray);
}

footer address, footer .copyright{
    font-size: var(--footer-address-font-size);
    font-family: var(--font-primary-regular);
    line-height: var(--footer-address-line-height)
}
footer .footer-column{
    width: 289px;
    max-width: 336px;
    position: relative;
}
footer .footer-column.footer-column-with-logo{
    width: 448px;
    max-width: 448px;
}

.footer-links-title{
    margin-bottom: var(--spacing-l);
}

.footer-body {
    display: flex;
}
.footer-column.footer-pages {
    display: flex;
    flex-direction: column;
}
.footer-column.footer-pages a {
    margin-bottom: 24px;
    color: #ffffff;
   display: flex;
    font-size: var(--navigation-footer-font-size);
    line-height: var(--navigation-footer-line-height);
    font-family: var(--font-primary-regular);
}
ul.social-links {
    display: flex;
    margin-top: var(--spacing-xl);
}
ul.social-links li a{
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 29px;
    height: 32px;
    width: 32px;
    display: block;
    background-color: #ffffff;
    margin-right: 24px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
ul.social-links li a.facebook{
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32.375" height="32.179" viewBox="0 0 32.375 32.179"><path d="M32.937,16.75A16.187,16.187,0,1,0,14.221,32.741V21.429H10.108V16.75h4.112V13.183c0-4.057,2.415-6.3,6.114-6.3a24.912,24.912,0,0,1,3.624.316v3.982H21.917a2.34,2.34,0,0,0-2.638,2.528V16.75h4.489l-.718,4.679H19.279V32.741A16.193,16.193,0,0,0,32.937,16.75Z" transform="translate(-0.563 -0.563)" /></svg>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32.375" height="32.179" viewBox="0 0 32.375 32.179"><path d="M32.937,16.75A16.187,16.187,0,1,0,14.221,32.741V21.429H10.108V16.75h4.112V13.183c0-4.057,2.415-6.3,6.114-6.3a24.912,24.912,0,0,1,3.624.316v3.982H21.917a2.34,2.34,0,0,0-2.638,2.528V16.75h4.489l-.718,4.679H19.279V32.741A16.193,16.193,0,0,0,32.937,16.75Z" transform="translate(-0.563 -0.563)" /></svg>');

}
ul.social-links li a.instagram{
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32.375" height="32.179" viewBox="0 0 32.375 32.179"><path d="M14.627,9.364a7.5,7.5,0,1,0,7.5,7.5A7.488,7.488,0,0,0,14.627,9.364Zm0,12.375A4.876,4.876,0,1,1,19.5,16.863a4.885,4.885,0,0,1-4.876,4.876ZM24.183,9.057a1.749,1.749,0,1,1-1.749-1.749A1.745,1.745,0,0,1,24.183,9.057Zm4.967,1.775A8.657,8.657,0,0,0,26.787,4.7,8.714,8.714,0,0,0,20.658,2.34C18.243,2.2,11,2.2,8.589,2.34A8.7,8.7,0,0,0,2.46,4.7,8.685,8.685,0,0,0,.1,10.826C-.04,13.241-.04,20.479.1,22.894A8.657,8.657,0,0,0,2.46,29.023a8.725,8.725,0,0,0,6.129,2.363c2.415.137,9.654.137,12.069,0a8.657,8.657,0,0,0,6.129-2.363,8.714,8.714,0,0,0,2.363-6.129c.137-2.415.137-9.647,0-12.062ZM26.03,25.486a4.936,4.936,0,0,1-2.781,2.781c-1.926.764-6.494.587-8.622.587s-6.7.17-8.622-.587a4.936,4.936,0,0,1-2.781-2.781c-.764-1.926-.587-6.494-.587-8.622s-.17-6.7.587-8.622A4.936,4.936,0,0,1,6,5.46C7.93,4.7,12.5,4.873,14.627,4.873s6.7-.17,8.622.587A4.936,4.936,0,0,1,26.03,8.241c.764,1.926.587,6.494.587,8.622S26.793,23.567,26.03,25.486Z" transform="translate(0.005 -2.238)" /></svg>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32.375" height="32.179" viewBox="0 0 32.375 32.179"><path d="M14.627,9.364a7.5,7.5,0,1,0,7.5,7.5A7.488,7.488,0,0,0,14.627,9.364Zm0,12.375A4.876,4.876,0,1,1,19.5,16.863a4.885,4.885,0,0,1-4.876,4.876ZM24.183,9.057a1.749,1.749,0,1,1-1.749-1.749A1.745,1.745,0,0,1,24.183,9.057Zm4.967,1.775A8.657,8.657,0,0,0,26.787,4.7,8.714,8.714,0,0,0,20.658,2.34C18.243,2.2,11,2.2,8.589,2.34A8.7,8.7,0,0,0,2.46,4.7,8.685,8.685,0,0,0,.1,10.826C-.04,13.241-.04,20.479.1,22.894A8.657,8.657,0,0,0,2.46,29.023a8.725,8.725,0,0,0,6.129,2.363c2.415.137,9.654.137,12.069,0a8.657,8.657,0,0,0,6.129-2.363,8.714,8.714,0,0,0,2.363-6.129c.137-2.415.137-9.647,0-12.062ZM26.03,25.486a4.936,4.936,0,0,1-2.781,2.781c-1.926.764-6.494.587-8.622.587s-6.7.17-8.622-.587a4.936,4.936,0,0,1-2.781-2.781c-.764-1.926-.587-6.494-.587-8.622s-.17-6.7.587-8.622A4.936,4.936,0,0,1,6,5.46C7.93,4.7,12.5,4.873,14.627,4.873s6.7-.17,8.622.587A4.936,4.936,0,0,1,26.03,8.241c.764,1.926.587,6.494.587,8.622S26.793,23.567,26.03,25.486Z" transform="translate(0.005 -2.238)" /></svg>');
}
ul.social-links li a.twitter{
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32.375" height="32.179" viewBox="0 0 32.375 32.179"><path d="M32.937,16.75A16.187,16.187,0,1,0,14.221,32.741V21.429H10.108V16.75h4.112V13.183c0-4.057,2.415-6.3,6.114-6.3a24.912,24.912,0,0,1,3.624.316v3.982H21.917a2.34,2.34,0,0,0-2.638,2.528V16.75h4.489l-.718,4.679H19.279V32.741A16.193,16.193,0,0,0,32.937,16.75Z" transform="translate(-0.563 -0.563)" /></svg>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32.375" height="32.179" viewBox="0 0 32.375 32.179"><path d="M32.937,16.75A16.187,16.187,0,1,0,14.221,32.741V21.429H10.108V16.75h4.112V13.183c0-4.057,2.415-6.3,6.114-6.3a24.912,24.912,0,0,1,3.624.316v3.982H21.917a2.34,2.34,0,0,0-2.638,2.528V16.75h4.489l-.718,4.679H19.279V32.741A16.193,16.193,0,0,0,32.937,16.75Z" transform="translate(-0.563 -0.563)" /></svg>');
}
ul.social-links li a.linkedin{
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32.375" height="32.179" viewBox="0 0 32.375 32.179"><path d="M27.153,2.25H2.082A2.1,2.1,0,0,0,0,4.358V29.383a2.1,2.1,0,0,0,2.082,2.108H27.153a2.1,2.1,0,0,0,2.089-2.108V4.358A2.1,2.1,0,0,0,27.153,2.25ZM8.838,27.314H4.5V13.359H8.844V27.314ZM6.671,11.453A2.513,2.513,0,1,1,9.184,8.94a2.514,2.514,0,0,1-2.513,2.513ZM25.084,27.314H20.75V20.526c0-1.619-.033-3.7-2.252-3.7-2.258,0-2.6,1.762-2.6,3.583v6.906H11.56V13.359h4.158v1.906h.059a4.565,4.565,0,0,1,4.106-2.252c4.386,0,5.2,2.892,5.2,6.651Z" /></svg>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32.375" height="32.179" viewBox="0 0 32.375 32.179"><path d="M27.153,2.25H2.082A2.1,2.1,0,0,0,0,4.358V29.383a2.1,2.1,0,0,0,2.082,2.108H27.153a2.1,2.1,0,0,0,2.089-2.108V4.358A2.1,2.1,0,0,0,27.153,2.25ZM8.838,27.314H4.5V13.359H8.844V27.314ZM6.671,11.453A2.513,2.513,0,1,1,9.184,8.94a2.514,2.514,0,0,1-2.513,2.513ZM25.084,27.314H20.75V20.526c0-1.619-.033-3.7-2.252-3.7-2.258,0-2.6,1.762-2.6,3.583v6.906H11.56V13.359h4.158v1.906h.059a4.565,4.565,0,0,1,4.106-2.252c4.386,0,5.2,2.892,5.2,6.651Z" /></svg>');
    margin-top: -2px;
}
ul.social-links li a.xing{
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="29.213" height="34.326" viewBox="0 0 29.213 34.326"><defs><clipPath id="a"><rect width="29.213" height="34.326" transform="translate(0 0)" fill="%23fff"/></clipPath></defs><g clip-path="url(%23a)"><path d="M2.661,54.413a.758.758,0,0,0-.675.309.77.77,0,0,0,.028.759l3.347,5.794a.026.026,0,0,1,0,.028L.1,70.587a.766.766,0,0,0,0,.759.729.729,0,0,0,.647.337H5.7a1.513,1.513,0,0,0,1.35-.956l5.344-9.451c-.02-.033-3.4-5.935-3.4-5.935a1.529,1.529,0,0,0-1.378-.928Z" transform="translate(-0.001 -47.634)" fill="%23fff"/><path d="M101.572,0a1.451,1.451,0,0,0-1.325.943S89.581,19.856,89.23,20.478l7.034,12.905a1.548,1.548,0,0,0,1.383.943h4.945a.732.732,0,0,0,.657-.316.773.773,0,0,0-.01-.765L96.26,20.493a.029.029,0,0,1,0-.033L107.221,1.08a.777.777,0,0,0,.01-.764A.734.734,0,0,0,106.573,0Z" transform="translate(-78.114 0)" fill="%23fff"/></g></svg>') ;
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="29.213" height="34.326" viewBox="0 0 29.213 34.326"><defs><clipPath id="a"><rect width="29.213" height="34.326" transform="translate(0 0)" fill="%23fff"/></clipPath></defs><g clip-path="url(%23a)"><path d="M2.661,54.413a.758.758,0,0,0-.675.309.77.77,0,0,0,.028.759l3.347,5.794a.026.026,0,0,1,0,.028L.1,70.587a.766.766,0,0,0,0,.759.729.729,0,0,0,.647.337H5.7a1.513,1.513,0,0,0,1.35-.956l5.344-9.451c-.02-.033-3.4-5.935-3.4-5.935a1.529,1.529,0,0,0-1.378-.928Z" transform="translate(-0.001 -47.634)" fill="%23fff"/><path d="M101.572,0a1.451,1.451,0,0,0-1.325.943S89.581,19.856,89.23,20.478l7.034,12.905a1.548,1.548,0,0,0,1.383.943h4.945a.732.732,0,0,0,.657-.316.773.773,0,0,0-.01-.765L96.26,20.493a.029.029,0,0,1,0-.033L107.221,1.08a.777.777,0,0,0,.01-.764A.734.734,0,0,0,106.573,0Z" transform="translate(-78.114 0)" fill="%23fff"/></g></svg>');
    margin-top: -2px;
}

.copyright p{
    color: #ffffff;
    font-size: 18px;
    line-height: 35px;
}

.footer-pages img{
    align-self: self-start;
    flex-grow: 0;
    flex-shrink: 0;
}

.container.footer-newsletter-wrapper {
    display: flex;
}
.footer-newsletter-headline {
    max-width: 312px;
    margin-right: 136px;
}
.footer-newsletter-form {
    max-width: 100%;
    width: 100%;
}

.shop-methods {
    border-top: 2px solid var(--color-black);
    padding: 36px 0;
}

.shop-methods .container  {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 24px;
    grid-row-gap: 0px;
}
.shop-methods .container h5 {
    margin-bottom: 12px;
}

.shop-delivery-methods { grid-area: 1 / 1 / 2 / 4; }
.shop-payment-methods { grid-area: 1 / 5 / 2 / 13; }

.footer-shop-methods-images-wrapper{
    display: flex;
    flex-wrap: wrap;
}
.footer-shop-methods-images-wrapper img {
    margin: 0 24px 24px 0;
    max-height: 30px;
}
.footer-shop-methods-images-wrapper .payment-no-1 {
    max-width: 116px;
}

.newsletter-form-items.form-group {
    position: relative;
    max-width: 704px;
}
.newsletter-form-items .newsletter-signup-button {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0 24px;
    height: 100%;
}

.newsletter-form-items input{
    padding-right: 156px;
}

@media (max-width: 680px) {

    footer{
        flex-direction: column;
    }

    .footer-body {
        display: flex;
        flex-direction: column;
    }

    footer .footer-column.footer-column-with-logo {
        width: 100%;
        max-width: 100%;
    }

    .footer-logo {
        width: 100%;
        max-width: 400px;
    }

    .footer-columns-wrapper {
        display: flex;
        flex-wrap: wrap;
    }

    footer .footer-column {
        width: 50%;
        max-width: 336px;
        position: relative;
    }


    ul.social-links {
        display: flex;
        margin: 72px 0 0 0;
    }
    .footer-column {
        margin-bottom: 72px;
    }
    .footer-column:last-child{
        margin-bottom: 0;
    }

    .footer-payment-methods{
        margin-bottom: 72px;

    }

    .empty-footer-column{
        display: none;
    }

    .container.footer-newsletter-wrapper {
        display: flex;
        flex-direction: column;
    }
    .footer-newsletter-headline {
        max-width: 100%;
        margin-right: 0;
    }
    .footer-newsletter-form {
        max-width: 100%;
        width: 100%;
    }

    .footer-newsletter-headline h4{
        font-weight: bold;
    }

    .newsletter-form-items.form-group input{
        margin: 24px 0;
    }
    .newsletter-form-items.form-group button {
        width: 100%;
        text-align: center;
        display: flex;
        justify-content: center;
        padding: 12px 0;
        position: unset;
    }

    .checkout-footer .container {
        max-width: var(--normal-container-width) !important;
        margin: 0 auto;
        width: 100%;
    }




}

@media (min-width: 681px) and (max-width: 850px) {

    footer .container, .checkout-footer .container{
        width: calc(100vw - 184px);
    }

    footer{
        max-width: 100vw;
        overflow-x: hidden;
    }

    .footer-newsletter-headline {
        max-width: 312px;
        margin-right: 70px;
    }

    /*footer input{*/
    /*    max-width: 308px !important;*/
    /*}*/

    /*footer button {*/

    /*    padding: 12px 24px !important;*/

    /*}*/

    .footer-newsletter-headline {
        max-width: 312px;
        margin-right: 80px;
    }

    .newsletter-form-items .newsletter-signup-button {
        position: absolute;
        top: 0;
        right: 0;
        padding: 0 24px;
        height: 100%;
    }

}
@media (min-width: 481px) and (max-width: 1450px) {

    footer .container, .shop-methods .container, .checkout-footer .container{
        width: calc(100vw - 184px);
    }

    footer{
        max-width: 100vw;
        overflow-x: hidden;
    }

    footer .footer-column.footer-column-with-logo {
        width: 50%;
        max-width: 328px;
    }

}
@media (min-width: 771px) and (max-width: 1060px) {

    .footer-columns-wrapper{
        display: flex;
        flex-wrap: wrap;
    }

    .footer-columns-wrapper .footer-column{
        max-width: 50%
    }

}

@media (min-width: 1061px) and (max-width: 1450px) {


    .footer-columns-wrapper {
        width: calc(100% - 328px);
        display: flex;
        flex-wrap: wrap;
    }

    .footer-columns-wrapper .footer-column{
        max-width: 30%;
        /*max-width: 286px;*/
    }

}

@media (min-width: 1451px) {


    .footer-columns-wrapper {
        width: calc(100% - 328px);
        display: flex;
        flex-wrap: wrap;
    }

    .footer-columns-wrapper .footer-column{
        width: 30%;
        max-width: 289px;    }

}


@media (max-width: 650px) {


    .shop-methods .container {
        display: flex;
        flex-direction: column;
    }

    .shop-methods .shop-payment-methods{
        margin-top: 12px;
    }



}
@media (min-width: 680px) and (max-width: 1083px) {
    .footer-logo {
        width: 336px;
        max-width: 155px;
    }
}