﻿.blackscreen {
    background: rgba(0,0,0,0.9);
    height: 100%;
    left: 0;
    opacity: 0.7;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1500;
}
.loader_popup {
            width: 97px;
            height: 19px;
            position: fixed;
            z-index:99999;
            top:50%;
            left: 50%;
            transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
        }

            .loader_popup > div {
                content: " ";
                width: 19px;
                height: 19px;
                background: rgb(33,150,243);
                border-radius: 100%;
                position: absolute;
                animation: cssload-shift 2.3s linear infinite;
                -o-animation: cssload-shift 2.3s linear infinite;
                -ms-animation: cssload-shift 2.3s linear infinite;
                -webkit-animation: cssload-shift 2.3s linear infinite;
                -moz-animation: cssload-shift 2.3s linear infinite;
            }

                .loader_popup > div:nth-of-type(1) {
                    animation-delay: -0.46s;
                    -o-animation-delay: -0.46s;
                    -ms-animation-delay: -0.46s;
                    -webkit-animation-delay: -0.46s;
                    -moz-animation-delay: -0.46s;
                }

                .loader_popup > div:nth-of-type(2) {
                    animation-delay: -0.92s;
                    -o-animation-delay: -0.92s;
                    -ms-animation-delay: -0.92s;
                    -webkit-animation-delay: -0.92s;
                    -moz-animation-delay: -0.92s;
                }

                .loader_popup > div:nth-of-type(3) {
                    animation-delay: -1.38s;
                    -o-animation-delay: -1.38s;
                    -ms-animation-delay: -1.38s;
                    -webkit-animation-delay: -1.38s;
                    -moz-animation-delay: -1.38s;
                }

                .loader_popup > div:nth-of-type(4) {
                    animation-delay: -1.84s;
                    -o-animation-delay: -1.84s;
                    -ms-animation-delay: -1.84s;
                    -webkit-animation-delay: -1.84s;
                    -moz-animation-delay: -1.84s;
                }



       @keyframes cssload-shift {
            0% {
                left: -58px;
                opacity: 0;
                background-color: rgb(255,255,0);
            }

            10% {
                left: 0;
                opacity: 2;
            }

            90% {
                left: 97px;
                opacity: 3;
            }

            100% {
                left: 156px;
                background-color: rgb(255,0,0);
                opacity: 0;
            }
        }

        @-o-keyframes cssload-shift {
            0% {
                left: -58px;
                opacity: 0;
                background-color: rgb(255,255,0);
            }

            10% {
                left: 0;
                opacity: 2;
            }

            90% {
                left: 97px;
                opacity: 3;
            }

            100% {
                left: 156px;
                background-color: rgb(255,0,0);
                opacity: 0;
            }
        }

        @-ms-keyframes cssload-shift {
            0% {
                left: -58px;
                opacity: 0;
                background-color: rgb(255,255,0);
            }

            10% {
                left: 0;
                opacity: 1;
            }

            90% {
                left: 97px;
                opacity: 1;
            }

            100% {
                left: 156px;
                background-color: rgb(255,0,0);
                opacity: 0;
            }
        }

        @-webkit-keyframes cssload-shift {
            0% {
                left: -58px;
                opacity: 0;
                background-color: rgb(255,255,0);
            }

            10% {
                left: 0;
                opacity: 1;
            }

            90% {
                left: 97px;
                opacity: 1;
            }

            100% {
                left: 156px;
                background-color: rgb(255,0,0);
                opacity: 0;
            }
        }

        @-moz-keyframes cssload-shift {
            0% {
                left: -58px;
                opacity: 0;
                background-color: rgb(255,255,0);
            }

            10% {
                left: 0;
                opacity: 1;
            }

            90% {
                left: 97px;
                opacity: 1;
            }

            100% {
                left: 156px;
                background-color: rgb(255,0,0);
                opacity: 0;
            }
        }

