/* CSS Document */

#loaderdiv{
	width: 100%;
	height: 100%;    
    position: fixed;
    background-color: #B7E3DF;
    z-index:9999;
    opacity:0.8
}

.loader{
	width: 100px;
	height: 100px;

	position: absolute;
	top: 50%;
	left: 50%;

	margin-left: -50px;
	margin-top: -50px;
    z-index:9999;
}

.circle{
	width: 40px;
	height: 40px;
	border-radius: 20px;
	background-color: green;
}

.blue{
	background-color: rgb(25, 59, 72);
	position: absolute;
	top: 0px;
	left: 0px;

    -webkit-animation: movBlue 2s ease infinite;
    -moz-animation: movBlue 2s ease infinite;
    -ms-animation: movBlue 2s ease infinite;
    animation: movBlue 2s ease infinite;
}
.green{
	background-color: rgb(25, 166, 140);
	position: absolute;
	top: 0px;
	right: 0px;

    -webkit-animation: movGreen 2s ease infinite;
    -moz-animation: movGreen 2s ease infinite;
    -ms-animation: movGreen 2s ease infinite;
    animation: movGreen 2s ease infinite;
}
.red{
	background-color: rgb(246, 61, 58);
	position: absolute;
	bottom: 0px;
	right: 0px;

    -webkit-animation: movRed 2s ease infinite;
    -moz-animation: movRed 2s ease infinite;
    -ms-animation: movRed 2s ease infinite;
    animation: movRed 2s ease infinite;
}
.yellow{
	background-color: rgb(253, 165, 67);
	position: absolute;
	bottom: 0px;
	left: 0px;

    -webkit-animation: movYellow 2s ease infinite;
    -moz-animation: movYellow 2s ease infinite;
    -ms-animation: movYellow 2s ease infinite;
    animation: movYellow 2s ease infinite;
}



/* ANIMATION */
@-webkit-keyframes movBlue {
    0% {
        left: 0px;
        top: 0px;
    }
    25% {
    	left: calc(100% - 40px);
    	top: 0px;
    }
    50% {
    	top: calc(100% - 40px);
    	left: calc(100% - 40px);
    }
    75% {
    	left: 0px;
    	top: calc(100% - 40px);
    }
    100% {
    	top: 0px;
    	left: 0px;
    }
}
@-moz-keyframes movBlue {
    0% {
        left: 0px;
        top: 0px;
    }
    25% {
    	left: calc(100% - 40px);
    	top: 0px;
    }
    50% {
    	top: calc(100% - 40px);
    	left: calc(100% - 40px);
    }
    75% {
    	left: 0px;
    	top: calc(100% - 40px);
    }
    100% {
    	top: 0px;
    	left: 0px;
    }
}
@-ms-keyframes movBlue {
    0% {
        left: 0px;
        top: 0px;
    }
    25% {
    	left: calc(100% - 40px);
    	top: 0px;
    }
    50% {
    	top: calc(100% - 40px);
    	left: calc(100% - 40px);
    }
    75% {
    	left: 0px;
    	top: calc(100% - 40px);
    }
    100% {
    	top: 0px;
    	left: 0px;
    }
}
@keyframes movBlue {
    0% {
        left: 0px;
        top: 0px;
    }
    25% {
    	left: calc(100% - 40px);
    	top: 0px;
    }
    50% {
    	top: calc(100% - 40px);
    	left: calc(100% - 40px);
    }
    75% {
    	left: 0px;
    	top: calc(100% - 40px);
    }
    100% {
    	top: 0px;
    	left: 0px;
    }
}

@-webkit-keyframes movGreen {
    0% {
        right: 0px;
        top: 0px;
    }
    25% {
    	top: calc(100% - 40px);
    	right: 0px;
    }
    50% {
    	right: calc(100% - 40px);
    	top: calc(100% - 40px);
    }
    75% {
    	top: 0px;
    	right: calc(100% - 40px);
    }
    100% {
    	right: 0px;
    	top: 0px;
    }
}
@-moz-keyframes movGreen {
    0% {
        right: 0px;
        top: 0px;
    }
    25% {
    	top: calc(100% - 40px);
    	right: 0px;
    }
    50% {
    	right: calc(100% - 40px);
    	top: calc(100% - 40px);
    }
    75% {
    	top: 0px;
    	right: calc(100% - 40px);
    }
    100% {
    	right: 0px;
    	top: 0px;
    }
}
@-ms-keyframes movGreen {
    0% {
        right: 0px;
        top: 0px;
    }
    25% {
    	top: calc(100% - 40px);
    	right: 0px;
    }
    50% {
    	right: calc(100% - 40px);
    	top: calc(100% - 40px);
    }
    75% {
    	top: 0px;
    	right: calc(100% - 40px);
    }
    100% {
    	right: 0px;
    	top: 0px;
    }
}
@keyframes movGreen {
    0% {
        right: 0px;
        top: 0px;
    }
    25% {
    	top: calc(100% - 40px);
    	right: 0px;
    }
    50% {
    	right: calc(100% - 40px);
    	top: calc(100% - 40px);
    }
    75% {
    	top: 0px;
    	right: calc(100% - 40px);
    }
    100% {
    	right: 0px;
    	top: 0px;
    }
}

