.loader {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    background-color: #FFF;
    z-index: 0;
    opacity: 0;
    transition: opacity ease 0.3s;
    display: none;
}
.loader.active {
    opacity: 1;
    display: inline;
    z-index: 10;
}

.wrapper {
    font-size: 1.6rem;
    background: #fff;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
        flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
.clearfix:before,
.clearfix:after {
    content: ' ';
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    zoom: 1;
}
.hourglass {
    display: block;
    background: #ffffff;
    margin: 3em auto;
    width: 2em;
    height: 4em;
    box-shadow: inset #dad8d2 0 0 0 0, inset #1784c7 0 2em 0 0, inset #dad8d2 0 0 4em 0;
    -webkit-animation: hourglass 1s linear infinite;
            animation: hourglass 1s linear infinite;
}
.outer {
    fill: #3e454c;
}
.middle {
    fill: #ffffff;
}
@-webkit-keyframes hourglass {
    0% {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
        box-shadow: inset #dad8d2 0 0 0 0, inset #1784c7 0 2em 0 0, inset #dad8d2 0 4em 0 0, inset #1784c7 0 4em 0 0;
    }
    80% {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
        box-shadow: inset #dad8d2 0 2em 0 0, inset #1784c7 0 2em 0 0, inset #dad8d2 0 2em 0 0, inset #1784c7 0 4em 0 0;
    }
    100% {
        -webkit-transform: rotate(180deg);
                transform: rotate(180deg);
        box-shadow: inset #dad8d2 0 2em 0 0, inset #1784c7 0 2em 0 0, inset #dad8d2 0 2em 0 0, inset #1784c7 0 4em 0 0;
    }
}
@keyframes hourglass {
    0% {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
        box-shadow: inset #dad8d2 0 0 0 0, inset #1784c7 0 2em 0 0, inset #dad8d2 0 4em 0 0, inset #1784c7 0 4em 0 0;
    }
    80% {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
        box-shadow: inset #dad8d2 0 2em 0 0, inset #1784c7 0 2em 0 0, inset #dad8d2 0 2em 0 0, inset #1784c7 0 4em 0 0;
    }
    100% {
        -webkit-transform: rotate(180deg);
                transform: rotate(180deg);
        box-shadow: inset #dad8d2 0 2em 0 0, inset #1784c7 0 2em 0 0, inset #dad8d2 0 2em 0 0, inset #1784c7 0 4em 0 0;
    }
}