/*--------------------------------------------------------------
>>> INHALT:
----------------------------------------------------------------
1.0 LESS Variablen
2.0 Generelles
3.0 Navbar
4.0 Metabar
5.0 Waddup-bar
6.0 Artikelübersicht (Startseite, Themenseite, etc.)
7.0 Artikelansicht einzeln
8.0 Kommentare
9.0 Themenansicht
10.0 Listenansicht
11.0 Suche
12.0 404
13.0 Media Query für kleine Displays
    13.1 Generelles
    13.2 Navbar
    13.3 Metabar
    13.4 Waddup-Bar
    13.5 Artikelübersicht (Startseite, Themenseite, etc.)
    13.6 Artikelansicht einzeln
    13.7 Kommentare
    13.8 Seiten
    13.9 Listenansicht
14.0 Media Query für mittelgroße Displays
    14.1 Generelles
    14.2 Artikelübersicht (Startseite, Themenseite, etc.)
    14.3 Artikelansicht einzeln
    14.4 Kommentare
15.0 Media Query für große Displays
    15.1 Generelles
    15.2 Navbar
    15.3 Waddup-Bar
    15.4 Artikelübersicht (Startseite, Themenseite, etc.)
    15.5 Artikelansicht einzeln
    15.5 Listenansicht
16.0 Media Query für XL Displays
    16.1 Generelles
    16.2 Artikelübersicht (Startseite, Themenseite, etc.)
    16.3 Artikelansicht einzeln
--------------------------------------------------------------*/
/*--------------------------------------------------------------
| 1.0 | LESS Variablen
\-------------------------------------------------------------*/
/*
Rot:			#ff1a40 - RGB 255/26/64
Schwarz:		#0e0e0e - RGB 14/14/14
Grau:			#b9b9b9 - RGB 185/185/185
Grau heller:	#efefef - RGB 239/239/239
*/
/* -------------------- VARIABLES -------------------- */
.springyTransition {
  -webkit-transition: all 250ms cubic-bezier(0.175, 0.885, 0.32, 1);
  -webkit-transition: all 250ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -moz-transition: all 250ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -o-transition: all 250ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: all 250ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/*--------------------------------------------------------------
| 2.0 | Generelles
\-------------------------------------------------------------*/
body {
  height: 100%;
  overflow-y: auto;
  position: relative;
  -moz-font-smoothing: antialiased;
  font-smoothing: antialiased;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}
div.content-wrapper {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
a,
a:hover,
.btn,
.btn:hover,
button,
button:hover {
  -webkit-transition: background 0.25s, color 0.25s;
  transition: background 0.25s, color 0.25s;
}
img {
  max-width: 100%;
  height: auto;
}
.btn {
  border-width: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  font-family: "brandon-grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
}
.btn:hover {
  color: #fff;
  background: #ff1a40;
  text-decoration: none;
  border-color: #ff1a40;
}
nav ul.pager {
  clear: both;
}
nav ul.pager li a {
  width: 45%;
  padding: 1em;
  font-weight: bold;
  font-family: "brandon-grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;
  border: 2px solid #ff1a40;
  color: #ff1a40 !important;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}
nav ul.pager li a:hover {
  color: #fff !important;
  background: #ff1a40 !important;
}
/*--------------------------------------------------------------
| 3.0 | Navbar
\-------------------------------------------------------------*/
nav#navbar {
  overflow: auto;
  background: #000;
  -webkit-hyphens: none !important;
  -moz-hyphens: none !important;
  -ms-hyphens: none !important;
  hyphens: none !important;
}
nav#navbar img#mojo-m {
  width: 60px;
  height: auto;
  background: #ff1a40;
}
nav#navbar span {
  top: 30px;
  color: #ff1a40;
  font-size: 16px;
  margin-top: -9px;
  margin-left: 16px;
  line-height: 16px;
  position: absolute;
  letter-spacing: 2px;
  text-transform: uppercase;
}
nav#navbar ul {
  padding: 0;
  list-style-type: none;
}
nav#navbar.nav-collapsed ul {
  display: none;
}
nav#navbar ul li a {
  color: #fff;
  width: 100%;
  display: block;
  font-size: 17px;
  padding: 1em;
}
nav#navbar ul li a:hover {
  color: #ff1a40;
  text-decoration: none;
}
nav#navbar ul li.active a {
  color: #000;
  background: #ff1a40;
}
nav#navbar ul li.active a:hover {
  color: #fff;
}
nav#navbar ul li a i {
  width: 1.5em;
}
.icon-kirschenkiste svg {
	width: 17px;
}
/*--------------------------------------------------------------
| 4.0 | Metabar
\-------------------------------------------------------------*/
div#metabar {
  bottom: 0;
  top: auto;
  width: 100%;
  height: 60px;
  position: absolute;
}
div#metabar div#icons-social {
  margin: 0;
  width: 100%;
  height: auto;
  padding: 2em 0;
  background: #000;
  text-align: center;
  border-top: 2px solid #ff1a40;
}
div#metabar div#icons-social a {
  color: #b9b9b9;
  margin-left: 10px;
}
div#metabar div#icons-social a:hover {
  color: #ff1a40;
  text-decoration: none;
}
div#metabar a#metabar-more-link {
  color: #ff1a40;
}
div#metabar a#metabar-more-link:hover {
  color: #fff;
}
/* Tag-Filter und Suche für mobile Geräte ausblenden. */
div#metabar div.dropdown,
div#metabar form.form-inline {
  display: none;
}
/*--------------------------------------------------------------
| 5.0 | Waddup-bar & Monkeynews-Archiv (category-monkeynews.php)
\-------------------------------------------------------------*/
div#waddup-bar,
article.category-monkeynews {
  position: relative;
}
div#logo {
  margin-top: 4em;
  margin-bottom: 4em;
  background: url(../images/logo_flat.png) no-repeat;
  background-size: 100% auto;
}
div#logo img {
  opacity: 0;
}
div#waddup-bar article,
img#waddup-monkey-bottom {
  display: none;
}
div#waddup-bar article,
article.category-monkeynews {
  text-align: center;
}
body.category-monkeynews article,
body.single article.category-monkeynews {
  margin: 3em 0 6em 0;
  padding: 3em 15px 1.5em 15px;
  border-bottom: 2px solid #efefef;
  border-top: 2px solid #b9b9b9;
}
body.single article.category-monkeynews {
  margin-bottom: 0;
}
body.category-monkeynews article:first-child {
  margin-top: 6em;
}
div#waddup-bar article:first-child {
  display: block;
  font-size: 16px;
  position: relative;
  background: #efefef;
  padding: 4em 1em 2em 1em;
  box-shadow: inset 0 5px 10px -10px #6d6d6d, inset 0 -5px 10px -10px #6d6d6d;
  margin: 100px -15px 80px -15px;
}
div#waddup-bar article:first-child a {
  color: #a0a0a0;
}
article.category-monkeynews.post_format-post-format-link p a {
  font-size: 1.5em;
  border-bottom: 2px solid #000;
}
article.category-monkeynews.post_format-post-format-link p a:after {
  color: #000;
  content: ' \e064';
  font-style: normal;
  font-weight: normal;
  font-family: 'Icons';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
div#waddup-bar article.post_format-post-format-image img {
  padding: 4px;
  background: #fff;
  z-index: 350 !important;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}