@-webkit-keyframes movRed {
    0% {
        right: 0px;
        bottom: 0px;
    }
    25% {
    	bottom: 0px;
    	right: calc(100% - 40px);
    }
    50% {
    	right: calc(100% - 40px);
    	bottom: calc(100% - 40px);
    }
    75% {
    	right: 0px;
    	bottom: calc(100% - 40px);
    }
    100% {
    	right: 0px;
    	bottom: 0px;
    }
}
@-moz-keyframes movRed {
    0% {
        right: 0px;
        bottom: 0px;
    }
    25% {
    	bottom: 0px;
    	right: calc(100% - 40px);
    }
    50% {
    	right: calc(100% - 40px);
    	bottom: calc(100% - 40px);
    }
    75% {
    	right: 0px;
    	bottom: calc(100% - 40px);
    }
    100% {
    	right: 0px;
    	bottom: 0px;
    }
}
@-ms-keyframes movRed {
    0% {
        right: 0px;
        bottom: 0px;
    }
    25% {
    	bottom: 0px;
    	right: calc(100% - 40px);
    }
    50% {
    	right: calc(100% - 40px);
    	bottom: calc(100% - 40px);
    }
    75% {
    	right: 0px;
    	bottom: calc(100% - 40px);
    }
    100% {
    	right: 0px;
    	bottom: 0px;
    }
}
@keyframes movRed {
    0% {
        right: 0px;
        bottom: 0px;
    }
    25% {
    	bottom: 0px;
    	right: calc(100% - 40px);
    }
    50% {
    	right: calc(100% - 40px);
    	bottom: calc(100% - 40px);
    }
    75% {
    	right: 0px;
    	bottom: calc(100% - 40px);
    }
    100% {
    	right: 0px;
    	bottom: 0px;
    }
}

@-webkit-keyframes movYellow {
    0% {
        left: 0px;
        bottom: 0px;
    }
    25% {
    	left: 0px;
    	bottom: calc(100% - 40px);
    }
    50% {
    	left: calc(100% - 40px);
    	bottom: calc(100% - 40px);
    }
    75% {
    	left: calc(100% - 40px);
    	bottom: 0px;
    }
    100% {
    	left: 0px;
    	bottom: 0px;
    }
}
@-moz-keyframes movYellow {
    0% {
        left: 0px;
        bottom: 0px;
    }
    25% {
    	left: 0px;
    	bottom: calc(100% - 40px);
    }
    50% {
    	left: calc(100% - 40px);
    	bottom: calc(100% - 40px);
    }
    75% {
    	left: calc(100% - 40px);
    	bottom: 0px;
    }
    100% {
    	left: 0px;
    	bottom: 0px;
    }
}
@-ms-keyframes movYellow {
    0% {
        left: 0px;
        bottom: 0px;
    }
    25% {
    	left: 0px;
    	bottom: calc(100% - 40px);
    }
    50% {
    	left: calc(100% - 40px);
    	bottom: calc(100% - 40px);
    }
    75% {
    	left: calc(100% - 40px);
    	bottom: 0px;
    }
    100% {
    	left: 0px;
    	bottom: 0px;
    }
}
@keyframes movYellow {
    0% {
        left: 0px;
        bottom: 0px;
    }
    25% {
    	left: 0px;
    	bottom: calc(100% - 40px);
    }
    50% {
    	left: calc(100% - 40px);
    	bottom: calc(100% - 40px);
    }
    75% {
    	left: calc(100% - 40px);
    	bottom: 0px;
    }
    100% {
    	left: 0px;
    	bottom: 0px;
    }
}