/*mdb-micha.css*/
xbody,xhtml{
    height:100%;
}
/*html, body {height: 100%;}/* fix fancybox out of screen */
body {
  xfont-family: "Roboto", sans-serif;
 xfont-family: 'Fahkwang', sans-serif;
xfont-family: 'Montserrat', sans-serif;  
xfont-family: 'Quicksand', sans-serif;
xfont-family: 'Mallanna', sans-serif;
xfont-family: 'Roboto Slab', serif;
xfont-family: 'Poppins', sans-serif;
font-family: 'Karla', sans-serif;
font-weight: 300; }

/* ------------------------------------------- */
/* ------------  COLOR          -------------- */
/* ------------------------------------------- */

/* h5 neben Hamburger links */
.grey-skin .navbar { /* oberes ganzseitige horizontalBalken */
    xbackground-color: #a4a18c;
    xbackground-color: #6a8f33;
    background-color: ##ffe600;
    color: #ffe600;/*#4b5738;*/
	}
/* Hamburger Menu links */
i.fa-bars{
	xcolor:#369;
	color:#f0f2ed;
	}
/* sidebar background color verlauf*/
.mdb-skin .side-nav {
	background-color: linear-gradient(135deg, rgb(50, 50, 50) 0px, rgb(191, 218, 217) 100%);
	}
#sidenav-overlay { /* legt sich ganz über seite, wenn sidebar ins bild kommt */
	background-color: rgba(5, 7, 8, 0.1);
	}	
#slide-out ul{
	background-image:url(../img/cafe_pankow_titel3bilder.jpg);
	background-image:none;
	background-color:#FFF; /* background white dann font dunkel */
	background-position:left;
		XXbackground-color:#900; /*irgendein overlay drüber??*/
	}	
.grey-skin .side-nav {
	background-color:#F4F4F4;
	}
.grey-skin .side-nav .collapsible li .collapsible-header { /* sidebar zusammen-nicht-ausgeklappt*/
	color: #567;
	background-color: #f3f5f0;
    -webkit-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
	}
.grey-skin .side-nav .collapsible li .collapsible-header.active {/* rgba(0, 0, 0, 0.05)*/ /* active, der Link der bleibt */
	background-color: rgba(243, 245, 240, 0.2); /* wenn ich s geklickt habe und dann verlasse ist diese Farbe */
 }
.grey-skin .side-nav .collapsible li .collapsible-header:hover {/* hover, erster level*/
	background-color: rgba(243, 245, 240, 0.1); 
	}
.grey-skin .side-nav .collapsible li .collapsible-body a { /* zweiter level stehend */
	color: #567; 
	}
.grey-skin .side-nav .collapsible li .collapsible-body a:hover {
	color: #C39;
	color: #8d0d22; 
	}
.grey-skin .side-nav .collapsible li .collapsible-body { /* der unter-body*/
	xbackground-color: #d9f0ac ;
	background-color: rgba(210, 243, 111, 0.1);  /*#c4ccb4 */
	}
.grey-skin .side-nav .fa {
    color: #567;
	}
.grey-skin .side-nav .collapsible li .lisecond {
	x-background-color:#DDF4F7;
}
ul.ulsecond   {
	xbackground-color:rgba(196, 204, 180, 0.8); /* #c4ccb4  */
	background-color: #FC0;
}
/* ------------------------------------------- */
/* -------- COLOR  ----  TEXTE   -------------- */
/* ------------------------------------------- */
.grey-skin .page-footer {
    x-background-color: #a4a18c;
    xbackground-color: #6a8f33;
    background-color: ##ffe600;
    color: #ffe600;/*#4b5738;*/
}
footer.page-footer .container{
    color: #ffe600;
}
.grey-skin .navbar.double-nav a {
	XXcolor: #369;
	XXcolor:#f0f2ed;
}   


p.grey-text {
	color:#8C7373 !important;
	overflow: hidden;
	text-align:left;
}
p.grey-text { /* ein bisschen dunkler gemacht*/
	color: #7C8287 !important;
	color: #6F7A79 !important;
	XXpadding-left: 7px;
	XXpadding-left: 15px;
}
h2.blue-grey-text { /* H2 color mit important */
	color: #607d8b !important;
	xcolor:#465c5a;
	background-color: #fafafa;
}
.blue-grey-text { /* für H2, H4 und Summary-p*/
	XXcolor: #506f7e !important;
	XXcolor:#fefefe !important;
	XXbackground-color: #f2f3ef ; /* das gibt es */
	XXbackground-color:rgba(243, 245, 240, 1.99);
	XXbackground-color: rgb(250, 252, 247);	
	background-color: #FFFFFF;	
}


