header {
	position: relative;
	width: 100%;
	margin: 0 auto;
	background: #fff;
	border-bottom: 1px solid #e2e2e2;
	z-index: 10;
}

header > div {
	position: relative;
	margin: 0 auto;
	
}

header #block-sitebranding {
	position: relative;
	height: 5rem;
	-webkit-transition: .25s;
					transition: .25s;
}

header .logo {
	position: absolute;
	top: 50%; left: 1rem;
	-webkit-transform: translateY(-50%);
					transform: translateY(-50%);
}

header .logo img { display: block; width: 8rem; height: 58px; }



@media (min-width: 48em) {
	header .logo { left: 2rem; }
}

@media (min-width: 62em) {
	header { position: fixed; top: 0; box-shadow: 0 .125rem .25rem rgba(0,0,0,.4); }
	.dialog-off-canvas-main-canvas { padding-top: 5rem; }
}



/* -------------------------------------*/
/* ------------>>> LOGIN <<<------------*/
/* -------------------------------------*/

#protected-pages-enter-password {
    position: relative;
    max-width: 40rem;
    margin: 5rem auto 15rem;
    padding: 2rem;
    background: rgba(0,0,0,.15);
}

#protected-pages-enter-password .protected_pages_description {}

#protected-pages-enter-password .form-item-password { margin: 1rem 0; }

#protected-pages-enter-password > div label {}

#protected-pages-enter-password .form-item-password input {
    margin-left: 1rem;
    padding: .125rem .25rem;
    background: rgba(255,255,255,1);
}

#protected-pages-enter-password .button {
    padding: .5rem 1rem;
    color: #fff;
    background: rgba(226,0,26,1);
}


/* -------------------------------------*/
/* --------->>> NAVIGATION <<<----------*/
/* -------------------------------------*/

header nav {
  position: relative;
  background: #999;
}

header nav > ul {
  max-height: 0;
	list-style: none;
	opacity: 0;
  -webkit-transition: max-height .2s .2s, opacity .4s;
					transition: max-height .2s .2s, opacity .4s;
}

header nav ul li {
  position: relative;
  /*display: block;*/
  border: 0 solid rgba(255, 255, 255, .2);
}

header nav ul li:hover { background: rgba(0,0,0,.1); }

header nav ul li a,
header nav ul li span {
  color: white;
  font-size: 1rem;
  padding: 1rem;
  display: flex;
  text-decoration: none;
  justify-content: space-between;
}

header nav > ul > li > a,
header nav > ul > li > span { text-transform: uppercase; }

.sectionheader:hover { cursor: default; }


/* NAV LEVEL 2 */

header nav ul ul {
  width: 0;
  border-width: 1px 0 0;
  visibility: hidden;
	list-style: none;
  opacity: 0;
	-webkit-transition: visibility .25s, opacity .25s ease-in-out;
					transition: visibility .25s, opacity .25s ease-in-out;
}

header nav ul ul li { visibility: hidden; padding-left: 1.5rem; }

/* NAV LEVEL 3 */

header nav ul ul ul {
  width: 0;
  border-width: 1px 0 0;
  visibility: hidden;
  opacity: 0;
	-webkit-transition: visibility .25s, opacity .25s ease-in-out;
					transition: visibility .25s, opacity .25s ease-in-out;
}

.sub-toggle {
  position: absolute;
  top: 0; right: 0;
  width: 57px; height: 53px;
  line-height: 0;
  border-left: 1px solid rgba(255,255,255,.2);
}    

.sub-toggle i {
  position: absolute;
  top: 19px; right: 12px;
  width: 32px; height: 19px;
  -webkit-transition: .2s;
					transition: .2s;
}

.sub-toggle i:before, .sub-toggle i:after {
  position: absolute;
  left: 15px;
  content: '';
  height: 19px;
  width: 2px;
  background-color: #ddd;
	-webkit-transition: .2s;
					transition: .2s;
}
.sub-toggle i:after { transform: rotate(90deg); }

/* BURGER */

footer .nav-toggle { display: none; }

.nav-toggle {
  position: absolute;
  display: inline-block;
  top: -40px; right: 3.5rem; right: 1rem;
  width: 40px; height: 40px;
  padding-top: .5rem;	
  background: rgba(0,0,0,.15);
  border-radius: .3rem;
  cursor: pointer;
	-webkit-transform: translateY(-50%);
					transform: translateY(-50%);
  -webkit-transition: .2s;
					transition: .2s;
}

