@charset "UTF-8";

/*
Theme Name: Toms Theme
Author: Tom
Requires at least: 6.0
Requires PHP: 7.0
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/


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

    /* Liberation Sans italic - latin */
@font-face {
font-family: 'Liberation Sans';
font-style: italic;
font-weight: normal;
src: url('assets/fonts/LiberationSans-Italic.woff2') format('woff2'),
        url('assets/fonts/LiberationSans-Italic.woff') format('woff');
}

    /* Liberation Sans bold - latin */
@font-face {
font-family: 'Liberation Sans';
font-style: normal;
font-weight: bold;
src: url('assets/fonts/LiberationSans-Bold.woff2') format('woff2'),
        url('assets/fonts/LiberationSans-Bold.woff') format('woff');
}

    /* Liberation Sans bold italic - latin */
@font-face {
font-family: 'Liberation Sans';
font-style: italic;
font-weight: bold;
src: url('assets/fonts/LiberationSans-BoldItalic.woff2') format('woff2'),
        url('assets/fonts/LiberationSans-BoldItalic.woff') format('woff');
}


.logged-in .site-header {
    margin-top: 32px;
    z-index: 9999;
    position: sticky;
}

/*=============== VARIABLES CSS ===============*/
:root {
  --header-height: 3.5rem;

  /*========== Colors ==========*/
  /*Color mode HSL(hue, saturation, lightness)*/
  --first-color: hsl(0, 85%, 49%);
  --title-color: hsl(0, 100%, 100%);
  --text-color: hsl(230, 12%, 40%);
  --body-color: hsl(230, 100%, 98%);
  --container-color: hsl(230, 100%, 97%);
  --border-color: hsl(230, 25%, 80%);

  /*========== Font and typography ==========*/
  /*.5rem = 8px | 1rem = 16px ...*/
  --body-font: "Liberation Sans", sans-serif;
  --h2-font-size: 1.25rem;
  --normal-font-size: .938rem;

  /*========== Font weight ==========*/
  --font-regular: 400;
  --font-medium: 500;
  --font-semi-bold: 600;

  /*========== z index ==========*/
  --z-fixed: 100;
  --z-modal: 1000;

  /*========== blog page article width ==========*/
  --postwidth: 100%;
}

/*========== Responsive typography ==========*/
/* @media screen and (min-width: 1023px) { */
@media screen and (min-width: 1290px) {
  :root {
    --h2-font-size: 1.5rem;
    --normal-font-size: 1rem;
  }
}

@media (min-width: 960px) {
	:root {
		--postwidth: 33.3333333333%;
		--scrolltop-size: 23px;
	}
}

@media (min-width: 576px) and (max-width: 960px) {
	:root {
		--postwidth: 50%;
		--scrolltop-size: 16px;
	}
}

/*=============== BASE ===============*/
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

body,
input,
button {
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
}

