body{
  margin: 0;
}

.wrapper{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  padding: 0;
  margin: 0;
}

.mainContainer{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  padding: 0;
  width: 640px;
  height: 1138px;
  transform-origin: 50% 50%;
  overflow: hidden;
}

.alternativeScale{
  transform-origin: 0% 50%
}

.text_start,.text_connect_console, .text_connect_greeting, .text_upload, .text_question_1{
  white-space: pre-line;
/*  white-space: pre-wrap;*/
}
.text_upload_2{
  display: none;
 line-height: 50px;
}
.error .text_upload_2{
  display: block;
}

.text_connect_name < p{
  margin-top: 100px;
}
.text_20{
  font-size: 20px;
}

.text_26{
  font-size: 26px;
  line-height: 41px;
}
.text_white{
  color: white;
}
.imageContainer{
      width: 300px;
      height: 400px;
      position: absolute;
      overflow: hidden;
      pointer-events: none;
    }
    .imageContainer img{
      position: absolute;
      width: 100%;
    }

    #file,#file2, .inputContainer{
      z-index: 9999;
      top: 0;
      left: 0;
      height: 60px;
      width: 100%;
      position: absolute;
    }
    
    .imageInput{
      opacity: 0;
      position: absolute;
      margin-top: 0px;
    }
    .nameInput{
/*      font: "Helvetica", Sans-Serif;*/
      display: none;
/*      margin-top: 50px;*/
      border: none;background-color: none;
      background-color: transparent;
      background-color: rgba(55, 132, 164, 0.25);
      color: white;
      outline: none;
      padding: 6px 0;
      text-indent: 6px;
      opacity: 0;
      -webkit-transition-duration: 0.4s;
      transition-duration: 0.4s;
    }

    .connect .nameInput{
      display: block;
/*      width: 100%;*/
      width: 530px;
    }
.nameInputContainer{
/*  position: absolute;*/
  width: 100%;
  top: 550px;
/*  left: 6px;*/
}
.inputCursor{
  position: absolute;
  top: 0px;
  left: 6px;
  color: white;
  font-size: 30px;
  line-height: 53px;
  -webkit-animation: cursorBlink 0.5s ease-in-out forwards infinite;
  animation: cursorBlink 0.5s ease-in-out forwards infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  opacity: 1;
  display: none;
}

@-webkit-keyframes cursorBlink {
  0%{opacity: 1;}
  48%{opacity: 1;}
  52%{opacity: 0;}
  100%{opacity: 0;}
}

@keyframes cursorBlink {
  0%{opacity: 1;}
  48%{opacity: 1;}
  52%{opacity: 0;}
  100%{opacity: 0;}
}

    #canvas{
/*      display: none;*/
    }
    .canvasContainer{
      position: absolute;
      top: 600px;
      
      left: 0;
      width: 100%;
    }
    .resultCanvas{
      pointer-events: none;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      width: 100%;
      margin: auto;
/*      top: -0px;*/
/*      transform-origin: 0% 0%;*/
/*      -webkit-transform: scale(0.5);*/
/*      transform: scale(0.5);*/
    }
    .background{
      overflow: hidden;
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
    }
    .grid{
      width: 100%;
      height: 100%;
/*      background-size: 10%;*/
      background-image: url(../img/backgroundGrid.jpg);
    }

.viewContainer{
  color: #3784a4;
  font-family: "Helvetica", Sans-Serif;
  position: absolute;
  left: 0;
  top: 17%;
/*  height: 100%;*/
  width: 100%;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
}


.box_top, .box_bot{
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
}

.box_top{
  position: relative;
  left: 0;
  right: 0;
  margin: auto;
  width: 86%;
  max-width: 550px;
/*  display: flex;*/
/*  background-color: aqua;*/
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border: 2px solid #3784a4;
  background-color: rgba(0, 0, 0, 0.8);
}

.box_bot{
  position: relative;
  left: 0;
  right: 0;
  margin: auto;
  width: 86%;
  max-width: 550px;
  margin-top: 30px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border: 2px solid #ffee00;
  background-color: rgba(0, 0, 0, 0.8);
}

.box_header{
  border-bottom: 0px solid #3784a4;
  line-height: 70px;
  text-align: center;
  font-size: 27px;
  height: 0;
  opacity: 0;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
}

.fbi_logo{
  position: absolute;
  top: 0;
  width: 100%;
/*  width: auto;*/
  height: 100%;
  background-image: url(../img/fbi_logo.png);
  background-size: cover;
  background-position: center center;
/*
  height: 100%;
  width: 100%;
*/
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
}

.fbi_logo img{
/*  position: absolute;*/
  display: block;
  height: auto;
  width: 100%;
/*  bottom: 0;*/
/*  display: none;*/
}

.loadingbarIntro{
  pointer-events: none;
/*  background-color: aqua;*/
  width: 100%;
  height: 86px;
  opacity: 1;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
  
}
.progressContainer{
/*  display: none;*/
  position: absolute;
  width: calc(100% - 16px);
  height: 70px;
  margin: 8px;
  //margin-top: 7px;
  //margin-left: 7px;
}


.progressText_outer, .progressText_inner{
  color: black;
  position: absolute;
  line-height: 70px;
  text-align: left;
  font-size: 27px;
  text-indent: 16px;
  text-overflow: clip;
  white-space: nowrap;
}

