/*
   Theme Name: PavCay
   Author: Marco "sphakka" Poleggi
   Author URI: https://professional-eth0s.com/
   Description: A minimalistic theme for people having projects
   Version: 1.0.4
   License: GNU Affero General Public License v3 or later
   License URI: https://www.gnu.org/licenses/agpl-3.0.html
   Text Domain: pavcay
   Tags: blog, portfolio, grid-layout, one-column, two-columns, right-sidebar, custom-colors, custom-menu, featured-images, footer-widgets, theme-options, threaded-comments, translation-ready
 */

/*******************************************************************************
   Table of Contents
 *******************************************************************************
   Variables
   Reset
   Fonts
   Theme styles
 ******************************************************************************/

/*******************************************************************************
   Variables
 ******************************************************************************/

:root {
	/* Main color palette */
	--theme-color-1st: #4471b2;
	--theme-color-2nd: #b28732;
	--theme-color-3rd: #364e59;

	/* Sizes -- border-box sizing is default */
	--column-size: 296px;
	--column-gap: 36px;
	--tile-size: 296px;
	--tile-frame: 10px;
	--h-margin-b: 10px;
	--masthead-bbox-pad-tb: 10px;
	--masthead-h1-height: 150px;
	--slider-height-def: 490px;
	--slider-frame: 20px;
	--slider-height-small: calc(var(--slider-height-def) / 2);
	--top-slider-height: var(--slider-height-def);
	--top-slider-nav-top: calc(var(--top-slider-height) / 2);

	/* Images */

	/* Whoa! Must use 'url(...)' herer because referencing 'url(var(...))' is
	   invalid --
	   <https://github.com/csstree/csstree/issues/197#issuecomment-1183839492> */
	--background-image-url: url('assets/images/pavillon_cayla.png');
	--main-logo-small-url: url('../images/logos/logo-pavcay_1line.white.png');
}

/******************************************************************************
   Reset
 ******************************************************************************/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
	text-decoration: none;
	color: #000;
	font-weight: normal;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
/*
   html {
   scroll-padding-top: -var(--header-height);
   } */

body {
	/* scroll-behavior: smooth; */
	line-height: 1.5em;
	font-size: 14px;
	background: linear-gradient(to bottom, rgb(255 255 255 / 80%) 0%, rgb(255 255 255 / 80%) 100%), var(--background-image-url) no-repeat center center fixed;
	background-color: rgb(0 0 0 / 50%);
	background-size: cover;
	font-family: "urw_gothic", sans-serif;
	font-style: normal;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote::before, blockquote::after,
q::before, q::after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
	border-radius: 0;
}

b, strong {
	font-weight: bold;
}

em {
	font-style: italic;;
}

h1, h2, h3, h4, h5, h6 {
	line-height: 1.5em;
}


/******************************************************************************
   Fonts
 ******************************************************************************/

