@import url(https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css);

* {
    box-sizing: border-box;
}

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

body {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.clearfix {
    zoom: 1;
}

.clearfix:before, .clearfix:after {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden;
}

.clearfix:after {
    clear: both;
}

body {
    background-color: #1b6d85;
}

.loader {
    width: 1em;
    height: 1em;
    font-size: 150px;
    position: relative;
}

@media (max-width: 225px), (max-height: 225px) {
    .loader {
        font-size: 75px;
    }
}

.loader:before, .loader:after {
    content: "";
    top: 0;
    display: block;
    width: 1em;
    height: 1em;
    position: absolute;
    border-width: 0.5em;
    border-style: double;
    border-color: transparent;
    box-sizing: border-box;
    border-radius: 1em;
    -webkit-animation: spin 1s infinite;
    animation: spin 1s infinite;
}

.loader:after {
    left: 0;
    border-left-color: #ecf0f1;
}

.loader:before {
    right: 0;
    border-right-color: #ecf0f1;
    -webkit-animation-delay: -0.25s;
    animation-delay: -0.25s;
}

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin {
    from {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}