/*
=====================================================
=================== SIMPLE LOADING ===================
=====================================================
|													|
| Version 0.3										|
| Plugin developed by Efren Pacheco	Sánchez			|
| Full Stack developeper							|
| contact me at "efren.pacheco@codicusx.com"		|
| or at "efren.pacsac@gmail.com"					|
|													|
| Made on March 6th, 2019							|
|													|
| Description: 										|
|	This is my first plugin, as you can see 		|
| in all code you can find comments that will		|
| help you to understand how the plugin works.		|
|													|
| Resources: 										|
|	To create this plugin i used different 			|
| technologies:										|
| * HTML 											|
| * CSS 											|
|													|
|													|
| Thank you so much for using :D					|
|													|
=====================================================
*/

.simpleLoading {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    z-index: 999999999999;
    cursor: wait;
    background-color: rgba(0,0,0,0.7);

/*     display: none; */
}

.simpleLoading-img {
    position: absolute;
    top: calc(50% - 200px);
    left: calc(50% - 100px);
    transform: translate(-50%, -50%);

    width: 200px;
    height: 200px;

    border: 50px solid #f3f3f3;
    border-radius: 50%;
    border-top: 50px solid rgba(0,174,255,1);

    animation: spin 2s linear infinite;
}

.simpleLoading-text {
    position: absolute;
    top: calc(50% - 200px);
    left: calc(50% - 100px);

    width: 200px;
    height: 200px;

    color: white;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.simpleLoading-text {
    position: absolute;
    top: calc(50% - 0px);
    left: calc(50% - 200px);
    
    color: white;
    
    font-size: 5rem;
}

@media screen and (max-width: 740px) {
	
	.simpleLoading-img {
    position: absolute;
    top: calc(50% - 100px);
    left: calc(50% - 50px);
    transform: translate(-50%, -50%);

    width: 120px;
    height: 120px;

    border: 20px solid #f3f3f3;
    border-radius: 50%;
    border-top: 20px solid rgba(0,174,255,1);

    animation: spin 2s linear infinite;
	}
	
	.simpleLoading-text {
    position: absolute;
    top: calc(50% - 0px);
    left: calc(50% - 100px);
    
    color: white;
    font-size: 2.5rem;
	}
}