/*
   Theme Name: Veloyage
   Author: Marco "sphakka" Poleggi
   Author URI: https://professional-eth0s.com/
   Description: theme for Vélovoyage Sàrl, Genève
   Version: 0.9.9
   License: GNU General Public License v2 or later
   License URI: http://www.gnu.org/licenses/gpl-2.0.html
   Text Domain: veloyage

   TO-DO:
   - replace weird % sizes with stuff like calc(N%-Npx)
 */

/***************************************************************
   Table of Contents
 ****************************************************************

   1. Normalize
   2. Theme styles
 ***************************************************************/

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

:root {
    /* Main color palette */
    --theme-color-1st: #287241;
    --theme-color-2nd: #c17704;
    --theme-color-3rd: #659a77;
}


/***************************************************************
   1. Normalize

   Styles based on
   http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
 ***************************************************************/

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: inherit;
    font-size: 100%;
    vertical-align: baseline;
	text-decoration: none;
	color: #000;
}

/* when loaded in footer might get visible */
/* script {
   display: none;
   visibility: none;
   } */

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
	/* scroll-behavior: smooth; */
    line-height: 1.5em;
	font-size: 14px;
	background: linear-gradient(to bottom, rgba(40,114,65,1.0) 0%, rgba(40,114,65,0.4) 100%), url(assets/images/Bicycle-With-Large-Basket.svg) no-repeat center center fixed;
	background-size: cover;
    font-family: urw_gothic, sans-serif;
    font-style: normal;
	/* need to allow correct stacking of header menu? TBD */
	display: flex;
	flex-flow: column;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: "«" "»" "‹" "›";
}
blockquote::before,
q::before {
    content: open-quote;
	position: absolute;
}
blockquote::after,
q::after {
    content: none;
}

blockquote {
	margin-left: 20px;
}


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

cite {
	font-style: italic;
}

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

b, strong {
	font-weight: bold;
}

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

h1 {
	font-size: 44px;
}

h2 {
	font-size: 32px;
}

abbr {
	font-style: italic;
}

em {
	font-style: italic;
}



/***************************************************************
   2. Theme styles
 ***************************************************************/


/*
 *Temporary*. xref <orig> = <veloyage>

   .'s:

   = content-area
   = custom-header
   = main-navigation
   = page-header
   = page-title
   = site
   = site-content
   = site-content-contain
   = site-footer
   = site-header
   = site-main
   = site-title
   branding = site-branding     N.A.
   = wrap


   #'s:

   = page
   footer   = colophon          OK
   header   = masthead          OK
   nav_pri  = site-navigation   OK
   wrapper  = primary           N.A.

   #2.:

   #wrapper = .wrap
 */


/* un peu abusé... ;-) */
*:not(img) {
    border-radius: 2px;
}

small {
	font-size: 70%;
}

/******************************************************************************
 ** Global
 ******************************************************************************/

/******************************************************************************
 * @fonts
 */

