/*
Theme Name: Allton2019
Theme URI: https://example.com
Author: J√rgen Lang
Author URI: mailto:jwl@worldmusic.de
Description: A fully responsive, SEO-friendly, jQuery-ready, and WordPress theme review guidelines compliant starter theme for designers and developers, which comes with its own built-in CSS grid (https://generic.tools/grid/). This generic/starter/clean/simple/bare/blank/minimalist/example/cheatsheet/white-label/HTML5/CSS3/base/foundation/framework/skeleton/boilerplate/whatever theme was created specifically as a tool to assist with building client sites virtually from scratch or building and submitting your own themes. It's updated to reflect new changes in theme review requirements, to make the process much easier with a higher level of success (some theme authors never make it through), but please post bugs, suggestions for improvement, or support requests on GitHub (https://github.com/bhadaway/generic-theme/issues) if you're getting jammed up on your review ticket. Note: the aim of the project is to meet WordPress guideline requirements, but not necessarily all of its recommendations. The biggest diversion would be the semi-minification of Generic's code. If you prefer the WordPress official coding standard (https://make.wordpress.org/core/handbook/best-practices/coding-standards/) or some other popular standard, you may download a free trial of PhpStorm (https://www.jetbrains.com/phpstorm/) or use some other code formatter/beautifier to automatically and instantly bulk format all the code to your liking. If I was able to help you out, consider making a donation (https://calmestghost.com/donate). Thank you and enjoy!
Version: 1.1
License: GNU General Public License v3 or Later
License URI: https://www.gnu.org/licenses/gpl.html
Tags: one-column, two-columns, right-sidebar, custom-menu, featured-images, microformats, sticky-post, threaded-comments, translation-ready, blog, e-commerce, portfolio
Text Domain: generic

Generic WordPress Theme © 2015-2019 GenericTools
Generic is distributed under the terms of the GNU GPL
*/


/* basic reset as it seems */
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%;
    font: inherit;
    vertical-align: baseline;
}

html {
	scroll-behavior: smooth;
}

body {
	line-height: 1
}

a {
    text-decoration-skip-ink: auto;
}

button {
	outline: 0
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

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

q {
	display: inline;
	font-style: italic;
}

q:before {
	content: '"';
	font-style: normal;
}

q:after {
	content: '"';
	font-style: normal;
}

textarea, input[type="text"], input[type="button"], input[type="submit"], 
input[type="reset"], input[type="search"], input[type="password"] {
	-webkit-appearance: none;
	appearance: none;
	border-radius: 0
}

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

th, td {
	padding: 2px;
}

big {
	font-size: 120%;
}

small, sup, sub {
	font-size: 80%;
}

sup {
	vertical-align: super;
}

sub {
	vertical-align: sub;
}

dd {
	margin-left: 20px;
}

kbd, tt {
	font-family: courier;
	font-size: 12px;
}

ins {
	text-decoration: underline;
}

del, strike, s {
	text-decoration: line-through;
}

dt {
	font-weight: bold;
}

address, cite, var {
	font-style: italic;
}

article, aside, details, figcaption, figure, footer, header,
hgroup, menu, nav, section {
	display: block;
}

* {
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
	/* transition:all 0.5s ease */
}

body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 16px;
	color: var( --darkgrey );
	line-height: normal;
	word-wrap: break-word;
	background: #fff;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: bold;
	margin-bottom: 30px;
}

h2, h3, h4, h5, h6 {
	margin-top: 40px;
}

h1 {
	font-size: 35px;
}

h2 {
	font-size: 30px;
}

h3 {
	font-size: 25px;
}

h4 {
	font-size: 20px;
}

h5 {
	font-size: 18px;
}

h6 {
	font-size: 16px;
}

p {
	margin: 30px 0;
}


* p:last-of-type,
#sidebar .widget-container:last-child {
	margin-bottom: 0;
}

a {
	color: #09f;
}

strong {
	font-weight: bold;
}

em {
	font-style: italic;
}

pre {
	overflow-x: auto;
	white-space: pre-wrap;
}

pre, code {
	font-family: 'courier new', courier, monospace;
}

hr {
	height: 1px;
	border: 0;
	margin: 30px 0;
	background: #ccc;
}

blockquote {
	padding: 15px;
	border-left: 4px solid #ccc;
	margin: 30px 0;
}

blockquote p:first-of-type {
	margin-top: 0;
}

.entry-content ol, .widget-container ol, .comment-body ol {
	list-style: decimal inside;
	text-indent: -18px;
}

.entry-content ul ul, .widget-container ul ul, .comment-body ul ul,
.entry-content ol ol, .widget-container ol ol, .comment-body ol ol {
	margin-top: 0;
	margin-bottom: 0;
}


