@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'FleurDeLeah';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/fleur-de-leah-v9-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('fonts/fleur-de-leah-v9-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/*
.mchrome {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
-webkit-filter: grayscale(1);
transform: rotate(360deg) scaleX(-1);
}
.mchrome:hover {
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
-webkit-filter: grayscale(0);
transform: rotate(0deg) scaleX(1);
}
*/


#zwei {
 position: fixed;
 top: 0%;
 left: 0%;
 width: 100%;
 padding: 14px 0;
 text-align: center;
 z-index: 999;
 background-color: #000;
 border-top: 1px solid #222;
}
#zwei a {
 color: #fff;
 font-weight: bold;
 font-size: 120%;
 text-decoration: none;
}
#zwei a:hover {
 color: #333;
}

.trenner {
 background: #000;
 height: 6px;
 border: 1px solid #f1f2f1;
 margin: 36px 0;
}

.fleur {
 font-family: 'FleurDeLeah', serif;
 text-shadow: 1px 1px 2px rgba(0,0,0,1);
 text-align: center;
}

html,body {
 margin: 0;
 padding: 0;
 min-height: 100%;
 background-color: #000;
 font-family: 'Arial', sans-serif;
}

#opener {
 position: fixed;
 text-align: center;
 padding: 18% 5%;
 color: #fff;
 font-weight: bold;
 font-size: 180%;
 width: 90%;
 font-family: sans-serif;
 text-shadow: 1px 1px 1px #000;
}

#opener div {
 margin-top: 25px;
}

#opener div span {
 color: #fff;
 display: inline-block;
 vertical-align: middle;
 margin: 0 12px;
 font-size: 60%;
}

@media(max-width:768px) {
 #nav {
  position:fixed;
  z-index:12;
  bottom: -60%;
  width:100%;
  text-align:center; 
 }

 #nav a {
  display:block !important; 
 }
}

@media(min-width:769px) {
 #nav {
  position:fixed;
  z-index: 12;
  left: 0%;
  bottom: -60%;
  width: 100%;
  text-align:center; 
 }
 #nav a {
  width: 166px; 
 }
}


   video {
  /* override other styles to make responsive */
  width: 100%    !important;
  height: auto   !important;
}
   

#nav a {
  display: inline-block;
  vertical-align: middle;
  margin: 12px;
  color: #fff;
  background-color: #000;
  padding: 9px;
  border-radius: 6px;
  font-weight: bold;
  text-decoration: none;
  opacity: 0.7;
  border: 2px solid #fff;
}

#nav a:hover {
 opacity: 1;
}

@media(max-width:960px) {
#inlove {
 background-size: cover !important;
}
#contentbox {
margin: 11% auto !important;
}
}

#inlove {
 background: #000;
 background-position: center bottom;
 background-repeat: no-repeat;
 background-size: contain;
 position: fixed;
 z-index: 1;
 width: 100%;
 height: 100%;
 display: none;
 top: 0;
 left: 0;
 }
 
.slow5 {
  transition: all 1s;
}

.slow3 {
  transition: all 0.3s;
}

#contentbox {
  position: relative;
  z-index: 15;
  width: 92%;
  max-width: 760px;
  margin: 3% auto; 
}

#contentinner {
  padding: 15px;
  background-image: url(tp.png);
  border-radius: 6px;
}

#contentinner * {
 color: #fff;
 font-weight: normal;
 text-shadow: 1px 1px 0 rgba(0,0,0,1);
}

#contentinner h1,
#contentinner h2 {
 margin: 0 0 15px 0;
 font-size: 333%;
}

.inav {
 text-align: center;
}

.inav a {
 display: block;
 padding: 7px;
 margin: 6px;
 background-color: #000;
 border: 1px solid #f1f2f1;
 text-decoration: none;
 text-align: center;
 display: inline-block;
}
.inav a:hover {
 color: #000;
 background: #f1f2f1;
 border: 1px solid #000;
}

#contentinner p {
 font-size: 115%;
 line-height: 1.5;
 
}

#contentinner ul li {
  line-height: 1.5;
  padding: 12px;
  font-size: 115%;
  list-style-type: square;
}

.iimg {
 display: block;
 margin: 25px auto;
 width: auto;
 max-width: 100%;
 height: auto;
}

ol {
 margin: 25px 0;
}

ol li {
 line-height: 1.25;
 padding: 12px;
}