/*
 Theme Name:   Wilfried Börgerling Haus
 Description:  Themeauszeichnungen Wilfried Börgerling Haus
 Author:       Volker Stegmaier
 Author URI:   https://volkerstegmaier.de
 Template:     primer
 Version:      1.0
 Text Domain:  wilfried-boergerling-haus
*/


/* General */

* { text-rendering: optimizeLegibility; }
html.touch * { text-rendering: optimizeSpeed; }

html {
	background: #004577
}

.site-content, .site-header-wrapper, .main-navigation, .site-info-wrapper .site-info {
  max-width: 1600px;
}

nav#site-navigation {
    margin-top: -88px;
}

.home .wp-block-buttons {
    text-align: left !important;
}

.layout-two-column-default .content-area {
    width: 68.88889%;
    float: left;
    margin-left: 1.38889%;
    margin-right: 1.38889%;
}

.layout-two-column-default #secondary {
    width: 25.55556%;
    float: right;
    margin-left: 1.38889%;
    margin-right: 1.38889%;
}

body.custom-background {
    position: relative;
    z-index: 0;
}    

.slider {
	background: white;
}

.site-content {
	z-index: 0;
	position: relative;
}

.hentry {
	padding: 1.2em;
}

.wp-block-separator.is-style-wide {
    margin: 30px -20px;
    background-color: transparent;
    border-bottom: 20px solid #f9f9f9;
}

.site-content, .site-header-wrapper, .main-navigation {
    max-width: 1400px;
    }

.page-content, .entry-content, .entry-summary {
    margin: 0 0 0;
}

.copyright {
	display: inline;
	margin-right: 20px;
}

blockquote {
	border: none !important;
}

blockquote p {
	font-family: "Josefin Sans", sans-serif;
    color: #b41312;
    width: 70%;
    margin: 0 auto;
    line-height: 1.5;
    font-weight: 400;
}

figure {
    border: none;
    margin: 40px 0;
}

.wp-caption .wp-caption-text {
    margin: 0.8075em 0;
    /* font-family: "Roboto Slab"; */
    font-size: 80%;
    text-align: left;
    padding-left: 10px;
}

.is-style-outline .wp-block-button__link, .wp-block-button__link.is-style-outline {
	border: 1px solid;
}

.wp-block-image {
	margin-top: 0 !important;
}

.site-title-wrapper {
    width: 20%;
    float: left;
    margin-left: 1.38889%;
    margin-right: 1.38889%;
    position: relative;
    z-index: 10;
    padding: 20px 0 0;
}

a.custom-logo-link {
    width: 270px;
    display: block;
}

.widget-dark {
    background-color: #004577;
    color: white;
}

.widget-dark h4 {
    color: white !important;
}

.widget-dark a:hover {
  color: white !important; }

.custom-logo {
  height: 150px;
  width: 150px;
  position: block;
  background-color: #fff
}

.widget-red {
    background-color: #b41312;
    color: white;
}

.widget-red h4 {
    color: white !important;
}

.widget-red a {
  color: white !important; }

.widget-red a:hover {
  color: white !important; }

.nav-insta a:before {
content: "\e055";
font-family: "Font Awesome 5 Brands"; /* This is the correct font-family*/
font-size:40px;
color: #b41312;
}
.nav-insta a {
  margin-top:-5px;
}

.main-navigation ul {
    float: right;
}

.main-navigation ul ul a {
    width: 300px;
}

/* Suche Highlight */

mark {
	background: rgba(255, 237, 0, 1)
}

/* Typografie */

.page-title-container .page-header {
	max-width: 100vw;
	text-align: center;
}

.page-header h1, .page-header .page-title {
	font-size: 2em;
	color: #b41312;
	font-weight: 400;
}

.home .page-header h1, .home .page-header .page-title {
	text-align: center;
	}
body {font-size: 1.05rem; }

h1 {
	 font-weight: 200;
	 letter-spacing: -0.03em !important;
   line-height: 1;
}

h2 {
    margin-top: 14px;
    margin-bottom: 5px;
    font-weight: 200;
    color: #ab0f0f;
    font-size: 1.7em;
    letter-spacing: -0.03em !important;
}

h3 {
	 font-weight: 200;
	 letter-spacing: -0.03em !important;
}

.widget-title {
	margin-top: 0;
	
}


#content a:before {
	content: "\203A";
		content: "\2192";
	margin-right: 5px;
}


ol li {
	font-size: 110%;
}

.widget-title {
	font-size: 1.5em !important;
	font-weight: 400;
	color: #ab0f0f !important;
}

.textwidget a {
    color: #57afee  !important;
}

.textwidget a:hover {
	color: #ab0f0f !important;
}

.wp-block-buttons {
    text-align: center;
}