/* ------------------------------------------- */
/* -------- ENDE  ----  COLOR   -------------- */
/* ------------------------------------------- */

/* ------------------------------------------- */
/* ------------       SHADOWS       ---------- */
/* ------------------------------------------- */
/*.navbar {
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
   box-shadow: 0 2px 5px 0 rgba(0,0,0,.0),0 2px 10px 0 rgba(0,0,0,.0);
   color:#369;
   }*/
/* da ich überall depth-2 habe, ändere ich es über mein css, um nicht depth-1 überall zu ändern*/
.z-depth-2 {
  -webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
  
    -webkit-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
  box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.12), 0 4px 15px 0 rgba(0, 0, 0, 0.10); 
  }
/* ------------------------------------------- */
/* --------- ENDE --  SHADOWS       ---------- */
/* ------------------------------------------- */


/* ------------------------------------------- */
/* ------------  Navbar Horizontal  ---------- */
/* ------------------------------------------- */
.navbar {
	background-image:url(../img/header_001d.jpg);
	background-repeat:no-repeat;
	height:60px;
}
	/*background-image:url(../img/start_page_181116_psd_01.jpg);*/
.xxnavbar-nav {
	display: flex;
	ms-flex-direction: row;
	flex-direction: row;
	padding-left: 0;
	margin-bottom: 0;
}
.navbar-nav {
	color:#0FF;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: row;
	flex-direction: row;
	padding-left: 0;
	margin-bottom: 0;
	list-style: none;
}
.nav-item {
	padding-right:1em;
	padding-right:0em;
}
x.navbar {
	x-position: relative;
	display: block;
	x-flex-wrap: wrap;
	x-ms-flex-align: center;
	x-align-items: center;
	x-ms-flex-pack: justify;
	x-justify-content: space-between;
}	
x.navbar {
	position: relative;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-flex-align:start;
	align-items: flex-start !important;
	-ms-flex-pack: start;
	justify-content: space-between;
	padding: 0.5rem 1rem;
}   
/* ----------------------------------------------- */
/* --------- ENDE --  Navbar Horizontal ---------- */
/* ----------------------------------------------- */
/*----------------------------------*/
/*----------     sidenav   ---------*/
/*----------------------------------*/
.side-nav .logo-wrapper {
  xheight: 120px;
}
.side-nav .logo-wrapper a {
	xheight: 240px;
	xwidth: 240px;
	padding: 0;
	}
/*.side-nav .logo-wrapper img {
  padding-left: 50px;
  padding-right: 50px;
  padding-top: 8%;
  padding-bottom: 20%;
  height: 281px;
  width:448px;
}*/
.side-nav .logo-wrapper img {
    xpadding-left: 5px;
    xpadding-right: 10px;
    xpadding-top: 8%;
    xpadding-bottom: 44px;
    xheight: 281px;
    xwidth: 448px;
}
.side-nav .logo-wrapper img {
    height: auto;
    padding: 0% 20px;
        padding-top: 0%;
        padding-bottom: 20%;
	}
@media (max-height: 910px) {
  .side-nav .logo-wrapper {
    xheight: 80px;
  }
  .side-nav .logo-wrapper a {
    xheight: 80px;
  }
  .side-nav .logo-wrapper img {
    xpadding-left: 50px;
    xpadding-right: 50px;
    xpadding-top: 7%;
    xpadding-bottom: 7%;
	}
}
.mdb-skin .side-nav .logo-wrapper {
  background: url("http://mdbootstrap.com/images/regular/nature/img%20(55).jpg") no-repeat center center;
  background-size: cover;
    x-background:teal;
	x-background-color: rgb(141, 161, 160);
}
/*
.side-nav .collapsible-body a {
    padding-left: 47px;
    height: 36px;
    line-height: 36px;
    background-color: rgba(0, 0, 0, 0.15); 
	}
*/
ul.ulsecond {
margin-left:2em;
padding-left:2em;
}

