/* Loading
************************************************/
.loading-container {position: fixed; background-color: rgba(16, 44, 82, 0.9); z-index: 9;top: 0; left: 0; height: 100%; width: 100%; cursor: wait}
.loading{width: 40px; height: 40px; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; transform: rotate(45deg)}
.loading div{width: 16px; height: 16px; position: absolute;}
.l1 div, .l2 div, .l3 div, .l4 div{width: 100%; height: 100%;}
.l1 div, .l4 div{ background-color: #002855; }
.l2 div, .l3 div{ background-color: #c8102e; }
.l1{ transform: translate(0, 0); }
.l2{ transform: translate(0, 16px); }
.l3{ transform: translate(16px, 0px); }
.l4{ transform: translate(16px, 16px); }

@keyframes rot1{
    0%{ transform: rotate(0deg); }
    40%{ transform: rotate(0deg); }
    50%{ transform: rotate(0deg); }
    60%{ transform: rotate(90deg); }
    100%{ transform: rotate(90deg); }
}
@keyframes rot2{
    0%{ transform: rotate(0deg); }
    40%{ transform: rotate(0deg); }
    50%{ transform: rotate(0deg); }
    60%{ transform: rotate(-90deg); }
    100%{ transform: rotate(-90deg); }
}
@keyframes rot3{
    0%{ transform: rotate(45deg); }
    35%{ transform: rotate(45deg); }
    65%{ transform: rotate(405deg); }
    100%{ transform: rotate(405deg); }
}
@keyframes l1-rise{
    0%{ transform: translate(0px, 0px); }
    30%{ transform: translate(-4px, -4px); }
    70%{ transform: translate(-4px, -4px); }
    100%{ transform: translate(0px, 0px); }
}
@keyframes l2-rise{
    0%{ transform: translate(0, 16px); }
    30%{ transform: translate(-4px, 20px); }
    70%{ transform: translate(-4px, 20px); }
    100%{ transform: translate(0, 16px); }
}
@keyframes l3-rise{
    0%{ transform: translate(16px, 0px); }
    30%{ transform: translate(20px, -4px); }
    70%{ transform: translate(20px, -4px); }
    100%{ transform: translate(16px, 0px); }
}
@keyframes l4-rise{
    0%{ transform: translate(16px, 16px); }
    30%{ transform: translate(20px, 20px); }
    70%{ transform: translate(20px, 20px); }
    100%{ transform: translate(16px, 16px); }
}
.l1{ animation: l1-rise 3s ease 0s infinite; }
.l2{ animation: l2-rise 3s ease 0s infinite; }
.l3{ animation: l3-rise 3s ease 0s infinite; }
.l4{ animation: l4-rise 3s ease 0s infinite; }
.l1 div, .l4 div{ animation: rot1 3s ease 0s infinite; }
.l2 div, .l3 div{ animation: rot2 3s ease 0s infinite; }