@font-face {
	font-family: nunito;
	src: url('assets/fonts/nunito-bold.woff2') format('woff2'),
	url('assets/fonts/nunito-bold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: nunito;
	src: url('assets/fonts/nunito-light.woff2') format('woff2'),
		 url('assets/fonts/nunito-light.woff') format('woff');
	font-weight: 200;
	font-style: normal;
}

@font-face {
	font-family: nunito;
	src: url('assets/fonts/nunito-regular.woff2') format('woff2'),
		 url('assets/fonts/nunito-regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'urw_gothic';
	src: url('assets/fonts/urw_gothic_l_book.woff2') format('woff2'),
		 url('assets/fonts/urw_gothic_l_book.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'urw_gothic';
	src: url('assets/fonts/urw_gothic_l_bookoblique.woff2') format('woff2'),
		 url('assets/fonts/urw_gothic_l_bookoblique.woff') format('woff');
	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family: 'urw_gothic';
	src: url('assets/fonts/urw_gothic_l_demioblique.woff2') format('woff2'),
		 url('assets/fonts/urw_gothic_l_demioblique.woff') format('woff');
	font-weight: bold;
	font-style: italic;
}

@font-face {
	font-family: 'urw_gothic';
	src: url('assets/fonts/urw_gothic_l_demi.woff2') format('woff2'),
		 url('assets/fonts/urw_gothic_l_demi.woff') format('woff');
	font-weight: bold;
	font-style: normal;
}


@font-face {
	font-family: 'Font Awesome 6 Free';
	src: url('./assets/fonts/fa-solid-900.woff2') format('woff2'),
	url('./assets/fonts/fa-solid-900.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}


/*******************************************************************************
   Theme styles
 *******************************************************************************/


* {
	border-radius: 2px;
}

*, ::after, ::before {
	box-sizing: border-box;
}

small {
	font-size: 70%;
}



/******************************************************************************
   anything else
 ******************************************************************************/

text-slant {
	font-style: italic;
}

blockquote {
	margin-left: 10px;
}

pre {
	font-family: monospace;
	margin: 0 0 0 10px;
}

/* clearfix <http://nicolasgallagher.com/micro-clearfix-hack/> */
.cf::before, .cf::after {
	content: " ";
	display: table;
}

.cf::after {
	clear: both;
}

.center {
	margin-left: auto;
	margin-right: auto;
	display: block;

	/* pour les 'inline-block' */
	text-align: center;
}

.fixed-width {
	width: 960px;
}

/* for objects taking 100% height -- img, etc. */
.fixed-height {
	height: var(--tile-size);
}

.warning {
	color: red;
}

.warning::before {
	font-family: 'Font Awesome 6 Free', sans-serif;
	content: '\f071';
	margin-right: .5em;
}

/* Sticky header => padding-top corrected by JS */
#wrapper {
	width: 960px;
	margin: auto;
}

button, input, select, textarea {
	background-color: var(--theme-color-3rd);
	border: none;
	color: #fff;
	font-size: 14px;
	padding-left: 5px;
	margin: 0;
	border-radius: 2px;
	font-family: nunito, sans-serif, monospace;
}

button:hover, {
	background-color: var(--theme-color-1st);
}

.search-form {
	height: 25px;
	padding: 0;
	display: flex;
}

.search-result {
	color: var(--theme-color-1st);
	font-weight: inherit;
}

.padbox {
	padding: var(--tile-frame);
}


/******************************************************************************
   Content
 ******************************************************************************/

a {
	text-decoration: underline dotted var(--theme-color-1st);
}

a::after {
	font-family: 'Font Awesome 6 Free', sans-serif;
	content: '\f0c1';
	margin-left: 0.2em;
	font-size: 6pt;
	vertical-align: super;
}

a.no-clue::after {
	content: none;
}

li.menu-item a::after {
	content: none;
}

@media (hover: hover) {
	a {
		text-decoration: none;
	}

	a:hover, a:active {
		text-decoration: underline dotted var(--theme-color-1st);
	}
}

nav, footer,
section h2 {
	opacity: 0.95;
	border-radius: 2px;
}

body.admin-bar,
header.admin-bar {
	/* stylelint-disable-next-line custom-property-pattern */
	padding-top: var(--wp-admin--admin-bar--height);
}

/* Admin bar’s user */
.display-name {
	color: #f0f0f1;
}


/******************************************************************************
 * main
 *
 * '.fpage' => front page
 * '.ipage' => internal pages
 *
 * fpage: 3cols:
 *	col w: 960/3 - Dpx = var(--tile-size)
 *	int gap: (960-304*3)/2 = 24px
 ******************************************************************************/

/******************************************************************************
   Slider
 ******************************************************************************/
.swiffy-slider {
	background: rgb(0 0 0 / 30%);
	height: var(--top-slider-height);
	position: relative;
	cursor: grab;
}

.slider-indicators {
	position: relative;
	left: 0;
	right: 0;
	top: 10px;
}

.slider-ind:hover {
	background-color: #fff;
}

.slider-navigation {
	position: relative;
	z-index: 10;

	/* center into the stager */
	top: var(--top-slider-nav-top);
}

.slider-nav:hover {
	background: none;
	margin: 0;
}

.slider-container li {
	display: flex;
	height: calc(var(--top-slider-height) - var(--slider-frame) * 2);
	justify-content: center;
}


.slide-container {
	/* adjust to the slider container */
	width: 100%;
	display: flex;
	background-color: #fff;
}

.slide-info {
	width: 50%;
	padding: 20px;
	margin: auto;
}

.slide-thumb {
	width: 50%;
}

/* let it warp */
.slide-thumb > img {
	width: 100%;
	height: 100%;
}


main {
	padding-top: 30px;
}

main.ipage {
	float: left;
	width: 76%;
}

/* 3 columns */

section {
	text-align: left;
	margin-bottom: 40px;
}

div.columns,
section.columns {
	columns: 3 var(--column-size);
	column-gap: var(--column-gap);
}

div.entry-content,
div.page-content {
	background: #fff;
}

section.columns > div.entry-content {
	column-span: all;
}

article.tile {
	width: 100%;
	margin-bottom: var(--column-gap);
	background: #fff;
	position: relative;
}

/* http://stackoverflow.com/questions/6424088/css-column-breaks#8855458 */
.nobreak {
	display: inline-block;
}


/* sections */

div.fpage,
article.fpage {
	background: #fff;
	margin-bottom: 40px;
	position: relative;
}

h1.page-title {
	font-family: nunito, sans-serif;
	font-size: 44px;
	padding: 0;
	color: var(--theme-color-1st);
	width: auto;
	margin-bottom: 30px;
}


article.fpage h2,
article.ipage h2,
h2.page-title {
	font-family: nunito, sans-serif;
	font-size: 32px;
	background: none;
	color: var(--theme-color-1st);
	font-weight: bold;
	margin-bottom: calc(2 * var(--h-margin-b));
	padding: 0;
	width: auto;
}

h2.page-title.columns {
	text-align: left;
	column-span: all;
}

.fpage h3,
.ipage h3{
	font-size: 16px;
	text-transform: uppercase;
	margin-bottom: var(--h-margin-b);
}

.fpage h4,
.ipage h4 {
	margin-bottom: var(--h-margin-b);
	font-size: 16px;
}

h4.article-meta {
	text-decoration: overline dotted var(--theme-color-1st);
	font-size: 14px;
	text-align: right;
}

article ul {
	list-style: square inside;
	margin: 5px 10px;
}

p, table, dl, pre {
	margin-bottom: 15px;
}

dl.compact dt {
	font-weight: bold;
	float: left;
	margin-right: 5px;
}

dl.compact dd {
	margin-bottom: 5px;
}

dl.compact dt::after {
	content: '\00A0>\00A0';
}

table, td, th {
	padding: 2px 10px;
	border-radius: 0;
}

td, th {
	border-bottom: 1px dotted var(--theme-color-1st);
}

th {
	font-style: italic;
}

section details {
	margin-top: 10px;
}

section details[open] {
	transition: 0.1s ease-in-out;
}

.more-info {
	width: 30px;
	height: 30px;
	font-size: 20px;
	transition: 0.1s;
	cursor: pointer;
	display: block;
	text-align: center;
	color: #fff;
	background-color: var(--theme-color-2nd);
	border-radius: 100% 0 0;
	float: right;
	font-family: "urw_gothic", sans-serif, monospace;
	border: none;
	margin: 0;
}

.more-info:hover,
.ctrl:hover {
	background-color: var(--theme-color-1st);
	color: #fff;
	font-weight: inherit;
}

.more-info.open {
	transform: rotate(-90deg);
	transition: .4s ease-in-out;
}

.more-info::before {
	content: '\1f7a2';
	padding: 0 0 0 3px;
	display: block;
}

.more-info.open::before {
	content: '\2715';
}

button.fpage.more-info {
	margin-right: 10px;
}

button.ctrl {
	font-family: 'Font Awesome 6 Free', sans-serif;
	background-color: var(--theme-color-2nd);
	width: 35px;
	height: 35px;
	font-size: 20px;
	font-weight: bold;
	margin: 0;
}

a.more-info,
span.more-info {
	height: 60px;
	width: 60px;
	padding: 0;
	position: absolute;
	float: none;
	opacity: .8;
}

a.more-info::before,
span.more-info::before {
	font-family: 'Font Awesome 6 Free', sans-serif;
	content: '\2b';
	font-weight: bold;
	font-size: 50px;
	padding: 20px 0 0;
}

article.archive a.more-info,
article.archive span.more-info {
	top: 41.8%;		/* 50% -12.5px (@var(--tile-size)) */
	left: 47.4%;	/* 50% -12.5px (@960px) */
}

article.tile a.more-info,
article.tile span.more-info {
	top: 45%;
	left: 42%;
}

article.excerpt a.more-info,
article.excerpt span.more-info {
	top: 34.8%;		/* 50% -12.5px (@150px) */
	left: 47.4%;	/* 50% -12.5px (@960px) */
}

#toggle-anim::before {
	content: '\f2f1';
	margin-left: 5px;
}

#go-top::before {
	content: '\f062';
	margin-right: 5px;
}

.hidden {
  	display: none;
}

.visible {
  	visibility: visible;
	transition: .4s ease-in-out;
}

.collapsed {
	visibility: collapse;
}

.visuallyhidden {
  	opacity: 0;
	transition: .4s ease-in-out;
}

section details[open] > summary::before {
	content: 'I';
}

section details[open] > summary {
	transform: rotate(-90deg);
	transition: 0.1s;
}

/* center in viewport */
img.center {
	height: 100%;
	width: auto;
	margin-left: 50%;
	transform: translateX(-50%);
}

article.gall-badge,
article.proj-badge {
	margin-bottom: 24px;
}

/* just for indexing, the figcaption displays the same */
article.gall-badge h2,
article.proj-badge h2 {
	display: none;
}


figure.tile {
	height: var(--tile-size);
	width: var(--tile-size);
	position: relative;
	overflow: hidden;
}

/* padbox has padding, so reduce the size */
figure.tile.with-frame {
	height: calc(var(--tile-size) - 2 * var(--tile-frame));
	width: calc(var(--tile-size) - 2 * var(--tile-frame));
	position: relative;
	overflow: hidden;
}

figure.tile figcaption {
	position: absolute;
	width: 100%;
	bottom: 0;
	left: 0;
	font-family: nunito, sans-serif;
	font-size: 18px;
	color: #fff;
	text-align: center;
	padding: 10% 0;
	background: rgb(0 0 0 / 80%);
}

figure.tile figcaption a,
figure.tile figcaption p {
	color: #fff;
}

/* for the extract (used when thumbnail missing)  */
figure.tile.project p {
	width: 70%;
	margin: 15%;
	text-align: center;
}

figure.tile.project figcaption {
	border-radius: 50%;
	width: 50%;
	left: 25%;
	text-align: center;
}

/* raise the hidden caption */
@media (hover: hover) {
	figure.tile figcaption {
		bottom: -75%;
	}

	figure.tile:hover figcaption {
		bottom: 0;
	}
}

/* gallery badges: we get the full WP gallery HTML code but show only the first child */
article.gall-badge div.gallery dl:not(:first-child),
article.gall-badge div.gallery figure:not(:first-child),
article.gall-badge div.gallery-video-container iframe:not(:first-child) {
	display: none;
}

/* hide the secondary caption as we use a master one from the title */
article.gall-badge div.gallery figcaption.gallery-caption,
article.gall-badge div.gallery-video-container figcaption.gallery-caption{
	display: none;
}

div.gallery-icon > a > img {
	width: 100%;
	height: auto;
}

#blog .button-bar {
	position: absolute;
	bottom: 10px;
	width: 65.8%;
}


/***************************************************************
   2.x post
 ***************************************************************/

.rowflx {
	display: flex;
	justify-content: space-between;
}

.author::before {
	content: '>>\00A0\00A0';
}

.date::before {
	content: '\00A0>\00A0\00A0';
}


/******************************************************************************
* internal pages
*/

section.ipage {
	min-height: 340px;
	margin: 0;
}

article.ipage {
	position: relative;
	padding: 0;
	background: #fff;
	margin-bottom: 20px;
	border-bottom: 1px dotted var(--theme-color-1st);
}

article.infos div.image-box img {
	display: block;
	width: 70%;
	margin: 20px auto;
}

/* fix height to have the more-info button well centered */
article.archive {
	height: var(--tile-size);
}

article.excerpt {
	height: 150px;
	overflow: hidden;
}

img.banner {
	margin-bottom: 10px;
	width: 100%;
	height: auto;
}

img.thumbnail {
	margin-bottom: 10px;
	width: 100%;
}


/***************************************************************
2.x comments
***************************************************************/

.comment-form textarea,
.comment-form input {
	width: 72%;
}

.comment-form span.required {
	display: inline-block;
	width: 2%;
}

.comment-form label {
	display: inline-block;
	visibility: hidden;
	width: 24%;
}

.comment-author::before {
	content: '>>\00A0\00A0';
}

.comment-author {
	padding-bottom: 10px;
}

.author .fn,
cite.fn {
	font-weight: bold;
	padding-bottom: 5px;
}

.comment-meta::before {
	content: '\00A0>\00A0\00A0';
}

.comment-meta {
	padding-bottom: 5px;
}

.comment-respond {
	padding: 10px 0 0;
}

/* meta-info: 2 <a>'s in a <p> */

ol.comment-list > li {
	padding: 10px 0 20px;
}

ol.children > li {
	padding: 10px 0 0;
}

ol.children {
	padding-top: 10px;
	margin-left: 15px;
}


/*******************************************************************************
   2.x Forms
 *******************************************************************************/

/* The main contact form covers two colummns, thus it's internally split in
   formbox tiles. But don't bother to expand to full column's width when
   shrinking the screen: it's too complicated! */

.formbox {
	height: auto;
	position: relative;
	overflow: hidden;
	background-color: #fff;
}

.formbox :not(:last-child) label {
	display: block;
	margin-bottom: 20px;
}

.formbox.tile {
	/* with global box-sizing: border-box, no need to remove the frame */
	width: var(--tile-size);
}

.wpcf7-response-output {
	background: #fff;
}

input.wpcf7-form-control,
select.wpcf7-form-control {
	width: 100%;
}

textarea.wpcf7-form-control {
	width: 100%;
	height: 240px;
}

span.acceptance span.wpcf7-list-item-label {
	font-weight: bold;
}

input.wpcf7-captchar {
	width: 3em;
}

img.wpcf7-captchac {
	display: inline-block;
	vertical-align: middle;
}

.buttons.wpcf7-form {
	margin: 10px 0;
}

/* (!) checkboxes always take default color, etc.
   Must be redesigned to change... */
input[type="checkbox"] {
	/* display: inline-block; */
	cursor: pointer;
	/* width: 10px;
	   vertical-align: middle;
	   padding: 0;
	   margin: 0; */
}


button[type="submit"],
button[type="reset"] {
	width: 50px;
	height: 30px;
	border-radius: 15px;
	background-color: var(--theme-color-2nd);
	cursor: pointer;
	font-family: 'Font Awesome 6 Free', sans-serif;
}

button[type="submit"] {
	float: right;
}

button[type="submit"]::before {
	content: '\f1d8';
}

button[type="submit"]:hover,
button[type="reset"]:hover {
	background-color: var(--theme-color-1st);
}

/* layout: search-submit + search-field */
button[type="submit"].search-submit {
	height: 25px;
	width: 25px;
	background-color: var(--theme-color-3rd);
	background-size: 18px;
	cursor: pointer;
	margin: 0;
	vertical-align: middle;
	border-radius: 0 2px 2px 0;
	float: none;
}

button[type="submit"].search-submit::before {
	font-family: 'Font Awesome 6 Free', sans-serif;
	font-weight: bold;
	content: '\f002';
}

/* flex: avoid squeezing the following button */
input[type="search"].search-field {
	width: 90%;
}

.search-field {
	height: 25px;
	border-radius: 2px 0 0 2px;
}


/*******************************************************************************
   2.x Post & page navigation
 *******************************************************************************/

nav.post-navigation *,
nav.pagination * {
	color: #fff;
	font-size: 15px;
	font-family: nunito, sans-serif;
}

nav div.nav-links a {
	text-decoration: none;
}

div.nav-next,
div.nav-previous {
	float: left;
	margin: 0 20px 10px 10px;
	text-align: center;
	background-color: var(--theme-color-2nd);
	padding: 5px;
}

div.nav-next {
	border-radius: 0 15px 15px 0;
}

div.nav-previous {
	border-radius: 15px 0 0 15px;
}

span.nav-subtitle {
	font-family: 'Font Awesome 6 Free', sans-serif;
	font-weight: bold;
}

.nav-title {
	text-transform: uppercase;
}

a.page-numbers,
span.page-numbers {
	/* approximate disc... any better way? */
	padding: 5px 9px;
	border-radius: 100%;
	background-color: var(--theme-color-2nd);
	text-align: center;
}

a.page-numbers.next,
a.page-numbers.prev,
span.page-numbers.arrow {
	font-family: 'Font Awesome 6 Free', sans-serif;
	background: none;
	padding: 0;
	color: var(--theme-color-2nd);
}

span.nav-subtitle.next::before,
span.page-numbers.arrow.next::before {
	content: '\f105';
	margin-left: 5px;
}

span.nav-subtitle.previous::before,
span.page-numbers.arrow.previous::before {
	content: '\f104';
	margin-right: 5px;
}

div.nav-next:hover,
div.nav-previous:hover,
a.page-numbers:hover {
	background-color: var(--theme-color-1st);
}

a.next.page-numbers:hover,
a.prev.page-numbers:hover {
	background: none;
}

span.page-numbers.arrow:hover {
	color: var(--theme-color-1st);
}

span.page-numbers.current {
	background-color: var(--theme-color-1st);
	padding: 5px 9px;
}

span.page-numbers.dots {
	background: none;
	color: var(--theme-color-2nd);
	font-weight: bold
}


/***************************************************************
2.x Sidebar & Widgets
***************************************************************/

aside {
	margin-top: 30px;
}

aside.ipage {
	float: right;
	width: 22%;
	background: #fff;
	text-align: left;
}

aside.ipage h2 {
	margin-bottom: var(--h-margin-b);
	border-bottom: 1px solid var(--theme-color-2nd);
	background: none;
	color: var(--theme-color-2nd);
	padding: 0;
	width: auto;
}

aside .date::after {
	content: '>\00A0';
}

aside .date::before {
	content: '';
}

.widget {
	margin: 0 0 20px;
	padding: 5px;
}

.widget ul > li {
	margin-bottom: 5px;
	line-height: 1.2em;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.widget ul > li::before {
	content: '\26b9';
	color: var(--theme-color-2nd);
	margin-right: 3px;
}

.widget-search form {
	width: auto;
}

.widget-search .search-field {
	width: 87%;
}

.widget .comment-author-link {
	text-decoration: overline dotted var(--theme-color-1st);
}

.recentcomments a:hover {
	text-decoration: underline dotted var(--theme-color-2nd);
}


/***************************************************************
3.x Sreen reader
***************************************************************/

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}


/***************************************************************
4.x shapes, effects, placement
***************************************************************/

.disc-shape {
	border-radius: 50%;
}

.dome-shape {
	border-radius: 50% 50% 0 0;
}

.slice-3h00-shape {
	border-radius: 0 100% 0 0;
}

.slice-9h00-shape {
	border-radius: 100% 0 0;
}

.opaque {
	opacity: .8;
}

.stick-bottom-l {
	z-index: 100;
	position: fixed;
	bottom: 0;
	left: 0;
}

.stick-bottom-r {
	z-index: 100;
	position: fixed;
	bottom: 0;
	right: 0;
}


.highlight {
	background-color: var(--theme-color-1st);
}


/******************************************************************************
 * lightboxes
 ******************************************************************************/

.featherlight-content {
	max-width: 80%;
}

.featherlight-next span,
.featherlight-previous span {
	/* filter: invert(50%);
	   mix-blend-mode: difference; */
	font-weight: bold;
	text-shadow: none;
	-webkit-text-stroke: 1px black;
}

.featherlight-next,
.featherlight-previous {
	top: 44.5%;
	height: 100px;
}

/******************************************************************************
   Main header (masthead)
 ******************************************************************************/

img.rotate-l {
	animation: tourne-l 30s infinite linear;
}

img.rotate-r {
	animation: tourne-r 30s infinite linear;
}

@keyframes tourne-l {
	from { transform: rotate(0deg);}
	to   { transform: rotate(360deg);}
}

@keyframes tourne-r {
	from { transform: rotate(0deg);}
	to   { transform: rotate(-360deg);}
}

/* let it get its height from children elements */
#masthead {
	width: 100%;
	position: fixed;
	top: 0;
	z-index: 100;
	background: rgb(255 255 255 / 90%);
}

