/*!
Theme Name: TGM-Theme
Theme URI: http://underscores.me/
Author: eMundo GmbH
Author URI: https:%20//www.e-mundo.de
Description: Wordpress-Theme für die neue TGM-Webseite
Version: 1.1.3
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: tgm-theme
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

TGM-Theme is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Normalize
# Typography
# Elements
# Forms
# Navigation
	## Links
	## Menus
# Accessibility
# Alignments
# Clearings
# Widgets
# Content
	## Posts and pages
	## Comments
# Infinite scroll
# Media
	## Captions
	## Galleries
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/

@font-face {
  font-family: RegolaProRegular;
  src: url('assets/fonts/RegolaPro-Regular.otf') format('opentype');
}

@font-face {
  font-family: RegolaProBook;
  src: url('assets/fonts/RegolaPro-Book.otf') format('opentype');
}

@font-face {
  font-family: RegolaProMedium;
  src: url('assets/fonts/RegolaPro-Medium.otf') format('opentype');
}

/* normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  overflow-x: hidden;
  font-family: RegolaProBook !important;
  overflow-y: scroll;
  -ms-word-break: break-all;
  word-break: break-word;
  -moz-hyphens: auto;
  -o-hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  -webkit-hyphenate-limit-lines: 2;
  -ms-hyphenate-limit-lines: 2;
  hyphenate-limit-lines: 2;
  -webkit-hyphenate-limit-chars: auto 7;
  -ms-hyphenate-limit-chars: auto 7;
  hyphenate-limit-chars: auto 7;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
  font-family: RegolaProBook !important;
}

body ::-webkit-scrollbar {
  width: 10px;
  background: white;
}

body ::-webkit-scrollbar-thumb {
  background: black;
  border-radius: 10px;
  border: 1px solid white;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contex ts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 40pt;
  line-height: 45pt;
  font-family: RegolaProBook !important;
  font-weight: normal !important;
  /* padding-bottom: 20px; */
  margin-top: 0;
  padding-top: 20px;
}

h2 {
  font-size: 26pt;
  line-height: 33pt;
  font-family: RegolaProBook !important;
  font-weight: normal !important;
  padding-bottom: 20px;
}

h3 {
  font-size: 20pt;
  line-height: 26pt;
  font-family: RegolaProBook !important;
  font-weight: normal !important;
  padding-bottom: 20px;
  margin-top: 0 !important;
}

h4 {
  font-size: 1.5em;
  line-height: 1.5em;
  letter-spacing: 2px;
  font-family: RegolaProBook !important;
  font-weight: normal !important;
}

/* Text-rows */

h5 {
  font-size: 12pt !important;
  line-height: 15pt;
  font-weight: normal;
}

article {
  text-align: left;
}

p {
  font-size: 18pt;
  line-height: 24pt;
  margin: 0%;
  font-family: RegolaProBook !important;
  font-weight: normal !important;
  margin: 0%;
}

.small-text {
  font-size: 10pt !important;
  line-height: 15pt;
  font-family: RegolaProBook !important;
  font-weight: normal !important;
  text-transform: uppercase !important;
}

.small-text-normal {
  font-size: 10pt !important;
  line-height: 15pt;
  font-family: RegolaProBook !important;
}

/* Grouping content
	 ========================================================================== */

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}

a:hover {
  text-decoration: underline;
  color: inherit;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: RegolaProBook;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */
}

input,
textarea {
  padding-left: 10px !important;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type='button']:-moz-focusring,
[type='reset']:-moz-focusring,
[type='submit']:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type='checkbox'],
[type='radio'] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

html {
  font-family: RegolaProBook;
  width: 100vh;
  height: 100vh;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  clear: both;
}

/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/

html {
  box-sizing: border-box;
}

body {
  background: #fff;
  /* Fallback for when there is no custom background color defined. */
}

img {
  height: auto;
  /* Make sure images are scaled correctly. */
  max-width: 100%;
  /* Adhere to container width. */
}

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/

button,
input[type='button'],
input[type='reset'],
input[type='submit'] {
  border: 1px solid;
  border-color: #ccc #ccc #bbb;
  background: #e6e6e6;
  color: rgba(0, 0, 0, 0.8);
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 1;
  padding: 0.6em 1em 0.4em;
}

button:hover,
input[type='button']:hover,
input[type='reset']:hover,
input[type='submit']:hover {
  border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type='button']:active,
input[type='button']:focus,
input[type='reset']:active,
input[type='reset']:focus,
input[type='submit']:active,
input[type='submit']:focus {
  border-color: #aaa #bbb #bbb;
}

input[type='text'],
input[type='email'],
input[type='url'],
input[type='password'],
input[type='search'],
input[type='number'],
input[type='tel'],
input[type='range'],
input[type='date'],
input[type='month'],
input[type='week'],
input[type='time'],
input[type='datetime'],
input[type='datetime-local'],
input[type='color'],
textarea {
  color: #666;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 3px;
}

input[type='text']:focus,
input[type='email']:focus,
input[type='url']:focus,
input[type='password']:focus,
input[type='search']:focus,
input[type='number']:focus,
input[type='tel']:focus,
input[type='range']:focus,
input[type='date']:focus,
input[type='month']:focus,
input[type='week']:focus,
input[type='time']:focus,
input[type='datetime']:focus,
input[type='datetime-local']:focus,
input[type='color']:focus,
textarea:focus {
  color: #111;
}

textarea {
  width: 100%;
}

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/

/* Text meant only for screen readers. */

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
  /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  clip-path: none;
  color: #21759b;
  display: block;
  font-weight: bold;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
  /* Above WP toolbar. */
}

/* Do not show the outline on the skip link target. */

#content[tabindex='-1']:focus {
  outline: 0;
}

/*--------------------------------------------------------------
## Posts and pages
--------------------------------------------------------------*/

.sticky {
  display: block;
}

.hentry {
  margin: 0 0 1.5em;
}

.updated:not(.published) {
  display: none;
}

.entry-content,
.entry-summary {
  margin: 1.5em 0 0;
}

.page-links {
  clear: both;
  margin: 0 0 1.5em;
}

/*--------------------------------------------------------------
## Comments
--------------------------------------------------------------*/

.comment-content a {
  word-wrap: break-word;
}

.bypostauthor {
  display: block;
}

/*--------------------------------------------------------------
# Infinite scroll
--------------------------------------------------------------*/

/* Globally hidden elements when Infinite Scroll is supported and in use. */

.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
  /* Theme Footer (when set to scrolling) */
  display: none;
}

/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */

.infinity-end.neverending .site-footer {
  display: block;
}

/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/

.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
  border: none;
  margin-bottom: 0;
  margin-top: 0;
  padding: 0;
}

/* Make sure embeds and iframes fit their containers. */

embed,
iframe,
object {
  max-width: 100%;
}

/* Make sure logo link wraps around logo image. */

.custom-logo-link {
  display: inline-block;
}

/* general Styles*/

