@charset "utf-8";
/* CSS Document */
/* Guttau Supervision */
/* Copyright 2022 Hoppe Websolutions */
/* open-sans-300 - latin */
/* cabin-regular - latin */
@font-face {
  font-family: 'Cabin';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/cabin-v26-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/cabin-v26-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/cabin-v26-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/cabin-v26-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/cabin-v26-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/cabin-v26-latin-regular.svg#Cabin') format('svg'); /* Legacy iOS */
}
/* cabin-700 - latin */
@font-face {
  font-family: 'Cabin';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/cabin-v26-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/cabin-v26-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/cabin-v26-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/cabin-v26-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/cabin-v26-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/cabin-v26-latin-700.svg#Cabin') format('svg'); /* Legacy iOS */
}
/* cabin-condensed-regular - latin */
@font-face {
  font-family: 'Cabin Condensed';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/cabin-condensed-v19-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/cabin-condensed-v19-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/cabin-condensed-v19-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/cabin-condensed-v19-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/cabin-condensed-v19-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/cabin-condensed-v19-latin-regular.svg#CabinCondensed') format('svg'); /* Legacy iOS */
}
/* roboto-condensed-700 - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/roboto-condensed-v25-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-condensed-v25-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-condensed-v25-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-condensed-v25-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-condensed-v25-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-condensed-v25-latin-700.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}
@font-face {
  font-family: 'fontello';
  src: url('../fonts/fontello.eot?47967368');
  src: url('../fonts/fontello.eot?47967368#iefix') format('embedded-opentype'),
       url('../fonts/fontello.woff2?47967368') format('woff2'),
       url('../fonts/fontello.woff?47967368') format('woff'),
       url('../fonts/fontello.ttf?47967368') format('truetype'),
       url('../fonts/fontello.svg?47967368#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}
:root {
	--graphite: #4b4e53;
	--green: #007700;
	--red: #cc0000;
}
span.green {
	color: var(--green);
}
span.red {
	color: var(--red);
}
span.beratung {
	font-family: 'Cabin Condensed', sans-serif;
	font-weight: 400;
	color: var(--red);
}
span.luna_kater {
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 700;
	color: var(--green);
}
span.zitat {
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 700;	
}
/* Klassen für Animationen */
.hidden {
	opacity: 0;
}
/*#logo {
	opacity: 0;
}*/
.loaded {
	opacity: 1;
}
.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}
.delay-05s {
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;	
}
/* Fade In */
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}
/* Fade In Down */
@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}
/* Fade In Up */
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 20%, 0);
    transform: translate3d(0, 20%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 20%, 0);
    transform: translate3d(0, 20%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

/**************************************/
.clearfix { zoom:1; }
.clearfix:before, .clearfix:after {
	content:"\0020";
	display:block;
	height:0;
	overflow:hidden;
}
.clearfix:after { clear:both; }
* {
	box-sizing: border-box;
}
.preload * {
	transition: none !important;
}
html {
	height: 100vh !important;
	min-height: 100%;
	overflow-y: scroll;
}
body {
	position: relative;
	font-family: 'Cabin', sans-serif;
	font-size: 100%;
	line-height: 1.6;
	color: var(--graphite);
	font-weight: 400;
	-webkit-background-size: cover;
}
span.not-mobile, .not-mobile {
	display: none;
}

/* Scroll To Top Scroll Funktion*/
div.totop {
	position: fixed;
	text-align: right;
	right: 0.25em;
	right: 1.6em;
	bottom: 3.5em;
	z-index: 10;
	opacity: 0;
	border-radius: 50%;
	background-color: #FFF;
	transition: all 0.5s ease-in-out;
}
div.totop::after {
	font-family: 'fontello';
	font-style: normal;
	font-weight: normal;
	font-size: 3em;
	speak: never;
	display: inline-block;
	text-decoration: inherit;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;	
	content: '\f139';
	color: var(--graphite);
	text-decoration: inherit;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
div.totop.scrolled {
	opacity: 0.6;
}
div.totop:hover.onTop {
	opacity: 0;
}
div.totop:hover {
	opacity: 1;
}
p, ul, ol ,dl, h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0 0 1em 0;
}
p, ul, ol ,dl {
	font-size: 1em;
}
ul {
	list-style-type: square;
	margin-left: 1em;
	padding-left: 1em;
	margin-left: 0.65em;
	padding-left: 0.65em;	
}
ul ul {
	list-style-type: disc;
}
ol {
	margin-left: 0.6rem;
	padding-left: 0.6rem;	
}
ul li, ol li {
	padding-bottom: 0.4em;
}
h1 {
	color: var(--graphite);
	font-size: 1em;
	font-weight: 400;
	line-height: 1.2;
	/*text-transform: uppercase;*/
}
h1, h2, h3, h4 {
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 700;
	line-height: 1.2;
	color: var(--graphite);
	text-shadow: 0px 0.03em 0.08em rgba(0,0,0,0.125);
}
#index h1, h2, #impressum h1, #datenschutz h1 {
	font-size: 1.5em;
	padding-bottom: 0.5em;
	margin-bottom: 0;
}
#datenschutz h2 {
	font-size: 1.25em;
	padding-bottom: 0.5em;
}
#datenschutz h2::before {
	content: '';
}
#index h1 {
	margin-top: 12em;
}
h3 {
	font-size: 1.25em;
	padding-bottom: 0.5em;
	text-shadow: none;
}
h4 {
	font-size: 1.1em;
	padding-bottom: 0.25em;
	text-shadow: none;
}
span.ad {
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 700;	
	font-size: 1.111111em;
	color: #357178;
}
/*#contact-data h4 {
	font-size: 1.5em;
	color: #FFF;
}*/