.wp-block-column:not(:first-child) {
    margin-left: 80px;
}

.site-info-wrapper .site-info-text {
    line-height: 2;
}

.wp-block-image a::before {
    content: none !important;
}

.main-navigation a {
    display: block;
    font-size: 1.3em;
    font-weight: 400;
    padding: 20px 25px !important;
}

/* Formular */

form label, .wpcf7-list-item-label {
	font-weight: normal !important;}
}

label {
	color: #004577 !important;
}

/* Artikel Liste */

ul.display-posts-listing {
	margin: 30px 0;
	font-weight: bold;
	list-style: none;
	
}


/* Top Menu */

.main-navigation a, .main-navigation .expand {
	line-height: 1.7rem
}

/* Footer */

.menu-footer-container {
	background: #0b3954;
    width: 100vw;
    left: 0;
    position: absolute;
}

#menu-footer {
    max-width: 1200px;
    margin: 0 auto;
    display: block;
    padding: 10px 0;
}

.footer-menu ul li a, .footer-menu ul li a:visited {
	color: white !important;
}

.widget_media_image {
    text-align: right;
	padding: 5px 0
}


.widget_media_image .wp-caption {
	margin: 0;
}


.footer-widget .widget_text {
	font-size: 80%
}

/* Meta Menue */

.meta-menue {
    position: absolute;
    right: 190px;
    top: 50px;
    z-index: 99;
}

ul#menu-meta-menue {
    list-style: none;
}

#menu-meta-menue li {
    display: inline-block;
    margin-left: 30px;
}

#menu-meta-menue a {
	color: #f39200;
	font-family: sans-serif;
	font-weight: 100;
}

/* Reader Ansicht */

body.reader:before {
	opacity: 0;
}

/*
body.reader .wrap, body.reader #primary {
	margin: 0;
	padding: 0;
	max-width: 80vw !important;
}
*/

body.reader {
	font-size: 150%;
}

body.reader p, body.reader h1, body.reader h2, body.reader h3, body.reader h4, body.reader h5, body.reader h6, body.reader ul, body.reader li {
	font-weight: 300;
	box-shadow: none;
}

body.reader h1 {
	font-size: 200%;
	font-weight: bold;
}

body.reader h2 {
	font-weight: bold;
}

body.reader img {
	    -webkit-filter: grayscale(100%) contrast(2); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%) contrast(2);
}


.site-main .post-navigation {
	display: none !important;
}

/* Ansprechpartner */

ul.hentry {
	list-style-type: none;
}

.ansprechpartner {
    width: 48%;
    float: left;
    margin: 0 2% 40px 0 ;
}

li.ap-name {
    font-weight: bold;
    color: #f39200;
}

li.ap-aufgabe {
    font-style: italic;
    margin-bottom: 10px;
}

li.ap-plzort {
    margin-bottom: 10px;
}

.ansprechpartner-zeile {
	margin-bottom: 50px;
}

/*
.portrait {
    float: left;
    width: 40%;
}
*/

.ap-text {
    display: block;
/*     margin-left: 40%; */
}


/* Schatten */

.hentry {position: relative;	}

.hentry:before, .hentry:after {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 40px;
  left: 10px;
  width: 50%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 35px 20px #777;
  -moz-box-shadow: 0 35px 20px #777;
  box-shadow: 0 35px 20px #777;
  -webkit-transform: rotate(-8deg);
  -moz-transform: rotate(-8deg);
  -o-transform: rotate(-8deg);
  -ms-transform: rotate(-8deg);
  transform: rotate(-8deg);
  height: 50px;
  opacity: 0.5;
	}
	
.hentry:after {
  -webkit-transform: rotate(8deg);
  -moz-transform: rotate(8deg);
  -o-transform: rotate(8deg);
  -ms-transform: rotate(8deg);
  transform: rotate(8deg);
  right: 10px;
  left: auto;
}

.widget-last {position: relative;	}

.widget-last:before, .widget-last:after {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 40px;
  left: 10px;
  width: 50%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 35px 20px #777;
  -moz-box-shadow: 0 35px 20px #777;
  box-shadow: 0 35px 20px #777;
  -webkit-transform: rotate(-8deg);
  -moz-transform: rotate(-8deg);
  -o-transform: rotate(-8deg);
  -ms-transform: rotate(-8deg);
  transform: rotate(-8deg);
  height: 50px;
  opacity: 0.5;
	}
	
.widget-last:after {
  -webkit-transform: rotate(8deg);
  -moz-transform: rotate(8deg);
  -o-transform: rotate(8deg);
  -ms-transform: rotate(8deg);
  transform: rotate(8deg);
  right: 10px;
  left: auto;
}

.page-title-container {position: relative;	}

