* {
	box-sizing: content-box;
	-webkit-box-sizing: content-box;
	padding: 0;
	margin: 0;
	
	font-family: 'bryantmedium_condensed';
}

body {
/* 	background: black; */
}

#old_ie {
	position: absolute; 
	width: 100%;
	font-size: 10px;
	text-transform: none;
	top: 37px;
	color: #ff1714; 
	margin: 0;
}
#old_ie a {
	color: #ff1714; 
}

section#wrapper {
	position: relative;
	margin: 0 auto;
}

svg,
header {
	display: block;
	position: relative;
	background: white;
}

header {
	height: 50px;
	position: relative;
	z-index: 100;
}
header div {
	float: left;
	margin-top: 12px;
}
header div.left {
	position: absolute;
	left: 15px;
	background: url(images/frau.svg);
	background-repeat: no-repeat;
	background-position: left center;
	height: 20px;
	margin-top: 15px;
	
}
header div.right {
	position: absolute;
	right: 15px;
	background: url(images/mann.svg);
	background-repeat: no-repeat;
	background-position: right center;
	height: 18px;
	margin-top: 17px;
	
}
header div.right,
header div.left {
	width: 20%;
}
header div.title {
	width: 100%;
	text-align: center;
	text-transform: uppercase;
	font-size: 25px;
	cursor: pointer;
}

svg line.line50 {
	stroke: white;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-width: 2;
	opacity: 0.5;
	display: block;
}

svg rect.bar_male,
svg rect.bar_female {
	cursor: pointer;
}

.overlay {
	opacity: 0;
	cursor: pointer;
	fill: rgba(18,8,19, 0.65);
}
g.hover > .overlay {
	opacity: 1;
}

body.level_1 g.bar_year > rect.overlay,
body.level_2 g.bar_school > rect.overlay,
body.level_3 g.bar_subject > rect.overlay {
	-webkit-transition-duration: 500ms;
	transition-duration: 500ms;
	
	fill: #a9a6aa; /* hell */
	opacity: 1;
}

body.level_1 g.bar_year.active > rect.overlay,
body.level_2 g.bar_school.active > rect.overlay,
body.level_3 g.bar_subject.active > rect.overlay  {
	opacity: 0;
}

body.level_1 g.bar_year.hover > rect.overlay,
body.level_2 g.bar_school.hover > rect.overlay,
body.level_3 g.bar_subject.hover > rect.overlay {	
	fill: #3b343c; /* hell */
	fill: #201921; /* dunkel */
}

body.level_2 g.bar_year > rect.overlay,
body.level_3 g.bar_school > rect.overlay {
	-webkit-transition-duration: 500ms;
	transition-duration: 500ms;
	
	fill: #79797d; /* mittel */
	opacity: 1;
}

body.level_2 g.bar_year.hover > rect.overlay,
body.level_3 g.bar_school.hover > rect.overlay {	
	fill: #2d262e; /* mittel */
	fill: #201921; /* dunkel */
}

body.level_3 g.bar_year > rect.overlay,
body.level_3 g.bar_year > rect.overlay {
	-webkit-transition-duration: 500ms;
	transition-duration: 500ms;
	opacity: 1;
	
	fill: #474048; /* dunkel */
}

body.level_3 g.bar_year.hover > rect.overlay,
body.level_3 g.bar_year.hover > rect.overlay {	
	fill: #201921; /* dunkel */
}


/* label back */
svg g.back rect {
	stroke: white;
	fill: white;
	cursor: pointer;
}
svg g.back text {
	fill: white;
	font-size: 13px;
	cursor: pointer;
}





body.level_3 svg g.bar_school > g.back text,
body.level_2 svg g.bar_year > g.back text,
body.level_1 svg g#year_back_top text,
body.level_1 svg g#year_back_bottom text {
	fill: #a9a6aa; /* hell */
}

body.level_2 svg g#year_back_bottom text,
body.level_2 svg g#year_back_top text,
body.level_3 svg g.bar_year > g.back text {
	fill: #757176; /* mittel */
}

body.level_3 svg g#year_back_bottom text,
body.level_3 svg g#year_back_top text {
	fill: #474048; /* dunkel */
}

/* inactive hover text and rect */
body.level_3 svg g.bar_year > g.back.hover rect,
body.level_3 svg g.bar_school > g.back.hover rect,
body.level_2 svg g.bar_year > g.back.hover rect,
body.level_3 svg g#year_back_top.hover rect,
body.level_3 svg g#year_back_bottom.hover rect,
body.level_2 svg g#year_back_top.hover rect,
body.level_2 svg g#year_back_bottom.hover rect,
body.level_1 svg g#year_back_top.hover rect,
body.level_1 svg g#year_back_bottom.hover rect {
	fill: black; /* hell */
	stroke: black;
}
body.level_3 svg g.bar_year > g.back.hover text,
body.level_3 svg g.bar_school > g.back.hover text,
body.level_3 svg g#year_back_top.hover text,
body.level_3 svg g#year_back_bottom.hover text,
body.level_2 svg g.bar_year > g.back.hover text,
body.level_2 svg g#year_back_top.hover text,
body.level_2 svg g#year_back_bottom.hover text,
body.level_1 svg g#year_back_top.hover text,
body.level_1 svg g#year_back_bottom.hover text {
	fill: white;
}


