/*   
Theme Name: shp-ib.de 260316
Theme URI: 
Description: 
Author: 
Author URI: 
Version: 1.2
Tags: 
*/

@import "_assets/css/reset.css";
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700);

/*
*/
/* ! @ - BASICS */
/*
*/

/* ! @ --- basics: Fixes */

img {
	display: block;
	border: 1px solid #;
}

.nobr { white-space: nowrap; }

/* ! @ --- basics: Colors */

body {
	color: #000;
	background: #fff;
}

::-moz-selection { background: #fffdd2; }
::selection { background: #fffdd2; }

/* ! @ --- basics: Links */

a,
a:active,
a:visited,
a:hover {
	color: #3F61A1;
	text-decoration: underline;
}

a:hover { color: #172f5b; }

/*
*/
/* ! @ - TEXT */
/*
*/

/* ! @ --- text: Font */

body,
input { font-family: "Source Sans Pro", Helvetica, Arial, sans-serif; }

/* ! @ --- text: Size */

body,
h1, h2, h3, h4, h5, h6 {
	font-size: 20px;
	line-height: 1.3em;
	font-weight: 400;
}

h1 { font-size: 30px; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }

/* mq */
@media only screen and (max-width: 600px) {
	body,
	h1, h2, h3, h4, h5, h6 { font-size: 20px; }
	p, ul, ol {
		font-size: 16px;
		line-height: 1.5em;
	}
}

code {}

small {}

big {}

/* ! @ --- text: Paragraph */

p, ul, ol { 
	display: block;
	clear: both;
	padding-bottom: 1em;
}

h1, h2, h3 {
	padding-top: 1.5em;
	padding-bottom: 1em;
}

h1:first-of-type { padding-top: 0; }

/* ! @ --- text: Styling */

strong,
h1, h2, h3,
#toc--mobile ul {
	font-weight: 700 }

em { font-style: italic; }

ul {
	padding-left: 0;
	list-style-type: square;
}

ol {}

aside {}

/*
*/
/* ! @ - GRID */
/*
*/

header.page .wrap,
.page-content,
footer.page {
	max-width: 1200px;
	margin: auto;
}

header.page .wrap,
.page-content,
footer.page {
	padding-left: 50px;
	padding-right: 50px;
}

/* mq */
@media only screen and (max-width: 600px) {
	header.page .wrap,
	.page-content,
	footer.page {
		padding-left: 15px;
		padding-right: 15px;
	}
}

/*
*/
/* ! @ - MODULES */
/*
*/

/* ! @ --- modules: Header */

header.page {
	position: fixed;
	z-index: 1;
	top: 0;
	width: 100%;
	padding: 50px 0 20px 0;
	font-size: 16px;
	transition: all 0.3s ease-in-out;
	background: #fff;
}

header.nav-hide { top: -200px; }

header.page .logo,
header.page .info,
header.page .toc {
	display: block;
	float: left;
}

header.page .logo a,
header.page .info h1 a,
#toc--mobile .info h1 a,
header.page nav.toc a {
	text-decoration: none;
}

header.page .logo a {
	display: block;
	margin: auto 30px auto auto;
	width: 94px;
	height: 70px;
	text-indent: -9999px;
	overflow: hidden;
	background: url('_img/shp--blau.png') no-repeat;
	background-size: 94px 70px;
}

header.page .info { margin-top: 12px; }

header.page .info h1,
#toc--mobile .info h1 {
	font-size: 22px;
	line-height: 1em;
	padding-bottom: 7px;
}

header.page .info p,
#toc--mobile .info p { line-height: 1em; }

header.page .toc {
	float: right;
	text-align: right;
	margin-top: 10px;
	font-size: 16px;
	font-weight: 700;
}

header.page .toc ul {
	padding-left: 0;
	margin: 0;
	list-style-type: none;
}

header.page .toc li {
	display: inline-block;
	margin-right: 1em;
}

header.page .toc li:last-of-type { margin: 0; }

.home a.home,
.page-info a.ueberuns,
.page-kontakt a.kontakt,
.post-type-archive-projekte a.projekte,
.tax-geschaeftsbereiche a.projekte,
.post-type-archive-infomaterial a.infomaterial,
.post-type-archive-gebrauchtteile a.gebrauchtteile,
.post-type-archive-lehrmaterial a.lehrmaterial,
.post-type-archive-aktuelles a.aktuelles,
.single-projekte a.projekte,
.single-infomaterial a.infomaterial,
.single-gebrauchtteile a.gebrauchtteile,
.single-lehrmaterial a.lehrmaterial,
.single-aktuelles a.aktuelles { color: #000 !important }

.toggle--menu {
	display: none;
	position: fixed;
	top: 30px;
	right: 30px;
	padding: 10px;
	border-radius: 100px;
	background: #3F61A1 }

.toggle--menu#close { background: white }
.toggle--menu#close svg { fill: #3F61A1 }

#burger,
#close {
	z-index: 9991;
	width: 30px;
	height: 30px;
	cursor: pointer }

#close {
	visibility: hidden;
	width: 25px;
	height: 25px;
	padding: 10px }

#burger svg,
#close svg {
	height: 100%;
	width: 100%;
	fill: white }

