blob: 76de1510bf7106d3c1995bd3527396fbbd2699f8 [file] [log] [blame]
/**
* IDS theme for reveal.js
*
* By Marc Kupietz
*/
@import url("https://code.cdn.mozilla.net/fonts/fira.css");
@import url("https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:wght@300;400;700;800&family=Fira+Sans:wght@200;300;400;700&family=Fira+Sans+Extra+Condensed:wght@300;700&display=swap");
/* Fira Code: the monospaced Fira Sans variant for highlighted/code text
(as in the IDS reference decks; falls back to Fira Mono from the Mozilla
CSS above, then DejaVu Sans Mono) */
@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap");
@import url("https://korap.ids-mannheim.de/font/libertinus.css");
section.has-dark-background, section.has-dark-background h1, section.has-dark-background h2, section.has-dark-background h3, section.has-dark-background h4, section.has-dark-background h5, section.has-dark-background h6 {
color: #fff;
}
/*********************************************
* GLOBAL STYLES
*********************************************/
:root {
--r-background-color: #fff;
--r-main-font: Libertinus Serif, Helvetica, sans-serif;
--r-main-font-size: 42px;
--r-main-color: #222;
--r-block-margin: 20px;
--r-heading-margin: 0 0 20px 0;
--r-heading-font: Fira Sans Extra Condensed, Fira Sans Condensed, Fira Sans, Helvetica, sans-serif;
--r-heading-color: #f6a800;
--r-heading-line-height: 1.2;
--r-heading-letter-spacing: 0.05ex;
--r-heading-text-transform: uppercase;
--r-heading-text-shadow: none;
--r-heading-font-weight: 700;
--r-heading1-text-shadow: none;
--r-heading1-size: 2em;
--r-heading2-size: 1.35em;
--r-heading3-size: 0.9em;
--r-heading4-size: 0.7em;
--r-code-font: "Fira Code", "Fira Mono", "DejaVu Sans Mono", "Source Code Pro", monospace;
--r-link-color: #2a76dd;
--r-link-color-dark: #1a53a1;
--r-link-color-hover: #6ca0e8;
--r-selection-background-color: #98bdef;
--r-selection-color: #fff;
--r-overlay-element-bg-color: 240, 240, 240;
--r-overlay-element-fg-color: 0, 0, 0;
}
.reveal-viewport {
background: #fff;
background-color: var(--r-background-color);
}
.reveal {
font-family: var(--r-main-font);
font-size: var(--r-main-font-size);
font-weight: normal;
color: var(--r-main-color);
}
.reveal ::selection {
color: var(--r-selection-color);
background: var(--r-selection-background-color);
text-shadow: none;
}
.reveal ::-moz-selection {
color: var(--r-selection-color);
background: var(--r-selection-background-color);
text-shadow: none;
}
.reveal .slides section,
.reveal .slides section>section {
line-height: 1.3;
font-weight: inherit;
}
/*********************************************
* HEADERS
*********************************************/
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
margin: var(--r-heading-margin);
color: var(--r-heading-color);
font-family: var(--r-heading-font);
font-weight: var(--r-heading-font-weight);
line-height: var(--r-heading-line-height);
letter-spacing: var(--r-heading-letter-spacing);
text-transform: var(--r-heading-text-transform);
text-shadow: var(--r-heading-text-shadow);
word-wrap: break-word;
}
.reveal h1 {
font-size: var(--r-heading1-size);
}
.reveal h2 {
font-size: var(--r-heading2-size);
}
.reveal h3 {
font-size: var(--r-heading3-size);
}
.reveal h4 {
font-size: var(--r-heading4-size);
}
.reveal h1 {
text-shadow: var(--r-heading1-text-shadow);
}
/*********************************************
* OTHER
*********************************************/
.reveal p {
margin: var(--r-block-margin) 0;
line-height: 1.3;
}
/* Remove trailing margins after titles */
.reveal h1:last-child,
.reveal h2:last-child,
.reveal h3:last-child,
.reveal h4:last-child,
.reveal h5:last-child,
.reveal h6:last-child {
margin-bottom: 0;
}
/* Ensure certain elements are never larger than the slide itself */
.reveal img,
.reveal video,
.reveal iframe {
max-width: 95%;
max-height: 95%;
}
.reveal strong,
.reveal b {
font-weight: bold;
}
.reveal em {
font-style: italic;
}
.reveal ol,
.reveal dl,
.reveal ul {
display: inline-block;
text-align: left;
margin: 0 0 0 1em;
}
.reveal ol {
list-style-type: decimal;
}
.reveal ul {
list-style-type: disc;
}
.reveal ul ul {
list-style-type: square;
}
.reveal ul ul ul {
list-style-type: circle;
}
.reveal ul ul,
.reveal ul ol,
.reveal ol ol,
.reveal ol ul {
display: block;
margin-left: 40px;
}
.reveal dt {
font-weight: bold;
}
.reveal dd {
margin-left: 40px;
}
.reveal blockquote {
display: block;
position: relative;
width: 70%;
margin: var(--r-block-margin) auto;
padding: 5px;
font-style: italic;
background: rgba(255, 255, 255, 0.05);
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
}
.reveal blockquote p:first-child,
.reveal blockquote p:last-child {
display: inline-block;
}
.reveal q {
font-style: italic;
}
.reveal pre {
display: block;
position: relative;
width: 90%;
margin: var(--r-block-margin) auto;
text-align: left;
font-size: 0.55em;
font-family: var(--r-code-font);
line-height: 1.2em;
word-wrap: break-word;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
}
.reveal code {
font-family: var(--r-code-font);
text-transform: none;
tab-size: 2;
}
.reveal pre code {
display: block;
padding: 5px;
overflow: auto;
max-height: 540px;
word-wrap: normal;
}
.reveal .code-wrapper {
white-space: normal;
}
.reveal .code-wrapper code {
white-space: pre;
}
.reveal table {
margin: auto;
border-collapse: collapse;
border-spacing: 0;
}
.reveal table th {
font-weight: bold;
}
.reveal table th,
.reveal table td {
text-align: left;
padding: 0.2em 0.5em 0.2em 0.5em;
border-bottom: 1px solid;
}
.reveal table th[align=center],
.reveal table td[align=center] {
text-align: center;
}
.reveal table th[align=right],
.reveal table td[align=right] {
text-align: right;
}
.reveal table tbody tr:last-child th,
.reveal table tbody tr:last-child td {
border-bottom: none;
}
.reveal sup {
vertical-align: super;
font-size: smaller;
}
.reveal sub {
vertical-align: sub;
font-size: smaller;
}
.reveal small {
display: inline-block;
font-size: 0.6em;
line-height: 1.2em;
vertical-align: top;
}
.reveal small * {
vertical-align: top;
}
.reveal img {
margin: var(--r-block-margin) 0;
}
/*********************************************
* LINKS
*********************************************/
.reveal a {
color: var(--r-link-color);
text-decoration: none;
transition: color 0.15s ease;
}
.reveal a:hover {
color: var(--r-link-color-hover);
text-shadow: none;
border: none;
}
.reveal .roll span:after {
color: #fff;
background: var(--r-link-color-dark);
}
/*********************************************
* Frame helper
*********************************************/
.reveal .r-frame {
border: 4px solid var(--r-main-color);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}
.reveal a .r-frame {
transition: all 0.15s linear;
}
.reveal a:hover .r-frame {
border-color: var(--r-link-color);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
}
/*********************************************
* NAVIGATION CONTROLS
*********************************************/
.reveal .controls {
color: var(--r-link-color);
}
/*********************************************
* PROGRESS BAR
*********************************************/
.reveal .progress {
background: rgba(0, 0, 0, 0.2);
color: var(--r-link-color);
}
/*********************************************
* PRINT BACKGROUND
*********************************************/
@media print {
.backgrounds {
background-color: var(--r-background-color);
}
}
.reveal .slides section:not(.stack) {
box-sizing: border-box !important;
padding-left: calc(calc(var(--slide-height) * 0.05) + 24px) !important;
padding-right: calc(calc(var(--slide-height) * 0.05) + 24px) !important;
}
.reveal .slides section:not(.stack):not(.title-frame) {
text-align: left !important;
}
/* The markers are NOT native ::marker glyphs: browsers anchor outside-position
markers at slightly different offsets per engine (and per scale), and even
::before font glyphs carry font-specific side bearings, so a padding(text)-
based alignment of the bullet column with the heading text can never be
pixel-exact everywhere. Instead we DRAW the markers as CSS boxes in
absolutely positioned li::before rules. Geometry (all values in the item's
own font size, so the hierarchy scales with the 0.8em per-level sizing):
- item text starts at (list left edge) + 0.65em
- the marker box starts exactly at the list's left edge; on content
slides that edge coincides with the heading text's left edge, i.e. the
bullet column is flush with the slide title, deterministically in every
browser and at every window size
For nested lists the ::before offset is divided by the 0.8 font-size factor,
because the list's padding is computed in the PARENT item's font size while
the ::before offset is computed in the (smaller) child size. */
.reveal .slides section:not(.title-frame) ul,
.reveal .slides section:not(.title-frame) ol {
display: block !important;
text-align: left !important;
margin-left: 0 !important;
padding-left: 0.65em !important;
list-style: none !important;
}
.reveal .slides section:not(.title-frame) li {
position: relative !important;
}
.reveal .slides section:not(.title-frame) li::before {
position: absolute !important;
left: -0.65em !important;
color: var(--r-list-bullet-color) !important;
}
.reveal .slides section:not(.title-frame) li li::before {
left: -0.8125em !important;
}
/* Unordered-list markers: drawn boxes (round dot, square, ring for deeper
levels), vertically centered on the item's first line. */
.reveal .slides section:not(.title-frame) ul > li::before {
content: "" !important;
top: calc((1.3em - 0.22em) / 2) !important;
width: 0.22em !important;
height: 0.22em !important;
box-sizing: border-box !important;
border-radius: 50% !important;
background: var(--r-list-bullet-color) !important;
}
.reveal .slides section:not(.title-frame) ul ul > li::before {
border-radius: 0 !important; /* square */
}
.reveal .slides section:not(.title-frame) ul ul ul > li::before {
background: transparent !important; /* ring */
border: 0.055em solid var(--r-list-bullet-color) !important;
border-radius: 50% !important;
}
/* Ordered lists: the CSS list-item counter honours the HTML start/value
attributes, so pandoc's start/value lists keep their numbers. Numbers are
right-aligned into the indent, ending just before the item text. */
.reveal .slides section:not(.title-frame) ol > li::before {
content: counter(list-item, decimal) "." !important;
width: 0.53em !important;
text-align: right !important;
}
/* Checkbox (pandoc task) lists keep their checkboxes, no bullets on top. */
.reveal .slides section:not(.title-frame) ul.task-list li::before {
content: none !important;
}
.reveal .slides section:not(.title-frame) pre {
width: auto !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.reveal .slides {
background-image: url("https://corpora.ids-mannheim.de/slides/reveal.js.ids/images/IDS-Logo-2019.svg");
background-repeat: no-repeat;
background-position: top 10px right 8px;
background-size: calc(var(--slide-height) * 0.25) auto;
}
.reveal .slides section:not(.title-frame) > h1:first-child,
.reveal .slides section:not(.title-frame) > h2:first-child {
position: relative !important;
display: block !important;
text-align: left !important;
margin: 0 calc(-1 * calc(calc(var(--slide-height) * 0.05) + 24px)) 8px calc(-1 * calc(calc(var(--slide-height) * 0.05) + 24px)) !important;
padding: 0 0 0 calc(calc(var(--slide-height) * 0.05) + 24px) !important;
font-weight: var(--r-heading-font-weight) !important;
}
.reveal .slides section:not(.title-frame) > h1:first-child::before,
.reveal .slides section:not(.title-frame) > h2:first-child::before,
.reveal .slides section:not(.title-frame) > h2:first-child + h3::before {
content: "" !important;
position: absolute !important;
width: calc(var(--slide-height) * 0.05) !important;
background: #f6a800 !important;
}
.reveal .slides section:not(.title-frame) > h1:first-child::before,
.reveal .slides section:not(.title-frame) > h2:first-child::before {
top: 0 !important;
left: calc(-1 * var(--ids-band-left, 0px)) !important;
height: 100% !important;
}
.reveal .slides section:not(.title-frame) > h1:first-child:not(:has(+ h3)),
.reveal .slides section:not(.title-frame) > h2:first-child:not(:has(+ h3)) {
margin-bottom: calc(8px + 45.36px + 20px) !important;
}
.reveal .slides section:not(.title-frame) > h1:first-child:not(:has(+ h3))::before,
.reveal .slides section:not(.title-frame) > h2:first-child:not(:has(+ h3))::before {
height: calc(100% + 8px + 45.36px) !important;
}
.reveal .slides section:not(.title-frame) > h2:first-child + h3 {
position: relative !important;
text-align: left !important;
margin-top: 0 !important;
margin-left: 0 !important;
margin-bottom: 20px !important;
}
.reveal .slides section:not(.title-frame) > h2:first-child + h3::before {
top: calc(-1 * (8px + 2px)) !important;
left: calc(-1 * (calc(calc(var(--slide-height) * 0.05) + 24px) + var(--ids-band-left, 0px))) !important;
height: calc(100% + 8px + 2px) !important;
}
.reveal .slides section.level1:not(.title-frame) {
height: 100% !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
}
.reveal .slides section.level1:not(.title-frame)::before {
content: "" !important;
position: absolute !important;
top: 0 !important;
left: calc(-1 * var(--ids-band-left, 0px)) !important;
width: calc(var(--slide-height) * 0.05) !important;
height: 121.4px !important;
background: #f6a800 !important;
}
.reveal .slides section.level1:not(.title-frame) > h1:first-child {
text-align: center !important;
margin: 0 !important;
padding: 0 !important;
}
.reveal .slides section.level1:not(.title-frame) > h1:first-child::before {
content: none !important;
}
:root {
--r-bold-color: #f6a800;
--r-list-bullet-color: #f6a800;
}
/* Bold ("highlighted") text gets the orange colour AND the condensed Fira
Sans face, as in the IDS reference decks -- the lighter weight and 90%
size keep it from dominating the serif body text. */
.reveal strong, .reveal b {
font-family: "Fira Sans Condensed", sans-serif;
font-weight: 600;
font-size: 90%;
color: var(--r-bold-color);
}
.reveal ul li::marker, .reveal ol li::marker {
color: var(--r-list-bullet-color) !important;
}
/* Nested list items are set progressively smaller, both to emphasise the
hierarchy and to keep deeply nested lists from visually competing with the
first level. The em size compounds down the nesting levels, so each deeper
level is 80% of its parent (level 2: 80%, level 3: 64%, level 4: 51%).
Markers and the hanging indentation scale with the text automatically. */
.reveal li li {
font-size: 0.8em;
}
/*********************************************
* FOOTER
*********************************************/
#ids-footer:not(title-slide) {
opacity: 1;
background: white;
color: #444444;
border-top: dotted orange 2px;
transition: opacity 800ms ease-in-out;
position: fixed;
height: 6%;
line-height: 6%;
z-index: -20;
width: 100%;
letter-spacing: 0em;
text-align: center;
display: table;
}
#ids-footer span {
height: 100%;
line-height: 100%;
z-index: -20;
font-size: 1.8vh;
font-family: "Fira Sans Condensed", "Fira Sans", "Roboto Condensed", "League Gothic", Impact, sans-serif;
display: inline-block;
display: table-cell;
vertical-align: middle;
}
/* Bottom position for the IDS-Footer footer when both progress bar and TOC-Progress are visible */
div.progress[style="display: block;"]~#ids-footer {
bottom: calc(3px + 0vh);
}
/* Bottom position for the IDS-Footer footer when TOC-Progress is visible */
#ids-footer {
bottom: 3px;
}
#ids-footer a {
color: #555555;
}
/* Bottom position for the IDS-Footer footer when progress bar is visible */
div.progress[style="display: block;"]~footer:last-of-type#ids-footer {
bottom: 3px;
}
/* Bottom position for the IDS-Footer footer when neither progress bar nor TOC-Progress are visible */
footer:last-of-type#ids-footer {
bottom: 0px;
}
/* Make IDS-Footer invisible if explicitly indicated */
.no-ids-footer #ids-footer {
opacity: 0;
transition: opacity 800ms ease-in-out;
}
.title-frame #ids-footer {
opacity: 0;
transition: opacity 800ms ease-in-out;
}
.no-toc-progress #ids-footer {
opacity: 0;
transition: opacity 800ms ease-in-out;
}
/* Make IDS-Footer invisible in overview mode */
.overview #ids-footer {
opacity: 0;
transition: opacity 800ms ease-in-out;
}
/* Pinned to the title slide's true bottom-right corner (painted on the slide,
not the unscaled viewport). Its margin mirrors the IDS logo's (top 10px /
right 8px of the slide), so the two sit on one shared inset. */
.reveal .slides section.title-frame {
background-image: url("https://corpora.ids-mannheim.de/slides/reveal.js.ids/images/Mitglied_WGL_transparent.svg");
background-repeat: no-repeat;
background-position: right 8px bottom 10px;
background-size: calc(var(--slide-height) * 0.1) auto;
/* full slide height, so "bottom" really is the slide's bottom edge */
height: 100%;
}
.slide-menu-items, .slide-menu-toolbar {
font-family: "Fira Sans" !important;
}
/*
* Menu controls
*/
body .reveal .slide-menu-button {
color: #aaaaaa !important;
position: fixed;
left: 30px;
bottom: 2%;
vertical-align: middle;
z-index: 30;
font-size: 2vh;
}
#customcontrols>ul {
color: #aaaaaa !important;
position: fixed;
left: 50px;
bottom: 2% !important;
vertical-align: middle;
z-index: 30;
font-size: 2vh;
}
@media only screen and (min-width: 500px) {
#customcontrols>ul {
bottom: 2% !important;
}
}
.reveal .controls .controls-arrow {
position: relative;
width: 3.6em;
height: 3.6em;
bottom: -12px;
right: -4px;
}
.reveal h3, h4, h5, h6 {
text-transform: none !important;
}
.reveal h3, h4, h5, h6 {
text-transform: none !important;
}
.reveal h2+h3 {
margin-top: -0.5em !important;
}
.title-frame h1,
.title-frame h2 {
margin: 0 0 0 0;
background: rgb(246, 168, 0);
color: white;
font-family: "Fira Sans Condensed", "Roboto Condensed", Impact, sans-serif;
font-weight: 600;
line-height: 1.2;
letter-spacing: 0.05ex;
text-transform: uppercase;
width: 100%;
margin-top: 0.5em;
padding-top: 0.5em;
font-size: 1.75em;
margin-left: 0;
text-align: center;
text-shadow: none;
word-wrap: break-word;
}
.title-frame .author {
font-family: "Fira Sans Condensed", sans-serif;
font-weight: 400;
color: #657b83;
margin-top: 10vh;
}
.title-frame .place {
font-family: "Fira Sans Condensed", sans-serif;
margin-top: 40px;
font-weight: 400;
color: #657b83;
}
.title-frame h2 {
margin-top: -3px;
margin-bottom: 1em;
padding-bottom: 0.5em;
font-size: 1em;
}
/*********************************************
* TABLES
*********************************************/
th {
color: rgb(246, 168, 0);
}
table {
font-family: "Fira Sans Condensed", sans-serif;
font-weight: 400;
font-size: 16px;
}
.reveal table.dataTable {
border: #aaaaaa 1px solid;
border-collapse: collapse;
}
.reveal table.dataTable td {
border: #aaaaaa 1px solid;
border-collapse: collapse;
}
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate, table.dataTable thead>tr>th.sorting::before, table.dataTable thead>tr>th.sorting::after, table.dataTable thead>tr>th.sorting_asc::before, table.dataTable thead>tr>th.sorting_asc::after, table.dataTable thead>tr>th.sorting_desc::before, table.dataTable thead>tr>th.sorting_desc::after, table.dataTable thead>tr>th.sorting_asc_disabled::before, table.dataTable thead>tr>th.sorting_asc_disabled::after, table.dataTable thead>tr>th.sorting_desc_disabled::before, table.dataTable thead>tr>th.sorting_desc_disabled::after, table.dataTable thead>tr>td.sorting::before, table.dataTable thead>tr>td.sorting::after, table.dataTable thead>tr>td.sorting_asc::before, table.dataTable thead>tr>td.sorting_asc::after, table.dataTable thead>tr>td.sorting_desc::before, table.dataTable thead>tr>td.sorting_desc::after, table.dataTable thead>tr>td.sorting_asc_disabled::before, table.dataTable thead>tr>td.sorting_asc_disabled::after, table.dataTable thead>tr>td.sorting_desc_disabled::before, table.dataTable thead>tr>td.sorting_desc_disabled::after {
display: none;
}
.caption {
font-family: "Fira Sans Condensed", sans-serif;
font-weight: 400;
font-size: 16px;
text-align: center;
}
/*
table.display td { white-space: nowrap; }
*/
.dt-buttons, .dataTables_filter {
margin-top: 10pt;
}
/* Sort Arrows in DataTables */
table.dataTable thead>tr>th.sorting:before, table.dataTable thead>tr>th.sorting:after, table.dataTable thead>tr>th.sorting_asc:before, table.dataTable thead>tr>th.sorting_asc:after, table.dataTable thead>tr>th.sorting_desc:before, table.dataTable thead>tr>th.sorting_desc:after, table.dataTable thead>tr>th.sorting_asc_disabled:before, table.dataTable thead>tr>th.sorting_asc_disabled:after, table.dataTable thead>tr>th.sorting_desc_disabled:before, table.dataTable thead>tr>th.sorting_desc_disabled:after, table.dataTable thead>tr>td.sorting:before, table.dataTable thead>tr>td.sorting:after, table.dataTable thead>tr>td.sorting_asc:before, table.dataTable thead>tr>td.sorting_asc:after, table.dataTable thead>tr>td.sorting_desc:before, table.dataTable thead>tr>td.sorting_desc:after, table.dataTable thead>tr>td.sorting_asc_disabled:before, table.dataTable thead>tr>td.sorting_asc_disabled:after, table.dataTable thead>tr>td.sorting_desc_disabled:before, table.dataTable thead>tr>td.sorting_desc_disabled:after {
right: 0 !important;
line-height: 80% !important;
}
/*********************************************
* BIBLIOGRAPHY
*********************************************/
.reveal .references {
font-family: "Fira Sans Condensed", sans-serif;
font-size: 16px;
text-align: left;
margin-top: 35px;
max-height: 540px;
font-weight: 400;
color: #253b43;
overflow-y: auto;
}
.hanging-indent>.csl-entry {
padding-left: 22px;
text-indent: -22px;
}
/* .references scopes this above pandoc's CSL defaults (div.csl-entry), which
otherwise win on specificity and pin margin-bottom to 0em. */
.references .csl-entry {
color: #888888;
margin-bottom: 0.5em;
}
/* "Authors (Year):" as a bold dark first line; the theme template's JS wraps
the leading text of each entry in .csl-authors-year (see default.html) --
which part of an entry citeproc wraps in spans depends on the entry type, so
a CSS-only break cannot place it reliably. */
.csl-entry .csl-authors-year {
display: block;
font-weight: bold;
color: #4d616b;
}
.reveal code.sourceCode:last-child+pre {
height: 800px !important;
}
/*********************************************
* ARROWS and SLIDE NUMBERS
*********************************************/
.reveal .controls .controls-arrow:after, .reveal .controls .controls-arrow:before {
width: 13px !important;
/* size */
height: 4px;
/* line width */
}
.reveal .controls {
display: none;
position: absolute;
top: auto;
bottom: -8px;
right: 16px;
left: auto;
z-index: 11;
/* color: #000;*/
pointer-events: none;
font-size: 8px;
}
.reveal .controls .controls-arrow {
position: relative;
height: 3.6em;
width: 1.2em;
/* distance betwee arrows */
bottom: 0;
right: 0;
}
.reveal div.slide-number {
text-align: center;
width: 2em;
position: absolute;
display: block;
right: 29px;
bottom: 22px;
z-index: 31;
font-family: "Fira Sans Condensed", sans-serif;
font-size: 18px;
line-height: 1;
background-color: white;
color: #666;
padding: 0;
}