* {
  margin:           0;
  padding:          0;
}

a {
  font-family:      Helvetica, Arial, "Sans Serif"; 
  display:          block;
  position:         absolute;
  top:              50%;
  left:             0;
  width:            100%;
  margin:           -100px 0 0;
  
  text-align:       center;
  font-size:        24px;
  text-decoration:  none;
}
strong {
  display:          block;
  font-size:        128px;
  font-family:      "Arial Black"; 
  position:         relative;
  left:              20px;
  
  
  
  /* rotate by 90deg*/
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
}

div {
  position:         absolute;
  top:              0;
  bottom:           0;
  width:            51%;
  
       -o-transition: width .5s ease-in-out;
     -moz-transition: width .5s ease-in-out; 
  -webkit-transition: width .5s ease-in-out;
  
}

#elc {
  left:             0;
  
  background-color: #1A1716;
}
#elc a {
  color:            #FFF;
}
#elc strong {
  color:            #FC0;
}
#yolk {
  right:            0;
  
  background-color: #2385D2;
}
#yolk a {
  color:            #FFF;
}
#yolk strong {
  color:            #02243C;
}

body:hover #elc {
  width:            31%;
}
body:hover #elc + #yolk {
  width:            71%; 
}
#elc:hover {
  width:            71% !important;
}
#elc:hover + #yolk {
  width:            31% !important; 
}