#toc--mobile {
	display: block;
	position: fixed;
	z-index: 9992;
	transition: all .25s ease;
	height: 100vh;
	width: 100vw;
	top: -120vh;
	left: 0;
	color: white;
	background: #3F61A1;
	background: rgba(63, 97, 161, 0.97) }

#toc--mobile ul {
	margin: 0;
	margin-top: 40px;
	list-style-type: none }

#toc--mobile nav a {
	display: block;
	font-size: 30px;
	line-height: 1em;
	padding: 10px 30px;
	text-decoration: none;
	color: white }

#toc--mobile .logo {
	display: block;
	position: absolute;
	bottom: 100px;
	left: 30px;
	width: 94px;
	height: 70px;
	text-indent: -9999px;
	overflow: hidden;
	background: url('_img/shp--weiss.png') no-repeat;
	background-size: 94px 70px }

/* mq */
@media only screen and (max-width: 1200px) {
	header.page {
		position: relative;
		padding: 30px 0;
		overflow: visible;
	}
	
	header.nav-hide { top: 0; }
	
	header.page span { display: block; }
	
	header.page .kill,
	span.kill { display: none !important; visibility: hidden; }
	
	header.page .logo a {
		margin-right: 15px;
		width: 47px;
		height: 35px;
		background-size: 47px 35px;
	}
	
	header.page .info h1,
	#toc--mobile .info h1 {
		font-size: 16px;
		line-height: 1em;
	}

	header.page .toc { display: none }
	
	.toggle--menu { display: block }
	
	.show_menu #toc--mobile { top: 0 }
	
	.show_menu #close { visibility: visible }
}

/* ! @ --- modules: Content */

.page-content { margin-top: 180px; }

/* mq */
@media only screen and (max-width: 1100px) {
	.page-content { margin-top: 20px; }
}
	
/* ! @ --- modules: Footer */

footer.page {
	margin-top: 80px;
	margin-bottom: 50px;
	font-size: 16px;
	text-align: center;
}