body {
  /* background-color: var(--body-color); */
	background-color: white;
  /* color: var(--text-color); */
	color: #2c2c2c;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}


body .entry-header {
	width: 100%;
	padding-right: 15px;
	padding-left: 15px;
	margin: 0 auto;
	max-width: 1170px;
	line-height: 1.7em;
}

body .single-page-container {
	width: 100%;
	padding-right: 15px;
	padding-left: 15px;
	margin: 0 auto;
	max-width: 1170px;
	line-height: 1.7em;
}

body .entry-header h1, h2, h3, h4, h5, h6 {
	margin-bottom: 30px;
}

body .single-page-container h1, h2, h3, h4, h5, h6 {
	margin-bottom: 30px;
}

body .entry-header h1 {
	font-size: 70px;
	line-height: 1.3em;
}

body .single-page-container h2 {
	font-size: 32px;
}

body .single-page-container p {
	margin-bottom: 20px;
}

input,
button {
  border: none;
  outline: none;
}

ul {
  list-style: none;
}

a {
  /* text-decoration: none; */
	color: #0065cb;
}

.startpage-further-link a {
	color: red;
	text-transform: uppercase;
	font-weight: 600;
}

a:hover {
	color: red;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

:where(.wp-block-columns) {
  margin-bottom: 1.75em;
}

hr {
  color: inherit;
  height: 0;
  border: 0;
  border-top: 2px solid;
  margin: 10px 0 20px;
  display: inline-block;
  width: 100%;
}

.scroll-to-top {
	display: flex;
	position: fixed;
	right: 20px;
	bottom: 30px;
	border: 1px solid red;
	transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
  	align-items: center;
  	justify-content: center;
  	z-index: 999;
	color: red;
	padding: 8px 8px;
	border-radius: 50%;
	background: white;
	cursor: pointer;
	visibility: hidden;
	opacity: 0;
}

.scroll-to-top-icon {
	width: var(--scrolltop-size);
	height: var(--scrolltop-size);
}

/*=============== SINGLE PAGES ===============*/

.startpage-further-link {
	text-align: left;
	padding-top: 10px;
}

.startpage-further-link a {
	color: white;
	background-color: red;
	padding: 15px;
	text-decoration: none;
}

.startpage-further-link a:hover {
	color: red;
	background-color: white;
	border: 1px solid red;
}

.wp-block-post-excerpt__more-link {
	background-color: red;
	padding: 15px;
	color: white;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: 600;
}

.wp-block-post-excerpt__more-link:hover {
	background-color: white;
	color: red;
	border: 1px solid red;
}

ul.wp-block-latest-posts {
	margin: 30px 0;
}

ul.wp-block-latest-posts li {
	padding-bottom: 10px;
}

ul.wp-block-latest-posts a {
	text-decoration: none;
}

body .page-title-wrap {
	margin-top: 60px;
}

body .page-title-wrap .breadcrumbs-wrapper {
	margin-bottom: 30px;
	display: block;
}

body .page-ueber ul {
	list-style: initial;
	padding-left: 20px;
}

body .page-ueber li {
	margin-top: 10px;
}

body .page-veranstaltungen ul {
	list-style: initial;
	padding-left: 20px;
}

body .page-veranstaltungen li {
	margin-top: 10px;
	line-height: 1.3em;
}

body .page-infos ul {
	list-style: initial;
	padding-left: 20px;
	line-height: 2em;
	margin: 30px 0;
}

body .page-infos a {
	text-decoration: underline;
}

body .page-berliner-appell {
	padding-top: 15px;
}

body .page-berliner-appell h3 {
	font-size: 24px;
}

.archive-header {
	margin-top: 30px;
	margin-bottom: 30px;
}

.archive-breadcrumb {
	padding-top: 30px;
}

.search-result article {
	margin-bottom: 40px;
}

.search-result .entry-header {
	padding-left: 0px;
}

.search-result .moretag {
	text-align: center;
	width: 15%;
	margin: 0;
}

.archive-container.not-found {
	margin-top: 30px;
}

/*=============== BLOG SUMMARY PAGE ===============*/

.archive-container {
	width: 100%;
	max-width: 1300px;
	margin: 0 auto;
	padding-right: 15px;
	padding-left: 15px;
}

.archive-container a {
	text-decoration: none;
}

.archive-container > .row {
	display: flex;
	flex-wrap: nowrap;
	margin: 0 -15px;
}

.archive-container > .row > .col {
	max-width: 100%;
	padding: 0 15px;
	margin: 0 auto;
	flex-grow: 1;
}

.archive-container > .row > .index-posts {
	margin-top: 60px;
	margin-bottom: 60px;
}

.posts-wrapper {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 40px;
	margin-left: calc(-1 * var(--gridspacing,30px)/ 2);
	margin-right: calc(-1 * var(--gridspacing,30px)/ 2);
}

.posts-wrapper article {
	margin-bottom: calc(var(--gridspacing,30px));
	padding: 0 calc(var(--gridspacing,30px)/ 2);
}

.posts-wrapper > article {
	width: var(--postwidth);
}

.layout-grid {
	display: flex;
	/*flex-grow: auto;
	flex-shrink: auto;
	flex-basis: 380px;*/
}

article {
	word-break: break-word;
}

body .layout-grid > .article-content-col {
	display: flex;
}

.layout-grid .article-content-col {
	overflow: hidden;
	border-radius: 8px;
	padding: 25px 25px 25px 25px;
}

.layout-grid .article-content-col:has(.img-wrap:first-child) {
	padding-top: 0 !important;
}

.article-content-col {
	width: 100%;
}

.article-content-col .content {
	width: 100%;
	border-bottom: 0 solid;
	display: flex;
	flex-direction: column;
}

.layout-grid .content > * {
	margin-bottom: 20px;
}

.layout-grid .post-thumbnail-wrap {
	margin-right: -25px;
	margin-left: -25px;
}

.post-thumbnail-wrap > a {
	display: block;
}

.post-thumbnail-wrap img {
	display: block;
	aspect-ratio: 16/10;
	object-fit: cover;
	width: 100%;
	height: auto;
	/*max-width: 360px;
	max-height: 270px;
	min-height: 270px;*/
	margin-left: auto;
	margin-right: auto;
	box-shadow: var(--boxshadow,none);
	border-radius: 8px;
	border: 1px solid black;
}

.layout-grid .content > .blog-entry-title {
	margin-bottom: 10px;
}

.blog-entry-title.is-h4 {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3em;
	letter-spacing: 0px;
	text-transform: none;
}

.blog-entry-title.is-h4 a {
	color: black;
}

.blog-entry-title.is-h4 a:hover {
	color: red;
}

.read-more {
	padding-top: 20px;
}

.moretag {
	color: white;
	background-color: red;
	text-align: center;
	display: block;
	padding: 10px;
	font-weight: 600;
	text-transform: uppercase;
	width: 50%;
	margin: auto;
}

.moretag:hover {
	color: red;
	background-color: white;
	border: 1px solid red;
}

.meta-list {
	font-size: .9em;
}

.meta-list li {
	display: inline-block;
}

.meta-list span {
	display: inline-block;
}

.meta-list li.meta:not(:last-child)::after {
	content: "/";
}

.meta-list li:not(:last-child)::after {
	padding: 0 8px;
}

.excerpt-wrap > :last-child {
	margin-bottom: 0;
}

.entry-summary {
	line-height: 1.7em;
	font-size: 16px;
}


/*=============== BLOG SIINGLE POST PAGE ===============*/

.single-post-container {
	width: 100%;
  	padding-right: 15px;
  	padding-left: 15px;
  	margin: 0 auto;
  	max-width: 1300px;
}

.single-post-container > .row {
	display: flex;
	flex-wrap: nowrap;
	margin: 0 -15px;
}

@media (min-width: 960px) {
	.single-post-container .single-post-wrap.col {
		max-width: 70%;
	}
}

.single-post-wrap {
	margin-bottom: 60px;
	padding: 0 15px;
	margin: 0 auto;
	flex-grow: 1;
}

.single-post-wrap > div:not(:last-child) {
	margin-bottom: 60px;
}

.single-post-wrap > div:first-child {
	margin-top: 60px;
}

.attachment-post-thumbnail {
	aspect-ratio: 16/9.5;
	object-fit: cover;
	width: 90%;
	height: auto;
	margin: auto;
	border-radius: 8px;
}

.post-featured-image {
	margin-bottom: 30px;
}

.entry-header {
	text-align: left;
}

.title-meta-wrap .breadcrumbs-wrapper {
	display: block;
	margin-bottom: 30px;
}

.breadcrumbs-wrapper {
	font-size: 14px;
}

.breadcrumbs-wrapper a {
	color: #676767;
	text-decoration: none;
}

.breadcrumbs-wrapper a:hover {
	color: red;
}

.entry-header .title {
	margin-bottom: 10px;
}

.title.entry-title {
	font-size: 28px;
}

@media (min-width: 576px) {
	.title.entry-title {
		font-size: 40px;
	}
}

@media (min-width: 960px) {
	.title.entry-title {
		font-size: 65px;
	}
}

.title.entry-title {
	font-weight: 600;
	line-height: 1.3em;
	letter-spacing: 0px;
	text-transform: none;
	color: #2c2c2c;
}

.entry-title {
	word-wrap: break-word;
}

.meta-list a {
	text-decoration: none;
}

.content-wrap {
	color: #2c2c2c;
	font-size: 16px;
	line-height: 1.7em;
	letter-spacing: 0px;
	text-transform: none;
	font-weight: 400;
	direction: ltr;
}

.single-post-wrap > div:last-child {
	padding-bottom: 30px;
}

.post-categories a {
	text-decoration: none;
}

.post-navigation {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 40px;
}

.next-post > a {
	color: red;
	font-size: 17px;
	text-decoration: none;
}

.next-post > a:hover {
	color: white;
	background-color: red;
}

.prev-post {
	text-align: right;
}

.prev-post > a {
	color: red;
	font-size: 17px;
	text-decoration: none;
}

.prev-post > a:hover {
	color: white;
	background-color: red;
}

.comments-title {
	color: #2c2c2c;
	margin-bottom: 80px;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3em;
	letter-spacing: 0px;
	text-transform: none;
}

#comments ol {
	list-style: none;
}

.comments-list {
	color: #2c2c2c;
	margin-bottom: 80px;
}

.comments-list .children {
	padding-left: 20px;
}

#comments article {
	border-bottom: 2px solid;
	padding-bottom: 40px;
	margin-bottom: 40px;
}

