/*
=====================================================
=================== LOAGING PAGE ====================
=====================================================
|													|
| Version 0.1										|
| Plugin developed by Efren Pacheco	Sánchez 		|
| Full Stack developeper							|
| contact me at "efren.pacheco@codicusx.com"		|
| or me at "efren.pacsac@gmail.com"					|
| The idea to work with customize loagin pages      |
| is from my friend "Franscico Enrique Perez        |
| Hernandez" contact him at "pezfha@gmail.com"      |
|													|
| Made on May 8th, 2018							    |
|													|
| Description: 										|
|	This is my second 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:										|
| * Animation in SVG: All credit for the animations |
|       comes from the next link:   				|
|       http://samherbert.net/svg-loaders/          |
| and of course										|
| * HTML 											|
| * CSS 											|
| * JQuery											|
|													|
|													|
| Thank you so much for using :D					|
|													|
=====================================================
*/

.loadingPage-container {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 999999999999999999999999;
    cursor: wait;
    opacity: 0;
}

.loadingPage-color-default {
    background: rgba(247,105,72,1);
    background: -moz-linear-gradient(45deg, rgba(247,105,72,1) 0%, rgba(247,105,72,1) 18%, rgba(151,42,161,1) 86%, rgba(151,42,161,1) 100%);
    background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(247,105,72,1)), color-stop(18%, rgba(247,105,72,1)), color-stop(86%, rgba(151,42,161,1)), color-stop(100%, rgba(151,42,161,1)));
    background: -webkit-linear-gradient(45deg, rgba(247,105,72,1) 0%, rgba(247,105,72,1) 18%, rgba(151,42,161,1) 86%, rgba(151,42,161,1) 100%);
    background: -o-linear-gradient(45deg, rgba(247,105,72,1) 0%, rgba(247,105,72,1) 18%, rgba(151,42,161,1) 86%, rgba(151,42,161,1) 100%);
    background: -ms-linear-gradient(45deg, rgba(247,105,72,1) 0%, rgba(247,105,72,1) 18%, rgba(151,42,161,1) 86%, rgba(151,42,161,1) 100%);
    background: linear-gradient(45deg, rgba(247,105,72,1) 0%, rgba(247,105,72,1) 18%, rgba(151,42,161,1) 86%, rgba(151,42,161,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f76948', endColorstr='#972aa1', GradientType=1 );
}

.loadingPage-color-transparent {
    background-color: rgba(0,0,0,0.5);
}

.loadingPage-color-blue {
    background: rgba(0,174,255,1);
    background: -moz-linear-gradient(45deg, rgba(0,174,255,1) 0%, rgba(0,174,255,1) 13%, rgba(51,106,230,1) 85%, rgba(51,106,230,1) 100%);
    background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(0,174,255,1)), color-stop(13%, rgba(0,174,255,1)), color-stop(85%, rgba(51,106,230,1)), color-stop(100%, rgba(51,106,230,1)));
    background: -webkit-linear-gradient(45deg, rgba(0,174,255,1) 0%, rgba(0,174,255,1) 13%, rgba(51,106,230,1) 85%, rgba(51,106,230,1) 100%);
    background: -o-linear-gradient(45deg, rgba(0,174,255,1) 0%, rgba(0,174,255,1) 13%, rgba(51,106,230,1) 85%, rgba(51,106,230,1) 100%);
    background: -ms-linear-gradient(45deg, rgba(0,174,255,1) 0%, rgba(0,174,255,1) 13%, rgba(51,106,230,1) 85%, rgba(51,106,230,1) 100%);
    background: linear-gradient(45deg, rgba(0,174,255,1) 0%, rgba(0,174,255,1) 13%, rgba(51,106,230,1) 85%, rgba(51,106,230,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00aeff', endColorstr='#336ae6', GradientType=1 );
}

.loadingPage-color-orange {
    background: rgba(255,205,51,1);
    background: -moz-linear-gradient(45deg, rgba(255,205,51,1) 0%, rgba(255,205,51,1) 11%, rgba(255,113,1,1) 91%, rgba(255,113,1,1) 100%);
    background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(255,205,51,1)), color-stop(11%, rgba(255,205,51,1)), color-stop(91%, rgba(255,113,1,1)), color-stop(100%, rgba(255,113,1,1)));
    background: -webkit-linear-gradient(45deg, rgba(255,205,51,1) 0%, rgba(255,205,51,1) 11%, rgba(255,113,1,1) 91%, rgba(255,113,1,1) 100%);
    background: -o-linear-gradient(45deg, rgba(255,205,51,1) 0%, rgba(255,205,51,1) 11%, rgba(255,113,1,1) 91%, rgba(255,113,1,1) 100%);
    background: -ms-linear-gradient(45deg, rgba(255,205,51,1) 0%, rgba(255,205,51,1) 11%, rgba(255,113,1,1) 91%, rgba(255,113,1,1) 100%);
    background: linear-gradient(45deg, rgba(255,205,51,1) 0%, rgba(255,205,51,1) 11%, rgba(255,113,1,1) 91%, rgba(255,113,1,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffcd33', endColorstr='#ff7101', GradientType=1 );
}

.loadingPage-color-red {
    background: rgba(244,142,176,1);
    background: -moz-linear-gradient(45deg, rgba(244,142,176,1) 0%, rgba(255,115,117,1) 38%, rgba(255,83,84,1) 82%, rgba(255,83,84,1) 100%);
    background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(244,142,176,1)), color-stop(38%, rgba(255,115,117,1)), color-stop(82%, rgba(255,83,84,1)), color-stop(100%, rgba(255,83,84,1)));
    background: -webkit-linear-gradient(45deg, rgba(244,142,176,1) 0%, rgba(255,115,117,1) 38%, rgba(255,83,84,1) 82%, rgba(255,83,84,1) 100%);
    background: -o-linear-gradient(45deg, rgba(244,142,176,1) 0%, rgba(255,115,117,1) 38%, rgba(255,83,84,1) 82%, rgba(255,83,84,1) 100%);
    background: -ms-linear-gradient(45deg, rgba(244,142,176,1) 0%, rgba(255,115,117,1) 38%, rgba(255,83,84,1) 82%, rgba(255,83,84,1) 100%);
    background: linear-gradient(45deg, rgba(244,142,176,1) 0%, rgba(255,115,117,1) 38%, rgba(255,83,84,1) 82%, rgba(255,83,84,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f48eb0', endColorstr='#ff5354', GradientType=1 );
}

.loadingPage-color-green {
    background: rgba(29,231,180,1);
    background: -moz-linear-gradient(45deg, rgba(29,231,180,1) 0%, rgba(66,161,73,1) 86%, rgba(66,161,73,1) 100%);
    background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(29,231,180,1)), color-stop(86%, rgba(66,161,73,1)), color-stop(100%, rgba(66,161,73,1)));
    background: -webkit-linear-gradient(45deg, rgba(29,231,180,1) 0%, rgba(66,161,73,1) 86%, rgba(66,161,73,1) 100%);
    background: -o-linear-gradient(45deg, rgba(29,231,180,1) 0%, rgba(66,161,73,1) 86%, rgba(66,161,73,1) 100%);
    background: -ms-linear-gradient(45deg, rgba(29,231,180,1) 0%, rgba(66,161,73,1) 86%, rgba(66,161,73,1) 100%);
    background: linear-gradient(45deg, rgba(29,231,180,1) 0%, rgba(66,161,73,1) 86%, rgba(66,161,73,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1de7b4', endColorstr='#42a149', GradientType=1 );
}

.loadingPage-content {
    text-align: center;
}

.loadingPage-img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.loadingPage-title {
    color: white;
    text-align: center;
}


/* ======================== SCREENS HIGHER THAN 0 WIDTH PIXELS ======================== */
@media only screen and (min-width: 0px) {

    /* SCREENS HIGHER THAN 0 HEIGHT PIXELS */
    @media only screen and (min-height: 0px) {
        .loadingPage-img {
            width: 80vw;
            margin-top: 25%;
        }

        .loadingPage-title {
            font-size: 6vw;
            text-transform: uppercase;
        }
    }

    /* SCREENS HIGHER THAN 800 HEIGHT PIXELS */
    @media only screen and (min-height: 800px) {
        .loadingPage-img {
            width: 80vw;
            margin-top: 40%;
        }
        .loadingPage-title {
            font-size: 6vw;
            text-transform: uppercase;
        }
    }

    /* SCREENS HIGHER THAN 1000 HEIGHT PIXELS */
    @media only screen and (min-height: 1000px) {
        .loadingPage-img {
            width: 80vw;
            margin-top: 70%;
        }
        .loadingPage-title {
            font-size: 6vw;
            text-transform: uppercase;
        }
    }
}

/* ======================== SCREENS HIGHER THAN 400 WIDTH PIXELS ======================== */
@media only screen and (min-width: 400px) {
    /* SCREENS HIGHER THAN 0 HEIGHT PIXELS */
    @media only screen and (min-height: 0px) {
        .loadingPage-img {
            width: 50vw;
            margin-top: 10%;
        }
        .loadingPage-title {
            font-size: 6vw;
            text-transform: uppercase;
        }
    }
    /* SCREENS HIGHER THAN 600 HEIGHT PIXELS */
    @media only screen and (min-height: 600px) {
        .loadingPage-img {
            width: 80vw;
            margin-top: 15%;
        }
        .loadingPage-title {
            font-size: 6vw;
            text-transform: uppercase;
        }
    }
    /* SCREENS HIGHER THAN 800 HEIGHT PIXELS */
    @media only screen and (min-height: 800px) {
        .loadingPage-img {
            width: 80vw;
            margin-top: 30%;
        }
        .loadingPage-title {
            font-size: 6vw;
            text-transform: uppercase;
        }
    }
    /* SCREENS HIGHER THAN 1000 HEIGHT PIXELS */
    @media only screen and (min-height: 1000px) {
        .loadingPage-img {
            width: 80vw;
            margin-top: 40%;
        }
        .loadingPage-title {
            font-size: 6vw;
            text-transform: uppercase;
        }
    }
}

/* ======================== SCREENS HIGHER THAN 600 WIDTH PIXELS ======================== */
@media only screen and (min-width: 600px) {
    /* SCREENS HIGHER THAN 0 HEIGHT PIXELS */
    @media only screen and (min-height: 0px) {
        .loadingPage-img {
            width: 30vw;
            margin-top: 5%;
        }
        .loadingPage-title {
            font-size: 3vw;
            text-transform: uppercase;
        }
    }
    /* SCREENS HIGHER THAN 400 HEIGHT PIXELS */
    @media only screen and (min-height: 400px) {
        .loadingPage-img {
            width: 40vw;
            margin-top: 5%;
        }
        .loadingPage-title {
            font-size: 4vw;
            text-transform: uppercase;
        }
    }
    /* SCREENS HIGHER THAN 600 HEIGHT PIXELS */
    @media only screen and (min-height: 600px) {
        .loadingPage-img {
            width: 50vw;
            margin-top: 10%;
        }
        .loadingPage-title {
            font-size: 6vw;
            text-transform: uppercase;
        }
    }
    /* SCREENS HIGHER THAN 800 HEIGHT PIXELS */
    @media only screen and (min-height: 800px) {
        .loadingPage-img {
            width: 80vw;
            margin-top: 10%;
        }
        .loadingPage-title {
            font-size: 6vw;
            text-transform: uppercase;
        }
    }
    /* SCREENS HIGHER THAN 1000 HEIGHT PIXELS */
    @media only screen and (min-height: 1000px) {
        .loadingPage-img {
            width: 80vw;
            margin-top: 10%;
        }
        .loadingPage-title {
            font-size: 6vw;
            text-transform: uppercase;
        }
    }
}

/* ======================== SCREENS HIGHER THAN 800 WIDTH PIXELS ======================== */
@media only screen and (min-width: 800px) {
    /* SCREENS HIGHER THAN 0 HEIGHT PIXELS */
    @media only screen and (min-height: 0px) {
        .loadingPage-img {
            width: 25vw;
            margin-top: 5%;
        }
        .loadingPage-title {
            font-size: 2vw;
            text-transform: uppercase;
        }
    }
    /* SCREENS HIGHER THAN 400 HEIGHT PIXELS */
    @media only screen and (min-height: 400px) {
        .loadingPage-img {
            width: 35vw;
            margin-top: 5%;
        }
        .loadingPage-title {
            font-size: 3vw;
            text-transform: uppercase;
        }
    }
    /* SCREENS HIGHER THAN 600 HEIGHT PIXELS */
    @media only screen and (min-height: 600px) {
        .loadingPage-img {
            width: 50vw;
            margin-top: 10%;
        }
        .loadingPage-title {
            font-size: 5vw;
            text-transform: uppercase;
        }
    }
    /* SCREENS HIGHER THAN 800 HEIGHT PIXELS */
    @media only screen and (min-height: 800px) {
        .loadingPage-img {
            width: 60vw;
            margin-top: 5%;
        }
        .loadingPage-title {
            font-size: 6vw;
            text-transform: uppercase;
        }
    }
    /* SCREENS HIGHER THAN 1000 HEIGHT PIXELS */
    @media only screen and (min-height: 1000px) {
        .loadingPage-img {
            width: 60vw;
            margin-top: 10%;
        }
        .loadingPage-title {
            font-size: 6vw;
            text-transform: uppercase;
        }
    }
}

/* ======================== SCREENS HIGHER THAN 1000 WIDTH PIXELS ======================== */
@media only screen and (min-width: 1000px) {
    /* SCREENS HIGHER THAN 0 HEIGHT PIXELS */
    @media only screen and (min-height: 0px) {
        .loadingPage-img {
            width: 25vw;
            margin-top: 5%;
        }
        .loadingPage-title {
            font-size: 2vw;
            text-transform: uppercase;
        }
    }
    /* SCREENS HIGHER THAN 400 HEIGHT PIXELS */
    @media only screen and (min-height: 400px) {
        .loadingPage-img {
            width: 25vw;
            margin-top: 5%;
        }
        .loadingPage-title {
            font-size: 3vw;
            text-transform: uppercase;
        }
    }
    /* SCREENS HIGHER THAN 600 HEIGHT PIXELS */
    @media only screen and (min-height: 600px) {
        .loadingPage-img {
            width: 40vw;
            margin-top: 10%;
        }
        .loadingPage-title {
            font-size: 4vw;
            text-transform: uppercase;
        }
    }
    /* SCREENS HIGHER THAN 800 HEIGHT PIXELS */
    @media only screen and (min-height: 800px) {
        .loadingPage-img {
            width: 50vw;
            margin-top: 7%;
        }
        .loadingPage-title {
            font-size: 5vw;
            text-transform: uppercase;
        }
    }
    /* SCREENS HIGHER THAN 1000 HEIGHT PIXELS */
    @media only screen and (min-height: 1000px) {
        .loadingPage-img {
            width: 50vw;
            margin-top: 10%;
        }
        .loadingPage-title {
            font-size: 5vw;
            text-transform: uppercase;
        }
    }
}

/* ======================== SCREENS HIGHER THAN 1200 WIDTH PIXELS ======================== */
@media only screen and (min-width: 1200px) {
    /* SCREENS HIGHER THAN 0 HEIGHT PIXELS */
    @media only screen and (min-height: 0px) {
        .loadingPage-img {
            width: 10vw;
            margin-top: 5%;
        }
        .loadingPage-title {
            font-size: 2vw;
            text-transform: uppercase;
        }
    }
    /* SCREENS HIGHER THAN 400 HEIGHT PIXELS */
    @media only screen and (min-height: 400px) {
        .loadingPage-img {
            width: 20vw;
            margin-top: 5%;
        }
        .loadingPage-title {
            font-size: 2vw;
            text-transform: uppercase;
        }
    }
    /* SCREENS HIGHER THAN 600 HEIGHT PIXELS */
    @media only screen and (min-height: 600px) {
        .loadingPage-img {
            width: 30vw;
            margin-top: 5%;
        }
        .loadingPage-title {
            font-size: 3vw;
            text-transform: uppercase;
        }
    }
    /* SCREENS HIGHER THAN 800 HEIGHT PIXELS */
    @media only screen and (min-height: 800px) {
        .loadingPage-img {
            width: 40vw;
            margin-top: 5%;
        }
        .loadingPage-title {
            font-size: 4vw;
            text-transform: uppercase;
        }
    }
    /* SCREENS HIGHER THAN 1000 HEIGHT PIXELS */
    @media only screen and (min-height: 1000px) {
        .loadingPage-img {
            width: 50vw;
            margin-top: 7%;
        }
        .loadingPage-title {
            font-size: 5vw;
            text-transform: uppercase;
        }
    }
}

/* ======================== SCREENS HIGHER THAN 1400 WIDTH PIXELS ======================== */
@media only screen and (min-width: 1400px) {
    /* SCREENS HIGHER THAN 0 HEIGHT PIXELS */
    @media only screen and (min-height: 0px) {
        .loadingPage-img {
            width: 10vw;
            margin-top: 5%;
        }
        .loadingPage-title {
            font-size: 2vw;
            text-transform: uppercase;
        }
    }
    /* SCREENS HIGHER THAN 400 HEIGHT PIXELS */
    @media only screen and (min-height: 400px) {
        .loadingPage-img {
            width: 20vw;
            margin-top: 5%;
        }
        .loadingPage-title {
            font-size: 2vw;
            text-transform: uppercase;
        }
    }
    /* SCREENS HIGHER THAN 600 HEIGHT PIXELS */
    @media only screen and (min-height: 600px) {
        .loadingPage-img {
            width: 30vw;
            margin-top: 3%;
        }
        .loadingPage-title {
            font-size: 3vw;
            text-transform: uppercase;
        }
    }
    /* SCREENS HIGHER THAN 800 HEIGHT PIXELS */
    @media only screen and (min-height: 800px) {
        .loadingPage-img {
            width: 35vw;
            margin-top: 5%;
        }
        .loadingPage-title {
            font-size: 4vw;
            text-transform: uppercase;
        }
    }
    /* SCREENS HIGHER THAN 1000 HEIGHT PIXELS */
    @media only screen and (min-height: 1000px) {
        .loadingPage-img {
            width: 40vw;
            margin-top: 5%;
        }
        .loadingPage-title {
            font-size: 4vw;
            text-transform: uppercase;
        }
    }
}

/* ======================== SCREENS HIGHER THAN 1600 WIDTH PIXELS ======================== */
@media only screen and (min-width: 1600px) {
    /* SCREENS HIGHER THAN 0 HEIGHT PIXELS */
    @media only screen and (min-height: 0px) {
        .loadingPage-img {
            width: 7vw;
            margin-top: 3%;
        }
        .loadingPage-title {
            font-size: 1.5vw;
            text-transform: uppercase;
        }
    }
    /* SCREENS HIGHER THAN 400 HEIGHT PIXELS */
    @media only screen and (min-height: 400px) {
        .loadingPage-img {
            width: 15vw;
            margin-top: 5%;
        }
        .loadingPage-title {
            font-size: 2vw;
            text-transform: uppercase;
        }
    }
    /* SCREENS HIGHER THAN 600 HEIGHT PIXELS */
    @media only screen and (min-height: 600px) {
        .loadingPage-img {
            width: 25vw;
            margin-top: 3%;
        }
        .loadingPage-title {
            font-size: 2vw;
            text-transform: uppercase;
        }
    }
    /* SCREENS HIGHER THAN 800 HEIGHT PIXELS */
    @media only screen and (min-height: 800px) {
        .loadingPage-img {
            width: 35vw;
            margin-top: 5%;
        }
        .loadingPage-title {
            font-size: 4vw;
            text-transform: uppercase;
        }
    }
    /* SCREENS HIGHER THAN 1000 HEIGHT PIXELS */
    @media only screen and (min-height: 1000px) {
        .loadingPage-img {
            width: 35vw;
            margin-top: 5%;
        }
        .loadingPage-title {
            font-size: 4vw;
            text-transform: uppercase;
        }
    }
}