#loading-page
{
    display: none;
    z-index: 999;
    background: rgba(0, 0, 0, 0.98);
}

    #loading-page > div:nth-child(1)
    {
        position: absolute;
        width: 500px;
        height: 200px;
        top: calc(50% - 114px);
        left: calc(50% - 250px);
        text-align: center;
        font-size: 22px;
        color: white;
        font-family: 'Raleway', sans-serif;
    }

#loading-page div:nth-child(1) img
{
width: 100%;
height: 100%;
min-width: 100%;
min-height: 100%;
max-width: 100%;
max-height: 100%;
}

#loading-page div:nth-child(1) video
{
width: 50%;
height: 50%;
min-width: 50%;
min-height: 50%;
max-width: 50%;
max-height: 50%;
padding-bottom: 30px;
}

#loading-page-msg
{
    width: 200px;
    margin: auto;
    -webkit-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -ms-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    transition: opacity .5s ease-in-out;
}

.sk-cube-grid
{
    width: 66px;
    height: 66px;
    margin: auto;
    margin-bottom: 50px;
}

    .sk-cube-grid .sk-cube
    {
        width: 32.9%;
        height: 32.9%;
        background-color: white;
        float: left;
        -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
        animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
    }

    .sk-cube-grid .sk-cube1
    {
        -webkit-animation-delay: 0.2s;
        animation-delay: 0.2s;
    }

    .sk-cube-grid .sk-cube2
    {
        -webkit-animation-delay: 0.3s;
        animation-delay: 0.3s;
    }

    .sk-cube-grid .sk-cube3
    {
        -webkit-animation-delay: 0.4s;
        animation-delay: 0.4s;
    }

    .sk-cube-grid .sk-cube4
    {
        -webkit-animation-delay: 0.1s;
        animation-delay: 0.1s;
    }

    .sk-cube-grid .sk-cube5
    {
        -webkit-animation-delay: 0.2s;
        animation-delay: 0.2s;
    }

    .sk-cube-grid .sk-cube6
    {
        -webkit-animation-delay: 0.3s;
        animation-delay: 0.3s;
    }

    .sk-cube-grid .sk-cube7
    {
        -webkit-animation-delay: 0s;
        animation-delay: 0s;
    }

    .sk-cube-grid .sk-cube8
    {
        -webkit-animation-delay: 0.1s;
        animation-delay: 0.1s;
    }

    .sk-cube-grid .sk-cube9
    {
        -webkit-animation-delay: 0.2s;
        animation-delay: 0.2s;
    }

@-webkit-keyframes sk-cubeGridScaleDelay
{
    0%, 70%, 100%
    {
        -webkit-transform: scale3D(1, 1, 1);
        transform: scale3D(1, 1, 1);
    }

    35%
    {
        -webkit-transform: scale3D(0, 0, 1);
        transform: scale3D(0, 0, 1);
    }
}

@keyframes sk-cubeGridScaleDelay
{
    0%, 70%, 100%
    {
        -webkit-transform: scale3D(1, 1, 1);
        transform: scale3D(1, 1, 1);
    }

    35%
    {
        -webkit-transform: scale3D(0, 0, 1);
        transform: scale3D(0, 0, 1);
    }
}
.spinner
{
    margin: auto;
    margin-bottom:50px;
    width: 170px;
    height: 40px;
    text-align: center;
    font-size: 10px;
}

    .spinner > div
    {
        background-color: white;
        height: 100%;
        width: 6px;
        display: inline-block;
        -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
        animation: sk-stretchdelay 1.2s infinite ease-in-out;
    }

    .spinner .rect2
    {
        -webkit-animation-delay: -1.1s;
        animation-delay: -1.1s;
    }

    .spinner .rect3
    {
        -webkit-animation-delay: -1.0s;
        animation-delay: -1.0s;
    }

    .spinner .rect4
    {
        -webkit-animation-delay: -0.9s;
        animation-delay: -0.9s;
    }

    .spinner .rect5
    {
        -webkit-animation-delay: -0.8s;
        animation-delay: -0.8s;
    }

@-webkit-keyframes sk-stretchdelay
{
    0%, 40%, 100%
    {
        -webkit-transform: scaleY(0.4)
    }

    20%
    {
        -webkit-transform: scaleY(1.0)
    }
}

@keyframes sk-stretchdelay
{
    0%, 40%, 100%
    {
        transform: scaleY(0.4);
        -webkit-transform: scaleY(0.4);
    }

    20%
    {
        transform: scaleY(1.0);
        -webkit-transform: scaleY(1.0);
    }
}