footer.page,
footer.page a { color: #9b9b9b; }

footer.page a:hover,
.home footer.page a.home,
.page-info footer.page a.ueberuns,
.page-kontakt footer.page a.kontakt,
.post-type-archive-projekte footer.page a.projekte,
.tax-geschaeftsbereiche footer.page a.projekte,
.post-type-archive-infomaterial footer.page a.infomaterial,
.post-type-archive-lehrmaterial footer.page a.lehrmaterial,
.post-type-archive-aktuelles footer.page a.aktuelles,
.single-projekte footer.page a.projekte,
.single-infomaterial footer.page a.infomaterial,
.single-lehrmaterial footer.page a.lehrmaterial,
.single-aktuelles footer.page a.aktuelles,
.page-impressum footer.page a.impressum { color: #000; }

/* mq */
@media only screen and (max-width: 1100px) {
	footer.page { margin-bottom: 150px; }
}

/* ! @ --- modules: Button */

a.button {
	display: table;
	padding: 20px 30px;
	margin: 10px 0;
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	background: #D8D8D8;/*
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-khtml-border-radius: 5px;*/
}

a.button:hover { background: #3F61A1; }

a.button.dl { background: #3F61A1; }
a.button.dl:hover { background: #000; }

/* mq */
@media only screen and (max-width: 850px) {
	a.button { font-size: 16px; }
}

/* ! @ --- modules: Button «Back to top» */

#back-to-top {
	display: none;
	position: fixed;
	bottom: 15px;
	right: 15px;
	padding: 10px 15px;
	text-align: center;
	text-decoration: none;
	border-radius: 2px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	filter: alpha(opacity=50);
	-khtml-opacity: 0.5;
	-moz-opacity: 0.5;
	opacity: 0.5;
	z-index: 1000;
	color: #fff;
	background: #000;
}

#back-to-top:hover {
	filter : alpha(opacity=100);
	-khtml-opacity : 1.0;
	-moz-opacity : 1.0;
	opacity	: 1.0;
}

/* mq */
@media only screen and (max-width: 750px) {
	#back-to-top {
		bottom: 35px;
		filter: alpha(opacity=100);
		-khtml-opacity: 1;
		-moz-opacity: 1;
		opacity: 1;
	}
}

/* ! @ --- modules: Tables */

.row {
	display: block;
	clear: both;
	padding: 15px 10px;
	border-bottom: 1px solid #D8D8D8;
	font-size: 18px;
	overflow: auto;
}

/* .hover:last-of-type { border-bottom: none; } */

.row.hover {
	color: #000;
	text-decoration: none;
}

.row.hover:hover {
	background: #3F61A1;
	color: #fff;
}

.row.hover a {
	display: block;
	color: #000;
	text-decoration: none;
}

.row.hover:hover a { color: #fff; }
.row.hover:hover .cl a:hover {}

header.row {
	color: #9b9b9b;
	font-weight: 700;
}

header .identifier {
	color: #000;
	font-size: 24px;
}

.cl {
	display: inline-block;
	float: left;
}

.cl.last { text-align: right; }

.table-projekte .cl#titel { width: 35%; }
.table-projekte .cl#cover { width: 23% }
	.table-projekte .cl#cover a { padding: 0 30px }
.table-projekte .cl#standort { width: 20%; }
.table-projekte .cl#geschaeftsbereich { width: 22%; }

.table-aktuelles .cl#titel,
.table-infomaterial .cl#titel { width: 70%; }
.table-aktuelles .cl#veroeffentlichung,
.table-infomaterial .cl#veroeffentlichung { width: 30%; }

.table-gebrauchteile .cl#titel { width: 70% }
.table-gebrauchteile .cl#cover { width: 30% }

.table-lehrmaterial .cl#titel { width: 70%; }
.table-lehrmaterial .cl#veroeffentlichung { width: 30%; }

/* mq */
@media only screen and (max-width: 850px) {
	.row { font-size: 16px; }
}

/* mq */
@media only screen and (max-width: 600px) {
	header.row { display: none; }
	
	.row { padding: 5px 10px; }
	
	.row:first-of-type { border-top: 1px solid #000; }
	
	.cl {
		display: block;
		float: none;
		width: 100% !important;
		color: #9b9b9b }
	
	.table-projekte .cl#cover a {
		max-width: 200px;
		padding: 10px 0 }
	
	.table-gebrauchteile .cl#cover { margin: 10px 0 }
	
	.cl#titel { color: #000; }
	
	.cl.last { text-align: left; }
}

/*
*/
/* ! @ - PAGES */
/*
*/
	
/*
*/
/* ! @ --- page: Front page */
/*
*/

.home a.button { padding: 10px 10px; }

.home .intro {
	padding-top: 120px;
	font-size: 26px;
	line-height: 1.4em;
}

.home .intro p:last-of-type { padding-bottom: 0; }

.home .table { padding: 120px 0; }

.home .table-aktuelles,
.home .table-lehrmaterial { padding-bottom: 0; }

.home header.row .cl#titel {
	font-size: 30px;
	font-weight: 700;
	color: #000;
}

/* mq */
@media only screen and (max-width: 1100px) {
	.home .intro { padding-top: 40px; }
	
	.home .table { padding: 40px 0; }
}

/* mq */
@media only screen and (max-width: 600px) {
	.home .intro p,
	.home .intro li {
		font-size: 20px;
		line-height: 1.4em;
	}

	.home header.row { display: block; }
	
	.home header.row .cl { display: none; }
	
	.home header.row .cl#titel {
		display: block;
		font-size: 20px;
		padding: 10px 0;
	}
	
	.home .table .row:first-of-type { border-top: 0; }
}

/*
*/
/* ! @ --- page: Archives */
/*
*/

aside#geschaeftsbereiche {
/*	max-width: 900px;*/
	margin: 1em 0 2em;
	font-size: .8em;
}

aside#geschaeftsbereiche a {
	display: inline-block;
	padding: 7px 11px;
	margin: 2px;
}