html {
  letter-spacing: 1px;
  width: 100%;
  height: auto;
  font-family: RegolaProBook;
  font-weight: normal;
  /* margin for header */
  margin-top: 75px;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: RegolaProBook;
  padding-left: 20px;
  padding-right: 20px;
}

button {
  border: none;
  background: none;
}

/*--------------------------------------------------------------
# General Bootstrap Changes
--------------------------------------------------------------*/

.eq-height {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
}

/*  Haupsächlich mit dem Bootstrap Grid verwendet, um freies Platz
		zwischen Spalten entfernen zu können
	*/

.no-gutter {
  margin-right: 0%;
  margin-left: 0%;
}

.no-gutter > [class*='col-'] {
  padding-right: 0;
  padding-left: 0;
}

.row {
  width: 100%;
  margin: 0%;
  padding: 0%;
}

.col-md-6,
.col-xs-6 {
  padding: 0%;
}

.no-padding {
  padding: 0px;
}

/**
Fixing bootstrap columns for safari
 */

.row:before,
.row:after {
  display: flex !important;
}

.col-md-6,
.col-xs-12 {
  min-height: 0px !important;
}

.col-xs-8 {
  padding: 0%;
}

/*--------------------------------------------------------------
# Other
--------------------------------------------------------------*/

/* Styling für Filter die in den Angebot- und Menschenseiten verwendet werden */

.list-group {
  margin: 0px;
}

/*Should be a Safari fix*/

.list-group-item,
.list-group-item:first-child,
.list-group-item:last-child {
  font-size: 16px;
  border-radius: 0%;
  border-color: black;
  border-width: 1px;
  border-style: solid;
  color: black !important;
  height: 4vh;
}

.text-row {
  font-family: RegolaProBook;
  width: 100%;
  min-height: 4vh;
  display: flex;
  align-items: center;
}

.text-row-black {
  font-family: RegolaProBook;
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  background-color: black;
  color: white;
  z-index: 1;
  position: fixed;
}

.description-header {
  min-height: 40px;
  padding-bottom: 40px !important;
}

.text-section {
  font-family: RegolaProBook;
  min-height: 10vh;
  width: 80%;
  background-color: white;
  vertical-align: middle;
  padding-top: 20px;
  padding-bottom: 20px;
}

.bordered-section {
  border: 1px solid black;
}

.bordered-section-no-bottom {
  border: 1px solid black;
  border-bottom: 0px;
}

.full-width img {
  margin: 0%;
  padding: 0%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*--------------------------------------------------------------
## Helper classes for constructing the grid layout
--------------------------------------------------------------*/

.border-all {
  border: 1px solid black;
}

.border-left {
  border-left: 1px solid black;
}

.border-right {
  border-right: 1px solid black;
}
.border-top-right {
  border-top: 1px solid black;
  border-bottom: 0px;
  border-left: 0px;
  border-right: 1px solid black;
}

.border-top {
  border-top: 1px solid black;
  border-bottom: 0px;
  border-left: 0px;
  border-right: 0px;
}

.border-bottom {
  border-bottom: 1px solid black;
}

@media (max-width: 992px) {
  .border-top-right {
    border-right: 0px;
  }
}

#introduction {
  font-family: RegolaProBook;
  height: auto;
  width: 100%;
  display: flex;
  align-items: center;
  background-color: black;
  color: white;
}

.kontakt {
  font-family: RegolaProBook;
}

.kontakt-row {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
}

#front-page-fortbildung {
  background-color: blue;
}

#front-page-blog {
  background-color: black;
}

#front-page-botschafter,
#front-page-vortrag {
  background-color: red;
  color: white;
}

#front-page-vortrag:hover img,
#front-page-fortbildung:hover img,
#front-page-blog:hover img,
#front-page-botschafter:hover img {
  opacity: 0;
}

.angebot-page-image {
  background-color: blue;
}

.menschen-page-image {
  background-color: red;
}

.verein-page-image {
  background-color: black;
}

.angebot-page-image:hover img,
.menschen-page-image:hover img,
.verein-page-image:hover img {
  opacity: 0;
}

/*--------------------------------------------------------------
## Mitglieder A-Z
--------------------------------------------------------------*/

.mitglieder-menu .col-md-3 {
  padding: 0%;
}

.mitglieder-menu .firstrow img {
  border-top: 1px solid grey;
}

.mitglieder-menu img {
  border-left: 1px solid grey;
  border-right: 1px solid grey;
}

.mitglieder-menu .text-row {
  border-bottom: 1px solid black;
}

@media (max-width: 992px) {
  .mitglieder-menu .border-top-right {
    border-right: 1px solid black;
    border-left: 1px solid black;
    border-bottom: 1px solid black;
  }
}

/*--------------------------------------------------------------
## Site footer
--------------------------------------------------------------*/

.footer nav {
  background-color: black;
  border-radius: 0%;
  min-height: 40px;
  width: 100%;
  margin-bottom: 0%;
  justify-content: center;
  align-content: center;
  position: relative;
  padding-right: 20px;
}

.footer ul {
  vertical-align: middle !important;
}

.footer li a {
  font-family: RegolaProBook;
  color: white;
  padding-left: 20px;
  padding-bottom: 5px;
  padding-top: 5px;
}

.footer .nav li a:hover {
  text-decoration: none;
  background-color: transparent;
}

.footer li img {
  width: 25px;
  padding: 0% !important;
}

.footer .navbar .navbar-right li {
  white-space: nowrap;
  display: inline-block;
  margin: auto;
}

/*--------------------------------------------------------------
## Kontakt Page
--------------------------------------------------------------*/

.kontakt-input .form-group select {
  border-radius: 0;
}

.kontakt-input h2 {
  padding: 0% !important;
  margin-top: 0% !important;
}

.kontakt-input .col-kontakt {
  padding: 20px;
}

.kontakt-input .nachricht {
  border-radius: 0;
  border-color: black;
  min-height: 150px;
  width: 100%;
  resize: none;
  margin-bottom: 0% !important;
  margin-top: 50px;
}

.kontakt-input .form-group input {
  font-family: RegolaProBook;
  border-radius: 0;
  border-color: black;
}

.kontakt-input .btn {
  padding: 0%;
  width: 100%;
}

@media (max-width: 992px) {
  #introduction,
  .carousel-indicators {
    visibility: hidden;
    display: none;
  }
}

.kontakt-input .form-group select {
  border-radius: 0;
  -webkit-appearance: none;
  border-color: black;
}

#kontakt-row {
  width: 100%;
}

.kontakt-map iframe {
  padding: 20px;
  border: none !important;
}

/*--------------------------------------------------------------
## Site header
--------------------------------------------------------------*/

header {
  font-family: RegolaProBook;
  font-weight: normal;
  width: 100%;
  min-height: 75px;
  text-align: center;
  position: fixed;
  top: 0%;
  background-color: white;
  color: black;
  z-index: 20;
  padding-left: 20px;
  padding-right: 20px;
}