div#waddup-bar div.entry-meta {
  display: none;
}
body.category-monkeynews div.entry-meta,
body.single article.category-monkeynews div.entry-meta {
  padding-top: 2em;
}
div#waddup-bar article div.more-link {
  display: none;
}
body.category-monkeynews article div.more-link,
body.single article.category-monkeynews div.more-link {
  display: block;
}
article.category-monkeynews div.more-link span {
  display: none;
}
body.category-monkeynews article div.more-link a,
body.single article.category-monkeynews div.more-link a {
  border: 0 !important;
}
article.category-monkeynews div.more-link a {
  left: 50%;
  bottom: 0;
  width: 40px;
  height: 40px;
  position: absolute;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  display: inline-block;
  margin: 0 0 -20px -20px;
  background: url(../images/waddup-bar-more-link.png);
  background-position: 40px 0;
}
article.category-monkeynews div.more-link a:hover {
  background: url(../images/waddup-bar-more-link.png) !important;
  background-position: 80px 0;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  article.category-monkeynews div.more-link a {
    background: url(../images/waddup-bar-more-link@2x.png);
    background-position: 40px 0;
    background-size: auto 100%;
  }
  article.category-monkeynews div.more-link a:hover {
    background: url(../images/waddup-bar-more-link@2x.png);
    background-position: 80px 0;
    background-size: auto 100%;
  }
}
div.monkeymotion {
  top: 0;
  left: 50%;
  width: 112px;
  height: 88px;
  position: absolute;
  z-index: 450 !important;
  margin: -44px auto auto -56px;
  background: url(../images/monkeymotions.png);
  background-position: 0 0;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  div.monkeymotion {
    background: url(../images/monkeymotions@2x.png);
    background-size: 100% auto;
  }
}
article.category-happy div.monkeymotion {
  background-position: 0 0;
}
article.category-angry div.monkeymotion {
  background-position: 0 -90px;
}
article.category-confused div.monkeymotion {
  background-position: 0 -180px;
}
article.category-cheeky div.monkeymotion {
  background-position: 0 -270px;
}
article.category-annoyed div.monkeymotion {
  background-position: 0 -360px;
}
article.category-shocked div.monkeymotion {
  background-position: 0 -450px;
}
article.category-monkeynews h1 {
  display: none;
}
/*--------------------------------------------------------------
| 6.0 | Artikelübersicht (Startseite, Themenseite, etc.)
\-------------------------------------------------------------*/
div#content {
  margin-bottom: 4em;
}
div#content article.entry header.entry-header {
  text-align: center;
  margin-bottom: 2em;
  border-bottom: 2px solid #efefef;
  -webkit-transition: all 250ms cubic-bezier(0.175, 0.885, 0.32, 1);
  -webkit-transition: all 250ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -moz-transition: all 250ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -o-transition: all 250ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: all 250ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
