<style type="text/css">
html{
	overflow: hidden;
	background-color: gray;
}
html, body{

	font-family: 'Playfair Display', serif;
	overflow-y: scroll;
	height: 100%;
	background-color: black;
}

/* playfair-display-regular - latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/playfair-display-v30-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('./fonts/playfair-display-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('./fonts/playfair-display-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('./fonts/playfair-display-v30-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('./fonts/playfair-display-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('./fonts/playfair-display-v30-latin-regular.svg#PlayfairDisplay') format('svg'); /* Legacy iOS */
}


@media screen and (min-width: 240px) and (max-width: 650px) {
html, body{

overflow: hidden;

height: 100%;
}

#logo{
width: 40%;
height: auto;
padding: 0;
display: inline-block;
background-color: transparent;

position: absolute;
margin-right: -20%;
right: 50%;
margin-bottom: 60%;

opacity: 1;

-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 2s;
}
#derYa{
margin-top: 42%;
text-align: center;
font-size: 50px;
font-family: 'Playfair Display', serif;




}
#derya{
width: 250px;

position: absolute;
margin-top: 0%;
margin-right: -125px;
right: 50%;
cursor:pointer;


color: white;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 2s;


}

.phone{
font-size: 20px;
font-family: 'Playfair Display', serif;

text-align: center;
margin-top: 10px;
display: none;
}

.nphone{
font-size: 20px;
font-family: 'Playfair Display', serif;


text-align: center;
margin-top: 10px;
display: none;
}
#sidebar {
position:absolute;
top:0px;
right:0px;
width:100%;
height:100%;
border-radius: 10px;
background:#1a1a1a;
opacity: 0.9;
text-align:center;
transform-origin:right;
transform:perspective(1200px) rotateY(90deg);
transition:all 400ms ease;
cursor:pointer;
}
#toggle-btn {
position:absolute;
right:10%;
top:10px;
transition:right 200ms linear 0ms,transform 300ms ease 100ms;
}

#navigation{
display: none;

}

#textHintergrund{
position: absolute;
width: 90%;
height: auto;
max-height: 60%;

opacity: 1;
background-color: transparent; /*#090909*/
border-radius: 10px;
padding: 15px;
margin-right: -45%;
right: 50%;
top: 32%;
display: none;
overflow: scroll;
z-index: 2;

-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 1.5s; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 1.5s;

}

}
@media screen and (min-width: 650px)  {
#logo{
width: 75%;
height: auto;
padding: 0;
display: inline-block;
background-color: transparent;
margin-top: 6%;
position: absolute;
margin-right: -35%;
right: 50%;


opacity: 0.8;

-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 2s;
}

.nphone{
font-size: 20px;
font-family: 'Playfair Display', serif;

text-align: center;
margin-top: 10px;
display: none;
}


#derYa{
margin-top: 80%;
text-align: center;
font-size: 50px;
font-family: 'Playfair Display', serif;
}


#derya{
width: 250px;
position: absolute;
margin-top: 0%;
margin-right: -125px;
right: 50%;
color: white;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 2s;


}
#sidebar {

display: none;
}
#toggle-btn {

display: none;
}


#navigation{
	position: fixed;
	left: auto;
	right: 0;
	margin-right: 0;
	margin-top: 100px;
	width: 200px;
	height: auto;
	z-index: 2;
}


::-webkit-scrollbar {
width: 0px;  /* remove scrollbar space */
background: transparent;  /* optional: just make scrollbar invisible */
}
/* optional: show position indicator in red */
::-webkit-scrollbar-thumb {
background: transparent;
}
#textHintergrund{
	position: absolute;
	width: 50%;
	font-family: 'Playfair Display', serif;
	height: 1400px;
	overflow: hidden;
	opacity: 1;
	background-color: transparent;
	border-radius: 10px;
	padding: 15px;
	margin-right: -25%;
	right: 50%;
	top: 41%;
	display: none;
	-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
	-webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
	animation-name: example;
	animation-duration: 2s;

}
#pPassion{
position: relative;
width: auto;
height: 75px;
margin-right: 15%;
margin-top: 10%;
margin-left: auto;
z-index: 3;
cursor: pointer;
}
#aAchtsamkeit{
position: relative;
width: auto;
height: 75px;
margin-right: 15%;
margin-top: 10%;
margin-left: auto;
z-index: 3;
cursor: pointer;
}
#dDynamik{
position: relative;
width: auto;
height: 75px;
margin-right: 15%;
margin-top: 10%;
margin-left: auto;
z-index: 3;
cursor: pointer;
}
#vVerbundenheit{
position: relative;
width: auto;
height: 75px;
margin-right: 15%;
margin-top: 10%;
margin-left: auto;
z-index: 3;
cursor: pointer;
}
#hHingabe{
position: relative;
width: auto;
height: 75px;
margin-right: 15%;
margin-top: 10%;
margin-left: auto;
z-index: 3;
cursor: pointer;
} 

#pPassion:hover .wort{

display:inherit;
text-align: center;




}
#aAchtsamkeit:hover .wort{

display:inherit;
text-align: center;
}
#dDynamik:hover .wort{

display:inherit;
text-align: center;
}
#vVerbundenheit:hover .wort{

display:inherit;
text-align: center;
}
#hHingabe:hover .wort{

