/*
  footer.css — solo le regole del footer estratte da main.css (Helios by HTML5 UP).
  Tutto è limitato a #footer, quindi non tocca il resto della pagina.
  Richiede anche fontawesome-all.min.css (per le icone social).
*/

:root {
  --footer-font: var(--font-body, "Source Sans Pro", sans-serif); /* per il font originale: "Source Sans Pro", sans-serif */
  --footer-bg: #121721;
}

#footer {
  position: relative;
  overflow: hidden;
  padding: 6em 0;
  background: var(--footer-bg);
  color: #fff;
  font-family: var(--footer-font);
  font-weight: 300;
  font-size: 15pt;
  line-height: 1.85em;
}

#footer .container { margin: 0 auto; max-width: 100%; width: 1400px; }

#footer header { margin: 0 0 1em; text-align: center; cursor: default; }
#footer h2, #footer h3, #footer h4, #footer h5, #footer h6 {
  color: #fff; font-weight: 400; line-height: 1.25em; letter-spacing: normal; margin: 0;
}
#footer h2 { font-size: 2.85em; }
#footer h3 { font-size: 1.25em; }

#footer p { margin: 0 0 1em; }
#footer .contact { text-align: center; }
#footer .contact p { text-align: center; margin: 0 0 3em; }

#footer a {
  color: inherit;
  text-decoration: none;
  border-bottom: solid 1px rgba(128, 128, 128, .15);
  transition: background-color .35s ease-in-out, color .35s ease-in-out, border-bottom-color .35s ease-in-out;
}
#footer a:hover { color: #1c5991; border-bottom-color: transparent; }

#footer ul { list-style: none; padding-left: 0; margin: 0 0 1em; }
#footer li { padding-left: 0; }

/* Icone social */
#footer ul.icons {
  position: relative;
  display: inline-block;
  background: rgba(128, 128, 128, .05);
  border-radius: 4em;
  padding: .35em .75em;
  font-size: 1.25em;
  cursor: default;
}
#footer ul.icons li { display: inline-block; }
#footer ul.icons li a {
  display: inline-block;
  width: 2.5em; height: 2.5em; line-height: 2.5em;
  text-align: center;
  border: 0; border-radius: 100%;
  background: none; color: inherit;
}
#footer ul.icons li a:hover { color: #1c5991; }

#footer .icon { text-decoration: none; }
#footer .icon:before {
  display: inline-block;
  font-style: normal; font-variant: normal; text-rendering: auto;
  line-height: inherit; font-size: 1.25em;
  font-family: "Font Awesome 5 Free"; font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-transform: none !important;
}
#footer .icon > .label { display: none; }
#footer .icon.solid:before { font-weight: 900; }
#footer .icon.brands:before { font-family: "Font Awesome 5 Brands"; }
#footer .icon.circled {
  position: relative; display: inline-block;
  background: #fff; color: #121721;
  border-radius: 100%;
  width: 3em; height: 3em; line-height: 3em;
  text-align: center; font-size: 1.25em;
}
#footer header .icon.circled { margin: 0 0 2em; }

/* Copyright e menu */
#footer .copyright {
  text-align: center;
  color: rgba(128, 128, 128, .75);
  font-size: .8em;
  cursor: default;
}
#footer .copyright a { color: rgba(128, 128, 128, .75); }
#footer .copyright a:hover { color: rgba(212, 212, 212, .85); }

#footer ul.menu { height: 1em; line-height: 1em; }
#footer ul.menu li {
  display: inline-block;
  border-left: solid 1px rgba(128, 128, 128, .2);
  padding-left: 1.25em; margin-left: 1.25em;
}
#footer ul.menu li:first-child { border-left: 0; padding-left: 0; margin-left: 0; }

/* Responsive */
@media screen and (max-width: 1680px) { #footer .container { width: 1200px; } }
@media screen and (max-width: 1280px) {
  #footer .container { width: 960px; }
  #footer { padding-left: 2em; padding-right: 2em; }
}
@media screen and (max-width: 980px)  { #footer .container { width: 100%; } }
@media screen and (max-width: 840px) {
  #footer { font-size: 13pt; line-height: 1.65em; padding: 4em 2em; }
  #footer ul.menu { height: auto; text-align: center; }
  #footer ul.menu li { display: block; border: 0; padding: .75em 0 0; margin: 0; }
  #footer ul.menu li:first-child { padding-top: 0; }
  #footer ul.icons { font-size: 1em; padding: .35em .5em; }
  #footer ul.icons li a { width: 2.25em; }
}
@media screen and (max-width: 480px) { #footer { padding-left: 1em; padding-right: 1em; } }