a {
  color: #000;
}

a:hover {
  color: #ccc;
}


article {
      margin-top:0px;

}

body {
  font: 400 12px/1.8 Lato, sans-serif;
  font-size: 100%; /* Mit einer flexiblen Grunddefinition beginnen. */
  color: #000;
      background-color: #000;
      margin-left: 17%;
      margin-right: 17%;
      margin-bottom: 4%;
  }



.container2 {
  padding: 0px;
    background-color: #fff;
}

.container3 {
  padding: 0px;
    background-color: #fff;
}



.textspecial {
  text-align: justify;
  font-size: 1.5em;
  height: 350px;
  padding-top: 25px;

}

.textspecial2 {
  text-align: justify;
  font-size: 1.5em;
  padding-top: 5px;
  margin-bottom: 25px;

}

.textspecial3 {
  text-align: justify;
  font-size: 1.5em;
  padding: 15px;
  margin-bottom: 25px;

}

.disclaimer {
  font-size: 1.0em;
  text-align: justify;
  color: #ccc;
  padding: 50px;
}

h3 {

  margin-top: 50px;
  padding-bottom: 25px;
  text-align: center;
  background-color: #000;
  font-size: 15.5em;
  color: #fff;
  webkit-transition: all 0.7s ease;
  transition: all 0.7s ease;

    text-shadow: 0px 0 15px #fff;}


h3:hover {
  color: #000;
    text-shadow: 0px 0 15px #fff;
  background-color: #fff;}


h2 {

  margin-top: 50px;
  margin-bottom: 100px;
  margin-left: 10px;
  margin-right: 10px;
  text-align: center;
  background-color: #fff;
  color: #000;
  font-size: 7.0em;}



.myh {

  padding-top: 0px;
  text-align: center;
  background-color: #fff;
  color: #fff;
  font-size: 15.5em;  
  webkit-transition: all 2.0s ease;
  transition: all 2.0s ease;}

.myh:hover {
  text-shadow: 0px 0 15px #fff;
  color: #000;}


.myh4 {

  text-align: center;
  background-color: #000000;
  color: #FFFFFF;
  font-size: 200px;
  webkit-transition: all 0.7s ease;
  transition: all 0.7s ease;}


.myh4:hover {
  text-shadow: 0px 0 15px #fff;
  background-color: #00ff00;}


@media screen and (max-width: 50em) {
h4, h3, h2, .heads, .myh {
font-size:12em;
}
}
@media screen and (max-width: 40em) {
h4, h3, h2, .heads, .myh {
font-size:10em;
}
}
@media screen and (max-width: 30em) {
h4, h3, h2, .heads, .myh {
font-size:6em;
}
}


@media screen and (max-width: 50em) {
body, .navar {
 margin-left: 10%;
 margin-right: 10%;
}
}

@media screen and (max-width: 30em) {
body, .navbar {
 margin-left: 0%;
 margin-right: 0%;
}
}



  .textme {
    color: #00ff00;
  }


  .container {
      text-align: center;
  }
  .person {
      border: 10px solid transparent;
      margin-bottom: 25px;
      width: 80%;
      height: 80%;
      opacity: 0.7;
  }
  .person:hover {
      border-color: #f1f1f1;
  }

  .bg-1 {
      background: #000000;
      color: #000000;
  }
  .bg-1 h3 {color: #fff;}
  .bg-1 p {font-style: italic;}
  .list-group-item:first-child {
      border-top-right-radius: 0;
      border-top-left-radius: 0;
  }
  .list-group-item:last-child {
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
  }
  .thumbnail {
      padding: 0 0 15px 0;
      border: none;
      border-radius: 0;
  }
  .thumbnail p {
      margin-top: 15px;
      color: #000;
  }
  .btn {
      padding: 10px 20px;
      background-color: #000;
      color: #f1f1f1;
      border-radius: 0;
      transition: .2s;
  }
  .btn:hover, .btn:focus {
      border: 1px solid #000;
      background-color: #fff;
      color: #000;
  }
  .modal-header, h4, .close {
      background-color: #333;
      color: #fff !important;
      text-align: center;
      font-size: 30px;
  }
  .modal-header, .modal-body {
      padding: 40px 50px;
  }
  .nav-tabs li a {
      color: #00ff00;
  }

  .navbar {
      font-family: Montserrat, sans-serif;
      margin-bottom: center;
      background-color: #000;
      border: 100px;
      font-size: 11px !important;
      letter-spacing: 3px;
      opacity: 0.9;
      margin-left: 17%;
      margin-right: 17%;

  }

@media screen and (max-width: 30em) {
.navbar {
      background-color: #000;
}
}

@media screen and (max-width: 50em) {
.navbar {
      background-color: #000;
}
}

  .navbar-nav li a:hover {
      color: #00ff00 !important;
  }
  .navbar-nav li.active a {
      color: #fff !important;
      background-color: #29292c !important;
  }
  .navbar-default .navbar-toggle {
      border-color: transparent;
  }
  .open .dropdown-toggle {
          opacity: 0.9;
      color: #000;
      background-color: #000 !important;
  }
  .dropdown-menu li a {
      color: #000 !important;
  }
  .dropdown-menu li a:hover {
      background-color: #000 !important;
  }
  footer {
      background-color: #00ff00;
      color: #000000;
      padding-top: 20px;
      margin-top: 30px;
  }
  footer a {
      color: #000000;
  }
  footer a:hover {
      color: #777;
      text-decoration: none;
  }  
  .form-control {
      border-radius: 0;
  }
  textarea {
      resize: none;
  }


.col-sm-4 {
  padding-top: 0px;
  padding-bottom: 25px;
  opacity: 0.7;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.col-sm-4:hover {
  opacity: 1;
  -webkit-filter: none;
  filter: none;
}

.col-sm-6 {
  padding-top: 0px;
  padding-bottom: 25px;
  opacity: 0.5;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.col-sm-6:hover {
  opacity: 1;
  -webkit-filter: none;
  filter: none;
}

.col-sm-10
   {

  text-align: center;
  padding-top: 0px;
  padding-bottom: 25px;
}


.col-sm-12
   {

  padding-top: 0px;
  padding-bottom: 25px;
}


.col-sm-13
   {

  padding: 0px;
  opacity: 0.7;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

  .col-sm-13:hover {
  opacity: 1;
  -webkit-filter: none;
  filter: none;
}




.experimg {
  padding: 10px;

}

.experimg2 {
    padding: 10px;
  opacity: .4;
  webkit-transition: all 0.7s ease;
  transition: all 0.7s ease;}

.experimg2:hover {
  opacity: 1;
}



.heads {
  text-align: center;
  color: #000;
  font-size: 30px;
  background-color: #fff;
  padding-bottom: 20px;
  padding-top: 5px;}




.heads2 {
  text-align: center;
  color: #ccc;
  font-size: 30px;
  padding-bottom: 20px;}


.heads2:hover {
  text-shadow: 0px 0 15px #00ff00;}

  .heads3 {
  text-align: justify;
  color: #ooo;
  font-size: 3.0em;;
  padding-left: 15px;
  padding-right: 15px;}


  .heads4 {
  text-align: center;
  color: #000;
  font-size: 30px;
  padding-top: 0px;
  padding-bottom: 0px;}



.headspecial {
  text-align: center;
  color: #FFFFFF;
  font-size: 30px;
  margin-top: 10px;}


.headspecial:hover {
  text-shadow: 0px 0 15px #fff;}




div#overlay {
  z-index: 2;
  background: #000;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  text-align: center;
}

div#specialBox {
  background-color: #000;
  overflow: auto;
  text-align: center;
  position: relative;
  z-index: 2;
  padding: 5px;
  width: 100%;
  height: 100%;
}



div#wrapper {
  position:absolute;
  top: 0px;
  left: 0px;
}





div#overlay1 {

  z-index: 2;
  background: #000;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  text-align: center;
}

div#specialBox1 {

  overflow: auto;
  text-align: center;
  position: relative;
  z-index: 2;
  padding: 0px;
  width: 100%;
  height: 100%;
}


div#wrapper1 {
  position:absolute;
  top: 0px;
  left: 0px;
}



div#overlay2 {

  z-index: 2;
  background: #fff;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  text-align: center;
}


div#specialBox2 {

  color: #000;
  background-color: #fff;
  overflow: auto;
  text-align: center;
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;}

div#wrapper2 {
  position:absolute;
  top: 0px;
  left: 0px;
}