/* -Allgemein- */

*{
  padding: 0;
  margin: 0;
}
h1, h2, h3, h4, h5, h6, p, a, li, input, textarea, span{
  font-family: 'Levenim MT', 'Poppins', sans-serif;
}
h1{
  font-size: 1.8em;
}
h2{
  font-size: 1.5em;
  margin: 0.83em 0;
}
p{
  margin: 1em 0;
}
body{
  font-size: 100%;
  background-color: #fbfbfb;
}
i.page_nav_icons{
  font-size: 1pt;
  position: absolute;
  margin-top: 0.1em;
}
div.links, div.rechts{
  width: 50%;
  float: left;
}
div.rechts{
  float: right;
}
div.clear{
  clear: both;
}
div.text_align_right{
  text-align: right;
}
img{
  height: auto;
  max-width: 100%;
}
div.vertical_align{
  display: table-cell;
  vertical-align: middle;
  height: 100vh;
  /* -keine width reinschreiben!- */
}
div.icon_flex{
  display: flex;
  align-items: center;
}
body::-webkit-scrollbar{
  width: 2px;
  background-color: transparent;
}
body::-webkit-scrollbar-thumb{
  background-color: #add8e6;
}
-webkit-::selection{
  color: #fff;
  background-color: #009688;
}
-moz-::selection{
  color: #fff;
  background-color: #009688;
}
::selection{
  color: #fff;
  background-color: #009688;
}
main{
  padding-left: 2.5em;
  padding-right: 25%;
}
section{
  padding: 1.5em;
    padding-bottom: 5em;
  border-left: solid 0.2em #add8e6;
  position: relative;
}
section::before{
  content: '';
  position: absolute;
  width: 1em;
  height: 1em;
  background-color: #fbfbfb;
  border: solid #add8e6 0.2em;
  left: -0.8em;
  top: 2.9em;
  border-radius: 50%;
}
section#top::before{
  display: none;
}
section div.vertical_align{
  width: 10%;
}
/*Links*/
a.center_icon_text{
  margin: 0 0.5em;
  display: inline-flex;
  align-items: center;
}
a.center_icon_text span, a.center_icon_text{
  color: #000;
  text-decoration: none;
  font-family: 'Arvo', serif;
  margin-left: 0.2em;
  font-weight: bold;
}
a.center_icon_text:hover span{
  text-decoration: underline;
}


/* -Header- */

div.header_wrapper{
  display: table-cell;
  vertical-align: middle;
  height: 100vh;
  right: 0;
  top: 0;
  position: fixed;
  z-index: 5;
}
div.header{
  float: right;
  width: 10em;
  margin-right: 2em;
  background-color: #fff;
  padding: 2.5em;
  box-shadow: 0 0 5em #ccc;
}
div.logo_area{
  text-align: center;
}
div.logo_area img{
  width: 60%;
}
div.break_line{
  height: 0.2em;
  width: 2.5em;
  margin: 2em auto;
  background-color: #000;
}
div.nav{
  margin-top: 2em;
}
div.nav ul{
  text-align: center;
}
div.nav ul li{
  list-style: none;
  margin-top: 1em;
}
div.nav ul li a{
  text-decoration: none;
  color: #000;
  font-size: 15pt;
  font-family: Arvo, serif;
}
div.nav ul li:hover a{
  text-decoration: underline;
}

/* Mobile Header */
div.mobile_header_wrapper{
  width: 100vw;
  position: fixed;
  background-color: #fff;
  z-index: 15;
  box-shadow: 0 0 2.5em #555;
}
div.mobile_header_wrapper div.vertical_align{
  height: 5em;
  width: 100vh;
}

/* Nav Icon */
div.mobile_header_wrapper div.mobile_nav_icon{
  float: right;
  width: 50%;
  text-align: right;
}
div.mobile_header_wrapper div.mobile_nav_icon i{
  font-size: 2.5em;
  margin-right: 1em;
  cursor: pointer;
}
span#menue_close{
  display: none;
}

/* Logo */
div.mobile_header_wrapper div.mobile_header_logo{
  float: left;
  width: 50%;
  text-align: left;
}
div.mobile_header_wrapper div.mobile_header_logo img{
  height: 3.5em;
  margin-left: 2em;
}

/* Nav */
div.mobile_nav_ul{
  width: 100vw;
  background-color: #fff;
  clear: both;
  display: none;
}
div.mobile_nav_ul ul{
  text-align: center;
}
div.mobile_nav_ul ul li{
  list-style: none;
  padding: 1em 0;
}
div.mobile_nav_ul ul li a{
  text-decoration: none;
  color: #000;
  font-size: 15pt;
  font-family: Arvo, serif;
}
div.mobile_nav_ul ul li:hover a{
  text-decoration: underline;
}

@media screen and (min-width: 1020px){
  div.mobile_header_wrapper{
    display: none;
  }
}


div.logo_animate{
  position: absolute;
  z-index: 10;
  text-align: center;
  width: calc(100% - 2.5em - 25%);
  opacity: 1;
}
div.logo_animate div.vertical_align{
  width: 10%;
  text-align: center;
}