.menu-header {
  height: 75px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.menu-header-item {
  flex: 1;
  display: flex;
  justify-content: center;
}

.menu-header-item:first-child {
  margin-right: auto;
  justify-content: flex-start;
}

.menu-header-item:last-child {
  margin-left: auto;
  justify-content: flex-end;
}

.menu-header-item img {
  font-size: 20px;
  height: 2em;
}

.menu-header .col-xs-3 {
  padding: 0%;
}

#home-button,
#home-field {
  float: left;
  box-shadow: none;
}

#home-button-right,
#home-field-right {
  float: right;
  box-shadow: none;
}

#menu-bar,
#menu-close {
  /* width: 75px; */
}

header button {
  margin: auto;
}

.menu-button {
  font-size: 2em;
  text-decoration: none;
  color: black;
  padding: 0%;
}

.open {
  visibility: visible;
  display: block;
}

.close {
  visibility: hidden;
  display: none;
}

#menu {
  height: 0%;
  width: 100%;
  position: fixed;
  left: 0;
  background-color: white;
  background-color: white;
  overflow: hidden;
  transition: 0.5s;
}

#menu a {
  line-height: 18vh;
  height: 20vh;
  width: 100%;
  text-decoration: none;
  font-size: 9em;
  color: black;
  display: block;
  transition: 0.3s;
  border-top: 1px solid black;
}

#search-icon {
  height: 5vh;
  line-height: 10vh;
  width: 100%;
}

header .filter-sidenav {
  position: fixed;
  padding-top: 10vh;
  margin-left: 0%;
}

header .container-fluid {
  padding-left: 0%;
  padding-right: 0px;
}

header #search-icon img {
  height: 100px;
  width: 100px;
}

.overlay-content {
  position: relative;
  height: 100vh;
  text-align: center;
}

.overlay #angebot:hover,
.overlay #angebot:focus {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  background-color: blue;
  color: white;
}

.overlay #menschen:focus,
.overlay #menschen:hover {
  -webkit-tap-highlight-color: red;
  background-color: red;
  color: white;
}

.overlay #verein:hover,
.overlay #verein:hover {
  -webkit-tap-highlight-color: black;
  background-color: black;
  color: white;
}

.overlay #mitmachen:focus,
.overlay #mitmachen:hover {
  -webkit-tap-highlight-color: yellow;
  background-color: yellow;
}

#search-field {
  border-bottom: 1px solid black;
}

/*--------------------------------------------------------------
## Front Page
--------------------------------------------------------------*/

/* The carousel below front page intro  */

.carousel {
  height: auto;
  width: 100%;
}

.carousel .carousel-inner .carousel-caption {
  top: 0;
  left: 10;
  color: black;
  text-align: justify;
}

.carousel-indicators li {
  background-color: gray;
}

.carousel-responsive {
  display: none;
  visibility: hidden;
}

.marquee {
  overflow: hidden;
  height: auto;
}

.angebot-ticker:hover {
  background-color: blue;
  color: white;
}

.menschen-ticker:hover {
  background-color: red;
  color: white;
}

.mitmachen-ticker:hover {
  background-color: yellow;
  color: black;
}

.angebot-ticker:hover p img,
.menschen-ticker:hover p img,
.mitmachen-ticker:hover p img {
  opacity: 0.4;
}

.marquee img {
  height: 115px;
  width: auto;
  padding-left: 5vh;
  padding-right: 5vh;
}

.ticker-wrap .ticker__item img {
  height: 100%;
  max-height: 150px;
}

/*--------------------------------------------------------------
## Media Queries
--------------------------------------------------------------*/

@media screen and (max-height: 450px) {
  /* max-width or max-height ? */
  .overlay {
    overflow-y: auto;
  }

  .overlay a {
    font-size: 20px;
  }

  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}

@media (max-width: 768px) {
  html {
    margin-top: 55px;
  }

  #masthead {
    font-size: 0.5em;
    min-height: 55px;
  }

  #menu {
    font-size: 1em;
  }

  .menu-header {
    height: 55px;
    /* height: auto; */
  }

  #menu-bar,
  #menu-close {
    /* width: 55px; */
    margin-left: 0px;
    margin-right: 0px;
  }

  .overlay #angebot:hover {
    background-color: blue;
    color: white;
  }

  .overlay #menschen:hover {
    background-color: red;
    color: white;
  }

  .overlay #verein:hover {
    background-color: black;
    color: white;
  }

  .overlay #mitmachen:hover {
    background-color: yellow;
  }

  #introduction h6 {
    font-size: 0.5em;
  }

  .text-row h4,
  .text-row-black h4 {
    font-size: 1em;
  }

  .menu-button {
    font-size: 2.5em;
  }

  .menu-header-item img {
    font-size: 10px;
    height: 2.5em;
  }

  p.angebot-list-type {
    padding: 0px;
    margin: 0px;
    font-style: italic;
    border-right: none;
  }

  .angebot-list-item .type {
    padding: 0px;
    margin: 0px;
    font-style: italic;
    border-right: none;
  }

  .footer ul {
    width: 100%;
  }

  .footer li a {
    padding-bottom: 10px !important;
    padding-top: 10px !important;
  }

  .footer .navbar-nav,
  .footer nav {
    margin: 0% !important;
    padding: 0% !important;
  }

  .footer .navbar-left li {
    border-bottom: 0.5px solid white;
  }

  header #search-icon img {
    max-height: 50px;
    max-width: 50px;
  }

  .list-group-item {
    font-size: 2em !important;
  }
}

/* Styling für die Liste der Angebote */

.angebot-list-item-container {
  padding: 0px;
  margin: 0px;
}

p.angebot-list-month {
  padding: 0px;
  margin: 0px;
  size: 16px;
}

p.angebot-list-day {
  padding: 0px;
  margin: 0px;
  font-size: 24px;
}

.angebot-list-description {
  padding: 0px;
  margin: 0px;
}

.border-left {
  border-color: black;
  border-left: 1px solid;
}

#event-list .row:hover {
  background-color: blue;
  color: white;
}

/*--------------------------------------------------------------
## Horizontal NewsTicker
--------------------------------------------------------------*/

.news-ticker p {
  font-family: RegolaProBook;
  padding-left: 20px;
  margin-bottom: 0%;
}

.news-ticker .marquee {
  overflow: hidden;
  height: auto;
  font-size: 3em;
  border: 1px solid black;
  border-bottom: 0px;
}

.news-ticker .angebot-ticker:hover {
  background-color: blue;
  color: white;
}

.news-ticker .menschen-ticker:hover {
  background-color: red;
  color: white;
}

.news-ticker .mitmachen-ticker:hover {
  background-color: yellow;
}

.news-ticker .ticker-wrap .ticker__item img {
  height: 100%;
  max-height: 150px;
}

.image-menu .col-md-6 {
  padding: 0;
  margin: 0;
}