@font-face {
    font-family: 'nunito';
    src: url('assets/fonts/nunito-bold-webfont.eot');
    src: url('assets/fonts/nunito-bold-webfont.eot?#iefix') format('embedded-opentype'),
    url('assets/fonts/nunito-bold-webfont.woff2') format('woff2'),
    url('assets/fonts/nunito-bold-webfont.woff') format('woff'),
    url('assets/fonts/nunito-bold-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'nunito';
    src: url('assets/fonts/nunito-light-webfont.eot');
    src: url('assets/fonts/nunito-light-webfont.eot?#iefix') format('embedded-opentype'),
    url('assets/fonts/nunito-light-webfont.woff2') format('woff2'),
    url('assets/fonts/nunito-light-webfont.woff') format('woff'),
    url('assets/fonts/nunito-light-webfont.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'nunito';
    src: url('assets/fonts/nunito-regular-webfont.eot');
    src: url('assets/fonts/nunito-regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('assets/fonts/nunito-regular-webfont.woff2') format('woff2'),
    url('assets/fonts/nunito-regular-webfont.woff') format('woff'),
    url('assets/fonts/nunito-regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'urw_gothic';
    src: url('assets/fonts/urw_gothic_l_book-webfont.eot');
    src: url('assets/fonts/urw_gothic_l_book-webfont.eot?#iefix') format('embedded-opentype'),
    url('assets/fonts/urw_gothic_l_book-webfont.woff2') format('woff2'),
    url('assets/fonts/urw_gothic_l_book-webfont.woff') format('woff'),
    url('assets/fonts/urw_gothic_l_book-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'urw_gothic';
    src: url('assets/fonts/urw_gothic_l_bookoblique-webfont.eot');
    src: url('assets/fonts/urw_gothic_l_bookoblique-webfont.eot?#iefix') format('embedded-opentype'),
    url('assets/fonts/urw_gothic_l_bookoblique-webfont.woff2') format('woff2'),
    url('assets/fonts/urw_gothic_l_bookoblique-webfont.woff') format('woff'),
    url('assets/fonts/urw_gothic_l_bookoblique-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'urw_gothic';
    src: url('assets/fonts/urw_gothic_l_demioblique-webfont.eot');
    src: url('assets/fonts/urw_gothic_l_demioblique-webfont.eot?#iefix') format('embedded-opentype'),
    url('assets/fonts/urw_gothic_l_demioblique-webfont.woff2') format('woff2'),
    url('assets/fonts/urw_gothic_l_demioblique-webfont.woff') format('woff'),
    url('assets/fonts/urw_gothic_l_demioblique-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'urw_gothic';
    src: url('assets/fonts/urw_gothic_l_demi-webfont.eot');
    src: url('assets/fonts/urw_gothic_l_demi-webfont.eot?#iefix') format('embedded-opentype'),
    url('assets/fonts/urw_gothic_l_demi-webfont.woff2') format('woff2'),
    url('assets/fonts/urw_gothic_l_demi-webfont.woff') format('woff'),
    url('assets/fonts/urw_gothic_l_demi-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}



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

blockquote > p {
	margin-left: 10px;
}


text_slant {
	font-style: italic;
}

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

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

/* .clearfix {
   clear: both;
   } */

.center {
	margin-left: auto;
	margin-right: auto;
	display: block;
	/* pour les 'inline-block' */
	text-align: center;
}


.fixed_width {
	width: 1140px;
}

/* for objects taking 100% height -- img, etc. */
.fixed_height {
	height: 304px;
}

.no-float {
	float: none;
}


.rowflx,
/* doesn't allow to add a class... doesn't work as 'display: block' takes over via JS */
[data-class="wpcf7cf_group"] {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}
[data-class="wpcf7cf_group"] span.wpcf7-form-control-wrap {
	/* alignement correction as 'display: block' enforced in-line */
	margin-left: 6px;
}


/* Watch out! Masonry style can't be achieved with pure flex. Use columns instead */
.colflx {
	display: flex;
	flex-flow: column wrap;
}

#wrapper {
	width: 1140px;
	margin: 110px auto 0 auto;
}

#wrapper.logo-only {
	margin-top: 180px;
}


button, input, select, textarea {
    background-color: #364e59;
    border: none;
    color: #fff;
    font-size: 14px;
    padding: 5px;
    margin: 0;
	box-sizing: border-box;
	border-radius: 2px;
	font-family: nunito, sans-serif, monospace;
}

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

.mrgt {
	margin-top: 2.5%;
}

.padbox {
	padding: 10px;
}

.padtb {
	padding: 10px 0;
}

.padl {
	padding-left: 10px;
}

.padr {
	padding-right: 10px;
}

.padlr {
	padding: 0 10px;
}

.dropshade {
	/*box-shadow: 4px 4px 8px #888888;*/
}


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

/* old stuff for first archive template */
.m_col_l, .m_col_m, .m_col_r {
    width: 31.66%;
    float: left;
	/* border: 1px solid magenta; */
}

.m_col_l {
	margin-right: 2.5%; /* 24/960px */
}

.m_col_r {
	float: right;
	margin-left: 2.5%; /* 24/960px */
}

/* 2 columns */
.m_col_l_m {
	float: left;
	width: 65.8%; /* (304*2+24)/960 */
}


/* WTF... <https://stackoverflow.com/questions/25361598/firefox-adds-extra-space-after-image-in-div-or-makes-divs-bigger> */
figure.excerpt a > img {
	display: block;
}


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

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


/******************************************************************************
 * header
 */

/* header {
   width: 100%;
   min-height: 100px;
   z-index: 10;
   } */

header.site-header {
	position: fixed;
	width: 100%;
	min-height: 38px; /* nav size  */
	padding: 30px 0;
	z-index: 10; /* to stack correctly with flex menu */
	/* display: flex;
	   flex-flow: column wrap;
	   justify-content: space-between; */
}

header.site-header.smaller {
	/* min-height: 50px; */
	padding: 5px 0;
	transition: .4s;
}

header.site-header.opaque {
	background: var(--theme-color-1st);
}

header.site-header a.site-title,
header.site-header .search-form {
	float: right;
	margin: 0 0 0 auto;
	height: 30px;
    padding: 4px 0;
}

header.site-header h1 {
	padding: 0;
	height: 42px;
}

header.site-header .search-form input {
	font-size: 16px;
	height: 100%;
	border: 1px rgba(255, 255, 255, 0.4) solid;
	background: transparent;
	padding: 4px;
}

.columnflx {
	display: flex;
	flex-flow: column wrap;
	justify-content: space-between;
}

/* sidehead is on top of a dynamic sidebar */
#sidehead {
	height: 435px;
	background: var(--theme-color-2nd);
	border-radius: 2px 30px 0 0;
	z-index: 0;
}

#sidehead #branding_box {
	padding: 10px;
	position: relative;
}

#sidehead #branding_box.smaller {
	height: 50px;
	transition: 0.7s;
}

#sidehead #branding_box *:hover {
	text-decoration: none;
}

#sidehead h1 {
	text-align: center;
}

#sidehead h1.smaller {
	height: 50%;
	/* transition: 0s; */
}

#sidehead h2 {
	font-size: 24px;
	font-weight: bold;
	padding: 0;
	color: #fff;
	margin: 0 auto;
	background: none;
	width: 100%;
}

