/* The look of www.fau.org, on top of Barceloneta.
 *
 * Barceloneta's css comes first, through the import; the rest of this file
 * changes it towards the site's design from Plone 5.1. */

@import url("../../++theme++barceloneta/css/barceloneta.min.css");


/* Fonts */

@font-face {
  font-family: "SourceSansPro";
  src: url("../fonts/source-sans-pro/SourceSansPro-Regular.otf") format("opentype");
  font-weight: 400;
}
@font-face {
  font-family: "SourceSansPro";
  src: url("../fonts/source-sans-pro/SourceSansPro-Semibold.otf") format("opentype");
  font-weight: 600;
}
@font-face {
  font-family: "SourceSansPro";
  src: url("../fonts/source-sans-pro/SourceSansPro-Bold.otf") format("opentype");
  font-weight: 700;
}
@font-face {
  font-family: "SourceSansPro";
  src: url("../fonts/source-sans-pro/SourceSansPro-Black.otf") format("opentype");
  font-weight: 800;
}
@font-face {
  font-family: "SourceSerifPro";
  src: url("../fonts/source-serif-pro/SourceSerifPro-Regular.otf") format("opentype");
  font-weight: 400;
}
@font-face {
  font-family: "SourceSerifPro";
  src: url("../fonts/source-serif-pro/SourceSerifPro-Bold.otf") format("opentype");
  font-weight: 700;
}


/* Colours, type, width */

:root {
  --fau-red: #c00301;
  --fau-red-bg: #c00200;
  --fau-sans: "SourceSansPro", Arial, Helvetica, sans-serif;
  --fau-serif: "SourceSerifPro", Georgia, "Times New Roman", Times, serif;
  --fau-width: 960px;

  --bs-body-font-family: var(--fau-sans);
  --bs-body-font-size: 14px;
  --bs-body-line-height: 1.428571429;
  --bs-body-color: #333;
  --bs-body-bg: #fafafa;
  --bs-link-color: var(--fau-red);
  --bs-link-color-rgb: 192, 3, 1;
  --bs-link-hover-color: #000;
  --bs-link-hover-color-rgb: 0, 0, 0;
  --bs-primary: var(--fau-red);
  --bs-primary-rgb: 192, 3, 1;
  --plone-link-color: var(--fau-red);
  --plone-link-hover-color: #000;
}

body {
  font-family: var(--fau-sans);
  font-size: 14px;
  color: #333;
  background-color: #fafafa;
}

p, address {
  font-family: var(--fau-serif);
  hyphens: auto;
}
/* Bootstrap 3's space below paragraphs and lists, not 5's 1rem */
p, ul, ol {
  margin-bottom: 10px;
}

/* Headings as in Bootstrap 3, which the texts were written with: fixed
   sizes and space above, not Bootstrap 5's none */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--fau-sans);
  font-weight: 700;
  line-height: 1.1;
}
h1, h2, h3 {
  margin-top: 20px;
  margin-bottom: 10px;
}
h4, h5, h6 {
  margin-top: 10px;
  margin-bottom: 10px;
}
h1 { font-size: 36px; }
h2 { font-size: 30px; }
h3 { font-size: 24px; }
h4 { font-size: 18px; }
h5 { font-size: 14px; color: #696969; }
h6 { font-size: 12px; }

/* Bootstrap 5 makes b "bolder", which is Black inside the bold headings
   that many texts have */
b {
  font-weight: 700;
}
strong {
  font-weight: 600;
}

label {
  font-weight: 600;
}

a {
  text-decoration: none;
}
a:hover, a:focus {
  color: #000;
}

.container {
  max-width: var(--fau-width);
}

/* Plone shows no portlet columns here, so the content takes all of the row,
   whatever Barceloneta makes of the col-one/col-two classes on body */
#visual-portal-wrapper #portal-column-content {
  flex: 0 0 100%;
  max-width: 100%;
  width: 100%;
}

/* Barceloneta compiles its button colours; red like the links instead */
.btn-primary {
  --bs-btn-bg: var(--fau-red);
  --bs-btn-border-color: var(--fau-red);
  --bs-btn-hover-bg: #9a0201;
  --bs-btn-hover-border-color: #9a0201;
  --bs-btn-active-bg: #7a0101;
  --bs-btn-active-border-color: #7a0101;
  --bs-btn-disabled-bg: var(--fau-red);
  --bs-btn-disabled-border-color: var(--fau-red);
}