.image-menu .caption {
  width: 100%;
  height: 5%;
  display: flex;
  align-items: center;
  border-color: black;
  border-width: 1px;
  border-style: solid;
}

/*--------------------------------------------------------------
## Newsletter
--------------------------------------------------------------*/

.newsletter-formular .form-group,
.newsletter-formular .btn-formular {
  padding-left: 20px;
  padding-right: 20px;
}

/*--------------------------------------------------------------
## General list styles
--------------------------------------------------------------*/

.list-error {
  text-align: center;
  margin: 5%;
}

/*--------------------------------------------------------------
##  Filter Button
--------------------------------------------------------------*/

button[aria-expanded='false'] .filter-close,
button[aria-expanded='true'] .filter-open {
  display: none;
}

button[aria-expanded='true'] .filter-close,
button[aria-expanded='false'] .filter-open {
  display: block;
}

.filter-close {
  height: 30px;
  margin-left: 10px;
}

.filter-open {
  height: 30px;
  width: 30px;
  margin-left: 10px;

}

/*--------------------------------------------------------------
## Angebot Filter
--------------------------------------------------------------*/

.filter-sidenav {
  position: fixed;
  padding-top: 10vh;
  margin-left: 0%;
  height: 100%;
  /* 100% Full-height */
  width: 0;
  /* 0 width - change this with JavaScript */
  position: relative;
  /* Stay in place */
  z-index: 15;
  /* Stay on top */
  top: 90.891px;
  /* Stay at the top */
  left: 0;
  overflow-x: hidden;
  /* Disable horizontal scroll */
  padding-top: 60px;
  /* Place content 60px from the top */
  transition: 0.5s;
  /* 0.5 second transition effect to slide in the sidenav */
}

.angebot-filter {
  position: absolute;
  top: 75px;
  left: 0;
  width: 100%;
}

.angebot-filter .scroll {
  overflow: auto;
  height: calc(100vh - 75px);
}

.angebot-filter .scroll::-webkit-scrollbar {
  display: none;
}

@media (max-width: 768px) {
  .angebot-filter {
    position: absolute;
    top: 55px;
    left: 0;
    width: 100%;
  }
}

.angebot-filter .angebot-section {
  font-family: RegolaProBook;
  font-size: 15px;
  width: 100%;
  height: 40px;
  display: flex;
  background-color: black;
  color: white;
  border-radius: 0%;
  letter-spacing: 1px;
  justify-content: space-between;
  align-items: center;
}

.angebot-filter .list-group-item {
  border-radius: 0%;
  border-color: black;
  border-width: 1px;
  border-style: solid;
  width: 100%;
  height: 40px !important;
  padding-top: 5px;
  padding-bottom: 5px;
}

.angebot-filter .list-group-item a {
  font-size: 12pt;
  text-align: left;
}

.angebot-filter .list-group-item:hover,
.angebot-filter .list-group-item:hover a {
  color: white;
  background-color: #0000ff;
  text-decoration: none;
  cursor: pointer;
}

.angebot-filter .active,
.angebot-filter .active:hover,
.angebot-filter .active:focus {
  z-index: 2;
  color: white !important;
  background-image: none;
  background-color: #0000ff !important;
  border-color: #0000ff !important;
}

.angebot-filter .center-parent {
  display: table;
}

.angebot-filter .center-child {
  display: table-cell;
  vertical-align: middle;
}

/*--------------------------------------------------------------
## Angebot List
--------------------------------------------------------------*/

.angebot-list {
  font-family: RegolaProBook;
  width: 100%;
}

.angebot-list .section .close-button {
  height: 40px;
  padding-right: 20px;
  padding-left: 20px;
}

.angebot-list .section .open-button {
  height: 40px;
  padding-right: 20px;
  padding-left: 20px;
}

.angebot-list .section div[aria-expanded='false'] .close-button,
.angebot-list .section div[aria-expanded='true'] .open-button {
  display: none;
}

.angebot-list .section div[aria-expanded='true'] .close-button,
.angebot-list .section div[aria-expanded='false'] .open-button {
  display: block;
}

.angebot-list .row:hover {
  background-color: blue;
  color: white;
}

.angebot-list .section {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  background-color: white;
  border-bottom: 1px solid black;
  border-left: 1px solid black;
  border-right: 1px solid black;
  border-radius: 0%;
  padding-top: 8px;
  padding-bottom: 8px;
}

.angebot-list .section .title {
  padding-left: 20px;
  text-align: left;
  font-size: 12pt;
  width: 100%;
}

.angebot-list .black {
  background-color: black;
  color: white;
}

.angebot-list-item {
  font-family: RegolaProBook;
  font-size: 12pt;
  border-color: black;
  border-width: 1px;
  border-style: solid;
  border-top: 0px;
  padding: 0px;
  margin: 0px;
  height: auto;
}

.angebot-list-item .border-left {
  border-color: black;
  border-left: 1px solid;
}

.angebot-list-item .month {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
}

.angebot-list-item .type {
  padding-top: 10px;
  padding-bottom: 10px;
}

.angebot-list-item .description {
  padding-top: 10px;
  padding-bottom: 10px;
}

@media (max-width: 768px) {
  .angebot-list-item .type {
    padding-bottom: 0px;
  }

  .angebot-list-item .description {
    padding-top: 0px;
    padding-bottom: 10px;
  }
}

/*--------------------------------------------------------------
## Filter für Menschen
--------------------------------------------------------------*/

.menschen-filter {
  position: absolute;
  top: 75px;
  left: 0;
  overflow: auto;
  height: calc(100vh - 75px);
  width: 25%;
}

@media (max-width: 768px) {
  .menschen-filter {
    position: absolute;
    top: 55px;
    left: 0;
    overflow: auto;
    height: calc(100vh - 75px);
    width: 100%;
  }

  ::-webkit-scrollbar {
    width: 0px;
    background: transparent;
    /* make scrollbar transparent */
  }
}

.menschen-filter .section {
  width: 100%;
  height: 40px;
  font-size: 1.5em;
  display: flex;
  align-items: center;
  background-color: black;
  color: white;
  border-radius: 0%;
  letter-spacing: 1px;
  font-size: 15px;
  justify-content: space-between;
  align-items: center;
}

