/* Table of Contents ================================================== # Footer # Alternate # Application # Media Queries */ /* # Footer ================================================== */ .footer-fixed { bottom: 0; left: 0; position: fixed; right: 0; z-index: 1030; } .footer { background: rgba(52,64,68,1); border-top: 2px solid rgba(255,255,255,0.2); box-sizing: border-box; width: 100%; margin-top: 40px; padding: 20px 0; } .footer-brand { float: left; } .footer-brand > a { color: rgba(255,255,255,1); font-size: 30px; text-decoration: none; } .footer-nav { float: right; list-style: none; margin: 10px 0 0 0; padding: 0; } .footer-nav > li { font-size: 10px; float: left; line-height: 10px; margin-left: 10px; } .footer-nav > li:first-child { margin: 0; } .footer-nav > li > a { color: rgba(255,255,255,1); font-weight: 500; text-decoration: none; text-transform: uppercase; } .footer > .footer-nav > li > a.active, .footer > .footer-nav > li > a:active, .footer > .footer-nav > li > a:hover, .footer > .footer-nav > li > a:focus { color: rgba(0,153,255,1); } .footer-footnote { float: left; color: rgba(255,255,255,1); font-size: 10px; line-height: 10px; margin: 8px 0 0 10px; } /* # Alternate ================================================== */ .footer.footer-alt { background: rgba(255,255,255,1); border-top-color: rgba(245,248,250,1); } .footer.footer-alt > .footer-brand > a, .footer.footer-alt > .footer-nav > li > a, .footer.footer-alt > .footer-footnote { color: rgba(136,153,166,1); } /* # Application ================================================== */ .footer.footer-app { width: calc(100% - 280px); } /* # Media Queries ================================================== */ @media only screen and (max-width: 1365px) { .footer.footer-app { width: calc(100% - 250px); } } @media only screen and (max-width: 1199px) { .footer.footer-app { width: calc(100% - 220px); } } @media only screen and (max-width: 959px) { .footer.footer-app { width: 100%; } }