:root {
    --mhtk-site-preloader-header-background-color: white;
    --mhtk-site-preloader-progress-background-color: var(--primary-dark, #003359);
    --mhtk-site-preloader-progress-color: white;
    --mhtk-site-preloader-content-background-color: var(--primary, #0072a7);
    --mhtk-site-preloader-content-color: white;
    --logo: url("clientlibs/resources/images/MHtKLogo.svg");
    --error-icon-color: var(--danger, #aa272f);
    --size-1x: 8px;
    --size-half: calc(var(--size-1x) * 0.5);
    --size-2x: calc(var(--size-1x) * 2);
    --size-two-half: calc(var(--size-2x) * 1.5);
    --size-3x: calc(var(--size-1x) * 3);
    --size-4x: calc(var(--size-1x) * 4);
    --size-5x: calc(var(--size-1x) * 5);
    --size-6x: calc(var(--size-1x) * 6);
    --size-7x: calc(var(--size-1x) * 7);
    --size-8x: calc(var(--size-1x) * 8);
}

@font-face {
    font-family: fontello;
    font-style: normal;
    font-weight: normal;
    src: url("clientlibs/resources/fonts/fontello.woff?83534092") format("woff");
}

@font-face {
    font-family: Lora;
    font-style: normal;
    font-weight: 500;
    src: url("clientlibs/resources/fonts/Lora.woff2") format("woff2");
}

@font-face {
    font-family: Lato;
    font-style: normal;
    font-weight: 400;
    src: url("clientlibs/resources/fonts/lato-regular.woff2") format("woff2");
}

@keyframes processing {
    20% {
        opacity: 1;
        transform: scale(1.5);
    }
    
    25% {
        opacity: 1;
        transform: scale(1.5);
    }
    
    30% {
        opacity: 0.3;
        transform: scale(1);
    }
}

body {
    margin-block: 0;
    margin-inline: 0;
}

.mhtk-site-preloader__header {
    background-color: var(--mhtk-site-preloader-header-background-color);
    block-size: 40vh;
}

.mhtk-site-preloader__header--logo {
    background: var(--logo) no-repeat center 73%;
    block-size: calc(40vh - 73px);
}

.mhtk-site-preloader__loader {
    align-content: center;
    align-items: center;
    background-color: var(--mhtk-site-preloader-progress-background-color);
    block-size: 73px;
    display: flex;
    justify-content: center;
}

.mhtk-site-preloader__loader i {
    color: var(--mhtk-site-preloader-progress-color);
    font-family: fontello;
    font-size: var(--size-3x);
    font-style: normal;
    font-weight: normal;
    margin-block: var(--size-3x);
    margin-inline: var(--size-3x);
    opacity: 0.3;
}

.mhtk-site-preloader__content {
    text-align: center;
    align-items: center;
    background-color: var(--mhtk-site-preloader-content-background-color);
    block-size: 60vh;
    box-sizing: border-box;
    color: var(--mhtk-site-preloader-content-color);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-block: var(--size-4x) var(--size-6x);
    padding-inline: var(--size-3x) var(--size-3x);

    --link-color: var(--mhtk-site-preloader-content-color);
    --link-active-color: var(--mhtk-site-preloader-content-color);
    --link-hover-color: var(--mhtk-site-preloader-content-color);
    --heading-color: var(--mhtk-site-preloader-content-color);
}

.mhtk-site-preloader__loader i:nth-child(1) {
    animation: processing 2s ease-in-out infinite;
}

.mhtk-site-preloader__loader i:nth-child(2) {
    animation: processing 2s ease-in-out 0.4s infinite;
}

.mhtk-site-preloader__loader i:nth-child(3) {
    animation: processing 2s ease-in-out 0.8s infinite;
}

.mhtk-site-preloader__loader i:nth-child(4) {
    animation: processing 2s ease-in-out 1.2s infinite;
}

.mhtk-site-preloader__loader i:nth-child(5) {
    animation: processing 2s ease-in-out 1.6s infinite;
}

.mhtk-site-preloader__content-message {
    color: var(--mhtk-site-preloader-content-color);
    font-family: Lora;
    font-size: var(--size-3x);
    font-weight: 300;
    line-height: 30px;
    letter-spacing: 0em;
    margin-block-end: var(--size-two-half);
    margin-block-start: 0;
    text-align: center;
}

.mhtk-site-preloader__content-message i {
    background: white;
    border-radius: 50%;
    font-size: 1.3333em;
    color: var(--error-icon-color);
}

.mhtk-site-preloader__error-code {
    color: white;
    text-decoration: none;
    font-size: 0.875rem !important;
}

.mhtk-site-preloader__content--footer-message {
    max-inline-size: 524px;
}

.mhtk-site-preloader-content-link {
    color: var(--mhtk-site-preloader-content-color);
    font-family: Lato;
    font-size: 18px;
    font-weight: 700;
    line-height: 22px;
    letter-spacing: 0em;
    text-underline-offset: var(--size-1x);
}
.mhtk-site-preloader-content-link:hover, .mhtk-site-preloader-content-link:active {
    color: var(--mhtk-site-preloader-content-color);
}

.mhtk-site-preloader__content--footer-message {
    font-family: Lato;
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    margin-block: 0;
    text-align: center;
    font-family: Lato;
}