136 lines
2.8 KiB
CSS
136 lines
2.8 KiB
CSS
/* Outer footer parent container */
|
|
footer {
|
|
text-align: center;
|
|
color:#fff;
|
|
background-color:#183153;
|
|
}
|
|
|
|
/* Desktop footer - inside padding */
|
|
@media (min-width:768px) {
|
|
footer { padding: 4% 8% 2% 8% }
|
|
}
|
|
|
|
/* Mobiles footer - inside padding */
|
|
@media (max-width:767px) {
|
|
footer { padding: 8% 8% 6% 8% }
|
|
}
|
|
|
|
/* Styles for footer background, text, icons and links */
|
|
|
|
footer * { color: #fff }
|
|
|
|
/* Footer headings */
|
|
footer h4 {
|
|
font-family: serif;
|
|
font-weight: normal;
|
|
font-style: italic;
|
|
font-size: calc(26px + (48 - 26) * ((100vw - 320px)/(1600 - 320)));
|
|
margin: 0 auto 16px 0;
|
|
}
|
|
|
|
footer h5 {
|
|
font-family: sans-serif;
|
|
font-weight: normal;
|
|
font-style: italic;
|
|
color: #34cdf1;
|
|
margin: 0 auto 36px auto;
|
|
font-size: calc(20px + (32 - 20) * ((100vw - 320px)/(1600 - 320)));
|
|
}
|
|
|
|
/* Footer text links and icon links */
|
|
footer ul.footer-links,
|
|
footer ul.footer-icons {
|
|
list-style-type: none;
|
|
}
|
|
|
|
footer ul.footer-links {
|
|
margin: 0 auto 48px auto;
|
|
}
|
|
|
|
footer ul.footer-icons {
|
|
margin: 0 auto 48px auto;
|
|
}
|
|
|
|
footer ul.footer-links li,
|
|
footer ul.footer-icons li {
|
|
display: inline-block;
|
|
margin: 0 32px 0 0;
|
|
}
|
|
|
|
footer ul.footer-links li:last-child,
|
|
footer ul.footer-icons li:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
/* Footer text links */
|
|
footer ul.footer-links li a {
|
|
text-decoration: none;
|
|
border-bottom-style: solid;
|
|
border-bottom-width: 2px;
|
|
padding-bottom:2px;
|
|
font-size: calc(17px + (20 - 17) * ((100vw - 320px)/(1600 - 320)));
|
|
color: #fff;
|
|
font-family: sans-serif
|
|
}
|
|
|
|
footer ul.footer-links li a:link,
|
|
footer ul.footer-links li a:visited {
|
|
border-bottom-color: transparent;
|
|
}
|
|
|
|
footer ul.footer-links li a:hover,
|
|
footer ul.footer-links li a:active {
|
|
border-bottom-color: #fff
|
|
}
|
|
|
|
/* Footer icons */
|
|
footer ul.footer-icons li a i {
|
|
text-decoration: none;
|
|
font-size: calc(22px + (28 - 22) * ((100vw - 320px)/(1600 - 320)));
|
|
color: #34cdf1;
|
|
}
|
|
|
|
footer ul.footer-icons li a:hover,
|
|
footer ul.footer-icons li a:active {
|
|
color: #fff
|
|
}
|
|
|
|
/* Privacy and legal link */
|
|
footer p a {
|
|
text-decoration: none;
|
|
border-bottom-style: solid;
|
|
border-bottom-width: 2px;
|
|
padding-bottom:2px;
|
|
font-size: calc(15px + (18 - 15) * ((100vw - 320px)/(1600 - 320)));
|
|
}
|
|
|
|
footer p a:link,
|
|
footer p a:visited {
|
|
border-bottom-color: transparent;
|
|
}
|
|
|
|
footer p a:hover,
|
|
footer p a:active {
|
|
border-bottom-color: #fff
|
|
}
|
|
|
|
footer a.privacy-legal {
|
|
font-family: sans-serif;
|
|
display: inline-block;
|
|
color:#fff;
|
|
text-decoration: none;
|
|
border-bottom-style: solid;
|
|
border-bottom-width: 2px;
|
|
padding-bottom:2px;
|
|
font-size: calc(14px + (17 - 14) * ((100vw - 320px)/(1600 - 320)));
|
|
}
|
|
|
|
footer a.privacy-legal:link,
|
|
footer a.privacy-legal:visited {
|
|
border-bottom-color: transparent;
|
|
}
|
|
|
|
footer a.privacy-legal:active,
|
|
a.privacy-legal:hover {
|
|
border-bottom-color: #fff
|
|
} |