/* -Section top- */
section#top{
  padding: 0;
  text-align: center;
  margin: 0;
  border: none;
}
section#top div.vertical_align{
  position: relative;
  top: -3vh;
}
section#top div.vertical_align h1{
  opacity: 0;
}


/* -section team- */
section#team  div.links, section#team div.rechts{
  box-sizing: border-box;
  padding: 0 4.5em;
}
section#team img{
  display: block;
}
section#team h4{
  font-weight: lighter;
  position: relative;
  top: -0.2em;
}
div.img_container{
  position: relative;
  margin-bottom: 0.8em;
  overflow: hidden;
}
section#team div.profile_img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
}
section#team div.profile_img div.vertical_align{
  height: auto;
  position: absolute;
  width: 85%;
  margin: 0 7.5%;
  bottom: 1em;
  transform: translate(0, 5em);
  transition: transform 0.3s ease-in-out;
}
div.profile_text{
  position: relative;
  background-color: rgba(173,216,230, 0.8);
  width: inherit;
  height: inherit;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  /*transform: scale(0);*/
}
section#team div.profile_img:hover div.profile_text{
  /*transform: scale(1);*/
  opacity: 1;
}
section#team div.profile_img:hover div.vertical_align{
  transform: translate(0, 0);
}
p.zitat{
  font-style: italic;
  position: relative;
}
p.zitat span{
  color: #add8e6;
  font-family: 'Arvo Bold',monospace;
}
section#team div.text_align_right a.center_icon_text span{
  font-family: 'Poppins', sans-serif;
}
section#team i.material-icons.hide{
  display: none;
}
section#team div.text_align_right a.center_icon_text:hover i.material-icons.hide{
  display: inline-block;
}
section#team div.text_align_right a.center_icon_text:hover i.material-icons.show{
  display: none;
}



/* -Section standort- */
section#standort{

}
section#standort iframe{
  height: 15em;
  width: 100%;
  border: 0;
  -webkit-filter: grayscale(0.5);
  filter: grayscale(0.5);
}
section#standort div.icon_flex i{
  padding: 0.25em;
}
section#standort div.icon_flex a{
  text-decoration: none;
  color: #000;
}
section#standort div.icon_flex a:hover{
  text-decoration: underline;
}


/* -footer- */
footer{
  background-color: #add8e6;
  padding: 1.5em 2.5em;
  position: relative;
  z-index: 10;
}
footer div.footer_content{

}
footer a{
  margin: 0 0.5em;
  display: inline-flex;
  align-items: center;
}
footer span, footer a{
  color: #000;
  text-decoration: none;
  font-family: 'Arvo', serif;
  margin-left: 0.2em;
  font-weight: bold;
}
footer a:hover span{
  text-decoration: underline;
}
footer div.rechts{
  text-align: right;
}





/* -Responsive Abmessungen- */

@media screen and (max-width: 1340px) {
  div.start_float-right, div.about_float-right, div.we_float-right{
    width: 4.8em;
  }
}
@media screen and (max-width: 1190px) {
  div.start_float-right, div.about_float-right, div.we_float-right{
    width: 4em;
  }
}
@media screen and (max-width: 1020px) {
  div.start_float-right, div.about_float-right, div.we_float-right{
    width: 5em;
  }
  div.header_wrapper{
    display: none;
  }
  main{
    padding: 0 2.5em;
  }
  div.logo_animate{
    width: calc(100% - 5em);
  }

  /* -section team- */
  section#team  div.links, section#team div.rechts{
    padding: 0.5em;
  }
}
@media screen and (max-width: 500px){
  /* -section team- */
  section#team  div.links, section#team div.rechts{
    float: none;
    width: 100%;
    padding: 0;
  }
}
@media screen and (max-width: 380px) {

  main{
    padding: 1.5em;
  }
  section{
    padding-right: 0;
  }

  /* -footer- */
  footer div.links, footer div.rechts{
    float: none;
    width: 100%;
    text-align: left;
  }
}


/* -Fonts- */

@font-face {
  font-family: 'Arvo';
  font-style: normal;
  font-weight: 400;
  src: url(https://kga-gmbh.de/fonts/Arvo-Regular.ttf); /* For IE6-8 */
  src: local('Arvo'),
    local('Arvo-Regular'),
    url(https://kga-gmbh.de/fonts/Arvo-Bold.ttf) format('truetype'),
    url(https://kga-gmbh.de/fonts/Arvo-BoldItalic.ttf) format('truetype'),
    url(https://kga-gmbh.de/fonts/Arvo-Italic.ttf) format('truetype');
    url(https://kga-gmbh.de/fonts/Arvo-Regular.ttf) format('truetype');
}

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://kga-gmbh.de/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(https://kga-gmbh.de/MaterialIcons-Regular.woff2) format('woff2'),
    url(https://kga-gmbh.de/MaterialIcons-Regular.woff) format('woff'),
    url(https://kga-gmbh.de/MaterialIcons-Regular.ttf) format('truetype');
}
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}