.entry-content li,
.widget-container li,
.comment-body li {
	line-height: 125%;
	margin: 10px 0;
}

input, textarea {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	padding: 15px;
	border: 0;
	outline: 0;
	margin-top: 10px;
	background: #f6f6f6;
}

input[type="submit"],
#menu .toggle:hover {
	cursor: pointer;
}

input[type="search"] {
	-webkit-appearance: textfield;
}

a img, input[type="image"], iframe {
	border: 0;
}

img, video, audio, table, select, textarea {
	_max-width: 100% !important; /* REALLY?? */
	height: auto;
}

table {
	_width: 100%;
	_margin: 30px 0;
}

#wrapper {
	max-width: 100%;
	margin: 0 auto;
}

#header, #container, #footer {
	padding: 5%;
}

#container {
	background: #fff;
}

#container:after {
	display: table;
	content: "";
	clear: both;
}

/* only valid for templates with sidebar */
#content {
	width: 75%;
	padding-right: 5%;
	float: left;
}

/* see above */
#sidebar {
	width: 25%;
	float: right;
}

#footer {
	clear: both;
}

#menu {
	margin-top: 20px;
}

#menu ul {
	font-size: 0;
}

#menu ul,
#menu ul li {
	display: inline;
	margin: 0;
	padding: 0;
	list-style: none;
}

#menu ul li {
	position: relative;
}

#menu ul li a {
	display: inline-block;
	font-size: 18px;
	color: #fff;
	text-decoration: none;
	line-height: 33px;
	padding-bottom: 10px;
	margin-top: -1px;
	margin-right: 25px;
}

#menu ul li a:hover {
	color: #777;
	text-decoration: none;
}

#menu ul li.menu-item-has-children > a:after,
#menu ul li.page_item_has_children > a:after {
	font-family: serif;
	content: " ▾";
}

#menu ul li ul {
	display: none;
	position: absolute;
	top: 20px;
	left: 0;
	z-index: 200;
}

#menu ul li:hover ul {
	display: inline-block;
}

#menu ul ul {
	display: none;
}

#menu ul li:hover ul {
	display: block;
}

#menu ul li:hover ul li a {
	width: 250px;
	font-size: 14px;
	color: #333;
	line-height: 20px;
	padding: 15px;
	border: 1px solid #eee;
	background: #fff;
}

#menu ul li:hover ul li a:hover {
	color: #777;
}

#menu .toggle {
	display: none;
	color: #fff;
	text-align: center;
}

#menu .menu-icon {
	font-size: 60px;
}

#search {
	float: right;
}

#search .search-field {
	width: 200px;
	height: 36px;
	padding: 10px;
	margin-top: 0;
	background-color: #fff;
}

.widget-container .search-field {
	width: 100%;
}

.error404 .entry-content .search-field,
.search .entry-content .search-field {
	width: 200px;
	margin-top: 30px;
}

.error404 .entry-content .search-field,
.search .entry-content .search-field,
.widget-container .search-field {
	background-color: #f6f6f6;
}

.search-field {
	background: url(images/find.png) no-repeat 98% center / 24px auto;
}

.button, button, input[type="submit"] {
	display: inline-block;
	font-family: georgia, serif;
	font-size: 18px;
	color: #fff;
	text-align: center;
	text-decoration: none;
	padding: 15px 25px;
	border: 0;
	background: #09f;
	opacity: 1;
}

.button:hover, button:hover, input[type="submit"]:hover {
	cursor: pointer;
	opacity: 0.8;
}

#site-title a {
	font-size: 40px;
	font-weight: normal;
	color: #fff;
	text-decoration: none;
	display: inline;
}

#site-title h1 {
	margin-bottom: 0;
}

/*
.single h1.entry-title a {
	color: #777;
	text-decoration: none;
}
*/

h2.entry-title,
h3.widget-title {
	margin-top: 0;
}

#commentform label {
	display: block;
}

#commentform #comment {
	width: 100%;
	max-width: 400px !important;
	height: auto;
}

#comments .comment-author {
	line-height: 14px;
}

#comments .comment-author img {
	margin-right: 5px;
	float: left;
}

#comments .comment {
	margin: 20px 10px;
}

#comments .comment-body {
	padding: 15px;
}

#comments .odd > .comment-body {
	background: #f6f6f6;
}

#comments .comment-body > p {
	font-size: 16px;
	margin: 15px 0 0;
}

#copyright {
	text-align: center;
}

.entry-meta, .entry-footer, .archive-meta {
	margin: 30px 0;
}

.entry-footer {
	clear: both;
}

