/* Screen-reader-only labels (e.g. social icon links). */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Article / news share row (Font Awesome; #social-media in content). */
#content #social-media a.article-share-link
   { display: inline-block; vertical-align: middle; margin-right: 6px;
     color: #303030; font-size: 30px; line-height: 1; text-decoration: none;
     opacity: 0.25; filter: alpha(opacity=25); }
#content #social-media a.article-share-link:hover
   { opacity: 1.0; filter: alpha(opacity=100); }
#content #social-media a.article-share-link > i
   { vertical-align: -0.125em; width: 1.1em; }

/* Footer. */

#footer { font-family: 'Source Sans'; font-weight: 300; font-size: 110%;
          color: #b2b2b2; background-color: #3c3c3c; margin-top: 1em;
          padding: 0.25em 1em 1.5em 1em; line-height: 160%; }

/* Override footer wrapper to be full width */
#footer-wrapper {
  max-width: 100% !important;
  margin: 0 !important;
}


/* General styles. */

#footer p { margin: 0; }
#footer .footertitle { font-size: 120%; color: #f0f0f0; margin: 1em 0 0.25em 0; }
#footer a { color: #b2b2b2; }
#footer a:hover { color: white; }
#footer #legal-stuff a { color: #e0e0e0; }


/* Minor positioning tweaks. */

#footer #footer-sig, #footer #legal-stuff { margin: 1em 0; }
#footer #footer-sig .footertitle { margin-bottom: 0.1em; }


/* Inline social media icons. */

#footer #social a
   { display: inline-block; vertical-align: middle; margin-right: 4px;
     color: #b2b2b2; opacity: 0.40; filter: alpha(opacity=40);
     font-size: 30px; line-height: 1; text-decoration: none; }
#footer #social a:hover
   { color: white; opacity: 1.0; filter: alpha(opacity=100); }
#footer #social .fa-brands { vertical-align: -0.125em; width: 1.1em; }


/* Background image icons. */

#footer .personicon
{ padding-left: 24px; background-position: center left; background-repeat: no-repeat;
  background-image: url(/assets/chan/icons/person-white40.png); background-size: 20px 20px; }

#footer .mapicon
{ padding-left: 24px; background-position: center left; background-repeat: no-repeat;
  background-image: url(/assets/chan/icons/map-pin-white40.png); background-size: 20px 20px; }

#footer .phoneicon
{ padding-left: 24px; background-position: 0% 7%; background-repeat: no-repeat;
  background-image: url(/assets/chan/icons/phone-white40.png); background-size: 20px 20px; }

#footer .informationicon
{ padding-left: 24px; background-position: center left; background-repeat: no-repeat;
  background-image: url(/assets/chan/icons/information-white40.png); background-size: 20px 20px; }

#footer .rssicon
{ padding-left: 24px; background-position: center left; background-repeat: no-repeat;
  background-image: url(/assets/chan/icons/rss-white40.png); background-size: 18px 18px; }


/* Reformatting as flex-box for larger screens. */

@media (min-width: 768px)
   { #footer { font-size: 1.4vw; padding: 0.25em 0 1.5em 0; }
     #footer-cells { display: flex; flex-direction: row; }
     #footer-cells #contact { flex-basis: 30%; padding-left: 2em; }
     #footer-cells #information { flex-basis: 24%; }
     #footer-cells #feeds { flex-basis: 21%; }
     #footer-cells #social { flex-basis: 25%; }
     #footer #social a { font-size: 2.5vw; margin-right: 0.25vw * 0.75; }
     #footer #footer-sig, #footer #legal-stuff { padding-left: 2em; }

     #footer .personicon { padding-left: 2vw; background-size: 1.6vw 1.6vw; }
     #footer .mapicon { padding-left: 2vw; background-size: 1.6vw 1.6vw; }
     #footer .phoneicon { padding-left: 2vw; background-size: 1.6vw 1.6vw; }
     #footer .informationicon { padding-left: 2vw; background-size: 1.6vw 1.6vw; }
     #footer .rssicon { padding-left: 2vw; background-size: 1.3vw 1.3vw; } }