/* Preloader styles for My Host Deluxe */
/* Colors aligned with site: oranges and dark overlay */
:root{
	--mhd-orange-1: #ec6b12;
	--mhd-orange-2: #ff8c00;
	--mhd-dark-overlay: rgba(0,0,0,.35);
}

html,body{height:100%;margin:0}
#preloader{
	position:fixed;
	inset:0;
	display:grid;
	place-items:center;
	background:linear-gradient(180deg,var(--mhd-dark-overlay),rgba(0,0,0,.08));
	z-index:9999;
	transition: opacity .45s ease, visibility .45s ease;
	visibility:visible;
	opacity:1;
}
#preloader.hidden{opacity:0;visibility:hidden;pointer-events:none}

.preloader{width:88px;height:96px;position:relative;transform:rotateZ(-60deg)}
.preloader .slice{position:absolute;left:50%;top:0;transform-origin:left bottom;border-top:26px solid transparent;border-bottom:20px solid transparent;border-left:40px solid var(--mhd-orange-1);border-radius:4px 4px 0 0;transition:all .2s linear}
.preloader .slice:nth-child(1){transform:rotateZ(60deg) rotateY(90deg)}
.preloader .slice:nth-child(2){transform:rotateZ(120deg) rotateY(90deg)}
.preloader .slice:nth-child(3){transform:rotateZ(180deg) rotateY(90deg)}
.preloader .slice:nth-child(4){transform:rotateZ(240deg) rotateY(90deg)}
.preloader .slice:nth-child(5){transform:rotateZ(300deg) rotateY(90deg)}
.preloader .slice:nth-child(6){transform:rotateZ(360deg) rotateY(90deg)}

@keyframes slice-cycle-1 {0%{transform:rotateZ(60deg) rotateY(90deg);border-left-color:var(--mhd-orange-2)}25%{transform:rotateZ(60deg) rotateY(0deg);border-left-color:var(--mhd-orange-1)}65%{transform:rotateZ(60deg) rotateY(0deg);border-left-color:var(--mhd-orange-1)}100%{transform:rotateZ(60deg) rotateY(90deg);border-left-color:var(--mhd-orange-2)}}
@keyframes slice-cycle-2 {0%{transform:rotateZ(120deg) rotateY(90deg);border-left-color:var(--mhd-orange-2)}25%{transform:rotateZ(120deg) rotateY(0deg);border-left-color:var(--mhd-orange-1)}65%{transform:rotateZ(120deg) rotateY(0deg);border-left-color:var(--mhd-orange-1)}100%{transform:rotateZ(120deg) rotateY(90deg);border-left-color:var(--mhd-orange-2)}}
@keyframes slice-cycle-3 {0%{transform:rotateZ(180deg) rotateY(90deg);border-left-color:var(--mhd-orange-2)}25%{transform:rotateZ(180deg) rotateY(0deg);border-left-color:var(--mhd-orange-1)}65%{transform:rotateZ(180deg) rotateY(0deg);border-left-color:var(--mhd-orange-1)}100%{transform:rotateZ(180deg) rotateY(90deg);border-left-color:var(--mhd-orange-2)}}
@keyframes slice-cycle-4 {0%{transform:rotateZ(240deg) rotateY(90deg);border-left-color:var(--mhd-orange-2)}25%{transform:rotateZ(240deg) rotateY(0deg);border-left-color:var(--mhd-orange-1)}65%{transform:rotateZ(240deg) rotateY(0deg);border-left-color:var(--mhd-orange-1)}100%{transform:rotateZ(240deg) rotateY(90deg);border-left-color:var(--mhd-orange-2)}}
@keyframes slice-cycle-5 {0%{transform:rotateZ(300deg) rotateY(90deg);border-left-color:var(--mhd-orange-2)}25%{transform:rotateZ(300deg) rotateY(0deg);border-left-color:var(--mhd-orange-1)}65%{transform:rotateZ(300deg) rotateY(0deg);border-left-color:var(--mhd-orange-1)}100%{transform:rotateZ(300deg) rotateY(90deg);border-left-color:var(--mhd-orange-2)}}
@keyframes slice-cycle-6 {0%{transform:rotateZ(360deg) rotateY(90deg);border-left-color:var(--mhd-orange-2)}25%{transform:rotateZ(360deg) rotateY(0deg);border-left-color:var(--mhd-orange-1)}65%{transform:rotateZ(360deg) rotateY(0deg);border-left-color:var(--mhd-orange-1)}100%{transform:rotateZ(360deg) rotateY(90deg);border-left-color:var(--mhd-orange-2)}}

.preloader.loading .slice:nth-child(1){animation:slice-cycle-1 2s linear infinite}
.preloader.loading .slice:nth-child(2){animation:slice-cycle-2 2s linear infinite .09s}
.preloader.loading .slice:nth-child(3){animation:slice-cycle-3 2s linear infinite .18s}
.preloader.loading .slice:nth-child(4){animation:slice-cycle-4 2s linear infinite .27s}
.preloader.loading .slice:nth-child(5){animation:slice-cycle-5 2s linear infinite .36s}
.preloader.loading .slice:nth-child(6){animation:slice-cycle-6 2s linear infinite .45s}

@keyframes preloader-spin {from{transform:rotateZ(-60deg) rotateY(0deg)}to{transform:rotateZ(-60deg) rotateY(360deg)}}
.preloader.loading{animation:preloader-spin 4s linear infinite}

.brand {position:absolute;bottom:-50px;left:50%;transform:translateX(-50%);color:#fff;font-weight:700;letter-spacing:.6px}
.brand small{display:block;font-weight:400;font-size:12px;opacity:.95}