/**
 * --- Structure ---
 *	• General
 *	• Tablet
 *	• Mobile
 *	• Tweaks
 * -----------------
 */

/*----------------------------------------------------------------------------*/
/*--------------------------------- General ----------------------------------*/
/*----------------------------------------------------------------------------*/

body {

	text-rendering: optimizeLegibility;

	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;

	orphans: 2;
	widows: 2;

	-webkit-hyphens: auto;
	   -moz-hyphens: auto;
	    -ms-hyphens: auto;
	     -o-hyphens: auto;
	        hyphens: auto;

	-webkit-font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0;
	   -moz-font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0;
	        font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0;

}

.no-hyphen,
html[lang=en] body,
#balink,
.text_yellow,
.summary-employees a,
.summary-salary a {

	-webkit-hyphens: manual;
	   -moz-hyphens: manual;
	    -ms-hyphens: manual;
	     -o-hyphens: manual;
	        hyphens: manual;

}

#futuromat_bildmarke .update-text {

	text-align: center;
	margin-top: -2px;
	padding: 0 2px;

}

#balink {

	line-height: 1.2em;

}

.overlay_wrapper .close:hover {

	cursor: pointer;

}

.summaries {

	font-size: 1.2em;

	display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;     /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;  /* TWEENER - IE 10 */
	display: -webkit-flex; /* NEW - Chrome */
	display: flex;         /* NEW, Spec - Opera 12.1, Firefox 20+ */

	justify-content: center;
	flex-wrap: wrap;

}

.summaries > * {

	min-width: 280px;
	max-width: 50%;
	background: #f3f3f5;
	padding: 20px;
	flex: 1;
	position: relative;

}

.summaries > *:first-child {

	border-right: 2px solid #fff;

}

.summaries h3 {

	font-size: 1em;
	margin-top: 0;

}

.summaries > * > *:last-child {

	margin-bottom: 0;

}

.summaries .below-income-threshold {

	min-height: 2.552em;

}

.employee_trend_percentage > span,
.salary_trend_percentage > span {

	color: #2f5991;

}

.employee_trend_percentage .text_highlight,
.salary_trend_percentage .text_highlight {

	font-weight: normal;

}

.summaries .trend {

	width: 76px;
	height: 76px;

	background: url('./../img/icons/trend-background.svg') no-repeat;
	background-size: contain;

	display: block;

	position: absolute;
	top: 20px;
	right: 20px;

}

.summaries .trend .trend-arrow {

	width: 76px;
	height: 76px;

	background: url('./../img/icons/trend-arrow.svg') no-repeat;
	background-size: contain;

	display: block;

}

#over_skills {

	padding-bottom: 40px;

}

.SkillHeadFull .text_red,
.SkillHeadZero .text_red {

	text-align: left;

}

#skills {

	width: 100%;

	display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;     /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;  /* TWEENER - IE 10 */
	display: -webkit-flex; /* NEW - Chrome */
	display: flex;         /* NEW, Spec - Opera 12.1, Firefox 20+ */

	justify-content: space-between;
	flex-wrap: wrap;

}

#skills .skill {

	width: 47%;
	height: auto;
	margin-bottom: 10px;

}

#skills .skill .skill_title {

	padding-top: 30px;
	padding-bottom: 0;

	display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;     /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;  /* TWEENER - IE 10 */
	display: -webkit-flex; /* NEW - Chrome */
	display: flex;         /* NEW, Spec - Opera 12.1, Firefox 20+ */

	justify-content: flex-start;
	align-items: center;

}

#skills .skill:first-child .skill_title,
#skills .skill:nth-child(2) .skill_title {

	padding-top: 0;

}

#skills .skill .skill_title .robot {

	width: 35px;
	height: 35px;

	background-position: left center;

	margin-top: 0;

}
#skills .skill .slider {

	width: auto;

}

.skill_desc_wrapper {


	margin-top: 50px;

	display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;     /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;  /* TWEENER - IE 10 */
	display: -webkit-flex; /* NEW - Chrome */
	display: flex;         /* NEW, Spec - Opera 12.1, Firefox 20+ */

	justify-content: center;
	flex-wrap: wrap;

}

.skill_desc_wrapper .skill_icon_desc {

	width: auto;
	margin-right: 50px;
	margin-left: 0;

}

.skill_desc_wrapper .skill_icon_desc:last-child {

	margin-right: 0;

}