@import url(http://fonts.googleapis.com/css?family=Open+Sans:700);
.cssload-container * {
	color: rgb(0,0,0);
	font-size: 33px;
	font-weight: 700;
	font-family: 'Open Sans', sans-serif;
}
.cssload-container {
	position: absolute;
	width: 117px;
	height: 49px;
	left: 50%;
	transform: translate(-50%, -50%);
		-o-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
}
.cssload-container > div {
	position: absolute;
	transform-origin: center;
		-o-transform-origin: center;
		-ms-transform-origin: center;
		-webkit-transform-origin: center;
		-moz-transform-origin: center;
}
.cssload-l {
	left: 8px;
}
.cssload-i {
	left: 58px;
}
.cssload-n {
	left: 70px;
}
.cssload-g {
	left: 97px;
}
.cssload-square,
.cssload-circle,
.cssload-triangle {
	left: 29px;
}
.cssload-square {
	background: rgb(117,179,209);
	width: 23px;
	height: 23px;
	left: 31px;
	top: 12px;
	transform: scale(0);
		-o-transform: scale(0);
		-ms-transform: scale(0);
		-webkit-transform: scale(0);
		-moz-transform: scale(0);
	animation: cssload-shrinkgrow 3.45s ease-in-out infinite;
		-o-animation: cssload-shrinkgrow 3.45s ease-in-out infinite;
		-ms-animation: cssload-shrinkgrow 3.45s ease-in-out infinite;
		-webkit-animation: cssload-shrinkgrow 3.45s ease-in-out infinite;
		-moz-animation: cssload-shrinkgrow 3.45s ease-in-out infinite;
	animation-delay: 2.3s;
		-o-animation-delay: 2.3s;
		-ms-animation-delay: 2.3s;
		-webkit-animation-delay: 2.3s;
		-moz-animation-delay: 2.3s;
}
.cssload-circle {
	background: rgb(129,212,125);
	width: 26px;
	height: 26px;
	top: 10px;
	left: 29px;
	border-radius: 50%;
	animation: cssload-shrinkgrow 3.45s ease-in-out infinite;
		-o-animation: cssload-shrinkgrow 3.45s ease-in-out infinite;
		-ms-animation: cssload-shrinkgrow 3.45s ease-in-out infinite;
		-webkit-animation: cssload-shrinkgrow 3.45s ease-in-out infinite;
		-moz-animation: cssload-shrinkgrow 3.45s ease-in-out infinite;
	animation-delay: 0s;
		-o-animation-delay: 0s;
		-ms-animation-delay: 0s;
		-webkit-animation-delay: 0s;
		-moz-animation-delay: 0s;
}
.cssload-triangle {
	width: 0;
	height: 0;
	left: 29px;
	top: 11px;
	border-style: solid;
	border-width: 0 14.5px 24.1px 14.5px;
	border-color: transparent transparent rgb(210,121,140) transparent;
	transform: scale(0);
		-o-transform: scale(0);
		-ms-transform: scale(0);
		-webkit-transform: scale(0);
		-moz-transform: scale(0);
	animation: cssload-shrinkgrow 3.45s ease-in-out infinite;
		-o-animation: cssload-shrinkgrow 3.45s ease-in-out infinite;
		-ms-animation: cssload-shrinkgrow 3.45s ease-in-out infinite;
		-webkit-animation: cssload-shrinkgrow 3.45s ease-in-out infinite;
		-moz-animation: cssload-shrinkgrow 3.45s ease-in-out infinite;
	animation-delay: 0.5s;
		-o-animation-delay: 0.5s;
		-ms-animation-delay: 0.5s;
		-webkit-animation-delay: 0.5s;
		-moz-animation-delay: 0.5s;
}


@keyframes cssload-shrinkgrow {
	0% {
		transform: scale(0);
	}
	12.5% {
		transform: scale(1);
	}
	25% {
		transform: scale(1);
	}
	33% {
		transform: scale(0);
	}
	100% {
		transform: scale(0);
	}
}

@-o-keyframes cssload-shrinkgrow {
	0% {
		-o-transform: scale(0);
	}
	12.5% {
		-o-transform: scale(1);
	}
	25% {
		-o-transform: scale(1);
	}
	33% {
		-o-transform: scale(0);
	}
	100% {
		-o-transform: scale(0);
	}
}

@-ms-keyframes cssload-shrinkgrow {
	0% {
		-ms-transform: scale(0);
	}
	12.5% {
		-ms-transform: scale(1);
	}
	25% {
		-ms-transform: scale(1);
	}
	33% {
		-ms-transform: scale(0);
	}
	100% {
		-ms-transform: scale(0);
	}
}

@-webkit-keyframes cssload-shrinkgrow {
	0% {
		-webkit-transform: scale(0);
	}
	12.5% {
		-webkit-transform: scale(1);
	}
	25% {
		-webkit-transform: scale(1);
	}
	33% {
		-webkit-transform: scale(0);
	}
	100% {
		-webkit-transform: scale(0);
	}
}

@-moz-keyframes cssload-shrinkgrow {
	0% {
		-moz-transform: scale(0);
	}
	12.5% {
		-moz-transform: scale(1);
	}
	25% {
		-moz-transform: scale(1);
	}
	33% {
		-moz-transform: scale(0);
	}
	100% {
		-moz-transform: scale(0);
	}
}




