table { margin: 0 auto; } .title { text-align: center } /* LOADING ANIMATION */ /* .loader-wrapper { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #fdfdfd; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 18px; } .loader { width: 100px; height: 100px; display: inline-table; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; border-spacing: 0.3em; } .ascii-spinner-1 { opacity: 0; position: absolute; margin-left: 65px; margin-right: auto; left: 0; right: 0; color: #999; animation: loading-1 800ms ease-in infinite; -webkit-animation: loading-1 800ms ease-in infinite; -moz-animation: loading-1 800ms ease-in infinite; -o-animation: loading-1 800ms ease-in infinite; } .ascii-spinner-2 { opacity: 0; position: absolute; margin-left: 65px; margin-right: auto; left: 0; right: 0; color: #999; -webkit-animation: loading-2 800ms ease-in infinite; -moz-animation: loading-2 800ms ease-in infinite; -o-animation: loading-2 800ms ease-in infinite; animation: loading-2 800ms ease-in infinite; } .ascii-spinner-3 { opacity: 0; position: absolute; margin-left: 65px; margin-right: auto; left: 0; right: 0; color: #999; -webkit-animation: loading-3 800ms ease-in infinite; -moz-animation: loading-3 800ms ease-in infinite; -o-animation: loading-3 800ms ease-in infinite; animation: loading-3 800ms ease-in infinite; } .ascii-spinner-4 { opacity: 0; position: absolute; margin-left: 65px; margin-right: auto; left: 0; right: 0; color: #999; -webkit-animation: loading-4 800ms ease-in infinite; -moz-animation: loading-4 800ms ease-in infinite; -o-animation: loading-4 800ms ease-in infinite; animation: loading-4 800ms ease-in infinite; } @-webkit-keyframes loading-1 { 0% { opacity: 0; } 1% { opacity: 1; } 24% { opacity: 1; } 25% { opacity: 0; } 100% { opacity: 0; } } @-moz-keyframes loading-1 { 0% { opacity: 0; } 1% { opacity: 1; } 24% { opacity: 1; } 25% { opacity: 0; } 100% { opacity: 0; } } @-o-keyframes loading-1 { 0% { opacity: 0; } 1% { opacity: 1; } 24% { opacity: 1; } 25% { opacity: 0; } 100% { opacity: 0; } } @keyframes loading-1 { 0% { opacity: 0; } 1% { opacity: 1; } 24% { opacity: 1; } 25% { opacity: 0; } 100% { opacity: 0; } } @-webkit-keyframes loading-2 { 0% { opacity: 0; } 24% { opacity: 0; } 25% { opacity: 1; } 49% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; } } @-moz-keyframes loading-2 { 0% { opacity: 0; } 24% { opacity: 0; } 25% { opacity: 1; } 49% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; } } @-o-keyframes loading-2 { 0% { opacity: 0; } 24% { opacity: 0; } 25% { opacity: 1; } 49% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; } } @keyframes loading-2 { 0% { opacity: 0; } 24% { opacity: 0; } 25% { opacity: 1; } 49% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; } } @-webkit-keyframes loading-3 { 0% { opacity: 0; } 49% { opacity: 0; } 50% { opacity: 1; } 74% { opacity: 1; } 75% { opacity: 0; } 100% { opacity: 0; } } @-moz-keyframes loading-3 { 0% { opacity: 0; } 49% { opacity: 0; } 50% { opacity: 1; } 74% { opacity: 1; } 75% { opacity: 0; } 100% { opacity: 0; } } @-o-keyframes loading-3 { 0% { opacity: 0; } 49% { opacity: 0; } 50% { opacity: 1; } 74% { opacity: 1; } 75% { opacity: 0; } 100% { opacity: 0; } } @keyframes loading-3 { 0% { opacity: 0; } 49% { opacity: 0; } 50% { opacity: 1; } 74% { opacity: 1; } 75% { opacity: 0; } 100% { opacity: 0; } } @-webkit-keyframes loading-4 { 0% { opacity: 0; } 74% { opacity: 0; } 75% { opacity: 1; } 99% { opacity: 1; } 100% { opacity: 0; } } @-moz-keyframes loading-4 { 0% { opacity: 0; } 74% { opacity: 0; } 75% { opacity: 1; } 99% { opacity: 1; } 100% { opacity: 0; } } @-o-keyframes loading-4 { 0% { opacity: 0; } 74% { opacity: 0; } 75% { opacity: 1; } 99% { opacity: 1; } 100% { opacity: 0; } } @keyframes loading-4 { 0% { opacity: 0; } 74% { opacity: 0; } 75% { opacity: 1; } 99% { opacity: 1; } 100% { opacity: 0; } } */