body {
   transition: background 1s ease;
   background: #959494;
}

.main{
  padding: 0px 0px;
  margin-top: 0;
}

.topnav a {

  font-family: 'Amatic SC', cursive;
  color: white;
  text-align: center;
  padding: 18px 28px;
  text-decoration: none;
  margin-top: 0;
  position:absolute;
  right: 40;
  z-index:1;
}

                   /*animation - main page*/
       /*eye photo - good quality*/
.koki{
  position: relative;
  top: 0px;
  left: 0px;
}

.pixel{
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
      /* eye photo - half way done one*/
.vector{
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
       /* reality - word */
.vectorText{
  width: 85%;
  height: 100%;
  position: relative;
  top: 0;
  left: 0;
}

  @keyframes kokiFadeInOut {
  0% {opacity:1;}
  45% {opacity:1;}
  55% {opacity:0;}
  100% {opacity:0;}
  }

#koki img.vectorText {
  animation-name: kokiFadeInOut;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 0.7s;
  animation-direction: alternate;
}
#koki img.vector {
  animation-name: kokiFadeInOut;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 0.7s;
  animation-direction: alternate;
}


                   /*scroll down button*/

@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:300,400);
* {
  margin: 0;
  padding: 0;
}

.demo a {
  position: absolute;
  /*top: 630px;*/
  bottom: 80px;
  left: 50%;
  z-index: 1;
  display: inline-block;
  -webkit-transform: translate(0, 50%);
  transform: translate(0, 50%);
  color: #fff;
  font-family: 'Amatic SC', cursive;
  letter-spacing: 0.1sem;
  text-decoration: none;
  
}

#section06 a {
  padding-top: 70px;
}
#section06 a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotateZ(-45deg);
  transform: rotateZ(-45deg);
  -webkit-animation: sdb06 1.5s infinite;
  animation: sdb06 1.5s infinite;
  box-sizing: border-box;
}

@-webkit-keyframes sdb06 {
  0% {-webkit-transform: rotateY(0) rotateZ(-45deg) translate(0, 0);opacity: 0;}
  50% {opacity: 1;}
  100% {-webkit-transform: rotateY(720deg) rotateZ(-45deg) translate(-20px, 20px);opacity: 0;}
}
@keyframes sdb06 {
  0% {transform: rotateY(0) rotateZ(-45deg) translate(0, 0);opacity: 0;}
  50% {opacity: 1;}
  100% {transform: rotateY(720deg) rotateZ(-45deg) translate(-20px, 20px);opacity: 0;}
}




                      /*animation - hallucinattion*/

#slide1{
  position: relative;
}

#slide2{
  position: relative;
  margin-top: 40px;
}

#slide3{
  position: relative;
  margin-top: 250px;
}

#slide4{
  position: relative;
  margin-top: 250px;
}

#slide5{
  position: relative;
  margin-top: 250px;
}

#slide6{
  position: relative;
  margin-top: 250px;
}

#slide7{
  position: relative;
  margin-top: 150px;
}

#slide8{
  position: relative;
  margin-top: 250px;
}

#slide9{
  position: relative;
  margin-top: 50px;
}

#slide10{
  position: relative;
  margin-top: 140px;

}

#slide11{
  position: relative;
  margin-top: 250px;
}

#slide12{
  position: relative;
  margin-top: 250px;
}

.ariel{
  width: 100%;
  position: relative;
  top: 0;
  left: 0.2%;
}
.ariel1{
  width: 100%;
  position: absolute;
  top: 1%;
  left: 0;
}
/*.ariel2{
  width: 100%;
  position:absolute;
  top: 0;
  left: 0;
}*/

  @keyframes plantFadeInOut {
  0% {opacity:1;}
  45% {opacity:1;}
  55% {opacity:0;}
  100% {opacity:0;}
  }

#plant {
 /* position: absolute;*/
}

#plant img.ariel {
  animation-name: plantFadeInOut;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 0.7s;
  animation-direction: alternate;
}
#plant img.ariel1 {
  animation-name: plantFadeInOut;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 0.7s;
  animation-direction: alternate;
}

.boki_first{
  position: relative;
  margin-left: 50px;
  margin-right: 50px;
  width: 80%;
}

.boki{
  position: relative;
  width: 100%;
  display: block;
}

#images{
  position: relative;
}

/*#words{
  position: relative;
  height: 400px;
  width: 600px;
}*/

.script1{
  width: 27%; 
  position:absolute;
  top: 13%;
  left: 2%;
}


.script2{
  width: 27%; 
  position:absolute;
  top: 20%;
  left: 5%;
}

.script3{
  width: 27%; 
  position:absolute;
  top: 50%;
  left: 5%;
}

.script4{
  width: 27%; 
  position:absolute;
  top: 30%;
  left: 5%;
}

.script5{
  width: 27%; 
  position: absolute;
  top: 40%;
  left: 65%;

}

.script6{
  width: 27%; 
  position:absolute;
  top: 40%;
  left: 5%;
}

.script7{
  width: 27%; 
  position:absolute;
  top: 35%;
  left: 3%;
}

.script8{
  width: 27%; 
  position:absolute;
  top: 35%;
  left: 70%;
}

.script9{
  width: 27%; 
  position:absolute;
  top: 40%;
  left: 5%;
}



.lulu{
  width: 90%; 
  position:absolute;
  top: 0px;
  left: 7%;
}
.lulu1{
  width: 90%;
  position: absolute;
  top: 0px;
  left: 5%;
}
.lulu2{
  width: 90%;
  position: absolute;
  top: 0px;
  left: 5%;
}
.lulu3{
  width: 90%;
  position: absolute;
  top: 0px;
  left: 5%;
}

  @keyframes lolaFadeInOut {
  0% {opacity:1;}
  45% {opacity:1;}
  55% {opacity:0;}
  100% {opacity:0;}
  }

#lola img.lulu {
  animation-name: lolaFadeInOut;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 0.3s;
  animation-direction: alternate;
}
#lola img.lulu1 {
  animation-name: lolaFadeInOut;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 0.4s;
  animation-direction: alternate;
}
#lola img.lulu2 {
  animation-name: lolaFadeInOut;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 0.5s;
  animation-direction: alternate;
}
#lola img.lulu3 {
  animation-name: lolaFadeInOut;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 0.6s;
  animation-direction: alternate;
}

                     /*links to contact us */

       /*changing colors - our name - contact us page */

       /* description of tthe comics*/
.awi {
  color: white;
  margin: 300px auto;
  font-size: 20px;
}
       /* phone number and email*/

.awil {color: white;
      font-size:20px;}

      
       /*   our name*/
.awesome { 
      width:100%;     
      margin: -150px auto;
      text-align: center;     
      color:#313131;
      font-size:45px;
      font-weight: bold;
      position: absolute;
      -webkit-animation:colorchange 20s infinite alternate;    
    }

    @-webkit-keyframes colorchange {
      0% { color: blue;}   
      10% { color: #8e44ad;}    
      20% { color: #1abc9c;}     
      30% { color: #d35400;}     
      40% { color: blue;}    
      50% { color: #34495e;}   
      60% { color: blue;}   
      70% { color: #2980b9;}
      80% { color: #f1c40f;}
      90% { color: #2980b9;}     
      100% { color: pink;}
    }