* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-size: 62.5%;
  height: 100%;
}
body {
  height: 100%;
  font: 3.6rem/4rem 'Raleway', sans-serif;
  color: #29353a;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.page {
  position: relative;
  height: 100%;
  border: 50px solid #dbd4d2;
  background: #fff;
}
header {
  position: fixed;
  top: 0;
  left: 50px;
}
.social {
  margin: 9px 0;
}
.social li {
  float: left;
  list-style: none;
  margin: 0 15px 0 0;
}
.social li a {
  display: block;
  text-indent: -9999px;
  overflow: hidden;
  width: 35px;
  height: 32px;
  background: url(social.png) -3px 0 no-repeat;
}
li.li a {
  width: 30px;
  background-position: -54px 0;
}
main {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}
.logo {
  position: relative;
  z-index: 1;
  white-space: nowrap;
}
.logo:before {
  content: '';
  position: absolute;
  top: 48%;
  left: -60.5%;
  z-index: -1;
  width: 220%;
  height: 60px;
  margin-top: -30px;
  background: #dbd4d2;
  -webkit-transform: rotate3d(0,0,1,57deg) scale3d(0,1,1);
  transform: rotate3d(0,0,1,57deg) scale3d(0,1,1);
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
}
.logo:hover:before {
  -webkit-transform: rotate3d(0,0,1,57deg) scale3d(1,1,1);
  transform: rotate3d(0,0,1,57deg) scale3d(1,1,1);
}
.logo img {
  display: block;
  margin: 0 auto 20px;
}
.text {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.blue {
  display: inline-block;
  margin: 0 0 0 -245px;
  font-weight: 300;
  color: #008ac8;
  opacity: 0;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
.logo:hover .blue {
  margin: 0;
  opacity: 1;
}