/* manrope-regular - latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/manrope-v3-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/manrope-v3-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/manrope-v3-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/manrope-v3-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/manrope-v3-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/manrope-v3-latin-regular.svg#Manrope') format('svg'); /* Legacy iOS */
}
/* archivo-black-regular - latin */
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/archivo-black-v10-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Archivo Black Regular'), local('ArchivoBlack-Regular'),
       url('../fonts/archivo-black-v10-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/archivo-black-v10-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/archivo-black-v10-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/archivo-black-v10-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/archivo-black-v10-latin-regular.svg#ArchivoBlack') format('svg'); /* Legacy iOS */
}



html, body {
  margin: 0;
  padding: 0;
  font-family:"Manrope";
}
body {
  background: #000;
  background: rgba(0, 0, 0, 1);
  overflow-x: hidden;
  background-size:cover;
  text-align:center;
  width:100%;
}

/* ---------- Fog ---------- */
#background-image {
  background-image: url("../images/bg-mit-emblemen.jpg"); 
  background-size:cover;
  text-align:center;
  height: 100vh;
  position: fixed;
  top: 0;
  left:0px;
  width: 100%;
  z-index:100;
}
#foglayer_01, #foglayer_02, #foglayer_03 {
  height: 100vh;
  position: fixed;
  width: 200%;
}
#foglayer_01 .image01, #foglayer_01 .image02,
#foglayer_02 .image01, #foglayer_02 .image02,
#foglayer_03 .image01, #foglayer_03 .image02 {
  float: left;
  height: 100%;
  width: 50%;
}
#foglayer_01 {
  animation: foglayer_01_opacity 10s linear infinite, foglayer_moveme 50s linear infinite;
}
#foglayer_02, #foglayer_03 {
  animation: foglayer_02_opacity 21s linear infinite, foglayer_moveme 20s linear infinite;
}

/* ---------- Moving Fog ---------- */
/*
  'size: cover' || 'size: 100%'; results remain the same
  'attachment: scroll' can be added or removed; results remain the same
  'attachment: fixed' causing unexpected results in Chrome
  'repeat-x' || 'no-repeat'; results remain the same
*/ 
#foglayer_01 .image01, #foglayer_01 .image02 {
  background: url("../images/fog1.png") center center/cover no-repeat transparent;
  
}
#foglayer_02 .image01, #foglayer_02 .image02,
#foglayer_03 .image01, #foglayer_03 .image02{
  background: url("../images/fog2.png") center center/cover no-repeat transparent;
}

@keyframes foglayer_01_opacity {
  0% { opacity: 1; }
  22% { opacity: .8; }
  40% { opacity: .5; }
  58% { opacity: .3; }
  80% { opacity: .8; }
  100% { opacity: 1; }
}
@keyframes foglayer_02_opacity {
  0% { opacity: .5; }
  25% { opacity: .2; }
  50% { opacity: .9; }
  80% { opacity: .3; }
  100% { opacity: .5; }
}
@keyframes foglayer_03_opacity {
  0% { opacity: .3; }
  27% { opacity: .5; }
  52% { opacity: 1; }
  68% { opacity: .5; }
  100% { opacity: .3; }
}
/* ---------- Keyframe moveMe ---------- */

@keyframes foglayer_moveme {
  0% { left: 0; }
  100% { left: -100%; }
}


#content {
  z-index:8888;
  position:relative;
  margin:auto;
  overflow:hidden;
  width:80%;
  max-width:600px;
  font-family:"Manrope";
}
#logo {
  width:80%;
  max-width:220px;
  margin-top:100px;
  margin-bottom:30px;
}
#logo img {
  width:100%;
}
#fenster {
  width:calc(100% - 60px);
  padding:30px;
  background-color:#000;
  font-family:"Trebuchet MS", sans-serif;
  color:#fff;
  font-size:14px;
  border:3px SOLID #eeeeee;
  font-family:"Manrope";
}
#fenster h2,
h2 {
  text-transform:uppercase;
  font-size:20px;
  color:#000;
  font-family: 'Archivo Black';
  font-weight:normal;
}
#foglayer_01 {
  z-index:101;
}
#foglayer_02 {
  z-index:102;
}
#foglayer_03 {
  z-index:103;
}