#sidehead #subtitle:hover {
	/* transform: scale(1.4); */
	color: var(--theme-color-1st);
}

#sidehead .fp_logo {
	width: 100%;
	height: auto;
	filter: drop-shadow(5px 5px 5px var(--theme-color-1st));
}

header.site-header .fp_logo {
	width: auto;
	height: 100%;
	filter: drop-shadow(2px 2px 2px var(--theme-color-2nd));
}

/* Profile badge */

.centerflx_container {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

.centerflx_item {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#sidehead aside.fp_profile_badge {
	margin: 10px auto;
	height: 240px;
}

/* TO-DO: adapt with a better image  */
#avatar {
	/* radius: caption - letter - margin = 90px - x */
	height: 160px;
	width: 160px;
	overflow: hidden;
}

#avatar > img {
	height: 100%;
	width: auto;
}

/*
 * Navigation
 */

#site-navigation {
	width: 1140px;
	margin: 0 auto;
    font-family: nunito, sans-serif;
    font-size: 20px;
    font-weight: 200;
	position: relative;
	display: flex;
    flex-direction: row;
	min-height: 38px; /* accommodate wrapping  */
}

/* not in header as width is not fixed there */
#site-navigation::after {
	content: ''; /* needed when parent has no size!? */
	background: url(assets/images/Sinnbild_Radfahrer,_StVO_1992.svg) no-repeat;
	opacity: 0.1;
	top: -30px;
	position: absolute;
	z-index: -1;
	height: 150px;
	width: 170px;
	background-size: 100%;
}

#site-navigation.smaller::after {
	/* height: 60px; */
	width: 80px;
	top: -5px;
}

#menu_button {
	height: 42px;
	margin: 0;
	padding: 4px;
	background: var(--theme-color-1st);
	border-radius: 2px;
	width: auto;
}

#menu_button > img {
	height: 100%;
}

#menu_button:hover > img {
	opacity: 0.5;
}

#menu_head_container {
	max-width: 65.82%;
	margin: auto 0;
}

#menu_head {
	line-height: 30px;
	display: inline-flex;
	flex-flow: row wrap;
	justify-content: flex-start;
}
/* for multi-row menus */
#menu_head li {
	margin: 4px 0;
}

#menu_head a, #menu_head a:visited {
	height: 30px;
    color: #fff;
	padding: 8px 10px;
}

#menu_head a:hover, #menu_head a:active {
    color: var(--theme-color-2nd);
	text-decoration: none;
    background-color: var(--theme-color-1st);
    height: 30px;
}
/*
   #menu_head a:hover {
   margin-left: 30px;
   } */

#menu_head .sub-menu {
	display: none;
	position: absolute;
	border: 1px dotted var(--theme-color-2nd);
	font-size: 16px;
	z-index: 1;
	width: 170px;
}


#menu_head .menu-item-has-children:hover>.sub-menu {
	display: block;
	background: var(--theme-color-1st);
	/* border: 1px solid magenta; */
}