/* Links im Content */
a:link {
	color: #403a3b;
	text-decoration: underline;
}
a:visited {
	color: #403a3b;
	text-decoration: underline;	
}  
a:hover, a:focus {
	color: #403a3b;
	text-decoration: none;	
}  
a:active {
	color: #403a3b;
	text-decoration: underline;	
}

#head {
	position: relative;
	margin: 0 auto;
	width: 100&;
}
#navi {
	position: fixed;
	background-color: #FFF;
	background-color: #DFF8D5;
	background-color: #f0f0f0;
	background-color: #F2FCEE;
	top: 0;
	width: 100%;
	height: 5.5em;
	/*box-shadow: 0 6px 12px rgba(0,0,0,0.05), 0 6px 12px rgba(0,0,0,0.1);*/
	box-shadow: 0px 7px 20px -3px rgba(28,42,72,0.25);
	transition: top 0.5s ease-in-out;
	z-index: 3;
}
#navigation {
	box-shadow: 0 6px 12px rgba(0,0,0,0.05), 0 6px 12px rgba(0,0,0,0.1);
}
.nav-wrapper {
	position: relative;
	margin: 0 auto;
	width: 100%;
	transition: all 0.3s ease-in-out;
}

.menu-trigger {
	width: 100%;
	height: 5.5em;
}
#logo {
	float: left;
	padding-top: 0.6em;
	margin-top: 2em;
	padding-left: 0.5em;
	/*text-align: center;*/
	line-height: 1;
}
#logo a {
	text-decoration: none !important;
	font-family: 'Cabin Condensed', sans-serif;
	font-weight: 400;
	color: #e3bc8b;
	color: #56423d;
	color: var(--red);
	font-size: 1.8em;
	font-size: 1em;
	/*text-align: right !important;*/
	/*padding: 0.25em 0 0.25em 2em;*/
	padding: 2.0em 0 1.5em 4em;
	/*margin-left: 2em;*/
	/*line-height: 1;*/
	background: transparent url(../img/logo.png) left bottom no-repeat;
	background-size: contain;
}
span.ernaehrungsberatung {
	font-family: 'Cabin Condensed', sans-serif;
	font-weight: 400;
	color: #e3bc8b;
	color: var(--red);
}
span.bigger {
	font-size: 150%;
}
#logo a span, span.supervision {	
	font-family: 'Roboto Condensed', sans-serif;	
	color: #357178;
	color: var(--green);
	font-weight: 700;
	padding-left: 4em;
}
/* Hamburger */
#hamburger {
	/*float: right;*/
	/*width: auto;*/
	/*text-align: right !important;*/
/*	position: relative;
	font-size: 40px;
	font-weight: 700;
	line-height: 2.2;*/