#comments article {
	display: flex;
	gap: 20px;
}

#comments comment-avatar {
	flex-shrink: 0;
}

#comments .avatar {
	border-radius: 100%;
}

#comments img.lazy {
	min-height: 1px;
}

#comments img {
	height: auto;
	max-width: 100%;
}

.comment-content-wrap {
	flex: 1;
}

.edit-reply a {
	text-decoration: none;
}

.comment-respond a {
	text-decoration: none;
}

.comment-header {
	display: flex;
	align-items: center;
	margin-bottom: 30px;
	line-height: 1.7em;
}

.comment-header .vcard {
	display: grid;
}

.comment-header .vcard .author {
	font-weight: 700;
}

.comment-header .vcard a {
	color: #2c2c2c;
	cursor: pointer;
	text-decoration: none;
}

.comment-header .vcard time {
	font-size: .9em;
	opacity: .7;
}

.comment-header .edit-reply {
	font-size: .9em;
	font-weight: 700;
	text-transform: uppercase;
	margin-left: auto;
}

.comment-content {
	margin-bottom: 0 !important;
}

.common-content > :last-child {
	margin-bottom: 0;
}

.is-boxed {
	padding: 20px;
	color: #2c2c2c;
}

@media (min-width: 576px) {
	.is-boxed {
		padding: 30px;
	}
}

@media (min-width: 960px) {
	.is-boxed {
		padding: 40px;
	}
}

#comments .comment-reply-title {
	margin-bottom: 15px;
}

.comment-reply-title {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3em;
	letter-spacing: 0px;
	text-transform: none;
}

.comment-reply-title small {
	float: right;
}

@media (min-width: 769px) {
		#comments .comment-form {
		grid-template-columns: repeat(3,1fr);
	}
}

.comment-form {
	display: grid;
	grid-column-gap: 15px;
	grid-row-gap: 10px;
}

.comment-form p {
	margin-bottom: 30px;
	line-height: 1.7em;
}

@media (min-width: 769px) {
  #comments .comment-form > :not(.comment-form-author):not(.comment-form-url):not(.comment-form-email) {
    grid-column: 1/-1;
  }
}

.comment-form > p:not(.comment-notes) {
  margin-bottom: 0;
}

.comment-form label {
	display: inline-block;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.7em;
}

.logged-in-as {
	line-height: 1.7em;
}

#comments input:not([type="submit"]):not([type="checkbox"]) {
  width: 100%;
}

#comments input[id="author"] {
	border: solid 1px;
	border-color: red;
	border-radius: 5px;
	padding: 10px 12px 10px 12px;
	display: inline-block;
	appearance: none;
	outline: 0;
	line-height: 1.7em;
}