.progressText_outer{
  color: #ffee00;
/*  display: none;*/
}

.progress{
  background-color: #ffee00;
  height: 70px;
  width: 8%;
  overflow: hidden;
  text-overflow: clip;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
}

.box_text{
  margin-left: 25px;
  margin-right: 25px;
  font-size: 20px;
  line-height: 32px;
}

.start_text{
  position: absolute;
  top: 0;
  margin-top: 80px;
  height: 0;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
/*  width: 100%;*/
/*  font-size: 30px;*/
  margin-right: 30px;
  margin-left: 30px;
}
.text_start{

  font-size: 22px;
}

.animateLadingBar .progress{
  -webkit-animation: loadingAnim 1.5s ease-in-out forwards infinite;
  animation: loadingAnim 1.5s ease-in-out forwards infinite;
}

@-webkit-keyframes loadingAnim {
  0%{width: 8%;}
  20%{ width: 20%}
  40%{ width: 20%}
  60%{ width: 60%}
  70%{ width: 60%}
  100%{width: 100%;}
}

@keyframes loadingAnim {
  0%{width: 8%;}
  20%{ width: 20%}
  40%{ width: 20%}
  60%{ width: 60%}
  70%{ width: 60%}
  100%{width: 100%;}
}

/*---------------------------------------------START---------------------------------------------*/

.start.viewContainer {
  top: 7%;
}

.start .box_top, .start .box_bot{
  width: 92%;
  max-width: 700px;
  border: 2px solid #3784a4;
}

.loaded .box_bot{
  border: 2px solid #3784a4;
}

.start .fbi_logo{
  opacity: 0;
/*  height: 0;*/
}

.start .box_header{
  border-bottom: 2px solid #3784a4;
  height: 70px;
  opacity: 1;
}

.start .start_text{
/*  height: 500px;*/
  height: auto;
}

.buttonContainer{
/*  background-color: azure;*/
  pointer-events: none;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  margin-top: 0;
  margin-bottom: 0;
  position: relative;
  width: 100%;
  height: 86px;
  border: none;
  opacity: 1;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
}

.buttonContainer_connect{
  display: none;
}

.start .buttonContainer_connect {
  display: block;
  cursor: pointer;
  width: 266px;
  height: 55px;
  margin-top: 42px;
  margin-bottom: 42px;
  border: 2px solid #c1c1c1;
  color: #c1c1c1;
/*  border: 2px solid #ffee00;*/
}

.buttonContainer_connect .diagonalBg{
  display: none;
}
.buttonContainer_connect {
  opacity: 0.5;
  pointer-events: none;
  border-color: aqua;
}

.enabled.buttonContainer_connect, .buttonContainer_name{
  pointer-events: all;
  cursor: pointer;
  border: 2px solid #ffee00;
  color: #ffee00;
  opacity: 1;
}
.buttonContainer_name{
  width: 266px;
  height: 55px;
  right: 0;
  left: auto;
  position: relative;
  top: 60px;
  float: right;
  opacity: 0;
    -webkit-animation: fadeInAnim 0.2s ease-in-out forwards 1;
  animation: fadeInAnim 0.2s ease-in-out forwards 1;
  display: none;
}
.enabled.buttonContainer_connect .diagonalBg{
   display: block;
}

.loaded .buttonContainer_start {
  width: 266px;
  height: 55px;
  margin-top: 20px;
  margin-bottom: 20px;
  border: 2px solid #ffee00;
  pointer-events: all;
  cursor: pointer;
  
}
.start .buttonContainer_start {
  width: 266px;
  display: none;
  height: 0;
  margin: 0;
  margin-bottom: 20px;
  border: 2px solid #ffee00;
  pointer-events: all;
  cursor: pointer;
  opacity: 0;

}

.loaded .loadingbarIntro{
  opacity: 0;
  display: none;
}

.startButton, .connectButton, .uploadButton, .detectionButton, .nameButton, .refreshButton {
  pointer-events: none;
  z-index: 999;
/*  color: #ffee00;*/
  font-size: 24px;
  text-align: center;
  line-height: 55px;
  height: 0;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
}
.startButton, .uploadButton, .detectionButton{
  color: #ffee00;
}

.connectButton, .startButton{
  opacity: 0;
}

.diagonalBg{
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: 40px;
   -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  background-position: 0 bottom;
  background-image: url(../img/button_diagonal_bg.png);
}

.loaded .diagonalBg{
  opacity: 0.3;
  -webkit-animation: slotColumnAnim 0.5s linear forwards infinite;
  animation: slotColumnAnim 0.5s linear forwards infinite;
}

@-webkit-keyframes slotColumnAnim {
  0%{background-position: 0 bottom;}
  100%{background-position: 40px bottom;}
}

@keyframes slotColumnAnim {
  0%{background-position: 0 bottom;}
  100%{background-position: 40px bottom;}
}



.loaded .startButton,.start .connectButton, .uploadButton{
 opacity: 1;
}

.connect .box_top{
  opacity: 0;
}

.connect .box_top .box_header{
  height: 0;
  opacity: 0;
}

.connect .start_text{
  overflow: hidden;
  height: 0px;
}

.connect .buttonContainer_connect{
  height: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  border: 0px solid #ffee00;
  opacity: 0;
  pointer-events: none;
  cursor:default;
}