/*	padding: 0;
	margin: 0;
	padding-right: 0.5em;*/
	/*cursor: pointer;*/
	/*color: #357178;*/
	/*display: block;*/
	/*border: 0;*/
	/*outline: 0;*/
}
#hamburger {
	/*padding: 1.25em 0.5em 0 0;*/
	float: right;
	color: var(--green);
	padding: 2em 1.5em 0 0;
	display: block;
	cursor: pointer;
	transition-property: opacity, filter;
	transition-duration: 0.15s;
	transition-timing-function: linear;
	font: inherit;
	color: inherit;
	text-transform: none;
	background-color: transparent;
	border: 0;
	margin: 0;
	outline: 0;
	overflow: visible;
}
#hamburger:hover {
	opacity: 0.7;
}
.hamburger-box {
	width: 30px;
	height: 24px;
	display: inline-block;
	position: relative;
}
.hamburger-inner {
	display: block;
	top: 50%;
	margin-top: -2px;
}
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
	width: 30px;
	height: 4px;
	width: 40px;
	height: 5px;
	background-color: var(--green);
	border-radius: 4px;
	position: absolute;
	transition-property: transform;
	transition-duration: 0.15s;
	transition-timing-function: ease;
}
.hamburger-inner::before, .hamburger-inner::after {
	content: "";
	display: block;
}
.hamburger-inner::before {
	top: -10px;
	top: -12px;
}
.hamburger-inner::after {
	bottom: -10px;
	bottom: -12px;
}
.hamburger--spin .hamburger-inner {
	transition-duration: 0.22s;
	transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--spin .hamburger-inner::before {
	transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in;
}
.hamburger--spin .hamburger-inner::after {
	transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--spin.is-active .hamburger-inner {
	transform: rotate(225deg);
	transition-delay: 0.12s;
	transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
 }
.hamburger--spin.is-active .hamburger-inner::before {
	top: 0;
	opacity: 0;
	transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out;
}
.hamburger--spin.is-active .hamburger-inner::after {
	bottom: 0;
	transform: rotate(-90deg);
	transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}

section {
	min-height: 100vh;
	width: 100%;
	padding: 0 0 5em 0;
	padding-top: 5.5em;
	margin: 0;
	background-color: #FFF;
}
section.gray {
	background-color: #DFF8D5;
	background-color: #F2FCEE;
/*	background-color: #f8f8f8;
	background-color: #f1f4f0;*/
}

section.last-section {
	min-height: calc(100vh - 7.75em);
}
#start {
	padding-top: 4em;
	margin-top: -4em;
	min-height: calc(100vh + 4em);
}

.wrapper, .wrapper-gallery {
	position: relative;
	margin: 0 auto;
	width: 90%;
	width: 100%;
	padding-left: 1em;
	padding-right: 1em;
	max-width: 1100px;
	padding-top: 1.5em;
}
.wrapper-gallery {
	max-width: 1200px;
	padding-top: 0;
}
#index #start .wrapper {
	padding-top: 1.5em;
	padding-top: 0;
}
#banner {
	position: relative;
	margin-top: 4em;
	margin-top: 5.5em;
	width: 100%;
	padding-bottom: 14em;
	/*padding-bottom: 30%;*/
	background: #FFF url(../img/header-photo-s-min.jpg) center center no-repeat;
	background-size: cover;
	filter: grayscale(100%);
	transition: filter 6s ease;
	z-index: 2;
}
#banner.color {
	filter: grayscale(0%);
}
#slogan {
	position: absolute;
	display: block;
	margin: 0 auto;
	top: 0;
	top: 8em;
	right: 0;
	left: 0;
/*	width: 22em;
	height: 22em;*/
	width: 100%;
	height: auto;
	height: 22em;
	/*max-width: 25em;*/
	background-color: transparent;
	background-color: rgba(255,255,255,0.5);
	
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1e5799+0,2989d8+41,f2fcee+70,f2fcee+100&0+0,0+41,1+70,1+100 */
background: -moz-linear-gradient(top,  rgba(30,87,153,0) 0%, rgba(41,137,216,0) 41%, rgba(242,252,238,1) 70%, rgba(242,252,238,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(30,87,153,0) 0%,rgba(41,137,216,0) 41%,rgba(242,252,238,1) 70%,rgba(242,252,238,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(30,87,153,0) 0%,rgba(41,137,216,0) 41%,rgba(242,252,238,1) 70%,rgba(242,252,238,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001e5799', endColorstr='#f2fcee',GradientType=0 ); /* IE6-9 */

	
	/*border-radius: 2em;*/
	/*margin-top: 3em;*/
	padding: 2em;
	padding-top: 0.25em;
	padding-bottom: 2em;
	text-align: center;
}
#slogan figure {
	display: inline-block;
	width: 100%;
	/*max-width: 22em;*/
	margin: 0;
	padding: 0;
}
#slogan figure img {
	border-radius: 50%;
	border: 3px solid #FFF;
	width: 70%;
	max-width: 18em;
	height: auto;
}
#slogan figure figcaption {
	font-family: "Cabin Condensed", sans-serif;
	color: #666;
	color: var(--graphite);
	line-height: 1.4;
}
#slogan p {
	font-weight: 400;
	color: #FFF;
	font-size: 1.125em;
	color: #357178;
	line-height: 1.2;
	padding-top: 0.2em;
}

/* Navigation */
.nav-list {
	clear: both;
	display: none;
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--green);
}
/* Mobile fixed Navigation scrollbar machen */
.nav-list {
	max-height: calc(100vh - 4em);
	overflow-y: scroll;
	scrollbar-visibility: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.nav-list::-webkit-scrollbar {
	display: none;
}
.nav-list li {
	display: block;
	margin: 0;
	padding: 0;
}
.nav-list a {
	background-color: #DFF8D5;
	color: var(--green);
	display: block;
	font-family: 'Cabin', sans-serif;
	font-size: 1.2em;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	font-smoothing: antialiased;
	line-height: 20px;
	overflow: visible;
	padding: 0.75em 0 0.75em 2em;
	margin: 0;
	border-bottom: 1px solid var(--green);
	text-decoration: none;
	transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}
.nav-list a.active {
	background-color: var(--red);
	color: #FFF;
}
.nav-list a:hover, .nav-list a:focus {
	background-color: var(--red);
	color: #FFF;
}
/* End Navigation */

#foot, #footer {
	position: relative;
	width: 100%;
	background-color: #FFF;
}
#footer {
	min-height: 10vh;
}

