@charset "utf-8";
/* CSS Document */
/* Guttau Supervision */
/* Copyright 2022 Hoppe Websolutions */
/* open-sans-300 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/open-sans-v27-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open-sans-v27-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v27-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v27-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v27-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v27-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v27-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open-sans-v27-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v27-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v27-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v27-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v27-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-700 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/open-sans-v27-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open-sans-v27-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v27-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v27-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v27-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v27-latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-condensed-300 - latin */
@font-face {
  font-family: 'Open Sans Condensed';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/open-sans-condensed-v15-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open-sans-condensed-v15-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-condensed-v15-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-condensed-v15-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-condensed-v15-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-condensed-v15-latin-300.svg#OpenSansCondensed') format('svg'); /* Legacy iOS */
}
/* open-sans-condensed-700 - latin */
@font-face {
  font-family: 'Open Sans Condensed';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/open-sans-condensed-v15-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open-sans-condensed-v15-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-condensed-v15-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-condensed-v15-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-condensed-v15-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-condensed-v15-latin-700.svg#OpenSansCondensed') 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;
}

/* 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;	
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
.fadeIn {
  animation-name: fadeIn;
}
@-webkit-keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

.flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}
/**************************************/
.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: 'Open Sans', sans-serif;
	font-size: 100%;
	line-height: 1.6;
	color: #373737;
	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: #e3bc8b;
	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, h2, h3, h4 {
	font-family: 'Open Sans Condensed', sans-serif;
	font-weight: 700;
	line-height: 1.2;
	color: #357178;
}
h2, #impressum h1, #datenschutz h1 {
	font-size: 1.75em;
	padding-bottom: 0.5em;
	margin-bottom: 0;
}
#datenschutz h2 {
	font-size: 1.25em;
	padding-bottom: 0.5em;
}
#datenschutz h2::before {
	content: '';
}
h3 {
	font-size: 1.25em;
	padding-bottom: 0.5em;
}
h4 {
	font-size: 1.1em;
	padding-bottom: 0.25em;
}
span.ad {
	font-family: 'Open Sans 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;
	top: 0;
	width: 100%;
	height: 4em;
	box-shadow: 0 6px 12px rgba(0,0,0,0.05), 0 6px 12px rgba(0,0,0,0.1);
	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 {
	width: 100%;
	transition: all 0.3s ease-in-out;
}

.menu-trigger {
	width: 100%;
	height: 4em;
}
#logo {
	float: left;
	padding-top: 0.6em;
	padding-left: 0.5em;
}
#logo a {
	text-decoration: none !important;
	font-family: 'Open Sans Condensed', sans-serif;
	font-weight: 700;
	color: #e3bc8b;
	font-size: 1.8em;
	padding: 0.25em 0 0.25em 2em;
	background: transparent url(../img/logo.png) left center no-repeat;
	background-size: contain;
}
span.guttau {
	font-family: 'Open Sans Condensed', sans-serif;
	font-weight: 700;
	color: #e3bc8b;
}
span.bigger {
	font-size: 150%;
}
#logo a span, span.supervision {
	font-family: 'Open Sans Condensed', sans-serif;	
	color: #357178;
	font-weight: 300;
}
/* Hamburger */
#hamburger {
	float: right;
	width: auto;
	text-align: right !important;
	position: relative;
	font-size: 40px;
	font-weight: 300;
	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;
	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;
	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;
	background-color: #357178;
	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;
}
.hamburger-inner::after {
	bottom: -10px;
}
.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 1em 0;
	padding-top: 4em;
	margin: 0;
	background-color: #FFF;
}
section.gray {
	background-color: #f9f1e5;
}

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

.wrapper {
	position: relative;
	margin: 0 auto;
	width: 90%;
	width: 100%;
	padding-left: 1em;
	padding-right: 1em;
	max-width: 1100px;
	padding-top: 1.5em;
}
#index #start .wrapper {
	padding-top: 1.5em;
}
#banner {
	position: relative;
	margin-top: 4em;
	width: 100%;
	padding-bottom: 16em;
	background: #e3d0b8 url(../img/jasmin-guttau-s-min.jpg) center right -6.5em no-repeat;
	background-size: cover;
}
#slogan {
	position: absolute;
	padding-top: 3em;
	padding-top: 1.5em;
	padding-left: 1em;
	padding-left: 0.75em;
	max-width: 55vw;
}
/*#slogan h3 {*/
#start h1 {
	font-family: 'Open Sans Condensed', sans-serif;
	font-weight: 700;
	font-size: 1.5em;
	font-size: 1.25em;
	color: #FFF;
	line-height: 1.1;
	padding-bottom: 0.5em;
}
#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 #357178;
}
/* 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: #f9f1e5;
	color: #357178;
	display: block;
	font-family: 'Open Sans', 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 #357178;
	text-decoration: none;
	transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}
.nav-list a.active {
	background-color: #357178;
	color: #FFF;
}
.nav-list a:hover, .nav-list a:focus {
	background-color: #e3bc8b;
	color: #FFF;
}
/* End Navigation */

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

