﻿.modal
{
    position: absolute;
    z-index: 999;
    height: 100%;
    width: 100%;
    top: 0;
    background-color: Black;
    filter: alpha(opacity=60);
    opacity: 0.6;
    -moz-opacity: 0.8;
    display: none;
}

.center
{
    z-index: 1000;
    margin: 50pxauto;
    padding: 10px;
    width: 130px;
    background-color: White;
    border-radius: 10px;
    filter: alpha(opacity=100);
    opacity: 1;
    -moz-opacity: 1;
}

.centerimg
{
    height: 128px;
    width: 128px;
}

.loader
{
    -moz-animation: rotate 1s infinite;
    -o-animation: rotate 1s infinite;
    -webkit-animation: rotate 1s infinite;
    animation: rotate 1s infinite;
    height: 50px;
    width: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top:-25px;
    margin-left:-25px;
}

    .loader:before,
    .loader:after
    {
        border-radius: 50%;
        content: '';
        display: block;
        height: 20px;
        width: 20px;
    }

    .loader:before
    {
        -moz-animation: ball1 1s infinite;
        -o-animation: ball1 1s infinite;
        -webkit-animation: ball1 1s infinite;
        animation: ball1 1s infinite;
        background-color: #cb2025;
        box-shadow: 30px 0 0 #f8b334;
        margin-bottom: 10px;
    }

    .loader:after
    {
        animation: ball2 1s infinite;
        background-color: #00a096;
        box-shadow: 30px 0 0 #97bf0d;
    }

@keyframes rotate
{
    0%
    {
        -webkit-transform: rotate(0deg) scale(0.8);
        -moz-transform: rotate(0deg) scale(0.8);
    }

    50%
    {
        -webkit-transform: rotate(360deg) scale(1.2);
        -moz-transform: rotate(360deg) scale(1.2);
    }

    100%
    {
        -webkit-transform: rotate(720deg) scale(0.8);
        -moz-transform: rotate(720deg) scale(0.8);
    }
}

@keyframes ball1
{
    0%
    {
        box-shadow: 30px 0 0 #f8b334;
    }

    50%
    {
        box-shadow: 0 0 0 #f8b334;
        margin-bottom: 0;
        -webkit-transform: translate(15px,15px);
        -moz-transform: translate(15px, 15px);
    }

    100%
    {
        box-shadow: 30px 0 0 #f8b334;
        margin-bottom: 10px;
    }
}

@keyframes ball2
{
    0%
    {
        box-shadow: 30px 0 0 #97bf0d;
    }

    50%
    {
        box-shadow: 0 0 0 #97bf0d;
        margin-top: -20px;
        -webkit-transform: translate(15px,15px);
        -moz-transform: translate(15px, 15px);
    }

    100%
    {
        box-shadow: 30px 0 0 #97bf0d;
        margin-top: 0;
    }
}
