/* Table of Contents ================================================== # Footer # Colors # Media Queries */ /* # Footer ================================================== */ .footer-fixed { bottom: 0; left: 0; position: fixed; right: 0; z-index: 1030; } .footer { background: rgba(255,255,255,1); border-top: 2px solid rgba(245,248,250,1); box-sizing: border-box; width: 100%; margin-top: 40px; padding: 20px 0; } .footer-app { width: calc(100% - 280px); } .footer-brand { float: left; } .footer-brand > a { color: rgba(136,153,166,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(136,153,166,1); font-weight: 500; text-decoration: none; text-transform: uppercase; } .footer-footnote { float: left; color: rgba(136,153,166,1); font-size: 10px; line-height: 10px; margin: 8px 0 0 10px; } /* # Colors ================================================== */ .footer-dark { background: rgba(35,41,55,1); border-color: rgba(0,0,0,0.2); } .footer-dark > .footer-brand > a, .footer-dark > .footer-nav > li > a, .footer-dark > .footer-footnote { color: rgba(255,255,255,1); } .footer-light { background: rgba(245,248,250,1); border-color: rgba(225,232,237,1); } /* # Media Queries ================================================== */ @media only screen and (max-width: 1365px) { .footer-app { width: calc(100% - 250px); } } @media only screen and (max-width: 1199px) { .footer-app { width: calc(100% - 220px); } } @media only screen and (max-width: 959px) { .footer-app { width: 100%; } }