*,
*:before,
*:after {
    box-sizing: inherit;
}

html {
    width: 100%;
    height: 100%;
}

body {
    width: 100%;
    height: 100%;
    margin: 0;
}

@keyframes pulsate {
    0% {
      transform: scale(1.15);
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      transform: scale(1.5);
      opacity: 0;
    }
}

.loading-wrapper *,
.loading-wrapper *:before,
.loading-wrapper *:after {
    box-sizing: content-box;
}


.loading-wrapper {
    z-index: 10;
    background-color: #dad8d2;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.loading-outer {
    fill: #006B58
}

.loading-middle {
    fill: #dad8d2;
}

.loading-pulse {
    z-index: 11;
    position: absolute;
	top: 50%;
	left: 50%;
    width: 110px;
	height: 110px;
	margin: -125px 0 0 -75px;
    opacity: 0;
	border-radius: 110px;
	border: 20px solid #006B58;
    animation: pulsate 1s ease-out;
    animation-iteration-count: infinite;
}

.loading-hourglass {
    z-index: 12;
	position: absolute;
    top: 50%;
	left: 50%;
    background: #dad8d2;
    width: 50px;
    height: 100px;
	margin: -100px 0 0 -25px;
    box-shadow: inset #006B58 0 0 0 0, inset #006B58 0 50px 0 0, inset #dad8d2 0 0 100px 0;
}