#menu_head .menu-item-has-children:hover>.sub-menu .sub-menu {
	top: 0px;
	margin-left: 80px;
}

/* need to select direct tag */
#menu_head .current-menu-item>a {
	color: var(--theme-color-2nd);
}


/******************************************************************************
 * main
 *
 * 'fp_*' => front page
 * 'ip_*' => internal pages
 *
 * fp: 3cols:
 *	col w: 960/3 - Dpx = 304px
 *	int gap: (960-304*3)/2 = 24px
 */

/*
 * @LGX carousel extension
 */
#top-slider {
	height: 435px;
	margin: 0;
}

#top-slider .owl-carousel.owl-stage-outer {
	/* background: rgba(0, 0, 0, .3); */
	position: relative;
	cursor: ew-resize;
}

#top-slider .owl-carousel .owl-item .item {
	margin: 0 auto 10px;
	opacity: 1;
	padding: 0px;
}

/* the only way to have this f***er take all stage space */
#top-slider .owl-carousel .owl-item .item img {
	height: 400px;
}

#top-slider .owl-controls {
	margin-top: 0;
}

/* recenter v. */
#top-slider .owl-controls .owl-prev,
#top-slider .owl-controls .owl-next {
	top: 188px;
}
#top-slider .owl-controls .owl-nav [class*="owl-"]:hover {
	background: var(--theme-color-2nd);
}

#top-slider .owl-dots {
	height: 25px;
}

main.site-main {
	background: #fff;
	width: 65.78%;			/* ~360px @ 1140 */
	/* no need in flex-justified mode */
	/* margin-right: 2.62%;     ~30px @ 1140 */
	border-radius: 2px 2px 2px 30px;
}

#main {
	float: left;
}

#main.no-float {
	float: none;
}

/* 2 columns, flex */

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

section#top {
	margin-top: 40px;
}

/* Masonry POC by columns... the only place where absolute sizes must be specified */
div.columns,
section.columns {
	columns: 2 auto;
	column-gap: 30px;
}

section.columns > div.entry-content {
	/* NIY: https://bugzilla.mozilla.org/show_bug.cgi?id=616436 */
	/* -moz-column-span: 1; */
	-webkit-column-span: 1;
	column-span: 1;
}


article.tile,
article.excerpt {
	margin-bottom: 20px;
	background: #fff;
	position: relative;
	border: 1px dotted var(--theme-color-2nd);
	/* to avoid background chop the border */
	overflow: hidden;
	border-radius: 2px 30px;
	width: 100%;
}
article.tile:last-child,
article.excerpt:last-child {
	margin-bottom: 0;
}

/* sections */

div.page_container {
	margin: 30px;
}

section.fpage:not(.slider),
section.ipage:not(.slider) {
	/* margin: 10px; */
}

div.fpage,
article.fpage {
	/* min-height: 304px; */
	/* background: #fff; */
	position: relative;
	margin-bottom: 40px;
}

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

.fpage h2,
.ipage h2 {
	font-family: nunito, sans-serif;
	padding: 10px;
	color: #fff;
	background-color: var(--theme-color-1st);
	width: 29.6%;
	margin-bottom: 40px;
}

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

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

h2.widget-title {
	font-size: 20px;
}

.fpage h3,
.ipage h3{
	font-size: 16px;
	text-transform: uppercase;
	margin-bottom: 10px;
}

.excerpt h3 {
	overflow: hidden;
	max-height: 1.5em;
}

.fpage h4,
.ipage h4 {
	text-decoration: overline dotted var(--theme-color-1st);
	margin-bottom: 10px;
}

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

article a {
	margin-bottom: 5px;
	/* 	text-decoration: underline dotted var(--theme-color-1st); */
}

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

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

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

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

dl.grid {
	display: grid;
	grid-template-columns: 3em auto;
	grid-row-gap: 10px;
}

dl.grid.medium {
	grid-template-columns: 5em auto;
}

dl.grid.large {
	grid-template-columns: 7em auto;
}

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;
}

.ui-button,
.more_info,
.go_top {
	width: 30px;
	height: 30px;
	/* padding: 0 0 2px 0; */
	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 0;
	/* font-weight: bold !important; */
	float: right;
	font-family: urw_gothic, sans-serif, monospace;
	border: none;
	margin: 0;
}

.go_top {
	padding: 2px 0 0 0;
	border-radius: 0 100% 0 0;
	float: left;
}

