@font-face {
  font-family: 'envy-sexy';
  src: url('../fonts/envy-sexy.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

.logorama {
  height: 560px;
  position: relative;
  font-size: 340px;
  font-family: 'envy-sexy';
}

.logorama-box {
  box-sizing: border-box;
  color: rgb(200, 34, 26);
  text-align: center;
  position: absolute;
  width: 100%;
  background: #fff;
}

.logorama1 {
  height: 560px;
  top: 290px;
  position: relative;
  font-size: 340px;
  font-family: 'envy-sexy';
}

.logorama-box:last-child {
  opacity: 0;
  -webkit-transition: opacity .3s ease .3s;
  transition: opacity .3s ease .3s;
}

.logorama.is__triggered .logorama-box:last-child {
  opacity: 1;
}

.logorama-el {
  tarnsform: translateZ(0);
  -webkit-transition: all .6s ease;
  transition: all .6s ease;
  padding: 60px 40px 60px;
}

.logorama.is__animating .logorama-el {
  -webkit-filter: blur(20px);
          filter: blur(20px);
  text-shadow:
    -20px 0 20px rgb(200, 34, 26),
    20px 0 20px rgb(200, 34, 26),
    0 20px 20px rgb(200, 34, 26),
    0 -20px 20px rgb(200, 34, 26);
}

.logorama-envy:before {
  content: '\e900';
}

.logorama-sexy:before {
  content: '\e901';
}