@charset "utf-8";


/* Allgemein Ebene 1 */
	
#social-nav ul {
	margin: 0 0 0 5px;
	padding: 0;
	height: 58px;
}
#social-nav ul li {
	display: inline-block;
	padding: 0;
	margin: 0;
	height: 58px;
}

#social-nav ul li i {
	display: none;
	position: absolute;
	margin-top: 58px;
	background: #000;
	z-index: 40;
	font-size: 0.7894rem;
	padding: 2px 12px 2px 12px;
	color: #fff;
	font-weight: 300;
}
#social-nav ul li span {
	cursor: pointer;
}
#social-nav ul li span.sprite {
	opacity: 0.75;
	width: 42px;
	height: 58px;
	display: inline-block;
}
.bt-youtube {
	background-position: -5px 3px;	
}
.bt-youtube:hover,
.bt-youtube.activesub {
	background-position: -11px -475px;
}
.bt-twitter {
	background-position: -52px 3px;
}
.bt-twitter:hover,
.bt-twitter.activesub {
	background-position: -58px -475px;
}
.bt-facebook {
	background-position: -99px 3px;
}
.bt-facebook:hover,
.bt-facebook.activesub {
	background-position: -105px -475px;
}
.bt-flickr {
	background-position: -146px 3px;
}
.bt-flickr:hover,
.bt-flickr.activesub {
	background-position: -152px -475px;
}
.bt-xing {
	background-position: -241px -413px;
}
.bt-xing:hover,
.bt-xing.activesub {
	background-position: -199px -475px;
}
.bt-linkedin {
	background-position: -104px -544px;
}
.bt-linkedin:hover,
.bt-linkedin.activesub {
	background-position: -11px -543px;
}
.bt-instagram {
	background-position: -151px -544px;
}
.bt-instagram:hover,
.bt-instagram.activesub {
	background-position: -58px -543px;
}

/* Allgemein Ebene 2 */

#social-nav ul li div.subnav {
	display: none;
	position: absolute;
	width: 910px;
	z-index: 9999;
	background: rgb(0, 0, 0); /* Fall-back for browsers that don't support rgba */
    background: rgba(0, 0, 0, .80);
	padding: 20px 20px 20px 20px;
	top: 42px;
	color: #fff;
	font-size: 0.7894rem;
}
.layerclose {
	position: absolute;
	right: 11px;
	background: url(/_images/standards/sprite-desktop.png) no-repeat -146px -52px;
	opacity: 0.75;
	width: 42px;
	height: 42px;	
	cursor: pointer;
}
#social-nav ul li div.subnav div.subnav-left {
	display: inherit;
	position: relative;
	float: left;
	margin: 0 0 20px 0;
}
#social-nav ul li div.subnav div.subnav-mid {
	display: inherit;
	position: relative;
	float: left;
	margin: 0 0 20px 0;
}
#social-nav ul li div.subnav div.subnav-right {
	display: inherit;
	position: relative;
	float: left;
	margin: 0 0 20px 0;
}
#social-nav ul li div.subnav h4 {
	font-size: 1rem;
	margin: 10px 0 30px 0;
}
#social-nav ul li div.subnav p {
	font-size: 0.7894rem;
	margin-bottom: 20px;
}

/* Links Ebene 2 */

#social-nav ul li div.subnav a:link {
	color: #fff;
	text-decoration: none;
	font-weight: 400;
}
#social-nav ul li div.subnav a:visited {
	color: #fff;
	text-decoration: none;
	font-weight: 400;
}
#social-nav ul li div.subnav a:hover {
	color: #f07d00;
	text-decoration: none;
	font-weight: 400;
}
#social-nav ul li div.subnav a:active {
	color: #f07d00;
	text-decoration: none;
	font-weight: 400;
}
#social-nav ul li div.subnav a:focus {
	color: #f07d00;
	text-decoration: none;
	font-weight: 400;
}

/* Youtube Ebene 2 */

#social-nav ul li div.subnav.youtube {
	height: 580px;
	margin-left: -84px;
}
#social-nav ul li div.youtube div.subnavwrapper {
	bottom: 0;
	position: absolute;
	padding: 0 0 18px 0;
}

/* Twitter Ebene 2 */

#social-nav ul li div.subnav.twitter {
	margin-left: 0px;
	height: 869px;
}
#social-nav ul li div.twitter div.subnavwrapper {
	bottom: 0;
	position: absolute;
	padding: 0 0 18px 0;
}

/* Facebook Ebene 2 */

#social-nav ul li div.subnav.facebook {
	margin-left: -42px;
	height: 916px;
}
#social-nav ul li div.facebook div.subnavwrapper {
	bottom: 0;
	position: absolute;
	padding: 0 0 18px 0;
}

/* Flickr Ebene 2 */

#social-nav ul li div.subnav.flickr {
	margin-left: -126px;
	height: 546px;
}
#social-nav ul li div.flickr div.subnavwrapper {
	bottom: 0;
	position: absolute;
	padding: 0 0 478px 0;
}


/* ---------------------------

ADMIN

--------------------------- */

#admin-nav  {
	float:right;
	background-color:#F78E00;
	height:58px;
}
#admin-nav ul  {
	margin-top: 1rem;
}


/* ---------------------------

LAYOUT FÜR MOBILGERÄTE: 1003px oder weniger.

--------------------------- */