.menschen-filter .list-group-item {
  border-radius: 0%;
  border-color: black;
  border-width: 1px;
  border-style: solid;
  width: 100%;
  text-align: left;
  height: 40px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.menschen-filter .list-group-item a {
  font-size: 12pt;
  text-align: left;
}

.menschen-filter .list-group-item:hover,
.menschen-filter .list-group-item:hover a {
  color: white;
  background-color: red;
  text-decoration: none;
  cursor: pointer;
}

.menschen-filter .center-parent {
  display: table;
}

.menschen-filter .center-child {
  display: table-cell;
  vertical-align: middle;
}

.list-group {
  margin: 0px;
}

.list-group-item,
.list-group-item:first-child,
.list-group-item:last-child {
  font-size: 15px;
  border-radius: 0%;
  border-color: black;
  border-width: 1px;
  border-style: solid;
  text-align: left;
  height: 4vh;
  min-height: 40px;
}

.menschen-filter a:hover {
  color: white !important;
  background-color: #ff0000;
}

.menschen-filter .active,
.menschen-filter .active:hover,
.menschen-filter .active:focus {
  z-index: 2;
  color: white !important;
  background-image: none;
  background-color: #ff0000 !important;
  border-color: #ff0000 !important;
}

/*--------------------------------------------------------------
## Styles for the list containing Menschen
--------------------------------------------------------------*/

.menschen-list {
  font-family: RegolaProBook;
  width: 100%;
  display: none;
  cursor: pointer;
}

.menschen-list .list-item {
  /* equal height */
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  /* no gutter */
  margin-right: 0%;
  margin-left: 0%;
}

.menschen-list .list-item .btn-primary {
  width: 100%;
  border-radius: 0px;
}

.menschen-list .section {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  background-color: black;
  color: white;
  border-bottom: 1px solid black;
  border-left: 1px solid black;
  border-right: 1px solid black;
  border-radius: 0%;
  padding-top: 8px;
  padding-bottom: 8px;
}

.menschen-list .black {
  background-color: black;
  color: white;
}

.menschen-list .section .text-black {
  color: black;
}

.menschen-list .section .text-white {
  color: white;
}

.menschen-list .section .grid-section {
  border-top: 1px solid black;
}

.menschen-list .section .title {
  padding-left: 20px;
  text-align: left;
  font-size: 12pt;
  width: 100%;
}

.menschen-list .section .close-button {
  height: 40px;
  padding-right: 20px;
  padding-left: 20px;
  display: none;
}

.menschen-list .section .open-button {
  height: 40px;
  padding-right: 20px;
  padding-left: 20px;
  display: none;
}

.menschen-list .section div[aria-expanded='false'] .close-button,
.menschen-list .section div[aria-expanded='true'] .open-button {
  display: none;
}

.menschen-list .section div[aria-expanded='true'] .close-button,
.menschen-list .section div[aria-expanded='false'] .open-button {
  display: block;
}

.menschen-list-item-container {
  margin: 0px;
  padding: 0px;
}

.menschen-list-item-row {
  border-right: 1px solid black;
}

.menschen-list-item-row .row:hover {
  background-color: red;
  color: white;
}

.menschen-list-item-container .menschen-list-item {
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 20px;
  padding-right: 20px;
  border-left: 1px solid black;
  border-bottom: 1px solid black;
  font-size: 12pt;
}

.menschen-grid-item .image {
  height: 400px;
}

.menschen-grid-item .thumbnail {
  position: relative;
  border-top: 0px;
  border-radius: 0%;
  margin: 0%;
  padding: 0%;
  background-color: black;
  width: 100%;
  height: 400px;
}

.menschen-grid-item .thumbnail .text {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 100px;
}

.menschen-grid-item .text-row {
  border-bottom: 1px;
  border-style: solid;
}

@media (max-width: 992px) {
  .menschen-grid-item .text-row {
    border-right: 1px solid black;
    border-bottom: 1px solid black;
  }

  .menschen-grid-item .thumbnail {
    border-right: 1px solid black;
  }
}

/* Styling für die Liste die verwendet wird, Menschen anzuzeigen */

.menschen-list .list-item-container {
  padding: 0px;
  margin: 0px;
}

.menschen-list .list-item .item-col {
  padding: 7px;
  border-color: black;
  border: 1px solid;
}

.menschen-list-controls {
  padding-right: 15px;
  padding-left: 15px;
  margin-left: auto;
  margin-right: 0px;
}

.menschen-list-controls {
  padding-right: 15px;
  padding-left: 15px;
  margin-left: auto;
  margin-right: 0px;
}

/*--------------------------------------------------------------
## Loader for async operations
--------------------------------------------------------------*/

.loader,
.loader:before,
.loader:after {
  background: #000000;
  -webkit-animation: load1 1s infinite ease-in-out;
  animation: load1 1s infinite ease-in-out;
  width: 1em;
  height: 4em;
}

.loader {
  color: #000000;
  text-indent: -9999em;
  margin: 88px auto;
  position: relative;
  font-size: 11px;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

.loader:before,
.loader:after {
  position: absolute;
  top: 0;
  content: '';
}

.loader:before {
  left: -1.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.loader:after {
  left: 1.5em;
}

@-webkit-keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em;
  }

  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}

@keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em;
  }

  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}

/*--------------------------------------------------------------
## Event Detail Section
--------------------------------------------------------------*/

.event-detail-section {
  border: 1px solid black;
}

.event-detail-text {
  padding-left: 0% !important;
}

.event-detail-section .close-button {
  width: 100%;
  height: 40px;
  padding-right: 20px;
  padding-left: 20px;
}

.event-detail-section .firstrow {
  display: -webkit-flex;
  display: flex;
}

.event-detail-section .firstrow h5 {
  vertical-align: middle;
}

#first-row-title,
#event,
#header-speaker {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#speaker-image {
  display: flex;
  align-items: center;
  justify-content: center;
}

.event-detail-section .secondrow,
.event-detail-section .fourthrow,
.event-detail-section .fifthrow {
  min-height: 200px;
}

.event-detail-section .secondrow .date {
  border-right: 1px solid black;
  border-top: 1px solid black;
}

.event-detail-section .secondrow .start-time {
  border-right: 1px solid black;
  border-top: 1px solid black;
}

.event-detail-section .secondrow .speaker {
  border-top: 1px solid black;
}

.event-detail-section .thirdrow {
  min-height: 500px;
}

.event-detail-section .thirdrow .left h3 {
  font-family: RegolaProBook;
}

.event-detail-section .thirdrow .left {
  border-top: 1px solid black;
  border-right: 1px solid black;
  padding-top: 20px;
}

.event-detail-section .thirdrow .left p {
  overflow: hidden;
}

.event-detail-section .thirdrow .right {
  border-top: 1px solid black;
}

.event-detail-section .thirdrow .right .event-summary {
  padding-top: 20px;
  padding-bottom: 20px;
}

.event-detail-section .fourthrow .left {
  border-right: 1px solid black;
  border-top: 1px solid black;
  padding-top: 20px;
  min-height: 400px;
}

.event-detail-section .fourthrow p {
  /* font-size: 20px; */
}

.event-detail-section .fourthrow .left .vertical-text {
  position: absolute;
  transform: rotate(270deg);
  transform-origin: right bottom;
  background-color: red;
  color: white;
  text-align: center;
  /* font-size: 20px; */
  right: 0px;
}

.event-detail-section .fourthrow .right {
  border-top: 1px solid black;
  padding-top: 20px;
}

.event-detail-section .fifthrow .left {
  border-right: 1px solid black;
  border-top: 1px solid black;
  padding-right: 20px;
  padding-bottom: 20px;
}

.event-detail-section .fifthrow .left p {
  /* font-size: 20px; */
}