display:inherit;
text-align: center;
}

}
.buchstabe{
font-family: 'Playfair Display', serif;

position: relative;
background-color: transparent;
text-align: center;
margin-top: 0;
margin-bottom: 0;
color: white;
z-index: 3;
font-size: 150%;
text-decoration-style: solid;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 2s;
}
.wort{
font-family: 'Playfair Display', serif;
position: relative;
background-color: transparent;
text-align: center;
margin-top: 10px;
margin-bottom: 0;
color: white;
z-index: 3;
font-size: 20px;
display: none;
}
#hintergrund {
width: 100% ;
height: 100% ;
position: absolute;

opacity: 1;

-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 1s;


}

* {
margin:0px;
padding:0px;
box-sizing:border-box;
font-family:"Bree Serif",sans-serif;
}


#lpassion:hover {color: white;}
#lachtsamkeit:hover {color: white;}
#ldynamik:hover {color: white;}
#lverbundenheit:hover {color: white;}
#lhingabe:hover {color: white;}

#sidebar ul li {
color:#ccc;
font-size:20px;
width:100%;
height:50px;
border-bottom:1px solid #222222;
line-height:50px;
}
#sidebar.active {
transform:perspective(1200px) rotateY(0deg);
}

#toggle-btn.active {
right:99%;
transform:rotate(360deg);
}
#toggle-btn span {
position:relative;
top:0px;
display:block;
background-color: white;
width:500%;
height:8px;
margin:5px ;
cursor:pointer;
transition:transform 300ms ease 200ms;
opacity: 1;

-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 1.5s; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 1.5s;
}
#toggle-btn.active span:nth-child(1) {
top:10px;
transform:rotate(45deg);
}
#toggle-btn.active span:nth-child(2) {
opacity:0;
}
#toggle-btn.active span:nth-child(3) {
top:-16px;
transform:rotate(-45deg);
}

#sbild{

border-style: inset;

height: 50%;
width: 50%;
margin-top: 10%;
}


.phone{
font-size: 20px;
font-family: 'Playfair Display', serif;

text-align: center;
margin-top: 10px;
display: none;
}

.nphone{
font-size: 20px;
font-family: 'Playfair Display', serif;

text-align: center;
margin-top: 10px;
display: none;
}

.text{
font-size: 18px;
color: white;
opacity: 1;
cursor:pointer;
text-shadow: 2px 1px 0px rgb(41, 41, 41);
margin-top: 50px;
}
#footer {
	position: fixed;
	width: 100%;
	height: 40px;
	bottom: 0px;
	padding: 5px;
	/* cursor: pointer; */
	/* -webkit-animation-name: example; */
	/* -webkit-animation-duration: 2s; */
	/* animation-name: example; */
	/* animation-duration: 2s; */
	background: #020231;
	z-index: 10;

}
#footer .wrapper{
	position: relative;
    margin: 0 auto;
    width: 296px;
}
#footer p{
	font-family: 'Playfair Display', serif;
	color:#ffffff;
	float: left;
    margin-right: 32px;
    cursor: pointer;
}
#footer p:last-child{
	margin:0;
}
.popup {
    position: absolute;
    top: 0;
    width: 100%;
    height: 0vh;
    background: green;
    background-image: url(mathyas-kurmann-102968-unsplash.jpg);
    background-position: center;
	background-size: cover;
    text-align: center;
    z-index: 10;
    visibility: hidden;
	overflow-y: scroll;
}
.popupImpressum, .popupDatenschutz{
    position: fixed;
    top: 0;
    width: 100%;
    height: 0vh;
    background: #689c9c;
    text-align: center;
    z-index: 10;
    visibility: hidden;
	overflow: scroll;
}
.popup #logo{
	position: relative;
    width: 119px;
    top: -19px;
    left: -18%;
}
.popup span{
	font-size: 15px;
	font-weight: 400;
}
.popup .wrapper{
    height: 100%;
    width: 90%;
    max-width: 623px;
    margin: 40px auto;
    visibility: hidden;
}
.popup h3{
    font-family: 'Playfair Display', serif;
    font-size: 2.3em;
    line-height: 1;
	margin: 20px;
	color: #0c0396;
}
.popup h3 span{
	letter-spacing: 4.8px;
}
.popup p{
	color: black;
    width: auto;
    max-width: none;
    font-size: 16px;
    font-weight: 600;
	line-height: 1.2;
	margin: 16px 0;
}
.popup a{
	color: black;
	text-decoration: none;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
}
.popup a:hover{
	text-decoration: underline;
}
#datenschutz .wrapper{
	text-align: left;
}
.newsButton {
    position: fixed;
    width: 30px;
    left: auto;
    right: 0;
    margin: 30px;
	cursor:pointer;
}



#container {

position: relative;
min-height: 100%;
height: 100%;

width: 100%;
height: auto;
}
#close{
float: right;
position: fixed;
color: #df9911;
display: none;
font-size: 40px;
margin-top: -10px;
cursor: pointer;
}
#close:hover{

color: #ff6911;
}
@-webkit-keyframes example {
from {color: transparent;opacity: 0;}
to {color: white;opacity: 1;}
}

#neueAdresse{
	position: absolute;
	top: 84%;
	width: 100%;
	height: 60px;
	background-color: #1c58a5;
	text-align: center;
	font-size: 20px;
	color: #cacaca;
	padding-top: 15px;
}
	
</style>