#copyright {
	background-color: #387178;
	padding: 3em 0;
}
#copyright p {
	font-family: 'Open Sans 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;
	width: 17.5em;
	right: -17.5em;
	right: -18em;
	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;
}

@media only screen and (min-width: 22em) {
	#slogan {
		padding-top: 3em;
		padding-left: 1em;
	}	
}

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

	#start h1 {
		font-size: 1.8em;
		font-size: 1.25em;
	}
	#slogan p {
		font-size: 1.2em;
	}
	#hamburger {
		padding-top: 1.8em;
		padding-right: 2em;
	}
	section {
		padding-top: 5em;
	}	
}

@media only screen and (min-width: 40em) {
	#index .wrapper {
		padding-top: 4em;
	}	
	#banner {
		background: #e3d0b8 url(../img/jasmin-guttau-s-min.jpg) center right -2em 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: #e3d0b8 url(../img/jasmin-guttau-s-min.jpg) center right no-repeat;
		background-size: cover;
		padding-bottom: 20em;
	}	
	#start h1 {
		font-size: 1.5em;
	}	
	#portrait_img {
		float: right;
		width: 50%;
		line-height: 0;
		margin: 0;
	}
	#portrait_img img {
		max-width: none;
	}	
	section.portrait {
		padding-bottom: 0;
	}
}
	
@media only screen and (min-width: 61.25em) {
	html {
		font-size: 100%;		
	}
	.wrapper {
		padding-left: 0;
		padding-right: 0;
	}	
	#banner {
		background: #e3d0b8 url(../img/jasmin-guttau-min.jpg) center right -10em no-repeat;
		background-size: cover;	
		max-width: 1920px;
		margin-left: auto;
		margin-right: auto;
	}	
	#portrait_img {
		margin-top: -2em;
	}	
	#portrait_img img {
		margin-bottom: 0;
	}	
	
	.only-mobile {
		display: none !important;
	}
	span.not-mobile, .not-mobile {
		display: inline-block;
	}
	
	h2 ,#impressum h1, #datenschutz h1 {
		font-size: 2.5em;
	}	
	
	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;
	}
	#navi {
		height: 8em;
	}
	.wrapper {
		width: 80%;
	}	
	section {
		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: #357178;
	}
	
	/* Hover Effekt der Navigation bei Mouse-Over */
	.nav-list li a::before {
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		height: 1px;
		background-color: #e3bc8b;
		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);
	}	
	.nav-list li a:hover::before, .nav-list li a:focus::before, .nav-list li a.active::before {
		height: 6px;
		opacity: 1;
		-webkit-transform: translateY(0px);
		-moz-transform: translateY(0px);
		transform: translateY(0px);
	}	
	
	#banner {
		margin-top: 6em;
		padding-bottom: 25em;
	}
	#slogan {
		padding-top: 12em;
		padding-left: 0em;
	}

	#start h1 {
		font-family: 'Open Sans Condensed', sans-serif;
		font-weight: 700;
		font-size: 3em;
		font-size: 2em;
		color: #FFF;
	}
	#slogan p {
		font-weight: 400;
		font-size: 1.75em;
	}	
	
	#hamburger {
		display: none !important;
	}
	
	/* 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;
	}	
}

@media only screen and (min-width: 80em) {
	html {
		font-size: 112.5%;		
	}	
	#contact-data {
		font-size: 0.888888em !important;
	}	
	.nav-wrapper {
		width: 80%;
	}	
	.wrapper {
		width: 70%;
	}	
	#banner {
		background: #e3d0b8 url(../img/jasmin-guttau-min.jpg) center right -5em no-repeat;
		background-size: cover;
	}	
	#start h1 {
		font-size: 3em;
		font-size: 20.666667em;
		font-size: 2.25em;
	}
	#slogan p {
		font-size: 1.75em;
		font-size: 1.555554em;
	}		
}
@media only screen and (min-width: 100em) {
	#banner {
		background: #e3d0b8 url(../img/jasmin-guttau-min.jpg) center right no-repeat;
		background-size: cover;
		padding-bottom: 30em;
	}	
}
@media only screen and (min-width: 120em) {
	#banner {
		padding-bottom: 30em;
	}  
	#slogan {
		padding-top: 12em;
	}	

	#start h1 {
		font-size: 4em;
		font-size: 3.777776em;
		font-size: 3.25em;
		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;
	}	
	.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;
	}	
	
}