/* ************************************* */
/*                                       */
/* Menues                                */
/*                                       */
/* ************************************* */

.main-navigation {
	display:inline-block;
	float:right;
	padding:1rem 0 0 0;
	text-transform:uppercase;
	font-size:1rem;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	left: 100%;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	float: left;
	position: relative;
}

.main-navigation li.current-menu-item a,
.page-id-4387 .main-navigation li.academy a, /* workshop angebot */
.page-id-4397 .main-navigation li.academy a, /* für dozent:innen */
.single-workshop .main-navigation li.academy a {
    color: #808080 !important;
    /* color: rgba(0,0,0,0.6) !important; */
}

.main-navigation a {
	display: block;
	text-decoration: none;
	padding:0.5rem 1rem 0.5rem 1rem;
	font-size:13px;
	letter-spacing: 0.15em;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

/* hamburger */

/* toggle buttn */
button.menu-toggle {
	background:transparent !important;
}

.menu-toggle {
	position: relative;
	overflow: hidden;
	margin: 0;
	padding: 0;
	width: 40px;
	height: 48px;
	font-size: 0;
	text-indent: -9999px;
	appearance: none;
	box-shadow: none;
	border-radius: none;
	border: none;
	cursor: pointer;
	transition: background 0.1s;
	float: right;
}

.menu-toggle:focus {
	border:none;
	outline:none;
}

.menu-toggle span {
  display: block;
  position: absolute;
  top: 25px;
  left: 9px;
  right: 9px;
  height: 3px;
  background-color: rgba(0,0,0,1);
}

.menu-toggle span::before,
.menu-toggle span::after {
  position: absolute;
  display: block;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: rgba(0,0,0,1);
  content: "";
}

.menu-toggle span::before {
  top: -8px;
}

.menu-toggle span::after {
  bottom: -8px;
}

/* toggled X */
.menu-toggle span {
  transition: background 0s 0.1s;
}

.menu-toggle span::before,
.menu-toggle span::after {
  transition-duration: 0.1s, 0.1s;
  transition-delay: 0.1s, 0s;
}

.menu-toggle span::before {
  transition-property: top, transform;
}

.menu-toggle span::after {
  transition-property: bottom, transform;
}

/* active state, i.e. menu open */
.toggled .menu-toggle {
  background-color: #cb0032;
}

.toggled .menu-toggle span {
  background: none;
}

.toggled .menu-toggle span::before {
  top: 0;
  transform: rotate(45deg);
}

.toggled .menu-toggle span::after {
  bottom: 0;
  transform: rotate(-45deg);
}

.toggled .menu-toggle span::before,
.toggled .menu-toggle span::after {
  transition-delay: 0s, 0.1s;
}

/* toggle width */

.menu-toggle {
	display: none;
}
.main-navigation ul {
	display: block;
}

/* @media screen and (max-width: 37.5em) */
@media screen and (max-width: 60em) {
	
	.site-branding {
		display: inline-block;
		float: left;
		padding: 1rem 0 0 0;
		position: fixed;
	}
	
	.main-navigation {
		padding: 0.6rem 0 0 0;
		width:100%;
	}
	
	.main-navigation ul {
		padding-top:1rem;
	}

	.main-navigation a {
		display: block;
		text-decoration: none;
		padding: 0.6rem 0 0.9rem 0;
	
	}
	.menu-toggle {
		display: block;
	}
	.main-navigation ul {
		display: none;
	}
	
	.menu-main-navi-en-container,
	.menu-main-navigation-container {
		clear:both;
	}
	
	.main-navigation li {
		float: none;
		position: relative;
		text-align: center;
	}
  
}

.site-main .comment-navigation, 
.site-main .posts-navigation, 
.site-main .post-navigation {
	margin: 0 0 1.5em;
	overflow: hidden;
} 

.site-main .post-navigation {
	padding: 0 1rem;
	overflow: hidden;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	float: left;
	width: 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	float: right;
	text-align: right;
	width: 50%;
}