.logo--animated {
  position: relative;
  margin: 10px auto;
  width: 700px;
  height: auto;
  overflow: hidden;
  text-align: center;
}

.logo__mark {
    float: left;
    width: 60px;
    height: 60px;
    transform: translateX(290px);
    animation-name: logo-mark-animate;
    animation-duration: 0.5s;
    animation-timing-function: ease-in-out;
    /*animation-delay: 1.25s;*/
    animation-direction: alternate;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
    .logo__mark > img {
        transform: scale(0);
        animation-name: logo-mark-grow;
        animation-duration: 0.75s;
        animation-timing-function: ease-in-out;
        /*animation-delay: 1s;*/
        animation-direction: alternate;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
    }

.logo__text {
    display: flex;
    float: right;
    flex-flow: column wrap-reverse;
    justify-content: space-around;
    width: 600px;
    height: auto;
    overflow: hidden;
    text-align: center;
}
    .logo__text
    .logo__title {
        color: #e6dbae;
        letter-spacing: 1px;
        font-family: 'Segoe UI',verdana,helvetica,arial,sans-serif;
        font-weight: 400;
        animation-duration: 3.5s;
        animation-timing-function: ease-in-out;
        animation-name: flipInX;
    }

    .logo__divider {
        float: right;
        height: 1px;
        background: #555;
        width: 0;
        animation-name: logo-divider;
        animation-duration: 1.75s;
        animation-timing-function: ease-in-out;
        /*animation-delay: 2.25s;*/
        animation-direction: normal;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
        margin-top: 15px;
    }

    .logo__title, .logo__subtitle {
        opacity: 0;
        animation-name: flipInX;
        animation-duration: 1.5s;
        animation-timing-function: ease-in-out;
        /*animation-delay: 2.5s;*/
        animation-direction: normal;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
    }

    .logo__subtitle {
        /*animation-delay: 2.75s;*/
        font-family: 'Segoe UI',verdana,helvetica,arial,sans-serif;
        font-size: 13px;
        color: #CCC;
    }
    /* ======= animation stuff ======= */
    @keyframes logo-mark-animate {
        100% {
    transform: translateX(0);
  }
}

@keyframes logo-mark-grow {
  100% {
    transform: scale(1);
  }
}
@keyframes logo-divider {
  100% {
    width: 100%;
  }
}
@keyframes flipInX {
  from {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    animation-timing-function: ease-in;
  }
  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    transform: perspective(400px);
    opacity: 1;
  }
}
.container {
  max-width: 1200px;
  margin: 6em auto;
}