.connect_text, .upload_text, .detection_text{
  position: absolute;
  top: 70px;
  height: 0;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
}
.heightController_bot, .heightController_top{
  height: 0;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
}

.connect .heightController_bot{
  height: 720px;
}

.restart .heightController_bot{
  height: 330px;
}

@media only screen and (max-width: 640px) {
    .grid{
      background-size: 10%;
    }
}
.textTest{
  width: 100%;
  height: 100%;
  position: absolute;
  color: white;
  top: 0;
  left: 0;
  pointer-events: none;
  white-space: pre-line;
}

.connect_text{
  display: none;
}
.connect .connect_text{
  display: block;
}
.upload .connect_text{
  display: none;
}

.connect.viewContainer {
  top: 4%;
}

.restart.viewContainer {
  top: 24%;
}

.upload .heightController_bot{
  height: 330px;
}

.upload .connect_text{
  display: none;
}
.upload_text{
  display: none;
}
.upload .upload_text{
  display: block;

}

.upload .connect_text{
  height: 0px;
}
.upload.viewContainer {
  top: 27%;
}

.upload .buttonContainer.buttonContainer_connect{
  pointer-events: none;
  cursor: pointer;
  width: 266px;
  height: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  border: 0px solid transparent;
}

.buttonContainer_upload{
  pointer-events: none;
  cursor: default;
  width: 266px;
  height: 0px;
  bottom: 0;
  margin: 0;
  margin-top: 0px;
  opacity: 0;
  border: 0px solid transparent;
}

.upload .buttonContainer_upload{
  position: absolute;
  pointer-events: all;
  cursor: pointer;
  width: 266px;
  height: 55px;
  top: 225px;
  margin: 0;
  -webkit-animation: fadeInAnim 0.2s ease-in-out 1.3s forwards 1;
  animation: fadeInAnim 0.2s ease-in-out 1.3s forwards 1;
  border: 2px solid #ffee00;
}

@-webkit-keyframes fadeInAnim {
  0%{opacity: 0; -webkit-transform: scale(0.5);}
  100%{opacity: 1; -webkit-transform: scale(1);}
}


@keyframes fadeInAnim {
  0%{opacity: 0; transform: scale(0.5);}
  100%{opacity: 1; transform: scale(1);}
}


.detect.viewContainer {
  top: 14%;
}

.detectionComplete.viewContainer {
  top: 4%;
}


.detect .heightController_bot{
  height: 530px;
}

.detect .upload_text{
  display: none;
}

.detection_text{
  display: none;
}

.detect .detection_text{
  display: block;
}

.detection_box{
  position: absolute;
  left: 0;
  right: 0;
  top: 136px;
  margin: auto;
  width: 536px;
  height: 0px;
  border: 2px solid white;
  overflow: hidden;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
}

.detect .detection_box{
  top: 20px;
  -webkit-animation: animateDetectBox 0.4s linear forwards 1;
  animation: animateDetectBox 0.4s linear forwards 1;
}

@-webkit-keyframes animateDetectBox {
  0%{height: 0;}
  100%{height: 466px;}
}

@keyframes animateDetectBox {
  0%{height: 0;}
  100%{height: 466px;}
}

.detection_box .image_container{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  overflow: hidden;
  justify-content: center;
  align-content: center;
  display: flex;
  -webkit-animation: animateDetectBox 0.4s linear forwards 1;
  animation: animateDetectBox 0.4s linear forwards 1;
}

.scanner{
  top: 0;
  position: absolute;
  background-color: #f8f8d8;
  border-radius: 3px;
  box-shadow: 0px -10px 40px 5px #ffee00;
/*  width: calc(100% - 40px);*/
/*  left: 20px;*/
  width: 100%;
  left: 0px;
  height: 5px;
  -webkit-animation: scannerAnim 2.5s ease-in-out forwards 2;
  animation: scannerAnim 2.5s ease-in-out forwards 2;
  top: -20px;
  top: calc( 100% + 20px);
}

@-webkit-keyframes scannerAnim {
  0%{top: -30px; -webkit-transform: scaleY(1)}
  40%{top: 500px; -webkit-transform: scaleY(1)}
  50%{top: 500px; -webkit-transform: scaleY(-1)}
  90%{top: -30px; -webkit-transform: scaleY(-1)}
  100%{top: -30px; -webkit-transform: scaleY(1)}
}

@keyframes scannerAnim {
  0%{top: -30px; transform: scaleY(1)}
  40%{top: 500px; transform: scaleY(1)}
  50%{top: 500px; transform: scaleY(-1)}
  90%{top: -30px; transform: scaleY(-1)}
  100%{top: -30px; transform: scaleY(1)}
}

.IE .scanner{
  display: none;
  -webkit-animation: none;
  animation: none;
}

.imageScanner{
  background-repeat: no-repeat;
  display: block;
  width: 100%;
  height: 100%;
/*  background-image: url(../img/1_kZQXEoBGYRgmeYsA13HpRw.jpeg);*/
  background-size: 200% auto;
  background-position: top left;
  -webkit-animation: detectionAnim 5s ease-in-out forwards 1;
  animation: detectionAnim 5s ease-in-out forwards 1;
}