/*----------------------------------------------------------------------------*/
/*--------------------------------- Tablet -----------------------------------*/
/*----------------------------------------------------------------------------*/

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

	body {

		min-width: 320px;

	}

	h1,
	.jobtitle,
	#headline_emp_sal {

		font-size: 2em;
		margin: 1em 0;
		padding-bottom: 0;

	}

	#headline_emp,
	#headline_sal {

		font-size: 1.5em;
		padding-bottom: 40px;

	}

	#section2head {

		font-size: 1.5em;
		margin: 0;

	}

	#section2head + .section2 {

		font-size: 2.5em;
		margin: .5em 0;

	}

	#section2head + .section2 .subab_in_words {

		font-size: inherit;

	}

	.intro_text p,
	#start_desc,
	.text_box .substitutable-text p,
	.text_normal,
	.jobtitle.text_normal {

		font-size: 1.2em;

	}

	.text_greater {

		font-size: 1.4em;

	}

	.chart_head_num {

		font-size: 2.5em;

	}

	#search_wrapper {

		width: 80%;
		max-width: 640px;

		margin-top: 4em !important;

	}

	.search_result #futuromat_bildmarke.futuromat_later {

		display: block;
		position: static;

	}

	#jobsearch {

		width: calc(100% - 40px);

	}

	.intro {

		font-size: 1.5em;

	}

	#iab_logo {

		padding-top: 80px;

	}

	#iab_logo img {

		max-width: 100%;
		height: auto;

	}

	#iab_logo_small {

		top: 60px;
		right: 10px;

	}

	.search_result  #content_wrapper {

		min-width: 0;

	}

	.search_result .inner_content {

		width: 100%;
		height: auto;

	}

	.default_padding {

		box-sizing: border-box;

		padding: 20px;

	}

	.summaries {

		margin-bottom: 1.5em;

	}

	#blue_overlay_away_placeholder {

		height: 160px;

	}

	#histogram_box {

		width: 100%;
		height: 120px;

	}

	.histo_gets_fixed #futuromat_bildmarke_small {

		display: none;

	}

	.histo_gets_fixed .default_padding {

		padding-top: 10px;

	}

	.histo_gets_fixed .section2secondRow > * {

		margin-top: 0 !important;
		margin-bottom: 0 !important;

	}

	.histo_gets_fixed #social_media_wrapper {

		top: 10px;

	}

	.text_normal .skill_icon_desc {

		max-width: 100%;

	}

	#slider_wrapper .inner_content {

		padding-bottom: 40px;

	}

	#skills {

		width: 100%;

		margin-top: -20px;

		display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */
		display: -moz-box;     /* OLD - Firefox 19- (buggy but mostly works) */
		display: -ms-flexbox;  /* TWEENER - IE 10 */
		display: -webkit-flex; /* NEW - Chrome */
		display: flex;         /* NEW, Spec - Opera 12.1, Firefox 20+ */

		justify-content: space-between;
		flex-wrap: wrap;

	}

	#skills .skill {

		width: calc(100% - 50px);
		height: auto;
		flex: 1 1 calc(100% - 50px);

	}

	#skills .robot .robot_tooltip {

		width: 280px;
		right: calc(100% - 60px);
		bottom: 40px;

	}

	#skills .skill .skill_title,
	#skills .skill:nth-child(2) .skill_title {

		padding-top: 30px;
		padding-bottom: 8px;

	}

	.skill,
	.chart_head {

		max-width: 100%;

	}

	.slider {

		width: 100%;

	}

	#reset {

		width: 30px;
		height: 20px;
		margin-top: 2em;

	}

	.skill_desc_wrapper {


		margin-top: 30px;

	}

	#employees_chart,
	#emp_chart,
	#salary_chart,
	#sal_chart {

		width: 100%;

	}

	#employees_text,
	#salary_text {

		width: 100%;
		padding-top: 20px;

	}

	#sources {

		width: 100%;

	}

	.chart_head {

		margin-bottom: 40px;

		display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */
		display: -moz-box;     /* OLD - Firefox 19- (buggy but mostly works) */
		display: -ms-flexbox;  /* TWEENER - IE 10 */
		display: -webkit-flex; /* NEW - Chrome */
		display: flex;         /* NEW, Spec - Opera 12.1, Firefox 20+ */

		justify-content: flex-start;

		position: relative;

	}

	.chart_head_num {

		width: auto;
		text-align: left;
		line-height: 1;

	}

	.chart_head_desc {

		width: auto;
		padding-top: 0;
		padding-left: 10px;

	}

	.row {

		box-sizing: border-box;
		width: 50%;

	}

	.footer:not(.footerAtStart) {

		padding-top: 50px;
		padding-bottom: 40px;

	}

	.footerAtStart {

		margin-left: 5px;
		position: absolute;

	}

	#background_overlay {

		height: 100%;
		background-size: contain;

	}

	.overlay_content {

		border-width: 5px;
		border-top-width: 40px;
		padding: 10px;

		top: 20px;
		right: 20px;
		bottom: 20px;
		left: 20px;

	}

	.overlay_wrapper .close {

		top: 25px;
		right: 25px;

	}

}