/* Links in capitals with a chevron */
.tileFooter a, .more a, .carousel-caption a, .chevronRedLink, .chevronBlackBoldLink, .uppercase-link,
.template-summary_view #content-core article.row > .col > div:last-child a {
  font-family: var(--fau-sans);
  letter-spacing: 0.075em;
  text-transform: uppercase;
}
.more a, .chevronRedLink {
  font-size: 0.8em;
}
.more a::before, .chevronRedLink::before, .chevronBlackBoldLink::before, .tileFooter a::before,
.template-summary_view #content-core article.row > .col > div:last-child a::before {
  content: "› ";
}
.chevronBlackBoldLink {
  color: #000;
  font-weight: bold;
}

/* Open sections from Bootstrap 3 ("collapse in"), which Bootstrap 5 would
   hide; js/wwwfauorg.js toggles them */
.collapse.in {
  display: block;
}


/* The black bar: logo, navigation, search */

#portal-globalnav-wrapper {
  --bs-navbar-background: #000;
  --bs-navbar-active-background: #1a1a1a;
  --bs-navbar-hover-background: #1a1a1a;
  background-color: #000;
  padding: 0;
  min-height: 40px;
}
#portal-globalnav-wrapper > .container-fluid {
  padding-left: 15px;
  padding-right: 15px;
}
#portal-logo img {
  height: 20px;
  width: auto;
}
#portal-globalnav {
  margin-left: auto;
  margin-right: auto !important;
}
#portal-globalnav .nav-link {
  color: #fff;
  font-family: var(--fau-sans);
  font-weight: 700;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  padding: 10px;
}
#portal-globalnav .nav-link:hover,
#portal-globalnav .inPath > .nav-link,
#portal-globalnav .current > .nav-link {
  background-color: #1a1a1a;
  color: #fff;
}
/* the start page is the logo's */
#portal-globalnav .index_html {
  display: none;
}
#fau-search {
  display: inline-block;
  width: 40px;
  height: 40px;
  background-color: #fff;
  /* a heavy ring and handle, like the glyphicon of the old site */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000'%3E%3Ccircle cx='6.5' cy='6.5' r='4.75' stroke-width='2.5'/%3E%3Cpath d='M10.2 10.2l4 4' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") right center / 15px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000'%3E%3Ccircle cx='6.5' cy='6.5' r='4.75' stroke-width='2.5'/%3E%3Cpath d='M10.2 10.2l4 4' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") right center / 15px no-repeat;
}
#offcanvasNavbar {
  background-color: #000;
}
@media (max-width: 991.98px) {
  #portal-globalnav .nav-link {
    padding: 10px 0;
  }
}


/* Breadcrumbs: small capitals, a dash below */

#portal-breadcrumbs {
  background: transparent;
  padding: 0;
  margin: 1em 0;
  border: 0;
}
#portal-breadcrumbs .breadcrumb {
  --bs-breadcrumb-divider: "/";
  --bs-breadcrumb-item-padding-x: 0.25em;
  margin: 0;
  padding: 0;
  font-size: 12px;
  line-height: 1.2;
  text-transform: uppercase;
}
#portal-breadcrumbs .breadcrumb-item,
#portal-breadcrumbs .breadcrumb-item a,
#portal-breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
  color: #000;
}
#portal-breadcrumbs .breadcrumb-item.active {
  font-weight: 600;
}
#portal-breadcrumbs .container::after {
  content: "—";
  display: block;
  line-height: 0.8;
}


/* Content */

.documentFirstHeading,
#content > header > h1 {
  border-bottom: 0;
  color: #333;
  margin-top: 0;
  padding-bottom: 9px;
}
.documentByLine {
  color: #696969;
  margin-bottom: 10px;
}
/* The description is a teaser for listings; pages have it in their text */
#content > header .lead,
#content > header .documentDescription {
  display: none;
}
/* where a mosaic page shows it, small and grey */
.mosaic-IDublinCore-description-tile .mosaic-tile-content > * {
  color: #777;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.428571429;
  margin-bottom: 10px;
}
/* Images in texts no wider than Plone 5's "large" scale, which they were
   chosen for: Plone 6's large variant is wider than the content */