div#content article.entry header.entry-header h1 {
  margin: 0;
  font-size: 2em;
  padding: 0.5em 0;
}
.content-home h1 {
  font-weight: 500;
}
div#content article.entry header.entry-header a {
  color: #000;
}
div#content article.entry header.entry-header a:hover {
  color: #ff1a40;
  text-decoration: none;
}
div#content article.entry header.entry-header img {
  width: 50%;
  height: auto;
  padding: 3px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background-color: #fff;
  border: 3px solid #000;
}
div#content article.entry header.entry-header img.attachment-sticky-post-size {
  width: 100%;
  -webkit-border-radius: 1em;
  -moz-border-radius: 1em;
  border-radius: 1em;
}
div#content article.entry {
  margin-bottom: 80px;
  padding-bottom: 40px;
  border-bottom: 2px solid #efefef;
}
div.entry-meta {
  font-size: 14px;
  color: #a0a0a0;
  margin: 0 0 1.5em 0;
}
div.entry-meta div.entry-author,
div.entry-meta div.entry-date {
  display: inline;
}
div.entry-meta div.entry-author {
  margin-right: 1em;
}
article.content-home div.entry-meta {
  width: 50%;
  background: #fff;
  margin: 0 auto -0.75em auto !important;
}
div#content div.entry-meta i {
  color: #535353;
}
div#content article div.more-link {
  text-align: right;
}
div#content article div.more-link a {
  font-size: 12px;
  font-weight: 900;
  padding: 2px 16px;
  font-family: "brandon-grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  border: 2px solid #ff1a40;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}
div#content article div.more-link a:hover {
  color: #fff;
  background: #ff1a40;
  text-decoration: none;
}
/*--------------------------------------------------------------
| 7.0 | Artikelansicht einzeln
\-------------------------------------------------------------*/
h1 {
  font-size: 2.5em;
  font-weight: 900;
}
h2,
div#comments h3 {
  font-size: 1.5em;
  font-weight: 700;
}
h3 {
  font-size: 1.25em;
}
header.entry-header {
  text-align: center;
}
body.single header.entry-header div.entry-thumb {
  margin: 0 -15px;
  background: #000;
  text-align: center;
  border-bottom: 2px solid #000;
}
.single-post article .entry-content::first-letter {
  float: left;
  color: #fff;
  background: #000;
  text-align: center;
  padding: 0 1rem 1.35rem;
  font-size: 4.2em;
  margin-right: 0.7rem;
  margin-top: -0.15rem;
  line-height: 0.8;
}
blockquote {
  font-size: 16px;
}
body.single div#content p,
body.single div#content blockquote {
  margin-bottom: 2em;
}
body.single blockquote p {
  margin-bottom: 0 !important;
}
body.single blockquote cite:before {
  content: "— ";
}
figure.wp-caption {
  max-width: 100%;
}
figure.alignleft {
	margin-bottom: .5em;
  width: 100% !important;
}
figure.alignright {
  margin-bottom: .5em;
  width: 100% !important;
}
div.gallery {
  overflow: auto;
  margin-bottom: 1em;
  clear: both;
}
figure.wp-caption,
div.gallery figure.gallery-item {
  color: #fff;
  padding: 4px;
  background: #000;
  text-align: center;
  margin-bottom: 1em;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  box-sizing: border-box;
}
figure.wp-caption figcaption,
figcaption.gallery-caption {
  margin: 0.5em 12px;
}
figure.wp-caption img,
div.gallery figure.gallery-item div.gallery-icon {
  padding: 4px;
  background: #fff;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  width: 100%;
}
div.center {
  margin-bottom: 2em;
}
/*--------------------------------------------------------------
| 8.0 | Kommentare
\-------------------------------------------------------------*/
div#comments {
  padding-top: 6em;
  position: relative;
  overflow: hidden;
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 100;
  }
}
div.btn-hidden {
  display: none;
}
li.hide-excess-comment {
  display: none;
}
li.show-excess-comment {
  animation: fade-in 2s;
}
li.fade-first-new-comment {
  margin-top: -4.5em;
}
li.fade-first-new-comment header.comment-header,
li.fade-first-new-comment div.comment-content {
  opacity: 0.1;
}
div#respond {
  padding-top: 0;
}
div#comments header#comments-header h2,
div#comments h3 {
  margin-bottom: 0;
}
div#comments h3 {
  margin-bottom: 1em;
}
div#comments header#comments-header,
div#comments h3 {
  position: relative;
  padding-bottom: 1em;
  border-bottom: 2px solid #efefef;
  background: #fff;
  z-index: 400;
}
div#comments header#comments-header div.btn {
  top: 0;
  right: 0;
  font-size: 0.75em;
  position: absolute;
  font-family: "brandon-grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