@media screen
  and (min-width: 280px)
  and (max-width: 767px) {
    .fogwrapper {
         display:none;
    }
    
    #foglayer_01,
    #foglayer_03,
    #foglayer_02 {
      display:none;
    }
  }
div#nachOben {
  position:fixed;
  right:30px;
  bottom:30px;
  cursor:pointer;
  display:none;
  z-index:99999;
} 
#content {
  position:relative;
  z-index:88888;
  width: 100%;
  max-width:800px;
  font-family:"Manrope";
  margin-bottom:50px;
} 
.blog-unterseite {
  margin-top:-20px;
}
.blog-unterseite .items-leading article {
  padding-top:-20px;
}
#inhalt {
  font-family:"Manrope";
  z-index:88888;
  width: calc(100% - 40px);
  min-height:70px;
  padding:20px;
  margin:auto;
  background-color:#f0f0f0;
  padding-bottom:20px;
  overflow:hidden;
  text-align:left;
} 
#inhalt a {
  color:#840816;
  font-weight:bold;
  text-decoration: none;
  font-size: 1.0em;
}
#footer {
  font-family:"Manrope";
  z-index:88888;
  width: calc(100% - 40px);
  min-height:70px;
  padding:20px;
  background-color:#111;
  color:#fff;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  margin-top:-15px;
}

/*     M E N Ü S    */
#schnellmenue {
  margin-bottom:0px;
  color:#fff;
  font-size:18px;
  font-weight:normal;
  width:calc(100% - 10px);
  padding:5px;
  background-color: #111;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
#schnellmenue ul {
  width:100%;
  padding:0px;
  margin:0px;
  list-style-type:none;
}
#schnellmenue ul li {
  display:inline;
}
#schnellmenue ul li::after {
  content: "  |  ";
}
#schnellmenue ul li:last-child::after {
  content: " ";
}
#schnellmenue ul li a {
  text-decoration:none;
  color:#fff;
  font-size:18px;
  font-weight:normal;
  font-family: 'Manrope';
}
#schnellmenue ul li.active a,
#schnellmenue ul li.current a {
  color:#cd0218;
}

#footer ul {
  width:100%;
  padding:0px;
  margin:0px;
  list-style-type:none;
}
#footer ul li {
  display:inline;
}
#footer ul li::after {
  content: "  |  ";
}
#footer ul li:last-child::after {
  content: " ";
}
#footer ul li a {
  text-decoration:none;
  color:#fff;
  font-size:16px;
  font-weight:normal;
  font-family: 'Manrope';
}
#footer ul li.active a,
#footer ul li.current a {
  color:#cd0218;
}

#schattenmenue {
  display:none;
}
.slicknav_menu {
  display:none;
}



/*    Odd  -  EVEN der Beiträge    */

.items-leading article:nth-child(2n - 1),
.item-page-galerie,
#inhalt article.item-page-galerie-x {
  background-color:rgba(54, 54, 54, 1);
  color: #fff;
  width: 100%;
  padding:20px;
  margin-left:-20px;
}
.items-leading article:nth-child(2n - 1) h2,
.items-leading article:nth-child(2n - 1) h3,
.items-leading article:nth-child(2n - 1) a {
  color: #fff;
}
#inhalt .items-leading article:nth-child(2n - 1) a {
  color: #840816 !important;
  text-decoration:none;
  font-size:1.0em;
  font-weight:bold;
}
#inhalt article.item-page-galerie-x {
  background-color:rgba(54, 54, 54, 1);
  color: #840816;
  width: 100%;
  padding:20px;
  margin-left:-20px;
}
#inhalt .readmore a {
   font-family: 'Archivo Black' !important;
  font-weight:normal;
  font-size:1.2em;
}
@media screen and (max-width: 850px) {
      .slicknav_menu {
         display:block;
      }
      #circular_menu {
         display: none !important;
      }
      #monitor {
         display: none !important;
      }
      #schnellmenue {
         display:none;
      }
}