/* transition */
g.back text,
g.back rect,
.overlay,
svg  text.info_female,
svg  text.info_male,
svg g.label text,
svg g.label rect {
	transition-property: fill opacity;
	transition-duration: 300ms;
	transition-timing-function: ease-in-out;
	-webkit-transition-property: fill opacity;
	-webkit-transition-duration: 300ms;
	-webkit-transition-timing-function: ease-in-out;
}

/* label */
svg g.label rect {
	fill: white;
}
svg g.label text {
	fill: #0f091d;
	cursor: pointer;
	font-size: 13px;
}
svg g.hover > g.label rect {
	fill: #0f091d;
}
svg g.hover > g.label text {
	fill: white;
	font-size: 13px;
}


/* info text */
svg  text.info_female,
svg  text.info_male {
	fill: white;
	opacity: 0;
	font-size: 19px;
}
svg  g.hover > text.info_female,
svg  g.hover > text.info_male {
	opacity: 1;
}

svg  text.info_female .total,
svg  text.info_male .total {
	font-family: bryantregular_condensed;
}

/* breadcrump */
g.breadcrump rect {
	fill: #e1e0e1;
}
g.breadcrump text {
	text-anchor: middle;
	font-size: 13px;
}








/* detail */


g.detail g.detailName rect {
	fill: white;
}
g.detail g.detailName text {
	font-size: 13px;
	fill: #0f091d;
}
g.detail g.year rect {
	fill: rgba(18,8,19, 0.40);
	opacity: 0;
}
g.detail g.year.current rect {
	opacity: 1;
}
g.detail g.year text {
	font-size: 12px;
	text-anchor: middle;
}
g.detail g.year line {
	stroke: white;
	stroke-width: 1;
}

g.detail text {
	fill: white;
}

g.detail text.label {
	font-size: 15px;
}
g.detail text.label {
	font-size: 15px;
}
g.detail text.value {
	font-size: 35px;
	font-family: 'bryantregular_condensed';
}

path.line {
	fill: none;
	stroke-width: 3;
}
path.female {
	stroke: #d62b35;
}
circle.female {
	fill: #d62b35;
}
path.male {
	stroke: #1e63fe;
}
circle.male {
	fill: #1e63fe;
}

/* info screen */
#info {
	position: absolute;
	top: -1070px;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	background: rgba(0, 0, 0, 0.9);
	
	color: white;
	
	
	transition-property: opacity top;
	transition-duration: 0.5s;
	transition-timing-function: ease-in-out;
	-webkit-transition-property: opacity top;
	-webkit-transition-duration: 0.5s;
	-webkit-transition-timing-function: ease-in-out;
}
#info.show {
	opacity: 1;
	top: 0px;
}
#info .content {
	margin-left: 100px;
	margin-top: 150px;
	font-family: 'bryantregular_condensed';
	font-size: 25px;
	width:960px;
}
#info .content img {
	width: 950px;
}
#info .content p {
	font-family: 'bryantregular_condensed';
	font-size: 25px;
	margin-bottom: 10px;
	line-height: 30px;
}
#info .content p.quelle {
	font-size: 20px;
	margin-top: 90px;
	line-height: 25px;
}
#info .content span.bold {
	font-family: 'bryantmedium_condensed';
}


/* font */
@font-face {
    font-family: 'bryantmedium_condensed';
    src: url('font/bryant-mediumcondensed.eot');
    src: url('font/bryant-mediumcondensed.eot?#iefix') format('embedded-opentype'),
         url('font/bryant-mediumcondensed.woff2') format('woff2'),
         url('font/bryant-mediumcondensed.woff') format('woff'),
         url('font/bryant-mediumcondensed.ttf') format('truetype'),
         url('font/bryant-mediumcondensed.svg#bryantmedium_condensed') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'bryantregular_condensed';
    src: url('font/bryant-regularcondensed.eot');
    src: url('font/bryant-regularcondensed.eot?#iefix') format('embedded-opentype'),
         url('font/bryant-regularcondensed.woff2') format('woff2'),
         url('font/bryant-regularcondensed.woff') format('woff'),
         url('font/bryant-regularcondensed.ttf') format('truetype'),
         url('font/bryant-regularcondensed.svg#bryantregular_condensed') format('svg');
    font-weight: normal;
    font-style: normal;

}