body {
    font-size: 0.8rem;
    line-height: 1.4;
}


#body-wrapper {
 padding:0;
 margin: 0;
}

#body-wrapper .container  {
  margin: 0 0 2rem 0;
}

/* Container */
.row, .center-content, .center-form {
  display: flex;
  align-items: center;
  justify-content: center;
}

.col-12, .content {
  width: 40rem;
}

.center-form .content{
  width: 25rem;
  margin-left:10rem;
}


@media (max-width: 500px) {
.col-12, .content {width: 16rem;}
.center-form .content {width: 14rem; margin-left:0;}
}

@media (max-width: 700px) and (min-width: 501px)  {
.col-12, .content {width: 20rem;}
.center-form .content {width: 18rem; margin-left:0;}
}

@media (max-width: 960px) and (min-width: 701px) {
.col-12, .content {width: 30rem;}
.center-form .content {width: 28rem; margin-left:0;}
}

.row img {
  padding-top:50px;
}

#page-wrapper {
  align-items: center;
}


/* Header */


.logo img {
  width: 12rem;
}


.title-center h2, .title-center h3 {
  text-align: left;
}



/* Navigation */
.main-nav ul {
    text-align: left;
}

ul {
  list-style-type: square;
}

/* Navigation mobil*/
.mobile-menu ul {
  list-style-type: none;
  margin:0;
  padding:0;
}

.mobile-menu .button_container {
  position: absolute; top: 1.3rem; right: 1rem; height: 24px; width: 28px;
  cursor: pointer; z-index: 100; transition: opacity .25s ease, top 0.5s ease;

}

.mobile-menu .button_container:hover { opacity: .7; }

.mobile-menu .button_container.active { position: fixed; }

.mobile-menu .button_container.active .top {
  transform: translateY(8px) translateX(0) rotate(45deg); background: #fff; }

.mobile-menu .button_container.active .middle { opacity: 0; background: #FFF; }

.mobile-menu .button_container.active .bottom {
  transform: translateY(-8px) translateX(0) rotate(-45deg); background: #fff; }

.mobile-menu .button_container span { background: #0183c0;
  border: none; height: 4px; width: 100%;
  position: absolute; top: 0; left: 0; transition: all .35s ease;
  cursor: pointer; }

.mobile-menu_container {
  background-color: #0183c0;
  height: 100%;
  width:100%;
  padding: 2em 2em 0 2em;
  float:right;
  z-layer: 99;
}

.mobile-menu_container li{
  list-style-type: none;
}

.mobile-menu_container  a:link, .mobile-menu_container  a:active, .mobile-menu_container a:hover, .mobile-menu_container a:visited {
  color:#fff;
  font-size: 1.1rem;
}

.mobile-menu_container a:hover {
  color:#fff;
}


* ROOT FONT STYLES */

* {
  font-family: 'Lato', Helvetica, sans-serif;
  color: #333447;
  line-height: 1.5;
}

/* TYPOGRAPHY */

h1 {
  font-size: 2.5rem;
    font-weight: 500;
}

h2 {
  font-size: 1.7rem;
}

h3 {
  font-size: 1.3rem;
}

h4 {
  font-size: 0.9rem;
}

h5 {
  font-size: 0.8rem;
}

h6 {
  font-size: 0.875rem;
}

p {
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.8;
}

a:link, a:active, a:hover, a:visited {
  color: #66ccff;
}
a:hover {
  text-decoration: underline;
}

.font-light {
  font-weight: 300;
}

.font-regular {
  font-weight: 400;
}

.font-heavy {
  font-weight: 700;
}

.content {
  /* hyphens */
     /* -moz-hyphens: auto;
     -o-hyphens: auto;
     -webkit-hyphens: auto;
     -ms-hyphens: auto;
     hyphens: auto;

     word-wrap:break-word;
     white-space:pre-wrap;   */
}



/* Home page */

.section_dark, .section_light{
  /* padding: 0 60px 20px 60px; */
  padding: 0 0 20px 0;
}

.section_dark h1, .section_light h1{
    font-weight: 400;
}

.section_light{
  background-color: #fff;
}

.section_dark{
  background-color: #555;
  color:white;
  font-weight:100;
}
.section_dark h1, .section_dark h2, .section_dark h3
{
  color:white;
}

/* CONTACT FORM */

#home .form-field {
}

#home .form-label {
}

#home .form-data input, #home .form-data textarea {
  background-color: #eeeeee;
  width: 20rem;
  border: 1px solid grey;
  padding: 0.1rem;
  border-radius: 2px;
}

#home .form-data textarea {
  height: 8em;
}

#home .button {
  background-color: #eeeeee;
  color: grey;
  border: 1px solid grey;
  width: 6rem;
  margin:0.1rem;
}

.buttons {
  margin-left:7.5rem;

}


@media (max-width: 600px) {
  #home .form-data input, #home .form-data textarea {width: 18rem;}
  .buttons {float:right; margin-left:0.1rem;}
}



/* top link */

.toplink {
    margin: 2rem 0 2rem 0;
    float:right;
  }


  .toplink a
  {
    color:white;
    display:block;
    width:100px;
    padding:2px;
    background-color:#0183c0;
    border:0px;
  margin:2px 0px;
  text-align:center;
  text-decoration:none;
  }

.toplink a:hover {
    color:#88eeff;
  }


/* Footer  */

#footer
{
  margin:0;
  padding:0;
}

.footermenu {
  background-color: grey;
  min-height: 7rem;

}

.footermenu .center-content {
 padding:0;
  text-align: center;
}


.footermenu ul li {
  list-style-type: none;
}

.footermenu a:link, .footermenu a:active, .footermenu a:hover, .footermenu a:visited {
  color:#ddd;
}

.footermenu a:hover{
  color:white;
}

.footermenu p {
  color:#ddd;
  margin: 20px 0 0 0;
}

.footermenu ul {
  display: block;
  margin: 20px 0 0 0;
}
.footermenuxx ul {
  display: block;  /* Remove bullet points; allow greater control of positioning */
      padding: 0;      /* Override defaults for lists */
      margin: 0;       /* Override defaults for lists */
      width: 100%;     /* Get the row full width */
  }

.footermenu li {
  display: table-cell; /*Get all images to show in a row */
  text-align: center;   /* Centre align the images */
}

@media (max-width: 960px) and (min-width: 501px) {
    .footermenux li { width: 28%; } /* Show 2 logos per row on medium devices (tablets, phones in landscape) */
}

@media (max-width: 500px) {
    .footermenux li { width: 56%; } /* On small screens, show one logo per row */
}

@media (max-width: 800px) {
.footermenu li {display: flex;}
}




/* LOGO  folgende Zeilen in spectre ausgeblendet*/

.navbar {
  -ms-flex-align: stretch;
  align-items: stretch;
  display: -ms-flexbox;
  display: flex; -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.navbar .navbar-section {
  -ms-flex-align: center;
  align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1 0 0px;
/*flex: 1 0 0; Logo gequetscht*/}

.navbar .navbar-section:not(:first-child):last-child {
  -ms-flex-pack: end;
  justify-content: flex-end; }

.navbar .navbar-center {
  -ms-flex-align: center;
  align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 0 0 auto;
   flex: 0 0 auto; }

.navbar .navbar-brand {
  font-size: 0.9rem;
  text-decoration: none;
}