/* %%%%%%%%%%
Theme Name:     Jörg Brüggemann – 2025
Theme URI:      http://example.com/
Description:    Child theme for the Twenty Twelve theme for Jörg Brüggemann
Author:         Ingo Schmid
Author URI:     http://bananenbiegerei.de
Template:       twentyfourteen
Version:        1.0
%%%%%%%%%% */

/* %%%%%%%%%% SPECIAL STYLES FOR JÖRG BRÜGGEMANN BY WEBENDBANANAS %%%%%%%%%% */
/* %%%%%%%%%% GENERAL %%%%%%%%%% */
html, body {
	height: 100%;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
a {
	color: black;
}
a:hover {
	color: black;
}
a:hover,
a:focus {
  color: black;
}
p a {
	text-decoration: underline;
}
p a:hover {
	text-decoration: none;
}

/* %%%%%%%%%% TYPOGRAPHY %%%%%%%%%% */
h1, h2, h3, h4, h5, h6, p, ul, li, #masthead p {
	font-weight: bold;
	color: black;
	margin: 0;
	padding: 0;
}
/* Sizes */
h1, h2, .main-nav, #status {
	font-size: 43px;
	font-weight: bold;
}
.news-post h1, #subnav ul li a {
	font-size: 16px;
}
em, .date p {
	font-style: normal;
	font-weight: normal;
	font-size: 12px;
}
/* Lineheight */

/* Color */
.navbar-default .navbar-nav > li > a {
	color: black;
}
/* Formatierung */
.col-entry-title {
	text-align: right;
}
/* %%%%%%%%% GENERAL LAYOUT SETTINGS %%%%%%%%%% */
/* z-index */
.navbar-toggle {
	z-index: 9999;
}
.site-header, .home .site-title {
	z-index: 999;
}
#nav.affix {
	z-index: 99;
}
.nav-bg {
	z-index: 9;
}
/* Vertical align caption-grid */
.parent {
	display: table;
	width: 100%;
	height: auto;
	height: 100%;
}
.child {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: auto;
    height: 100%;
}
.caption {
	background: white;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 101%;
	opacity: 0;
	text-align: center;
	padding: 15px;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
}
.caption h3 {
	font-size: 16px;
	margin-top: 5px;
}
.caption:hover {
	opacity: 1;
}
.caption-image {
	position: relative;
	width: 100%;
}
.caption-image img {
	width: 100%;
	height: auto;
}
.child p {
	margin-top: 0.5em;
}
.caption-grid {
	margin-left: -0.625em;
	margin-right: -0.625em;
}
/* END GENERAL LAYOUT SETTINGS */
/* %%%%%%%%%% HEADER %%%%%%%%%% */
/* header heights */
.site-header, .nav-bg {
	padding-top: 15px;
	min-height: 105px;
}
.site-header {
	position: fixed;
	width: 100%;
	background: white;
}
.single-header {
	min-height: 85px;
}
.home .site-header {
	position: relative;
}
.home .site-title {
	position: fixed;
}
#status {
	position: relative;
}
#status p {
	text-align: right;
	color: black;
	line-height: 1em;
}
#status > p:nth-child(2) {
	color: fuchsia;
}
.float-container {
	float: right;
}
/* Affix */
#nav.affix {
	top: 15px;/* gleich header padding*/
	width: 100%;
}
.affix + #big-home-image {
    padding-top: 70px;/* col-status - col-nav height ACHTUNG: Subnav hat padding 15px */
}
/* Scroll Position Settings */
.nav-bg.inactive {
	background: transparent;
}
.nav-bg.active {
	background: white;
}
.site-title.inactive a {
	color: red;
}
#nav.inactive .menu-item a {
	color: lime;
}
#nav.active .menu-item a {
	color: black;
}
#nav.active #menu-item-644 > a:nth-child(1), #nav.active #subnav > ul:nth-child(1) > li:nth-child(1) > a:nth-child(1) {
	text-decoration: underline;
}
.site-title.active a, .navbar-default .navbar-nav.active > li a {
	color: black;
}
#subnav.inactive {
	visibility: hidden;
}
#subnav.active {
	visibility: visible;
}
/* Big Home Image */
#big-home-image {
	position: relative;
}
#big-home-image img {
	position: relative;
	width: 100%;
	height: auto;
	z-index: -99;
	margin-top: -220px;
}
#big-home-image:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
/* %%%%%%%%%% NAVIGATION %%%%%%%%%% */
.main-nav {
	margin-top: -5px;/* duck-tape-code – keine Ahnung Ausgleich für line-height */
}
nav ul li {
	float: left;
	list-style: none;
}
.nav > li > a:hover, .nav > li > a:focus {
    background-color: transparent;
}
.current-menu-item a, .current-cat a {
	text-decoration: underline;
}
.main-nav li, #subnav, .cat-item {
	margin-left: 20px;
}
.nav-bg {
	position: fixed;
	top: 0;
	width: 100%;
	background: white;
}
/* Bootstrap Reset*/
.navbar-default {
	background: white;
	border: none;
	border-radius: 0;
}
.navbar {
	margin-bottom: 0;
}
.navbar-toggle {
    position: relative;
    float: right;
    padding: 9px 10px;
    margin-top: 12px;
    margin-right: 15px;
    margin-bottom: 8px;
    background-color: transparent;
    border: none;
    border-radius: 0;
}
.navbar-default .navbar-toggle .icon-bar {
	background: black;
}
.navbar-default .navbar-toggle:hover .icon-bar {
	background: white;
}
.navbar-default .navbar-toggle:hover {
	background: black;
}
/* %%%%%%%%%% CONTENT %%%%%%%%%% */
#content {
	padding-top: 160px;
}
/* %%%%%%%%%% SINGLE %%%%%%%%%% */
.back-top a {
	text-decoration: none;
}
.back-top a:hover {
	text-decoration: underline;
}
.single-project-gallery {
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 15px;
}
.single .content {
	max-width: 1030px;
	padding: 15px;
	margin: 0 auto;
}