#content img.picture-variant-large {
  max-width: min(100%, 768px);
  height: auto;
}
.portaltype-news-item #content-core p {
  font-size: 14pt;
  line-height: 175%;
  text-align: justify;
  hyphens: auto;
}
.newsImageContainer {
  float: right;
  max-width: 200px;
  margin: 0 0 1em 2em;
}
/* Barceloneta's space below the title, and below the lead image: the image
   floats, so its empty section's margin would push the title down */
#content > header,
#section-leadimage {
  margin-bottom: 0;
}

/* Tables in texts as on Plone 5: a light line around every cell, grey text,
   and stripes on "listing"; also over their border="…" attributes */
#parent-fieldname-text table,
.mosaic-tile-content table {
  width: 100%;
  margin-bottom: 20px;
  border: 1px solid #e5e5e5;
  background-color: #fff;
  color: #696969;
}
#parent-fieldname-text table > * > tr > *,
.mosaic-tile-content table > * > tr > * {
  padding: 8px;
  border: 1px solid #e5e5e5;
  background-color: transparent;
  color: inherit;
  vertical-align: top;
}
#parent-fieldname-text table th,
.mosaic-tile-content table th {
  color: #4c4c4c;
}
#parent-fieldname-text table.listing > tbody > tr:nth-child(odd) > *,
.mosaic-tile-content table.listing > tbody > tr:nth-child(odd) > * {
  background-color: #f6f6f6;
}

/* Summary view (artikel, Kämpfe und Kampagnen, Materialien) as on Plone 5:
   the title above, the picture left of the description, "› Mehr" below, a
   line between the items. Plone 6 has the picture in a column to the right
   of all the rest. Without a picture, its grid column stays empty. */
.template-summary_view #content-core article.row {
  display: grid;
  grid-template-columns: auto 1fr;
  margin: 0 0 35px;
  border-bottom: 1px solid #000;
}
.template-summary_view #content-core article.row > * {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}
.template-summary_view #content-core article.row > .col {
  display: contents;
}
.template-summary_view #content-core article.row h2 {
  grid-column: 1 / -1;
  grid-row: 1;
  font-size: 1.1em;
  margin: 20px 0 10px;
}
.template-summary_view #content-core article.row h2 a {
  color: #000;
}
/* the byline, empty as on Plone 5 */
.template-summary_view #content-core article.row > .col > .mb-3 {
  display: none;
}
.template-summary_view #content-core article.row > .col-3 {
  grid-column: 1;
  grid-row: 2;
  padding-right: 5px;
}
.template-summary_view #content-core article.row > .col > div:not(:last-child) {
  grid-column: 2;
  grid-row: 2;
  font-size: 1.1em;
  line-height: 20px;
}
.template-summary_view #content-core article.row > .col > div:last-child {
  grid-column: 1 / -1;
  grid-row: 3;
  margin: 5px 0 0 !important;
}

/* Listing view (Branchen): the descriptions grey */
.template-listing_view #content-core .entries article p {
  color: #777;
}

/* Keywords are for the listings and the carousel ("feature"); the old site
   did not show them on the page */
#section-category {
  display: none;
}

/* Small black labels */
mark {
  font-weight: 400;
  letter-spacing: 0.075em;
  background-color: #000;
  color: #fff;
  display: inline-block;
  line-height: 1em;
  margin: -0.15em 0 -0.3em;
  padding: 0.15em 0.2em 0.3em;
  text-transform: uppercase;
}
mark a, mark a:hover {
  color: #fff;
  text-decoration: none;
}

.bordered {
  border: thin solid;
  padding: 0.5em !important;
}
.bordered > li:last-child {
  border-top: thin solid;
  margin: 2.5em -0.5em 0;
  padding: 0.3em 0.5em 0;
}
.borderedList {
  padding-left: 0;
  list-style: none;
}
.borderedList > li {
  border: thin solid;
  border-bottom: none;
  padding: 0.3em 0 0.5em 0.4em;
}
.borderedList > li:last-child {
  border-bottom: thin solid;
}
.std-entry {
  color: #000;
  letter-spacing: normal;
  text-transform: none;
}
.std-entry.contenttype-event {
  font-weight: 600;
}

