/*
Theme Name: Mio Basic by Mio Creativ
Theme URI: http://www.mio-creativ.de
Author: Carola Kermer
Author URI: http://www.mio-creativ.de
Description: Eierlegendes Wollmilchtheme von Mio Creativ 
Version: 3.7.15
License: MIT
License URI: http://opensource.org/licenses/MIT
Text Domain: mio-basic
Domain Path: /languages/

This theme built with Twitter Bootstrap v.4.

*/


/*
Required WordPress CSS
*/
.alignleft {
	display: inline;
	float: left;
	margin-right: 1.5em;
}
.alignright {
	display: inline;
	float: right;
	margin-left: 1.5em;
}

.aligncenter {
	display: block;
	margin: 0 auto;
}

/* WordPress gallery */

.gallery {
	margin: -7px;
	margin-bottom: 22px;
}
.gallery-item {
	position: relative;
	display: inline-block;
	padding: 7px;
	margin: 0;
	text-align: center;
	vertical-align: top;
	width: 100%;
}
.gallery-columns-2 .gallery-item {
	max-width: 50%;
}
.gallery-columns-3 .gallery-item {
	max-width: 33.33%;
}
.gallery-columns-4 .gallery-item {
	max-width: 25%;
}
.gallery-columns-5 .gallery-item {
	max-width: 20%;
}
.gallery-columns-6 .gallery-item {
	max-width: 16.66%;
}
.gallery-columns-7 .gallery-item {
	max-width: 14.28%;
}
.gallery-columns-8 .gallery-item {
	max-width: 12.5%;
}
.gallery-columns-9 .gallery-item {
	max-width: 11.11%;
}


.gallery-icon img {
	margin: 0 auto;
}
.gallery-caption {
	
	color: #707070;
	color: rgba(51, 51, 51, 0.7);
	display: block;
	
	font-size: 12px;
	font-size: 1.2rem;
	line-height: 1.5;
	padding: 0.5em 0;
	/*
	display: none;
	*/
}
.gallery-columns-6 .gallery-caption,
.gallery-columns-7 .gallery-caption,
.gallery-columns-8 .gallery-caption,
.gallery-columns-9 .gallery-caption {
	display: none;
}

#gallery-2 .gallery-item a {padding-bottom: 0px; display: block; position: relative; z-index: 3}
#gallery-2 .wp-caption-text {/*transform: translateY(-40px);*/ position: relative; z-index: 2}


.wp-caption {
	border: 1px solid #fff;
	background: #fff;
	margin-bottom: 1.5em;
	max-width: 100%;
}
.wp-caption img[class*="wp-image-"] {
	display: block;
	margin: 1.2% auto 0;
	max-width: 98%;
}
.wp-caption-text {
	text-align: center;
}
.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}




/* General */

/* color: #5b8bcd; (light color) / color: #223b6a; (dark color) */
/* font-family: 'Roboto Slab', serif; / font-family: 'Roboto', sans-serif; */

body {	
	color: #000;
	font-family: 'Montserrat', sans-serif;
	font-size: 1rem;
	line-height: 170%;
	hyphens: none; 
	/*background: url("img/bg_body.jpg") center center no-repeat;
	background-attachment: fixed;*/

	background-size: cover;
}

@media(max-width:767px) {
body:before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  /*background: url("img/bg_body.jpg") no-repeat center center*/;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
}

.vspace-top {
	margin-top: 15px;
}
.vspace-bottom {
	margin-bottom: 15px;
}
.vspace {
	margin-top: 15px;
	margin-bottom: 15px;
}

.vspace-big-top {
	margin-top: 30px;
}
.vspace-big-bottom {
	margin-bottom: 30px;
}
.vspace-big {
	margin-top: 30px;
	margin-bottom: 30px;
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: #5b8bcd;
	transition: all 500ms ease;
	
	/* https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/ */
	/* These are technically the same, but use both */
	  overflow-wrap: break-word;
	  word-wrap: break-word;

	  -ms-word-break: break-all;
	  /* This is the dangerous one in WebKit, as it breaks things wherever */
	  /* word-break: break-all; */
	  /* Instead use this non-standard one: */
	  word-break: break-word;

	  /* Adds a hyphen where the word breaks, if supported (No Blink) */
	  -ms-hyphens: auto;
	  -moz-hyphens: auto;
	  -webkit-hyphens: auto;
	  hyphens: auto;
}


