.mwh-wrap{
  position: relative;
  width: 200px;
  max-width: 100%;
  margin: 0 auto;
  padding-top: 10px;
}
.mwh{
  position: absolute;
  width: 100%;
}
.fill{
  margin-top:25%;
}
.letters{
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
}
.letter{
  float:left;
  position: relative;
  top:45%;
  width:33.3333%;
  height:5%;
}
.bar{
  float:left;
  position: relative;
  width: 50%;
  height: 100%;
  background-color: #fff;
}
.logo .bar{
  background-color: #444;
}
.pillar{
  opacity:0;
  position: absolute;
}
.pl{
  transform-origin: left;
  left:0.66%;
}
.pr{
  transform-origin: right;
  left:32.6666%;
}
.m .pillar{
  top:30%;
}
.w .pillar{
  top:-30%;
}
.m .pillar,
.w .pillar{
  width:34.6666%;
}
.m .pl,
.w .pr{
  animation-name: pos;
}
.m .pr,
.w .pl{
  animation-name: neg;
}
.h .pl{
  top:-475%;
  left:2%;
  animation-name: pos;
}
.h .pr{
  top:475%;
  left:48%;
  animation-name: pos;
}
.m{
  animation-name: m;
}
.ml{
  animation-name: ml;
  transform-origin: left;
}
.mr{
  animation-name: mr;
  transform-origin: right;
}
.w{
  animation-name: w;
}
.wl{
  animation-name: wl;
  transform-origin: left;
}
.wr{
  animation-name: wr;
  transform-origin: right;
}
.h{
  animation-name: h;
}
.hc {
  box-sizing:content-box;
  width: 100%;
  animation-name: hc;
/*  border-bottom: 0.5px solid #fff;*/
}
.letters,.pr,.pl,.m,.ml,.mr,.w,.wl,.wr,.h,.hc{
  animation-delay: 0.8s;
  animation-duration: 8s;
  animation-fill-mode: both;
}
@keyframes letters {
  40%{left:0}
  45%{left:0}
  55%{left:0}
  100%{left:38.6666%}
}
@keyframes pos {
  40%{opacity:0;rotate:0deg;}
  45%{opacity:1;rotate:90deg;}
  55%{opacity:1;rotate:90deg;}
  100%{opacity:0;rotate:90deg;}
}
@keyframes neg {
  40%{opacity:0;rotate:0deg;}
  45%{opacity:1;rotate:-90deg;}
  55%{opacity:1;rotate:-90deg;}
  100%{opacity:0;rotate:-90deg;}
}
@keyframes m {
  5%{top:47%;margin-left:0;}
  10%{top:47%;margin-left:6.3333%;}
  40%{top:20%;}
  45%{left:0;}
  55%{left:0;}
  100%{top:20%;margin-left:6.3333%;left:33.3333%;}
}
@keyframes ml {
  5%{rotate:45deg;}
  100%{rotate:45deg;}
}
@keyframes mr {
  5%{rotate:-45deg;left:0;}
  10%{left:-31.9%;}
  100%{rotate:-45deg;left:-31.9%;}
}
@keyframes w {
  5%{top:47%;}
  10%{top:47%;}
  40%{top:70%;}
  100%{top:70%;}
}
@keyframes wl {
  5%{rotate:-45deg;}
  100%{rotate:-45deg;}
}
@keyframes wr {
  5%{rotate:45deg;left:0;}
  10%{left:-31.9%;}
  100%{rotate:45deg;left:-31.9%;}
}
@keyframes h {
  5%{width:33.3333%;}
  10%{width:23.6666%;}
  45%{left:0;}
  55%{left:0;}
  100%{width:23.6666%;left:-33.8%;}
}