.single img {
		display: block;
		margin: 0 auto;
		margin-bottom: 90px;
		max-height: calc(100vh - 160px);
		width: auto;
		height: auto;
		max-width: auto;
}
@media only screen and (max-width: 480px) {
	.single img {
		margin-bottom: 60px;
		max-height: calc(100vh - 160px);
		width: auto;
		height: auto;
		max-width: 100%;
	}
}
/* %%%%%%%%%% CATEGROY %%%%%%%%% */
.category #menu-item-644 > a:nth-child(1) {
	text-decoration: underline;
}
/* %%%%%%%%%% NEWS %%%%%%%%%% */
.page-id-30 img {
	margin: 1em 0;
}
.news-post {
	margin-bottom: 5em;
}
/* %%%%%%%%% CONTACT %%%%%%%%% */
.page-id-31 p {
	margin: 1em 0;
}
/* %%%%%%%%%% FOOTER %%%%%%%%%% */
footer {
	margin: 20px 0;
}
footer p {
	text-align: right;
}
/* %%%%%%%%%% 2017 %%%%%%%%%% */

/* %%%%%%%%%% MEDIA QUERIES %%%%%%%%%% */
/*--- Größen bis 320 iPhone Hochformat ---*/
@media only screen and (max-width: 320px) {
	h1, h2, #masthead, #masthead nav ul li, .navbar-brand, #status p {
		font-size: 23px;
	}
}
/*--- Größen bis 480 iPhone Querformat ---*/
@media only screen and (max-width: 480px) {
	h1, h2, #masthead, #masthead nav ul li, .navbar-brand, #status p {
		font-size: 23px;
	}
}
@media only screen and (max-width: 767px) {
	h1, h2, #masthead, #masthead nav ul li, .navbar-brand, #status p {
		font-size: 23px;
	}
	.back-top {
		padding-top: 16px;
		font-size: 16px;
		text-align: right;
	}
	.entry-title {
		text-align: left;
	}
	.navbar-brand {
		padding: 0;
	}
	/* Header */
	.site-header {
		min-height: 50px;
		padding-top: 0;
	}
	.single .site-header {
		min-height: 80px;
	}
	.site-title {
		position: relative;
		padding-top: 12px;
	}
	.home .site-title {
		padding-left: 15px;
	}
	#status p {
		padding-left: 15px;
	}
	#big-home-image img {
		margin-top: 0;
	}
	#status {
		position: absolute;
		top: 60px;
	}
	#status p {
		text-align: left;
	}
	.col-status {
		margin-left: 0;
		width: 100%;
	}
	.float-container {
		float: left;
		margin-left: -15px;
	}
	/* Navigation */
	ul.main-nav li, #subnav ul li {
		margin-left: 0;
		margin-right: 10px;
	}
	#subnav {
		padding-bottom: 40px;
		padding-top: 0;
		margin-left: 0;
	}
	.navbar-collapse {
		border: none;
	}
	#content {
		padding-top: 100px;
	}
}
@media only screen and (max-width: 768px) {
	#subnav ul li {
		padding-top: 0;
	}
}
@media only screen and (max-width: 1024px) {
	/* Caption */
	.caption {
		background: white;
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
		height: 101%;
		opacity: 1;
		text-align: center;
		padding: 15px;
		-webkit-backface-visibility: visible;
		-moz-backface-visibility: visible;
		backface-visibility: visible;
		-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
		-moz-transition: -moz-transform 0.3s, opacity 0.3s;
		transition: transform 0.3s, opacity 0.3s;
	}
}
/* Größen zwischen 768 bis 1024 Laptop + iPad Querformat */
@media screen and (min-width: 768px) and (max-width:1024px) {
	h1, h2, #masthead, #masthead nav ul li, .navbar-brand, #status p {
		font-size: 32px;
	}
	.back-top {
		font-size: 16px;
	}
	#subnav ul li {
		padding-top: 0;
	}
}
/* Alles, was größer als 1025px ist, Große Screens */
@media screen and (min-width: 1025px) {
	.container {
		width: 100%;
	}
}