#loading{
    background-size:cover;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-image: url('../static/img/loading.jpg');
}
.clod{
    position: relative;
    top:70%;
    width: 100%;
    text-align: center;
}
.clod p{
    width: 100%;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    position: fixed;
    bottom: 10%;
    font-size: 24px;
    color: #fff;
    text-align: center;
}
.container {
    position: relative;
    text-align: center;
    width: 100px;
}
.item {
    display: inline-block;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    background: #fff;;
    animation: item 1s ease-in-out infinite;
}
.b {
    animation-delay: .2s;
}
.c {
    animation-delay: .4s;
}
@keyframes item {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    50% {
        transform: translateY(20px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}