/*--------------------------------------------------------------
Header styles 
--------------------------------------------------------------*/

.banner {
    -webkit-perspective: 1000px;
            perspective: 1000px;
    position: relative;
    z-index: -1;
}

.text-alexa {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    margin-top: -57%;
    -webkit-animation-delay: 1s;
            animation-delay: 1s;
    -webkit-animation-name: alexa;
            animation-name: alexa;
    -webkit-animation-duration: 3s;
            animation-duration: 3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
    -webkit-animation-direction: forward;
            animation-direction: forward;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
}

.text-knows {
    width: 75%;
    margin-left: auto;
    margin-right: auto;
    margin-top: -15%;
    -webkit-animation-delay: 2s;
            animation-delay: 2s;
    -webkit-animation-name: alexa;
            animation-name: alexa;
    -webkit-animation-duration: 3s;
            animation-duration: 3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
    -webkit-animation-direction: forward;
            animation-direction: forward;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
}

.text-converge {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: -8%;
    -webkit-animation-delay: 3s;
            animation-delay: 3s;
    -webkit-animation-name: alexa;
            animation-name: alexa;
    -webkit-animation-duration: 3s;
            animation-duration: 3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
    -webkit-animation-direction: forward;
            animation-direction: forward;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
}

.text-do-you {
    width: 68%;
    margin-left: auto;
    margin-right: auto;
    margin-top: -40%;
    -webkit-animation-delay: 5s;
            animation-delay: 5s;
    -webkit-animation-name: alexa-hold;
            animation-name: alexa-hold;
    -webkit-animation-duration: 3.5s;
            animation-duration: 3.5s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
    -webkit-animation-direction: forward;
            animation-direction: forward;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
}

.converge-logo {
    width: 90%;
    margin-top: -6%;
    margin-left: auto;
    margin-right: auto;
    -webkit-animation-delay: 8s;
            animation-delay: 8s;
    -webkit-animation-name: converge-logo-flip;
            animation-name: converge-logo-flip;
    -webkit-animation-duration: 2s;
            animation-duration: 2s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
    -webkit-animation-direction: forward;
            animation-direction: forward;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
}

.converge-skill {
    width: 20%;
    margin-top: -48%;
    margin-left: auto;
    margin-right: auto;
    -webkit-animation-delay: 9s;
            animation-delay: 9s;
    -webkit-animation-name: converge-logo;
            animation-name: converge-logo;
    -webkit-animation-duration: 2s;
            animation-duration: 2s;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
    -webkit-animation-direction: forward;
            animation-direction: forward;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
}

@-webkit-keyframes alexa {
    0% {
        -webkit-transform: scale(.7);
                transform: scale(.7);
        opacity: 0;
    }
    50% {
        -webkit-transform: scale(1.0);
                transform: scale(1.0);
        opacity: 1.0;
    }
    100% {
        opacity: 0;
    }
}

@keyframes alexa {
    0% {
        -webkit-transform: scale(.7);
                transform: scale(.7);
        opacity: 0;
    }
    50% {
        -webkit-transform: scale(1.0);
                transform: scale(1.0);
        opacity: 1.0;
    }
    100% {
        opacity: 0;
    }
}

@-webkit-keyframes alexa-hold {
    0% {
        -webkit-transform: scale(.7);
                transform: scale(.7);
        opacity: 0;
    }
    40% {
        -webkit-transform: scale(1.0);
                transform: scale(1.0);
        opacity: 1.0;
    }
    60% {
        -webkit-transform: scale(1.0);
                transform: scale(1.0);
        opacity: 1.0;
    }
    100% {
        opacity: 0;
    }
}

@keyframes alexa-hold {
    0% {
        -webkit-transform: scale(.7);
                transform: scale(.7);
        opacity: 0;
    }
    40% {
        -webkit-transform: scale(1.0);
                transform: scale(1.0);
        opacity: 1.0;
    }
    60% {
        -webkit-transform: scale(1.0);
                transform: scale(1.0);
        opacity: 1.0;
    }
    100% {
        opacity: 0;
    }
}

@-webkit-keyframes converge-logo {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes converge-logo {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-webkit-keyframes converge-logo-flip {
    from {
        -webkit-transform: rotateX(90deg);
                transform: rotateX(90deg);
        opacity: 0;
    }
    to {
        -webkit-transform: rotateX(0deg);
                transform: rotateX(0deg);
        opacity: 1;
    }
}

@keyframes converge-logo-flip {
    from {
        -webkit-transform: rotateX(90deg);
                transform: rotateX(90deg);
        opacity: 0;
    }
    to {
        -webkit-transform: rotateX(0deg);
                transform: rotateX(0deg);
        opacity: 1;
    }
}