body{
background-color: black;
}

bodystart {
  background-color: black;
  overflow: hidden;
 }

#eye{
  margin: -10% auto; /*Auf Seite zentrieren*/
  text-align:center;
  width:100%;
z-index:2;
/*border:1px solid blue;*/
}

.bildwrapper {
  position: relative;
  width:100%;
/*border:1px solid red;*/
}

.headerbild {
  width:70%;
}

#ueberschrift {
  margin: 0 auto; /*-62% auto; */
  width:100%;
  text-align: center;
z-index:1;
/*border:1px solid yellow;*/
}

.responsive {
  width: 30%;
}

#links{
  margin: 8% auto;
  overflow: hidden;
  text-align: center;
z-index:200;
/*border:1px solid white;*/
}

ul {
  display: inline-block;
  list-style-type: none;
  background-color: black;
}

li {
  float: left;
}

li a {
  display: inline-block;
  color: #54CBF6;
  text-align: center;
  padding: 14px 70px;
  text-decoration: none;
  font:  2.5vw Times;
}

li a:hover  {
font-style: italic;
  /*background-color: #333;*/
}


.bewusstsein {
  position: absolute;
  left:15%;
  top:30%;
}

.reise {
  position: absolute;
  left:40%;
  top:13%;
}

.koerperarbeit {
  position: absolute;
  left:15%;
  top:70%;
}

.augendiagnose {
  position: absolute;
  left:72%;
  top:70%;
}

.energiearbeit {
  position: absolute;
  left:72%;
  top:30%;
}

.bewusstsein a:link, .reise a:link, .koerperarbeit a:link, .augendiagnose a:link,
.energiearbeit a:link {
  color: #7557D1;
  text-decoration: none;
  padding: 0px 0px;
  font: italic 2vw Arial, Verdana, Helvetica;
  z-index:200;
}

.bewusstsein a:hover, .reise a:hover, .koerperarbeit a:hover, .augendiagnose a:hover, .energiearbeit a:hover {
font: 2vw Arial, Verdana, Helvetica;
  /*background-color: #333;*/
}

.bodysessions {
  background-position: top center;
  background-image: url("images/bgtilesrotate.jpg");
  background-repeat: no-repeat;
  background-color: #190054;
 }

.textueber {
  margin: 3% auto;
  width:100%;
  text-align: center;
   /*border:1px solid yellow;*/
  color: #FFF918;
  font: italic 50px Times;
  position: absolute;
}

.dragonbild {
  width: 90%;
}

.l1 {
  position: absolute;
  top: 10%;
  left: 15%;
  width: 18%;
  text-align: center;
}

.l2 {
  position: absolute;
  top: 40%;
  right: 5%;
  width: 18%;
  text-align: center;
}

.r1 {
  position: absolute;
  top: 10%;
  right: 15%;
  width: 18%;
  text-align: center;
}

.r2 {
  position: absolute;
  top: 40%;
  left: 5%;
  width: 18%;
  text-align: center;
}

.l3 {
  position: absolute;
  top: 70%;
  left: 15%;
  width: 18%;
  text-align: center;
}

.l4 {
  position: absolute;
  top: 100%;
  right: 5%;
  width: 18%;
  text-align: center;
}

.r3 {
  position: absolute;
  top: 70%;
  right: 15%;
  width: 18%;
  text-align: center;
}

.r4 {
  position: absolute;
  top: 100%;
  left: 5%;
  width: 18%;
  text-align: center;
}

.c5 {
  color: #FFF918;
  font: italic 32px Times;
  left: 30%;
  position: absolute;
  top: 25%;
  width: 40%;
  text-align: center;
   /*border:1px solid green;*/
}

.c6 {
  color: #FFF918;
  font: italic 24px Times;
  left: 33%;
  position: absolute;
  top: 30%;
  width: 34%;
  text-align: center;
   /*border:1px solid red;*/
}

.c6 a {
  display: inline-block;
  color: #FFF918;
  text-align: center;
  text-decoration: none;
  font:  20px Times;
}
.linkssession{
  /*margin: 90% auto;*/
  top: 150%;
  left: 10%;
  width: 80%;
  text-align: center;
   /*border:1px solid white;*/
  position: absolute;
}

.linkssession ul {
  display: inline-block;
  list-style-type: none;
  background-color: #190054;
}

.linkssession a {
  display: inline-block;
  color: #FFF918;
  text-align: center;
  padding: 3vw 9vw;
  text-decoration: none;
  font:  30px Times;
}

@media only screen and (max-width : 1030px) {
  .linkssession{
    top: 180%;
  }
}

@media only screen and (max-width : 820px) {
  .linkssession{
    top: 200%;
  }
}

@media only screen and (max-width : 760px) {
  .linkssession{
    top: 220%;
  }
}

@media only screen and (max-width : 700px) {
  .linkssession{
    top: 240%;
  }
}

@media only screen and (max-width : 580px) {
  .linkssession{
    top: 260%;
  }
}

@media only screen and (max-width : 560px) {
  .c6 {
    top: 40%;
  }

  .linkssession{
    top: 270%;
  }
}

@media only screen and (max-width : 550px) {
  .linkssession{
    top: 280%;
  }
}

@media only screen and (max-width : 530px) {
  .linkssession{
    top: 300%;
  }
}



.bodycontact {
  background-color: #14196B;
 }

.textueberschrift {
  margin: 3% auto;
  width:99%;
  text-align: center;
  /*border:1px solid yellow;*/
  color: #C69D5B;
  font: 50px Times;
  position: absolute;
  z-index:3;
}

.dragon {
  position: absolute;
  /* top: -10%; */
  top: 0%;
  left:0%;
  width:90%;
  text-align: left;
  /*border:1px solid yellow;*/
}

.name {
  position: absolute;
  top: 35%;
  left:45%;
  width:80%;
  color: #FB56FA;
  font:  25px Times;
  /*border:1px solid green;*/
}

.adresse {
  position: absolute;
  top: 40%;
  left:47%;
  width:50%;
  color: #FB56FA;
  font:  20px Times;
  /*border:1px solid green;*/
}

/* .emailbild {
  position: absolute;
  top: 26%;
  left:41%;
  width:30%;
  color: #FB56FA;
} */

.email {
  position: absolute;
  top: 54%;
  left:47%;
  width:50%;
  color: #FB56FA;
  font: italic 20px Times;
}

.linkscontact{
  position: absolute;
  top: 80%;
  left: 0%;
  width: 100%;
  text-align: center;
  /*border:1px solid white;*/
}

.linkscontact ul {
  display: inline-block;
  list-style-type: none;
  background-color: #14196B;
  text-align: center;
  /*border:1px solid red;*/
}



.linkscontact a {
  color: #C69D5B;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  font:  2.5vw Times;
  /*border:1px solid orange;*/
}

@media only screen and (max-width : 495px) {
  .linkssession{
    top: 750%;
  }
  .email {
    left:37%;
    top: 70%;
  }
  .textueberschrift {
    font: 40px Times;
  }
  .name {
    top: 40%;
    left:25%;
  }

  .adresse {
    top: 45%;
    left:27%;
  }
}