@keyframes loadingToRight {
    100%{
        width: 3rem;
    }
}


@keyframes openDiv {

    From {
        transform: translate3d(0px,0px,0px) scale(0,0);
    }
    To {
        transform: translate3d(0px,0px,0px) scale(1,1);
    }

/*translateX(-50%)*/
/*0%{
    transform: translate3d(0px,0px,0px) scale(.00016,1);
}
25%{
    transform: translate3d(0px,0px,0px) scale(.250016,1);
}
50%{
    transform: translate3d(0px,0px,0px) scale(.500016,1);
    width: 3rem;
}
75%{
    transform: translate3d(0px,0px,0px) scale(.75,1);
}
100%{
    transform: translate3d(0px,0px,0px) scale(1,1);
}*/
}


/*
transform: matrix(1, 0, 0, 1, 0, 0);*/


#container{
    display:block;
    width:600px;
    height:300px;
    box-shadow:0 0 3px rgba(0,0,0,0.2);
    background:#0a1b40;
    /*background-image: -moz-linear-gradient(bottom, #0a1b40 0%, #0a1b40 100%);
    background-image: -webkit-linear-gradient(bottom, #0a1b40 0%, #0a1b40 100%);*/

    -webkit-transition:all .4s ease-in-out;
    animation-name: showcase;
    -webkit-animation-name: showcase;
    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;

    position:absolute;
    top:50%;
    left:50%;

    transform:translate(-50%,-50%);
    -webkit-transform:translate(-50%,-50%);
}
/*@-webkit-keyframes showcase{
    0%{
        width:1px;
        height:1px;
        overflow:hidden;
        background:#F75234;
    }
    50%{
        width:300px;
        height:1px;
        overflow:hidden;
        background:#F75234;
    }
    100%{
        height:300px;
        width:300px;
        overflow:auto;
        background-image: -moz-linear-gradient(bottom, #DEC104 0%, #F75234 100%);
        background-image: -webkit-linear-gradient(bottom, #DEC104 0%, #F75234 100%);
    }
}*/
@keyframes showcase{
    0%{
        width:1px;
        height:1px;
        overflow:hidden;
        background:#0a1b40;
    }
    50%{
        width:600px;
        height:1px;
        overflow:hidden;
        background:#0a1b40;
    }
    100%{
        height:300px;
        width:600px;
        overflow:auto;
        background:#0a1b40;
        /*background-image: -moz-linear-gradient(bottom, #0a1b40 0%, #0a1b40 100%);
        background-image: -webkit-linear-gradient(bottom, #0a1b40 0%, #0a1b40 100%);*/
    }
}