@-webkit-keyframes detectionAnim {
  0%{background-position: center center;background-size: auto 100%;}
  10%{background-position: center center;background-size: auto 100%;}
  20%{background-position: bottom right;background-size: auto 200%;}
  30%{background-position: bottom right;background-size: auto 200%;}
  40%{background-position: bottom left;background-size: auto 200%;}
  50%{background-position: bottom left;background-size: auto 200%;}
  60%{background-position: top left; background-size: auto 300%;}
  70%{background-position: top left;background-size: auto 300%;}
  80%{background-position: top right;background-size: auto 200%;}
  90%{background-position: top right;background-size: auto 200%;}
  100%{background-position: center center;background-size: auto 100%;}
}

@keyframes detectionAnim {
/*
  0%{background-position: center center;background-size: 100% auto;}
  10%{background-position: center center;background-size: 100% auto;}
  20%{background-position: bottom right;background-size: 200% auto;}
  30%{background-position: bottom right;background-size: 200% auto;}
  40%{background-position: bottom left;background-size: 200% auto;}
  50%{background-position: bottom left;background-size: 200% auto;}
  60%{background-position: top left; background-size: 300% auto;}
  70%{background-position: top left;background-size: 300% auto;}
  80%{background-position: top right;background-size: 200% auto;}
  90%{background-position: top right;background-size: 200% auto;}
  100%{background-position: center center;background-size: 100% auto;}
*/
  0%{background-position: center center;background-size: auto 100%;}
  10%{background-position: center center;background-size: auto 100%;}
  20%{background-position: bottom right;background-size: auto 200%;}
  30%{background-position: bottom right;background-size: auto 200%;}
  40%{background-position: bottom left;background-size: auto 200%;}
  50%{background-position: bottom left;background-size: auto 200%;}
  60%{background-position: top left; background-size: auto 300%;}
  70%{background-position: top left;background-size: auto 300%;}
  80%{background-position: top right;background-size: auto 200%;}
  90%{background-position: top right;background-size: auto 200%;}
  100%{background-position: center center;background-size: auto 100%;}
}


/*
.detect .scannerBox{
  position: absolute;
  border: 2px solid rgba(255, 255, 255, 0.5);
  background-color: rgba(240, 248, 255, 0.2);
  width: 50%;
  height: 50%;
  -webkit-animation: scanBoxAnim 5s ease-in-out forwards infinite;
  animation: scanBoxAnim 5s ease-in-out forwards infinite;
}

@-webkit-keyframes scanBoxAnim {
  0%{opacity: 0;}
  22%{opacity: 0; width: 40%; height: 30%; left: 45%; top: 15%;}
  25%{opacity: 1; width: 50%; height: 40%; left: 40%; top: 10%;}
  35%{opacity: 1; width: 50%; height: 40%; left: 40%; top: 10%;}
  37%{opacity: 0; width: 50%; height: 40%; left: 40%; top: 10%;}
  42%{opacity: 0; width: 32%; height: 24%; left: 17%; top: 62%;}
  45%{opacity: 1; width: 36%; height: 28%; left: 15%; top: 60%;}
  55%{opacity: 1; width: 36%; height: 28%; left: 15%; top: 60%;}
  57%{opacity: 0; width: 36%; height: 28%; left: 15%; top: 60%;}
  82%{opacity: 0; width: 36%; height: 28%; left: 47%; top: 51%;}
  85%{opacity: 1; width: 40%; height: 30%; left: 45%; top: 50%;}
  95%{opacity: 1; width: 40%; height: 30%; left: 45%; top: 50%;}
  97%{opacity: 0; width: 40%; height: 30%; left: 45%; top: 50%;}
  100%{opacity: 0; width: 40%; height: 30%; left: 45%; top: 50%;}
}

@keyframes scanBoxAnim {
  0%{opacity: 0;}
  22%{opacity: 0; width: 40%; height: 30%; left: 45%; top: 15%;}
  25%{opacity: 1; width: 50%; height: 40%; left: 40%; top: 10%;}
  35%{opacity: 1; width: 50%; height: 40%; left: 40%; top: 10%;}
  37%{opacity: 0; width: 50%; height: 40%; left: 40%; top: 10%;}
  42%{opacity: 0; width: 32%; height: 24%; left: 17%; top: 62%;}
  45%{opacity: 1; width: 36%; height: 28%; left: 15%; top: 60%;}
  55%{opacity: 1; width: 36%; height: 28%; left: 15%; top: 60%;}
  57%{opacity: 0; width: 36%; height: 28%; left: 15%; top: 60%;}
  82%{opacity: 0; width: 36%; height: 28%; left: 47%; top: 51%;}
  85%{opacity: 1; width: 40%; height: 30%; left: 45%; top: 50%;}
  95%{opacity: 1; width: 40%; height: 30%; left: 45%; top: 50%;}
  97%{opacity: 0; width: 40%; height: 30%; left: 45%; top: 50%;}
  100%{opacity: 0; width: 40%; height: 30%; left: 45%; top: 50%;}
}
*/

.buttonContainer_detection, .buttonContainer_fragebogen, .buttonContainer_poster{
  display: none;
  pointer-events: none;
  cursor: default;
  width: 220px;
  height: 55px;
  bottom: 0;
  margin: 0;
  margin-top: 0px;
  opacity: 0;
  border: 2px solid #ffee00;
  top: 655px;
}

.buttonContainer_detection2{
  left: auto;
  right: 0;
}

.buttonContainer_fragebogen{
  position: relative;
  top: auto;
  margin-left: 30px;
  margin-top: 52px;
}