/*----------------------------------------------------------*/
/*---------------   GALERIE fancybox        ------------------*/
/*----------------------------------------------------------*/
div.panel-heading h6 {
    margin-bottom: .5rem;
    font-family: inherit;
    font-weight: 300;
	font-size: 0.9rem !important;
	font-style:italic;
    line-height: 1.1;
    color: inherit;
	color:#776;
	text-align:center;
    xmargin-top: -16px;
    margin-bottom: -2px;
	background-color:#fcfcfa;
	padding-top:4px;
	line-height:0.94;
	}
a.fancybox-buttons[data-caption=~="2018"]{
	font-style:italic;
	}	
	
div.fancybox-title fancybox-title-inside-wrap {
	font-style:italic;
	}		
.thumbnail {
    display: block;
    padding: 8px;
    background-color: #FFF;
    xborder: 1px solid #DDD;
    xborder-radius: 8px;
	margin-bottom: 10px;
	}
.cboxPhoto {
    float: left;
    margin: auto;
    border: 1px solid #bcb;
	padding:3px;
    display: block;
    max-width: none;
    -ms-interpolation-mode: bicubic;
	}
#cboxLoadedContent {
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
	}
.fancybox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    overflow: auto;
    display: none;
    z-index: 8010;
    background: url(fancybox_overlay.png);
	background-color: rgba(0, 222, 185, 0.5);
	x-opacity:0.5;
	height:8888px; !important; /*verlängert das overlay für close click, war sonst nur screen hoch beim scrollen nicht mit */
	}
.fancybox-title-inside-wrap {
    padding-top: -17px;
    padding-left: 15px;
	font-style:italic;
}		
/*  fancybox slide transition fading  
.fancybox-fx-fade.fancybox-slide--current {
  opacity: 1;
  transition-duration: 150ms;
}
do not work */
.img-thumbnail { /* border beseitigen */
	border: 0px solid #ddd;
	}
.fancybox-overlay-fixed {
	position: fixed;
	bottom: 0;
	right: 0;
	height:8888px; !important;
	}
.img-thumbnail {
	padding: 0.35rem;
	background-color: #fffff3;
	border: 1px solid #ddd;
	border-radius: 0.25rem;
	border-radius: 0.25rem;
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
	display: inline-block;
	max-width: 100%;
	height: auto;
	}
.img-thumbnail_2 {
	padding: 2.35rem;
	background-color: #fffff8;
	border-radius: -0.25rem !important;
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
	display: inline-block;
	max-width: 100%;
	height: auto;
	}
@media (min-width: 576px) {
.img-thumbnail_2 {
	padding: 0.65rem;
	background-color: #fffff8;
	border-radius: -0.25rem !important;
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
	display: inline-block;
	max-width: 100%;
	height: auto;
	}
}
@media (min-width: 768px) {
.img-thumbnail_2 {
	padding: 1.35rem;
	background-color: #fffff8;
	border-radius: -0.25rem !important;
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
	display: inline-block;
	max-width: 100%;
	height: auto;
	}
}
@media (min-width: 992px) {
.img-thumbnail_2 {
  padding: 2.35rem;
  background-color: #fffff8;
  border-radius: -0.25rem !important;
  -webkit-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  display: inline-block;
  max-width: 100%;
  height: auto;
}
 }
@media (min-width: 1200px) {
.img-thumbnail_2 {
	padding: 2.35rem;
	background-color: #fffff8;
	border-radius: -0.25rem !important;
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
	display: inline-block;
	max-width: 100%;
	height: auto;
	}
}
/* Abstand von bild/text zu bild/text in mobile vertikal */	
@media (max-width: 576px) {
div.thumbnail {
	margin-top:1.5rem;
	}
}
.fancybox-image {
padding: 13px 8px 0px 10px;
}
/* color von Fotos in Galerie-Bildern overlay*/
.color2,
.color2:after {
  xbackground-color: #dae6c8 !important; 
  background-color:rgba(218, 230, 200, 0.3);
  xbackground-color:rgba(28, 20, 200, 0.4);
  }
/*----------------------------------------------------------*/
/*---------------      ENDE fancybox      ------------------*/
/*----------------------------------------------------------*/

/*----------------------------------------------------------*/
/*---------------     Überblicksgalerie   ------------------*/
/*----------------------------------------------------------*/
.grid_container {
	width:100%;}