.nav-toggle span {
  position: absolute;
  left: 0; top: 9px;
  display: block;
  width: 70%;
  left: 15%;
  height: 5px;
  background: #fff;
  border-radius: 8px;
	opacity: 1;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-transition: .2s;
					transition: .2s;
}

.nav-toggle span:nth-child(2),
.nav-toggle span:nth-child(3) { top: 18px; }

.nav-toggle span:nth-child(4) { top: 27px; }

.nav-toggle.nav-open { background: #999; }

.nav-toggle.nav-open span:nth-child(1),
.nav-toggle.nav-open span:nth-child(4) {
	top: 14px; left: 50%; width: 0;
}

.nav-toggle.nav-open span:nth-child(2) {
	-webkit-transform: rotate(45deg); transform: rotate(45deg); }
	
.nav-toggle.nav-open span:nth-child(3) {
	-webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
	
.nav-toggle.nav-open { opacity: 1; z-index: 1; }

.nav-toggle.nav-open ~ ul {
	max-height: 55rem;
	opacity: 1;
	-webkit-transition: max-height .4s, opacity .2s .2s;
					transition: max-height .4s, opacity .2s .2s;
}


/* MEDIA QUERIES */

@media (max-width: 62em) {
  header nav > ul { overflow-y: hidden; }	
  header nav ul li { border-bottom-width: 1px; }
  header nav ul ul { max-height: 0; }
  header nav ul li ul li { border-width: 1px 0 0 0; }
  header nav ul li ul li:not(:first-child) {
		border-color: rgba(255,255,255,.1); }
  header nav ul ul ul li {
		padding-left: 3rem; margin-left: -1.5rem; }
  .sub-toggle.submenu-open i:before {
		-webkit-transform: rotate(135deg); transform: rotate(135deg); }
	.sub-toggle.submenu-open i:after {
		-webkit-transform: rotate(225deg); transform: rotate(225deg); }
	.sub-toggle.submenu-open ~ ul,
	.sub-toggle.submenu-open ~ ul li {
    max-height: 32rem;
    width: auto;
    opacity: 1;
    visibility: visible;
    -webkit-transition: .2s;
						transition: .2s;
  }
}

@media (min-width: 32em) { #nav-icon { top: 50px; } }

@media (min-width: 62em) {    
	.nav-toggle, .sub-toggle { display: none; }
	header nav {
    position: absolute;
    /*top: 50%;*/ top: 66%; right: 1rem;
    height: 3.5rem;
    display: inline-block;        
		background: transparent;
    opacity: 1;
    z-index: 20;
		-webkit-transform: translateY(-50%);
						transform: translateY(-50%);
  }
  header nav > ul {
    height: 100%;
    max-height: initial;
    opacity: 1;
  }
  header nav > ul > li {
    position: relative;
    height: 3.5rem;
    width: 8rem;
    display: inline-block;
    border: none;
    line-height: 1.6;
    -webkit-transition: .2s;
						transition: .2s;
  }
  header nav > ul > li:hover,
	header nav > ul > li:focus,
	header nav > ul > .focused { /*background: rgba(0,94,156,1);*/ background: rgba(226,0,26,1); }
	
  header nav > ul > li > a,
	header nav > ul > li > span	{
    position: absolute;
    /*top: 50%;*/ top: 70%; left: 50%;
    width: 100%;
    display: block;
    padding: 0;
    color: #999;
    font-size: .9rem;
    display: flex;
    justify-content: center;
    flex-direction: column;
		-webkit-transform: translate(-50%,-50%);
						transform: translate(-50%,-50%);
  }
  header nav > ul > li > a,
	header nav > ul > li > span	{
    height: 100%;
    font-weight: 500;
    text-align: center;
  }
  header nav > ul > li:hover > a, header nav > ul > li:hover > span,
	header nav > ul > li:focus > a, header nav > ul > li:focus > span,
  header nav > ul > .focused > a,	header nav > ul > .focused > span {
    color: #fff;
    visibility: visible;
  }
/* NAV LEVEL 2 */
    header nav ul ul {
    position: absolute;
    min-width: 100%;
    margin-top: 3.5rem;
		border: 1px solid #ccc;
    border-top: 0;
    background: white;
    -webkit-transition: .2s;
						transition: .2s;
  }
  header nav ul ul li { padding: 0; }
  header nav > ul > li:hover > ul,
  header nav > ul > li:active > ul,
  header nav > ul > li:focus > ul,
  header nav ul .focused ul {
    padding: 1rem 0;
    background: white;
    box-shadow: 0 1rem 2rem rgba(0,0,0,.75);
    visibility: visible;
    opacity: 1;
  }
  header nav > ul > li:hover > ul li,
  header nav > ul > li:active > ul li,
  header nav > ul > li:focus > ul li,
  header nav ul .focused ul li {
    visibility: visible;
  }
  header nav ul ul li a {
    display: block;
    padding: .5rem 0;
    color: #999;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
  }
  header nav ul ul li a:hover {
    color: white;
    background: rgba(226,0,26,1);
  }    
/* NAV LEVEL 3 */
  header nav ul ul ul {
    position: absolute;
    top: 0;
    min-width: 100%;
    margin: 0 0 0 12.6rem;
    border: 1px solid rgba(226,0,26,1);
    border-left: 0;
    background: white;
    -webkit-transition: .2s;
						transition: .2s;
  }
  header nav ul ul ul li { padding: 0; }
  header nav > ul ul > li:hover > ul,
  header nav > ul ul > li:active > ul,
  header nav > ul ul > li:focus > ul,
  header nav ul ul .focused ul {
    padding: 0;
    background: white;
    box-shadow: 0 1rem 2rem rgba(0,0,0,.75);
    visibility: visible;
    opacity: 1;
    z-index: -1;
  }
  header nav > ul ul > li:hover > ul li,
  header nav > ul ul > li:active > ul li,
  header nav > ul ul > li:focus > ul li,
	header nav ul ul .focused ul li {
    visibility: visible;
  }
  header nav ul ul ul li a {
    display: block;
    padding: .5rem 0;
    color: #999;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
  }
  header nav ul ul ul li a:hover {
    color: white;
    background: rgba(226,0,26,1);
  }
  .currentpage, .activeparent, .activeparent.sectionheader span,
	.is-active { color: rgba(226,0,26,1); }
  .currentpage { font-weight: 700; }
}

@media (min-width: 62em) and (max-width: 80em) {
header nav ul ul { min-width: 140%; margin-left: -20%; }
}

@media (min-width: 80em) {
  header nav > ul > li { width: 10rem; }
  header nav > ul > li > a,
	header nav > ul > li > span { font-size: 1rem; }
  header nav ul ul li a { font-size: 1rem; }
}
@media (min-width: 90em) {
	header nav { right: 2rem; }
}



/* -------------------------------------*/
/* ---------->>> MOOD-AREA <<<----------*/
/* -------------------------------------*/

.mood-area { position: relative; line-height: 0; }
/*.blurred { margin: -.5rem -1.5rem 0; overflow: hidden; }
.blurred img { filter: blur(.5rem); }*/

.mood-area:before, .mood-area-news-item:before, .mood-area-stellenanzeige:before {
	position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; content: '';
	background: rgba(0,0,0,0);
	background: -moz-linear-gradient(top, rgba(0,0,0,0) 40%, rgba(0,0,0,.5) 90%);
	background: -webkit-linear-gradient(top, rgba(0,0,0,0) 40%, rgba(0,0,0,.5) 90%);
	background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,.5) 90%);
}

.mood-area .mood-area-text {
	position: absolute;
	bottom: 10%; left: 50%;
	width: 100%; max-width: 90rem;
	display: block;
	padding: 0 1rem;
	margin: 0 auto;	
	-webkit-transform: translateX(-50%);
					transform: translateX(-50%);
	-webkit-transform: translateXY(-50%,-50%);
					transform: translateXY(-50%,-50%);
}
/*.mood-area.blurred .mood-area-text { margin-left: 1rem; }*/
.mood-area.blurred .mood-area-text .site-subtitle { padding: 0; }

.mood-area .mood-area-text > * {
	color: #fff;
	line-height: 1.4;
	text-align: center;
	text-shadow: 1px 1px rgba(0,0,0,.75), 1px 1px .25rem #000;
}

.mood-area .mood-area-text .site-title { font-weight: 500; text-transform: uppercase;	}
.mood-area .mood-area-text .site-subtitle { font-size: 1rem; }

.mood-area .img-copyright {
	position: absolute;
	bottom: 1.3rem; right: 1rem;
	color: #fff;
	opacity: .7;
	text-shadow: 0 0 .4rem #000;
}

.mood-area img  {
	width: 100%; height: auto;
	min-height: 12rem; max-height: 30rem;	
	object-fit: cover;
	font-family: 'object-fit: cover;';
}

.mood-area-news-item { position: relative; }

.header-news-cta {
	position: absolute;
	bottom: 2rem; right: 2rem;
	z-index: 100;
}

.header-news-cta a:link, .header-news-cta a:visited {
	display: block;
	padding: .5rem 2rem;
	line-height: 1.4;
	color: rgba(226,0,26,1);
	background: #fff;
	border: 1px solid rgba(226,0,26,1);
	cursor: pointer;
	-webkit-transition: .3s; transition: .3s;
}

.header-news-cta a:hover, .header-news-cta a:focus {
	color: #fff;
	background: rgba(226,0,26,1);	
}

@media (max-width: 48em) {
	.header-news-cta, .header-news-cta a {
		bottom: 0; right: 0;
		width: 100%; height: 100%;
		opacity: 0;
	}
}

@media (min-width: 22.5em) {
	.mood-area .mood-area-text .site-title { font-size: 2rem; }
}

@media (min-width: 40em) {
	.mood-area .mood-area-text .site-title  { font-size: 2.5rem; }
	.mood-area .mood-area-text .site-subtitle { font-size: 1.4rem; }
}

@media (min-width: 48em) {
	.mood-area .mood-area-text {	padding: 0 2rem; }
	.mood-area .mood-area-text > * { text-align: left; }
}

@media (min-width: 60em) {
	.mood-area .mood-area-text .site-title { font-size: 3rem; }
	.mood-area .mood-area-text .site-subtitle { font-size: 1.5rem; }	
}

@media (min-width: 90em) {
	.mood-area .mood-area-text { padding: 0; }
	.mood-area .mood-area-text .site-title { font-size: 4rem; }
	.mood-area .mood-area-text .site-subtitle { font-size: 1.6rem; }
	/*.mood-area.blurred .mood-area-text { margin-left: 0; }*/
}




/* -------------------------------------*/
/* ------->>> CONTENT/BLOCKS <<<--------*/
/* -------------------------------------*/

main { max-width: 150rem; margin: 0 auto 6rem; }

section { position: relative; }

#block-ebase-content,
.block-ebase-content,
#block-views-block-news-archiv,
.news-content,
#coc-detail {
	position: relative;
	max-width: 90rem;
	margin: 2rem auto;
}

