body {
    margin: 0;
    height: 100%;
    overflow: hidden;
    background: #D2E3AB;
}

h1 {
    font-family: monospace;
    color: #fff;
    font-size: 1.8em;
    margin-top: 10%;

}

.loading-panel {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    overflow: hidden;
}

.first.loading-panel {
    right: 0;
    background: #D2E3AB;
    animation: slide-in-right;
}

.icon-wrapper {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 100%;
    background: rgba(255, 255, 255, 0.3);
    top: 50%;
    margin-top: -100px;
    left: 50%;
    margin-left: -100px;
}

.icon-wrapper {
    position: relative;
    text-align: center;
}
.first.loading-panel .cloud {
    fill: #fff;
}

.icon-wrapper .icon {
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    margin-top: -10px;
}

.first.loading-panel .icon {
    overflow: hidden;
    animation: blind-right 1.42857s ease-out infinite;
    left: 50%;
    margin-left: -17px;
}

@keyframes slide-in-left {
    0% {
        transform: translate(-100%);
    }
    10% {
        transform: translate(0);
    }
    80% {
        transform: translate(0);
    }
    90% {
        transform: translate(-100%);
    }
    100% {
        transform: translate(-100%);
    }
}
@keyframes slide-in-right {
    0% {
        transform: translate(100%);
    }
    10% {
        transform: translate(0);
    }
    80% {
        transform: translate(0);
    }
    90% {
        transform: translate(100%);
    }
    100% {
        transform: translate(100%);
    }
}
@keyframes slide-in-bottom {
    0% {
        top: 120%;
    }
    10% {
        top: 120%;
    }
    15% {
        top: 50%;
    }
    75% {
        top: 50%;
    }
    80% {
        top: 120%;
    }
    100% {
        top: 120%;
    }
}
@keyframes slide-in-top {
    0% {
        top: -20%;
    }
    10% {
        top: -20%;
    }
    15% {
        top: 50%;
    }
    75% {
        top: 50%;
    }
    80% {
        top: -20%;
    }
    100% {
        top: -20%;
    }
}
@keyframes fade {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    75% {
        opacity: 1;
    }
    80% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@keyframes late-fade {
    0% {
        opacity: 0;
    }
    15% {
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    75% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@keyframes circulate-clockwise {
    0% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(10%, 10%);
    }
    50% {
        transform: translate(0%, 20%);
    }
    75% {
        transform: translate(-10%, 10%);
    }
}
@keyframes circulate-counterclockwise {
    0% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(-10%, 10%);
    }
    50% {
        transform: translate(0%, 20%);
    }
    75% {
        transform: translate(10%, 10%);
    }
}
@keyframes spin-clockwise {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(90deg);
    }
    50% {
        transform: rotate(180deg);
    }
    75% {
        transform: rotate(270deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes blind-right {
    0% {
        width: 0;
        opacity: 0;
    }
    1% {
        width: 0;
        opacity: 1;
    }
    50% {
        width: 35px;
        opacity: 1;
    }
    99% {
        width: 35px;
        opacity: 0;
    }
    100% {
        width: 0;
        opacity: 0;
    }
}

::selection {
    background: #D2E3AB;
    color: #fff;
}

::-moz-selection {
    background: #D2E3AB;
    color: #fff;
}