.detectionComplete .buttonContainer_detection{
  display: block;
  position: absolute;
  pointer-events: all;
  cursor: pointer;
  -webkit-animation: fadeInAnim 0.2s ease-in-out 1.5s forwards 1;
  animation: fadeInAnim 0.2s ease-in-out 1.5s forwards 1;
}

.buttonContainer_fragebogen, .buttonContainer_poster{
  -webkit-animation: fadeInAnim 0.2s ease-in-out forwards 1;
  animation: fadeInAnim 0.2s ease-in-out forwards 1;
}

.detectionComplete .buttonContainer_detection2{
  -webkit-animation: fadeInAnim 0.2s ease-in-out 1.6s forwards 1;
  animation: fadeInAnim 0.2s ease-in-out 1.6s forwards 1;
}

.detectionComplete .detection_box{
  top: 136px;
}
.detectionComplete .detection_box .image_container{
  width: 288px;
  height: 384px;
}
.detectionComplete .heightController_bot{
  height: 772px;
}
.detectionComplete .imageScanner {
  display: none;
}

#canvas {
  display: none;
}
.detectionComplete #canvas {
  display: block;
}

.errorText{
/*  display: none;*/
  
  font-size: 25px;
  margin-top: 180px;
  padding: 20px;
  text-align: center;
  color:  #ffee00;
  -webkit-animation: errorAnim 5s ease-in-out forwards 3;
  animation: errorAnim 5s ease-in-out forwards 3;
}

@-webkit-keyframes errorAnim {
  0%{opacity: 0; -webkit-transform: scale(0.5)}
  5%{opacity: 1; -webkit-transform: scale(1.1)}
  10%{opacity: 1; -webkit-transform: scale(1)}
  20%{opacity: 1; -webkit-transform: scale(1)}
  25%{opacity: 1; -webkit-transform: scale(1.1)}
  30%{opacity: 1; -webkit-transform: scale(1)}
  40%{opacity: 1; -webkit-transform: scale(1)}
  45%{opacity: 1; -webkit-transform: scale(1.1)}
  50%{opacity: 1; -webkit-transform: scale(1)}
  60%{opacity: 1; -webkit-transform: scale(1)}
  100%{opacity: 1; -webkit-transform: scale(1)}
}


@keyframes errorAnim {
  0%{opacity: 0; transform: scale(0.5)}
  5%{opacity: 1; transform: scale(1.1)}
  10%{opacity: 1; transform: scale(1)}
  20%{opacity: 1; transform: scale(1)}
  25%{opacity: 1; transform: scale(1.1)}
  30%{opacity: 1; transform: scale(1)}
  40%{opacity: 1; transform: scale(1)}
  45%{opacity: 1; transform: scale(1.1)}
  50%{opacity: 1; transform: scale(1)}
  60%{opacity: 1; transform: scale(1)}
  100%{opacity: 1; transform: scale(1)}
}
.errorContainer{
  display: none;
  opacity: 0.8;
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: 40px;
  background-image: url(../img/error_diagonal_bg.png);
}

.detectionError .errorContainer{
  display: block;
}

.heightController_top{
  height: 500px;
}

.connect .heightController_top{
  height: 0px;
}

.questions .box_top{
  opacity: 1;
}



.questions .heightController_bot, .questions .detection_text{
  height: 0px;
  opacity: 0;
}

.questions .heightController_top{
  height: 670px;
}

.questions .box_top .box_header{
  height: 70px;
  opacity: 1;
}

.questions.viewContainer {
  top: 10%;
}

.questions .detection_box{
  top: 0px;
  opacity: 0;
  -webkit-animation: animateDetectBoxOut 0.2s linear forwards 1;
  animation: animateDetectBoxOut 0.2s linear forwards 1;
}

.questions .box_bot{
  opacity: 0;
}


.questions2.viewContainer {
  top: 4%;
}

.questions2 .heightController_top{
  height: 840px;
}

@-webkit-keyframes animateDetectBoxOut {
  0%{height: 466px;}
  100%{height: 0;}
}

@keyframes animateDetectBoxOut {
  0%{height: 466px;}
  100%{height: 0;}
}

.questions .buttonContainer_detection{
  top: 0;
  -webkit-animation: fadeOutAnim 0.4s ease-in-out forwards 1;
  animation: fadeOutAnim 0.4s ease-in-out forwards 1;
}

@-webkit-keyframes fadeOutAnim {
  100%{opacity: 0; -webkit-transform: scale(0.5);}
  0%{opacity: 1; -webkit-transform: scale(1);}
}


@keyframes fadeOutAnim {
  100%{opacity: 0; transform: scale(0.5);}
  0%{opacity: 1; transform: scale(1);}
}