#block-views-block-portfolio {}

#block-views-block-history-timeline { max-width: 90rem; margin: -2rem auto 0; }


@media (min-width: 62em) {
	#block-ebase-content, #block-views-block-news-archiv, .news-content, #coc-detail { margin: 3rem auto; }
	#block-views-block-history-timeline { margin: -3rem auto 0; }
}




/* -------------------------------------*/
/* ----------->>> FOOTER <<<------------*/
/* -------------------------------------*/

footer { position: relative; background: #888; }

.footer-stoerer {
	position: absolute;
	top: -7rem; right: 0rem;
	width: 8.5rem; height: auto;
	display: block;	
	transform-origin: bottom;
	-webkit-transform: rotate(0deg) scale(.8); transform: rotate(0deg) scale(.8);
	-webkit-transition: .3s; transition: .3s;
}

.footer-stoerer:hover { -webkit-transform: rotate(-8deg) scale(1); transform: rotate(-8deg) scale(1); }

.footer-stoerer img { width: 100%; }

.site-footer-top, .site-footer-bottom { margin: 0 auto; }

footer p a:link, footer p a:visited, footer li a:link, footer li a:visited { color: #ccc; padding: .125rem 0; }
footer p a:hover, footer p a:focus, footer li a:hover, footer li a:focus { color: #fff; border-bottom: 1px solid #fff; }

/* footer-top */

.site-footer-top { min-height: 10rem; max-width: 90rem; }

.site-footer-top > div { width: 100%; padding: 2rem 1rem; margin: 0 auto; vertical-align: top; }

.site-footer-top > div h2 {
	color: #fff;
	font-size: 1.3rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 0 0 1rem;
	padding: 0 0 .5rem;
	border-bottom: 1px solid #bbb;
}
.site-footer-top > div h2 a:link, .site-footer-top > div h2 a:visited {
	color: #fff;
	font-size: inherit;
	font-weight: 500;
}

.site-footer-top > div ul {
	padding-left: 1rem;
	color: #fff;
	list-style-position: inside;
	list-style-type: disclosure-closed;
	list-style-type: none;
}

.site-footer-top > div p, .site-footer-top > div li, .site-footer-top > div a {
	color: #fff;
	font-size: 1rem;
	text-decoration: none;
}
.site-footer-top > div p { position: relative; padding-left: 2rem; }

#block-footerlinks p { padding: 0; }

p .glyphicon { position: absolute; left: 0; margin: .125rem 0 0 .25rem; font-size: 1rem; transform: rotate(0.03deg); }

.site-footer-top a:link, .site-footer-top a:visited { color: #ddd; }
.site-footer-top #block-footerdownloads p { margin-bottom: .5rem; }

#block-footerkontakt p { margin-bottom: .5rem; }

#block-footerlinks a { display: block; margin: 0 0 .125rem; vertical-align: top; border-bottom: none; }
#block-footerlinks a img { height: 2.4rem; padding: .5rem 0; filter: brightness(.15) invert(1) grayscale(1); -webkit-transition: .3s; transition: .3s; }
#block-footerlinks a.logo-elinquad img { height: 3.5rem; margin-top: -.6rem; }
#block-footerlinks a.logo-yt img { height: 3.1rem; }
#block-footerlinks a.logo-scheidenberger img { height: 3.25rem; }
#block-footerlinks a:hover img, #block-footerlinks a:focus img { filter: brightness(1) invert(0) grayscale(0); }

/* footer-bottom */

#site-footer-bottom-container { margin: 0 auto 1rem;}

.site-footer-bottom { padding: 1rem 0; background: #333; }

.site-footer-bottom p {
	color: #fff;
	text-align: center;	
	padding: .5rem 1rem;
}
.site-footer-bottom p, #block-ebase-footer ul li a { font-size: .9rem; }

.site-footer-bottom p img {
    width: 9rem;
    margin-left: .3rem;
    filter: brightness(.15) invert(1) grayscale(1);
}
	
#block-ebase-footer ul { text-align: center; }
#block-ebase-footer ul li { display: block; }
#block-ebase-footer ul li:not(:last-of-type) { margin-bottom: .5rem; }
#block-ebase-footer ul li a:link, #block-ebase-footer ul li a:visited { text-transform: uppercase; }


@media (min-width: 30em) {
	.footer-stoerer {	top: -6.75rem; right: 1rem; width: 10rem; }
}

@media (min-width: 48em) {
	.site-footer-top { padding: 0 1rem; }
	.site-footer-top > div { padding: 2rem 1rem; }
	#block-ebase-footer ul li { display: inline; }
	#block-ebase-footer ul li a:link, #block-ebase-footer ul li a:visited { padding: .25rem .4rem; }
	#block-footerkontakt p { width: 32%; display: inline-block; font-size: .85rem; }
	#block-footerkontakt p a { font-size: .85rem; }
	#block-footerlinks a { display: inline-block; width: 49%; }
	#block-footerlinks a:nth-of-type(3) img { margin-top: 0; }
	#block-footerlinks a:nth-of-type(4) img { margin-top: .4rem; }
}

@media (min-width: 60em) {
	.site-footer-top > div { width: 25%; display: inline-block; }	
	.site-footer-top > div:first-child { width: 49%; }	
	.site-footer-top > div img { margin: 0; }
}

@media (min-width: 60em) and (max-width: 90em) {
	#block-footerkontakt p { width: 48%; }
	#block-footerlinks a:nth-of-type(even) { text-align: right; }
}

@media (min-width: 90em) {
	.footer-stoerer {	top: -10rem; right: 3%; width: 14rem; }
	.site-footer-top { padding: 0; }
	.site-footer-top > div { padding: 2rem 1rem 2rem 0; }
	.site-footer-top > div:last-of-type { padding-right: 0; }
	.site-footer-bottom { position: relative; height: 4rem; padding: 0;}	
	.site-footer-bottom p { padding: 0; }
	.site-footer-bottom p:nth-child(1) { padding-left: 2rem; text-align: left; }
	.site-footer-bottom p:nth-child(2) {
	    position: absolute;
        top: -.35rem; left: 50%;
        width: 22rem;
        display: block;
        margin: 0 0 0 2rem;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
	}

	#site-footer-bottom-container, #block-ebase-footer { position: absolute; top: 50%; width: 100%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
	#block-ebase-footer { right: 2rem; }
	#block-ebase-footer ul { text-align: right; }
	#block-ebase-footer ul li { margin: 0 0 0 .25rem; }
	#block-footerlinks a:nth-child(even) { text-align: right; }
}