button.fpage.more_info,
button.fpage.go_top {
	margin-right: 10px;
}

.more_info:hover,
.go_top:hover,
.ui-button: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: '\002B';
	padding: 0px 0 0 3px;
	display: block;
}

.ctrl {
	width: 30px;
}
.ctrl::before {
	/* content: '\26ED'; */
	content: '\21BA';
	font-size: 20px;
}

.go_top::before {
	content: '\2191';
	font-size: 20px;
}

.more_info.open::before {
	content: '\2A2F';
}


a.more_info {
	height: 50px;
	width: 50px;
	/* font-size: 30px; */
	padding: 0;
	position: absolute;
	float: none;
	opacity: .8;
	z-index: 999;
}
a.more_info::before {
	content: '\2795';
	display: inline-block;
	vertical-align: middle;
	line-height: 30px;
	text-align: center;
	padding: 10px 10px 10px 10.5px;
}

article.archive a.more_info {
	top: 41.8%;		/* 50% -12.5px (@304px) */
	left: 47.4%;	/* 50% -12.5px (@960px) */
}
article.tile	a.more_info {
	top: 45%;
	left: 42%;
}

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

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

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

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

img.vcenter {
	height: 100%;
	margin-top: 50%;
	transform: translateY(-75%);
}

figure.fpage.banner,
figure.ipage.banner {
	/* scale down rel. vw */
	height: 38.15vw;
	max-height: 435px;
	overflow: hidden;
}

section.columns figure.tile,
figure.excerpt {
	overflow: hidden;
	max-height: 300px;
}

figure.service_item {
	background: rgba(40, 114, 65, 0.4);
	height: 300px;
}

figure.excerpt {
	float: left;
	margin-right: 20px;
}

/* section.fpage figure,
   img.center.wp-post-image {
   height: 435px;
   width: auto;
   position: relative;
   overflow: hidden;
   } */

section.fpage figcaption {
	position: absolute;
	width: 100%;
	bottom: -41%;
	left: 0px;
	font-family: nunito, sans-serif;
	font-size: 20px;
	color: #fff;
	text-align: center;
	padding: 10% 0;
	background: rgba(40, 114, 65, 1);
}

/* no hover effect here */
section.fpage figure.service_item figcaption {
	bottom: 0;
}

section.fpage figure:not(.service_item):hover figcaption {
	bottom: 0;
}

section.fpage figcaption a {
	color: #fff;
}

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;
}

article.gall_badge figure,
article.proj_badge figure {
	height: 304px;
	width: 304px;
	position: relative;
	overflow: hidden;
}

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

article.proj_badge figcaption {
	border-radius: 50%;
	width: 50%;
	left: 25%;
	text-align: center;
}

/* 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 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 figcaption.gallery-caption{
	display: none;
}

/* 2 columns */
div.formbox.grid {
	position: relative;
	display: grid;
	grid-template-columns: auto 70%;
	grid-row-gap: 10px;
	margin-bottom: 30px;
}
div.formbox.grid:last-child,
/* bug somewhere, grrr */
div.formbox.grid.last {
	margin-bottom: 0;
}
div.formbox.grid .full-line {
	grid-column: 1 / span 2;
}
div.formbox.grid .buttons {
	grid-column: 2;
}

div.em-booking {
	margin: 0;
	padding: 0;
}
div.em-booking-form-details {
	width: 100%;
	float: none;
}

#blog .m_col_r,
#contact .m_col_r {
	overflow: hidden;
	position: relative;
}

#blog .button_bar {
	position: absolute;
	bottom: 10px;
	width: 65.8%;
}



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

div.page-content > div.post_meta:not(.category):not(.tag),
div.entry-content > div.post_meta:not(.category):not(.tag) {
	margin-bottom: 20px;
	border-bottom: 1px dotted var(--theme-color-2nd);
	padding-bottom: 15px;
}

h4.post_meta.category,
h4.post_meta.tag {
	text-decoration: none;
}

.post_meta span:not(.category):not(.tag):not(.post_type)::after {
	content: '\00A0\00A0';
}

.post_meta ul.event-categories,
.post_meta ul.event-tags {
	display: inline-flex;
	list-style: none;
}
.post_meta ul.event-categories li,
.post_meta ul.event-tags li {
	float: left;
}
/* bug in Event Manager: tags are not rendered in a <ul>... Impossible to
   treat the same as for categories... */
