/* BOT */

#bot
{
  position: fixed;
  right: 1.4%;
  top: 1%;
  text-align: left;
  width: 4em;
  height: 4em;
  min-width: 3em;
  min-height: 3em;
  margin: 0 auto;
  opacity: 0;
  -webkit-animation: show 1s linear 4.5s;
  -webkit-animation-delay: 4.5s;
  -webkit-animation-fill-mode: forwards;
}

#head
{
  position: relative;
  display: inline-block;
  margin-top: 15%;
  margin-left: 10%;
  width: 80%;
  height: 70%;
}

#face
{
  position: absolute;
  margin-left: 0%;
  margin-right: 0%;
  width: 100%;
  height: 100%;
  border: 0.1em solid #FFF;
  border-radius: 1em;
}

#left-ear, #right-ear
{
  position: absolute;
  top: 30%;
  width: 6%;
  height: 25%;
  border: 0.15em solid #FFF;
  background-color: lightgray;
  border-radius: 0.1em;
}

#left-ear
{
  left: -6%;
}

#right-ear
{
  right: -6%;
}

#left-ear-inner, #right-ear-inner
{
  position: absolute;
  top: 20%;
  width: 100%;
  height: 60%;
  background-color: lightgray;
  border-radius: 0.1em;
}

#left-ear-inner
{
  left: -150%;
}

#right-ear-inner
{
  right: -150%;
}

#eyes
{
  position: absolute;
  width: 60%;
  height: 20%;
  margin-left: 20%; /* 16 */
  margin-top: 20%; /* 20 */
}

#left-eye, #right-eye
{
  position: absolute;
  width: 30%;
  height: 100%;
  background-color: #91C7A9;
  border-radius: 0.5em;
}

 #right-eye
{
  right: 0%;
}

#mouth
{
  position: absolute;
  width: 30%;
  height: 4%;
  border-left: 0.1em solid #FFF;
  border-right: 0.1em solid #FFF;
  border-bottom: 0.1em solid #FFF;
  border-top: 0.0em solid #FFF;
  left: 35%;
  bottom: 20%;
}

/* Animations */
#bot.neutral #left-eye, #bot.neutral #right-eye
{
   animation: blink-eyes 3s infinite ease-in alternate;
   animation-delay: 2s;
}

#bot.neutral #left-ear-inner
{
   animation: move-left-ear-inner 5.0s infinite ease alternate;
}

#bot.neutral #right-ear-inner
{
   animation: move-right-ear-inner 5.0s infinite ease alternate;
}


#bot.speaking #mouth
{
   border-top: 0.2em solid #FFF;
   background-color: #FFF;
   -webkit-animation: speak-mouth 1s ease 5.5s 5 alternate;
}

/* blinking */
@keyframes blink-eyes {
  0%   { height: 10%; margin-top: 10%}
  10% { height: 100%; margin-top: 0%}
  100% { height: 100%; margin-top: 0%}
}

@-webkit-keyframes show {
  to {
    opacity: 1;
  }
}

/* speaking */
@keyframes speak-mouth {
  0%   { width: 10%; height: 4%; left: 45%;}
  25% { width: 30%; height: 10%; left: 35%;}
  50% { width: 6%; height: 4%; left: 47%;}
  75% { width: 40%; height: 8%; left: 30%;}
  100% { width: 30%; height: 4%; left: 35%;}
}

/* media queries */
@media only screen
and (min-width : 320px)
and (max-width : 820px) {

  #bot {
    position: absolute;
    left: 0;
    top: 0;
    width: 8em;
    height: 8em;
    margin: 16% auto 0;
    -webkit-animation: show 1s linear 1s;
    -webkit-animation-delay: 1s;
    -webkit-animation-fill-mode: forwards;
  }

  #head {
    margin-top: 15%;
  }

  #bot.speaking #mouth {
     -webkit-animation: speak-mouth 1s ease 3s 3 alternate;
  }

}

@media only screen
and (min-width : 320px)
and (max-width : 820px)
and (orientation: landscape){

  #bot {
    margin: 2% auto 0;
  }
}