.meta-footer { padding-top: 5.55556rem; padding-bottom: 2rem; background-color: #f2f2f2; } .meta-footer-logo { width: 16.66667rem; height: 2.38889rem; margin-bottom: 0.83333rem; } .meta-footer-logo + p { margin-top: 0; } .meta-footer-logo-text { margin-bottom: 3.33333rem; font-size: 1.22222rem; line-height: 2rem; } .meta-footer-contact-entities { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; } .meta-footer-contact-entity { width: calc(50% - 0.83333rem); margin-top: 1.66667rem; margin-left: 0.83333rem; } .meta-footer-contact-entity .phone, .meta-footer-contact-entity .email { position: relative; margin-left: 1.66667rem; } .meta-footer-contact-entity .phone::before, .meta-footer-contact-entity .email::before { content: ''; position: absolute; left: -1.66667rem; display: block; } .meta-footer-contact-entity .phone::before { content: url(../img/phone-grey.svg); top: 0; width: 0.94444rem; height: 1.11111rem; } .meta-footer-contact-entity .email::before { content: url(../img/mail-grey.svg); top: -2px; width: 1.11111rem; height: 0.77778rem; } .meta-footer-contact-entity:nth-of-type(2n-1) { margin-left: 0; } .meta-footer-contact-entity:nth-of-type(1), .meta-footer-contact-entity:nth-of-type(2) { margin-top: 0; } .meta-footer-contact-entity h3 { font-size: 1rem; font-weight: 700; line-height: 1.55556rem; } .meta-footer-contact-entity h3 + p, .meta-footer-contact-entity p + p { margin-top: 0.55556rem; } .meta-footer-contact-entity a { color: #333333; text-decoration: none; } .meta-footer-contact-entity a:hover { text-decoration: underline; } .meta-footer-contact-call-to-action { position: relative; margin-left: 4.77778rem; } .meta-footer-contact-call-to-action::before { content: ''; position: absolute; left: -4.77778rem; } .meta-footer-contact-call-to-action-phone::before { content: url(../img/phone-loud-grey.svg); top: -0.66667rem; width: 3.44444rem; height: 3.44444rem; } .meta-footer-contact-call-to-action-email::before { content: url(../img/mail-grey.svg); top: -0.11111rem; width: 3.33333rem; height: 2.44444rem; } .meta-footer-contact-call-to-action + .meta-footer-contact-call-to-action { margin-top: 2.5rem; } .meta-footer-contact-call-to-action h3 { font-size: 1rem; font-weight: 300; line-height: 2.22222rem; } .meta-footer-contact-call-to-action a { font-size: 2rem; font-weight: 500; line-height: 2.22222rem; transition: color .3s; } .meta-footer-contact-call-to-action a:hover { color: rgba(51, 51, 51, 0.6); } .meta-footer-slogan { display: flex; width: 100%; margin-top: 3.05556rem; border-top: 1px solid #aaaaaa; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; } .meta-footer-slogan p { padding-top: 2rem; margin-right: 30px; font-size: 1.22222rem; line-height: 1.22222rem; } .meta-footer-slogan a { display: inline-block; padding-top: 2rem; color: #ababab; font-size: 1.94444rem; font-weight: 700; line-height: 1.94444rem; transition: color .5s; } .meta-footer-slogan a:hover { color: #333333; } @media (max-width: 1280px) { .meta-footer-contact-call-to-action-phone::before { width: 2.88889rem; height: 2.88889rem; } .meta-footer-contact-call-to-action-email::before { width: 2.88889rem; height: 2.11111rem; } .meta-footer-contact-call-to-action a { font-size: 1.55556rem; line-height: 1.77778rem; } } @media (max-width: 1024px) { .meta-footer { padding-top: 5rem; padding-bottom: 1.66667rem; } .meta-footer-contact-call-to-action { margin-left: 3.33333rem; } .meta-footer-contact-call-to-action + .meta-footer-contact-call-to-action { margin-top: 1.66667rem; } .meta-footer-contact-call-to-action::before { left: -3.33333rem; width: 2.5rem; height: 2.5rem; } .meta-footer-contact-call-to-action-phone::before { top: 6px; } .meta-footer-contact-call-to-action-email::before { top: 0; } .meta-footer-contact-call-to-action h3 { line-height: 1.55556rem; } .meta-footer-slogan { margin-top: 5rem; } .meta-footer-slogan p, .meta-footer-slogan a { padding-top: 1.66667rem; line-height: 1.55556rem; } } @media (max-width: 960px) { .meta-footer-slogan { flex-wrap: wrap; } } @media (max-width: 560px) { .meta-footer { padding-top: 3.33333rem; padding-bottom: 3.33333rem; } .meta-footer-contact-call-to-action { margin-top: 0.83333rem; } .meta-footer-contact-entity { width: 100%; border-bottom: 1px solid #aaaaaa; } .meta-footer-contact-entity:nth-of-type(1) { border-top: 1px solid #aaaaaa; } .meta-footer-contact-entity + .meta-footer-contact-entity { margin-top: 0; } .meta-footer-contact-entity:nth-of-type(2n) { margin-left: 0; } .meta-footer-contact-entity.opened .meta-footer-contact-entity-head-icon::after { height: 0; } .meta-footer-contact-entity-head { position: relative; display: block; padding-left: 2.5rem; cursor: pointer; transition: background-color .3s; } .meta-footer-contact-entity-head-icon { position: absolute; top: 12px; left: 0; width: 18px; height: 18px; line-height: 1; } .meta-footer-contact-entity-head-icon::before, .meta-footer-contact-entity-head-icon::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #009982; transition: height .3s; } .meta-footer-contact-entity-head-icon::before { width: 18px; height: 4px; } .meta-footer-contact-entity-head-icon::after { width: 4px; height: 18px; } .meta-footer-contact-entity-head h3 { padding: 0.83333rem 0; margin-bottom: 0; } .meta-footer-contact-entity-body { padding: 0.83333rem 0 1.66667rem; } .meta-footer-slogan { margin-top: 0.83333rem; overflow-wrap: break-word; overflow-wrap: anywhere; } } .footer-bottom { height: 3.88889rem; padding: 0; color: #fbfbfb; background-color: #404040; } .footer-bottom .content-wrap { height: 100%; display: flex; } .footer-bottom .content-wrap ul { display: flex; height: 100%; flex-direction: row; align-items: center; } .footer-bottom .content-wrap ul li { position: relative; margin-right: 1.72222rem; } .footer-bottom .content-wrap ul li:not(:nth-last-of-type(1))::after { content: '|'; position: absolute; top: 0; right: -1rem; } .footer-bottom .content-wrap ul a { color: #fbfbfb; transition: color .3s; } .footer-bottom .content-wrap ul a:hover { color: #808080; }