#comments input[id="email"] {
	border: solid 1px;
	border-color: red;
	border-radius: 5px;
	padding: 10px 12px 10px 12px;
	display: inline-block;
	appearance: none;
	outline: 0;
	line-height: 1.7em;
}

#comments input[id="url"] {
	border: solid 1px;
	border-color: red;
	border-radius: 5px;
	padding: 10px 12px 10px 12px;
	display: inline-block;
	appearance: none;
	outline: 0;
	line-height: 1.7em;
}

#comments textarea {
	border: solid 1px;
	border-color: red;
	border-radius: 5px;
	max-width: 100%;
	width: 100%;
	display: block;
	padding: 10px 12px 10px 12px;
	appearance: none;
	outline: 0;
	resize: vertical;
	margin: 0;
	line-height: 1.7em;
}

#comments input[id="author"]:focus {
	border: solid 3px;
	border-color: red;
	box-shadow: 0 0 2px red;
}

#comments input[id="email"]:focus {
	border: solid 3px;
	border-color: red;
	box-shadow: 0 0 2px red;
}

#comments input[id="url"]:focus {
	border: solid 3px;
	border-color: red;
	box-shadow: 0 0 2px red;
}

#comments textarea:focus {
	border: solid 3px;
	border-color: red;
	box-shadow: 0 0 2px red;
}

.comment-form .button.button-primary {
	background-color: red;
	border: solid 1px;
	border-color: black;
	border-radius: 5px;
	cursor: pointer;
	color: white;
	fill: currentColor;
	padding: 12px 24px;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.6em;
	letter-spacing: 0px;
	text-transform: capitalize;
	display: inline-block;
	appearance: none;
	outline: 0;
	text-align: center;
}

.comment-form .button.button-primary:hover {
	background-color: white;
	color: red;
	border: solid 1px;
	border-color: red;
}


/*=============== REUSABLE CSS CLASSES ===============*/
.container {
  max-width: 100%;
  margin-inline: 1.5rem;
}

.main {
  position: relative;
  height: 100vh;
}

.main__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -1;
}

.search__symbol,
.login {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-modal);
  background-color: hsla(230, 75%, 15%, .1);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px); /* For safari */
  padding: 8rem 1.5rem 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s;
}

.search__close,
.login__close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  font-size: 1.5rem;
  color: var(--title-color);
  cursor: pointer;
}

/*=============== HEADER & NAV ===============*/
.header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  /* background-color: var(--body-color); */
  background-color: red;
  /* box-shadow: 0 2px 16px hsla(230, 75%, 32%, .15); */
  /* z-index: var(--z-fixed); */
  z-index: 9999;
}

.nav {
  height: var(--header-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav__logo {
  color: var(--title-color);
  font-weight: var(--font-semi-bold);
  transition: color .4s;
}

.nav__actions {
  display: flex;
  align-items: center;
  column-gap: 1rem;
}

.nav__search, 
.nav__login, 
.nav__toggle, 
.nav__close {
  font-size: 1.25rem;
  color: var(--title-color);
  cursor: pointer;
  transition: color .4s;
}

:is(.nav__logo, .nav__search, .nav__login, .nav__toggle, .nav__link, .nav__close):hover {
  /* color: var(--first-color); */
  color: black;
}


/* Navigation for mobile devices */
/* @media screen and (max-width: 1023px) { */
@media screen and (max-width: 1290px) {
  .nav__menu {
    position: fixed;
    top: -300%;
    left: 0;
    background-color: var(--body-color);
    box-shadow: 0 8px 16px hsla(230, 75%, 32%, .15);
    width: 100%;
    padding-block: 4.5rem 4rem;
    transition: top .4s;
	background-color: red;
	color: white;
	height: 100%;
  }

  .primary-menu {
	display: flex;
	flex-direction: column;
	row-gap: 2.5rem;
	text-align: center;
	}
	
	.nav__list {
		height: 100%;
		overflow-y: scroll;
	}

	.site-header {
		height: 100px !important;
		/* height: 19vh !important; */
		max-height: 100px;
	}

	.site-header.shrinking {
		background-color: red !important;
	}

	.site-header.shrinking .custom-logo-nav {
		display: none !important;
	}

	.site-header .branding .nav__logo {
		display: none;
	}

	.site-header .branding_mobile .nav__logo {
		display: block !important;
	}


	.site-header .branding_mobile .nav__logo {
		position: absolute;
		top: 10px;
	}

	.site-header .branding_mobile .nav__logo .custom-logo {
		/* width: 100px; */
		height: 80px !important;
		width: 80px !important;
		/* max-height: 90px;
		max-width: 90px; */
	}

	.site-header.shrinking .branding_mobile .nav__logo {
		display: block !important;
	}

	.site-header.shrinking .nav_search__form {
		background-color: red !important;
	}

	.site-header.shrinking .search-button {
		background-color: red !important;
		color: white !important;
	}

	.site-header.shrinking .search-icon {
		color: white !important;
	}

	.site-header.shrinking .search-close {
		color: white !important;
	}

	.site-header .active-search {
		max-width: 100%;
		width: 80vw !important;
	}

	.active-search .fa-bars {
		display: none !important;
	}

	.nav__close.active-search .fa-xmark {
		display: none !important;
	}

}

.branding_mobile .nav__logo {
	display: none;
}

.nav__list {
  display: flex;
  flex-direction: column;
  row-gap: 2.5rem;
  text-align: center;
}

/* .menu-list {
	display: flex;
} */

.nav__search {
	position: fixed;
	top: 30px;
	right: 10px;
}

.anim-search {
	position: fixed;
	top: 10px;
	right: -13px;
}

.nav__search :hover {
	color: black;
}

.nav__link {
  color: var(--title-color);
  font-weight: var(--font-semi-bold);
  transition: color .4s;
}

.nav__close {
  position: absolute;
  /* top: 1.15rem; */
  /* right: 1.5rem; */
  top: 1.3rem;
  right: 3.0rem;
}

.nav__toggle {
	position: absolute;
  top: 1.3rem;
  right: 3.0rem;
}

.show-menu .nav__toggle {
	display: none;
}

/* Show menu */
.show-menu {
  top: 0;
}


#menu-primary .sub-menu {
	position: absolute;
	z-index: 99;
	top: 35px;
	right: 0;
	/* display: none; */
	border: 1px solid white;
	opacity: 0;
  	visibility: hidden;
  	transition: 0.2s 0.5s; /* delay of 0.5 seconds on hover off */
	white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
	#menu-primary li:hover .sub-menu {
		/* display: block; */
		opacity: 1;
		visibility: visible;
		transition-delay: 0s; /* react immediately on hover */
	}
	
	#menu-primary li:hover .sub-menu li:hover {
		display: block;
		background-color: red;
	}
	
	#menu-primary .sub-menu a:hover {
		color: black;
	}
}