#copyright, #copyright a,
.entry-meta, .entry-meta a, .entry-footer, .entry-footer a,
.comment-meta, .comment-meta a, .comment-author, .comment-author a {
	font-size: 14px;
	color: #aaa;
}

.sticky {
	padding-bottom: 60px;
	border-bottom: 4px solid #ccc;
}

.bypostauthor {}

.post, .widget-container, .search article {
	margin-bottom: 60px;
}

.post:last-of-type {
	margin-bottom: 0;
}

.wp-caption {
	width: auto !important; /* REALLY? */
}

.wp-caption.aligncenter, .wp-caption-text, .gallery-caption {
	text-align: center;
}

.alignleft {
	margin: 0 30px 30px 0;
	float: left;
}

.alignright {
	margin: 0 0 30px 30px;
	float: right;
}

.aligncenter {
	display: block;
	margin: 30px auto;
	clear: both;
}

.wp-post-image {
	display: block;
	margin-bottom: 30px;
}

.entry-attachment img {
	display: block;
	margin: 60px auto 30px;
}

.attachment .entry-caption {
	text-align: center;
}

.nav-links {
	margin-top: 30px;
}

.nav-links a, #nav-above a {
	text-decoration: none;
}

#nav-above a {
	display: block;
	font-family: tahoma, sans-serif;
	font-size: 50px;
	color: #777;
	line-height: 0;
	margin: 30px 0 15px;
}

.nav-previous {
	text-align: left;
	float: left;
}

.nav-next {
	text-align: right;
	float: right;
}

.note {
	display: block;
	font-size: 14px;
	padding: 20px;
	margin: 30px 0;
}

.blue, .blue *, .blue-dark, .blue-dark *,
.green, .green *, .green-dark, .green-dark *,
.orange, .orange *, .purple, .purple *,
.red, .red *, .black, .black * {
    color: #fff; /* whitewashed!! */
}

.white, .white *, .yellow, .yellow * {
    color: #000; /* blackwashed!! */
}

.white {
	background-color: #fff !important;
}

.blue {
	background-color: #09f !important;
}

.blue-dark {
	background-color: #1c78b5 !important;
}

.green {
	background-color: #91da29 !important;
}

.green-dark {
	background-color: #5d8c1a !important;
}

.orange {
	background-color: #f98733 !important;
}

.purple {
	background-color: #bb6cf8 !important;
}

.red {
	background-color: #ef645d !important;
}

.yellow {
	background-color: #f8f658 !important;
}

.black {
	background-color: #4a4a45 !important;
}

.lighter {
	background-color: rgba(255, 255, 255, 0.05);
}

.darker {
	background-color: rgba(0, 0, 0, 0.05);
}

.box, .box-2, .box-3, .box-4, .box-5, .box-6,
.box-1-3, .box-2-3 {
	display: inline-block;
	width: 100%;
	padding: 5%;
	vertical-align: top;
	float: left;
}

.box-2 {
	width: 50%;
}

.box-3, .box-1-3 {
	width: 33.3333333%;
}

.box-4 {
	width: 25%;
}

.box-5 {
	width: 20%;
}

.box-6 {
	width: 16.6666667%;
}

.box-2-3 {
	width: 66.6666666%;
}

.left {
	text-align: left;
}

.center {
	text-align: center;
}

.right {
	text-align: right;
}

.float-left {
	float: left;
}

.float-right {
	float: right;
}

.clear {
	clear: both;
}

.clear-left {
	clear: left;
}

.clear-right {
	clear: right;
}

.clear-float:after,
.boxes:after {
	display: table;
	content: "";
	clear: both;
}

@media(max-width:1024px) {
	.box-5, .box-6 {
		width: 25%;
	}
	.boxes .box-5:nth-child(5) {
		width: 100%;
	}
	.boxes .box-6:nth-child(5),
	.boxes .box-6:nth-child(6) {
		width: 50%;
	}
}

/* mobile breakpoint? */
@media(max-width:800px) {
	#header, #footer {
		text-align:							left;
	}
	
	/* reset */
	#menu > div.menu-main-container > ul {
		float:									none;
	}
	
	#content, #sidebar {
		width: 100%;
		padding: 0;
	}
	
	#search {
		float: none
	}
	
	#search .search-field {
		width: 100%;
	}
	
