@keyframes doublecircle-rotate { 0% { transform: translate(-50%, -50%) rotate(0); }
100% { transform: translate(-50%, -50%) rotate(360deg); } }
/* The double circle page loading animation. Requires the 'fouc' class in the html tag */
html.fouc #page-load-spinner { display: block; position: absolute; z-index: 99999; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); }
html.fouc #page-load-spinner:before, html.fouc #page-load-spinner:after { content: ''; position: absolute; top: 50%; left: 50%; border-radius: 50%; border-style: solid; border-top-color: #534e4b; border-right-color: #F1B460; border-bottom-color: #534e4b; border-left-color: #F1B460; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); animation: doublecircle-rotate 1.5s infinite ease-in-out; -webkit-animation: doublecircle-rotate 1.5s infinite ease-in-out; }
html.fouc #page-load-spinner:before { border-width: 10vh; }
html.fouc #page-load-spinner:after { width: 30vh; height: 30vh; border-width: 2.5vh; animation-direction: reverse; }
html.fouc #page-load-spinner span { display: block; position: relative; bottom: -40px; font-size: 20px; font-size: 1.25rem; }
html:not(.fouc) #page-load-spinner { display: none; }