/* --------------------------- *\
   NAVIGATION
\* --------------------------- */

#zpo-nav,#zpo-nav:before,#zpo-nav:after,#zpo-nav *,#zpo-nav *:before,#zpo-nav *:after {
  box-sizing:content-box;
  margin:0;
  padding:0;
  letter-spacing:0.03em;
}

#zpo-nav *,#zpo-nav *:before,#zpo-nav *:after {
  font-size:1em;
  font-family:inherit;
  font-weight:inherit;
  line-height:inherit;
  text-align:inherit;
}

#zpo-nav nav {
  display:block;
}

#zpo-nav ul {
  list-style:none;
}

#zpo-nav,#zpo-nav input {
  direction:ltr;
  text-align:left;
  font-family:"Roboto", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

#zpo-nav a,#zpo-nav a:hover {
  text-decoration:none;
  color:#fff;
  -webkit-transition:opacity 0.3s cubic-bezier(0.24, 0.06, 0.56, 1);
  transition:opacity 0.3s cubic-bezier(0.24, 0.06, 0.56, 1);
}

#zpo-nav {
  position:fixed;
  top:0;
  left:0;
  z-index:99;
  display:block;
  width:100%;
  height:44px;
  background:rgba(8,104,108,1);
  font-size:17px;
}

#zpo-nav .zpo-nav-inhalt {
  position:relative;
  z-index:2;
  max-width:1046px;
  margin:0 auto;
  padding-left:11px;
  padding-right:11px;
}

@supports (padding:max(0px)) {
  #zpo-nav .zpo-nav-inhalt {
    padding-left:max(11px, env(safe-area-inset-left));
    padding-right:max(11px, env(safe-area-inset-right));
  }
}

@media only screen and (max-width:767px) {
  #zpo-nav .zpo-nav-inhalt {
    min-width:320px;
    padding:0;
  }
  
  @supports (padding:max(0px)) {
    #zpo-nav .zpo-nav-inhalt {
      padding-left:max(0, env(safe-area-inset-left));
      padding-right:max(0, env(safe-area-inset-right));
    }
  }
}

#zpo-nav .zpo-nav-titel {
  position:relative;
  z-index:200;
  display:inline-block;
  font-size:18px;
  font-weight:500;
  padding-left:11px;
  line-height:1.2em;
  color:#fff;
}

#zpo-nav .zpo-nav-untertitel {
  font-size:17px;
  font-weight:300;
  color:#fff;
  opacity:0.8;
  padding-left:0.5em;
}

@media only screen and (max-width:514px) {
  #zpo-nav .zpo-nav-untertitel,#zpo-nav .nav-mobil-nichtsichtbar {
    position:absolute;
    height:1px;
    width:1px;
    overflow:hidden;
  }
}

#zpo-nav .zpo-nav-links {
    display:flex;
    justify-content:space-between;
    align-items:center;
    height:44px;
    font-size:14px;
    line-height:1em;
}

#zpo-nav .zpo-nav-link {
  display:block;
  padding:5px 11px;
  font-weight:400;
  color:#fff;
  opacity:0.8;
  white-space:nowrap;
}

#zpo-nav .zpo-nav-link:hover {
  opacity:1;
}



/* --------------------------- *\
   MAIN
\* --------------------------- */

html {
   background:linear-gradient(0deg,rgb(8,104,108)15%,rgb(5,122,128));
}
body {
  background:linear-gradient(180deg,rgb(8,104,108)15%,rgb(5,122,128));
  height:100%;
}

.heropromo-praxis {
  color:#fff;
  background:none;
}

.heropromo-inhalt {
  padding:5.5em 0;
}

@media only screen and (min-width:1068px) and (max-height:834px) {   

  .heropromo-inhalt {
    padding:4em 0;
  }
} 

@media only screen and (min-width:729px) and (max-width:1068px) {  

  .heropromo-inhalt {
    padding:4em 0;
  }
}

@media only screen and (max-width:728px) {
  
  .heropromo-inhalt {
    padding:3.75em 1.5em;
  }
}

@media only screen and (max-width:350px) {

  .heropromo-inhalt {
    padding:3em 1.5em;
  }          
}

.heropromo-praxis-icon {
  background-image:url(images/heropromo/praxis/image.png);
  background-repeat:no-repeat;
  background-position:center center;
  background-size:contain;
  height:315px;
    margin-bottom:2.5em;
}

@media only screen and (min-width:1068px) and (max-height:834px) {   

  .heropromo-praxis-icon {
    height:275px;
  }
} 

@media only screen and (min-width:729px) and (max-width:1068px) {  

  .heropromo-praxis-icon {
    height:245px;
  }
} 

@media only screen and (max-width:728px) {

  .heropromo-praxis-icon {
    height:165px;
  }      
}

@media only screen and (max-width:350px) {

  .heropromo-praxis-icon {
    height:140px;
  }      
}