/* HAMBURGER */
/* check breakpoint! */
	#menu.checked {
		width:								100%;
		height:								100%;
		height:								4rem;
		z-index:							100000;
		
		margin-left:					-5rem;
	}
	
	#menu.checked #menu-main {
		background: rgba( 50,50,50,0.9 );
		
		position:		absolute;
		left:				0;
		top:				var( --header-height );
	}
	
	#menu.checked ul ul {
		margin-left:					1rem;
		margin-top:						0.2rem;
		_background-color:			transparent;
	}
	
	#menu.checked::before {
		_content: 'Well hello there';
		_float: left;
	}
	
	#menu label.toggle {
		display:							block;
	}
	
	#menu ul, #menu ul ul {
		display:							none;
	}
		
	#menu input.toggle:checked + div > ul,
	#menu input.toggle:checked + div > ul ul {
		display:							block;
		position:							relative;
		top:									0;
		padding:							0;
	}
	
	#menu input.toggle:checked + div > ul {
		padding-bottom:				10px;
	}
	
	#menu input.toggle:checked + div > ul li a,
	#menu input.toggle:checked + div > ul ul li a {

		display:							inline-block;
		width:								100%;
		font-size:						18px;
		color:								#fff;
		line-height:					20px;
		padding:							0.5rem 0 0.25rem 1rem;
		border:								0;
		margin:								0;

		background:						transparent;
	}
	
	#menu input.toggle:checked + div > ul ul li a {
			color:							#ccc;
	}
	
	#menu input.toggle:checked + div > ul ul li a:hover,
	#menu input.toggle:checked + div > ul ul li a:active	 {
			color:							white;
	}
	
	.box-4, .box-5, .box-6 {
		width: 50%;
	}
}

/* why one pixel less? */
@media( max-width:800px ) {
	.single .nav-links .nav-previous,
	.single .nav-links .nav-next {
		float: none;
	}
	.box-3 {
		width: 50%;
	}
	.boxes .box-3:nth-child(3) {
			width: 100%;
	}
}

@media(max-width:480px) {
	#header, #container, #footer {
		_padding: 10%
	}
	
	.wp-caption, input, textarea, .button {
		width: 100% !important; /* REALLY? */
	}
	
	input[type="checkbox"], input[type="radio"] {
		width: auto !important; /* REALLY? */
	}
	
	.box-2, .box-3, .box-4, .box-5, .box-6,
	.boxes .box-6:nth-child(5), .boxes .box-6:nth-child(6),
	.box-2-3, .box-1-3 {
		width: 100%;
	}
}

@media print {
	#content {
		width: 100%;
		color: #000;
		padding: 0;
		margin: 0;
		background: #fff;
		float: none;
	}
	
	#header, #sidebar, #footer {
		display: none;
	}
}

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

.form-allowed-tags, .search-submit {
	display: none !important; /* REALLY? */
}

/* ----------------------------------------------------------------------*/
/* ALLTON OVERRIDES */
/* ----------------------------------------------------------------------*/

/* Set up CSS vars  */
/* change as needed */

:root {

	--almost-white:				rgb(245,245,245);
	--lightergrey:				rgb(160,160,160);  /* e.g. footer font */
	--lightgrey:					rgb(130,130,130);  /* e.g. footer font */
	--darkgrey:						rgb(61,64,69);     /* anthrazite, also footer bg color */
	--med-darkgrey:				rgb(79,79,79);     /* h2 im Blog ? */
	--darkergrey:         rgb(48,48,48);     /* regular font color */
	--greyish:						rgb(143,142,108);
	--brownish:						rgb(173,127,81);   /* headings and top menu links */
	--bluish:							rgb(44, 161, 173); /* links in main prose */
	
	--steffi-link:				rgb(173, 142, 108); /* = #ad8e6c = greyish! */
	--steffi-link-act:		rgb(112, 111, 111); /* = #706f6f */
	--steffi-link-hov:		rgb(112, 111, 111);
	--steffi-link-vis:		rgb(173, 142, 108);
	
	
	--font-color:					var( --darkgrey );
	--heading-color:			var( --brownish );
	--footer-color:				var( --lightgrey );
	--footer-link-color:	var( --lightergrey );

	--link-color:					var( --bluish );
	--link-color-active:	var( --bluish );

	
	
	--heading-font:				'Asap', Arial, sans-serif;
	--std-font:						'Open Sans', Arial, sans-serif;
	
	--prev-img-height:		200px; /* preview image height */

	--std-margin-hor:			2rem;
	--std-margin-vert:		2rem;
	--std-padding:				1rem;

	--std-border:					1px solid var( --almost-white );
	--std-border-med:			1px solid var( --lightergrey );
	--std-border-dark:		1px solid var( --darkgrey );
	
	--big-breakpoint:			1300px; /* unfortunately this doesn't work in media queries */
	--mobile-breakpoint:	800px;
	

	--std-shadow:					drop-shadow(2px 2px 3px rgba(0,0,0,0.4));
	--std-shadow-sm:		  2px 2px 4px rgba(0,0,0,0.5);
	
	--title-outline:			-1px -1px 0 var( --darkgrey ),
												 1px -1px 0 var( --darkgrey ),
												-1px  1px 0 var( --darkgrey ),
										     1px  1px 0 var( --darkgrey );
	
	--title-outline-lite:	-1px -1px 0 var( --almost-white ),
												 1px -1px 0 var( --almost-white ),
												-1px  1px 0 var( --almost-white ),
										     1px  1px 0 var( --almost-white );
	
	--header-icon-size:		30px;
	--header-height:			5rem;

	--fontsize-monster:		5rem;
	--fontsize-mega:			4rem;
	--fontsize-huge:			3rem;
	--fontsize-big:				2.25rem; /* 36px */
	--fontsize-med:				1.5rem;  /* 24px */
	--fontsize-sm:				1rem;    /* 16px */
	--fontsize-prose:			0.9rem;
	
	--std-transition:			all 0.5s;
}