#copyright {
	background-color: var(--red);
	padding: 3em 1em;
}
#copyright p {
	/*font-family: 'Roboto Condensed', sans-serif;*/
	text-align: center;
	color: #FFF;
	/*font-weight: 700;*/
	font-size: 1em;
	padding: 0;
}

#datenschutz {
	overflow-wrap: break-word;
}

/* Mobile Links Phone, Mail, Mobile and Location */
/*p.phone, p.mail, p.mobile, p.maps {
	padding-bottom: 0;
}
p.mail, p.maps {
	padding-bottom: 1em;
}
p.phone a, p.mail a, p.mobile a, p.maps a {
	position: relative;
	display: inline-block;
	background-color: transparent;
	color: #00305e;
	margin: 0;
	padding: 0.1em 0 0.1em 1.75em;
	background-position: 0px 50%;
	box-shadow: none;
}
p.phone a::before, p.mail a::before, p.mobile a::before, p.maps a::before {
	font-family: 'fontello';
	font-style: normal;
	font-weight: normal;
	font-size: 150%;
	speak: never;
	display: inline-block;
	text-decoration: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;	
	content: '\e800';
	position: absolute;
	top: 50%;
	left: 0;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);	
}
p.mail a::before {
	content: '\f0e0';
	font-size: 120%;
}
p.mobile a::before {
	content: '\e805';
	left: 0.1em;
}
p.maps a::before {
	content: '\e802';
	left: 0.15em;
}*/
/* External Links */
a[rel="noopener"]:after, a[rel="noopener nofollow"]:after, span.ext_link:after {
	font-family: 'fontello';
	font-style: normal;
	font-weight: normal;
	font-size: 90%;
	speak: never;
	display: inline-block;
	text-decoration: inherit;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;	
	content: '\f08e';
	margin-left: 0.5em;
	text-decoration: none;
}

/* Fixed Contact Icons */
/*#contact-data {
	position: fixed;
	width: 17em;
	right: -17.5em;
	top: calc(50% - 100px);	
	transition: all 0.5s ease;
}
#contact-button {
	position: absolute;
	top: 0px;
	margin-left: -3.4em;
	margin-bottom: -44px;
	width: 100px;
	background-color: #357178;
	border-radius: 27px;
	height: 54px;
	line-height: 54px;	
	overflow: hidden;
	opacity: 0.6;
	transition: all 1s ease-in-out;
}
#contact-button::before {
	color: #FFF;
	font-family: 'fontello';
	font-style: normal;
	font-weight: normal;
	font-size: 190%;
	speak: never;
	display: inline-block;
	text-decoration: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;	
	content: '\e800';
	position: absolute;
	top: 53%;
	left: 0.4em;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);		
}
.contacts {
	position: relative;
	color: #FFF;
	padding: 1em 1em 0 1em;
	border-bottom-left-radius: 27px;
	border-top-left-radius: 27px;	
	transition: all 0.5s ease-in-out;
	z-index: 2;
	background-color: #357178;
	box-shadow: 0 3px 6px rgba(0,0,0,0.15), 0 3px 6px rgba(0,0,0,0.3);
}
.contacts a {
	color: #FFF;
}
.contacts a:link {
	color: #FFF;
	text-decoration: underline;
}
.contacts a:visited {
	color: #FFF;
	text-decoration: underline;
}
.contacts a:hover, .contacts a:focus {
	color: #FFF;
	text-decoration: none;
}
.contacts a:active {
	color: #FFF;
	text-decoration: underline;
}
#close-contacts {
	position: fixed;
	top: calc(50% - 95px);
	right: 0.25em;
	margin-right: -5em;
	padding: 0;
	font-size: 3em;
	line-height: 1;
	cursor: pointer;
	transition: all 0.5s ease-in-out;
}
#close-contacts::before {
	font-family: 'fontello';
	font-style: normal;
	font-weight: normal;
	font-size: 100%;
	color: #FFF;
	speak: never;
	display: inline-block;
	text-decoration: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;	
	content: '\e804';
	position: absolute;
	top: 50%;
	right: 0;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);	
}
#contact-data:hover {
	right: 0;
}
#contact-data:hover > #contact-button {
	margin-left: 1em;
}
#contact-data:hover + #close-contacts {
	margin-right: 0;
}*/

#portrait_img {
	position: relative;
	width: 100%;
	margin: 1em 0;	
}
#portrait_img img {
	width: 100%;
	max-width: 400px;
	height: auto;
	margin-bottom: 1em;
}