.btn[class*="btn-outline-"].btn-lg {
    padding-top: 0.12rem;
    padding-bottom: 0.12rem;
}
/**/.grey-skin .btn-outline-primary {
	border: 1px solid #B8C5D3 !important;
	background-color: transparent !important;
	color: #A6B6C8 !important;
}
.btn.btn-lg {
    padding: 1rem 0.8rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
    font-size: .94rem;
}
.btn {
    display: inline-block;
    display: block;
}	
.btn-group-lg > .btn, .btn-lg {
    padding: .0rem 0.4rem;
    font-size: 0.95rem;
    border-radius: 0.3rem;
    display: block;
}
/*.grey-skin .btn-outline-primary2.active, 
.grey-skin .btn-outline-primary2:active, 
.grey-skin .btn-outline-primary2:active:focus, 
.grey-skin .btn-outline-primary2:focus, 
.grey-skin .btn-outline-primary2:hover {

    border: 1px solid #B8C5D3 !important;
    background-color: transparent !important;
    color: #ff8888 !important;
	}*/
.btn-outline-primary2 {
	border: 1px solid rgba(166, 182, 200, 0.99) !important;
	background-color: transparent !important;
	color: rgba(166, 182, 200, 0.99) !important; 
}
.btn-outline-primary2:hover, .btn-outline-primary2:focus, .btn-outline-primary2:active, .btn-outline-primary2:active:focus, .btn-outline-primary2.active {
    border-color: #ec9616 !important;
    background-color: transparent !important;
    color: #ec9616 !important; 
}
.btn-outline-primary2:not([disabled]):not(.disabled):active, .btn-outline-primary2:not([disabled]):not(.disabled).active,
.show > .btn-outline-primary2.dropdown-toggle {
	-webkit-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
	box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
	background-color: transparent !important;
	border-color: #46aded !important; 
}
.btn-outline-primary2:not([disabled]):not(.disabled):active:focus, .btn-outline-primary2:not([disabled]):not(.disabled).active:focus,
.show > .btn-outline-primary2.dropdown-toggle:focus {
	-webkit-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
	box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15); 
}
/*----------------------------------------------------------*/
/* -----------   ENDE Überblicksgalerie   ------------------*/
/*----------------------------------------------------------*/
/*timeline*/
/*.timeline-main .stepper.timeline-images li .step-content {
  width: 35%;
}*/
/*.timeline-main .stepper.timeline li a {
    padding: 0 0px;
    left: 0%;
}*/
/*.timeline-main .stepper.colorful-timeline li a .circle, .timeline-main .stepper.timeline li a .circle {
    margin-left: 434px; /* circle wieder rechts*/
/*}*/
/* image cropping - staucht aber */
/*.frame-square {
  background: #fff;
  x-border: 2px solid #000;
  display: inline-block;
  vertical-align: top;
  padding: 10px;
  width: 200px;
  height: 200px;
  margin-right: .5em;
  margin-bottom: .3em;
}
.crop {
  height: 100%;
  overflow: hidden;
  position: relative;
}
.crop img {
  display: block;
  min-width: 100%;
  min-height: 100%;
  margin: auto;
  position: absolute;
  top: -100%;
  right: -100%;
  bottom: -100%;
  left: -100%;
}
*/

/* ------------------------------------------- */
/* ------------  POSITION LAYOUT    ---------- */
/* ------------------------------------------- */

@media (max-width: 993px) {
.double-nav .breadcrumb-dn {
	display: block;
	padding-left:0.0rem;
	margin-left:0.0rem;
	xfloat:left;
	XXcolor:#F00 /*testcolor*/
	} 
}
.double-nav .button-collapse {
  position: absolute;
  left: 10px;
  font-size: 1.5rem; }
  @media (min-width: 1440px) {
    .double-nav .button-collapse {
      XXdisplay: none; 
	        margin-right: 10px;
      margin-left: 10px;
	  margin-top:-16px;} }
  @media (max-width: 1440px) {
    .double-nav .button-collapse {
		color:#3FF;
      display: block;
      position: relative;
      font-size: 1.4rem;
      margin-right: 10px;
      margin-left: 10px; } }

.double-nav .breadcrumb-dn p {
    padding-left: 1rem;
}

h2:first-of-type.h1-responsive {
	XXmargin-top:4rem;
}
/* -- nur in horizontal navbar -- */
h5.seitentitel {
	xfloat: left;
	display:inline;
	padding-left: 3rem;
	margin-left: 0rem;
	xxmargin-top:-7rem;
	text-align:left;
	xmargin-top: -29px;	
	}

