#social { margin: 0 0 28px 0; padding: 28px 0 28px 0; text-align: center; border: 1px solid #333; border-right: 0; border-left: 0; overflow: hidden; height: auto; } #social a { margin: 0 8px 0 8px; padding: 0; width: 20px; height: 20px; background: transparent url(footer_sprite.png) no-repeat; background-position: -38px -94px; display: inline-block; *display: inline; *zoom: 1; } #social .twitter { background-position: -113px -21px; } #social .pinterest { background-position: -59px -73px; } #social .linkedin { background-position: -113px 0; } #social .googleplus { background-position: -38px -73px; } #social .youtube { background-position: -21px -31px; } #social .instagram { background-position: -59px -52px; } #social span { display: none; } #partners { margin: 0 0 18px 0; padding: 0; text-align: center; } #partners img { background-image: url(footer_sprite.png); } #partners .icann img { margin: 0 0 0 20px; width: 51px; height: 52px; background-position: -80px -63px; } #partners .domaining img { margin: 0 14px 5px 21px; width: 112px; height: 30px; background-position: 0 0; } #partners .namepros img { margin: 0 14px 0 20px } #partners .bbb img { margin: 0 18px 0 5px; width: 37px; height: 59px; background-position: 0 -52px; } #copyright { color: #ccc; font-size: 11px; text-align: center; } /* State rules. Describes how modules/layouts look in a particular state. * Active/inactive? Hidden/Expanded? */ #social .facebook:hover { background-position: -59px -94px; } #social .twitter:hover { background-position: 0 -31px; } #social .pinterest:hover { background-position: -38px -52px; } #social .linkedin:hover { background-position: -105px -42px; } #social .googleplus:hover { background-position: -84px -31px; } #social .youtube:hover { background-position: -42px -31px; } #social .instagram:hover { background-position: -63px -31px; } .new-footer-resp { height: 100px; border-top: 1px solid rgba(255, 255, 255, .2); border-bottom: 1px solid rgba(255, 255, 255, .2); margin-top: 36px; overflow: hidden; text-align: center; } .new-footer-resp:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .new-footer-resp .draw-line { display: inline-block; margin: 0 60px; height: 50px; width: 1px; vertical-align: middle; background-color: rgba(255, 255, 255, .2); } .new-footer-resp #social { display: inline-block; margin: 0; padding: 0; vertical-align: middle; } .new-footer-resp #social .wechat { background: none; } .new-footer-resp .wechat .fa-weixin{ font-size: 22px; vertical-align: middle; color: #fff; } .new-footer-resp .wechat .fa-weixin:hover{ color: #abc; } .new-footer-resp #partners { display: inline-block; margin: 0; vertical-align: middle; } .new-footer-resp #partners:before { content: ''; padding-top: 25px; padding-bottom: 25px; padding-right: 50px; margin-left: 50px; border-left: 1px solid rgba(255, 255, 255, .2); font-size: 0; vertical-align: middle; } .new-footer-resp #partners .domaining img { margin-bottom: 0; } .copyright-resp { overflow: hidden; } .copyright-resp p { margin: 0; font-size: 11px; color: #ccc; } .footer-app-link { float: right; } .footer-app-link img{ width: 25px; margin-left: 15px; } .footer-modal img{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } @media screen and (max-width: 768px) { #partners { width: 278px; margin: 0 auto; margin-bottom: 18px; } #partners .icann img { margin: 0 44px; width: 51px; height: 52px; } #partners .namepros img { margin: 11px 10px 11px 9px; width: 120px; height: 30px; } #partners .domaining img { margin: 15px 13px 14px 14px; width: 112px; height: 30px; } #partners .bbb img { margin: 0 51px 0 51px; width: 37px; height: 59px; } } @media (max-width: 1024px) { .new-footer-resp .draw-line { display: none; } .new-footer-resp { height: auto; } .new-footer-resp #social { width: 100%; height: 80px; border-bottom: 1px solid rgba(255, 255, 255, .2); } .new-footer-resp #social:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .new-footer-resp #partners { width: 100%; line-height: 80px; } .new-footer-resp #partners:before { padding: 0; border: 0; margin: 0; } .new-footer-resp #partners .domaining img { margin-top: 0; margin-bottom: 0; } .new-footer-resp #partners .namepros img { margin-top: 0; margin-bottom: 0; } .new-footer-resp #partners .icann img { margin-left: 5px; margin-right: 5px; } .copyright-resp { text-align: center; } .footer-app-link { float: none; margin-bottom: 15px; text-align: center; } } /* Theme rules. Similar to state rules. Useful if supporting multiple themes/skins for * a website. */