div#comments ul {
  padding-left: 0;
  list-style-type: none;
}
div#comments ul li {
  padding: 2em 0 0 0;
  border-bottom: 2px dashed #efefef;
}
div#comments ul li ul.children li {
  margin-top: 2em;
  border-bottom: none;
  padding-bottom: none;
  border-top: 2px dashed #efefef;
}
div#comments header.comment-header img {
  left: -6em;
  width: 5em;
  height: auto;
  padding: 3px;
  position: absolute;
  border: 3px solid #000;
  -webkit-border-radius: 2.5em;
  -webkit-border-top-right-radius: 0;
  -moz-border-radius: 2.5em;
  -moz-border-radius-topright: 0;
  border-radius: 2.5em;
  border-top-right-radius: 0;
}
div#comments ul li ul.children li header.comment-header img {
  left: -6em;
}
div#comments header.comment-header {
  margin-left: 6em;
  font-weight: bold;
  margin-bottom: 2em;
  padding-right: 4em;
  position: relative;
  min-height: 5em;
}
div.comment-meta {
  top: 0;
  right: 0;
  width: 20%;
  text-align: right;
  position: absolute;
}
div#comments form input,
div#comments form textarea {
  font-size: 1em;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: 2px solid #efefef;
}
div#comments button {
  font-family: "brandon-grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/*--------------------------------------------------------------
| 9.0 | Themenansicht
\-------------------------------------------------------------*/
h1#topics-heading,
div.topics-list h1,
div.article-list h1 {
  text-align: center;
  margin-bottom: 0.75em;
  padding-bottom: 0.5em;
  border-bottom: 2px solid #efefef;
}
div.topics-list {
  margin-bottom: 4em;
  text-align: center;
}
div.topics-list ul {
  padding-left: 0;
  list-style-type: none;
  font-family: "brandon-grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
div.topics-list ul li a {
  color: #000;
  display: block;
  padding: 0.5em;
  margin-bottom: 0.125em;
  border: 2px solid #efefef;
}
div.topics-list ul li a:hover {
  text-decoration: none;
  background: #efefef;
}
div.topics-list ul li#topics-all a {
  color: #ff1a40;
  padding: 1em;
  font-weight: bold;
  margin-bottom: 1.5em;
  border: 2px solid #ff1a40;
}
div.topics-list ul li#topics-all a i {
  margin-right: 0.5em;
}
div.topics-list ul li#topics-all a:hover {
  color: #fff;
  background: #ff1a40;
}
/*--------------------------------------------------------------
| 10.0 | Listenansicht
\-------------------------------------------------------------*/
body#listview div.topics-list,
body#listview div.article-list {
  margin-bottom: 4em;
}
body#listview div.topics-list ul li {
  display: inline;
}
body#listview div.topics-list ul li a {
  display: inline-block;
  margin-right: 0.125em;
}
body#listview ul li#topics-all a {
  float: none;
  display: block;
}
div.article-list ul {
  padding-left: 0;
  list-style-type: none;
  padding-top: 2px;
}
div.article-list ul li {
  padding: 0.5em 0;
}
div.article-list ul li a {
  color: #000;
  display: block;
}
div.article-list ul li a:hover {
  color: #ff1a40;
  text-decoration: none;
}
div.article-list ul li a i {
  color: #ff1a40;
  margin-right: 0.5em;
}
div.article-list ul li a span.article-list-date {
  color: #b9b9b9;
  display: block;
  text-align: right;
  font-size: 0.75em;
  margin-left: 0.5em;
}
div.article-list ul li a:hover span.article-list-date {
  color: #ff1a40;
}
/*--------------------------------------------------------------
| 11.0 | Suche
\-------------------------------------------------------------*/
body.page-template-page-search div.entry-content {
  text-align: center;
}
body.page-template-page-search h1 {
  display: none;
}
body.page-template-page-search div.entry-content input,
body.page-template-page-search div.entry-content button {
  font-size: 1.5em;
}
body.page-template-page-search div.entry-content input {
  border: 3px solid #efefef;
  height: auto !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}