/* font settings */
h1,h2,h3,h4 {
	margin-top:						2.5rem;   /* 40px */
	_margin-bottom:				1.875rem; /* 30px */
	margin-bottom:				calc( 1.875rem / 2 );

	font-family:					var( --heading-font );
	font-weight:					normal;
	color:								var( --heading-color );
}

h1 {
	font-size:	var( --fontsize-big );
	color: 			#ad8e6c;
}

h2 {
	font-size:	var( --fontsize-big );
	color: 			#706f6f;
}

h3 {
	font-size:	var( --fontsize-med );
	color: 			#2ca1ad;
}

h4 {
	font-size:	var( --fontsize-med );
	color: 			#ad8e6c; /* geändert in Absprache mit Caspar 28/03/2019 */
}

h5 {
	font-size:	var( --fontsize-sm );
	color: 			#2ca1ad;
	font-weight: bold;
}

h6 {
	font-size:	var( --fontsize-sm );
	color: 			#706f6f;
	font-weight: bold;
}

/* general font settings for prose, content, entries, posts, pages...  */
/* shouldn't this be set as a general body setting and then inherited? */
#content p,
.single-post #content p,
#content .entry-content li,
.single-post #content li {

	font-family:					var( --std-font );
	font-size:						var( --fontsize-prose );
	line-height:					1.4rem;
	color:								var( --font-color );

}


.single-post .entry-content + footer {
	padding-bottom:				4rem;
	margin-left:					var( --std-margin-hor );
	margin-right:					var( --std-margin-hor );
}


/* LINKS */
a, a:visited {
	color:								var( --steffi-link );
}

a:hover, a:active {
	color:								var( --steffi-link-act );
}

a {
	text-decoration:			none;
}

#tribe-events-content ul,
.entry-content ul {
	list-style-type:			disc;
	margin-left:					calc( var( --std-margin-hor ) /2 );
}


/* reset */
body, #header, #container, #footer {
	padding:							0;
	margin:								0;
}

/* reset room for sidebar for full width template */
.single-post #content,
.wp-block-advanced-gutenberg-blocks-intro,
.page-template-default #content,
.tribe-events-page-template #content {

	width:								100%;
	float:								none;
	padding:							0;

}

header.header > .thumbnail-container {
	border-top:						var( --std-border );	
	border-bottom:				var( --std-border );		
}

header.header > .thumbnail-container > img {
	margin-bottom:				0;

	max-height:						85vh;
	max-width: 						100%;

	object-fit: 					cover;
	object-position: 			center center;

}


/* article featured image */
/* needs long selector for specifity override without !important */
img.post_thumbnail.wp-post-image, /* tribe events list */
img.attachment-post-thumbnail.size-post-thumbnail.wp-post-image {

	width:								100%;
	max-width:						100%;
}


/* e.g. column headings */
.wp-block-column > h1:first-child,
.wp-block-column > h2:first-child,
.wp-block-column > h3:first-child,
.wp-block-column > h4:first-child {
	margin-top:					0;
}

/* 
	Re-set column margins using rems
	This overrides the standard behaviour defined
	in /wp-includes/css/dist/block-library/style.min.css
*/
@media (min-width: 600px) {

	.wp-block-columns {
		margin-bottom:		var( --std-margin-vert );
	}

	/* make column grow full width */
	/* overriding flex-basis: 50%  */
	.wp-block-column {
		flex-grow:				1;
	}

	.wp-block-column:not(:last-child) {
		margin-right:			var( --std-margin-hor );
	}

	 /* reset for smaller column gaps */
	.wp-block-column:not(:first-child),
	.wp-block-column:nth-child(2n) {
		margin-left:			0;
	}
	
	.wp-block-column:nth-child(odd) {
		margin-right:			var( --std-margin-hor );
	}
	
	 /* reset for correct right margin of 3cols */
	.wp-block-column:last-child {
		margin-right:			0;
	}
}