.event-detail-section .fifthrow .right {
  border-top: 1px solid black;
  padding-right: 20px;
}

.event-detail-section .fifthrow .right h2 {
  /* font-size: 45px; */
  margin-top: 0px;
}

@media (max-width: 992px) {
  .event-detail-section .firstrow,
  .profile-detail-section .firstrow {
    display: none;
    visibility: hidden;
  }

  .event-detail-section .secondrow .start-time,
  .event-detail-section .thirdrow .left,
  .event-detail-section .fourthrow .left,
  .event-detail-section .fifthrow .left {
    border-right: 0px;
  }

  .event-detail-section .secondrow .date,
  .event-detail-section .secondrow .start-time,
  .event-detail-section .fourthrow .left,
  .event-detail-section .fourthrow .right {
    padding-right: 20px;
    padding-bottom: 20px;
  }

  .event-detail-section .secondrow .date,
  .event-detail-section .secondrow .start-time {
    padding-top: 10px;
  }

  .event-detail-section .thirdrow .right {
    border-left: 0px !important;
  }
}

/*--------------------------------------------------------------
## todo styles
--------------------------------------------------------------*/

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}

.red {
  color: red;
}

.blue {
  color: blue;
}

.yellow {
  color: yellow;
}

/*--------------------------------------------------------------
## Mitmachen
--------------------------------------------------------------*/

.mitmachen-content {
  max-width: 100%;
}

.row-mitmachen {
  min-height: 30vh;
  max-width: 100%;
}

.mitgliedschaft:hover {
  background-color: yellow;
}

.mitmachen-title {
  margin-bottom: 60px;
}

#mitmachen-vorteile p {
  padding: 10px;
  padding-left: 20px;
}

/*--------------------------------------------------------------
## General style for CiviCRM elements
--------------------------------------------------------------*/

#crm-container .crm-section .label {
  color: black;
  float: none;
  line-height: 1.5;
  margin-left: 5%;
}

#content #crm-container h3 {
  border-radius: 0px;
  border-color: black;
  width: 100%;
  background: black;
  color: white;
}

/*  Titles of all profiles that are incorporated within a contributaion page */

#crm-container fieldset legend {
  border-radius: 0px;
  border-color: black;
  width: 100%;
  background: black;
  color: white;
}

/*--------------------------------------------------------------
##  Styles for CiviCRM elements within contribution forms
##  (membership registration)
--------------------------------------------------------------*/

#crm-container .CRM_Contribute_Form_Contribution_Main .crm-section .content {
  margin-right: 5%;
  margin-left: 5%;
}

#content
  #crm-container
  .CRM_Contribute_Form_Contribution_Main
  input[type='text'] {
  width: 100%;
  border-radius: 0px;
  border-color: black;
}

#content
  #crm-container
  .CRM_Contribute_Form_Contribution_Main
  input[type='password'] {
  width: 100%;
  border-radius: 0px;
  border-color: black;
}

#crm-container .CRM_Contribute_Form_Contribution_Main textarea {
  border-radius: 0px;
  border-color: black;
}

#content
  #crm-container
  .CRM_Contribute_Form_Contribution_Main
  .crm-form-submit {
  width: 100%;
  padding: 5px;
  font-size: 0.8em;
}

/* Hide the check mark appearing on the left hand side
   of the submit button text. */

#content #crm-container .CRM_Contribute_Form_Contribution_Main .crm-i {
  display: none;
}

#crm-container .CRM_Contribute_Form_Contribution_Main .crm-button {
  margin-left: 5%;
  margin-right: 5%;
  float: none !important;
  display: block;
  overflow: hidden;
  padding: 1px;
  border: none;
  background: none;
  background-color: black;
  color: white;
  border-radius: 0;
  font-size: 1.5em;
  padding: 10px;
  padding-right: 20px;
}

#content
  #crm-container
  .CRM_Contribute_Form_Contribution_Main
  .crm-form-select {
  width: 100%;
  border-radius: 0px;
  border-color: black;
  background: white;
}

/* Inner container of CiviCRM dropdown element excluding the checkbox */

#content
  #crm-container
  .CRM_Contribute_Form_Contribution_Main
  .crm-form-select
  .select2-choice {
  height: 30px;
  color: black;
  background: white;
  border: 1px solid black;
  border-radius: 0%;
  padding-top: 3px;
}

#content
  #crm-container
  .CRM_Contribute_Form_Contribution_Main
  .crm-form-select
  .select2-arrow {
  background: white;
  border-left: 1px solid black;
  border-radius: 0%;
}

/*--------------------------------------------------------------
## Styles for CiviCRM elements within contribution forms
## (confirmation page)
--------------------------------------------------------------*/

#crm-container .CRM_Contribute_Form_Contribution_Confirm .header-dark {
  border-radius: 0px;
  background-color: black;
  margin: 0%;
}

#crm-container .CRM_Contribute_Form_Contribution_Confirm .crm-button {
  background: black;
  border-radius: 0px;
}

/*--------------------------------------------------------------
## Styles for CiviCRM elements within event registration forms
--------------------------------------------------------------*/

#crm-container .CRM_Event_Form_Registration_Register .crm-section .content {
  margin-right: 5%;
  margin-left: 5%;
}

#content
  #crm-container
  .CRM_Event_Form_Registration_Register
  input[type='text'] {
  width: 100%;
  border-radius: 0px;
  border-color: black;
}

/* Outer container of a CiviCRM dropdown element */

#crm-container .CRM_Event_Form_Registration_Register .crm-form-select {
  width: 100%;
  border-radius: 0px;
  border-color: black;
  background: white;
}

/* Inner container of CiviCRM dropdown element excluding the checkbox */

#crm-container
  .CRM_Event_Form_Registration_Register
  .crm-form-select
  .select2-choice {
  height: 30px;
  color: black;
  background: white;
  border: 1px solid black;
  border-radius: 0%;
  padding-top: 3px;
}

#crm-container
  .CRM_Event_Form_Registration_Register
  .crm-form-select
  .select2-arrow {
  background: white;
  border-left: 1px solid black;
  border-radius: 0%;
}

#crm-container .CRM_Event_Form_Registration_Register .crm-form-submit {
  width: 100%;
  padding: 5px;
  font-size: 0.8em;
}

/* Hide the check mark appearing on the left hand side
   of the submit button text. */

#crm-container .CRM_Event_Form_Registration_Register .crm-i {
  display: none;
}

#crm-container .CRM_Event_Form_Registration_Register .crm-button {
  margin-left: 5%;
  margin-right: 5%;
  float: none !important;
  display: block;
  overflow: hidden;
  padding: 1px;
  border: none;
  background: none;
  background-color: black;
  color: white;
  border-radius: 0;
  font-size: 1.5em;
  padding: 10px;
  padding-right: 20px;
}

/*--------------------------------------------------------------
## Styles for CiviCRM elements within event registration form
## (additional participants)
--------------------------------------------------------------*/

