@font-face {
    font-family: 'sb_tokyo_regular';
    src: url('sb_tokyo_regular-webfont.woff2') format('woff2'),
         url('sb_tokyo_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@keyframes resize {
    0% {width:2px; height:2px;}
    70% {width:300px; height:2px;}
    100% {width: 300px;}
}

@keyframes slidein {
    0% {left: -100%; width:2px; height:2px;}
    20% {left: 0;width:2px; height:2px;}
    70% {width:300px; height:2px;border-radius:0px;}
    100% {width: 300px;border-radius:10px;}
}

@keyframes logoin {
    0% {left: -100%;}
    100% {left: 15px;} 
}

@keyframes form_user_in {
    0% {left: -500px;}
    100% {left: 0px;} 
}

@keyframes form_pwd_in {
    0% {left: 500px;}
    100% {left: 0px;} 
}

@keyframes ani_fade_in {
    0% {opacity: 0;}
    100% {opacity: 1;} 
}


#form_pwd {
    position: relative;
    left: -500px;
    animation-name: form_pwd_in;
    animation-duration: 1s;
    animation-delay: 3s;
    animation-fill-mode: forwards;    
    overflow: hidden;
    animation-timing-function: ease-out;
}

.fade_in {
	opacity: 0;
    animation-name: ani_fade_in;
    animation-duration: 2s;
    animation-delay: 4s;
    animation-fill-mode: forwards;    
    animation-timing-function: ease-out;
    font-family: 'sb_tokyo_regular', arial, sans-serif; 
}

#form_user {
    position: relative;
    left: -500px;
    animation-name: form_user_in;
    animation-duration: 1s;
    animation-delay: 3s;
    animation-fill-mode: forwards;    
    overflow: hidden;
    animation-timing-function: ease-out;
}


.logo-slide {
    position: relative;
    left: -100%;
    animation-name: logoin;
    animation-duration: 1s;
    animation-delay: 3s;
    animation-fill-mode: forwards;    
    overflow: hidden;
    font-family: 'sb_tokyo_regular', arial, sans-serif;
    font-size: 24px;
    animation-timing-function: ease-out;
}

.anim-slide {
    position: relative;
    top: -100%;
    animation-name: slidein;
    animation-duration: 1s;
    animation-fill-mode: forwards;    
}

.center {
    margin:auto;
    align:center;
    position:relative;
    top:20px;
    animation-name: slidein;
    animation-duration: 3s;
    animation-fill-mode: forwards;

	width:300px;
	height:300px    

}

body {
	background: #ffffff;
	font-family: 'sb_tokyo_regular', arial, sans-serif;
}

.login_icon {
	width: 25px;
}

.form {
    border: 0px solid black;
	font-family: 'sb_tokyo_regular', arial, sans-serif;
}

#msg {
	color: #ff2020;
}