@font-face {
  font-family: 'Bebas';
  src: url('bebas/Bebas.eot?#iefix') format('embedded-opentype'),  url('bebas/Bebas.woff') format('woff'), url('bebas/Bebas.ttf')  format('truetype'), url('bebas/Bebas.svg#Bebas') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Comfortaa';
  src: url('comfortaa-regular/Comfortaa.eot?#iefix') format('embedded-opentype'),  url('comfortaa-regular/Comfortaa.woff') format('woff'), url('comfortaa-regular/Comfortaa.ttf')  format('truetype'), url('comfortaa-regular/Comfortaa.svg#Comfortaa') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Comfortaa';
  src: url('comfortaa-bold/Comfortaa-Bold.eot?#iefix') format('embedded-opentype'),  url('comfortaa-bold/Comfortaa-Bold.woff') format('woff'), url('comfortaa-bold/Comfortaa-Bold.ttf')  format('truetype'), url('comfortaa-bold/Comfortaa-Bold.svg#Comfortaa') format('svg');
  font-weight: bold;
  font-style: normal;
}

#wrapper
{
  position: relative;

}

#canvas {

  font-family: 'Bebas';
  font-size: 14px;


}

.zentrierer {

}

.startText {

  font-family: 'Bebas';
  font-size: 14px;
  color: #ffffff;
  width: 480px;
}

@media (device-width: 800px) {

    /* Breite entspricht genau 800 Pixel */
  .startText {
    font-size: 6px;
  }
}

.startText b {

  color: #00C7F4;
  font-weight: normal;

}

.ueberMichText {

  font-family: 'Comfortaa';
  font-size: 14px;
  color: #ffffff;
  width: 440px;
  height: 255px;
  padding-right: 15px;
  text-align: left!important;
}
.ueberMichText b {

  font-family: 'Comfortaa';
  color: #00C7F4;
 font-weight: bold;

}

.ueberMichText i {

  font-family: 'Comfortaa';
  color: #00C7F4;
  float: right;


}

.ueberMichText p{

  font-family: 'Bebas';
  color: #FFFFFF;
  text-align: center!important;

}

.ueberMichText p > b {

  font-family: 'Bebas';
  color: #00C7F4;

}

#theImg {

  width: 191px;
  height: 191px;

  float: left;
}

#logo {

  width: 200px;
  height: 183px;

  float: right;
}

#schrift{

  width: 20%;
  height: 24%;
  float: right;
}

.infoText {

  font-family: 'Comfortaa';
  font-size: 14px;
  color: #ffffff;
  width: 440px;
  height: 246px;
  padding-right: 15px;
  text-align: left!important;
}
.infoText b {

  color: #00C7F4;
  font-weight: normal;

}

.infoText  p{

  font-family: 'Bebas';
  color: #FFFFFF;
  text-align: center!important;
}

.infoText  p > b {

  font-family: 'Bebas';
  color: #00C7F4;

}

#preloader{

  width: 550px;
  height: 300px;


  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;

  background-image: url("../images/preloader.gif");
  background-repeat: no-repeat;
  margin: auto;
}


.kontaktText {

  font-family: 'Comfortaa';
  font-size: 14px;
  color: #ffffff;
  width: 250px;
  height: 255px;


}
.kontaktText a {

  color: #00C7F4;
  font-weight: normal;

}
.kontaktText p {

  font-family: 'Bebas';
  font-weight: normal;

}

/* perfect-scrollbar v0.6.11 */

.ps-container {
  -ms-touch-action: none;
  touch-action: none;
  overflow: hidden !important;
  -ms-overflow-style: none
}
@supports (-ms-overflow-style: none) {
  .ps-container {
    overflow: auto !important
  }
}
@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
  .ps-container {
    overflow: auto !important
  }
}
.ps-container.ps-active-x>.ps-scrollbar-x-rail,
.ps-container.ps-active-y>.ps-scrollbar-y-rail {
  display: block;
  background-color: transparent
}
.ps-container.ps-in-scrolling {
  pointer-events: none
}
.ps-container.ps-in-scrolling.ps-x>.ps-scrollbar-x-rail {
  background-color: #0000FF;
  opacity: 0.9
}
.ps-container.ps-in-scrolling.ps-x>.ps-scrollbar-x-rail>.ps-scrollbar-x {
  background-color: #FFFFFF;
}
.ps-container.ps-in-scrolling.ps-y>.ps-scrollbar-y-rail {
  background-color: #0000FF;
  opacity: 0.9
}
.ps-container.ps-in-scrolling.ps-y>.ps-scrollbar-y-rail>.ps-scrollbar-y {
  background-color: #FFFFFF;
}
.ps-container>.ps-scrollbar-x-rail {

  position: absolute;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  opacity: 0.6;
  -webkit-transition: background-color .2s linear, opacity .2s linear;
  -moz-transition: background-color .2s linear, opacity .2s linear;
  -o-transition: background-color .2s linear, opacity .2s linear;
  transition: background-color .2s linear, opacity .2s linear;
  bottom: 3px;
  height: 8px
}
.ps-container>.ps-scrollbar-x-rail>.ps-scrollbar-x {
  position: absolute;
  background-color: #00C7F4;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-transition: background-color .2s linear;
  -moz-transition: background-color .2s linear;
  -o-transition: background-color .2s linear;
  transition: background-color .2s linear;
  bottom: 0;
  height: 8px
}
.ps-container>.ps-scrollbar-y-rail {

  position: absolute;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  opacity: 0.6;
  -webkit-transition: background-color .2s linear, opacity .2s linear;
  -moz-transition: background-color .2s linear, opacity .2s linear;
  -o-transition: background-color .2s linear, opacity .2s linear;
  transition: background-color .2s linear, opacity .2s linear;
  right: 3px;
  width: 8px
}
.ps-container>.ps-scrollbar-y-rail>.ps-scrollbar-y {
  position: absolute;
  background-color: #00C7F4;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-transition: background-color .2s linear;
  -moz-transition: background-color .2s linear;
  -o-transition: background-color .2s linear;
  transition: background-color .2s linear;
  right: 0;
  width: 8px
}
.ps-container:hover.ps-in-scrolling {
  pointer-events: none
}
.ps-container:hover.ps-in-scrolling.ps-x>.ps-scrollbar-x-rail {
  background-color:#0000FF;
  opacity: 0.9
}
.ps-container:hover.ps-in-scrolling.ps-x>.ps-scrollbar-x-rail>.ps-scrollbar-x {
  background-color: #00C7F4
}
.ps-container:hover.ps-in-scrolling.ps-y>.ps-scrollbar-y-rail {
  background-color: #00C7F4;
  opacity: 0.9
}
.ps-container:hover.ps-in-scrolling.ps-y>.ps-scrollbar-y-rail>.ps-scrollbar-y {
  background-color: #00C7F4;
}
.ps-container:hover>.ps-scrollbar-x-rail,
.ps-container:hover>.ps-scrollbar-y-rail {
  opacity: 0.6
}
.ps-container:hover>.ps-scrollbar-x-rail:hover {
  background-color: #0000FF;
  opacity: 0.9
}
.ps-container:hover>.ps-scrollbar-x-rail:hover>.ps-scrollbar-x {
  background-color: #00C7F4;
}
.ps-container:hover>.ps-scrollbar-y-rail:hover {
  background-color: #0000FF;
  opacity: 0.9
}
.ps-container:hover>.ps-scrollbar-y-rail:hover>.ps-scrollbar-y {
  background-color: #00C7F4;
}