#greeting-text-container{
  position: absolute;
  top: 245px;
  left: 420px;
  width: 700px;
  height: auto;;
  overflow: hidden;
}

#greeting-text{
  transition: opacity .3s, left .3s;
  transition-timing-function: linear;
  opacity: 0;
  top: -10px;
  left: 0px;
  position: relative;
}

#hello-text-container{
  transition: width .4s;
  position: absolute;
  top: 120px;
  left: 420px;
  width: 165px;
  height: 55px;
  overflow: hidden;
}

#hello-text{
  top: 55px;
  width: 100%;
  height: 100%;
  position: absolute;
  transition: top .4s;
}

#hello-location-container{
  position: absolute;
  top: 120px;
  left: 592px;
  width: auto;
  height: 55px;
  overflow: hidden;
  transition: top 0.3s, left 0.3s;
}

#hello-location-text{
  position: relative;
  top: -10px;
  left: -100%;
  transition: left .4s;
}

#local-logo-container{
  position: absolute;
  top: 50%;
  left: 0px;
  width: 390px;
  height: 0px;
  overflow: hidden;
  transition: top 0.5s, height 0.5s, left 0.5s, width 50ms;
}

#hello-location-container.hidden{
  top: -65px;
  left: 35%;
}

#local-logo-container.shown{
  transition-delay: 400ms;
  top: 0px;
  height: 100%;
}

#local-logo-container.hidden{
  transition-duration: 1s;
  top: -100%;
  left: 200px;
  width: 0px;
  height: 0px;
}

#hello-text.shown{
  transition-delay: 400ms;
  top: -10px;
}

#hello-location-text.shown{
  transition-delay: 600ms;
  left: 0px;
}

#greeting-text.shown{
  transition-delay: 600ms;
  opacity: 1;
}

#greeting-text.hidden{
  left: -100%;
}

#hello-text-container.hidden{
  width: 0px;
}