a.rahmen {
	position: relative;
	 overflow-wrap: normal !important;
	  word-wrap: normal !important;

	  -ms-word-break: normal !important;
	  /* This is the dangerous one in WebKit, as it breaks things wherever */
	  /* word-break: break-all; */
	  /* Instead use this non-standard one: */
	  word-break: keep-all !important;

	  /* Adds a hyphen where the word breaks, if supported (No Blink) */
	  -ms-hyphens: none;
	  -moz-hyphens: none;
	  -webkit-hyphens: none;
	  hyphens: none;
}


a:hover, a:active, a:focus {
	color: #223b6a;
	text-decoration: none;
}

.wichtig {
	color: #223b6a;
}

.rahmen {display: block;    background: #1a4b7e;
    border-bottom: 6px solid #5b8bcd; color: #fff; padding: 15px; margin-bottom: 15px;}
.rahmen a {color: #fff;}
.rahmen:hover {color: #5b8bcd !important;}


.rahmen-grau {/*background-image: url(img/bg_body.jpg);*/ color: #000; }
.rahmen-grau a {color: #000;}

.rahmen-weiss {background: #fff; color: #000; box-shadow: 0 0 10px 0 rgba(0,0,0,0.25); border-bottom: 0; /* margin: 0px;*/ }
/*.rahmen-weiss:hover {opacity: 0.75; box-shadow: 0 0 10px 0 rgba(0,0,0,0.75);color: #000 !important;}*/

.rahmen-object h3 {}

.rahmen ul {text-align: left; list-style: none; margin: 15px 15px 5px 15px;}
.rahmen ul li {padding-left: 15px; position: relative; margin-bottom: 10px;}
.rahmen ul li:before {position: absolute; top: 0; left: 0; content: "›"}
@media(min-width: 768px) {
	.rahmen ul {column-count: 2; column-gap: 30px;}
}


.multicolumn {text-align: justify;}
@media(min-width: 768px) {
	.multicolumn {column-count: 2; column-gap: 30px;}
}

@media(max-width: 767px) {
	.col-md-4 .rahmen {max-width: 300px; margin-left: auto; margin-right: auto;}
}

.bilderrahmen {border: 1px solid #fff;}

h1, .h1 {
	font-style: normal;
	font-size: 36px;
  color: #1a4b7e;}

h1:after, .h1:after {
    content: "-";
    height: 0px;
    padding-top: 20px;
    overflow: hidden;
    display: block;
    width: 100px;
    border-bottom: 4px solid #1a4b7e;
    margin-bottom: 20px;
}

h1.text-center:after, .text-center .h1:after {
	margin-left: auto;
	margin-right: auto;
}

h2 { font-size: 1.4em;}
h3 {text-transform: uppercase; color: #5b8bcd; font-size: 1.3em;}

@media(max-width: 767px) {
h1, .h1 {font-size: 1.7em;
	-webkit-hyphens: manual;
hyphens: manual;}
}

ul {padding-left: 20px;}

p:last-child {margin-bottom: 0;}

hr {
	margin-top: 15px;
	margin-bottom: 15px;
	border: 0;
	border-top: 1px solid #000;
}

.big {font-size: 1.2em; line-height: 1.5em;}

.btn-primary, .btn-outline-primary {margin-bottom: 15px; text-transform: uppercase; font-weight: bold;}

.btn-primary {
	background: #5b8bcd;
	border-color: #5b8bcd;
}
.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
	background: #223b6a;
	border-color: #223b6a;
}


.btn-outline-primary {
	color: #5b8bcd;
	border-color: #5b8bcd;
}
.btn-outline-primary:hover, .btn-outline-primary:active, .btn-outline-primary:focus {
	background: #5b8bcd;
}

/* Header area */

.wrapper-header {background: #1a4b7e; border-bottom: 6px solid #5b8bcd;padding-top: 40px;padding-bottom:40px;}


.custom-logo {width: 361px; height: auto;}

.title {
	font-size: 36px;
	display: inline-block;
}

.navbar-toggler {
    border: 1px solid #000;
	color: #FFF;
}

/* Main navigation */

.navbar {margin: 0; padding: 0;}

ul.primary-nav  {padding: 0; display: block; font-size: 0px; z-index: 999;margin-bottom: 0px;}
ul.primary-nav a {display: block; font-size: 16px; line-height: 16px;  color: #fff; text-transform: uppercase;}
ul.primary-nav a:hover,
ul.primary-nav li.current-menu-item > a,
ul.primary-nav li.current-menu-ancestor > a {
	color: #FFFFFF;
}

.menu-item-has-children a::after {
  padding-left: 10px;
  content: "\f0d7";
  font-family: 'Font Awesome\ 5 Free';
  font-weight: 900;
}
.menu-item-has-children ul li a::after {
  content: " "!important;
}

@media (min-width: 992px) {
	ul.primary-nav {}
	ul.primary-nav a {padding: 0 15px;}
	ul.primary-nav > li {display: inline-block; padding: 15px 0; position: relative;}
	ul.primary-nav > li > a {/*border-left: 1px solid #000;*/  }
	ul.primary-nav > li:first-child > a {border-left: 0px;}
	
	ul.primary-nav > li > ul {display: none;}
	ul.primary-nav > li:hover > ul {display: block; border-bottom: 4px solid #5b8bcd; position: absolute; top: 100%; left: 0; margin: 0; padding: 0; text-align: left; white-space: nowrap; background: rgba(19, 66, 114, 0.9)}
	ul.primary-nav > li > ul > li {display: block; padding: 15px 0; }
}

@media (max-width: 991px) {
	ul.primary-nav {}
	ul.primary-nav a {padding: 15px 0 ;}
	ul.primary-nav > li {display: block; padding: 0; }
	ul.primary-nav > li {border-top: 1px solid #ddd;  }
	ul.primary-nav > li:first-child {border-top: 0px;}
	
	ul.primary-nav > li > ul {display: none;}
	ul.primary-nav > li.current-menu-item > ul,
	ul.primary-nav > li.current-menu-ancestor > ul
		{display: block; margin: 0; padding: 0; }
	ul.primary-nav > li > ul > li {display: block; border-top: 1px solid #ddd; }
	ul.primary-nav > li > ul > li > a {padding-left: 15px; }
}

/* Header image / Slideshow area */

.header_image_wrapper, .slideshow {position: relative;}

.owl-slideshow .slideshow-item > a { display: block; top: 0; left: 0; bottom: 0px; right: 0px; color: inherit; }

.header-caption {
	padding: 1vw; 
	/*display: inline-block;*/
	background: #1a4b7e;
	position: absolute;
	left: 2%;
  right:2%;
	bottom: -40%;
	/*-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);*/
	text-align: center;
  z-index: 999;
	}

.header-title {
	font-family: 'Montserrat', sans-serif;
	display: block;
	font-size: 24pt;
}

.header-description {
	display: block;
	font-size: 16pt;
	line-height: 2vw;
}

.owl-prev, .owl-next {
    position: absolute;
    top: 50%;
    left: 0px;
    margin-top: -32px;
    width: 28px;
    height: 65px;
    font-size: 32px;
	line-height: 56px;
	text-align: center;
    color: #fff;
	/*background: rgba(255,255,233,0.5);*/
    text-shadow: 0px 0px 2px #000;
}
.owl-next {
	left: auto;
    right: 0px;
}

/*Breadcrumbs*/

.row-breadcrumb {
	text-align: center;
	position: relative;
	z-index: 888; /* sonst Problem mit darüberliegenden Elementen  bei Hover  */
}
.row-breadcrumb > div {
	position: relative;
}
.breadcrumbs {
	background: transparent;
	padding: 0;
	margin: 0;
	font-size: 85%; /* 0.85em */
}
.breadcrumbs a {
	/*color: #777;*/
}
.breadcrumbs li.active a {
	font-weight: normal;
	cursor: text;
	text-decoration: none;
}

.wrapper-light {/*background: rgba(255,255,255,0.5);*/ background:#f8f8f8; padding: 0px 0 0px 0; }
.container-intro {padding: 0px 5px 30px 5px; color:#323232; /*text-shadow: 0 0 2px #fff;*/}

@media(min-width: 992px) {
.wrapper-light {padding: 30px 0 30px 0;}
.container-intro {padding: 30px 5px 60px 5px;}
	
}
/* Sidebar */

.col-sidebar-right .widget {border: 1px solid #5b8bcd; padding: 30px; margin-bottom: 30px;}
.col-sidebar-right .widget h2 {margin: -30px; margin-bottom: 15px; padding: 20px 30px; background: #5b8bcd; color: #fff; font-size: 20px;}

.widget-archiv ul {margin-bottom: 0px;}

/* Posts and custom post types */

.mio-permalink {color: inherit; display: block; margin-right: 15px; margin-left: 15px; }
.mio-permalink > .row {background: #f7f7f7;}
.mio-permalink .col-img {padding: 0px;}
.mio-permalink .col-text {padding: 0px; padding: 15px;}

/*Back to Top Button*/

.back-to-top {
	position: fixed;
	bottom: 15px;
	right: 15px;
	font-size: 30px;
	background: rgba(200,200,200,0.5);
	border-radius: 5px;
	padding: 5px 15px;
}

/* Shariff Socia Media Safe Sharing Tool */

.shariff {margin-left: -5px !important; margin-right: -5px !important;}

/* Contact Form 7 */

.wpcf7 .screen-reader-response {display: none}
.wpcf7 .wpcf7-not-valid-tip {padding-top: 5px; font-size: 0.8rem; line-height: 0.9rem; color: red;}
.wpcf7 .wpcf7-validation-errors {border: 1px solid red; padding: 15px; font-size: 0.8rem; line-height: 0.9rem;}
.wpcf7 .wpcf7-mail-sent-ok {border: 1px solid green; padding: 15px; font-size: 0.8rem; line-height: 0.9rem;}


.wrapper-blue {background: #1a4b7e;
    border-bottom: 6px solid #5b8bcd; padding: 30px 0; color: #fff; margin-bottom: 30px;}
.wrapper-blue h3 {margin-bottom: 30px; color: #fff;}
.wrapper-blue img {border: 1px solid #fff;}
.wrapper-blue a:hover img {opacity: 0.85;}

.wrapper-blue .btn-primary {
    background: #fff;
    border-color: #fff;color: #5b8bcd;
}

.wrapper-blue .btn-primary:hover {
    background: transparent;
    color: #fff;
}


span.verkauft {position: absolute; left: 8px; top: 25px; background: #1a4b7e; color: #fff; display: inline-block; padding:0px 10px; /*transform: rotate(-30deg); */box-shadow: 0 0 10px 0 rgba(0,0,0,0.25);}


/* Footer */

.wrapper-footer {background: #1a4b7e; padding: 30px 0;border-top:8px solid #223b6a}
.wrapper-footer, .wrapper-footer a {color: #fff;}
.wrapper-footer h2.widgettitle {font-size: 1.2rem; text-transform: uppercase; padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid #fff;}
@media(max-width: 991px) {.wrapper-footer .widget {margin-bottom: 30px;}}


/* Admin Bar */

@media(max-width: 991px) {
#wpadminbar {overflow: hidden;}
}

/* montserrat-regular - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('webfonts/montserrat-v12-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Regular'), local('Montserrat-Regular'),
       url('webfonts/montserrat-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfonts/montserrat-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfonts/montserrat-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('webfonts/montserrat-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('webfonts/montserrat-v12-latin-regular.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat-500 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  src: url('webfonts/montserrat-v12-latin-500.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Medium'), local('Montserrat-Medium'),
       url('webfonts/montserrat-v12-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfonts/montserrat-v12-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfonts/montserrat-v12-latin-500.woff') format('woff'), /* Modern Browsers */
       url('webfonts/montserrat-v12-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('webfonts/montserrat-v12-latin-500.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat-700 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url('webfonts/montserrat-v12-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Bold'), local('Montserrat-Bold'),
       url('webfonts/montserrat-v12-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfonts/montserrat-v12-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfonts/montserrat-v12-latin-700.woff') format('woff'), /* Modern Browsers */
       url('webfonts/montserrat-v12-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('webfonts/montserrat-v12-latin-700.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* ADD BY ALLAN */
.container-front {
  padding-top: 130px;
  padding-bottom: 80px;
  background:#eceeeb url(img/front-bg.png) center center no-repeat;
  background-color: rgba(255, 255, 255, 5.4);
  }

/* Header single image */
.image-header-wrapper {background:#ebebeb;padding-top:30px;}
.image-header {position: relative;}
.image-header img {object-fit: cover;width: 100%;}
.image-header-caption {
	padding: 1vw;
	/*display: inline-block;*/
	background: #1a4b7e;
	position: absolute;
	left: 4%;
  right:4%;
	bottom: -13%;
	/*-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);*/
  z-index: 999;
  color: #ffffff;
	}

.image-header-title {
	display: block;
	font-size: 24px;
  line-height: 32px;
}

.image-header-description {
	display: block;
	font-size: 16px;
  line-height: 18px;
}

.image-header-link a {
  border: 1px solid #ffffff!important;
  background: none!important;
  font-weight: normal!important;
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  border-radius: 0 !important;
  font-size: 18px!important;
  padding: 15px!important;
  float:right;
  margin-top: 10px!important;
}

@media(min-width: 770px) and (max-width: 1000px) {
.image-header-caption {left: 6%;right:6%;bottom: -20%;}
.image-header-description {display:none;}
.image-header-link a {display:block;margin-left:40px;}
}

@media(max-width: 768px) {
.image-header-caption {left: 6%;right:6%;bottom: -30%;}
.image-header-title {font-size: 18px;text-align:center;}
.image-header-description {display:none;}
.image-header-link a  {display:block;width:100%;font-size: 14px!important;padding: 5px!important;}
}
@media(max-width: 540px) {
.image-header-caption {left:5.5%;right:5.5%;bottom: -35%;}
.image-header-title {font-size: 14px; line-height: 17px; text-align:center; padding-top: 10px;}
.image-header-link a  {font-size: 14px!important; line-height: 17px !important; padding: 5px!important;}
}


/* Objekte */
.weitere-objekte {font-size:20px;font-weight:normal;color:#1a4b7e;padding:15px 40px; border-radius: 0px;border: 1px solid #1a4b7e;}

.objekt-img img {object-fit: cover;width: 100%;height:220px;}
.objekte-info {background:#ffffff;border-left:1px solid #f2f2f2;border-right:1px solid #f2f2f2;border-bottom:1px solid #f2f2f2;text-align:left;}
.objekte-info h3 {padding:15px 15px 5px 15px;color:#1a4b7e;font-size:16px;}
.objekte-info p {padding:0px 15px;color:#666666;font-size:16px;line-height:18px}
.objekte-info hr {margin:0px 15px!important;height: 1px;border:none;background: #eceeeb;}
.objekte-info .moreinfo {padding:15px;color:#1a4b7e;font-size:14px;text-transform:uppercase;text-align:center;width:100%;display:block;}

.small-info {
  background: #f2f2f2;
  border-bottom:1px solid #5b8bcd;
  font-size: 12px;
  color: #666666;
  padding: 2px 10px 0px 10px;
  display: flex;
  flex-direction: row;
}
.small-info span {width:100%;text-align:left;}
.small-info span:nth-child(2) {text-align:center;}
.small-info span:last-child {text-align:right;}
.small-info span i {margin-right: 5px;}

.teamliste-info {
  background:#1a4b7e;
}