.page-title-container:before, .page-title-container:after {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 40px;
  left: 10px;
  width: 50%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 35px 20px #777;
  -moz-box-shadow: 0 35px 20px #777;
  box-shadow: 0 35px 20px #777;
  -webkit-transform: rotate(-8deg);
  -moz-transform: rotate(-8deg);
  -o-transform: rotate(-8deg);
  -ms-transform: rotate(-8deg);
  transform: rotate(-8deg);
  height: 50px;
  opacity: 0.5;
	}
	
.page-title-container:after {
  -webkit-transform: rotate(8deg);
  -moz-transform: rotate(8deg);
  -o-transform: rotate(8deg);
  -ms-transform: rotate(8deg);
  transform: rotate(8deg);
  right: 10px;
  left: auto;
}

.is-style-fill {position: relative;	}

.is-style-fill:before, .is-style-fillr:after {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 40px;
  left: 10px;
  width: 50%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 35px 20px #777;
  -moz-box-shadow: 0 35px 20px #777;
  box-shadow: 0 35px 20px #777;
  -webkit-transform: rotate(-8deg);
  -moz-transform: rotate(-8deg);
  -o-transform: rotate(-8deg);
  -ms-transform: rotate(-8deg);
  transform: rotate(-8deg);
  height: 50px;
  opacity: 0.5;
	}
	
.is-style-fill:after {
  -webkit-transform: rotate(8deg);
  -moz-transform: rotate(8deg);
  -o-transform: rotate(8deg);
  -ms-transform: rotate(8deg);
  transform: rotate(8deg);
  right: 10px;
  left: auto;
}



.main-navigation .current_page_ancestor > a, .main-navigation .current_page_parent > a, .main-navigation .current-menu-ancestor > a {
    background-color: transparent !important;
}

.main-navigation .current_page_item > a, .main-navigation .current-menu-item > a {
    background-color: transparent !important;
}

.main-navigation a:hover, .main-navigation a:focus, .main-navigation a:visited:hover, .main-navigation .expand:hover, .main-navigation .expand:focus, .main-navigation .expand:visited:hover {
    background-color: transparent !important;
    color: #b41312;
}

.main-navigation ul li a:hover, .main-navigation ul li a:focus {
    color: #b41312 !important;
}

.credit_add {
    float: right;
}

.site-info-wrapper .site-info-text {
    width: 100%;
    }


/* Blog */

.post .entry-title {
  font-weight: 400;
}

.post .entry-title a::before{
  content: none !important;
}

.entry-meta .posted-date::before {
  content: none;
}

.entry-meta {
  font-size: 100%;
}

.button::before {
  content: none !important;
}

button, a.button, a.button:visited, input[type="button"], input[type="reset"], input[type="submit"], .wp-block-button__link, .site-info-wrapper .social-menu a:hover {
  background-color: #004577 !important;
  border-color: #004577;
}

button:hover, a.button:hover {
  background-color: #45a8f3 !important;
  border-color: #45a8f3;
}

.pagination a::before {content: none !important}

.widget_recent_entries a {
  color: #004577;
  font-weight: 400;
}

/* Responsive */


@media only screen and (max-width: 977px) {
	body {
    font-size: 1.1em;
	}

p { hyphens: auto; margin-bottom: 0; }

.site-info-wrapper .site-info-text {
  width: auto;
}

.site-title-wrapper {
  padding: 0;
}

.menu-toggle div {
    background-color: #004577 !important;
}

.wp-block-buttons>.wp-block-button {
    margin: 15px 0;
}

.wp-block-media-text .wp-block-media-text__content {
  padding: 0;
}

.wp-container-7 {
    justify-content: left;
}

.layout-two-column-default .content-area {
    width: 100%;
    float: left;
    margin: 0;
}

.layout-two-column-default #secondary {
    width: 100%;
    float: right;
    margin: 0;
}

	.ansprechpartner {
    width: 100%;
    float: none;
    margin: 0 0 30px 0;
	}
	
	.menu-toggle {
		padding: 23px 5px 0;
	}
	
	.page-title-container {
		display: block;
	}
	
	.main-navigation ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
    margin-top: 100px;
    float: none;
	}
	
	.expand {
		display: none !important;
	}
	
	
	li.small > a {
			font-size: 155%;
    font-family: "Roboto Slab" !important;
    font-weight: 300;
	}
	
	.sub-menu {
    display: block !important;
	}
	
	ul.sub-menu {
    margin-top: 0;
    font-family: "Roboto Slab" !important;

	}
	
	ul.sub-menu a {
    padding-left: 50px;
	}
	
	.main-navigation li li.small a {
		    font-family: "Roboto Slab" !important;
		    font-size: 110% !important;
	}
}