/* The Overlay (background) */
.overlay {  
    height: 0%;
    width: 100%;
    position: fixed;
    z-index: 20;
    left: 0;
    top: 0;
	background-color: rgba(4,26,40,0.98);
	background-color: rgba(204,0,0,1);
	background-color: rgba(0,119,0,1);
	background-color: #FCE6E5;
	
/*background: rgb(204,0,0);
background: linear-gradient(135deg, rgba(204,0,0,1) 0%, rgba(193,29,0,1) 40%, rgba(45,104,0,1) 60%, rgba(0,119,0,1) 100%);
background-image: linear-gradient(to right bottom, #cc0000, #a94800, #806100, #516f00, #007700);*/
	
	/*background-color: rgba(86,66,61,1);*/
	background-size: auto;
    overflow-x: hidden;
	overflow-y: hidden;
    transition: 0.5s;
}
.overlay::before {
	content: "";
	background: #FCE6E5 url(../img/logo.png) center center no-repeat;
	background-size: contain;
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	opacity: 0.1;	
}
/* content inside the overlay */
.overlay-content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	text-align: center;
	width: 100%;
	margin-top: 0;
}
/* The navigation links inside the overlay */
.overlay p a {
    text-decoration: none;
    color: #FFF;
	color: var(--graphite);
    display: inline-block;
    transition: 0.3s;
}
.overlay p {
	color: var(--graphite);
	font-size: 5vmin;
	/*font-size: 4vmin;*/
	padding-top: 0.75em;
}
.overlay h3 {
	padding-top: 0.5em;
	padding-bottom: 1em;
}
/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
	color: var(--red);
}
.overlay-content h3 {
	font-size: 7.5vmin;
	font-size: 6vmin;
	color: #FFF;
	color: var(--graphite);
	font-weight: 700;
}
.overlay-content h4 {
	font-family: 'Cabin', sans-serif;
	font-weight: 400;
	font-family: 'Cabin Condensed', sans-serif;
	font-weight: 400;	
	font-size: 5vmin;
	font-size: 5.5vmin;
}
/*.overlay-content h3 span.blue {
	color: #0454CC;
}
.overlay-content h3 span.red {
	color: #cc0000;
}*/
.overlay-content p {
	font-weight: 400;
	color: var(--graphite);
	line-height: 1.6;
	padding-bottom: 0.5em;
}
.overlay a span.fon, .overlay a span.email, .overlay a span.location, .overlay span.fax, .overlay span.clock {
	padding: 0 0 0 1.5em;
	position: relative;
	display: inline-block;
}
.overlay a span.fon::before, .overlay a span.email::before, .overlay a span.location::before, .overlay span.fax::before, .overlay span.clock::before {
	font-family: 'fontello';
	font-style: normal;
	font-weight: normal;
	font-size: 135%;
	speak: never;
	display: inline-block;
	text-decoration: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;	
	content: '\e800';
	position: absolute;
	top: 50%;
	left: 0;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);	
}
.overlay a span.email::before {
	content: '\f0e0';
	font-size: 110%;
}
.overlay a span.location::before {
	content: '\e802';
	left: 0.125em;
}
.overlay span.fax::before {
	content: '\e806';
}
.overlay span.clock::before {
	content: '\e801';
}

/*.overlay-content a span.fon {
	padding: 0 0 0 1.5em;
	background: url(../img/phone-white.png) left center no-repeat;
	background-size: contain;
	cursor: pointer;
}
.overlay-content a span.email {
	padding: 0 0 0 1.5em;
	background: url(../img/mail-white.png) left center no-repeat;
	background-size: contain;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	max-width: 90%;
	text-overflow: ellipsis;
}
.overlay-content a span.location {
	padding: 0 0 0 1.5em;
	background: url(../img/location-white.png) left center no-repeat;
	background-size: contain;
	cursor: pointer;	
}*/
/* Position the close button (top right corner) */
.overlay .closebtn {
    position: absolute;
	top: 0px;
	right: 3.5vmin;
	font-size: 20vmin;
	font-weight: 100;
	line-height: 0.7;
	color: var(--red);
	color: var(--graphite);
	cursor: pointer;
	z-index: 301;
}
.overlay .closebtn:hover {
	color: #FFF;
	color: var(--red);
}

.photo img {
	width: 100%;
	height: auto;
}
/* External Links */
/*a.white_link[rel="noopener"]:after, a[rel="noopener"]:after, a[rel="noopener nofollow"]:after, span.ext_link {
	content: "\00a0\00a0\00a0\00a0\00a0";
	background-image: url(../img/external-link-dark.png);
	background-position: center right;
	background-repeat: no-repeat;
	background-size: contain;
	display: inline-block;
}
a.white_link[rel="noopener"]:after, .overlay-content a[rel="noopener"]:after, .overlay-content a[rel="noopener nofollow"]:after {
	background-image: url(../img/external-link-white.png);
}*/

