:root {
--footer-bg: #1A1A1A;
--footer-text: #FFF;
--footer-link: #868686;
--footer-border: #424242;
--footer-font-primary: Raleway, sans-serif;
--footer-font-secondary: Roboto, sans-serif;
--footer-padding-desktop: 60px;
--footer-padding-tablet: 68px;
--footer-padding-mobile: 40px;
--footer-container-max: 1440px;
--footer-container-padding: 60px;
--footer-container-padding-tablet: 40px;
--footer-container-padding-mobile: 16px;
--footer-gap-large: 120px;
--footer-gap-medium: 40px;
--footer-gap-small: 20px;
--footer-gap-mini: 12px;
--footer-gap-micro: 16px;
--footer-border-width: 1px;
}
.pm.footer {
background: var(--footer-bg);
padding: var(--footer-padding-desktop) 0;
color: var(--footer-text);
font-family: var(--footer-font-primary);
font-size: 17px;
font-weight: 700;
line-height: 125%;
@media (max-width: 767px) {
padding: var(--footer-padding-mobile) 0;
}
a {
color: var(--footer-link);
font-size: 16px;
font-weight: 400;
}
.footer__container {
max-width: var(--footer-container-max);
margin: 0 auto;
padding: 0 var(--footer-container-padding);
@media (max-width: 1360px) {
padding: 0 var(--footer-container-padding-tablet);
}
@media (max-width: 767px) {
padding: 0 var(--footer-container-padding-mobile);
}
}
.widget {
margin: 0;
}
ul {
list-style: none;
margin: 0;
padding: 0;
li {
list-style: none;
margin: 0;
padding: 0;
}
}
.footer__widget {
h3 {
color: var(--footer-text);
font-size: 32px;
font-weight: 700;
}
&.footer__address {
margin-bottom: var(--footer-padding-mobile);
address {
margin: 0;
color: var(--footer-text);
font-family: var(--footer-font-secondary);
font-size: 16px;
font-weight: 400;
line-height: 150%;
a {
color: var(--footer-text);
text-decoration: underline;
&:hover {
text-decoration: none;
}
}
}
}
}
.footer__nav {
.footer__widget {
h3 {
font-size: 16px;
font-weight: 600;
line-height: 125%;
margin: 0 0 var(--footer-gap-small);
}
}
}
.footer__row {
display: flex;
&.footer__row--copyright {
justify-content: space-between;
align-items: center;
padding: 0 var(--footer-container-padding);
max-width: var(--footer-container-max);
margin: 0 auto;
@media (max-width: 1360px) {
padding: 0 var(--footer-container-padding-tablet);
}
@media screen and (max-width: 1240px) {
flex-direction: column;
border-top: var(--footer-border-width) solid var(--footer-border);
padding-top: var(--footer-padding-mobile);
}
@media (max-width: 767px) {
padding: 0 var(--footer-container-padding-mobile);
padding-top: var(--footer-padding-mobile);
}
.footer__col {
order: 2;
&:last-child {
order: 2;
@media screen and (max-width: 1240px) {
order: 1;
}
}
}
}
&.footer__row--menu {
padding: var(--footer-padding-mobile) 0;
margin-bottom: var(--footer-padding-mobile);
border-top: var(--footer-border-width) solid var(--footer-border);
border-bottom: var(--footer-border-width) solid var(--footer-border);
flex-wrap: nowrap;
gap: var(--footer-padding-tablet);
@media screen and (max-width: 1360px) {
gap: 46px;
}
@media screen and (max-width: 1240px) {
flex-wrap: wrap;
gap: var(--footer-padding-mobile);
border-bottom: none;
margin-bottom: 0;
}
.footer__col {
flex: auto;
@media screen and (max-width: 1240px) {
width: calc(50% - var(--footer-padding-mobile));
}
}
}
&.footer__row--address-nav {
gap: var(--footer-gap-large);
@media screen and (max-width: 1240px) {
flex-direction: column;
gap: var(--footer-padding-mobile);
}
.footer__col--2 {
width: 50%;
@media screen and (max-width: 1240px) {
width: 100%;
}
.footer__row--auto {
align-items: center;
}
}
}
.footer__row--auto {
gap: var(--footer-padding-mobile);
@media screen and (max-width: 1240px) {
display: block;
}
}
}
.footer__copyright {
margin-bottom: 0;
@media screen and (max-width: 1240px) {
margin-bottom: 24px;
}
p {
margin: 0;
color: var(--footer-link);
font-family: var(--footer-font-secondary);
font-size: 16px;
font-weight: 400;
line-height: 125%;
@media screen and (max-width: 1240px) {
max-width: 80%;
margin: 0 auto;
text-align: center;
}
@media screen and (max-width: 640px) {
max-width: 100%;
}
}
}
.menu {
li {
margin-bottom: var(--footer-gap-mini);
&:last-child {
margin-bottom: 0;
}
}
}
.footer__col--last {
.menu {
li {
margin-bottom: 24px;
&:last-child {
margin-bottom: 0;
}
a {
color: var(--footer-text);
font-family: var(--footer-font-secondary);
font-weight: 600;
line-height: 125%;
}
}
}
}
.footer__menu {
ul {
li {
margin-bottom: var(--footer-gap-micro);
&:last-child {
margin-bottom: 0;
}
}
}
a {
color: var(--footer-text);
font-size: 17px;
font-weight: 700;
}
}
.footer__main-heading {
margin-bottom: 32px;
h3 {
max-width: 440px;
}
}
}