#menu-primary .sub-menu a {
	color: white;
}

.site-header.shrinking #menu-primary .sub-menu {
	background-color: white;
	border: 1px solid red;
}

.site-header.shrinking #menu-primary li:hover .sub-menu li {
	display: block;
	background-color: white;
}

.site-header.shrinking #menu-primary .sub-menu a {
	color: red;
}

.site-header.shrinking #menu-primary .sub-menu a:hover {
	color: black;
}

#menu-primary li:hover .fa-angle-down {
	color: red;
}

.site-header.shrinking #menu-primary li:hover .fa-angle-down {
	color: white;
}

#menu-primary .sub-menu.mobile-sub {
	/* display: block; */
	opacity: 1;
  	visibility: visible;
	transition: 0s 0s;
	transition-delay: 0s;
	left: 50%;
	transform: translatex(-50%);
	right: auto;
}


/*=============== FOOTER ===============*/

.site-footer {
	color: black;
	background-color: red;
	line-height: 1.7em;
	max-width: 100%;
	margin-top: auto;
}

.site-footer .hfg-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: flex-start;
}

@media (max-width: 960px) {
	.site-footer .hfg-grid {
		grid-template-columns: 1fr;
	}
}

.site-footer .desktop-left {
	width: 100%;
	position: relative;
	min-height: 1px;
	padding-left: 15px;
	padding-right: 15px;
	margin: 4px 0;
}

.site-footer .desktop-right {
	width: 100%;
	position: relative;
	min-height: 1px;
	padding-left: 15px;
	padding-right: 15px;
	margin: 4px 0;
}

@media (min-width: 960px) {
	.site-footer .desktop-left {
		margin: 8px 0;
	}

	.site-footer .desktop-right {
		margin: 8px 0;
	}
}