#masthead #branding-box {
	padding: var(--masthead-bbox-pad-tb) 0;
	position: relative;
}

#masthead #branding-box.smaller {
	height: 60px;
	/* transition: 0.4s; */
}

#masthead #ctrl-bar {
	margin: 10px auto;
	display: flex;
	justify-content: space-between;
}

#masthead h1 {
	height: var(--masthead-h1-height);
	text-align: center;
	display: flex;
	justify-content: space-between;
}

/* We have a logo instead. But text must be there for SEO */
#masthead h1 .title-text {
	display: none;
}

#masthead h1.smaller {
	height: 50px;
}

/* for two-images logo */
#masthead span.logo-box {
	width: 70%;
	height: 100%;
	display: inline-block;
}

#masthead span.logo-box > a {
	display: flex;
	flex-flow: column wrap;
	height: 100%;
}

#masthead span.logo-box.smaller > a {
	flex-flow: row wrap;
	justify-content: center;
}

#masthead span.logo-box img.logo-2lines {
	height: 50%;
	width: auto;
	object-fit: contain;
}

/* it's on a single line */
#masthead span.logo-box img.logo-2lines.smaller {
	height: 90%;
}


/* side logos */
#masthead .side-logo {
	width: 15%;
}

#masthead .side-logo.logol {
	text-align: left;
}