/* horizontal margin for: header, main content and footer widgets */
#header, .entry-content, .wp-block-table, #footer-widgets {

	max-width: 					calc( 100% - var( --std-margin-hor ) * 2 );
	width: 							calc( 100% - var( --std-margin-hor ) * 2 );

	margin-left:				var( --std-margin-hor );
	margin-right:				var( --std-margin-hor );
}

/* Events Calendar */
#tribe-events-pg-template {
	margin:							0 var( --std-margin-hor );
}

/* can now disable this in template */
.tribe-events-title-bar, .tribe-bar-disabled {
	display: none;
}

@media only screen and ( max-width: 800px ) {
	.tribe-block.tribe-block__venue.tribe-block__venue--has-map {
		display:					flex;
		flex-direction:		column;
	}
	
	.tribe-block__venue.tribe-block__venue--has-map .tribe-block__venue__map, .tribe-block__venue.tribe-block__venue--has-map .tribe-block__venue__meta {
		width:						100%;
	}
	
	.tribe-events-schedule__datetime {
		_text-align:			center;
	}
		
	#tribe-events-footer ul.tribe-events-sub-nav {
		display:					flex;
	}
	
	#tribe-events-footer ul.tribe-events-sub-nav > li {
		width:						50%;
		background-color: var( --darkgrey );
	}
	
	ul.tribe-events-sub-nav a,
	ul.tribe-events-sub-nav a:visited {
		display:					block;
		height:						100%;
		background-color: transparent;
		color:						var( --footer-link-color );
	}

	ul.tribe-events-sub-nav a:hover,
	ul.tribe-events-sub-nav a:active	 {
		color:						white;
	}
}



/* limit header and main content area   */
/* width and center it for big screens  */
/* wish I could use var() in the MQ     */
/* NOTE: #header and header.header are DIFFERENT THINGS */
@media only screen and ( min-width: 1300px ) {

	/* 'header.header .entry-title' needed for specifity */
	#header, #footer-widgets, header.header .entry-title,
	#tribe-events,
	.wp-block-columns, .wp-block-table, 
	.block-title-and-icons,
	.lcp_catlist,
	.wp-block-advanced-gutenberg-blocks-intro,
	.single-post .entry-content + footer,
	.entry-content > ul,
	.entry-content > ol,
	.entry-content > h1, 	
	.entry-content > h2, 	
	.entry-content > h3, 	
	.entry-content > h4, 	
	.entry-content > h5, 	
	.entry-content > h6,
	.entry-content > p,
	.entry-content > .wp-block-table,
	.entry-content .wp-block-image {
	
		max-width: 				var( --big-breakpoint );
		margin-left:			auto;
		margin-right:			auto;
	}	
}



/* featured images from other pages and child pages */
.wp-block-columns.autogenerated .wp-block-column {}

.wp-block-columns.autogenerated .wp-block-column img {

	display: 						block;
	padding: 						0;
	margin: 						0;

	width:							100%;
	max-width: 					100%;

	opacity:						0.8;	
	transition:					var( --std-transition );
}

.wp-block-columns.autogenerated .wp-block-column img:hover {
	opacity:						1;
	transition:					var( --std-transition );
}

/* positioning context for figcaption */
.wp-block-columns.autogenerated figure {
	box-shadow:					var( --std-shadow-sm );
}

/* post title is used as caption */
/* just some styling for now */
/* maybe don't use position for moving caption up, so we can center and stuff */
.wp-block-columns.autogenerated figure figcaption {

	display:						block;
	padding:						calc( var( --std-padding ) / 2 );
	text-align:					center;
	font-weight:				bold;
	
	border-top:					var( --std-border );
}


.wp-block-columns.autogenerated figure:hover figcaption {
	color:							white;
	
	background-color:		var( --steffi-link );
	transition:					var( --std-transition );

	border-top:					1px solid var( --steffi-link );
}

/* make room under last paragraph when not using columns */
/* i.e. p is a direct descendant of .entry-content       */
.entry-content > p:last-of-type {
	margin-bottom:				var( --std-margin-vert );
}


/* background for 30 years banner */
#thirty-years-banner {
	display:							flex; /* for vertical centering */
	
	height:								300px;
	margin:								0;
	
	background-image:			url('/wp-content/uploads/2019/03/sandandre-b.jpg');
	background-size: 			cover;
	background-repeat:		no-repeat;
	background-position:	center center;
	
	border-top:						var( --std-border );
}

/* Is a flex item, so we can use margin: auto for vertical centering. Neat. */
#thirty-years-banner > img {
	
	display:							block;
	margin:								auto;
	-webkit-filter:				var( --std-shadow );
	        filter:				var( --std-shadow );
}