.site-footer .hfg-slot {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.site-footer .c-left {
	margin: 4px 0;
}

@media (min-width: 960px) {
	.site-footer .left {
		margin: 4px 0;
	}
}

.footer-menu {
	display: flex;
	flex-wrap: wrap;
	/* margin-right: calc(20 / 2 * -1);
	margin-left: calc(20 / 2 * -1); */
	margin-right: -10px;
	margin-left: -10px;
	justify-content: flex-start;
	text-align: left;
}

@media (min-width: 960px) {
	.footer-menu {
		justify-content: flex-end;
		text-align: right;
	}
}

.footer-menu li {
	display: block;
	position: relative;
}

.footer-menu > li {
	/* margin: 0 calc(20 / 2); */
	margin: 0 10px;
	padding: 0 4px;
}

.footer-menu li a {
	color: black;
	min-height: 25px;
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
	text-decoration: none;
}

.footer-menu li a:hover {
	color: white;
}

.footer-menu .current_page_item {
	background-color: white;
}

.footer-menu .current-menu-item a:hover {
	color: black;
}


/*=============== SEARCH ===============*/
/* .search__form {
  display: flex;
  align-items: center;
  column-gap: .5rem;
  background-color: var(--container-color);
  background-color: white;
  box-shadow: 0 8px 32px hsla(230, 75%, 15%, .2);
  padding-inline: 1rem;
  border-radius: .5rem;
  transform: translateY(-1rem);
  transition: transform .4s;
} */

.nav_search__form {
  position: relative;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 999px;
  background-color: red;
  /* box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2); */
  /* padding: 0.75rem; */
  margin: 0 0.5rem;
  transition: width 0.5s;
}

.site-header.shrinking .nav_search__form {
	background-color: white;
}

.search-input {
  background-color: white;
  border: none !important;
  outline: none;
  width: 100%;
  height: 50px;
  border-radius: 999px;
  padding-left: 1rem;
  font-size: large;
  font-weight: bold;
  pointer-events: none;
  color: white;
}

.search-button {
  width: 1.5rem;
  height: 1.5rem;
  /* border-radius: 999px; */
  border: none;
  background-color: red;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  /* transition: all 0.5s; */
}

.site-header.shrinking .search-button {
	background-color: white;
}

.search-icon,
.search-close {
  position: absolute;
  font-size: 1.25rem;
  color: white;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.search-icon:hover,
.search-close:hover {
	color: black;
}

.site-header.shrinking .search-icon,
.site-header.shrinking .search-close {
	color: black;
}

.search-icon {
	opacity: 1;
}

.search-close {
  opacity: 0;
}

.input-wrapper button {
	position: absolute;
	top: 6px;
	right: 35px;
	border: none;
	background-color: transparent;
	opacity: 0;
	pointer-events: none;
}

/* Active Search */

.active-search {
  max-width: 100%;
  width: 88vw;
}

.active-search .search-button {
  left: calc(100% - 2rem);
}

.active-search .search-input {
  pointer-events: initial;
  border: 1px solid white !important;
}

.active-search .input-wrapper button {
	cursor: pointer;
	pointer-events: all;
	opacity: 1;
}

.active-search .search-close {
  opacity: 1;
}

.active-search .search-icon {
  opacity: 0;
}


/* .search__icon {
  font-size: 1.25rem;
  color: var(--title-color);
} */

/* .search__input {
  width: 100%;
  padding-block: 1rem;
  background-color: var(--container-color);
  color: var(--text-color);
} */

/* .search__input::placeholder {
  color: var(--text-color);
} */

/* Show search */
/* .show-search {
  opacity: 1;
  pointer-events: initial;
} */

/* .show-search .search__form {
  transform: translateY(0);
} */


/*=============== BREAKPOINTS ===============*/
/* For medium devices */
@media screen and (min-width: 576px) {
  .search,
  .login {
    padding-top: 10rem;
  }

  .search__form {
    max-width: 450px;
    margin-inline: auto;
  }

  .search__close,
  .login__close {
    width: max-content;
    top: 5rem;
    left: 0;
    right: 0;
    margin-inline: auto;
    font-size: 2rem;
  }

  .login__form {
    max-width: 400px;
    margin-inline: auto;
  }
}

/* For large devices */
/* @media screen and (min-width: 1023px) { */
@media screen and (min-width: 1290px) {
  .nav {
    height: calc(var(--header-height) + 1rem);
    column-gap: 3rem;
  }
  .nav__close, 
  .nav__toggle {
    display: none;
  }
  .nav__menu {
    margin-left: auto;
  }
  .nav__list {
    flex-direction: row;
    column-gap: 3rem;
  }


  .login__form {
    padding: 3rem 2rem 3.5rem;
  }

  	.site-header.shrinking .active-search .search-input {
		border: 1px solid red !important;
		color: black !important;
	}

	.site-header.shrinking ul.primary-menu li {
		background-color: white;
	}

	.site-header.shrinking ul.primary-menu li a {
		color: red;
	}

	/* .site-header.inverted-link-style.shrinking a:hover,
	.site-header.inverted-link-style.shrinking a:focus,
	.site-header.inverted-link-style.shrinking a:active {
		background-color: red;
		color: white;
	} */

	.site-header.shrinking .primary-menu {
		flex-wrap: nowrap;
	}

	.site-header.shrinking .primary-menu .menu-item-622 {
		display: list-item;
		margin-left: 0;
	}

	.site-header.shrinking .primary-menu .menu-item-20 {
		display: none;
	}

	.site-header.shrinking ul.primary-menu li:hover,
	.site-header.shrinking ul.primary-menu li:focus {
		background-color: red;
	}

	.site-header.shrinking ul.primary-menu li:hover a,
	.site-header.shrinking ul.primary-menu li:focus a {
		color: white;
	}

	.site-header.shrinking .primary-menu .current-menu-item {
	/* text-decoration: underline; */
		background-color: red;
		list-style: none;
	}
	
	.site-header.shrinking .primary-menu .sub-menu .current-menu-item {
		background-color: white;
		list-style: none;
	}

	.site-header.shrinking .primary-menu .current-menu-item a {
		/* text-decoration: underline; */
		color: white;
	}

	img.custom-logo {
		margin-left: 20px;
		padding-bottom: 26px;
	}

}

@media screen and (min-width: 1150px) {
  .container {
    margin-inline: auto;
  }
}




/* :root {
	--base-line-height: 1.4;
	--font-size-h1: 2.027em;
	--line-height-h1: 1.1;
	--font-size-h2: 1.802em;
	--line-height-h2: 1.2;
	--font-size-h3: 1.602em;
	--line-height-h3: 1.2;
	--font-size-h4: 1.424em;
	--line-height-h4: 1.2;
	--font-size-h5: 1.266em;
	--line-height-h5: 1.2;
	--font-size-h6: 1em;
	--line-height-h6: var(--base-line-height);
	--font-size-small: 0.889em;
} */

/* * {
	color: inherit;
	font-family: inherit, sans-serif;
	box-sizing: border-box;
}

html {
    font-family: 'Liberation Sans', sans-serif;
	font-size: 1.1em;
	line-height: var(--base-line-height);
} */

/* @media screen and (min-width: 35em) {
	html {
		font-size: 1.25em;
	}
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 1em 0 0;
}

h1 {
	font-size: var(--font-size-h1);
	line-height: var(--line-height-h1);
}

h2 {
	font-size: var(--font-size-h2);
	line-height: var(--line-height-h2);
}

h3 {
	font-size: var(--font-size-h3);
	line-height: var(--line-height-h3);
}

h4 {
	font-size: var(--font-size-h4);
	line-height: var(--line-height-h4);
}

h5 {
	font-size: var(--font-size-h5);
	line-height: var(--line-height-h5);
}

h6 {
	font-size: var(--font-size-h6);
	line-height: var(--line-height-h6);
} */

/* p {
	margin: 0.75em 0 0;
} */

/* ul,
ol,
figure,
.wp-block-image,
.wp-block-cover,
.wp-block-columns,
.wp-block-group,
table {
	margin: 1em;
} */

figure {
	display: block;
}

li + li,
li > ul,
li > ol {
	margin: 0.25em 0 0;
}

a:hover,
a:focus,
a:active {
	text-decoration: none;
}

img,
figure,
input,
textarea {
	max-width: 100%;
}

input,
button,
textarea,
pre {
	font-size: inherit;
}

input:not([type='checkbox']):not([type='radio']),
textarea,
button {
	background-color: transparent;
	border: 1px solid currentColor;
	padding: 0.25em 0.75em 0.35em;
	box-shadow: inset 2px 0 0 transparent;
}

/* input:not([type='checkbox']):not([type='radio']):hover,
input:not([type='checkbox']):not([type='radio']):focus,
input:not([type='checkbox']):not([type='radio']):active,
textarea:hover,
textarea:focus,
textarea:active {
	box-shadow: inset 2px 0 0 currentColor;
	transition: box-shadow 0.25s ease-in-out;
} */

/* input:not([type='checkbox']):not([type='radio']):focus-visible,
textarea:focus-visible {
	outline: none;
} */

input[type='submit']:hover {
	cursor: pointer;
}

label {
	display: block;
}

/* [type="checkbox"] + label {
	display: initial;
} */

label + input,
label + textarea {
	margin-top: 0.25em;
}

img {
	height: auto;
}

.skip-link.screen-reader-text:focus {
	background-color: #eee;
	clip: auto !important;
	clip-path: none;
	color: #444;
	display: block;
	font-size: 1em;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

.inverted-link-style a {
	text-decoration: none;
	color: white;
}

.inverted-link-style .current-menu-item a {
	color: red;
}

/* .inverted-link-style a:hover,
.inverted-link-style a:focus,
.inverted-link-style a:active {
	background-color: white;
	color: red;
	text-decoration: none;
} */

/* .site-header,
.archive-header,
.entry-header,
.entry-content > *,
.entry-footer,
.pagination,
.comments-area,
.site-footer {
	width: calc(100% - 1rem);
	max-width: 60rem;
	margin-right: auto;
	margin-left: auto;
} */

/* @media screen and (min-width: 25em) {
	.site-header,
	.archive-header,
	.entry-header,
	.entry-content > *,
	.entry-footer,
	.pagination,
	.comments-area,
	.site-footer {
		width: calc(100% - 2rem);
	}
} */

.site-header {
	position: sticky;
	top: 0;
	width: 100%;
	z-index: 9999;
	/* position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999; */
    /* max-width: 100%; */
	padding-top: 0;
	/* padding-bottom: 2em; */
	/* padding-bottom: 1px; */
	/* margin-top: 10px; */
	text-align: right;
    background-color: red;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    /* font-size: 1.5em; */
    font-size: 23px;
	/* -moz-font-size: 22px; */

	transition: background-color 800ms;
	transition: display 800ms;
	transition: justify-content 800ms;
}

.site-header.shrinking {
	background-color: white;
	color: red;
	text-align: center;
}

.site-header .primary-menu {
	display: flex;
	flex-wrap: wrap;
	/* gap: 0.05em; */
	justify-content: right;
	margin-top: 0.1px;
	margin-bottom: 10px;
	/* padding-top: 10px; */
	align-items: center;
}

.site-header.shrinking .container {
	border-bottom: 1px solid red;
}

.site-header.shrinking .primary-menu {
	justify-content: center;
	/* border: 1px solid red; */
	/* padding-bottom: 10px; */
}


.site-logo {
    text-align: left;
    margin: 1rem;
	margin-bottom: 0;
}

.site-header.shrinking .nav__logo {
	display: none;
}

.site-header.shrinking #search-btn {
	color: red;
}

.site-header.shrinking #search-btn:hover {
	color: black;
}

a.custom-logo-link {
	pointer-events: none;
}

img.custom-logo {
	/* margin-left: 20px; */
	max-width: 160px;
	height: auto !important;
	pointer-events: all;
}

img.custom-logo:hover {
	transform: scale(1.5);
	background-color: red !important;
	padding-bottom: 10px;
	padding-left: 10px;
	margin-top: 20px;
}

.site-logo a {
	background-color: red !important;
}

.site-logo a:hover {
	background-color: red !important;
}

.wp-block-cover {
	color: white;
	padding-top: 0;
	margin-top: -25px;
	margin-bottom: 30px;
}

.wp-block-cover .has-text-align-center {
	margin-top: 15px;
	margin-bottom: 30px;
}

.start-cover-paragraph {
	margin-bottom: 30px;
}

.entry-content > .wp-block-cover {
    /* max-width: 80rem; */
    color: white;
}

.site-title {
	font-size: 2em;
	font-weight: 400;
	line-height: 1.2;
	margin: 0;
	padding: 0;
}

.site-description {
	font-style: italic;
}

.primary-menu {
	flex-wrap: nowrap;
}

ul.primary-menu li {
	/* display: flex;
	flex-wrap: wrap;
	gap: 1em;
	justify-content: center; */
	list-style: none;
	margin-top: 1.5em;
	padding: 5px;
	/* background-color: red;
	color: white; */
	position: relative;
    margin: 0 calc(var(--spacing)/ 2);
    --spacing: 15px;
}

.site-header .custom-logo-nav {
	position: fixed;
	top: 10px;
	left: 10px;
	display: none;
}

.site-header.shrinking .custom-logo-nav {
	display: block;
	background-color: white !important;
}

.site-header.shrinking .custom-logo-nav:hover {
	background: transparent;
	transform: scale(2.5);
	margin-right: 30px;
	margin-top: 10px;
}

.primary-menu li {
	margin-top: 0.25em;
}

.primary-menu .current-menu-item {
	/* text-decoration: underline; */
	background-color: white;
	color: red;
	list-style: none;
}

.primary-menu .sub-menu .current-menu-item {
	background-color: red;
	color: white;
	list-style: none;
}

.site-header.shrinking .primary-menu .current-menu-item {
	color: white;
}

ul.primary-menu .menu-item-613,
ul.primary-menu .menu-item-622 {
	display: none;
}

ul.primary-menu li:hover,
ul.primary-menu li:focus,
ul.primary-menu li:active {
	background-color: white;
	list-style: none;
}

ul.primary-menu li:hover a {
	color: red;
}


ul li ul.dropdown {
	border: 2px solid black;
    min-width: 100%; /* Set width of the dropdown */
    /* background: #f2f2f2; */
    display: none;
	/* opacity: 0;
	visibility: hidden; */
    position: absolute;
	right: 2px;
    z-index: 999;
    /* left: 0; */
	white-space: nowrap;
	background-color: white;
	color: black;
	text-align: center;
	padding-top: 0;
}

/* body.hasHover ul li:hover ul.dropdown {
    display: block;	Display the dropdown
	color: black;
} */

ul li ul.dropdown li {
    display: block;
	background-color: white;
	color: black;
}

.site-header.inverted-link-style .dropdown a {
	color: red;
}

.site-header.inverted-link-style .dropdown a:hover {
	color: black;
}

.site-header ul li:hover ul.dropdown li:hover {
	background-color: white;
	color: black;
}


.site-header.shrinking ul li:hover ul.dropdown {
	border: 2px solid black;
	background-color: white;
	color: black;
}

.site-header.shrinking ul li:hover ul.dropdown li {
	background-color: white;
}

.site-header.shrinking ul li:hover ul.dropdown li a {
	color: red;
}

.site-header.shrinking.inverted-link-style .dropdown a {
	color: red;
}

.site-header.shrinking.inverted-link-style .dropdown a:hover {
	color: black;
}

.site-header.shrinking ul li:hover ul.dropdown li a:hover {
	background-color: white;
	color: black;
}

.dropdown-menu {
	position: absolute;
	right: 2px;
	/* left: 0;
	right: 0;
	top: calc(100% + .25rem); */
	background-color: white;
	color: red;
	opacity: 0;
	pointer-events: none;
}

.dropdown .active {
	opacity: 1;
}

/* .with-description + .primary-menu-container .primary-menu::before {
	content: '';
	background-color: currentColor;
	position: fixed;
	top: -0.25em;
	left: 50%;
	transform: translateX(-50%);
	width: 2em;
	height: 0px;
	margin-left: 0;
	margin-right: 0;
	margin-top: 10px;
} */

.drdo {
	border: none;
	padding: 1px;
	color: black;
}

.drdo:hover {
	transform: scale(1.3) perspective(1px);
}

.drdoClose {
	border: none;
	padding: 1p;
	color: black;
}

/* .hentry {
	margin-top: 1em;
} */

/* *:not(.screen-reader-text) + .hentry {
	margin-top: 3em;
} */

/* .entry-title {
	margin-top: 0;
} */

/* .entry-date {
	margin-top: 0.125em;
	font-style: italic;
	font-size: var(--font-size-small);
} */

.wp-block-image figcaption {
	font-style: italic;
	font-size: var(--font-size-small);
}

/* .has-background {
	padding: 1rem;
} */

.has-background > :first-child,
.has-background > :first-child > :first-child {
	margin-top: 0;
}

.has-background > :last-child,
.has-background > :last-child > :last-child {
	margin-bottom: 0;
}

.search-form {
	margin-top: 1em;
}

.entry-footer {
	font-style: italic;
	margin-top: 1em;
}

.comments-area {
	margin-top: 3em;
}

.reactions-list {
	padding-left: 0;
}

.comment {
	list-style: none;
}

.comment .comment,
.comment + .comment {
	margin-top: 2.5em;
}

/*.comment-author {
	padding-left: calc(30px + 0.5em);
}*/

.comment-author img {
	margin-left: calc(-30px - 0.5em);
	margin-right: 0;
	position: absolute;
}

.comment-author cite {
	font-style: normal;
}

.comment-metadata {
	margin-top: 0.5em;
	font-size: var(--font-size-small);
	font-style: italic;
}

.comment .reply {
	margin-top: 0.75em;
}

.pagination {
	margin-top: 3em;
}

.page-numbers {
	padding-left: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.page-numbers li + li {
	margin-top: 0;
}

/* .site-footer {
	margin-top: 5em;
	margin-bottom: 3em;
	position: relative;
} */

/* .site-footer::before {
	content: '';
	background-color: currentColor;
	position: absolute;
	top: -1em;
	left: 50%;
	transform: translateX(-50%);
	width: 2em;
	height: 1px;
} */