/* CSS Document */


@keyframes typeIn {
    to { width: 28ch; }
}

.box{   
    
    transition: transform 0.6s, opacity 0.5s;
    
}
.box.left{
    transform: translateX(-200px);
    opacity: 0;
}
.box.right{
    transform: translateX(200px);
	opacity: 0;
   
}
.box.top{
    transform: translateY(-200px) rotate(360deg);
	opacity: 0;
    
}
.box.bottom{
    transform: translateY(200px) scaleX(3);
    opacity: 0;    
}
.box.active{
    transform: translateX(0);
    opacity: 1;
}

.loader{
    text-align: center;
}