/* Parallax base styles
  --------------------------------------------- */

  .parallax {
    height: 100vh; /* fallback for older browsers */
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-perspective: 500px;
    perspective: 500px;
  }

  .parallax__group {
    position: relative; 
    height: 100vh; /* fallback for older browsers */  
    width: 100%;  
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }

  .parallax__layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .parallax__layer--fore {
    -webkit-transform: translateZ(90px) scale(.7);
    transform: translateZ(100px) scale(1);
    z-index: 1;
  }

  .parallax__layer--base {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    z-index: 2;
  }
 
  .parallax__layer--back {
    -webkit-transform: translateZ(-300px) scale(2);
    transform: translateZ(-300px) scale(2);
    z-index: 3;
    
  }

  .parallax__layer--deep {
    -webkit-transform: translateZ(-600px) scale(3);
    transform: translateZ(-600px) scale(3);
    z-index: 4;
  }





   /* text formate */
   
  .titlelogo {
    text-align: left;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-family: "Arial";
    font-size: 250px;
    font-weight: bold;
    color: white;
  }

  .title {
    text-align: center;
    position: absolute;
    left: 50%;
    top: 30%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-family: "Arial";
    font-size: 12px;
    font-weight: normal;
    color: rgb(56,64,77);
  }

  .text {
    text-align:left;
    top: 550px;
    position: fixed;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-family: Tahoma, Helvetica, Arial, "Microsoft Yahei","΢ÈíÑźÚ", STXihei, "»ªÎÄϸºÚ", sans-serif;
    font-size: 12px;
    font-weight: lighter;
    color: rgb(222,222,222);
    background-color: rgba(239,52,71,0.8);
  }
  
  .text01 {
    text-align: left;
    top: 310px;
    position: absolute;
    left: 390px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-family: Tahoma, Helvetica, Arial, "Microsoft Yahei","΢ÈíÑźÚ", STXihei, "»ªÎÄϸºÚ", sans-serif;
    font-size: 15px;
    font-weight: 200;
    color:white;
  }

  /* inhalt
  --------------------------------------------- */

  #group1 {
    z-index: 5; 
  }
  #group1 .parallax__layer--base {
    background: rgba(239,52,71,0);
    
  }

  #group2 {
    z-index: 4; /* slide under groups 1 and 3 */
  }
  #group2 .parallax__layer--back {
    background: rgba(239,52,71,0.3);
    

  }


  #group3 {
    z-index: 3; /* slide over group 2 and 4 */
  }
  #group3 .parallax__layer--base {
    background: rgba(153,216,101,0);

  }


  #group4 {
    z-index: 2; /* slide under group 3 and 5 */
  }
  #group4 .parallax__layer--base {
    background: rgb(184,223,101);
     background: url(../img/img3.jpg);
    background-size: cover;
  }

 #group5 {
    z-index: 1; /* slide under group 3 and 5 */
  }
  #group5 .parallax__layer--base {
    background: rgb(184,223,101);
     background: url(../img/img3.jpg);
    background-size: cover;
  }


/* hintergrund
  --------------------------------------------- */

 #background {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    background: rgb(232,52,71);
    background: url(../img/projectpuan.jpg);
    background-size: cover;
    background-repeat: no-repeat;

}

/* hintergrund slider
  --------------------------------------------- */
*{
  margin: 0px;
  padding: 0px;
}
.load{
  animation: 1s;
}
.slider{
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left;
  width:100%;
  height:100vh;
  animation: slide 40s infinite;
  position: fixed;

}
@keyframes slide{
  0%{
    background-image:url('../img/puansite.jpg');
  }
  20%{
    background-image:url('../img/puansite.jpg');
  }
     20.01%{
    background-image:url('../img/praxis.jpg');
  }
  30%{
    background-image:url('../img/praxis.jpg');
  }
       30.01%{
    background-image:url('../img/shijiazhuang.jpg');
  }
  40%{
    background-image:url('../img/shijiazhuang.jpg');
  }
     40.01%{
    background-image:url('../img/datong3.jpg');
  }
  60%{
    background-image:url('../img/datong3.jpg');
  }
       60.01%{
    background-image:url('../img/puan1.jpg');
  }
  80%{
    background-image:url('../img/puan1.jpg');
  }
        80.01%{
    background-image:url('../img/puan2.jpg');
  }
  100%{
    background-image:url('../img/puan2.jpg');
  }

  
}


/* fuer den header mit dem logo und adresseleiste
  --------------------------------------------- */

.box1{
    position:fixed;
    top: 20px;
    left: 20px;
    width: auto;
    height: 100px;
    z-index: 9;
    font-family: "Arial";
    font-size: 20px;
    font-weight: bold;
    color: white;
}

.box2{
    position: fixed;
    top: 40px;
    left: 50px;
    width: auto;
    height: 100px;
    z-index: 9;
    font-family: "Arial";
    font-size: 15px;
    color: white;
}
.box3{
    position: fixed;
    top: 50px;
    right: 20px;
    width: auto;
    height: auto;
    z-index: 9;
    font-family: "Arial";
    font-size: 12px;
    color: white;
}