﻿.spinnercontainer {
    background: rgb(45,54,145);
    background: -moz-linear-gradient(135deg, rgba(45,54,145,1) 0%, rgba(77,214,176,1) 100%);
    background: -webkit-linear-gradient(135deg, rgba(45,54,145,1) 0%, rgba(77,214,176,1) 100%);
    background: linear-gradient(135deg, rgba(45,54,145,1) 0%, rgba(77,214,176,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#2d3691",endColorstr="#4dd6b0",GradientType=1);
    border:0;
    border-radius: 16px;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 12px;
    height: 550px;
    width: 400px;
    max-height: 90%;
    max-width: 90%;
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 1015;
}

.spinnercontainer .spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

    .spinnercontainer .spinner > div {
        width: 18px;
        height: 18px;
        background-color: #ffffff;
        background: #fff;
        border-radius: 100%;
        display: inline-block;
        -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
        animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    }

.spinnercontainer .spinner .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.spinnercontainer .spinner .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0)
    }

    40% {
        -webkit-transform: scale(1.0)
    }
}

@keyframes sk-bouncedelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    40% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }
}

@media only screen and (max-width: 600px) {
    .spinnercontainer {
        right: 5%;
        bottom: 5%;
    }
}

@media only screen and (max-width: 500px) {
    .spinnercontainer {
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
    }
}