/* Praxis Galerie */
.praxis-bilder {
	width: 100%;
	margin: 0;
	pading: 0;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;	
	justify-content: center;
	/*justify-content: space-evenly;*/
}
.praxis-bild {
	margin: 1.5em 0;
	padding: 0;
	
	margin: 0;
	padding: 1.5em;
	padding: 1.5em;
	padding: 1em;
	width: 300px;
	/*height: 300px;*/
	
	width: 380px;
	height: auto;
	text-align: center;
}
.praxis-bild figure {
	line-height: 0;
	margin: 0;
	padding: 0;
	box-shadow: 0px 7px 20px -3px rgba(28,42,72,0.25);
	/*border: 1px solid #FFF;*/
	/*border-radius: 5px;*/
	overflow: hidden;
}
.praxis-bild figure img {
	width: 100%;
	height: auto;
	/*border-radius: 5px;*/
	transition: all 1s cubic-bezier(.25,.8,.25,1);
}
.praxis-bild figure img:hover {
	-webkit-transform: scale(1.10);
	transform: scale(1.15);
	cursor: zoom-in;
}
/* Text-Links im Main Content */
a.text-link {
	text-decoration: none;
	color: var(--graphite);
	padding: 0 0.125em;
	transition: all 0.5s cubic-bezier(.25,.8,.25,1);
}
a.text-link.nopadding {
	padding: 0;
}
a.text-link:link {
	border-bottom: 2px solid var(--graphite);
}
a.text-link:visited {
	border-bottom: 2px solid var(--graphite);
}
a.text-link:hover, a.text-link:focus {
	border-bottom: 2px solid transparent;
}
a.text-link:active {
	border-bottom: 2px solid var(--graphite);
}
/* PDF Download */
.downloads li {
	list-style-type: none;
}
.downloads {
	padding-left: 0.15em;
	margin-left: 0.15em;
}
span.download {
	display: inline-block;
	padding: 0.25em 0 0.25em 2.0em;
	position: relative;
	transition: all 0.3s ease-in-out;
}
span.download::before {
	font-family: 'fontello';
	font-style: normal;
	font-weight: normal;
	font-size: 175%;
	speak: never;
	display: inline-block;
	text-decoration: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;	
	content: '\f1c1';
	position: absolute;
	top: 50%;
	left: 0;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);	
}
/* Route Button, Link Button */
p.route_button, p.link_button {
	margin: 0.5em 0;
	display: block;
}
.route_button a, .link_button a {
	display: inline-block;
	position: relative;
	padding: 1rem 1rem 1rem 2.5rem;
	color: #FFF !important;
	font-size: 1rem;
	text-decoration: none;
	background-color: var(--green);
	transition: all ease 0.3s;	
}
.link_button a {
	padding: 1rem;
}
.route_button a::before/*, .link_button a::before*/ {
	font-family: 'fontello';
	font-style: normal;
	font-weight: normal;
	speak: never;
	display: inline-block;
	text-decoration: inherit;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;	
	text-decoration: none;	
	content: '\e802';
	font-size: 200%;
	line-height: 1.5;
	color: #FFF;
	position: absolute;
	top: 50%;
	left: 0.8rem;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	transition: all ease 0.3s;
}
.route_button a:hover, .link_button a:hover {	
	background-color: var(--red);
	text-decoration: none;
}

@media only screen and (min-width: 23em) {
/*	#index h2 {
		margin-top: 14em;
	}*/	
}

@media only screen and (min-width: 25em) {
	#logo {
		padding-left: 1em;
	}
	#slogan {
		height: 23em;
	}
	#index h1 {
		margin-top: 13em;
	}
	#hamburger {
		padding-right: 1em;
	}
}
@media only screen and (min-width: 30em) {
	#slogan {
		height: 25em;
	}	
	#index h1 {
		margin-top: 14em;
	}		
	.wrapper {
		padding-left: 2em;
		padding-right: 2em;
	}
/*	#navi, .menu-trigger {
		height: 6em;
	}	
	#logo {
		padding-top: 1em;
		padding-left: 2em;
	}*/
	#logo a {
		font-size: 2em;
		font-size: 1em;
	}
	#slogan {
		/*max-width: 22em;*/
/*		padding-top: 5.5em;
		max-width: 65vw;
		padding-left: 2em;*/
	}	

/*	#start h1 {
		font-size: 1.8em;
	}*/
	#slogan p {
		font-size: 1.2em;
	}
	#hamburger {
		padding-top: 1.8em;
		padding-right: 2em;
	}
	section {
		padding-top: 6em;
		padding-top: 5.5em;
	}	
}

@media only screen and (min-width: 40em) {
	.praxis-bild {
		width: 320px;
	}	
/*	#index .wrapper {
		padding-top: 4em;
	}	
	#banner {
		background: #FFF url(../img/header-photo-s-min.jpg) center center no-repeat;
		background-size: cover;
	}*/	
	#slogan {
		/*padding-top: 8em;*/
	}	
	
/*	#portrait_img {
		float: right;
		width: 40%;
		margin: -2.5em 0 0 0;
	}
	#portrait_img img {
		max-width: none;
	}*/	
}