#masthead .side-logo.logor {
	text-align: right;
}

#masthead #rlogo,
#masthead #llogo {
	height: 80%;
}

#masthead #tlogo.smaller {
	margin-right: 10px;
}

#masthead #blogo.smaller {
	margin-left: 10px;
}

#masthead #site-navigation {
	font-family: nunito, sans-serif;
	font-size: 20px;
	font-weight: 200;
	background-color: var(--theme-color-1st);
}

#masthead #menu-head {
	line-height: 40px;
	display: inline-flex;
	flex-flow: row wrap;
	justify-content: flex-start;
}

#masthead #menu-head a,
#masthead #menu-head a:visited {
	color: #fff;
	padding: 8px 10px 8px 8px;
}

#masthead #menu-head a:hover,
#masthead #menu-head a:active {
	color: #fff;
	text-decoration: none;
	background-color: var(--theme-color-2nd);
	height: 30px;
}

.current-menu-item {
	color: #fff;
	text-decoration: underline solid var(--theme-color-2nd);
}


/******************************************************************************
   Main footer (colophon)
   -> three flexbox columns:

   [left	 |	 middle	 | right		]

   #nav-sec   #sponsor-block   #widget-block
 ******************************************************************************/

#colophon {
	margin-top: 30px;
	width: 100%;
	min-height: 100px;
	background-color: var(--theme-color-1st);
	color: #ccc;
	font-weight: 200;
	z-index: 0;
	font-family: nunito, sans-serif;
	font-size: 16px;
}


