.footer { width: 100%; display: flex; justify-content: center; background-color: #262A39; position: relative; margin: 0 0 0 0; } .footer-inner { display: flex; flex-direction: column; align-items: center; justify-content: space-between; width: 1200px; padding: 32px 0; } .cards--community.cards--community--dark { margin: 0; } .cards--community.cards--community--dark .card-inner { background-color: transparent; } .cards--community.cards--community--dark a h4 { color: $colorWhite; } .cards--community.cards--community--dark a p { color: $colorGray; opacity: .7; } .cards--community.cards--community--dark a:hover h4 { opacity: 0.8 } .cards--community--dark .community-icon--join { background-image: url(../img/icon-join-dark.svg); } .cards--community--dark .community-icon--discussion { background-image: url(../img/icon-discussion-dark.svg); } .cards--community--dark .community-icon--contribute { background-image: url(../img/icon-contribute-dark.svg); } .footer-nav { width: 100%; display: flex; align-items: center; justify-content: center; margin: 32px 0 0 0; padding: 32px 0; border-top: 1px solid rgba(255, 255, 255, .1) } .footer-nav li a { padding: 0 12px; color: $colorWhite } .footer-nav li a:hover{ opacity: .8 } .footer-logo-wrap { width: 317px; display: flex; text-align: center; } .footer-logo-wrap__inner { width: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 16px 0 16px 0; } a.footer-logo { display: block; width: 52px; height: 52px; background-size: 52px; background-image: url(../img/footer-logo.svg); } a.footer-logo:hover { opacity: .8; } .footer-address { padding: 20px 0 0 0; opacity: .7; } .footer-table { display: flex; } .footer-table__column { box-sizing: border-box; padding: 32px 74px 64px } .footer-header { color: white; opacity: .5; margin: 0 0 40px 0; } .footer-link { height: 32px; line-height: 32px; margin: 0 0 15px 0; } .footer-link a { display: flex; align-items: center; } .footer-icon { display: inline-block; width: 32px; height: 32px; background-color: rgba(255, 255, 255, 0.1); border-radius: 50%; margin: 0 15px 0 0; background-repeat: no-repeat; background-size: 24px; background-position: center; } .footer-link--fb .footer-icon { background-image: url(../img/icon_fb.svg); } .footer-link--tw .footer-icon { background-image: url(../img/icon_tw.svg); } .footer-link--ri .footer-icon { background-image: url(../img/icon_ri.svg); } .footer-link--gh .footer-icon { background-image: url(../img/icon_gh.svg); } .footer-link--rd .footer-icon { background-image: url(../img/icon_rd.svg); } .footer-link--yt .footer-icon { background-image: url(../img/icon_yt.svg); } .footer-link a { color: white; } .footer-link a:hover { opacity: .8; } .language-switcher { color: white; -webkit-appearance: none; font-size: 16px; line-height: 32px; padding: 0 24px 0 0; background-image: url(../img/new-site/icon_dropdown-white.svg); background-size: 24px; background-repeat: no-repeat; background-position: right center; } .language-switcher:focus { outline: none; } @media (max-width: 1248px) { .footer-inner { width: 100%; padding: 32px 24px; } .footer-logo-wrap { //width: 200px; } } @media (max-width: 960px) { .cards--community.cards--community--dark .card-inner { height: auto; min-height: 180px; } .footer-inner { width: 820px; justify-content: space-around; } } @media (max-width: 800px) { .cards--community.cards--community--dark { margin: 0 auto; max-width: 375px; } .cards--community.cards--community--dark .card-inner { padding: 0 12px; } } @media (max-width: 767px) { .footer { border-top: 0px; } .footer-inner { padding: 40px 0 0 0; flex-direction: column; } .footer-header { margin: 0 0 16px 0; } .footer-table { flex-direction: column; align-items: center; justify-content: center; } .footer-table__column { text-align: center; padding: 16px 16px; } .footer-nav { margin: 0 0 0 0; } .footer-link { text-align: center; height: 24px; line-height: 24px; margin: 0 0 16px 0; } .footer-link a { justify-content: center; text-align: center; } .footer-icon { display: none; } .footer-logo-wrap { width: auto; order: 2 } .footer-logo-wrap__inner { width: 100%; padding: 32px 0 40px 0; align-items: center; text-align: center; } }