@media only screen and (min-width: 50em) {
	#banner {
		background: #FFF url(../img/header-photo-s-min.jpg) center center no-repeat;
		background-size: cover;
		background-size: auto 100%;
		padding-bottom: 20em;
	}	
	#portrait_img {
		float: right;
		width: 50%;
		line-height: 0;
		margin: 0;
	}
	#portrait_img img {
		max-width: none;
	}	
	section.portrait {
		padding-bottom: 0;
	}
	#slogan {
		height: 24em;
	}	
	#index h1 {
		margin-top: 10em;
	}	
}

@media only screen and (min-width: 55em) {
	.praxis-bild {
		width: 380px;
	}
}
	
@media only screen and (min-width: 61.25em) {
	html {
		font-size: 100%;		
	}
	.wrapper {
		padding-left: 0;
		padding-right: 0;
	}	
	#banner {
		max-width: 1920px;
		margin-left: auto;
		margin-right: auto;
		margin-top: 8em;		
		background: #FFF url(../img/header-photo-min.jpg) top center no-repeat;
		background-size: cover;
		background-size: auto 100%;
		padding-bottom: 22em;
	}	
	#portrait_img {
		margin-top: -2em;
	}	
	#portrait_img img {
		margin-bottom: 0;
	}	
	
	.only-mobile {
		display: none !important;
	}
	span.not-mobile, .not-mobile {
		display: inline-block;
	}
	
/*	#index h1 {
		margin-top: 0;
		margin-bottom: 0;
		padding: 0 0 1em 0;
		background-color: transparent;
		color: var(--graphite);
	}*/	
	#index h1, h2 ,#impressum h1, #datenschutz h1 {
		font-size: 2.0em;
	}	
	#index h1 {
		margin-top: 1em;
	}
	
	a[href^="tel"]:link,
	a[href^="tel"]:visited,
	a[href^="tel"]:hover {
	text-decoration: none;
	cursor: default;
	}
	
	.nav-wrapper {
		position: relative;
		margin: 0 auto;
		width: 90%;
		max-width: 1600px;
	}	
	#navigation {
		box-shadow: none;
	}
	#logo {
		padding-top: 1.65em;
		padding-left: 0;
	}	
	#logo a {
		font-size: 3em;
		font-size: 1.5em;
	}
	#navi {
		height: 8em;
	}
	.wrapper {
		width: 80%;
	}	
	section {
		padding-top: 10em;
		padding-top: 8em;
	}	
	#start {
		padding-top: 6em;
		margin-top: -6em;
		min-height: calc(100vh + 6em);
	}		
	.menu-trigger {
		height: 0;
	}
	.nav-list {
		clear: none;
		display: block;
		float: none;
		margin: 0;
		text-align: center;
		width: 100%;
		height: 6em;
		padding: 0;
		padding-top: 3em;
		border: none;
		text-align: right;
	}
	/* Reset scrollbare mobile Navigation */
	.nav-list {
		max-height: none;
		overflow-y: visible;
		scrollbar-visibility: visible;
		scrollbar-width: auto;
		-ms-overflow-style: auto;		
	}
	.nav-list::-webkit-scrollbar {
		display: block;
	}	
	.nav-list li {
	  display: inline-block;
	}
	
	.nav-list a, .nav-list .contact {
		position: relative;
		background-color: transparent;
/*		color: #0454CC;
		color: #357178;*/
		display: block;
		margin: 0;
		font-size: 1.0em;
		font-weight: 400;
		padding: 0.2em 0;
		margin: 0 0.5em;
		border-bottom: none;
		text-decoration: none;
	}
	.nav-list a:hover, .nav-list a:focus, .nav-list a.active {
		background-color: transparent;
		color: #0454CC;
		color: var(--green);
	}
	
	/* Hover Effekt der Navigation bei Mouse-Over */
	.nav-list li a::before {
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		height: 1px;
		background-color: var(--red);
		background-color: transparent;
		content: '';
		opacity: 0;
/*		-webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s;
		-moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s;
		transition: height 0.3s, opacity 0.3s, transform 0.3s;
		-webkit-transform: translateY(-10px);
		-moz-transform: translateY(-10px);
		transform: translateY(-10px);*/
		-webkit-transform: scaleX(0);
		transform: scaleX(0);
		transition: all 0.3s ease-in-out 0s;		
	}	
	.nav-list li a:hover::before, .nav-list li a:focus::before, .nav-list li a.active::before {
		height: 2px;
		opacity: 1;
		background-color: var(--red);
/*		-webkit-transform: translateY(0px);
		-moz-transform: translateY(0px);
		transform: translateY(0px);*/
		-webkit-transform: scaleX(1);
		-ms-transform: scaleX(1);
		transform: scaleX(1);		
	}	
	
	#banner {
