/*https://codepen.io/poojanahelia/pen/Exabvdy*/ .pg-footer { font-family: 'Roboto', sans-serif; } .footer { background-color: #004658; color: #fff; } .footer-wave-svg { background-color: transparent; display: block; height: 30px; position: relative; top: -1px; width: 100%; } .footer-wave-path { fill: #fffff2; } .footer-content { margin-left: auto; margin-right: auto; max-width: 1230px; padding: 40px 15px 200px; position: relative; } .footer-content-column { box-sizing: border-box; float: left; padding-left: 15px; padding-right: 15px; width: 100%; color: #fff; } .footer-content-column ul li a { color: #fff; text-decoration: none; } .footer-logo-link { display: inline-block; } .footer-menu { margin-top: 30px; } .footer-menu-name { color: #fffff2; font-size: 15px; font-weight: 900; letter-spacing: .1em; line-height: 18px; margin-bottom: 0; margin-top: 0; text-transform: uppercase; } .footer-menu-list { list-style: none; margin-bottom: 0; margin-top: 10px; padding-left: 0; } .footer-menu-list li { margin-top: 5px; margin-left: 20px; } .footer-social-links { bottom: 0; height: 54px; position: absolute; right: 0; width: 236px; } .footer-social-amoeba-svg { height: 54px; left: 0; display: block; position: absolute; top: 0; width: 236px; } .footer-social-amoeba-path { fill: #027b9a; } .footer-social-link.facebook { height: 26px; width: 26px; left: 3px; top: 11px; } .footer-social-link.instagram { height: 32px; width: 32px; left: 62px; top: 3px; } .footer-social-link { display: block; padding: 10px; position: absolute; } .hidden-link-text { position: absolute; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); -webkit-clip-path: inset(0px 0px 99.9% 99.9%); clip-path: inset(0px 0px 99.9% 99.9%); overflow: hidden; height: 1px; width: 1px; padding: 0; border: 0; top: 50%; } .footer-social-icon-svg { display: block; } .footer-social-icon-path { fill: #fffff2; transition: fill .2s; } .footer-copyright { background-color: #027b9a; color: #fff; padding: 15px 30px; text-align: center; } .footer-copyright-wrapper { margin-left: auto; margin-right: auto; max-width: 1200px; } .footer-copyright-text { color: #fff; font-size: 13px; font-weight: 400; line-height: 18px; margin-bottom: 0; margin-top: 0; } .footer-copyright-link { color: #fff; text-decoration: none; } /* Media Query For different screens */ @media (min-width:320px) and (max-width:479px) { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ .footer-content { margin-left: auto; margin-right: auto; max-width: 1230px; padding: 40px 15px 500px; position: relative; } } @media (min-width:480px) and (max-width:599px) { /* smartphones, Android phones, landscape iPhone */ .footer-content { margin-left: auto; margin-right: auto; max-width: 1230px; padding: 40px 15px 500px; position: relative; } } @media (min-width:600px) and (max-width: 800px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ .footer-content { margin-left: auto; margin-right: auto; max-width: 1230px; padding: 40px 15px 500px; position: relative; } } @media (min-width:801px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ } @media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ } @media (min-width:1281px) { /* hi-res laptops and desktops */ } @media (min-width: 760px) { .footer-content { margin-left: auto; margin-right: auto; max-width: 1230px; padding: 40px 15px 200px; position: relative; } .footer-wave-svg { height: 50px; } .footer-content-column { width: 24.99%; } } @media (min-width: 568px) { /* .footer-content-column { width: 49.99%; } */ }