@media only screen and (max-width: 1003px) {

.bt-youtube {	
    filter: invert(100%);
    -webkit-filter: invert(100%);
}
.bt-youtube:hover,
.bt-youtube.activesub {
    filter: invert(100%);
    -webkit-filter: invert(100%);
}
.bt-twitter {
    filter: invert(100%);
    -webkit-filter: invert(100%);
}
.bt-twitter:hover,
.bt-twitter.activesub {
    filter: invert(100%);
    -webkit-filter: invert(100%);
}
.bt-facebook {
    filter: invert(100%);
    -webkit-filter: invert(100%);
}
.bt-facebook:hover,
.bt-facebook.activesub {
    filter: invert(100%);
    -webkit-filter: invert(100%);
}
.bt-flickr {
    filter: invert(100%);
    -webkit-filter: invert(100%);
}
.bt-flickr:hover,
.bt-flickr.activesub {
    filter: invert(100%);
    -webkit-filter: invert(100%);
}
.bt-xing {
    filter: invert(100%);
    -webkit-filter: invert(100%);
}
.bt-xing:hover,
.bt-xing.activesub {
    filter: invert(100%);
    -webkit-filter: invert(100%);
}
.bt-linkedin {
    filter: invert(100%);
    -webkit-filter: invert(100%);
}
.bt-linkedin:hover,
.bt-linkedin.activesub {
    filter: invert(100%);
    -webkit-filter: invert(100%);
}
.bt-instagram {
    filter: invert(100%);
    -webkit-filter: invert(100%);
}
.bt-instagram:hover,
.bt-instagram.activesub {
    filter: invert(100%);
    -webkit-filter: invert(100%);
}

.klimaexpo + #social-nav-wrapper .bt-youtube,
.klimaexpo + #social-nav-wrapper .bt-youtube:hover,
.klimaexpo + #social-nav-wrapper .bt-youtube.activesub,
.klimaexpo + #social-nav-wrapper .bt-twitter,
.klimaexpo + #social-nav-wrapper .bt-twitter:hover,
.klimaexpo + #social-nav-wrapper .bt-twitter.activesub,
.klimaexpo + #social-nav-wrapper .bt-facebook,
.klimaexpo + #social-nav-wrapper .bt-facebook:hover,
.klimaexpo + #social-nav-wrapper .bt-facebook.activesub,
.klimaexpo + #social-nav-wrapper .bt-flickr,
.klimaexpo + #social-nav-wrapper .bt-flickr:hover,
.klimaexpo + #social-nav-wrapper .bt-flickr.activesub,
.klimaexpo + #social-nav-wrapper .bt-xing,
.klimaexpo + #social-nav-wrapper .bt-xing:hover,
.klimaexpo + #social-nav-wrapper .bt-xing.activesub,
.klimaexpo + #social-nav-wrapper .bt-linkedin,
.klimaexpo + #social-nav-wrapper .bt-linkedin:hover,
.klimaexpo + #social-nav-wrapper .bt-linkedin.activesub,
.klimaexpo + #social-nav-wrapper .bt-instagram,
.klimaexpo + #social-nav-wrapper .bt-instagram:hover,
.klimaexpo + #social-nav-wrapper .bt-instagram.activesub {
    filter: none;
    -webkit-filter: none;
}

/* ---------------------------

LAYOUT FÜR MOBILGERÄTE: 599px oder weniger.

--------------------------- */

@media only screen and (max-width: 599px) {

.bt-youtube {	
    filter: invert(100%);
    -webkit-filter: invert(100%);
}
.bt-youtube:hover,
.bt-youtube.activesub {
    filter: invert(100%);
    -webkit-filter: invert(100%);
}
.bt-twitter {
    filter: invert(100%);
    -webkit-filter: invert(100%);
}
.bt-twitter:hover,
.bt-twitter.activesub {
    filter: invert(100%);
    -webkit-filter: invert(100%);
}
.bt-facebook {
    filter: invert(100%);
    -webkit-filter: invert(100%);
}
.bt-facebook:hover,
.bt-facebook.activesub {
    filter: invert(100%);
    -webkit-filter: invert(100%);
}
.bt-flickr {
    filter: invert(100%);
    -webkit-filter: invert(100%);
}
.bt-flickr:hover,
.bt-flickr.activesub {
    filter: invert(100%);
    -webkit-filter: invert(100%);
}
.bt-xing {
    filter: invert(100%);
    -webkit-filter: invert(100%);
}
.bt-xing:hover,
.bt-xing.activesub {
    filter: invert(100%);
    -webkit-filter: invert(100%);
}
.bt-linkedin {
    filter: invert(100%);
    -webkit-filter: invert(100%);
}
.bt-linkedin:hover,
.bt-linkedin.activesub {
    filter: invert(100%);
    -webkit-filter: invert(100%);
}
.bt-instagram {
    filter: invert(100%);
    -webkit-filter: invert(100%);
}
.bt-instagram:hover,
.bt-instagram.activesub {
    filter: invert(100%);
    -webkit-filter: invert(100%);
}

}


/* ---------------------------

LAYOUT FÜR MOBILGERÄTE: 700px oder weniger.

--------------------------- */

@media only screen and (max-width: 700px) {

#social-nav ul li:nth-child(5) {
	display: none;
}

}

/* ---------------------------

LAYOUT FÜR MOBILGERÄTE: 599px oder weniger.

--------------------------- */

@media only screen and (max-width: 599px) {

#social-nav ul li:nth-child(3),
#social-nav ul li:nth-child(5),
#social-nav ul li:nth-child(6),
#social-nav ul li:nth-child(7) {
	display: none;
}

}