/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
html {font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;} body {margin: 0;} article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {display: block;} audio, canvas, progress, video {display: inline-block; vertical-align: baseline;} audio:not([controls]) {display: none; height: 0;} [hidden], template {display: none;} a {background-color: transparent;} a:active, a:hover {outline: 0;} abbr[title] {border-bottom: 1px dotted; text-decoration: none;} b, strong {font-weight: bold;} dfn {font-style: italic;} h1 {font-size: 2em;margin: 0.67em 0;} mark {background: #ff0; color: #000;} small {font-size: 80%;} sub, sup {font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;} sup {top: -0.5em;} sub {bottom: -0.25em;} img {border: 0;} svg:not(:root) {overflow: hidden;} figure {margin: 1em 40px;} hr {-moz-box-sizing: content-box; box-sizing: content-box; height: 0;} pre {overflow: auto;} code, kbd, pre, samp {font-family: monospace, monospace; font-size: 1em;} button, input, optgroup, select, textarea {color: inherit; font: inherit; margin: 0;} button {overflow: visible;} button, select {text-transform: none;} button, html input[type="button"], input[type="reset"], input[type="submit"] {-webkit-appearance: button; cursor: pointer;} button[disabled], html input[disabled] {cursor: default;} button::-moz-focus-inner, input::-moz-focus-inner {border: 0; padding: 0;} input {line-height: normal;} input[type="checkbox"], input[type="radio"] {box-sizing: border-box; padding: 0;} input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {height: auto;} input[type="search"] {-webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box;} input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {-webkit-appearance: none;} fieldset {border: 1px solid #7a7575; margin: 0 2px; padding: 0.35em 0.625em 0.75em;} legend {border: 0; padding: 0;} textarea {overflow: auto;} optgroup {font-weight: bold;} table {border-collapse: collapse; border-spacing: 0;} td, th {padding: 0;}


/* .todo, a[href="#"] {background: tomato !important; color: maroon !important;} */


/* ==========================================================================
   HTML5 Boilerplate v5.0.0 | MIT License | http://h5bp.com/
   ========================================================================== */
* {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
html {background: #fff; color: #222; font-size: 1em; line-height: 1.4;}
@media (prefers-reduced-motion: no-preference) {html {scroll-behavior: smooth;}}
::-moz-selection {background: #a26b00; color: rgb(255, 255, 255); text-shadow: none;}
::selection {background: #a26b00; color: rgb(255, 255, 255); text-shadow: none;}
hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}
audio, canvas, iframe, img, svg, video {vertical-align: middle;}
fieldset {border: 0; margin: 0; padding: 0;}
textarea {resize: vertical;}


/* ==========================================================================
   Helper classes
   ========================================================================== */
.hidden {display: none !important; visibility: hidden;}
.visuallyhidden {border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;}
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto;}
.invisible {visibility: hidden;}
.icon {display: inline-block; fill: currentColor; height: 1em; vertical-align: -0.125em; width: 1em;}
.clearfix:before, .clearfix:after {content: " "; display: table;}
.clearfix:after {clear: both;}


/* ==========================================================================
   Grid
   ========================================================================== */
.wrapper {margin: 0 auto; max-width: 1170px; padding: 0 1em; position: relative;}
.col {margin-bottom: 3.25em;}
	.col-full-width {margin-left: 0; margin-right: 0; width: 100%;}


/* ==========================================================================
   Fonts: self-hosted, Latin subset from Google Fonts, licences in fonts/
   ========================================================================== */
@font-face {font-family: 'Roboto'; font-display: swap; font-style: normal; font-weight: 400; src: url('fonts/roboto-400.woff2') format('woff2');}
@font-face {font-family: 'Roboto Slab'; font-display: swap; font-style: normal; font-weight: 400; src: url('fonts/roboto-slab-400.woff2') format('woff2');}
@font-face {font-family: 'Fredericka the Great'; font-display: swap; font-style: normal; font-weight: 400; src: url('fonts/fredericka-the-great-400.woff2') format('woff2');}
@font-face {font-family: 'Shadows Into Light'; font-display: swap; font-style: normal; font-weight: 400; src: url('fonts/shadows-into-light-400.woff2') format('woff2');}


/* ==========================================================================
   Author's custom styles
   ========================================================================== */
body {font: 18px/1.625 Roboto, Calibri, sans-serif; overflow-x: hidden;}
em, strong, q {font-family: 'Roboto Slab', serif;}
q, em {font-style: italic; padding-right: 0.15em;}
abbr {cursor: help;}
a > abbr {cursor: pointer;}
i[lang] {font-style: normal;}
.nvdr {font-size: 0.778em; font-style: italic;}

blockquote {font-family: 'Roboto Slab', serif; font-size: 200%; line-height: 1.35; position: relative; z-index: 1;}
blockquote::before {background: url('img/quote-left.svg') 0 0 / contain no-repeat; content: ''; height: 1.3em; left: -1em; position: absolute; top: -0.3em; width: 1.82em; z-index: -1;}
blockquote cite {display: block; font-size: 50%; text-align: right;}
blockquote cite::before {content: ' ― ';}

/* Lists */
nav ul, .grouping, .fancylist, .listing {list-style: none; margin: 0; padding: 0;}
.nav li, .grouping li, .listing li {list-style: none;}
    nav a {text-decoration: none;}
.grouping li {position: relative;}
.listing li {margin-bottom: 1.4em; overflow: hidden; padding: 0.25em;}
ul li {list-style: circle;}

/* Buttons - props to https://tympanus.net/Development/CreativeButtons/ */
.content-area .button {background: none; border: 0.125em solid #a26b00; color: #a26b00; display: inline-block; margin: 0; outline: none; overflow: hidden; padding: 0.75em 2em; position: relative; text-decoration: none; text-transform: uppercase; transition: all 0.3s;}
.content-area .button::after {background: #a26b00; content: ''; height: 103%; left: 50%; opacity: 0; position: absolute; top: 50%; transform: translateX(-50%) translateY(-50%); transition: all 0.3s; width: 0; z-index: -1;}
.content-area .button:hover, .content-area .button:active {color: #fff;}
.content-area .button:hover::after {opacity: 1; width: 90%;}

/* Images */
figure {margin: 0;}
figure > img {display: block; margin: 0 auto; max-width: 100%;}
figure.col > img {width: 100%;}
.framed {position: relative;}
	figcaption {position: relative;}
.framed > figcaption {padding: 0.5em;}
	.figcaption-standout {background: #fff; color: #7a7575; font-size: 0.8em; line-height: 1.5em; padding: 0 0.25em; position: absolute; right: 0; top: -1.5em;}
	.figcaption-standout::before {border: 0.77em solid #fff; border-color: transparent #fff #fff transparent; content: ''; display: block; height: 0; left: -1.5em; position: absolute; top: 0; width: 0;}
.figcaption-category {color: #7a7575; font-family: 'Roboto Slab', serif;}
.text-pic {background: whitesmoke; border: 0.5em solid #a26b00; margin-top: 0.25em; padding: 0.35em; position: relative;}
	figcaption {position: relative;}
.text-pic > figcaption {background: rgba(255, 255, 255, 0.75); color: #222; font-size: 0.675em;}
	.text-pic > figcaption a {color: #222;}
.simple-linear {margin-top: 1.4em; max-width: 100%;}

/* Data tables */
.overview {margin: 1.4em 0 2.25em; width: 100%;}
.overview :not(thead) tr {border: 1px solid #a26b00; border-width: 1px 0;}
.overview th, .overview td {font-weight: normal; padding: 0.5em 0.75em; text-align: left; vertical-align: top;}
.overview th {color: #7a7575; text-transform: uppercase;}
.overview td > a {display: block; text-decoration: none;}

/* Page navigation */
.nav-pagination {display: table; width: 100%;}
.nav-pagination ul {display: table-row;}
    .nav-pagination li {display: table-cell; text-align: center; width: 33.3%;}
    .pagination-prev {text-align: left;}
    .pagination-next {text-align: right;}

/* Site header */
.site-header {border-bottom: 1px solid rgba(255,255,255,0.5); font-family: 'Roboto Slab', serif; padding: 0.5em 0; position: relative; z-index: 5;}

.logo {background: transparent url('img/logo_tupac-dot-be.svg') 0 0 no-repeat; background-size: auto auto; background-size: contain; display: block; height: 33px; float: left; font-size: 1em; width: 130px;}

.nav-main-toggle {color: white; display: block; float: right; text-decoration: none;}

.js-ready .lang-menu {position: fixed; left:0; top: 0; z-index: 300;}
.nav-lang li {display: inline-block;}
.nav-lang .current {border-bottom: 2px solid rgba(255,255,255,0.5); color: #fff; padding: 0.25em 0.5em;}
.nav-lang a {color: #fff; display: inline-block; padding: 0.25em 0.5em;}

.nav-main-toggle {background: none; border: 0; color: #fff; display: block; float: right; padding: 0; position: relative; text-decoration: none;}
	.nav-main-toggle[aria-expanded="true"] {position: fixed; right: 0.5em; z-index: 300;}
	.nav-main-toggle .icon + .icon, .nav-main-toggle[aria-expanded="true"] .icon:first-child {display: none;}
	.nav-main-toggle[aria-expanded="true"] .icon + .icon {display: inline-block;}
    .nav-main-close {color: whitesmoke; display: block; font-size: 2.25em; text-align: center;}

.site-menu {color: #fff; position: relative; width: 100%; z-index: 100;}
    .site-menu-block {padding: 0; position: relative; z-index: 2;}
    .nav-main {border-top: 1px solid #fff; margin: 0;}
        .nav-main dt {border-bottom: 3px double; color: whitesmoke; font-weight: bold; padding: 0; text-transform: uppercase;}
            .nav-main dt > a, .nav-main dt > button {color: whitesmoke; display: block; padding: 0.5em 1.825em;}
            .nav-main dt > button {background: none; border: 0; letter-spacing: inherit; text-align: left; text-transform: inherit; width: 100%;}
        .nav-main dd {margin: 0;}
        .nav-main li {border-top: 1px solid rgba(255, 255, 255, 0.1); position: relative;}
        .nav-main li a {color: #fff; display: block; font-size: 0.875em; outline: medium none; padding: 0.625em 2.15em; transition: 0.2s linear all;}
		.nav-main li a:hover, .nav-main li a:focus {background-color: rgba(255, 255, 225, 0.15);}
		.nav-main li.current {background: #fff;}
		.nav-main li.current a {color: #a26b00;}
.js-ready .site-menu {background: rgba(186, 130, 57, 0.95); bottom: 0; left: 0; overflow-y: auto; overscroll-behavior: contain; padding-top: 2.75em; position: fixed; right: 0; top: 0; transition: 0.2s linear all; z-index: 150;}
    .js-ready .offscreen {left: -100%; visibility: hidden;}
.menu-open {overflow: hidden;}

.page-header {background: #222 url('img/cover-images/home.jpg') center center no-repeat fixed; background-size: auto auto; background-size: cover; height: 18em; padding-top: 5em; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0;}
.page-header::before {background: transparent url('img/45-degree-fabric-dark.png') repeat fixed 0 0; content: ''; display: block; height: 100%; position: absolute; top: 0; width: 100%; z-index: 0;}
.home-page .page-header {height: 30em; padding-top: 6em;}
.page-title {color: rgba(255,255,255,.9); font-family: 'Fredericka the Great', serif; font-size: 3.4em; position: relative; text-align: center;}

/* Content */
.content-area {padding-bottom: 4em; padding-top: 20em;}
.home-page .content-area {padding-bottom: 0.1px; padding-top: 23em;}
.content-area a {color:#c75000; background-color:transparent;}
.content-area a:visited  {color:#a26b00;}
.content-area a:hover, .content-area a:active, .content-area a:focus  {color:#c75000; background-color:transparent; text-decoration:none;}

.page-footer {margin-top: 3.2em}

.section {padding: 4em 0;}
.section-title {clear: both; color: #a26b00; font-family: 'Roboto Slab', serif; margin-bottom: 2.25em; margin-top: 1.25em; position: relative; text-align: center; text-transform: uppercase;}
.section-title::after {border-top: 3px solid #7a7575; bottom: -0.5em; content: ''; left: 50%; position: absolute; transform: translateX(-50%); width: 3em;}

.article-title {color: #a26b00; font-family: 'Roboto Slab', serif; font-size: 1.25em; line-height: 1; margin: 0; text-transform: uppercase;}

.grouping a {text-decoration: none;}
.grouping {display: flex; flex-direction: row; flex-wrap: wrap;}
.grouping li {background: #fff; border: 1px solid #a26b00; flex-basis: 97.92%; margin: 0 1.04% 3.25em;}
.grouping li img {width: 100%;}
.grouping .article-view-details {background: rgba(186, 130, 57, 0.85); bottom: 0; color: #fff; left: 0; line-height: 18; opacity: 0; position: absolute; right: 0; text-align: center; text-transform: uppercase; top: 0; transition: all 0.2s linear;}
.grouping .article-view-details .icon {margin-right: 0.25em;}
.grouping a:hover .article-view-details {opacity: 1;}

.grouping.grouping-topics > li {background: #a26b00; border: 0; flex-basis: 25%; margin: 0;}

/* 404 page */
.topic-index {display: grid; gap: 1.5em;}
	.topic-index ul {margin: 0; padding-left: 1.25em;}
.grouping.grouping-topics > li:nth-child(odd) {background: #9b6500;}
.grouping-topics a {color: #fff; display: block; font-family: 'Roboto Slab', serif; padding: 4em 0; text-align: center; text-transform: uppercase;}
.grouping-topics a:visited, .grouping-topics a:hover, .grouping-topics a:focus {color: #fff;}
.grouping-topics .icon {display: block; font-size: 200%; margin: 0 auto 0.25rem; transition: all 0.2s linear;}
.grouping-topics .icon-cross {background: transparent url('img/tupac-cross.svg') center center no-repeat scroll; height: 45px; width: auto;}

.section-quote {background: whitesmoke;}

.meta-data {margin: 2em 0;}
.meta-data th {width: 35%;}
.overview-track-list th:first-child, .overview-track-list th:last-child {text-align: center; width: 8%;}
.overview-track-list td:first-child, .overview-track-list td:last-child {text-align: center;}

.song-lyrics {font: inherit; font-size: 0.875em; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word;}

.poetry {background-image: linear-gradient(0deg, transparent 5em, rgba(255,0,0,.2) 0, transparent 5.1em), linear-gradient(rgba(0,0,255,.15) 1px, transparent 0); background-size: 100% 1.4em; font-family: 'Shadows Into Light'; font-size: 1.35em; line-height: 1.4em; overflow: hidden; padding: 0 0.25em; position: relative;  white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word;}

/* Click-to-play video (_video.php) */
.video-embed {align-items: center; aspect-ratio: 16 / 9; background: #2b2727; box-sizing: border-box; color: #fff; display: flex; flex-direction: column; gap: 0.75em; justify-content: center; margin: 1.4em 0; padding: 1.5em; text-align: center;}
.video-title {font-weight: bold; margin: 0;}
.video-note {font-size: 0.875em; margin: 0; max-width: 30em;}
.content-area .video-link, .video-play {background: #a26b00; border: 0; color: #fff; cursor: pointer; display: inline-block; font: inherit; font-weight: bold; padding: 0.75em 1.5em; text-decoration: none;}
.content-area .video-link:visited {color: #fff;}
.content-area .video-link:hover, .content-area .video-link:focus, .video-play:hover, .video-play:focus {background: #c75000; color: #fff;}
.video-link:focus-visible, .video-play:focus-visible {outline: 0.1875em solid #fff; outline-offset: 0.125em;}
.video-link::before, .video-play::before {border-bottom: 0.4em solid transparent; border-left: 0.65em solid currentColor; border-top: 0.4em solid transparent; content: ''; display: inline-block; margin-right: 0.5em; vertical-align: -0.05em;}
.video-embed.is-playing {display: block; padding: 0;}
.video-embed iframe {border: 0; display: block; height: 100%; width: 100%;}

/* Timeline */
.timeline {list-style: none; margin: 2em 0; padding-left: 4em; position: relative;}
.timeline::before {background: #a26b00; content: ''; height: 100%; left: 2em; position: absolute; top: 0; width: 0.1875em;}
.timeline > li {margin-bottom: 4em; position: relative;}
.timeline > li::before, .list-timeline > li::after {content: " "; display: table;}
.timeline > li::after {clear: both;}
.timeline-year {background: #a26b00; border-radius: 50%; color: #fff; display: inline-block; font-family: 'Roboto Slab', serif; font-size: 1.1em; font-weight: bold; left: -4rem; line-height: 4rem; position: absolute; text-align: center; width: 4rem;}
.timeline-events {list-style: none;}
.timeline-events > li {border: 2px solid #a26b00; border-radius: 3px; margin-top: 5em; padding: 0.05em 1em; position: relative;}
.timeline-events > li::before {background: #a26b00; border-radius: 50%; content: ''; display: block; height: 2em; left: -3em; position: absolute; top: 0; width: 2em;}
.timeline-events > li::after {background: #fff; border-radius: 50%; content: ''; display: block; height: 1em; left: -2.5em; position: absolute; top: 0.5em; width: 1em;}
.timeline-events > li > p:first-child::before {border: 0.7rem solid; border-color: transparent #a26b00 transparent transparent; content: ''; height: 0; left: -1.5rem; position: absolute; top: 0.5rem; width: 0;} /*{background: #a26b00; content: ''; height: 0.1875rem; left: -1.5rem; position: absolute; top: 1rem; width: 1.4rem;}*/
.timeline-event-date {background: #a26b00; color: #fff; font-family: 'Roboto Slab', serif; font-size: 1.25em; left: 0; margin: 0; padding: 0.5em; position: absolute; right: 0; top: 0;}
.timeline-events > li > p:nth-child(2) {margin-top: 4em;}

/* Groups */
.overview-groups thead {display: none;}
.overview-groups th, .overview-groups td {display: block; text-align: left;}
.overview-groups td {padding-left: 8.5em; position: relative;}
.overview-groups tbody td::before {content: attr(data-th); color: #7a7575; left: 0.25em; position: absolute; text-transform: uppercase; width: 8.5em;}

/* Tattoos */
.img-tattoos {filter: sepia(0); height: auto; transition: all 0.2s linear; width: auto;}
.img-tattoos:hover {filter: sepia(1);}
.tatsmap {isolation: isolate; margin: 0 auto; position: relative; width: 100%;}
.tatsmap img {display: block; width: 100%;}
.tatsmap .tatsmap-tats {height: 100%; position: absolute; left: 0; top: 0; width: 100%;}
.tatsmap .tatsmap-tats li {background: #fff; border: 1px solid transparent; border-radius: 4px; display: block; filter: alpha(opacity=40); opacity: 0.4; position: absolute; transition: all 0.2s linear; z-index: 100;}
.tatsmap .tatsmap-tats li:hover {background: #000; border: 1px solid #fff; filter: alpha(opacity=40); opacity: 0.4; z-index: 100;}
.tatsmap .tatsmap-tats li > a {display: block; height: 100%; width: 100%;}
.tatsmap-tats-details {list-style: none; margin: 2.8em 0; padding: 0;}
.tatsmap-tats-details p {}

/* Bibliography */
.listing-sources li {margin-bottom: 0; padding: 0;}

/* Site footer */
.site-footer {background: #a26b00; color: #fff; font-size: 0.85rem; padding: 4em 0; position: relative; text-align: center;}
.site-footer::before {border-bottom: 1px solid rgba(255, 255, 255, 0.25); border-top: 1px solid #9b6500; content: ""; height: 0; left: 0; position: absolute; top: 14px; width: 100%;}
.site-footer::after {background: #a26b00 url('img/tupac-cross.png') no-repeat scroll 50% 50%; border-radius: 50%; content: ''; display: block; height: 5em; left: 50%; position: absolute; transform: translateX(-50%); top: -1.5em; width: 5em;}
.site-footer a {color: #fff;}
.site-active {position: relative;}
.site-active::after, .site-active::before {content: ' -- ';}
.site-license {}
.site-license img {display: block; margin: 0.25em auto;}
.nav-site li {display: inline-block; text-transform: lowercase;}
.nav-site li[hidden] {display: none;}
.nav-site li + li::before {content: '|';}
.nav-site a, .nav-site button {display: inline-block; margin: 0 0.5em;}
.nav-site button {background: none; border: 0; color: inherit; cursor: pointer; font: inherit; padding: 0; text-transform: inherit;}
.totop {background: transparent; border: 1px solid #fff; border-radius: 2px; color: #fff; display: block; margin: 2em auto 0; padding: 0.5em 0.75em; text-align: center; text-decoration: none; text-transform: uppercase; width: 3em;}
	.totop:hover, .totop:focus {background: #fff; color: #a26b00;}
/*
.col {margin-bottom: 3.25em;}
	.col-full-width {margin-left: 0; margin-right: 0; width: 100%;}
*/
    


/* ==========================================================================
   Plugins
   ========================================================================== */
/* Consent banner (assets/js/consent.js). Copy this block with the file and adapt the colours. */
.consent {--consent-bg: #7b7575; --consent-text: #fff; --consent-button-bg: #a26b00; --consent-button-text: #fff; --consent-focus: #fff;}
.consent {background: var(--consent-bg); bottom: 0; box-shadow: 0 -0.25em 1em rgba(0, 0, 0, 0.25); box-sizing: border-box; color: var(--consent-text); font-size: 0.875rem; left: 0; line-height: 1.5; max-height: 50vh; overflow-y: auto; padding: 1em; position: fixed; right: 0; text-align: left; z-index: 1000;}
.consent-title {font-size: 1rem; margin: 0 0 0.25em;}
.consent-text {margin: 0;}
.consent a {color: inherit; text-decoration: underline;}
.consent-actions {display: flex; flex-wrap: wrap; gap: 0.5em; margin-top: 0.75em;}
.consent-button {background: var(--consent-button-bg); border: 0.125em solid var(--consent-button-bg); color: var(--consent-button-text); cursor: pointer; flex: 1 1 8em; font: inherit; font-weight: bold; min-height: 2.75em; padding: 0.5em 1em;}
.consent-button:hover {background: transparent; border-color: var(--consent-text); color: var(--consent-text);}
.consent :focus-visible {outline: 0.1875em solid var(--consent-focus); outline-offset: 0.125em;}
.consent-open {scroll-padding-bottom: var(--consent-height, 0);}
.consent-open body {padding-bottom: var(--consent-height, 0);}
@media (min-width: 768px) {
	.consent {align-items: center; display: flex; gap: 2em; padding: 1em 2em;}
	.consent-actions {flex: none; margin-top: 0;}
	.consent-button {flex: none; min-width: 8em;}
}
@media print {
	.consent {display: none;}
}

/* Album slider (home.php): a row of covers that scrolls sideways and snaps, also without JS. The slider feature in main.js adds the buttons. */
.slider {--slider-count: 1; --slider-peek: 40px; position: relative;}
.slider-list {display: flex; list-style: none; margin: 0; overflow-x: auto; overscroll-behavior-x: contain; padding: 0 var(--slider-peek); scroll-padding-inline: var(--slider-peek); scroll-snap-type: x mandatory;}
.slider-list > li {flex: 0 0 calc(100% / var(--slider-count)); list-style: none; scroll-snap-align: start;}
	/* Each cover is wider than its slot, so the next cover lies over its right 30% */
	.slider-list img {display: block; height: auto; width: calc(100% / 0.7);}
	.slider-list > li:last-child {overflow: hidden;}
.slider-button {background: #a26b00; border: 0; border-radius: 50%; color: #fff; display: none; font-size: 1.5em; height: 40px; line-height: 1; padding: 0; position: absolute; top: 50%; transform: translateY(-50%); width: 40px;}
.slider-button:hover, .slider-button:focus {background: #c75000;}
.slider-prev {left: -45px;}
.slider-next {right: -45px;}





/* ==========================================================================
   Media Queries
   ========================================================================== */
@media only screen and (min-width: 480px) {/*body {background: yellow;}*/
	.page-text {margin: 0 2em;}
	.slider {--slider-count: 3;}
	.text-pic > figcaption {bottom: 1em; left: 1em; max-width: 100%; padding: 0.25em; position: absolute; right: 1em; z-index: 10;}
	/*.tatsmap > figcaption {position: static;}*/
	.simple-linear {float: left; margin: 1.4em 1.4em 0 0;}
	p + .simple-linear {margin-top: 0.45em;}
	.poetry {padding: 0 0.75em 0 4em;}
	.poetry::before {border: 1px solid; border-color: transparent rgba(255, 0, 0, 0.25); bottom: 0; content: ''; left: 2.2em; position: absolute; top: 0; width: 4px;}
}

@media only screen and (min-width: 568px) {/*body {background: lime;}*/
	.logo {left: 1em; position: absolute; top: 4em;}
	.nav-main-toggle {display: none;}
	.lang-menu {float: right; position: static !important;}
	.js-ready .site-menu {background: transparent; overflow: visible; padding: 0; position: static;}
	.js-ready .offscreen {visibility: visible;}
	.menu-open {overflow: visible;}
	.nav-main {border: 0; margin: 0; right: -0.5em; position: absolute; text-transform: uppercase; top: 4em;}
		.nav-main dt {border: 0; color: #fff; display: inline-block; margin: 0 1em; padding: 0;}
			.nav-main dt > a, .nav-main dt > button {display: inline; padding: 0; width: auto;}
		.nav-main dt.current a, .nav-main dt.current > button {border-bottom: 3px solid #a26b00;}
	.js-ready .nav-main dd {position: absolute; top: 2em; left: 0; background: #a26b00; width: 70%;}
		.js-ready .nav-main dd:nth-of-type(2) {left: 50%; transform: translateX(-50%);}
		.js-ready .nav-main dd:last-of-type {left: auto; right: 0; }
	.page-header {padding-top: 6em;}
	.home-page .page-header {padding-top: 8em;}
	.grouping li {flex-basis: 47.92%;}
	.grouping-topics a {font-size: 1.25em;}
	.song-lyrics {font-size: 1em;}
	.overview-groups thead {display: table-header-group;}
	.overview-groups th, .overview-groups td {display: table-cell; width: auto;}
	.overview-groups td {padding-left: 0.75em;}
	.overview-groups tbody td::before {content: ''; display: none;}
}

@media (min-width: 620px) {
	.page-text {margin: 0 4em;}
	.pulled-none {display: inline-block;}
	.pulled-left {float: left; margin-left: -4em; margin-right: 2em;}
	.pulled-right {float: right; margin-left: 2em; margin-right: -4em;}
	.pulled-full {margin-left: -4em; margin-right: -4em;}
	.pulled-left, .pulled-right {max-width: 70%;}
}

@media only screen and (min-width: 768px) {/*body {background: maroon;}*/
	.slider {--slider-peek: 60px;}
	.slider-button {display: block;}
	.col {float: left; margin: 0 2.08% 1.25em 0;}
		.col:last-child {margin-right: 0;}
		.col-one-half {width: 48.96%;}
			.col-one-half + .col-one-half:nth-child(even) {margin-right: 0;}
		.col-one-third, .col-two-third {float: none; margin: 0 0 3.25em;}
		.col-one-fourth {width: 23.44%;}
			.col-one-fourth:nth-child(2n+2) {margin-right: 2.08%;}
			.col-one-fourth:nth-child(4n+4) {margin-right: 0;}
		.col-three-fourth {margin-right: 2.08%; width: 74.48%;}
			.col-one-fourth + .col-three-fourth {margin-right: 0;}
		.col-one-sixth {width: 14.933%;}
			.col-one-sixth:nth-child(6n+6) {margin-right: 0;}
	.grouping li {flex-basis: 31.25%;}
	.grouping-family li {flex-basis: 47.92%;}
	.topic-index {grid-template-columns: repeat(3, 1fr);}
	.page-text {margin: 0 8.5em;}
	.pulled-left {margin-left: -5.25em;}
	.pulled-right {margin-right: -5.25em;}
	.pulled-full {margin-left: -5.25em; margin-right: -5.25em;}
}

@media only screen and (min-width: 854px) {/*body {background: slategray;}*/
	.col-one-third, .col-two-third {float: left; margin: 0 2.08% 1.25em 0;}
		.col-one-third {width: 31.9467%;}
		.col-two-third {width: 65.9733%;}
			.col-one-third:nth-child(3n+3) {margin-right: 0;}
	.col-one-fourth {width: 23.44%;}
		.col-one-fourth:nth-child(2n+2) {margin-right: 2.08%;}
		.col-one-fourth:nth-child(4n+4) {margin-right: 0;}
	.col-three-fourth {margin-right: 2.08%; width: 74.48%;}
		.col-one-fourth + .col-three-fourth {margin-right: 0;}
	.col-one-fifth {width: 18.336%;}
		.col-one-fifth:nth-child(5n+5) {margin-right: 0;}
	.grouping li {flex-basis: 22.92%;}
	.grouping-family li {flex-basis: 47.92%;}
}

@media only screen and (min-width: 956px) {/*body {background: tomato;}*/
	.page-header {height: 23em; padding-top: 8em;}
		.home-page .page-header {height: 40em; padding-top: 15em;}
	.page-title {font-size: 4.2em;}
	.content-area {padding-top: 25em;}
		.home-page .content-area {padding-top: 37em;}
}

@media only screen and (min-width: 1140px) {/*body {background: purple;}*/
}


/* ==========================================================================
   Print styles
   ========================================================================== */
@media print {
	*, *:before, *:after {background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important;}
	a, a:visited {text-decoration: underline;}
	a[href]:after {content: " (" attr(href) ")";}
	abbr[title]:after {content: " (" attr(title) ")";}
	a[href^="#"]:after, a[href^="javascript:"]:after {content: "";}
	pre, blockquote {border: 1px solid #999; page-break-inside: avoid;}
	thead {display: table-header-group;}
	tr, img {page-break-inside: avoid;}
	img {max-width: 100% !important;}
	p, h2, h3 {orphans: 3; widows: 3;}
	h2, h3 {page-break-after: avoid;}
}