.noselect{
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

input[type=text]{

}

input[type=file] {
    background:#ccc; 
    border:0 none;
    cursor:pointer;
    -webkit-border-radius: 5px;
    border-radius: 5px; 
}

.fragebogen_body{
  position: absolute;
  top: 210px;
  top: 71px;
  width: 100%;
}

.antwort_container{
  color: white;
/*  opacity: 0;*/
  width: 90%;
  line-height: 30px;
  font-size: 22px;
  cursor: pointer;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  margin: 0px auto 42px auto;
  padding: 0;
  transform-origin: 0% 0%;
  -webkit-animation: answerAnimIn 0.1s ease-in-out forwards 1;
  animation: answerAnimIn 0.1s ease-in-out forwards 1;
}

@-webkit-keyframes answerAnimIn {
  0%{opacity: 0; -webkit-transform: scale(0.5);}
  100%{opacity: 1; -webkit-transform: scale(1);}
}


@keyframes answerAnimIn {
  0%{opacity: 0; transform: scale(0.5);}
  100%{opacity: 1; transform: scale(1);}
}

.antwort_container.selected{
    font-weight: bold;
}

.antwort_element{
  box-sizing: border-box;
  flex-grow: 10;
  width: 100%;
  padding: 0px 0px 0px 0px;
  overflow: hidden;
  list-style: none;
  width: 80px;
  align-items: center;

}

.antwort_text{
  width: calc( 100% - 80px );
}

.antwort_checkbox_container{
  width: 100%;
  height: 100%;
  align-items: center;
  display: flex;
  -webkit-transition-duration: .2s;
  transition-duration: .2s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.antwort_content_container{
  width: 100%;
  height: 100%;
  align-items: center;
  display: flex;
}

.antwort_checkbox{
  width: 55px;
  height: 55px;
  border: 2px solid #3784a4;
  opacity: 1;
 
}

.checkbox_cross{
  width: 100%;
  height: 100%;
  background-image: url(../img/cross.svg);
  background-size: 50%;
  background-position: center;
  background-repeat: no-repeat;
  display: none;
}

.saveBtn{
  display: none;
  float: left
}
.printBtn{
  display: none;
  left: 0;
  right: 0;
  margin: auto;
}
.restartBtn{
  display: none;
  float: right;
}

.active.fragebogenBtn1{
  pointer-events: all;
  cursor: pointer;
  display: block;
  opacity: 1;
}

.fragebogenBack, .fragebogenBtn2{
  margin-top: 25px;
}

.active.fragebogenBtn2{
  pointer-events: all;
  cursor: pointer;
  display: inline-block;
  float: right;
  margin-left: 0;
  margin-right: 30px;
}

.fragebogenBack, .fragebogenBtn2 {
  position: absolute;
/*  top: 645px;*/
  top: 725px;
  left: 0;
}
.fragebogenBtn2  {
  position: absolute;
  right: 0;
  left: auto;
}

.fragebogenRefresh{
  position: absolute;
  top: 590px;
  right: 0;
  left: auto;
  margin-left: 0;
  margin-right: 30px;
  border-color: #3784a4;
  display: block;
  pointer-events: all;
}
.refreshButton{
  text-align: left;
  text-indent: 20px;
  font-size: 20px;
}
.active.fragebogenBack{
  pointer-events: all;
  cursor: pointer;
  display: inline-block;
}

.selected .checkbox_cross{

  display: block;

}

.question_text {
  margin-bottom: 60px;
}

.antwort1, .antwort2, .fragebogenBack{
  display: none;
}

.text_question_2{
  position: absolute;
  width: 92%;
}

.fragebogenBtn1{
  margin-top: 80px
}

.antwort1.topAnswer{
  margin-top: 130px;
}

.antwort2.topAnswer{
  margin-top: 120px;
}
/*
.bgAnim_part2{
  -webkit-animation: bgAnim1 1s ease-in-out forwards infinite;
  animation: bgAnim1 1s ease-in-out forwards infinite;
}

@-webkit-keyframes bgAnim1 {
  0%{-webkit-transform: scale(0.5);}
  100%{-webkit-transform: scale(1);}
}


@keyframes bgAnim1 {
  0%{transform: rotate(0deg);}
  100%{transform: rotate(180deg);}
}*/

.poster.viewContainer{
  margin-top: 0;
  top: 50px;
}
.poster .buttonContainer_fragebogen,.poster  .text_detection,.poster  .buttonContainer_detection {
  display: none;
}
.poster .heightController_top, .poster .box_top .box_header{
  height: 0;
}


.questions .buttonContainer_detection{
  display: none;
}
.poster .box_top{
  opacity: 0;
}

.poster .box_bot{
  opacity: 1;
  width: 550px;
  height: 687px;
  background-color: #cbcfd0;
  border: 5px solid #cbcfd0;
  border-radius: 5px;
}

.poster .box_header{
  display: none;
}

.poster .heightController_bot{
  height: 765px;
}

.poster .detection_box{
  margin: 0;
  opacity: 1;
  width: 100%;
  top: 0;
   border: none;
  -webkit-animation: animateDetectBoxPoster 0.4s linear forwards 1;
  animation: animateDetectBoxPoster 0.4s linear forwards 1;
}

@-webkit-keyframes animateDetectBoxPoster {
  0%{height: 0;}
  100%{height: 100%;}
}

@keyframes animateDetectBoxPoster {
  0%{height: 0;}
  100%{height: 100%;}
}
.poster .detection_text{
  opacity: 1;
  top: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  
}

.poster .image_container{
  width: 100% !important;
  margin: 0;
  overflow: visible;
/*  height: 100%;*/
}
.poster .resultCanvas{
  margin: 0;
  width: 100%;
  height: auto;
  background-color: white;
}

.buttonContainer_poster{
  width: 168px;
  top: 0;
}

.active.buttonContainer_poster{
  width: 168px;
  top: 0;
  display: inline-block;
}

.poster .buttonContainer_poster{
 pointer-events: all;
  cursor: pointer;
}

.posterButtons{
  margin-top: 60px;
  text-align: center;
  display: none;
}
.poster .posterButtons{
  display: block;
}


.poster_box{
  width: 540px;
  left: 0;
  right: 0;
  margin: auto;
  margin-top: 60px;
  font-size: 18px;
  color: white;
  line-height: 24px;
/*  white-space: pre-line;*/
}

.hrefContent{
  width: 100%;
  height: 100%;
  background-color: red;
}

.inactive{
  pointer-events: none;
  -webkit-animation: none;
  animation: none;
  opacity: 0;
}




.backgroundAnimTopContainer{
  height:  1138px;
  width: 640px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;  
}
.backgroundAnimTop{
  opacity: 0.25;
  position: absolute;
  top: -140px;
  left: 60px;
  width: 740px;
  height: 740px;
}
.backgroundAnimTop img{
  width: 100%;
  height: 100%;
  position: absolute;
}

.bgAnim_part2{
  -webkit-animation: bgAnim1 5s ease-in-out forwards infinite;
  animation: bgAnim1 5s ease-in-out forwards infinite;
}

@-webkit-keyframes bgAnim1 {
  0%{-webkit-transform: rotate(0deg);}
  30%{-webkit-transform: rotate(200deg);}
  50%{-webkit-transform: rotate(100deg);}
  100%{-webkit-transform: rotate(360deg);}
}

@keyframes bgAnim1 {
  0%{transform: rotate(0deg);}
  30%{transform: rotate(200deg);}
  50%{transform: rotate(100deg);}
  100%{transform: rotate(360deg);}
}

.bgAnim_part3{
  -webkit-animation: bgAnim2 10s linear forwards infinite;
  animation: bgAnim2 10s linear forwards infinite;
}

@-webkit-keyframes bgAnim2 {
  0%{transform: rotate(360deg);}
  100%{transform: rotate(0deg);}
}

@keyframes bgAnim2 {
  0%{transform: rotate(360deg);}
  100%{transform: rotate(0deg);}
}

.radialContainer{
  bottom: 44px;
  left: 274px;
  top: auto;
/*  opacity: 0.8;*/
/*  overflow: hidden;*/
}

.radialContainer, .segmentContainer, .segmentMask, .radialContainer img, .radialProgress, .radialPercent{
  position: absolute;
  display: block;
  width: 136px;
  height: 136px;
}
.segmentContainer, .segmentMask, .radialContainer img, .radialProgress, .radialPercent{
  top: 0;
  left: 0;
}
.radialPercent{
  font-family: "Helvetica", Sans-Serif;
  text-align: center;
  line-height: 136px;
  color: white;
/*  background-color: aqua;*/
}
.radialProgress{
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.radBg{
  opacity: 0.14;
}

.segmentMask{
/*  background-color: rgba(0, 255, 255, 0.22);*/
  width: 68px;
  height: 136px;
  overflow: hidden;
}

.radSegment1{
  -webkit-transform: rotate(1deg);
  transform: rotate(1deg);
}
.radSegment2{
  -webkit-transform: rotate(73deg);
  transform: rotate(73deg);
}
.radSegment3{
  -webkit-transform: rotate(144deg);
  transform: rotate(144deg);
}
.radSegment4{
  -webkit-transform: rotate(216deg);
  transform: rotate(216deg);
}
.radSegment5{
  -webkit-transform: rotate(288deg);
  transform: rotate(288deg);
}

.radSeg{
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  -webkit-transition-duration: 0.8s;
  transition-duration: 0.8s;
}

.radSeg.active{
  -webkit-transform: rotate(-18deg);
  transform: rotate(-18deg);
}

.backgroundAnimBottom{
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  opacity: 1;
}
.backgroundAnimBottom.hide{
  opacity: 0;
}
.bars{
  position: absolute;
  display: inline-block;
  bottom: 44px;
  left: 45px;
}
.animBar{
/*  background-color: aqua;*/
  
  position: relative;
  width: 170px;
  height: 35px;
  margin-top: 16px;
}
.bar1{
  margin: 0;
}
.animBarBorderTop, .animBarBorderBot{
  position: absolute;
  border: 2px solid white;
  height: 5px;
  width: calc( 100% - 4px);
  left: 0;
}
.animBarBorderTop{
  top: 0;
  border-bottom: none
}.animBarBorderBot{
  bottom: 0;
  border-top: none;
}

.animBarBg, .animBarCenter{
  position: absolute;
  width: calc(100% - 16px);
  height: calc(100% - 10px);
  margin-left: 8px;
  margin-top: 5px;
}

.animBarBg{
  background-color: white;
  opacity: 0.14;
}
.animBarCenter{
  opacity: 1;
}
.animBarProgress{
  background-color: white;
  width: 50%;
  height: 100%;
}

.bar1 .animBarProgress{
  -webkit-animation: barAnim1 8.5s ease-in-out forwards infinite;
  animation: barAnim1 8.5s ease-in-out forwards infinite;
}
.bar2 .animBarProgress{
  -webkit-animation: barAnim1 8s ease-in-out forwards infinite;
  animation: barAnim1 8s ease-in-out forwards infinite;
  -webkit-animation-direction: reverse;
  animation-direction: reverse;
}
.bar3 .animBarProgress{
  -webkit-animation: barAnim1 9s ease-in-out forwards infinite;
  animation: barAnim1 9s ease-in-out forwards infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

@-webkit-keyframes barAnim1 {
  0%{width: 5%;}
  15%{width: 60%;}
  25%{width: 60%;}
  40%{width: 30%;}
  50%{width: 30%;}
  65%{width: 80%;}
  75%{width: 80%;}
  90%{width: 5%;}
  100%{width: 5%;}
}

@keyframes barAnim1 {
  0%{width: 5%;}
  15%{width: 60%;}
  25%{width: 60%;}
  40%{width: 30%;}
  50%{width: 30%;}
  65%{width: 80%;}
  75%{width: 80%;}
  90%{width: 5%;}
  100%{width: 5%;}
}


/*

@-webkit-keyframes barAnim2 {
  0%{width: 33%;}
  15%{width: 70%;}
  25%{width: 70%;}
  40%{width: 20%;}
  50%{width: 20%;}
  65%{width: 75%;}
  75%{width: 75%;}
  100%{width: 33%;}
}

@keyframes barAnim2 {
  0%{width: 5%;}
  15%{width: 60%;}
  25%{width: 60%;}
  40%{width: 30%;}
  50%{width: 30%;}
  65%{width: 80%;}
  75%{width: 80%;}
  90%{width: 5%;}
  100%{width: 5%;}
}*/

.compass{
  position: absolute;
  width: 136px;
  height: 136px;
  bottom: 44px;
  right: 45px;
/*  background-color: aqua;*/
}

.compassOuter{
  position: absolute;
  border-radius: 50%;
  border: 2px solid white;
  width: 132px;
  height: 132px;
}
.compassInner{
  position: absolute;
  border-radius: 50%;
  border: 2px solid white;
  width: 102px;
  height: 102px;
  margin-left: 15px;
  margin-top: 15px;
/*  overflow: hidden*/
}
.compassOuter, .compassInner{
  border-color: rgba(255, 255, 255, 0.14);
}

.compassknob{
  opacity: 0.14;
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: white;
}
.knob1{
  top: 65px;
  left: 5.5px;
}
.knob2{
  top: 5.5px;
  left: 65px;
}
.knob3{
  top: 65px;
  left: 124.5px;
}
.knob4{
  top: 124.5px;
  left: 65px;
}
.needleContainer{
  position: absolute;
  width: calc( 100% - 4px);
  height: calc( 100% - 4px);
  border-radius: 50%;
  left: 2px;
  top: 2px;
  overflow: hidden;
}
.compassNeedle{
  background-image: url(../img/needle.svg);
  position: absolute;
  width: 100%;
  height: 55%;
  -webkit-transform: scaleX(0.3);
  transform: scaleX(0.3);
  background-position: bottom center;
  background-size: auto 100%;
  background-repeat: no-repeat;
}
.needleTrail{
  position: absolute;
  top: 0%;
  left: 30%;
  height: 55%;
  width: 20%;
  opacity: 0.5;
/*  background-color: red;*/
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 );
}


.needleContainer{
  -webkit-animation: needleAnim 4s linear forwards infinite;
  animation: needleAnim 4s linear forwards infinite;
}

@-webkit-keyframes needleAnim {
  0%{-webkit-transform: rotate(0deg);}
  100%{-webkit-transform: rotate(360deg);}
}

@keyframes needleAnim {
  0%{transform: rotate(0deg);}
  100%{transform: rotate(360deg);}
}

.fragebogenBtn1{
  margin-left: auto;
  margin-right: 30px;
  right: 0;
}

.refresh{
  background-image: url(../img/arrow.svg);
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 70%;
}

.mehrCrimes{
  margin-top: 60px;
  color: #3784a4;
  display: none;
}

.backgroundAnimBottom{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0;
/*  opacity: 0.5;*/
  transform-origin: 50% 100%;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
}


.backgroundAnimBottom.smaller{
  transform: scale(0.8);
}

.backgroundAnimBottom.hide{
  transform: scale(0.5);
  opacity: 0;
}

.infoBox{
/*  background-color: aqua;*/
  position: absolute;
  display: block;
  width: 640px;;
/*  height: 200px;*/
  top: 1138px;;
  left: 0;
/*  background-color: rgba(0, 0, 0, 0.9);*/
  font-size: 18px;
/*  text-align: justify;*/
}
.infoText{
  text-align: center;
  position: absolute;
  top: 0;
  width: calc(100% - 80px);
  color: #7e7e7e;
  font-family: "Helvetica", Sans-Serif;
/*  margin: 40px 20px;*/
  margin-top: 20px;
  margin-left: 40px;
  font-size: 18px;
  line-height: 25px
/*  bottom: 0;*/
}
.closeBtn{
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  color: white;
  font-family: "Helvetica", Sans-Serif;
  text-align: center;
  width: 30px;
  height: 30px;
  line-height: 30px;
  margin: 10px;
  color: #ffee00;
}

.testBtn{
  position: absolute;
  width: 100%;
  height: 100%;
}

.saveBtnLink{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  text-decoration: none;
}

.infoBoxBG{
  display: none;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 200px;
  background-color: black;
/*  border-top: 2px solid rgba(55, 132, 164, 0.53);*/
  border-top: 2px solid #7e7e7e;
}