/* Site-wide page loader. Drawn with pseudo-elements on <html> so it shows on first paint with no extra markup.
   js/page-loader.js adds .sf-loading in <head> and fades it out once the page has loaded. */
html.sf-loading::before,
html.sf-loading::after {
    content: "";
    position: fixed;
    z-index: 2147483000;
    transition: opacity .45s ease, visibility .45s ease;
}
html.sf-loading::before {
    inset: 0;
    background: #fff url("../images/sanfix-logo.svg") no-repeat center calc(50% - 34px) / 150px auto;
}
html.sf-loading::after {
    top: calc(50% + 34px);
    left: 50%;
    width: 38px;
    height: 38px;
    margin: -19px 0 0 -19px;
    border: 3px solid #dceef7;
    border-top-color: #016ea9;
    border-right-color: #ffc41b;
    border-radius: 50%;
    animation: sf-loader-spin .8s linear infinite;
}
html.sf-loading.sf-loaded::before,
html.sf-loading.sf-loaded::after {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
@keyframes sf-loader-spin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    html.sf-loading::after { animation-duration: 2.4s; }
    html.sf-loading::before,
    html.sf-loading::after { transition-duration: .01s; }
}