.post_meta ul.event-categories li>a,
.post_meta ul.event-tags li>a,
.post_meta.tag>a {
	text-decoration: overline dotted var(--theme-color-1st);
}
.post_meta ul.event-categories li>a::after,
.post_meta ul.event-tags li>a::after {
	content: ',\00A0\00A0';
}
.post_meta span:not(.category):not(.tag):last-child::after,
.post_meta ul.event-categories li:last-child::after,
.post_meta ul.event-tags li:last-child::after,
.post_meta ul.event-categories li:last-child>a::after,
.post_meta ul.event-tags li:last-child>a::after {
	content: none;
}

img.icon.post_meta {
	height: 15px;
	width: auto;
}
img.icon.post_meta.tag {
	margin-right: 10px;
}


/* div.post_meta.location_box {
   display: grid;
   grid-template-columns: auto auto;
   grid-row-gap: 10px;
   } */
div.post_meta {
	margin-bottom: 10px;
}

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

.post_meta.location img {
	max-width: 200px;
	max-height: 200px;
}

/* contact forms use grid or flex model */

div.formbox label,
div.formbox span.label,
.em-booking-form label {
	display: inline-block;
	margin-right: 10px;
	text-align: right;
}
.em-booking-form .input-field-data_privacy_consent label {
	text-align: left;
}

div.formbox.flexbox div.rowflx,
[data-class="wpcf7cf_group"] {
	margin-bottom: 10px;
}

div.formbox.flexbox label,
div.formbox.flexbox span.label,
.em-booking-form label {
	width: 30%; /* not gridded */
}
.em-booking-form p.input-field-data_privacy_consent label {
	width: 95%; /* not gridded */
}
div.formbox label.checkbox,
div.formbox span.checkbox,
div.formbox span.checkbox label,
wpcf7-list-item-label {
	width: 100%;
	margin: 10px auto;
	text-align: left;
}

/* can't assign a class to label when use_label_element is set */
div.formbox span.wpcf7-list-item label {
	width: auto;
}

.formbox input.required,
.formbox input:required,
.formbox select.required,
.formbox select:required,
.formbox textarea.required,
.formbox textarea:required {
	border: 2px dotted red;
}

div.formbox span.wpcf7-form-control-wrap {
	display: inline-block;
}
div.formbox.flexbox div.wpcf7-form-control-wrap,
div.formbox.flexbox span.wpcf7-form-control-wrap {
	width: 67%;
}
div.formbox.flexbox .full-line span.wpcf7-form-control-wrap {
	width: 100%;
}

/* 2-col split field side */
div.formbox div.iflx {
	display: inline-flex;
	width: auto;
	margin: 0 10px 10px 0;
}
div.formbox div.iflx label,
div.formbox div.iflx span.wpcf7-form-control-wrap {
	width: auto;
}

div.wpcf7-response-output.wpcf7-mail-sent-ok {
	border: 2px solid lime;
}

div.wpcf7-response-output {
	background: #fff;
	margin: 0 !important;
	padding: 10px !important;
}

.wpcf7-character-count {
	text-align: right;
}

.formbox.flexbox .wpcf7-character-count {
	width: 100%;
}

.formbox.grid .wpcf7-character-count {
	grid-column: 1 / span 2;
}

.em-booking-form-details input.input,
.em-booking-form-details input,
.em-booking-form-details textarea {
	width: 67%; /* not gridded, must take into account 10px-padding */
}

/* input.wpcf7-form-control:not(.wpcf7-number):not(.wpcf7-date):not(.wpcf7-time), */
textarea.wpcf7-form-control,
.formbox textarea,
.formbox input[type=email],
.formbox input[type=text],
.formbox input[type=tel] {
	width: 100%; /* of grid column / flexbox */
}

.formbox select {
	width: 50%;
}

.formbox input[type=text][readonly] {
	width: 50%;
	color: initial;
	background: none;
	border: 1px solid var(--theme-color-1st);
}

input[type=number] {
	width: 5em;
}

input[type=number].short,
.em-booking-form-details input.captchar,
.comment-form input.captchar,
input.wpcf7-form-control.wpcf7-captchar,
input.wpcf7-form-control.wpcf7-time {
	width: 5em;
}

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