/*----------------------------------------------------------------------------*/
/*--------------------------------- Mobile -----------------------------------*/
/*----------------------------------------------------------------------------*/

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

	h1,
	.jobtitle,
	#headline_emp_sal {

		font-size: 1.6em;
		margin: 1em 0;
		padding-bottom: 0;

	}

	#headline_emp,
	#headline_sal {

		font-size: 1.2em;
		padding-bottom: 40px;

	}

	#section2head {

		font-size: 1.2em;
		margin: 0;

	}

	#section2head + .section2 {

		font-size: 2em;
		margin: .5em 0;

	}

	#section2head + .section2 .subab_in_words {

		font-size: inherit;

	}

	.summaries,
	.intro_text p,
	#start_desc,
	#start_desc p,
	.text_box .substitutable-text p,
	.text_normal,
	.jobtitle.text_normal {

		font-size: 1em;

	}

	.text_greater {

		font-size: 1.2em;

	}

	.chart_head_num {

		font-size: 2em;

	}

	.summaries .below-income-threshold {

		min-height: auto;

	}

	#search_wrapper {

		margin-top: 6em !important;

	}

	.search_result #search_wrapper {

		margin-top: 3em !important;

	}

	#futuromat_bildmarke {

		width: 250px;
		height: 89px;

		background-size: contain;

	}

	.search_result #futuromat_bildmarke {

		margin-bottom: 30px;

	}

	#futuromat_bildmarke:not(.futuromat_later) .update-text {

		font-size: 1.8em;
		padding: 0 1px 1px 0;

	}

	.summaries > * {

		width: 100%;
		max-width: none;

		flex-basis: 100%;

	}

	.summaries > *:first-child {

		border-right: 0 none;
		border-bottom: 2px solid #fff;

	}

	.summaries .trend,
	.summaries .trend .trend-arrow {

		width: 60px;
		height: 60px;

	}

	#blue_overlay_away_placeholder {

		height: 190px;

	}

	#histogram_box {

		width: 100%;
		height: 150px;

	}

	#histo_box.histo_gets_fixed {

		min-width: 320px;

	}

	.histo_gets_fixed #histogram_box,
	.histo_gets_fixed #histogram_wrapper,
	.histo_gets_fixed #histogram {

		width: 100%;
		max-width: 100%;
		height: auto;

	}

	.histo_gets_fixed .section2alt {

		display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */
		display: -moz-box;     /* OLD - Firefox 19- (buggy but mostly works) */
		display: -ms-flexbox;  /* TWEENER - IE 10 */
		display: -webkit-flex; /* NEW - Chrome */
		display: flex;         /* NEW, Spec - Opera 12.1, Firefox 20+ */

		justify-content: space-between;

	}

	.histo_gets_fixed .section2firstRow,
	.histo_gets_fixed .section2secondRow {

		max-width: 50%;
		width: auto;

	}

	.histo_gets_fixed .section2firstRow {

		flex-grow: 0;

	}

	.histo_gets_fixed .section2firstRow > *,
	.histo_gets_fixed .section2secondRow > * {

		height: auto;

		font-size: 1em;
		line-height: 1.2em !important;
		white-space: nowrap;
		text-overflow: ellipsis;

		margin-top: 0 !important;
		margin-bottom: .4em !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;

		overflow: hidden;

	}

	.histo_gets_fixed .section2firstRow .text_tiny,
	.histo_gets_fixed .section2secondRow .text_tiny {

		font-size: .8em;
		opacity: .8;

	}

	.histo_gets_fixed .section2firstRow .text_normal,
	.histo_gets_fixed .section2secondRow .text_great {

		font-weight: bold;

	}

	.histo_gets_fixed #social_media_wrapper {

		display: none;

	}

	.histo_gets_fixed .default_padding {

		padding-top: 10px;
		padding-bottom: 5px;

	}

	.skill_desc_wrapper {

		justify-content: flex-start;

	}

	.skill_desc_wrapper .skill_icon_desc {

		width: 100%;
		margin-right: 0;

	}

	.chart_head {

		margin-bottom: 20px;

	}

	.row {

		width: 100%;
		margin-bottom: 1em;

	}

	.default_padding .spacer50 {

		height: 0;

	}

	.footer a {

		margin-bottom: .3em;
		white-space: nowrap;
		display: inline-block;

	}

}


/*----------------------------------------------------------------------------*/
/*--------------------------------- Tweaks -----------------------------------*/
/*----------------------------------------------------------------------------*/