/* Section headings with a thick line above */
.portletHeader, .section-header, .section-startseite #content h2,
.portlet .card-header {
  border-top: thick solid #000;
  color: #000;
  font-family: var(--fau-sans);
  font-size: 1.2em;
  font-weight: 700;
  letter-spacing: 0.075em;
  margin: 1em 0 0.5em;
  padding-top: 0.4em;
  text-transform: uppercase;
}
.section-startseite #content h2 a, .section-header a, .portlet .card-header a {
  color: #000;
}
/* the line, but not the capitals: those are for .section-header */
.mosaic-tile-content h3 {
  border-top: thick solid #000;
  color: #000;
  font-size: 1.2em;
  margin: 1em 0 0.5em;
  padding-top: 0.4em;
}
.section-startseite #content h2 a.weiteres, .weiteres a {
  color: var(--fau-red) !important;
  float: right;
  font-size: 0.8em;
  font-weight: normal;
}
.section-startseite #content h2 a.weiteres::before, .weiteres a::before {
  content: "› ";
}
.section-startseite #content h3 {
  font-size: 1.3em;
}
.section-startseite #content ul, .mosaic-tile-content ul {
  list-style: none;
  padding: 0;
}

/* Teasers: picture, label, headline */
.featurebox h4 {
  font-size: 1.1em;
}
.featurebox h4 a {
  color: #000;
  font-family: var(--fau-sans);
  font-weight: 700;
  text-transform: none;
}
.col-md-3 img {
  height: 120px;
  width: 100%;
  object-fit: cover;
}
.col-md-6 img {
  height: 240px;
  width: 100%;
  object-fit: cover;
}
/* Bootstrap's negative margins would pull the teasers out of the content
   width; the old theme cancelled them for every row */
.row-only-left-padding {
  margin-left: 0;
  margin-right: 0;
}
.row-only-left-padding > div {
  padding-left: 0;
  padding-right: 0;
}
@media (min-width: 768px) {
  .row-only-left-padding > div + div {
    padding-left: 30px;
  }
}


/* Mosaic pages: rows at the content width, except the start page's first one,
   the carousel */

.mosaic-grid-row {
  max-width: var(--fau-width);
  margin-left: auto;
  margin-right: auto;
}
/* The layouts come from Mosaic 2 on Plone 5.1, whose width classes Mosaic 4
   no longer knows */
@media (min-width: 768px) {
  .mosaic-grid-row > .mosaic-grid-cell { flex: 0 0 auto; }
  .mosaic-grid-row > .mosaic-width-full { width: 100%; }
  .mosaic-grid-row > .mosaic-width-three-quarters { width: 75%; }
  .mosaic-grid-row > .mosaic-width-two-thirds { width: 66.6667%; }
  .mosaic-grid-row > .mosaic-width-half { width: 50%; }
  .mosaic-grid-row > .mosaic-width-third { width: 33.3333%; }
  .mosaic-grid-row > .mosaic-width-quarter { width: 25%; }
}
.section-startseite .mosaic-grid-row:first-of-type,
.section-startseite .mosaic-grid-row:first-of-type > div {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}
.section-startseite .documentFirstHeading {
  display: none;
}


/* Carousel of the start page. The text is never on the picture, so that it
   stays readable whatever picture the editors choose: on narrow screens it
   is below the picture, on a red band; on wide ones in a red box left of
   the picture, overlapping it a little. Both have a fixed height, so the
   page does not jump between the slides; too long titles and descriptions
   are cut off. */

/* Narrow screens: the picture above the band. The band's height is that of
   the longest content the line clamps allow, and the dots below it. */
