/***Navigationen
********************************************/

.mobilemenu {
  background: transparent;
}

.slicknav_opened .slicknav_menu {
  height: 100vh;
  width: 100%;
}

.overlay {
  position: fixed;
  display: none;
  z-index: 10;
  background: #FFF;
  width: 100%; height: 100vh;
  top: 0px; left: 0px;
}

.paragraph-id--102 {
  height: 80vh;
  width: 100%;
    height: 100%;
   overflow: hidden !important; }

#header {
 position: relative;
 width: 100%;
 display: flex;
 align-items: center;
 justify-content: flex-start;
 align-content: center;
 padding: 50px 40px;
}

.mainheader { position: fixed; top: 20px; left: 0px; height: auto; width: 100%; background: none; z-index: 11; }
.mainheader .alex, .mainheader .flexend span { font-size: 1.2em; }
.contactrow { display: none; }

.popup {
  position: fixed; z-index: 1000; display: none; background: #f8f8f8; top: 0px; left: 0px;
  width:100vw; height: 100vh;
}

.pheader { position: relative; width: 100%; height: 50vh; }
.titelwrapper { bottom: 50px; width: 100%; z-index: 2; }

#contactpopup { padding: 80px; }

.closebtn { position: fixed; top: 40px; right: 40px; width: 45px; height: 50px; z-index: 4; }
.closebtn:hover { cursor: pointer; }

.closebtn .bar {
  display: inline-block; position: absolute; right: 0px; width: 45px; height: 2px; margin-top: 20px;  background: #0d0d0d;
}
.closebtn:hover .bar {
  background: #9EA4A2; cursor: pointer;
}

.closebtn .bar.firstbar { transform: translate(-1px, 2px) rotate(45deg); top: 0px;  }
.closebtn .bar.secondbar { transform: translate(-1px, -2px) rotate(-45deg); top: 4px;}

.slicknav_opened .mainheader {
 height: 100vh;
}

#block-alex-theme-content, .dialog-off-canvas-main-canvas, #contentarea { position: relative; width: 100%; }

#leftcontainer { width: 50%; }
#scrollright { }
#headerarea { position: relative; height: 100vh; height: -webkit-fill-available; width: 100%; }

.textmain { position: absolute; bottom: 40px; left: 0px; z-index: 2; width: 100%; }

.textmain p { display: flex; }
.textmain p a { display: inline-block; padding: 8px 0px 0px 0px; font-size: 1.2em; }

.textmain p a::after {
  content: "\00b7";
  padding: 0px 10px; margin-left: 0px 10px;
}

.textmain p a:last-child::after {
  content: "";
}

#pagenav li { display: block; font-family: 'Roboto-Light'; text-transform: uppercase; }
#pagenav { position: fixed; top: 40px; left: 0%; margin-left: -250px; z-index: 5; width: 250px; }

@media screen and (max-width: 720px) {
  #leftcontainer { width: 100%; }
  #leftcontainer { position: absolute; }
}

#superfish-main, #block-hauptnavigation, #block-hauptnavigation-2 { display: none; width: 0px; }
#block-hauptnavigation { margin-right: 40px; }
#superfish-main li { float: none; margin: 0px 35px 0px 0px; }
#superfish-main a {
  transition: all 0.3s;
  font-size: 1em;
  color: #000;
  padding: 0px;
}


ul.links, #userpopupbtn { margin-right: 35px;  }

#header span:hover, #header a:hover {
  text-decoration: underline;
  cursor:pointer;
}

#logo {
  position: relative;
  width: 50px; height: 44px; padding-top: 0px;
  margin-right: 10px; display: inline-block;
}
#logo img { width: 50px; height: 44px; }

#logo .margintopsmall {
  margin-top: 0px!important;
}

#userpopupbtn img {
  width: 30px; height: 30px;
}


.sf-menu ul {
  background: #FFF;
  -webkit-box-shadow: 10px 10px 54px -11px rgba(0,0,0,0.35);
  -moz-box-shadow: 10px 10px 54px -11px rgba(0,0,0,0.35);
  box-shadow: 10px 10px 54px -11px rgba(0,0,0,0.35);
}




/*** sticky-header***/
#header.sticky-header{
   position: fixed;
   top: 0px;  left: 0px;
   width: 100%; height: 110px;
   padding: 20px 0px 10px 0px;
   z-index: 4;
}

#header.sticky-header a.logo {
   left: 60px;
   width: 260px;
 }
 #header.sticky-header a.logo.mobil {
  left: 0px;
}

#header.sticky-header #superfish-main a {
    font-size: 0.9em;
}

 #header.sticky-header #superfish-main {
   margin-right: 60px;
 }

 .sticky-header .slicknav_btn {
   margin-top: 10px;
}
 #header.opened .sticky-header{ height: auto; }

 @media only screen and (max-width: 800px) {
   .mainheader .alex { display: none; }
 }

@media only screen and (min-width: 0px) and (max-width: 1440px) {
.mainheader .alex, .mainheader .flexend span { font-size: 1em; }
}

@media only screen and (min-width: 0px) and (max-width: 480px) {

 .mobilemenu {
    margin-left: 0px;
  }
    #actions a {
    font-size: 1em;
  }
}

@media print {
   body { font-size: 76%; }
  .top-header, .main-menus-links .footer { display: none; }
  .logo { width: 260px; }
  @page { size: auto; margin: 12mm 8mm; }
}