footer { background: #EDEFF5; padding: 45px 0; box-sizing: border-box; } @media all and (max-width: 1600px) and (min-width: 1280px) { footer { padding: 0; } } @media all and (max-width: 767px) { footer { margin-top: 40px; pading: 25px 0; } } footer .tapbar { display: none; } @media all and (max-width: 1279px) { footer .tapbar { display: block; position: fixed; z-index: 999; box-shadow: inset 0px 0.5px 0px rgba(0, 0, 0, 0.2); background: #EDEFF5; padding-bottom: env(safe-area-inset-bottom); bottom: 0; left: 0; right: 0; } footer .tapbar ul { list-style: none; padding: 10px 0; margin: 0; display: flex; justify-content: space-between; } footer .tapbar ul li { width: 25%; } footer .tapbar ul li a { display: block; padding: 0 4px; box-sizing: border-box; } footer .tapbar ul li a svg { height: 24px; display: block; margin: auto; } footer .tapbar ul li a svg path { stroke: #8E94A7; } footer .tapbar ul li a span { display: block; font-weight: 600; font-size: 13px; line-height: 130%; color: #8E94A7; margin-top: 6px; text-align: center; } footer .tapbar ul li a.active span { color: var(--blue); } footer .tapbar ul li a.active svg path { stroke: var(--blue); } } @media all and (max-width: 768px) { footer .tapbar ul li a span { font-size: 10px; line-height: 130%; } } footer .container { display: flex; justify-content: space-between; align-items: flex-start; background: transparent; } @media all and (max-width: 1279px) { footer .container { padding: 0; flex-wrap: wrap; margin-bottom: 50px; padding-bottom: 70px; } } footer .column { width: 270px; box-sizing: border-box; } @media all and (max-width: 1279px) { footer .column { width: 33.333%; } footer .column:last-child { width: 100%; display: flex; flex-wrap: wrap; } footer .column:last-child > div, footer .column:last-child > p { width: 33.333%; margin-top: 35px; padding-right: 30px; box-sizing: border-box; margin-bottom: 0 !important; } } @media all and (max-width: 767px) { footer .column { width: 100%; margin-bottom: 16px; } footer .column:last-child > div, footer .column:last-child > p { width: 100%; margin-top: 15px; padding-right: 0; } } footer .column:not(:last-child) { padding-right: 15px; } footer .column li:not(:last-child) { margin-bottom: 13px; } @media all and (max-width: 767px) { footer .column li:not(:last-child) { margin-bottom: 8px; } } footer .column li a { color: #000; } footer .column p { color: #8E94A7; line-height: 32px; } footer .column a[href^="tel"] { display: inline-block; font-size: 16px; line-height: 32px; color: #000; padding-left: 40px; background: url("/images/icons/icon-phone.svg") no-repeat left center; } @media all and (max-width: 1600px) { footer .column a[href^="tel"] { font-size: 13px; background-size: 24px; padding-left: 37px; } } footer .column a[href^="mailto"] { display: inline-block; font-size: 16px; line-height: 24px; color: #000; padding-left: 40px; background: url("/images/icons/icon-mail.svg") no-repeat left center; } @media all and (max-width: 1600px) { footer .column a[href^="mailto"] { font-size: 13px; background-size: 24px; padding-left: 37px; } } footer .column div:nth-child(1), footer .column div:nth-child(2), footer .column div.socials { margin-bottom: 40px; } @media all and (max-width: 1600px) and (min-width: 1280px) { footer .column div:nth-child(1), footer .column div:nth-child(2), footer .column div.socials { margin-bottom: 20px; } } footer .column div a { line-height: 32px; } @media all and (max-width: 1279px) { footer .column div a { line-height: 1.45; } }