/*		margin-top: 8em;
		padding-bottom: 25em;*/
	}
	#slogan {
		position: absolute;
		display: block;
		top: 0;
		right: 0;
		left: auto;
		width: 22em;
		height: 22em;
		background: rgba(255,255,255,0.85);	
		/*border-radius: 2em;*/
		border-bottom-left-radius: 2em;
		border-bottom-right-radius: 2em;
		margin-top: 0em;
		padding: 1em;
		padding-top: 0.25em;
		text-align: center;
		box-shadow: 0px 7px 20px -3px rgba(28,42,72,0.125);
	}
	#slogan figure {
		display: inline-block;
		width: 100%;
		margin: 0;
		margin-top: 1em;
	}
	#slogan figure img {
		border-radius: 50%;
		width: 70%;
		height: auto;
		border-color: transparent;
	}
	#slogan figure figcaption {
		font-family: "Cabin Condensed", sans-serif;
		color: #666;
		color: var(--graphite);
		line-height: 1.4;
	}

/*	#start h1 {
		font-family: 'Roboto Condensed', sans-serif;
		font-weight: 700;
		font-size: 3em;
		color: #FFF;
	}*/
	#slogan p {
		font-weight: 400;
		font-size: 1.75em;
	}	
	
	#hamburger {
		/*display: none !important;*/
		display: none;
	}
	
	/* Links im Footer */
	#copyright a:link {
		color: #FFF;
		text-decoration: underline;
	}
	#copyright a:visited {
		color: #FFF;
		text-decoration: underline;	
	}  
	#copyright a:hover, #copyright a:focus {
		color: #FFF;
		text-decoration: none;	
	}  
	#copyright a:active {
		color: #FFF;
		text-decoration: underline;	
	}

	#contact-button {
		opacity: 1;
	}	
	
	/* Kontaktdaten */
	.overlay p {
		font-size: 4vmin;
	}	
}

@media only screen and (min-width: 80em) {
	html {
		font-size: 112.5%;		
	}	
/*	#contact-data {
		font-size: 0.888888em !important;
	}*/	
	#index h1 {
		margin-top: 0;
	}	
	.nav-wrapper {
		width: 80%;
	}	
	.wrapper {
		width: 70%;
	}	
	#banner {
		background: #FFF url(../img/header-photo-min.jpg) top center no-repeat;
		background-size: cover;
		background-size: auto 100%;
		padding-bottom: 25em;
	}	
/*	#start h1 {
		font-size: 3em;
		font-size: 2.666667em;
	}*/
	#slogan p {
		font-size: 1.75em;
		font-size: 1.555554em;
	}		
}
@media only screen and (min-width: 100em) {
	#banner {
		background: #FFF url(../img/header-photo-min.jpg) top center no-repeat;
		background-size: cover;
		background-size: auto 100%;
		padding-bottom: 28em;
	}	
}
@media only screen and (min-width: 120em) {
	#banner {
		padding-bottom: 32em;
	}  
/*	#slogan {
		padding-top: 12em;
	}*/	

/*	#start h1 {
		font-size: 4em;
		font-size: 3.777776em;
		line-height: 1.2;
	}*/
	#slogan p {
		font-size: 2em;		
	}	
}

@media only print {
	html {
		height: auto !important;
	}	
	.only-mobile {
		display: none !important;
	}
	span.not-mobile, .not-mobile {
		display: inline-block;
	}	
	section {
		background-color: #FFF;
	}	
	section.gray {
		background-color: #FFF;
	}
	/*#contact-data, */div.totop {
		display: none;
	}	
	#head {
		position: relative;
		min-height: 0;
	}	
	#banner {
		display: none;
		margin: 0 auto;
		width: 90%;
		max-width: 1100px;
	}	
	#start {
		padding-top: 6em;
		margin-top: 0;
	}	
	#hamburger {
		display: none !important;
	}	
	.menu-trigger {
		/*background-color: transparent;*/
	}	
	.wrapper, .nav-wrapper {
		padding-top: 1rem;
		padding-left: 2rem;
	}	
	#logo {
		width: 100%;
		padding-left: 2rem;
		margin-bottom: 5rem;
	}
	section {
		min-height: 0;
		margin-bottom: 5em;
	}	
	section, #foot, ol, ul {
		page-break-inside: avoid;
	}
	section.last-section {
		min-height: 0;
	}
	#cover-img {
		display: none;
	}
	#start {
		min-height: 90vh;
	}
	#navi, #navi.scrolled, #impressum #navi, #datenschutz #navi {
		box-shadow: none;
		position: static;
		height: 0;
		margin: 0;
		padding: 0;
	}	
	#navigation, #hamburger {
		display: none;
	}
	#logo {
		padding-left: 0;
	}
	#logo a {
		font-size: 3em;
		font-size: 1.5em;
	}	
	.wow {
		animation-name: none !important;
		visibility: visible !important;
	}	
	#foot, #footer {
		margin: 0 auto;
		width: 80%;
		max-width: 1100px;		
	}	
	#copyright {
		background-color: transparent;
		color: #369 !important;
		border-top: none;
		outline: none;
	}	
	#copyright p, #copyright a {
		font-size: 1em;
		text-align: left;
		color: #403a3b !important;
	}	
	
}