footer {padding:20px 0 100px 0; isolation:isolate; position:relative; overflow:hidden; margin-top:-50px;}
footer::after {content:''; position:absolute; top:0; left:0; width:100%; height:100%; z-index:-1; background-color:var(--neutral-900); background-image:url('../images/background-footer.svg'); background-position:50%; background-size:800px auto; clip-path:polygon(0 0, 100% 30px, 100% 100%, 0 100%);}
footer .logo {text-align:center;}
footer .logo a {display:inline-block;}
footer .logo img {width:100%; max-width:320px;}
footer ul.nav {flex-direction:column; text-align:center; margin-top:40px;}

/* Offset footer with padding added to the section above when it has a background colour - due to angled shape of footer */
.offset-footer {padding-bottom:100px;}

@media (min-width:600px) {
  footer .logo img {text-align:left;}
  footer::after {clip-path:polygon(0 0, 100% 50px, 100% 100%, 0 100%);}
  footer .logo {margin-left:-60px;}
}

@media (min-width:600px) {
  footer ul.nav {text-align:right; align-items:flex-end;}
}

@media (min-width:992px) {
  footer .logo img {max-width:400px;}
  footer::after {background-size:1440px auto;}
}

@media (max-width:599px) {
  footer .col-sm-8 {width:100%;}
  footer .col-sm-4 {width:100%;}
}