#colophon div.flex {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}

#colophon h2 {
	color: #ccc;
	margin-bottom: var(--h-margin-b);
	border-bottom: 1px solid #ccc;
	border-radius: 0;
}

/* need a container to keep the aspect ration while the backround flows around 100% */
#colophon #footer-box {
	padding-top: 10px;
}


/* #nav-sec: left column */

#colophon #nav-sec {
	width: 22%;
	text-align: left;
	margin-bottom: 10px;
}

#colophon #nav-sec .widget a,
#colophon #nav-sec .widget li {
	cursor: pointer;
	color: #ccc;
}

#colophon #nav-sec .widget li:hover {
	color: #fff;
}

#colophon #nav-sec .widget a:hover {
	color: #fff;
}

/* lighbox pop-up's contents */
.details-box {
	border-radius: 4px;
	padding: 0;
	margin: 0;
}


/* sponsors block -- middle column */

#colophon #sponsor-block {
	width: 53.7%;
	margin-bottom: 10px;
}

#colophon #sponsor-block h2 {
	margin-bottom: var(--h-margin-b);
}

#colophon #sponsor-block .sponsors {
	display: inline-flex;
	flex-flow: row wrap;
	justify-content: space-around;
}

#colophon #sponsor-block .sponsor-logo {
	height: 32px;
	margin: 0 2px;

	/* needed because <li>s in #nav_soc get extra space... */
	padding-bottom: 10px;
}


/* #widget-block -- right column */

#colophon #widget-block {
	width: 22%;
	text-align: right;
	margin-bottom: 10px;
}

#colophon #widget-block h2 {
	text-align: right;
}

#colophon #widget-block .widget.social-icons-widget ul {
	margin: 0;
	padding: 0;
	display: inline-flex;
	flex-flow: row wrap;
	justify-content: end;
}

#colophon #widget-block .widget.social-icons-widget li::before {
	content: none;
}

#colophon #widget-block .widget.social-icons-widget li {
	margin: 0 5px;
	padding-bottom: 5.5px;
	overflow: visible;
}

#colophon #widget-block .widget.social-icons-widget a > img {
	filter: opacity(70%);
}

#colophon #widget-block .widget.social-icons-widget a:hover > img {
	transform: scale(1.4);
	filter: opacity(100%);
}


/*******************************************************************************
   Other elements
 ******************************************************************************/

#contact-info :not(:last-child) {
	margin-bottom: 20px;
}

a.post-edit-link::after,
aside ul li a::after,
.nav-links a::after,
#wpadminbar a::after {
	content: none;
}