.blue-grey-text { /* Color soll nicht positioniert werden, sondern H2 und H4 und p */
	XXpadding: 5px 100px 10px 15px;
	XXpadding: 0px 30px 0px 8px;
	XXpadding: 0px 30px 0px 15px;
}
h2.blue-grey-text {
	padding: 0px 15px 0px 15px;
}
h4.blue-grey-text {
	padding: 0px 0px 0px 15px;
}
p.grey-text {
	padding: 0px 0px 0px 15px;
}
p.blue-grey-text {
	padding: 0px 0px 0px 15px;
}
p.blue-grey-text-light {
	padding: 0px 0px 13px 15px;
}
.card-body {
	padding: 0.0rem;
}



.divider-new {
	position:relative;
	margin-bottom: 0.9rem;
}
hr {
	margin-top: 2rem;
	margin-bottom: 0.0rem;
	border: 0;
	border-top-color: currentcolor;
	border-top-style: none;
	border-top-width: 0px;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}
footer.page-footer {
	padding-top:2em;

}
footer.page-footer  a{
	color:#ffe600;

}
	
/* ------------------------------------------- */
/* ------- ENDE - POSITION LAYOUT   ---------- */
/* ------------------------------------------- */


/*xx.double-nav .breadcrumb-dn p {
	margin: 0;
	padding-top: 0;
	padding-left: 0rem;
	xxdisplay:inline;
	margin-left:0;
	}
xxdiv.breadcrumb-dn {
	xdisplay:inline;
	xfloat:left;
	padding-left:1.0rem;
	padding-top:0.4rem;
	margin-left:1.0rem;
	}*/
/* wegen Anzeige für Sprungmarke, weil Header die Headlilne verdeckt 
h2#sprung_perspektive_einsteinufer {
margin-top:50px;
}*/
/*----------------------------------------------------------*/
/* -----------   FONT SIZE   ------------------*/
/*----------------------------------------------------------*/
h2.startscroll {
	text-align:center;
	font-size:24px;
}	
@media (min-width: 576px) {
h2.startscroll {
	font-size: 170%; }
 }
@media (min-width: 1200px) {
h2.startscroll {
	font-size: 200%; }
}
.footer-copyright {
	text-align:center;
} 
h4 {
	font-family:	Calibri, Arial;
	font-family: 'Karla', sans-serif;
	font-weight: 400;	
		x-border-top: 12px solid #cbd4a399;
		x-border-top-width:0px;
		x-border-top-color:#C39;
		x-border-top-style:solid;
	text-align:left;
}
x.font-weight-bold {
    font-weight: 100;
}
x.font-weight-bold {
    font-weight: 600 !important;
}
h2.blue-grey-text {
	font-family: "Roboto", sans-serif;
	font-family:	Calibri, Arial;
}
html {
  font-size: 1rem;
}
h2 {
	font-size:1.9rem;
	color:#60F !important;
	text-align:left;
	}
h4 {
	font-size:1.1rem;
	margin-top:2.6rem;
	}	
.blue-grey-text {
    xcolor: #60F !important;
}	
@include media-breakpoint-up(sm) {
  html {
    font-size: 1.2rem;
  }
}
@include media-breakpoint-up(md) {
  html {
    font-size: 1.4rem;
  }
}
@include media-breakpoint-up(lg) {
  html {
    font-size: 1.6rem;
  }
}
@include media-breakpoint-up(xl) {
  h4 {
    font-size: 1.6rem;
  }}
xh2 {
	font-size:0.5rem;
	color:#60F !important;
	text-align:left;
	}
}
@media (min-width: 576px) {
  .h1-responsive {
    font-size: 170%; }
}
@media (min-width: 768px) {
  .h1-responsive {
    font-size: 200%; }
}
@media (min-width: 992px) {
  .h1-responsive {
    font-size: 200%; }
}
@media (min-width: 1200px) {
  .h1-responsive {
    font-size: 250%; 
}
h4 {
	font-size:1.3rem;}
}


/*---------------------------------------------------*/
/* -----------   ENDE FONT SIZE    ------------------*/
/*---------------------------------------------------*/

/* --------------------------------------------- */
/* ----- BEGIN media query text elemente   ------- */
/* --------------------------------------------- */

/* --------------------------------------------- */
/* ----- END media query text elemente   ------- */
/* --------------------------------------------- */