.post-type-archive-projekte aside#geschaeftsbereiche a#alle,
.term-geothermie aside#geschaeftsbereiche a#geothermie,
.term-trinkwasseraufbereitung aside#geschaeftsbereiche a#trinkwasseraufbereitung,
.term-trinkwasserfoerderung aside#geschaeftsbereiche a#trinkwasserfoerderung,
.term-trinkwasserspeicherung aside#geschaeftsbereiche a#trinkwasserspeicherung,
.term-wasser-und-korrosionschemie aside#geschaeftsbereiche a#wasser-und-korrosionschemie,
.term-zoologische-gaerten aside#geschaeftsbereiche a#zoologische-gaerten { background: #3F61A1; }

/*
*/
/* ! @ --- page: Projekte / Aktuelles / Stellenanzeigen Single */
/*
*/

.single-projekte .beschreibung,
.single-projekte .bilder,
.single-aktuelles .beschreibung,
.single-aktuelles .bilder,
.single-gebrauchtteile .beschreibung,
.single-gebrauchtteile .bilder,
.single-stellenanzeigen .beschreibung,
.single-stellenanzeigen .bilder {
	display: block;
	float: left;
	width: 50% }

.single-projekte .bilder,
.single-aktuelles .bilder,
.single-gebrauchtteile .bilder,
.single-stellenanzeigen .bilder {
	float: right;
	width: 45% }

.single-projekte a.button,
.single-aktuelles a.button,
.single-gebrauchtteile a.button,
.single-stellenanzeigen a.button { margin-top: 50px }

/* mq */
@media only screen and (max-width: 850px) {
	.single-projekte .beschreibung,
	.single-projekte .bilder,
	.single-aktuelles .beschreibung,
	.single-aktuelles .bilder,
	.single-gebrauchtteile .beschreibung,
	.single-gebrauchtteile .bilder,
	.single-stellenanzeigen .beschreibung,
	.single-stellenanzeigen .bilder { width: 100% }
	
	.single-projekte .bilder,
	.single-aktuelles .bilder,
	.single-gebrauchtteile .bilder,
	.single-stellenanzeigen .bilder { margin-top: 50px }
}

/*
*/
/* ! @ --- page: Infomaterial / Aktuelles Single */
/*
*/

.single-infomaterial .beschreibung,
.single-infomaterial .buttons,
.single-lehrmaterial .beschreibung,
.single-lehrmaterial .buttons {
	display: block;
	float: left;
	width: 50%;
}

.single-infomaterial .buttons,
.single-lehrmaterial .buttons {
	float: right;
	width: 45%;
}

/* mq */
@media only screen and (max-width: 1100px) {
	.single-infomaterial .beschreibung,
	.single-infomaterial .buttons,
	.single-lehrmaterial .beschreibung,
	.single-lehrmaterial .buttons {
		width: 100%;
	}
}

/*
*/
/* ! @ --- page: Über uns */
/*
*/

.page-info #beschreibung {
	font-size: 26px;
	line-height: 1.4em;
}

.page-info .cl-1of2 {
	display: block;
	float: left;
	width: 44%;
	margin-right: 5%;
	padding-bottom: 20px;
}