/* (!) 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,
input[type=submit].em-booking-submit {
	width: 50px;
	height: 30px;
	border-radius: 15px;
	background-color: var(--theme-color-2nd);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 20px;
	margin-left: 20px;
	cursor: pointer;
}

button:hover,
input[type=submit].em-booking-submit:hover {
	background-color: var(--theme-color-1st);
}

input[type=submit].em-booking-submit {
	float: right;
	width: inherit;
	margin-right: 10px;
}

button[type=submit] {
	background-image: url(assets/images/icons/mail-send.svg);
	float: right;
}
button[type=reset] {
	background-image: url(assets/images/icons/edit-clear.svg);
	float: right;
}

/* layout: search-submit + search-field */
button[type=submit].search-submit {
	height: 28px;
	width: 28px;
	background-color: transparent;
	background-image: url(assets/images/icons/magnifier-tool.svg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 18px;
	cursor: pointer;
	margin: 0;
	box-sizing: border-box;
	vertical-align: middle;
	border-radius: 0 2px 2px 0;
	float: none;
}

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

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

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

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

div.page-content,
div.comments-area,
div.entry-content:not(.tile):not(.excerpt):not(.formbox) {
	margin: 30px;
}

/* fix height to have the more_info button well centered */
article.archive {
	height: 304px;
}
article.excerpt {
	max-height: 150px;
	overflow: hidden;
}

article.excerpt p.entry-meta {
	font-style: italic;
}

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

/* img.tile {
   width: 100%;
   height: 200px;
   margin-bottom: 10px;
   } */

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-author {
	padding-bottom: 10px;
}

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

.comment-meta::before {
	content: '\00A0\00A0';
}
.comment-meta {
	padding-bottom: 5px;
	/* float: right; */
}

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

/* meta-info: 2 <a>'s in a <p> */
.logged-in-as > a:first-child,
.comment-reply-title > a:first-child {
	font-style: italic;
	/* 	font-weight: bold; */
}

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

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

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


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

nav.post-navigation,
nav.pagination {
	margin: 10px;
	line-height: 27px;
}

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

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:hover,
div.nav-previous:hover,
a.page-numbers:hover {
	background-color: var(--theme-color-1st);
}


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

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

span.nav-subtitle {
	font-weight: bold;
}


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

a.page-numbers,
span.page-numbers {
	/* approximate disc... */
	padding: 6px 10px;
	border-radius: 100%;
	background-color: var(--theme-color-2nd);
	text-align: center;
}
a.page-numbers.next,
a.page-numbers.prev,
span.page-numbers.arrow {
	background: none;
	color: var(--theme-color-2nd);
	font-weight: bold;
	font-size: 24px;
	text-decoration: none;
	vertical-align: middle;
	line-height: 27px;
	padding: 2px;
}
span.page-numbers.arrow:hover {
	color: var(--theme-color-1st);
}

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

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

span.post_type {
	font-style: italic;
}
span.post_type::before {
	content: '[';
}
span.post_type::after {
	content: ']\00A0\00A0';
}

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

#sidebar_container {
	width: 31.58%; /* ~360px @ 1140 */
	float: right;
}

aside.sidebar {
	width: 100%;
}

aside.ipage {
	background: #fff;
	text-align: left;
	border-radius: 0 0 2px 30px;
}

aside.ipage h2 {
	margin-bottom: 10px;
	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: '';
}

aside figure {
	border-bottom: 1px dotted var(--theme-color-1st);
	margin-bottom: 20px;
}
aside figure > img {
	width: 100%;
}
aside figure.affiliation {
	border: none;
}
aside figure.affiliation > img {
	width: 60%;
}

aside figure.affiliation > figcaption {
	display: none;
}

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

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

.widget li:before {
	content: '\26b9';
	color: var(--theme-color-1st);
	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);
}

.sidebar .widget {
	margin: 30px;
	padding: 0;
}

table.em-calendar td.eventful {
	border: 2px solid var(--theme-color-1st);
}


/***************************************************************
   2.x Event Manager
 ***************************************************************/

section.events,
section.locations {
	margin-bottom: 30px;
}


div.post_meta .em-location-map-container {
	width: 300px;
	height: 150px;
}

div.location_box,
div.partners_box {
	display: grid;
	/* need to specify an absolute size for correct wrapping */
	grid-template-columns: repeat(auto-fill, minmax(150px, auto));
	grid-row-gap: 10px;
}

div.partner,
div.location {
	text-align: center;
	/* margin-bottom: 15px; */
}

/***************************************************************
   3.x Screen reader
 ***************************************************************/

/* TO-DO: review! */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
	padding: 0;
	margin: 0;
}

h2.screen-reader-text {
	padding: 0;
	margin: 0;
}