#crm-container
  .CRM_Event_Form_Registration_AdditionalParticipant
  .crm-section
  .content {
  margin-right: 5%;
  margin-left: 5%;
}

#content
  #crm-container
  .CRM_Event_Form_Registration_AdditionalParticipant
  input[type='text'] {
  width: 100%;
  border-radius: 0px;
  border-color: black;
}

/* Outer container of a CiviCRM dropdown element */

#crm-container
  .CRM_Event_Form_Registration_AdditionalParticipant
  .crm-form-select {
  width: 100%;
  border-radius: 0px;
  border-color: black;
  background: white;
}

/* Inner container of CiviCRM dropdown element excluding the checkbox */

#crm-container
  .CRM_Event_Form_Registration_AdditionalParticipant
  .crm-form-select
  .select2-choice {
  height: 30px;
  color: black;
  background: white;
  border: 1px solid black;
  border-radius: 0%;
  padding-top: 3px;
}

#crm-container
  .CRM_Event_Form_Registration_AdditionalParticipant
  .crm-form-select
  .select2-arrow {
  background: white;
  border-left: 1px solid black;
  border-radius: 0%;
}

#crm-container .CRM_Event_Form_Registration_AdditionalParticipant .crm-button {
  background: black;
  border-radius: 0px;
}

/*--------------------------------------------------------------
## Styles for CiviCRM elements within event registration form
## (confirmation page)
--------------------------------------------------------------*/

#crm-container .CRM_Event_Form_Registration_Confirm .header-dark {
  border-radius: 0px;
  background-color: black;
  margin: 0%;
}

#crm-container .CRM_Event_Form_Registration_Confirm .crm-button {
  background: black;
  border-radius: 0px;
}

#crm-container .CRM_Event_Form_Registration_Confirm .content {
  margin-left: 8%;
  margin-bottom: 3px;
}

#crm-container .CRM_Event_Form_Registration_Confirm .bold {
  margin-left: 1%;
  margin-bottom: 1%;
}

/*--------------------------------------------------------------
## Styles for CiviCRM elements within profile forms that are in
## edit mode.
--------------------------------------------------------------*/

#crm-container .CRM_Profile_Form_Edit .crm-section .content {
  margin-left: 10%;
  margin-right: 10%;
}

#content #crm-container .CRM_Profile_Form_Edit input[type='text'] {
  width: 100%;
  border-radius: 0px;
  border-color: black;
}

/* Outer container of a CiviCRM dropdown element */

#crm-container .CRM_Profile_Form_Edit .crm-form-select {
  border-radius: 0px;
  border-color: black;
  background: white;
}

/* Inner container of CiviCRM dropdown element excluding the checkbox */

#crm-container .CRM_Profile_Form_Edit .crm-form-select .select2-choice {
  height: 30px;
  color: black;
  background: white;
  border: 1px solid black;
  border-radius: 0%;
  padding-top: 3px;
}

#crm-container .CRM_Profile_Form_Edit .crm-form-select .select2-arrow {
  background: white;
  border-left: 1px solid black;
  border-radius: 0%;
}

#crm-container .CRM_Profile_Form_Edit .crm-form-submit {
  width: 100%;
  padding: 5px;
  font-size: 0.8em;
}

#crm-container .CRM_Profile_Form_Edit .crm-button {
  margin-left: 5%;
  margin-right: 5%;
  float: none !important;
  display: block;
  overflow: hidden;
  padding: 1px;
  border: none;
  background: none;
  background-color: black;
  color: white;
  border-radius: 0;
  font-size: 1.5em;
  padding: 10px;
  padding-right: 20px;
}

/* Hide the check mark appearing on the left hand side
   of the submit button text. */

#crm-container .CRM_Profile_Form_Edit .crm-i {
  display: none;
}

/*--------------------------------------------------------------
## Styles for the event calendar
--------------------------------------------------------------*/

#event-overlay {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 2;
  cursor: pointer;
}

#event-overlay-content {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 25px;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

#event-calendar {
  margin-top: 10px;
}

/* force location-block p elements to small-text */

#location-block {
  min-height: 25vw !important;
}

#location-block p {
  font-size: 10pt !important;
  line-height: 15pt;
  font-family: RegolaProBook !important;
  font-weight: normal !important;
}

/*--------------------------------------------------------------
## Login Page
--------------------------------------------------------------*/

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px white inset !important;
}

.login {
  border-top: 0px;
}

.login img {
  border-top: 1px solid black;
}

.login-anmelden {
  text-align: center;
  justify-content: center;
  font-size: 14px !important;
}

.login-anmelden input {
  margin-top: 20px;
}

.login-anmelden #user_login {
  margin: 0%;
}

.login-info,
.login-input {
  min-height: 50vh;
  padding: 20px 0 0 0;
  border: 0px;
  border-top: 1px solid black;
}

.login-info {
  border-right: 1px solid black;
}

.login-input input,
#user_login,
#somfrp_user_info,
#som_new_user_pass,
#som_new_user_pass_again {
  border-color: black;
  border-radius: 0;
  height: 34px;
  width: 100%;
  font-size: 14px !important;
}

.login-input label {
  visibility: hidden;
  display: none;
}

.login-input #wp-submit,
.login-mitmachen button,
#reset-pass-submit,
.reset-password input[type='submit'],
#kontaktBTN,
.change-password input[type='submit'] {
  height: 2.5em;
  background-color: black;
  color: white;
  font-size: 14px;
  padding: 0%;
  width: 100%;
}

.login-mitmachen {
  padding-top: 25%;
  padding-bottom: 25px;
  font-size: 14px !important;
}

#resetPassword {
  margin-top: 40px;
  float: left;
  text-decoration: none;
  background: none;
  color: red;
  font-size: 1em;
  padding-left: 20px;
}

.reset-password-row-one {
  min-height: 500px;
}

#lostpasswordform legend,
#resetpasswordform legend {
  display: none;
}

.lostpassword-submit {
  padding-left: 20px;
  padding-right: 20px;
}

.reset-password-left input,
#reset-pass-submit {
  margin-top: 20px;
}

.reset-password-right {
  justify-content: center;
  text-align: center;
}

.change-password label {
  font-size: 15px;
}

.change-password input {
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 0%;
  border: 1px solid black;
}

.change-password input[type='submit'] {
  margin-top: 20px;
}

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px white inset !important;
}

#event-calendar {
  margin-top: 10px;
}

/* Used for the navigation menu right below page header (account) */

/*--------------------------------------------------------------
## Styling for account dashboard page
--------------------------------------------------------------*/

.account-navbar {
  margin: 10px;
  border: solid 1px darkgray;
  border-radius: 0px;
}

.account-navbar a {
  color: black;
}

.login,
.angebot-page,
.site-content,
.menschen-page {
  min-height: calc(100vh - 115px);
}

/*--------------------------------------------------------------
## Styles for blog/civiCRM search grid items
--------------------------------------------------------------*/