.page-info #mitarbeiter,
.page-info #mitgliedschaften { border-top: 1px solid #D8D8D8 }

.page-info #mitarbeiter { border-bottom: 1px solid #D8D8D8 }



.page-info #klaus_sixt {
	padding-top: 30px;
	 border-bottom: 1px solid #D8D8D8 }

.page-info #klaus_sixt > * { padding-bottom: 30px }

.page-info #klaus_sixt figure {
	float: left;
	width: 23% }

.page-info #klaus_sixt div {
	float: right;
	width: 73% }

.page-info #klaus_sixt h2 { padding-top: 0 }

#mitarbeiter > div {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: flex-start;
	align-content: flex-start !important;
}

#mitarbeiter .item {
	width: 23%;
	margin-right: 2%;
	padding-bottom: 30px;
	font-size: 16px;
	line-height: 22px }

#mitarbeiter .item:nth-child(4n) { margin-right: 0 }

#mitarbeiter .item img { padding-bottom: 10px; }

.page-info #adresse-buero,
.page-info #adresse-nord { border-bottom: 1px solid #D8D8D8; }

.page-info #mitgliedschaften {
	display: block;
	width: 100%;
}

#mitgliedschaften .item {
	display: block;
	float: left;
	width: 31.3%;
	padding-right: 2%;
	padding-bottom: 30px;
	font-size: 16px;
	line-height: 22px;
}

#mitgliedschaften .item img { padding-bottom: 10px; }



#nachruf {
	display: none;
	opacity: .1;
	transition: all .3s ease }

.show_nachruf #nachruf {
	display: block;
	opacity: 1 }

body.show_nachruf { overflow: hidden }

#nachruf,
#nachruf .container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	transition: all .3s ease;
	z-index: 9999 }

#nachruf .container { position: relative }

.nachruf--bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: gray;
	transition: all .3s ease;
	opacity: .5 }

#nachruf .modal {
	position: absolute;
	width: 450px;
	height: 50%;
	top: 50%;
	left: 50%;
	padding: 2em;
	transform: translate(-50%, -50%);
	overflow: scroll;
	background: white;
	border: 12px solid black }

#nachruf svg.close {
	top: 30px;
	right: 30px;
	width: 30px;
	height: 30px;
	float: right;
	fill: #111 }

.toggle_nachruf { cursor: pointer }

#nachruf img {
	width: 200px;
	height: auto }


/* mq */
@media only screen and (max-width: 1000px) {
	.page-info .person { width: 31.3%; }

	#nachruf .modal {
		position: absolute;
		width: 80%;
		height: 80%;
		padding: 1em }
}

/* mq */
@media only screen and (max-width: 900px) {
	.page-info .cl-1of2 {
		width: 100%;
		margin-right: 0;
	}
	
	.page-info #leistungen { border-bottom: 1px solid #D8D8D8; }
}

/* mq */
@media only screen and (max-width: 800px) {
	.page-info #klaus_sixt figure,
	.page-info #klaus_sixt div { width: 100% }
	
	#mitarbeiter .item,
	#mitgliedschaften .item { width: 48%; }
	
	#mitarbeiter .item:nth-child(2n) { margin-right: 0 }
}

/* mq */
@media only screen and (max-width: 600px) {
#mitarbeiter > div { justify-content: center }

	#mitarbeiter .item,
	#mitgliedschaften .item {
		width: 100%;
		margin-right: 0 }
}

/*
*/
/* ! @ --- page: Kontakt */
/*
*/

.page-kontakt .main-content {
	float: left;
	width: 45%;
}

.page-kontakt .map {
	float: right;
	width: 50%;
}

.map div { overflow: visible; }

/* mq */
@media only screen and (max-width: 950px) {
	.page-kontakt .main-content,
	.page-kontakt .map {
		float: none;
		width: 100%;
	}
	
	.page-kontakt .map { margin-top: 50px; }
}

/*
*/
/* ! @ --- page: Impressum */
/*
*/

/*
*/
/* ! @ --- page: 404 */
/*
*/

.error404 .page-content {
	text-align: center;
}