/* keyframe animations
   ============================ */

/* article animations */

@keyframes animateWidth {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@-webkit-keyframes animateWidth {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@-moz-keyframes animateWidth {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@-ms-keyframes animateWidth {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@-o-keyframes animateWidth {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@keyframes moveArrow {
    from {
        left: 0;
    }
    50% {
        left: -10px;
    }
    75% {
        left: 10px;
    }
    to {
        left: 0;
    }
}

@-webkit-keyframes moveArrow {
    from {
        left: 0;
    }
    50% {
        left: -10px;
    }
    75% {
        left: 10px;
    }
    to {
        left: 0;
    }
}

@-moz-keyframes moveArrow {
    from {
        left: 0;
    }
    50% {
        left: -10px;
    }
    75% {
        left: 10px;
    }
    to {
        left: 0;
    }
}

@-ms-keyframes moveArrow {
    from {
        left: 0;
    }
    50% {
        left: -10px;
    }
    75% {
        left: 10px;
    }
    to {
        left: 0;
    }
}

@-o-keyframes moveArrow {
    from {
        left: 0;
    }
    50% {
        left: -10px;
    }
    75% {
        left: 10px;
    }
    to {
        left: 0;
    }
}

@keyframes showBorder {
    from {
        height: 0;
    }
    to {
        height: 100%;
    }
}

@-webkit-keyframes showBorder {
    from {
        height: 0;
    }
    to {
        height: 100%;
    }
}

@-moz-keyframes showBorder {
    from {
        height: 0;
    }
    to {
        height: 100%;
    }
}

@-ms-keyframes showBorder {
    from {
        height: 0;
    }
    to {
        height: 100%;
    }
}

@-o-keyframes showBorder {
    from {
        height: 0;
    }
    to {
        height: 100%;
    }
}

@keyframes showBackground {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@-webkit-keyframes showBackground {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@-moz-keyframes showBackground {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@-ms-keyframes showBackground {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@-o-keyframes showBackground {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@keyframes zoomContent {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.7, 0.7, 0.7);
        -moz-transform: scale3d(0.7, 0.7, 0.7);
        -ms-transform: scale3d(0.7, 0.7, 0.7);
        -o-transform: scale3d(0.7, 0.7, 0.7);
        transform: scale3d(0.7, 0.7, 0.7);
    }
    to {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        -moz-transform: scale3d(1, 1, 1);
        -ms-transform: scale3d(1, 1, 1);
        -o-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@-webkit-keyframes zoomContent {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.7, 0.7, 0.7);
        -moz-transform: scale3d(0.7, 0.7, 0.7);
        -ms-transform: scale3d(0.7, 0.7, 0.7);
        -o-transform: scale3d(0.7, 0.7, 0.7);
        transform: scale3d(0.7, 0.7, 0.7);
    }
    to {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        -moz-transform: scale3d(1, 1, 1);
        -ms-transform: scale3d(1, 1, 1);
        -o-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@-moz-keyframes zoomContent {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.7, 0.7, 0.7);
        -moz-transform: scale3d(0.7, 0.7, 0.7);
        -ms-transform: scale3d(0.7, 0.7, 0.7);
        -o-transform: scale3d(0.7, 0.7, 0.7);
        transform: scale3d(0.7, 0.7, 0.7);
    }
    to {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        -moz-transform: scale3d(1, 1, 1);
        -ms-transform: scale3d(1, 1, 1);
        -o-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@-ms-keyframes zoomContent {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.7, 0.7, 0.7);
        -moz-transform: scale3d(0.7, 0.7, 0.7);
        -ms-transform: scale3d(0.7, 0.7, 0.7);
        -o-transform: scale3d(0.7, 0.7, 0.7);
        transform: scale3d(0.7, 0.7, 0.7);
    }
    to {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        -moz-transform: scale3d(1, 1, 1);
        -ms-transform: scale3d(1, 1, 1);
        -o-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@-o-keyframes zoomContent {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.7, 0.7, 0.7);
        -moz-transform: scale3d(0.7, 0.7, 0.7);
        -ms-transform: scale3d(0.7, 0.7, 0.7);
        -o-transform: scale3d(0.7, 0.7, 0.7);
        transform: scale3d(0.7, 0.7, 0.7);
    }
    to {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        -moz-transform: scale3d(1, 1, 1);
        -ms-transform: scale3d(1, 1, 1);
        -o-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

/* download arrow animation */

@keyframes moveDownloadArrow {
    from {
        top: 0;
    }
    50% {
        top: -7px;
    }
    75% {
        top: 3px;
    }
    to {
        top: 0;
    }
}

@-webkit-keyframes moveDownloadArrow {
    from {
        top: 0;
    }
    50% {
        top: -7px;
    }
    75% {
        top: 3px;
    }
    to {
        top: 0;
    }
}

@-moz-keyframes moveDownloadArrow {
    from {
        top: 0;
    }
    50% {
        top: -7px;
    }
    75% {
        top: 3px;
    }
    to {
        top: 0;
    }
}

@-ms-keyframes moveDownloadArrow {
    from {
        top: 0;
    }
    50% {
        top: -7px;
    }
    75% {
        top: 3px;
    }
    to {
        top: 0;
    }
}

@-o-keyframes moveDownloadArrow {
    from {
        top: 0;
    }
    50% {
        top: -7px;
    }
    75% {
        top: 3px;
    }
    to {
        top: 0;
    }
}

/* follow link arrow animation */

@keyframes moveArrowExternal {
    from {
        top: -5px;
        right: 0;
    }
    50% {
        top: 0;
        right: 5px;
    }
    75% {
        top: -8px;
        right: -3px;
    }
    to {
        top: -5px;
        right: 0;
    }
}

@-webkit-keyframes moveArrowExternal {
    from {
        top: -5px;
        right: 0;
    }
    50% {
        top: 0;
        right: 5px;
    }
    75% {
        top: -8px;
        right: -3px;
    }
    to {
        top: -5px;
        right: 0;
    }
}

@-moz-keyframes moveArrowExternal {
    from {
        top: -5px;
        right: 0;
    }
    50% {
        top: 0;
        right: 5px;
    }
    75% {
        top: -8px;
        right: -3px;
    }
    to {
        top: -5px;
        right: 0;
    }
}

@-ms-keyframes moveArrowExternal {
    from {
        top: -5px;
        right: 0;
    }
    50% {
        top: 0;
        right: 5px;
    }
    75% {
        top: -8px;
        right: -3px;
    }
    to {
        top: -5px;
        right: 0;
    }
}

@-o-keyframes moveArrowExternal {
    from {
        top: -5px;
        right: 0;
    }
    50% {
        top: 0;
        right: 5px;
    }
    75% {
        top: -8px;
        right: -3px;
    }
    to {
        top: -5px;
        right: 0;
    }
}

/* follow link arrow animation larger scale */

@keyframes moveArrowLargeExternal {
    from {
        top: -6px;
        right: 1px;
    }
    50% {
        top: 0;
        right: 6px;
    }
    75% {
        top: -8px;
        right: -1px;
    }
    to {
        top: -6px;
        right: 1px;
    }
}

@-webkit-keyframes moveArrowLargeExternal {
    from {
        top: -6px;
        right: 1px;
    }
    50% {
        top: 0;
        right: 6px;
    }
    75% {
        top: -8px;
        right: -1px;
    }
    to {
        top: -6px;
        right: 1px;
    }
}

@-moz-keyframes moveArrowLargeExternal {
    from {
        top: -6px;
        right: 1px;
    }
    50% {
        top: 0;
        right: 6px;
    }
    75% {
        top: -8px;
        right: -1px;
    }
    to {
        top: -6px;
        right: 1px;
    }
}

@-ms-keyframes moveArrowLargeExternal {
    from {
        top: -6px;
        right: 1px;
    }
    50% {
        top: 0;
        right: 6px;
    }
    75% {
        top: -8px;
        right: -1px;
    }
    to {
        top: -6px;
        right: 1px;
    }
}

@-o-keyframes moveArrowLargeExternal {
    from {
        top: -6px;
        right: 1px;
    }
    50% {
        top: 0;
        right: 6px;
    }
    75% {
        top: -8px;
        right: -1px;
    }
    to {
        top: -6px;
        right: 1px;
    }
}

/* follow link arrow animation smaller scale */

@keyframes moveSecondLevelExternal {
    from {
        top: -4px;
        right: -1px;
    }
    50% {
        top: -2px;
        right: 1px;
    }
    75% {
        top: -6px;
        right: -3px;
    }
    to {
        top: -4px;
        right: -1px;
    }
}

@-webkit-keyframes moveSecondLevelExternal {
    from {
        top: -4px;
        right: -1px;
    }
    50% {
        top: -2px;
        right: 1px;
    }
    75% {
        top: -6px;
        right: -3px;
    }
    to {
        top: -4px;
        right: -1px;
    }
}

@-moz-keyframes moveSecondLevelExternal {
    from {
        top: -4px;
        right: -1px;
    }
    50% {
        top: -2px;
        right: 1px;
    }
    75% {
        top: -6px;
        right: -3px;
    }
    to {
        top: -4px;
        right: -1px;
    }
}

@-ms-keyframes moveSecondLevelExternal {
    from {
        top: -4px;
        right: -1px;
    }
    50% {
        top: -2px;
        right: 1px;
    }
    75% {
        top: -6px;
        right: -3px;
    }
    to {
        top: -4px;
        right: -1px;
    }
}

@-o-keyframes moveSecondLevelExternal {
    from {
        top: -4px;
        right: -1px;
    }
    50% {
        top: -2px;
        right: 1px;
    }
    75% {
        top: -6px;
        right: -3px;
    }
    to {
        top: -4px;
        right: -1px;
    }
}

/* ellipsis animation */

@-moz-keyframes ellipsis {
    to {
        width: 30px;
    }
}

@-ms-keyframes ellipsis {
    to {
        width: 30px;
    }
}

@-o-keyframes ellipsis {
    to {
        width: 30px;
    }
}

@-webkit-keyframes ellipsis {
    to {
        width: 30px;
    }
}

@keyframes ellipsis {
    to {
        width: 30px;
    }
}

/* phone animation */

@-moz-keyframes vibratePhone {
    from {
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    20% {
        -moz-transform: rotate(4deg);
        -ms-transform: rotate(4deg);
        -o-transform: rotate(4deg);
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }
    40% {
        -moz-transform: rotate(-4deg);
        -ms-transform: rotate(-4deg);
        -o-transform: rotate(-4deg);
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg);
    }
    60% {
        -moz-transform: rotate(4deg);
        -ms-transform: rotate(4deg);
        -o-transform: rotate(4deg);
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }
    80% {
        -moz-transform: rotate(-4deg);
        -ms-transform: rotate(-4deg);
        -o-transform: rotate(-4deg);
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg);
    }
    to {
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
}

@-ms-keyframes vibratePhone {
    from {
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    20% {
        -moz-transform: rotate(4deg);
        -ms-transform: rotate(4deg);
        -o-transform: rotate(4deg);
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }
    40% {
        -moz-transform: rotate(-4deg);
        -ms-transform: rotate(-4deg);
        -o-transform: rotate(-4deg);
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg);
    }
    60% {
        -moz-transform: rotate(4deg);
        -ms-transform: rotate(4deg);
        -o-transform: rotate(4deg);
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }
    80% {
        -moz-transform: rotate(-4deg);
        -ms-transform: rotate(-4deg);
        -o-transform: rotate(-4deg);
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg);
    }
    to {
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
}

@-o-keyframes vibratePhone {
    from {
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    20% {
        -moz-transform: rotate(4deg);
        -ms-transform: rotate(4deg);
        -o-transform: rotate(4deg);
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }
    40% {
        -moz-transform: rotate(-4deg);
        -ms-transform: rotate(-4deg);
        -o-transform: rotate(-4deg);
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg);
    }
    60% {
        -moz-transform: rotate(4deg);
        -ms-transform: rotate(4deg);
        -o-transform: rotate(4deg);
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }
    80% {
        -moz-transform: rotate(-4deg);
        -ms-transform: rotate(-4deg);
        -o-transform: rotate(-4deg);
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg);
    }
    to {
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
}

@-webkit-keyframes vibratePhone {
    from {
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    20% {
        -moz-transform: rotate(4deg);
        -ms-transform: rotate(4deg);
        -o-transform: rotate(4deg);
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }
    40% {
        -moz-transform: rotate(-4deg);
        -ms-transform: rotate(-4deg);
        -o-transform: rotate(-4deg);
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg);
    }
    60% {
        -moz-transform: rotate(4deg);
        -ms-transform: rotate(4deg);
        -o-transform: rotate(4deg);
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }
    80% {
        -moz-transform: rotate(-4deg);
        -ms-transform: rotate(-4deg);
        -o-transform: rotate(-4deg);
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg);
    }
    to {
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
}

@keyframes vibratePhone {
    from {
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    20% {
        -moz-transform: rotate(4deg);
        -ms-transform: rotate(4deg);
        -o-transform: rotate(4deg);
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }
    40% {
        -moz-transform: rotate(-4deg);
        -ms-transform: rotate(-4deg);
        -o-transform: rotate(-4deg);
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg);
    }
    60% {
        -moz-transform: rotate(4deg);
        -ms-transform: rotate(4deg);
        -o-transform: rotate(4deg);
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }
    80% {
        -moz-transform: rotate(-4deg);
        -ms-transform: rotate(-4deg);
        -o-transform: rotate(-4deg);
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg);
    }
    to {
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
}

@-moz-keyframes sendSignal {
    from {
        opacity: 0;
        -moz-transform: translate(0, 0) scale(1);
        -ms-transform: translate(0, 0) scale(1);
        -o-transform: translate(0, 0) scale(1);
        -webkit-transform: translate(0, 0) scale(1);
        transform: translate(0, 0) scale(1);
    }
    50% {
        opacity: 0.7;
        -moz-transform: translate(3px, -3px) scale(1.2);
        -ms-transform: translate(3px, -3px) scale(1.2);
        -o-transform: translate(3px, -3px) scale(1.2);
        -webkit-transform: translate(3px, -3px) scale(1.2);
        transform: translate(3px, -3px) scale(1.2);
    }
    to {
        opacity: 0.2;
        -moz-transform: translate(6px, -6px) scale(1.4);
        -ms-transform: translate(6px, -6px) scale(1.4);
        -o-transform: translate(6px, -6px) scale(1.4);
        -webkit-transform: translate(6px, -6px) scale(1.4);
        transform: translate(6px, -6px) scale(1.4);
    }
}

@-ms-keyframes sendSignal {
    from {
        opacity: 0;
        -moz-transform: translate(0, 0) scale(1);
        -ms-transform: translate(0, 0) scale(1);
        -o-transform: translate(0, 0) scale(1);
        -webkit-transform: translate(0, 0) scale(1);
        transform: translate(0, 0) scale(1);
    }
    50% {
        opacity: 0.7;
        -moz-transform: translate(3px, -3px) scale(1.2);
        -ms-transform: translate(3px, -3px) scale(1.2);
        -o-transform: translate(3px, -3px) scale(1.2);
        -webkit-transform: translate(3px, -3px) scale(1.2);
        transform: translate(3px, -3px) scale(1.2);
    }
    to {
        opacity: 0.2;
        -moz-transform: translate(6px, -6px) scale(1.4);
        -ms-transform: translate(6px, -6px) scale(1.4);
        -o-transform: translate(6px, -6px) scale(1.4);
        -webkit-transform: translate(6px, -6px) scale(1.4);
        transform: translate(6px, -6px) scale(1.4);
    }
}

@-o-keyframes sendSignal {
    from {
        opacity: 0;
        -moz-transform: translate(0, 0) scale(1);
        -ms-transform: translate(0, 0) scale(1);
        -o-transform: translate(0, 0) scale(1);
        -webkit-transform: translate(0, 0) scale(1);
        transform: translate(0, 0) scale(1);
    }
    50% {
        opacity: 0.7;
        -moz-transform: translate(3px, -3px) scale(1.2);
        -ms-transform: translate(3px, -3px) scale(1.2);
        -o-transform: translate(3px, -3px) scale(1.2);
        -webkit-transform: translate(3px, -3px) scale(1.2);
        transform: translate(3px, -3px) scale(1.2);
    }
    to {
        opacity: 0.2;
        -moz-transform: translate(6px, -6px) scale(1.4);
        -ms-transform: translate(6px, -6px) scale(1.4);
        -o-transform: translate(6px, -6px) scale(1.4);
        -webkit-transform: translate(6px, -6px) scale(1.4);
        transform: translate(6px, -6px) scale(1.4);
    }
}

@-webkit-keyframes sendSignal {
    from {
        opacity: 0;
        -moz-transform: translate(0, 0) scale(1);
        -ms-transform: translate(0, 0) scale(1);
        -o-transform: translate(0, 0) scale(1);
        -webkit-transform: translate(0, 0) scale(1);
        transform: translate(0, 0) scale(1);
    }
    50% {
        opacity: 0.7;
        -moz-transform: translate(3px, -3px) scale(1.2);
        -ms-transform: translate(3px, -3px) scale(1.2);
        -o-transform: translate(3px, -3px) scale(1.2);
        -webkit-transform: translate(3px, -3px) scale(1.2);
        transform: translate(3px, -3px) scale(1.2);
    }
    to {
        opacity: 0.2;
        -moz-transform: translate(6px, -6px) scale(1.4);
        -ms-transform: translate(6px, -6px) scale(1.4);
        -o-transform: translate(6px, -6px) scale(1.4);
        -webkit-transform: translate(6px, -6px) scale(1.4);
        transform: translate(6px, -6px) scale(1.4);
    }
}

@keyframes sendSignal {
    from {
        opacity: 0;
        -moz-transform: translate(0, 0) scale(1);
        -ms-transform: translate(0, 0) scale(1);
        -o-transform: translate(0, 0) scale(1);
        -webkit-transform: translate(0, 0) scale(1);
        transform: translate(0, 0) scale(1);
    }
    50% {
        opacity: 0.7;
        -moz-transform: translate(3px, -3px) scale(1.2);
        -ms-transform: translate(3px, -3px) scale(1.2);
        -o-transform: translate(3px, -3px) scale(1.2);
        -webkit-transform: translate(3px, -3px) scale(1.2);
        transform: translate(3px, -3px) scale(1.2);
    }
    to {
        opacity: 0.2;
        -moz-transform: translate(6px, -6px) scale(1.4);
        -ms-transform: translate(6px, -6px) scale(1.4);
        -o-transform: translate(6px, -6px) scale(1.4);
        -webkit-transform: translate(6px, -6px) scale(1.4);
        transform: translate(6px, -6px) scale(1.4);
    }
}

/* email animation */

@-moz-keyframes animateEnvelope {
    from {
        border-top: 2px solid #21016b;
    }
    50% {
        border-top: 2px solid #f7f7f7;
    }
    to {
        border-top: 2px solid #21016b;
    }
}

@-ms-keyframes animateEnvelope {
    from {
        border-top: 2px solid #21016b;
    }
    50% {
        border-top: 2px solid #f7f7f7;
    }
    to {
        border-top: 2px solid #21016b;
    }
}

@-o-keyframes animateEnvelope {
    from {
        border-top: 2px solid #21016b;
    }
    50% {
        border-top: 2px solid #f7f7f7;
    }
    to {
        border-top: 2px solid #21016b;
    }
}

@-webkit-keyframes animateEnvelope {
    from {
        border-top: 2px solid #21016b;
    }
    50% {
        border-top: 2px solid #f7f7f7;
    }
    to {
        border-top: 2px solid #21016b;
    }
}

@keyframes animateEnvelope {
    from {
        border-top: 2px solid #21016b;
    }
    50% {
        border-top: 2px solid #f7f7f7;
    }
    to {
        border-top: 2px solid #21016b;
    }
}

@-moz-keyframes animateEnvelopeLeft {
    from {
        -moz-transform: rotate(35deg);
        -ms-transform: rotate(35deg);
        -o-transform: rotate(35deg);
        -webkit-transform: rotate(35deg);
        transform: rotate(35deg);
    }
    50% {
        -moz-transform: rotate(-35deg);
        -ms-transform: rotate(-35deg);
        -o-transform: rotate(-35deg);
        -webkit-transform: rotate(-35deg);
        transform: rotate(-35deg);
    }
    to {
        -moz-transform: rotate(35deg);
        -ms-transform: rotate(35deg);
        -o-transform: rotate(35deg);
        -webkit-transform: rotate(35deg);
        transform: rotate(35deg);
    }
}

@-ms-keyframes animateEnvelopeLeft {
    from {
        -moz-transform: rotate(35deg);
        -ms-transform: rotate(35deg);
        -o-transform: rotate(35deg);
        -webkit-transform: rotate(35deg);
        transform: rotate(35deg);
    }
    50% {
        -moz-transform: rotate(-35deg);
        -ms-transform: rotate(-35deg);
        -o-transform: rotate(-35deg);
        -webkit-transform: rotate(-35deg);
        transform: rotate(-35deg);
    }
    to {
        -moz-transform: rotate(35deg);
        -ms-transform: rotate(35deg);
        -o-transform: rotate(35deg);
        -webkit-transform: rotate(35deg);
        transform: rotate(35deg);
    }
}

@-o-keyframes animateEnvelopeLeft {
    from {
        -moz-transform: rotate(35deg);
        -ms-transform: rotate(35deg);
        -o-transform: rotate(35deg);
        -webkit-transform: rotate(35deg);
        transform: rotate(35deg);
    }
    50% {
        -moz-transform: rotate(-35deg);
        -ms-transform: rotate(-35deg);
        -o-transform: rotate(-35deg);
        -webkit-transform: rotate(-35deg);
        transform: rotate(-35deg);
    }
    to {
        -moz-transform: rotate(35deg);
        -ms-transform: rotate(35deg);
        -o-transform: rotate(35deg);
        -webkit-transform: rotate(35deg);
        transform: rotate(35deg);
    }
}

@-webkit-keyframes animateEnvelopeLeft {
    from {
        -moz-transform: rotate(35deg);
        -ms-transform: rotate(35deg);
        -o-transform: rotate(35deg);
        -webkit-transform: rotate(35deg);
        transform: rotate(35deg);
    }
    50% {
        -moz-transform: rotate(-35deg);
        -ms-transform: rotate(-35deg);
        -o-transform: rotate(-35deg);
        -webkit-transform: rotate(-35deg);
        transform: rotate(-35deg);
    }
    to {
        -moz-transform: rotate(35deg);
        -ms-transform: rotate(35deg);
        -o-transform: rotate(35deg);
        -webkit-transform: rotate(35deg);
        transform: rotate(35deg);
    }
}

@keyframes animateEnvelopeLeft {
    from {
        -moz-transform: rotate(35deg);
        -ms-transform: rotate(35deg);
        -o-transform: rotate(35deg);
        -webkit-transform: rotate(35deg);
        transform: rotate(35deg);
    }
    50% {
        -moz-transform: rotate(-35deg);
        -ms-transform: rotate(-35deg);
        -o-transform: rotate(-35deg);
        -webkit-transform: rotate(-35deg);
        transform: rotate(-35deg);
    }
    to {
        -moz-transform: rotate(35deg);
        -ms-transform: rotate(35deg);
        -o-transform: rotate(35deg);
        -webkit-transform: rotate(35deg);
        transform: rotate(35deg);
    }
}

@-moz-keyframes animateEnvelopeRight {
    from {
        -moz-transform: rotate(-35deg);
        -ms-transform: rotate(-35deg);
        -o-transform: rotate(-35deg);
        -webkit-transform: rotate(-35deg);
        transform: rotate(-35deg);
    }
    50% {
        -moz-transform: rotate(35deg);
        -ms-transform: rotate(35deg);
        -o-transform: rotate(35deg);
        -webkit-transform: rotate(35deg);
        transform: rotate(35deg);
    }
    to {
        -moz-transform: rotate(-35deg);
        -ms-transform: rotate(-35deg);
        -o-transform: rotate(-35deg);
        -webkit-transform: rotate(-35deg);
        transform: rotate(-35deg);
    }
}

@-ms-keyframes animateEnvelopeRight {
    from {
        -moz-transform: rotate(-35deg);
        -ms-transform: rotate(-35deg);
        -o-transform: rotate(-35deg);
        -webkit-transform: rotate(-35deg);
        transform: rotate(-35deg);
    }
    50% {
        -moz-transform: rotate(35deg);
        -ms-transform: rotate(35deg);
        -o-transform: rotate(35deg);
        -webkit-transform: rotate(35deg);
        transform: rotate(35deg);
    }
    to {
        -moz-transform: rotate(-35deg);
        -ms-transform: rotate(-35deg);
        -o-transform: rotate(-35deg);
        -webkit-transform: rotate(-35deg);
        transform: rotate(-35deg);
    }
}

@-o-keyframes animateEnvelopeRight {
    from {
        -moz-transform: rotate(-35deg);
        -ms-transform: rotate(-35deg);
        -o-transform: rotate(-35deg);
        -webkit-transform: rotate(-35deg);
        transform: rotate(-35deg);
    }
    50% {
        -moz-transform: rotate(35deg);
        -ms-transform: rotate(35deg);
        -o-transform: rotate(35deg);
        -webkit-transform: rotate(35deg);
        transform: rotate(35deg);
    }
    to {
        -moz-transform: rotate(-35deg);
        -ms-transform: rotate(-35deg);
        -o-transform: rotate(-35deg);
        -webkit-transform: rotate(-35deg);
        transform: rotate(-35deg);
    }
}

@-webkit-keyframes animateEnvelopeRight {
    from {
        -moz-transform: rotate(-35deg);
        -ms-transform: rotate(-35deg);
        -o-transform: rotate(-35deg);
        -webkit-transform: rotate(-35deg);
        transform: rotate(-35deg);
    }
    50% {
        -moz-transform: rotate(35deg);
        -ms-transform: rotate(35deg);
        -o-transform: rotate(35deg);
        -webkit-transform: rotate(35deg);
        transform: rotate(35deg);
    }
    to {
        -moz-transform: rotate(-35deg);
        -ms-transform: rotate(-35deg);
        -o-transform: rotate(-35deg);
        -webkit-transform: rotate(-35deg);
        transform: rotate(-35deg);
    }
}

@keyframes animateEnvelopeRight {
    from {
        -moz-transform: rotate(-35deg);
        -ms-transform: rotate(-35deg);
        -o-transform: rotate(-35deg);
        -webkit-transform: rotate(-35deg);
        transform: rotate(-35deg);
    }
    50% {
        -moz-transform: rotate(35deg);
        -ms-transform: rotate(35deg);
        -o-transform: rotate(35deg);
        -webkit-transform: rotate(35deg);
        transform: rotate(35deg);
    }
    to {
        -moz-transform: rotate(-35deg);
        -ms-transform: rotate(-35deg);
        -o-transform: rotate(-35deg);
        -webkit-transform: rotate(-35deg);
        transform: rotate(-35deg);
    }
}

@-moz-keyframes animateEnvelopeInner {
    from {
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@-ms-keyframes animateEnvelopeInner {
    from {
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@-o-keyframes animateEnvelopeInner {
    from {
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@-webkit-keyframes animateEnvelopeInner {
    from {
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes animateEnvelopeInner {
    from {
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@-moz-keyframes animateLetter {
    from {
        opacity: 0;
        width: 13px;
        height: 9px;
        top: -16px;
        left: -22px;
    }
    50% {
        opacity: 0.7;
        top: -8px;
        left: 0;
    }
    to {
        opacity: 0;
        width: 24px;
        height: 9px;
        top: 0;
        left: 0;
    }
}

@-ms-keyframes animateLetter {
    from {
        opacity: 0;
        width: 13px;
        height: 9px;
        top: -16px;
        left: -22px;
    }
    50% {
        opacity: 0.7;
        top: -8px;
        left: 0;
    }
    to {
        opacity: 0;
        width: 24px;
        height: 9px;
        top: 0;
        left: 0;
    }
}

@-o-keyframes animateLetter {
    from {
        opacity: 0;
        width: 13px;
        height: 9px;
        top: -16px;
        left: -22px;
    }
    50% {
        opacity: 0.7;
        top: -8px;
        left: 0;
    }
    to {
        opacity: 0;
        width: 24px;
        height: 9px;
        top: 0;
        left: 0;
    }
}

@-webkit-keyframes animateLetter {
    from {
        opacity: 0;
        width: 13px;
        height: 9px;
        top: -16px;
        left: -22px;
    }
    50% {
        opacity: 0.7;
        top: -8px;
        left: 0;
    }
    to {
        opacity: 0;
        width: 24px;
        height: 9px;
        top: 0;
        left: 0;
    }
}

@-moz-keyframes animateFax {
    from {
        opacity: 1;
        -moz-transform: translate(0, 0) scale(1);
        -ms-transform: translate(0, 0) scale(1);
        -o-transform: translate(0, 0) scale(1);
        -webkit-transform: translate(0, 0) scale(1);
        transform: translate(0, 0) scale(1);
    }
    50% {
        opacity: 0.5;
        -moz-transform: translate(0, 15px) scale(0.7);
        -ms-transform: translate(0, 15px) scale(0.7);
        -o-transform: translate(0, 15px) scale(0.7);
        -webkit-transform: translate(0, 15px) scale(0.7);
        transform: translate(0, 15px) scale(0.7);
    }
    to {
        opacity: 0;
        -moz-transform: translate(-20px, 40px) scale(0.5);
        -ms-transform: translate(-20px, 40px) scale(0.5);
        -o-transform: translate(-20px, 40px) scale(0.5);
        -webkit-transform: translate(-20px, 40px) scale(0.5);
        transform: translate(-20px, 40px) scale(0.5);
    }
}

@-ms-keyframes animateFax {
    from {
        opacity: 1;
        -moz-transform: translate(0, 0) scale(1);
        -ms-transform: translate(0, 0) scale(1);
        -o-transform: translate(0, 0) scale(1);
        -webkit-transform: translate(0, 0) scale(1);
        transform: translate(0, 0) scale(1);
    }
    50% {
        opacity: 0.5;
        -moz-transform: translate(0, 15px) scale(0.7);
        -ms-transform: translate(0, 15px) scale(0.7);
        -o-transform: translate(0, 15px) scale(0.7);
        -webkit-transform: translate(0, 15px) scale(0.7);
        transform: translate(0, 15px) scale(0.7);
    }
    to {
        opacity: 0;
        -moz-transform: translate(-20px, 40px) scale(0.5);
        -ms-transform: translate(-20px, 40px) scale(0.5);
        -o-transform: translate(-20px, 40px) scale(0.5);
        -webkit-transform: translate(-20px, 40px) scale(0.5);
        transform: translate(-20px, 40px) scale(0.5);
    }
}

@-o-keyframes animateFax {
    from {
        opacity: 1;
        -moz-transform: translate(0, 0) scale(1);
        -ms-transform: translate(0, 0) scale(1);
        -o-transform: translate(0, 0) scale(1);
        -webkit-transform: translate(0, 0) scale(1);
        transform: translate(0, 0) scale(1);
    }
    50% {
        opacity: 0.5;
        -moz-transform: translate(0, 15px) scale(0.7);
        -ms-transform: translate(0, 15px) scale(0.7);
        -o-transform: translate(0, 15px) scale(0.7);
        -webkit-transform: translate(0, 15px) scale(0.7);
        transform: translate(0, 15px) scale(0.7);
    }
    to {
        opacity: 0;
        -moz-transform: translate(-20px, 40px) scale(0.5);
        -ms-transform: translate(-20px, 40px) scale(0.5);
        -o-transform: translate(-20px, 40px) scale(0.5);
        -webkit-transform: translate(-20px, 40px) scale(0.5);
        transform: translate(-20px, 40px) scale(0.5);
    }
}

@-webkit-keyframes animateFax {
    from {
        opacity: 1;
        -moz-transform: translate(0, 0) scale(1);
        -ms-transform: translate(0, 0) scale(1);
        -o-transform: translate(0, 0) scale(1);
        -webkit-transform: translate(0, 0) scale(1);
        transform: translate(0, 0) scale(1);
    }
    50% {
        opacity: 0.5;
        -moz-transform: translate(0, 15px) scale(0.7);
        -ms-transform: translate(0, 15px) scale(0.7);
        -o-transform: translate(0, 15px) scale(0.7);
        -webkit-transform: translate(0, 15px) scale(0.7);
        transform: translate(0, 15px) scale(0.7);
    }
    to {
        opacity: 0;
        -moz-transform: translate(-20px, 40px) scale(0.5);
        -ms-transform: translate(-20px, 40px) scale(0.5);
        -o-transform: translate(-20px, 40px) scale(0.5);
        -webkit-transform: translate(-20px, 40px) scale(0.5);
        transform: translate(-20px, 40px) scale(0.5);
    }
}

@keyframes animateFax {
    from {
        opacity: 1;
        -moz-transform: translate(0, 0) scale(1);
        -ms-transform: translate(0, 0) scale(1);
        -o-transform: translate(0, 0) scale(1);
        -webkit-transform: translate(0, 0) scale(1);
        transform: translate(0, 0) scale(1);
    }
    50% {
        opacity: 0.5;
        -moz-transform: translate(0, 15px) scale(0.7);
        -ms-transform: translate(0, 15px) scale(0.7);
        -o-transform: translate(0, 15px) scale(0.7);
        -webkit-transform: translate(0, 15px) scale(0.7);
        transform: translate(0, 15px) scale(0.7);
    }
    to {
        opacity: 0;
        -moz-transform: translate(-20px, 40px) scale(0.5);
        -ms-transform: translate(-20px, 40px) scale(0.5);
        -o-transform: translate(-20px, 40px) scale(0.5);
        -webkit-transform: translate(-20px, 40px) scale(0.5);
        transform: translate(-20px, 40px) scale(0.5);
    }
}