.search-header {
  font-family: RegolaProBook;
  width: 100%;
}

.search-box {
  border-radius: 0% !important;
  margin-right: 15px;
}

.search-no-result {
  text-align: center;
  margin: 5%;
}

.search-nav {
  padding-top: 1%;
  padding-left: 2%;
}

.search-grid .row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
  margin: 3px;
}

/* Create 2 equal columns that sits next to each other */

.search-grid .column {
  flex: 1;
  padding: 0 4px;
}

.search-grid .column .search-item {
  border: 1px solid black;
  margin-top: 10px;
}

.search-grid .column img {
  vertical-align: middle;
  width: 100%;
  object-fit: cover;
}

/* Responsive layout - makes a two column-layout instead of four columns */

@media screen and (max-width: 800px) {
  .search-grid .column {
    flex: 1;
    max-width: 50%;
  }
}

@media screen and (min-width: 992px) {
  .search-grid .row {
    justify-content: center;
  }

  .search-grid .column {
    flex: 1;
    max-width: 25%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */

@media screen and (max-width: 600px) {
  .search-grid .column {
    flex: 100%;
    max-width: 100%;
  }
}

.search-grid .column .search-item .text-container {
  border-top: 1px solid black;
  padding-top: 15px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 15px;
  text-align: left;
}

.search-grid .text-container .date {
  font-family: RegolaProBook;
  padding: 0px;
  font-size: 0.9em;
  margin-bottom: 0px;
}

.search-grid .text-container .title {
  font-family: RegolaProBook;
  padding: 0px;
  margin-bottom: 0px;
}

.search-grid .text-container .author {
  font-family: RegolaProBook;
  padding: 0px;
  margin-bottom: 0px;
  font-size: 1.2em;
}

#blog-header {
  font-size: 20px;
  width: 100%;
}

/*-------------------------------------------------------------
## Styling for contact profile page
--------------------------------------------------------------*/

.profile .firstrow {
  min-height: 40px !important;
}

.profile .second-row {
  min-height: 25vh;
}

.event-image-menu {
  border-left: 1px solid black;
  border-right: 1px solid black;
}

.event-image-menu .img-row {
  height: 50vh;
  border-bottom: 0px;
  border-top: 1px solid black;
}

.event-image-menu .img-row > [class*='col-'] {
  height: 100%;
}

.event-image-menu img {
  /* object-fit: cover;
    height: 100%; */
}

@media screen and (max-width: 991px) {
  .profile .third-row .statement {
    border-left: 0px;
    border-top: 1px solid black;
  }

  .profile .fourth-row .additional-statement {
    border-right: 0px;
  }

  .profile .fourth-row .biography {
    border-top: 1px solid black;
  }

  .event-image-menu .img-row .col-md-6 {
    width: 50%;
  }
}

.padding-text {
  padding-top: 20px;
  padding-bottom: 20px;
}

.text-satzung a {
  font-size: 1.5em;
  padding-left: 20px;
  padding-bottom: 20px;
}

.padding-image {
  padding: 0% !important;
}

.cursor {
  cursor: pointer !important;
}

#wpadminbar {
  z-index: 100;
}

.arrow-left,
.arrow-right {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.arrow-left {
  margin: auto;
  margin-left: 20px;
}

.arrow-right {
  margin: auto;
  margin-right: 20px;
}

.testimonial-responsive {
  visibility: hidden !important;
  display: none !important;
}

@media (max-width: 992px) {
  .carousel-responsive {
    visibility: visible !important;
    display: block;
  }

  .carousel {
    height: auto;
  }

  .carousel-desktop {
    visibility: hidden;
    display: none;
  }

  .arrow-left {
    margin-left: 5px;
    height: 30px;
  }

  .arrow-right {
    margin-right: 5px;
    height: 30px;
  }
}

.carousel-control.left,
.carousel-control.right {
  background-image: none;
}

/*-------------------------------------------------------------
## Styling for search
--------------------------------------------------------------*/

#suche {
  display: block;
  position: absolute;
  padding: 0;
  height: 5vh;
  line-height: 5vh;
  width: 100%;
  justify-content: center;
  vertical-align: middle;
}

#suche form {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

#suche input[type='text'] {
  height: 10vh;
  font-size: 34pt;
  font-family: 'RegolaProBook' !important;
  font-weight: normal;
  display: -webkit-box;
  border: none;
  outline: none;
  color: black;
  width: 0px;
  padding-right: 60px;
  background: none;
  z-index: 3;
  transition: width 0.4s cubic-bezier(0, 0.795, 0, 1);
  cursor: pointer;
  background: url('assets/images/search.svg') center center no-repeat;
}

#suche input[type='text']:focus {
  width: 80% !important;
  margin: auto;
  z-index: 1;
  border-bottom: 1px solid black;
  cursor: text;
  background: none;
  text-align: center;
  position: relative;
  height: 60px;
  display: block;
  text-align: left;
  background: none;
}

.preserve-whitespace {
  white-space: pre-line;
}

/*-------------------------------------------------------------
## Styling for Event Registration
--------------------------------------------------------------*/

#printer-friendly,
#intro_text {
  display: none;
  visibility: hidden;
}

.entry-content {
  margin-top: 0;
}

.event-register-location {
  font-size: 1.5em;
  line-height: 1.5em;
  padding: 20px !important;
}

.event-register-information {
  font-size: 2em;
  line-height: 2em;
  padding: 20px !important;
}

.crm-container .messages {
  margin-top: 75px;
}

.crm-event-register-form-block legend {
  padding-left: 20px !important;
}

.crm-event-register-form-block #billingcheckbox {
  margin-left: 60px !important;
}

/* Test Square */

.square {
  float: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 50vw !important;
  padding-left: 0%;
}

.image-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.square-bottom {
  bottom: 0;
  right: 0;
  margin-top: 50px;
  padding-bottom: 20px;
}

@media (max-width: 960px) {
  .text-section {
    width: 100% !important;
  }
}

#start_date_II,
#start_day_hour {
  padding-top: 20px;
}

@media (max-width: 992px) {
}

/*-------------------------------------------------------------
## Styling for Collapsible Text
--------------------------------------------------------------*/

.morecontent span {
  display: none;
}

a.morelink,
a.morelink.less {
  text-decoration: none;
  color: black !important;
}

.collabsible-brw {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

@media (max-width: 960px) {
  h1 {
    padding-top: 10px !important;
    font-size: 32pt !important;
    line-height: 37pt !important;
  }

  h2 {
    font-size: 18pt !important;
    line-height: 22pt !important;
  }

  p,
  h3 {
    font-size: 15pt !important;
    line-height: 20pt !important;
  }

  .small-text,
  .small-text-normal {
    font-size: 9pt !important;
    line-height: 15pt !important;
  }

  .event-detail-section .secondrow .date,
  .event-detail-section .secondrow .start-time {
    padding-top: 0 !important;
  }
}

.post-content p,
.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 26px;
  margin-bottom: 26px;
}