/* Kadence Block settings */

/* akkordeonale */
.wp-block-kadence-accordion {
	margin-top:						var( --std-margin-vert );
}

.kt-blocks-accordion-title,
.kt-blocks-accordion-title strong {

	font-family:					var( --heading-font );
	font-weight:					normal;
}

/* Buttons */
.wp-block-kadence-advancedbtn {
	margin:								var( --std-margin-vert ) 0;
}

/* HEADER */
/* out of sight, out of mind... */
#site-title, #site-description {
	display:							none;
}

#header-container {
	position:							fixed; /* anchor on page top */
	display:							flex;  /* vertical centering of contained elements */
	
	width:								100%;
	top:									0;
	z-index:							100;
	height:								var( --header-height );
	background:						rgba( 255,255,255,0.95 );
	box-shadow:						var( --std-shadow-sm );
	transition:						var( --std-transition );
}

/* follows directly to #header */
/* move down by height of header */
#container  {
	margin-top:						var( --header-height );
}

#header > #menu {
	margin:								0;
	padding:							0;
	flex-grow:						1; /* let menu occupy all remaining space */
}



@media only screen and ( max-width:800px ) {
	/* reset fixed header, enable scrolling, move container up again */
	#header-container {
		position:						static;
		transition:					var( --std-transition );
	}
	
	#container  {
		margin-top:					0;
	}
}

#header {
	display:							flex;
	flex-direction:				row;
	align-items:					center; /* vertical center */
}

#header #branding img {
	margin:								0;
	padding:							0;
}


#menu-main > li > a {
	padding-bottom:				0; /* remove pad for even vertical center */
}

/* --> shame.css, böser Hack! */
/* geht kaput, sobald Menüreihenfolge sich ändert! */
#menu-item-114 > .sub-menu {
	margin-left: -8rem;
}

#header-logo {
	width:								15rem;
	
	padding-top:					1rem;
	padding-bottom:				1rem;
	margin-right:					calc( var( --std-margin-hor ) / 2 );
	
}

@media only screen and ( max-width: 900px ) {
	#header-logo {
		width:							12rem;
		transition:					var( --std-transition );
	}
}

#menu {
	color:								var( --steffi-link );
	margin-right:					calc( var( --std-margin-hor ) / 2 );
}

#menu ul li a {
	color:								var( --steffi-link );
	font-family:					var( --std-font );
	font-size:						1rem;
	padding-bottom:				0;
}

@media only screen and ( max-width: 900px ) {
	#menu ul li a {
		font-size:					0.9rem;
	}
}


#menu * li > a:hover, #menu * li > a:active {
	color:								var( --darkgrey );
}

/* move menu to the right */
/* needs reset in MQ for mobile */
#menu > div.menu-main_menu_en-container > ul,
#menu > div.menu-main-container > ul {
	float:								right;
}

#menu > div.menu-main-container > ul > li:last-of-type > a {
	margin-right: 				0;
}

#menu ul li ul {
	margin-top:						-0.5rem;
}

/* mobile menu hamburger */
#menu > label.toggle {

	margin:								0;
	padding:							0;
	line-height:					normal;
}

#menu .menu-icon {

	color:								var( --steffi-link );
	float:								right;
	font-size:						var( --fontsize-huge );
}


/* FOOTER */
#footer {
	background-color:			var( --darkgrey );
	color:								var( --footer-color );
	font-family:					var( --std-font );
	font-size:						var( --fontsize-prose );
	font-weight:					normal;
}

#footer-widgets > ul {
	display:							flex;
	flex-direction:				row;       /* horizontally */
	justify-content:			center;    /* center container */
	align-items:					flex-end;  /* align items on bottome */

	padding:							calc( var( --std-padding ) * 2 ) 0;
}

@media only screen and ( max-width: 900px ) {
	#footer-widgets > ul {
		display:						block;
	}

	#menu-footer-menu {
		margin-top:					var( --std-margin-vert );
	}

	#footer-widgets li {
		text-align:					left;
	}
}

/* widgets and footer menu (4th item) */
#footer-widgets ul {
	list-style:						none;
}

/* Footer links */
#footer-widgets ul a {
	color:								var( --footer-link-color );
	text-decoration:			none;
}

#footer-widgets ul a:hover, #footer-widgets ul a:active {
	color:								white;
}


/* Footer logo */
#footer-widgets #footer-logo {
	display:							block;
	height:								4rem;				/* override WP generated inline CSS */
}

#footer-widgets > ul > li {
	margin-right:					var( --std-margin-hor );
	margin-bottom:				0;
}