/******************************************************************************
 * footer: three *flexbox* columns: l | m | r
 */


footer {
	background-color: var(--theme-color-2nd);
	/* make sure there's enough for the background decos  */
	min-height: 200px;
	margin-top: 80px;
	/* opacity: 0.95; */
}

footer * {
	color: #fff;
}

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

footer h2 {
	color: #fff;
	margin-bottom: 10px;
	border-bottom: 1px dotted #fff;
	border-radius: 0px;
	font-size: 24px;
}

.foot_col_l,
.foot_col_r,
.foot_col_m {
	width: 31.58%;
	margin-bottom: 10px;
}

.foot_col_l.two_col,
.foot_col_r.two_col {
	width: 50%;
}

.foot_col_l p,
.foot_col_r p,
.foot_col_m p {
	overflow: hidden;
	text-overflow: ellipsis;
}

.foot_col_l {
	text-align: left;
}

.foot_col_r {
	text-align: right;
}


.foot_col_m h2 {
	text-align: center;
}

.foot_col_r h2 {
	text-align: right;
}

#colophon {
	width: 100%;
	color: #fff;
	font-weight: 400;
	z-index: 0;
	font-family: nunito, sans-serif;
	font-size: 16px;
}

/* need a container to keep the aspect ration while the background flows around 100% */
#footer_box {
	padding-top: 10px;
	position: relative;
}

#footer_box::after {
	content: ''; /* needed when parent has no size!? */
	background: url(assets/images/Sinnbild_Radfahrer,_StVO_1992.svg) no-repeat;
	opacity: 0.1;
	bottom: -45px;
	/* top: 120px; */
	right: 0;
	position: absolute;
	z-index: -1;
	height: 180px;
	width: 300px;
	background-size: 100%;
	transform: scaleX(-1); /* h. flip */
}

#footer_box .widget {
	padding: 0;
}


/* navigation secondaire -- left col */

#nav_sec {
	/* 	margin-left: 1%; */
	text-align: left;
	margin-bottom: 10px;
}


address a[href^="tel"]::before {
	content: '\2706';
}

footer .widget a,
footer .widget li {
	cursor: pointer;
	color: #fff;
}

footer .widget li:hover {
	margin-left: 20px;
	color: var(--theme-color-1st);
}

footer .widget a:hover,
footer .widget a:hover * {
	color: var(--theme-color-1st);
}

.details_box {
	border-radius: 4px;
	padding: 0;
	margin: 0;
}


/* sponsors block -- middle col */

#sponsor_block {
	margin-bottom: 10px;
}
#sponsor_block h2 {
	margin-bottom: 10px;
}

.sponsors {
	/* 	padding-top: 10px; */
	/*     border-top: 1px solid #cccccc; */
	display: inline-flex;
	flex-flow: row wrap;
	justify-content: space-around;
}

.sponsor_logo {
	height: 32px;
	margin: 0 2px;
	/* needed because <li>s in #nav_soc get extra space... */
	padding-bottom: 10px;
}


/* social menu -- right col */

footer .widget.simple-social-icons {
	text-align: right;
}

footer .widget.simple-social-icons ul,
footer .widget.social-icons-widget ul {
	margin: 0;
	padding: 0;
	display: inline-flex;
	flex-flow: row wrap;
	justify-content: end;
}

footer .widget.simple-social-icons li:before,
footer .widget.social-icons-widget li:before {
	content: none;
}
footer .widget.simple-social-icons li,
footer .widget.social-icons-widget li {
	margin: 0 5px;
	padding-bottom: 5.5px;
	overflow: visible;
}
footer .widget.simple-social-icons a > svg,
footer .widget.social-icons-widget a > img {
	filter: opacity(70%);
	border-radius: 2px;
}
footer .widget.simple-social-icons a:hover > svg,
footer .widget.social-icons-widget a:hover > img {
	transform: scale(1.4);
	filter: opacity(100%);
}

/* credits */
#credit_box * {
	color: #333;
}


/***************************************************************
   1.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 0;
}

.opaque {
	opacity: 1;
}

.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);
}


.display {
	display: block;
}

.hidden {
	display: none;
	z-index: 999;
}

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

.collapsed {
	visibility: collapse;
}

.visuallyhidden {
	opacity: 0;
	/* DO NOT remove this transition, because JS depends on it to manipulate
	   the class "hidden" */
	transition: .4s ease-in-out;
}