#carousel {
  --fau-carousel-image: 280px;
  --fau-carousel-band: 240px;
  background-color: var(--fau-red-bg);
  text-align: center;
}
#carousel .carousel-item img {
  width: 100%;
  height: var(--fau-carousel-image);
  object-fit: cover;
}
#carousel .carousel-caption {
  position: static;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: var(--fau-carousel-band);
  padding: 22px 15% 0;
  background-color: var(--fau-red-bg);
}
#carousel h1 {
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 8px;
}
#carousel h1::after {
  content: "—";
  display: block;
  line-height: 1;
  margin-top: 2px;
}
#carousel h1 a,
#carousel p.byline {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
#carousel h1 a {
  color: #fff;
}
#carousel p.byline {
  margin-bottom: 10px;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 200;
}
#carousel mark {
  background-color: #fff;
}
#carousel mark a {
  color: var(--fau-red);
}
/* the arrows on the picture, the dots at the bottom of the band */
#carousel .carousel-control-prev,
#carousel .carousel-control-next {
  bottom: var(--fau-carousel-band);
}
#carousel .carousel-indicators {
  margin-bottom: 12px;
}
/* dots, as in Bootstrap 3, not bars */
#carousel .carousel-indicators [data-bs-target] {
  box-sizing: border-box;
  align-self: center;
  width: 10px;
  height: 10px;
  margin: 1px;
  border: 1px solid #fff;
  border-radius: 50%;
  background-color: transparent;
  opacity: 1;
}
#carousel .carousel-indicators .active {
  width: 12px;
  height: 12px;
  margin: 0;
  background-color: #fff;
}
@media (max-width: 767px) {
  #carousel {
    --fau-carousel-image: 190px;
    --fau-carousel-band: 180px;
  }
  #carousel .carousel-caption {
    padding: 16px 16px 0;
  }
  #carousel p.byline {
    display: none;
  }
  #carousel h1 {
    font-size: 22px;
  }
  #carousel h1 a {
    -webkit-line-clamp: 3;
  }
}

/* Wide screens: the box, sized to its text, left of the picture and over
   its edge, both together centred on black, like the bar at the top. The
   picture is at most 1100px wide, so that it does not become a thin strip;
   the box's left edge is where the group starts, beside the left arrow. */
@media (min-width: 992px) {
  #carousel {
    --fau-carousel-height: 420px;
    --fau-carousel-picture: min(62%, 1100px);
    --fau-carousel-box: min(40%, 520px);
    --fau-carousel-overlap: 80px;
    --fau-carousel-left: max(56px, calc((100% - var(--fau-carousel-picture) - var(--fau-carousel-box) + var(--fau-carousel-overlap)) / 2));
    background-color: #000;
  }
  #carousel .carousel-item {
    height: var(--fau-carousel-height);
    background-color: #000;
  }
  #carousel .carousel-item img {
    position: absolute;
    top: 0;
    left: calc(var(--fau-carousel-left) + var(--fau-carousel-box) - var(--fau-carousel-overlap));
    width: var(--fau-carousel-picture) !important;  /* over Bootstrap's w-100 */
    height: 100%;
  }
  #carousel .carousel-caption {
    position: absolute;
    top: 50%;
    bottom: auto;
    left: var(--fau-carousel-left);
    right: auto;
    transform: translateY(-50%);
    width: var(--fau-carousel-box);
    height: auto;
    padding: 28px 32px 22px;
    align-items: flex-start;
    text-align: left;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
  }
  #carousel h1 {
    font-size: 26px;
  }
  #carousel h1 a,
  #carousel p.byline {
    -webkit-line-clamp: 3;
  }
  #carousel p.byline {
    font-size: 16px;
  }
  #carousel .carousel-indicators {
    left: var(--fau-carousel-left);
    right: auto;
    bottom: 0;
    margin: 0 0 18px;
    justify-content: flex-start;
  }
  /* narrow, at the edges, so that they do not cover the box */
  #carousel .carousel-control-prev,
  #carousel .carousel-control-next {
    bottom: 0;
    width: 44px;
  }
}


/* Locals: red header, blog with calendar dates */

.jumbotron {
  background-color: var(--fau-red-bg);
  color: #fff;
  padding: 4rem 0 3rem;
  margin-bottom: 1em;
}
.jumbotron mark {
  background-color: #fff;
}
.jumbotron mark a {
  color: var(--fau-red);
}
.local .jumbotron .container {
  max-width: var(--fau-width);
}
.local .jumbotron h1 {
  font-size: 22px;
  font-weight: 600;
}
.local .jumbotron h1::after {
  content: "\A—";
  white-space: pre;
}
.local .jumbotron h1 span {
  font-weight: 400;
}
.local .jumbotron h1 span::before {
  content: "–\A";
}
.local .jumbotron .info p,
.local .jumbotron address,
.local .jumbotron address p {
  font-family: var(--fau-sans) !important;
  font-size: 14px !important;
}
.local .jumbotron a {
  color: #fff;
  text-decoration: underline;
}
.local > .row,
.local > .breadcrumb {
  max-width: var(--fau-width);
  margin-left: auto;
  margin-right: auto;
}
.local > .breadcrumb {
  margin-bottom: 2em;
  padding: 0 calc(var(--bs-gutter-x, 1.5rem) * 0.5);
  background: transparent;
}
.local > .breadcrumb #portal-breadcrumbs {
  margin-top: 0;
}
.local > .breadcrumb #portal-breadcrumbs .container {
  padding: 0;
}
.local .external-website img {
  margin-top: 2em;
}