#footer-widgets > ul > li:last-of-type {
	margin-right:					0;
}


#footer-widgets > ul li li {
	margin:								0;
	padding:							0;
}

#copyright {
	padding:							var( --std-padding );
}

/* List category posts list */
.lcp_catlist {
	margin-bottom:				var( --std-margin-vert );
}

/* Tables */
.entry-content table {
	_max-width:						100%;
	border:								var( --std-border-med );
}

.entry-content table td {
	padding:							var( --std-padding );
	border:								var( --std-border-med );
}


/* CUSTOM BLOCKS */
/* see https://getblocklab.com for details */

/* Block: Block: Zum Shop */

/* Container */
.block-zum-shop {
	/* These are links to be included in the prose of the site */
	/* This is NOT the "top bar" with the shortcut icons and the page title */

	margin-top:						var( --std-margin-hor );
	padding:							var( --std-padding );

	text-align:						center;
	background-color:			var( --almost-white );
}

.block-zum-shop a svg {
	max-width:						100%;
	width:								50%;

	fill:									var( --lightgrey );
	transition:						var( --std-transition );
}

.block-zum-shop a:hover svg {
	max-width:						100%;
	width:								50%;

	fill:									var( --darkgrey );
	transition:						var( --std-transition );
}


/* Block: Call us */

/* Container */
.block-call-us-now {

	margin-top:						var( --std-margin-hor );
	padding:							var( --std-padding );

	text-align:						center;
	background-color:			var( --almost-white );
}

/* Title and Opening times */
.block-call-us-now p:first-child,
.block-call-us-now .block-opening-times {
	margin:								0;
	padding:							0;
}

/* Phone number */
.block-call-us-now .block-phone-number {
	display:							inline-block;
	margin:								0;

	font-family:					var( --heading-font );
	font-size:						var( --fontsize-big );
	line-height:					3rem;
	
	color:								var( --lightgrey );
}

.block-call-us-now .block-phone-number:hover {
	color:								var( --darkgrey );
	transition:						var( --std-transition );
}

/* Block: Page Title and Icons */

/* Container */
.block-title-and-icons-outer {
	/* negative CSS vars. Hallelujah! */
	margin:								0 calc( -1 * var( --std-margin-hor ));
	margin-bottom:				var( --std-margin-hor );

	background-color:			var( --almost-white );
}

.block-title-and-icons {	
	display:							flex;
	justify-content:			center; /* vertical center */
	padding: 							calc( var( --std-padding ) / 2 ) 0;
	
}

@media only screen and ( max-width: 1300px ) {
	.block-title-and-icons {	
		margin-left: 				var( --std-margin-hor );
		margin-right:				var( --std-margin-hor );
	}
}

.block-title-and-icons .entry-title {
	margin-top:						0;
	padding-left:					0;
}

@media only screen and ( max-width: 900px ) {
.block-title-and-icons .entry-title {
		font-size:					var( --fontsize-med );
		transition:					var( --std-transition );
	}
}


/* make elements take equal space */
.block-title-and-icons .entry-title, 
.block-title-and-icons .block-icons {
	flex-grow:						1;
	
	padding-bottom:				0;
	margin-bottom:				0;
}


/* Icons */
.block-icons {

	/* self alignment as flex element */
	align-self:							flex-end; /* move icons to bottom  */
	
	/* icon alignment */
	display:								flex;
	flex-direction:					row;
	justify-content:				flex-end;
	
}

.block-icons span.icon {
	/* make room between icons and nav menu */
	margin-left:						calc( var( --std-margin-hor )  / 2);
	margin-bottom:					calc( var( --std-margin-vert ) / 8);
	width:									var( --header-icon-size );
	height:									var( --header-icon-size );
	
	_border: 1px solid orange;

}

/* icon color */
.block-icons span.icon a svg {
	fill:									var( --steffi-link );
	transition:						var( --std-transition );
}

.block-icons span.icon a svg:hover {
	fill:									var( --darkgrey );
	transition:						var( --std-transition );
}

/* make home icon dark when on home page */
body.home .icon.home a svg {
	fill:									var( --brownish );
}



/* adjust icon sizes */
.block-icons .icon.shop   {
	padding-top:					2px;
	width:								32px;
	height:								32px;
}

.block-icons .icon.phone  {
	width:								25px;
	height:								25px;
}

.icon.email  {}
.icon.home   {}

@media only screen and ( max-width: 900px ) {
	.block-icons span.icon {
		width:							25px;
		height:							25px;
	}

	.block-icons .icon.shop   {
		width:							23px;
		height:							23px;

	}

	.block-icons .icon.phone  {
		width:							21px;
		height:							21px;
	}
}