app.css

@import url('https://fonts.googleapis.com/css?family=Karla|Lato');
#main_container{
  position:absolute;
  margin:0;
  background: #ededed;
  width:100%;
  min-width: 300px;
}

@keyframes bannerContainerEnterAnimation {
  0% {
    transform: translateY(-110%);

  }
  90% {
    transform: translateY(-110%);

  }
  100% {
    transform: translateY(0%);
  }
}

#bannerContainer{
  position:absolute;
  display:block;
  width:100%;
  height:30px;
  background: rgba(237,237,237, .1);
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.26);
  color:#707070;
  font-size:11px;
  top:25%;
  animation:bannerContainerEnterAnimation 2.5s ease-out;
  /*text-justify: distribute-all-lines;*/
}
 
 #bannerTitle {
   letter-spacing:6px;
   position:relative;
   display:block;
   margin-left:2%;
}

#bannerByLine {
  letter-spacing:2px;
  padding:0;
  color:#919191;
  margin-left:2%;
  font-size:9px;
}

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

#toggleMessage{
  position:absolute;
  text-align:center;
  left: 0;
  right:0;
  top:40px;
  margin-right:auto;
  margin-left:auto;
  font-size:45px;
  font-weight:bolder;
  font-family: 'Karla', sans-serif;
  height:fit-content;
  color:rgba(66,66,66,.7);
  background: rgba(213,213,213, .3);
  box-shadow: 0px 2px 10px 0px rgba(145, 145, 145, 0.66);
  padding:5px;
  z-index:20;
  letter-spacing:30px;
  transition: letter-spacing .2s ease-in-out;
  background: rgba(139, 237, 255, .25);
}

#toggleMessage:hover{
  background: rgba(139, 237, 255, .46);
  letter-spacing:32px;
}

@keyframes idleListeningAnimation {
  0% {
    opacity:1;
  }
  50% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

#listening{
  position:absolute;
  top:350px;
  left: 0;
  right:0;
  margin-right:auto;
  margin-left:auto;
  height:50px;
  box-shadow: 0px 2px 10px 0px rgba(145, 145, 145, 0.66);
  width:100%;
  text-overflow: hidden;
  overflow:hidden;
  background: rgba(255,0,0, .5);
  text-align:center;
  
}

#listen_idle_container{
  position:absolute;
  font-size:17px;
  font-family: 'Karla', sans-serif;
  padding:8px;
  width:100%;
  letter-spacing:5px;
  color:rgba(255,255,255,.7);
  overflow:hidden;
  text-overflow: hidden;
  animation: idleListeningAnimation 3s infinite;
}

@keyframes logoFadeIn {
  0% {
    /*transform: translateX(-100%);*/
    visibility:none;
    transform: translateY(100%);
    opacity:0;
  }
  40% {
    /*transform: translateX(-100%);*/
    visibility:none;
    transform: translateY(100%);
    opacity:0;
  }
  86% {
    visibility:visible;
    transform: translateY(-1%);
    opacity:1;
    transition-timing-function: ease-out;
  }
  100% {
    visibility:visible;
    transform: translateY(0%);
    opacity:1;
    transition-timing-function: cubic-bezier(.42,.97,.44,1.5)
  }
}

#rpm_logo{
  position:fixed;
  display:block;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin-top:20%;
  margin-right:auto;
  margin-left:auto;
  width:400px;
  animation: logoFadeIn 3s;
}

@keyframes slideDown {
  0% {
    /*transform: translateX(-100%);*/
    transform: translateY(-100%);
    opacity:1;
  }
  97%{
    transform: translateY(-1%);
  }
  100% {
    transform: translateY(0%);
  }
}

#divider{
  position:absolute;
  width:100%;
  height:400px;
  background:linear-gradient(#ededed, #e1e1e1);
  animation:slideDown 1s ease-out;
}

@keyframes removeMask {
  0% {
    /*transform: translateX(-100%);*/
    visibility:visible;
    transform: translateY(0%);
    opacity:1;
  }
  50% {
    /*transform: translateX(-100%);*/
    visibility:visible;
    transform: translateY(0%);
    opacity:1;
  }
  100% {
    visibility:none;
    /*transform: translateY(10%);*/

    opacity:0;
    transition-timing-function: cubic-bezier(1,.26,.44,1.11)
  }
}

#logoMask{
  position:absolute;
  display:inline-block;
  bottom:0;
  left:0;
  right:0;
  top:0;
  width:100%;
  height:400px;
  margin-top:80%;
  background:#ededed; 
  /*background:red;*/
  /*background: rgba(255,0,0,.3);*/
  z-index:999999;
  opacity:0;
  /*opacity:0;*/
  animation: removeMask 5.3s;
}