:root {
    --footer: #2B2B2B;
    --footer-text: #F7F7F7;
    --footer-white: #FFF;
    --footer-link: #CCC;

    --copyright: #000;
    --copyright-text: #AAA;
}

footer {
    background-color: var(--footer);
    color: var(--footer-text);
}

/* request */
footer .request > div {
    background-color: var(--lgray);
    color: var(--dgray);
    text-align: center;
    font-size: 22px;
}

/* map */
footer .map > div { background-color: var(--lgray); }

footer .map iframe {
    width: 100%;
/*    aspect-ratio: 3 / 1;*/
}

@media (max-width: 680px) {
    footer .request,
    footer .map {
        margin-bottom: 30px;
        padding: 0;
    }

    footer .request > div { padding: 40px 20px; }

    footer .map > div { padding: 15px 20px; }

    footer .map iframe { height: 350px; }
}

@media (min-width: 680px) {
    footer {
        margin-top: 50px;
        border: 1px solid transparent; /* INFO: fix color and .request margin-top -50px */
    }

    footer .request { margin: -50px auto 30px auto; }

    footer .map { margin: -100px auto 30px auto; }

    footer .request > div,
    footer .map > div {
        border-radius: 20px;
        padding: 40px;
    }

    footer .map iframe { height: 500px; }
}
/* <<<<<< */

/* review us */
footer .review > div:not(:first-child) {
    display: inline-block;
    margin: 0 10px;
}

footer .review a {
    display: inline-block;
    background-color: var(--footer-white);
    border-radius: 5px;
    vertical-align: top;
}

footer .review a:hover { cursor: pointer; } /* TODO: REMOVE */

footer .review a.google,
footer .review a.facebook {
    padding: 9px 20px 0 20px;
    height: 30px;
}

footer .review a.clutch {
    padding: 10px 20px 0 20px;
    height: 29px;
}

footer .review a.trustpilot {
    padding: 5px 20px 6px 15px;
    height: 30px;
}
/* <<<<<< */

/* nav */
footer nav {
    padding: 30px 10px;
    text-align: center;
}

footer nav strong {
    font-weight: 500;
    text-transform: uppercase;
    display: block;
    margin: 10px;
}

footer nav a {
    display: block;
    margin: 0 10px;
    color: var(--footer-link);
    text-decoration: none;
    line-height: 36px;
    transition: color .5s;
}

footer nav a:hover { color: var(--footer-white); }

footer nav > div { padding: 10px; }

@media (min-width: 600px) {
    footer nav > div {
        display: inline-block;
        vertical-align: top;
        box-sizing: border-box;
    }
}

@media (min-width: 600px) and (max-width: 900px) {
    footer nav > div { width: 50%; }
}

@media (min-width: 900px) {
    footer nav > div { width: 25%; }
}
/* <<<<<< */

/* contacts */
footer .contacts {
    text-align: center;
    line-height: 26px;
    margin-bottom: 30px;
}

footer .contacts > div { margin-top: 10px; }

footer .contacts .c32 img:first-child { margin-bottom: 15px; }

footer .contacts a {
    color: var(--footer-white);
    text-decoration: none;
}

footer .contacts a:hover { text-decoration: underline; }

footer .social a.facebook { background-image:url(../svg/footer/social/facebook.svg) }

footer .social a.linkedin { background-image:url(../svg/footer/social/linkedin.svg) }

footer .social a.twitter { background-image:url(../svg/footer/social/twitter.svg) }

footer .social a.behance { background-image:url(../svg/footer/social/behance.svg) }

footer .social a.instagram { background-image:url(../svg/footer/social/instagram.svg) }

footer .social a.pinterest { background-image:url(../svg/footer/social/pinterest.svg) }

footer .social a.clutch { background-image:url(../svg/footer/social/clutch.svg) }

footer .social a {
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid var(--footer-white);
    border-radius: 20px;
    background-size: 12px;
    display: inline-block;
    width: 30px;
    height: 30px;
    margin: 0 5px;
    opacity: .6;

    transition:o pacity .5s ease
}

footer .social a:hover { opacity:1 }
/* <<<<<< */

/* copyright */
footer .copyright {
    font-size: 12px;
    background-color: var(--copyright);
    color: var(--copyright-text);
/*    padding: 15px 0;*/
}

@media (max-width: 480px) {
    footer .copyright {
        text-align: center;
        line-height: 22px;
    }
}

@media (min-width: 480px) {
    footer .copyright > section > div {
        display: inline-block;
        vertical-align: top;
        box-sizing: border-box;
        width: 50%;
    }

    footer .copyright > section > div:last-child { text-align: right; }
}
/* <<<<<< */