.inner-width { margin: auto; padding: 0 3em; width: calc(960px - 3em); } /* html, body { height: 100%; margin: 0; padding: 0; } body > div { height: calc(100% - 20em); } */ /** * config */ /** * styles */ .page_footer { font-size: 16px; height: 20em; font-family: 'Lato', arial; color: #000; background-color: #f0f0f0; } .page_footer > ul { list-style-type: none; overflow: hidden; } .page_footer > ul > li { float: left; margin: 0; padding: 0 2em 0 0; width: calc(33% - 2em); } .page_footer > ul > li > h4 { margin: 1.25em 0 0.625em 0; line-height: 1.5em; color: #444; } .page_footer > ul > li > h4 > span { font-size: 1.125em; } .page_footer > ul > li > a { display: block; padding: 0.125em 0; color: #000; text-decoration: none; } .page_footer > ul > li > a:hover { color: #246fa2; text-decoration: underline; } .page_footer > ul > li:last-child { float: right; padding: 0; width: 33%; } .page_footer > ul > li:last-child > h4 { margin: 1.25em 0 0.875em 0; } .page_footer > ul > li.page-footer-social > ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; } .page_footer > ul > li.page-footer-social > ul > li { float: left; display: block; margin: 0; padding: 0 1em 0 0; } .page_footer > ul > li.page-footer-social > ul > li > a { display: block; width: 2em; height: 2em; transition: background-color 0.2s; } .page_footer > ul > li.page-footer-social > ul > li > a > svg { width: inherit; height: inherit; } .page_footer > ul > li.page-footer-social > ul > li > a > svg > path { fill: #fff; transition: fill 0.2s; } .page_footer > ul > li.page-footer-social > ul > li:nth-child(1) > a { background-color: #68c; } /* .page_footer > ul > li.page-footer-social > ul > li:nth-child(1) > a:hover > svg > path { fill: #68c; } */ .page_footer > ul > li.page-footer-social > ul > li:nth-child(2) > a { background-color: #4be; } /* .page_footer > ul > li.page-footer-social > ul > li:nth-child(2) > a:hover > svg > path { fill: #4be; } */ .page_footer > ul > li.page-footer-social > ul > li:nth-child(3) > a { background-color: #29c; } /* .page_footer > ul > li.page-footer-social > ul > li:nth-child(3) > a:hover > svg > path { fill: #29c; } */ .page_footer > ul > li.page-footer-social > ul > li:nth-child(4) > a { background-color: #e23; } /* .page_footer > ul > li.page-footer-social > ul > li:nth-child(4) > a:hover > svg > path { fill: #e23; } */ /* .page_footer > ul > li.page-footer-social > ul > li > a:hover { background-color: #fff; } */ .page_footer > ul > li.page-footer-social > div { padding: 1em 0; overflow: hidden; } .page_footer > ul > li.page-footer-social > div > a { float: left; display: inline-block; padding: 0.5em 0.75em; height: 1.5em; line-height: 1.5em; color: #2a7eb8; /*font-weight: 700;*/ text-decoration: none; border: 0.125em solid #2a7eb8; transition: color 0.2s, background-color 0.2s; } .page_footer > ul > li.page-footer-social > div > a:first-child { margin-right: 0.75em; } .page_footer > ul > li.page-footer-social > div > a > svg { width: 1.5em; height: 1.5em; vertical-align: top; } .page_footer > ul > li.page-footer-social > div > a > svg path { fill: #2a7eb8; transition: fill 0.2s; } .page_footer > ul > li.page-footer-social > div > a > span { margin-left: 0.333em; } .page_footer > ul > li.page-footer-social > div > a:hover { color: #fff; background-color: #2a7eb8; } .page_footer > ul > li.page-footer-social > div > a:hover > svg > path { fill: #fff; } .page_footer > ul > li.page-footer-social > p { margin: 0 0 0.75em 0; line-height: 1.25em; } .page_footer > ul > li.page-footer-social > p > a { color: #246fa2; text-decoration: none; } .page_footer > ul > li.page-footer-social > p > a:hover { text-decoration: underline; } .page_footer > div { font-size: 0.75em; text-align: center; } .page_footer > div > a { color: #246fa2; text-decoration: none; } .page_footer > div > a:hover { text-decoration: underline; } /*# sourceMappingURL=page_footer.css.map */