.tileItem {
  border-bottom: 1px solid #000;
  margin-bottom: 2.5em;
  overflow: hidden;
}
.tileHeadline {
  font-size: 1.1em;
}
.tileHeadline a {
  color: #000;
  text-transform: none;
}
.tileBody .description {
  font-size: 1.1em;
}
.vevent div.cal_date {
  float: left;
  text-align: center;
  margin: 42px 1.5em 0.5em 0;
  background-color: var(--fau-red);
  min-width: 4.4em;
  width: 100px;
  overflow: hidden;
}
.cal_month {
  background: #000;
  color: #fff;
  display: block;
  padding: 6px 12px;
}
.cal_day {
  color: #fff;
  display: block;
  font-size: 36px;
  font-weight: 700;
}
.cal_wkday {
  color: #fff;
  display: block;
  font-size: 12px;
  font-weight: 300;
  padding: 0 12px 6px;
}

/* Tiles listing and selecting the locals */
.localselecttile img {
  display: block;
  margin: 0 auto 1em;
}
.syndikatswahl {
  margin: 1em 0 -1em;
}
.locallisttile .card {
  border-radius: 0;
  border-color: #000;
  margin-bottom: 20px;
}
.locallisttile .card-header {
  background-color: #fafafa;
  border-color: #000;
  padding: 10px 15px;
}
.locallisttile .card-header a.h5 {
  font-size: 14px;
  font-weight: 700;
}
.locallisttile .card-header .btn-link {
  font-size: 14px;
  padding: 0;
  margin-right: 14px;
  text-decoration: none;
}


/* Portlets, where a view shows them */

.portlet.card {
  border: 0;
  border-radius: 0;
  background: transparent;
}
.portlet .card-header {
  background: transparent;
  border-bottom: 0;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
}
.portlet .card-body, .portlet .card-footer {
  padding-left: 0;
  padding-right: 0;
  background: transparent;
}
.portlet .list-group-item {
  background: transparent;
  padding-left: 0;
  padding-right: 0;
}


/* Footer */

#portal-footer-wrapper {
  margin-top: 2em;
  background-color: #e1e1e1;
  color: #000;
  padding: 1.5em 0 0.5em;
}
#portal-footer-wrapper a {
  color: #000;
  letter-spacing: normal;
  text-transform: none;
}
#portal-footer-wrapper a::before {
  content: "› ";
}
#portal-footer-wrapper .doormat {
  text-align: left;
}
/* The footer is a static text portlet with Bootstrap 3's grid: its columns
   sit in a .container without a .row, which Bootstrap 5 needs to put them
   side by side */
#portal-footer-wrapper .doormat .container {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  padding-right: 0;
}
#portal-footer-wrapper .doormat .container > [class*="col-"] {
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  padding-right: calc(var(--bs-gutter-x) * 0.5);
}
#portal-footer-wrapper h3 {
  font-size: 24px;
}
#portal-footer-wrapper .doormat h2 {
  border: 0;
  letter-spacing: normal;
  margin: 0 0 0.5em;
  padding: 0;
  text-transform: none;
  color: #333;
  font-size: 1.7em;
  font-weight: 700;
}
#portal-footer-wrapper ul {
  list-style: none;
  padding-left: 0;
}
#portal-footer-wrapper p {
  color: #333;
}
#portal-footer-wrapper img {
  width: 140px;
  height: auto;
  margin-bottom: 10px;
}
#portal-footer-wrapper .colophon,
#portal-footer-wrapper .copyright,
#portal-footer-wrapper .site-actions {
  font-size: 12px;
  color: #555;
}
#portal-footer-wrapper .copyright {
  text-align: left;
}
#portal-footer-wrapper .colophon a,
#portal-footer-wrapper .copyright a {
  color: #555;
}


/* Edit mode: Plone's own look for Plone's own things */

.plone-toolbar-container a {
  text-transform: none;
  letter-spacing: normal;
}