body.page-template-page-search div.entry-content button {
  border: 3px solid #ff1a40;
}
body.page-template-page-search div.entry-content button,
body.page-template-page-search div.entry-content input {
  line-height: 1.75em;
}
/*--------------------------------------------------------------
| 12.0 | 404
\-------------------------------------------------------------*/
body.error404 div.entry-content {
  text-align: center;
}
body.error404 h1 {
  font-size: 10em;
  text-align: center;
}
/*--------------------------------------------------------------
| 13.0 | Media Query für kleine Displays // original: 768px
\-------------------------------------------------------------*/
@media (min-width: 720px) {
  /*--------------------------------------------------------------
    | 13.1 | Generelles
    \-------------------------------------------------------------*/
  body {
    padding: 80px 15px 0 75px;
  }
  /*--------------------------------------------------------------
    | 13.2 | Navbar
    \-------------------------------------------------------------*/
  nav#navbar img#mojo-m,
  nav#navbar span {
    display: none;
  }
  nav#navbar ul,
  nav#navbar.nav-collapsed ul {
    display: block;
  }
  nav#navbar {
    top: 0;
    left: 0;
    width: 60px;
    z-index: 550;
    height: 100%;
    position: fixed;
    overflow: hidden;
    border-top: none;
    border-left: 2px solid #ff1a40;
    -webkit-transition: all 250ms cubic-bezier(0.175, 0.885, 0.32, 1);
    -webkit-transition: all 250ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -moz-transition: all 250ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -o-transition: all 250ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: all 250ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
  nav#navbar:hover {
    width: 320px;
    -webkit-transition: all 250ms cubic-bezier(0.175, 0.885, 0.32, 1);
    -webkit-transition: all 250ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -moz-transition: all 250ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -o-transition: all 250ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: all 250ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
  nav#navbar ul {
    top: 50%;
    width: 100%;
    margin-top: -210px;
    position: absolute;
  }
  nav#navbar ul li a {
    padding: 0;
    width: 100%;
    height: 60px;
    display: block;
    font-size: 20px;
    overflow: hidden;
    background: #000;
  }
  nav#navbar ul li a i {
    width: 58px;
    margin: 20px 0;
    text-align: center;
  }
  .icon-kirschenkiste svg {
  	width: 20px;
  }
  /*--------------------------------------------------------------
    | 13.3 | Metabar
    \-------------------------------------------------------------*/
  div#metabar {
    top: 0;
    left: 0;
    width: 100%;
    z-index: 150;
    text-align: right;
    position: absolute;
  }
  div#metabar div#icons-social,
  div#metabar div.dropdown,
  div#metabar form.form-inline {
    display: inline-block;
  }
  div#metabar div#icons-social {
    padding: 0;
    width: auto;
    border-top: none;
    position: static;
    background: #fff;
  }
  div#metabar div.dropdown button {
    color: #fff;
    font-weight: normal;
    text-transform: uppercase;
  }
  div#metabar div.dropdown button i {
    color: #ff1a40;
    margin-left: 8px;
  }
  div#metabar div.dropdown button:hover {
    color: #fff;
  }
  div#metabar ul.dropdown-menu {
    border: none;
    background: #000;
    font-family: "brandon-grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 18px;
  }
  div#metabar ul.dropdown-menu li a {
    color: #fff;
    background: transparent;
  }
  div#metabar ul.dropdown-menu li a:hover {
    color: #ff1a40;
  }
  div#metabar div.dropdown,
  div#metabar form.form-inline {
    background: #000;
    margin-left: 10px;
    border-left: 2px solid #ff1a40;
  }
  div#metabar button,
  div#metabar form.form-inline input {
    height: 40px;
    border: none;
    font-size: 14px;
    background: none;
    font-family: "brandon-grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
  div#metabar form.form-inline input {
    color: #fff;
  }
  div#metabar form.form-inline ::-webkit-input-placeholder {
    color: #ffffff;
  }
  div#metabar form.form-inline :-moz-placeholder {
    color: #fff;
  }
  div#metabar form.form-inline ::-moz-placeholder {
    color: #fff;
  }
  div#metabar form.form-inline :-ms-input-placeholder {
    color: #fff;
  }
  /*--------------------------------------------------------------
    | 13.4 | Waddup-Bar
    \-------------------------------------------------------------*/
  div#logo {
    margin-top: 0;
    margin-bottom: 0;
    background: url(../images/mojo-destroyer.png) no-repeat;
    background-size: 100% auto;
  }
  body.home div#waddup-bar div#logo {
    background: url(../images/mojo-destroyer-rope.png) no-repeat;
    background-size: 100% auto;
  }
  div#waddup-bar {
    background: url(../images/mojo-rope.png) top center;
    background-size: 100%;
  }
  div#waddup-bar article,
  div#waddup-bar article:first-child {
    display: block;
    font-size: 14px;
    box-shadow: none;
    position: relative;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
    margin: 3em 0 6em 0;
    background-color: #fff;
    padding: 3em 2em 1.5em 2em;
    border: 2px solid #efefef;
  }
  div#waddup-bar article:first-child a {
    color: #ff1a40;
  }
  div#waddup-bar article {
    position: relative;
  }
  div#waddup-bar article.post_format-post-format-video,
  div#waddup-bar article.post_format-post-format-image {
    color: #fff;
    border: none;
    background: #000;
  }
  div#waddup-bar article div.more-link {
    display: block;
  }
  img#waddup-monkey-bottom {
    display: block;
    margin-top: -2em;
    margin-bottom: 4em;
  }
  div#waddup-bar .yt-responsive {
    margin: -1em -2em 0.75em -2em;
  }
  div#waddup-bar .yt-responsive iframe {
    border-top: 4px solid #fff;
    border-bottom: 4px solid #fff;
  }
  /*--------------------------------------------------------------
    | 13.5 | Artikelübersicht (Startseite, Themenseite, etc.)
    \-------------------------------------------------------------*/
  div#content article.entry {
    margin-bottom: 4em;
    padding-bottom: 4em;
  }
  /*--------------------------------------------------------------
    | 13.6 | Artikelansicht einzeln
    \-------------------------------------------------------------*/
  body.single {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  body.single header.entry-header:before {
    width: 75%;
    content: "";
    height: 4px;
    margin: 0 auto;
    display: block;
    background: #ff1a40;
    margin-bottom: 4px;
  }
  header.entry-header {
    margin: 0;
    padding: 0;
    text-align: center;
    margin-bottom: 2em;
  }
  body.single header.entry-header div.entry-thumb {
    margin: 0;
    border-bottom: none;
    background: none;
  }
  body.single header.entry-header div.entry-thumb img {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    border: 8px solid #000;
  }
  body.single h1.entry-title {
    padding: 40px 0;
    margin: 4px 12.5% 0 12.5%;
    border-top: 4px solid #ff1a40;
    border-bottom: 2px solid #efefef;
  }
  div.entry-meta {
    width: 50% !important;
    margin: -0.85em auto 0 auto !important;
    background: #fff !important;
  }
  div.center {
    color: #868686;
  }
  blockquote {
    font-size: 18px;
  }
  div.gallery {
    padding-left: 1em;
  }
  div.gallery figure.gallery-item {
    width: 50%;
    float: left;
    margin-right: 2em;
    margin-left: -1em;
  }
  div.gallery figure.gallery-item:nth-child(2n+2) {
    margin-right: 0;
  }
  div.gallery figure.gallery-item:nth-child(2n+1) {
    clear: both;
  }
  figure.wp-caption figcaption,
  figcaption.gallery-caption {
    font-size: 0.875em;
    line-height: 1.4em;
  }
  figcaption.gallery-caption {
    display: none;
  }
  figure.alignleft {
    float: left;
    width: 50% !important;
  }
  figure.alignright {
    float: right;
    width: 50% !important;
  }
  /*--------------------------------------------------------------
    | 13.7 | Kommentare
    \-------------------------------------------------------------*/
  div#comments ul li div.comment-content {
    margin-left: 6em;
  }
  div#comments header.comment-header {
    min-height: inherit;
  }
  div#comments ul li ul.children li {
    margin-left: 2.5em;
  }
  /*--------------------------------------------------------------
    | 13.8 | Seiten
    \-------------------------------------------------------------*/
  body.page h1.entry-title {
    padding: 40px 0;
    margin: 0 0 40px 0;
    border-bottom: 4px solid #000;
  }
  body.page article.content-home h1.entry-title {
    border-bottom: none !important;
  }
  /*--------------------------------------------------------------
    | 13.9 | Listenansicht
    \-------------------------------------------------------------*/
  div.article-list ul li a span.article-list-date {
    float: right;
    font-size: 1em;
  }
}
/*--------------------------------------------------------------
| 14.0 | Media Query für mittelgroße Displays
\-------------------------------------------------------------*/
@media (min-width: 992px) {
  /*--------------------------------------------------------------
    | 14.1 | Generelles
    \-------------------------------------------------------------*/
  body {
    font-size: 16px;
    padding: 80px 45px 0 105px;
  }
  /*--------------------------------------------------------------
    | 14.2 | Artikelübersicht (Startseite, Themenseite, etc.)
    \-------------------------------------------------------------*/
  body.home div#content div.post:nth-child(2n+1),
  body.archive div#content div.post:nth-child(2n+1) {
    clear: both;
  }
  /*--------------------------------------------------------------
    | 14.3 | Artikelansicht einzeln
    \-------------------------------------------------------------*/
  blockquote {
    font-size: 20px;
  }
  span.pull {
    width: 33.33%;
    font-weight: bold;
  }
  span.pull p {
    line-height: 130%;
  }
  span.pull-to-left {
    float: left;
    margin-left: -12.5%;
    margin-right: 2em;
  }
  span.pull-to-right {
    float: right;
    margin-right: -12.5%;
    margin-left: 18px;
  }
  div.center,
  div.gallery {
    margin-left: -12.5%;
    margin-right: -12.5%;
  }
  div.gallery {
    padding-left: 2em;
  }
  div.gallery figure.gallery-item {
    float: left;
    width: 33.33%;
    margin-right: 3em;
    margin-left: -2em;
  }
  div.gallery figure.gallery-item:nth-child(2n+2) {
    margin-right: 3em;
  }
  div.gallery figure.gallery-item:nth-child(3n+3) {
    margin-right: 0;
  }
  div.gallery figure.gallery-item:nth-child(2n+1) {
    clear: initial;
  }
  div.gallery figure.gallery-item:nth-child(3n+1) {
    clear: both;
  }
  figure.alignleft {
    float: left;
    margin-left: -12.5%;
    margin-right: 2em;
    width: 33% !important;
  }

  figure.alignright {
    float: right;
    margin-right: -12.5%;
    margin-left: 2em;
    width: 33% !important;
  }
  /*--------------------------------------------------------------
    | 14.4 | Kommentare
    \-------------------------------------------------------------*/
  div#comments header.comment-header img {
    left: -7em;
    width: 6em;
    height: auto;
    padding: 4px;
    border: 4px solid #000;
    -webkit-border-radius: 3em;
    -webkit-border-top-right-radius: 0;
    -moz-border-radius: 3em;
    -moz-border-radius-topright: 0;
    border-radius: 3em;
    border-top-right-radius: 0;
  }
  div#comments ul li div.comment-content {
    margin-left: 7em;
  }
  div#comments header.comment-header {
    margin-left: 7em;
  }
  div#comments ul li ul.children li {
    margin-left: 3em;
  }
  div#comments ul li ul.children li header.comment-header img {
    left: -7em;
  }
}
/*--------------------------------------------------------------
| 15.0 | Media Query für große Displays
\-------------------------------------------------------------*/
@media (min-width: 1300px) {
  /*--------------------------------------------------------------
    | 15.1 | Generelles
    \-------------------------------------------------------------*/
  body {
    font-size: 18px;
    padding: 80px 65px 0 145px;
  }
  body.home div#articles div.entry-thumb a img {
    padding: 5px;
    border: 5px solid #000;
  }
  /*--------------------------------------------------------------
    | 15.2 | Navbar
    \-------------------------------------------------------------*/
  nav#navbar {
    width: 80px;
  }
  nav#navbar:hover {
    width: 360px;
  }
  nav#navbar ul {
    margin-top: -280px;
  }
  nav#navbar ul li a {
    height: 80px;
    font-size: 24px;
  }
  nav#navbar ul li a i {
    width: 78px;
    margin: 28px 0;
  }
  .icon-kirschenkiste svg {
  	width: 24px;
  }
  /*--------------------------------------------------------------
    | 15.3 | Waddup-Bar
    \-------------------------------------------------------------*/
  div#waddup-bar article,
  div#waddup-bar article:first-child {
    font-size: 16px;
  }
  /*--------------------------------------------------------------
    | 15.4 | Artikelübersicht (Startseite, Themenseite, etc.)
    \-------------------------------------------------------------*/
  div#content article div.more-link a {
    font-size: 14px;
    font-weight: 500;
  }
  div#content article.entry header.entry-header img {
    padding: 4px;
    border-width: 4px;
  }
  /*--------------------------------------------------------------
    | 15.5 | Artikelansicht einzeln
    \-------------------------------------------------------------*/
  div.entry-meta {
    width: 33.33% !important;
  }
  article.content-home div.entry-meta {
    width: 50% !important;
  }
  body.single blockquote,
  body.page blockquote {
    font-size: 22px;
  }
  /*--------------------------------------------------------------
    | 15.5 | Listenansicht
    \-------------------------------------------------------------*/
  body#listview div.topics-list ul li {
    display: block;
  }
  body#listview div.topics-list ul li a {
    display: block;
  }
}
/*--------------------------------------------------------------
| 16.0 | Media Query für XL Displays
\-------------------------------------------------------------*/
@media (min-width: 1600px) {
  /*--------------------------------------------------------------
    | 16.1 | Generelles
    \-------------------------------------------------------------*/
  body {
    font-size: 20px;
  }
  body.single,
  body.page-id-57,
  body.page-id-97 {
    line-height: 1.6em;
  }
  .content-home {
    font-size: 18px;
  }
  /*--------------------------------------------------------------
    | 16.2 | Artikelübersicht (Startseite, Themenseite, etc.)
    \-------------------------------------------------------------*/
  body.home div#content div.post:nth-child(2n+1),
  body.archive div#content div.post:nth-child(2n+1) {
    float: left !important;
    clear: none !important;
  }
  body.home div#content div.post:nth-child(3n+1),
  body.archive div#content div.post:nth-child(3n+1) {
    clear: both !important;
  }
  /*--------------------------------------------------------------
    | 16.3 | Artikelansicht einzeln
    \-------------------------------------------------------------*/
  div.entry-meta {
    margin: -1.25em auto 0 auto !important;
  }
  span.pull {
    width: 50%;
    font-weight: bold;
  }
  span.pull p {
    height: auto !important;
  }
  span.pull-to-left {
    margin-left: -25%;
  }
  span.pull-to-right {
    margin-right: -25%;
  }
  div.center,
  div.gallery {
    margin-left: -25%;
    margin-right: -25%;
  }
  .single-post article .entry-content::first-letter {
    margin-top: -0.45rem;
    font-size: 5.2em;
  }
  figure.alignleft {
    margin-left: -25%;
    width: 50% !important;
  }
  figure.alignright {
    margin-right: -25%;
    width: 50% !important;
  }
}
/* -------------------- SwipeBox tweaks -------------------- *\
|  #swipebox-top-bar und #swipebox-bottom-bar vertauschen     |
\* --------------------------------------------------------- */
#swipebox-bottom-bar {
  top: -50px !important;
  bottom: auto !important!;
}
#swipebox-bottom-bar.visible-bars {
  -webkit-transform: translate3d(0, 50px, 0) !important;
  transform: translate3d(0, 50px, 0) !important;
}
#swipebox-top-bar {
  top: auto !important;
  bottom: -50px !important;
}
#swipebox-top-bar.visible-bars {
  -webkit-transform: translate3d(0, -50px, 0) !important;
  transform: translate3d(0, -50px, 0) !important;
}


/* --------------- Kirschenkiste ------------------ *\
|  Box mit Aufruf zum Spenden per Paypal             |
\* ------------------------------------------------ */
.donation-box {
  margin-top: 50px;
  background-color: #000;
  border-radius: 8px;
  color: white;
  padding: 25px;
  text-align: center;
}

.donation-text p {
  margin-bottom: 20px !important;
}

.donation-box a:hover,
.donation-box a:focus {
  text-decoration: none;
  color: white;
}

.donation-box a:before {
  content: '[\00a0';
  color: white;
}

.donation-box a:after {
  content: '\00a0]';
  color: white;
}

.donation-button {
  text-transform: uppercase;
  letter-spacing: 1px;
}