@keyframes rotate-loading {
            0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
            100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
        }

        @-moz-keyframes rotate-loading {
            0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
            100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
        }

        @-webkit-keyframes rotate-loading {
            0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
            100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
        }

        @-o-keyframes rotate-loading {
            0%  {transackform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
            100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
        }

        @keyframes rotate-loading {
            0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
            100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
        }

        @-moz-keyframes rotate-loading {
            0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
            100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
        }

        @-webkit-keyframes rotate-loading {
            0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
            100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
        }

        @-o-keyframes rotate-loading {
            0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
            100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
        }

        @keyframes loading-text-opacity {
            0%  {opacity: 0}
            20% {opacity: 0}
            50% {opacity: 1}
            100%{opacity: 0}
        }

        @-moz-keyframes loading-text-opacity {
            0%  {opacity: 0}
            20% {opacity: 0}
            50% {opacity: 1}
            100%{opacity: 0}
        }

        @-webkit-keyframes loading-text-opacity {
            0%  {opacity: 0}
            20% {opacity: 0}
            50% {opacity: 1}
            100%{opacity: 0}
        }
        
        @-o-keyframes loading-text-opacity {
            0%  {opacity: 0}
            20% {opacity: 0}
            50% {opacity: 1}
            100%{opacity: 0}
        }
        .loading-container,
        .loading {height: 300px;position: relative;width: 300px;border-radius: 100%;}

        .loading_external{position:fixed;top:0;left:0;right:0;bottom:0;background-color:var(--main-bg-color);z-index:1000}
        .loading-container {position:fixed;top:0;left:0;right:0;bottom:0;margin:calc(50vh - 150px) auto;z-index:100;background-color:transparent;}

        .loading {border: 2px solid transparent;border-color: transparent var(--main-loader-color) transparent var(--main-loader-color);-moz-animation: rotate-loading 1.5s linear 0s infinite normal;-moz-transform-origin: 50% 50%;-o-animation: rotate-loading 1.5s linear 0s infinite normal;-o-transform-origin: 50% 50%;-webkit-animation: rotate-loading 1.5s linear 0s infinite normal;-webkit-transform-origin: 50% 50%;animation: rotate-loading 1.5s linear 0s infinite normal;transform-origin: 50% 50%;}

        .loading-container:hover .loading {
            border-color: transparent var(--main-loader-color) transparent var(--main-loader-color);
        }
        .loading-container:hover .loading,
        .loading-container .loading {-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}

        #loading-text {-moz-animation: loading-text-opacity 2s linear 0s infinite normal;-o-animation: loading-text-opacity 2s linear 0s infinite normal;-webkit-animation: loading-text-opacity 2s linear 0s infinite normal;animation: loading-text-opacity 2s linear 0s infinite normal;color: black;font-family: "Helvetica Neue", "Helvetica", "arial";font-size: 20px;font-weight: bold;margin-top: 0px;opacity: 0;position: absolute;text-align: center;text-transform: uppercase;top: 0;width: 300px;height:300px;padding:50px;background-image:url('../../../img/loader.svg');background-size:50% 50%;background-position:center center;background-repeat:no-repeat;}
        
        #loading-text img{position:relative;width:100px;;padding:0px;}
       
        
        
/*@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
 .loading-container,.loading {
            height: 150px;
            position: relative;
            width: 150px;
            border-radius: 100%;
        }
        #loading-text {       
            width: 150px;
            height:150px;
            padding:50px;     
        }
        
        #loading-text img{
            position:relative;width:100px;
            border:1px solid red;padding:0px;
        }
}      */

/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {

}




@media only screen and (orientation : landscape) and (-webkit-device-pixel-ratio : 4){
.loading-container,.loading {height: 150px;position: relative;width: 150px;border-radius: 100%;}
#loading-text {width: 150px;height:150px;padding:50px;}     
#loading-text img{position:relative;width:100px;border:0px solid red;padding:0px;}
.loading-container {margin:calc(50vh - 75px) auto;z-index:100;}

}
@media only screen and (orientation : portrait) and (-webkit-device-pixel-ratio : 4){
.loading-container,.loading {height: 150px;position: relative;width: 150px;border-radius: 100%;}
#loading-text {width: 150px;height:150px;padding:50px;}     
#loading-text img{position:relative;width:100px;border:0px solid red;padding:0px;}
.loading-container {position:fixed;top:0;left:0;right:0;bottom:0;margin:calc(50vh - 75px) auto;z-index:100;background-color:transparent;}

}

@media only screen and (orientation : landscape) and (-webkit-device-pixel-ratio : 3.5){
.loading-container,.loading {height: 150px;position: relative;width: 150px;border-radius: 100%;}
#loading-text {width: 150px;height:150px;padding:50px;}     
#loading-text img{position:relative;width:100px;border:0px solid red;padding:0px;}
.loading-container {position:fixed;top:0;left:0;right:0;bottom:0;margin:calc(50vh - 75px) auto;z-index:100;background-color:transparent;}

}
@media only screen and (orientation : portrait) and (-webkit-device-pixel-ratio : 3.5){
.loading-container,.loading {height: 150px;position: relative;width: 150px;border-radius: 100%;}
#loading-text {width: 150px;height:150px;padding:50px;}     
#loading-text img{position:relative;width:100px;border:0px solid red;padding:0px;}
.loading-container {position:fixed;top:0;left:0;right:0;bottom:0;margin:calc(50vh - 75px) auto;z-index:100;background-color:transparent;}

}

@media only screen and (orientation : landscape) and (-webkit-device-pixel-ratio : 3){
.loading-container,.loading {height: 150px;position: relative;width: 150px;border-radius: 100%;}
#loading-text {width: 150px;height:150px;padding:50px;}     
#loading-text img{position:relative;width:100px;border:0px solid red;padding:0px;}
.loading-container {position:fixed;top:0;left:0;right:0;bottom:0;margin:calc(50vh - 75px) auto;z-index:100;background-color:transparent;}

}
@media only screen and (orientation : portrait) and (-webkit-device-pixel-ratio : 3){
.loading-container,.loading {height: 150px;position: relative;width: 150px;border-radius: 100%;}
#loading-text {width: 150px;height:150px;padding:50px;}     
#loading-text img{position:relative;width:100px;border:0px solid red;padding:0px;}
.loading-container {position:fixed;top:0;left:0;right:0;bottom:0;margin:calc(50vh - 75px) auto;z-index:100;background-color:transparent;}

}

@media only screen and (orientation : landscape) and (-webkit-device-pixel-ratio : 2){
.loading-container,.loading {height: 150px;position: relative;width: 150px;border-radius: 100%;}
#loading-text {width: 150px;height:150px;padding:50px;}     
#loading-text img{position:relative;width:100px;border:0px solid red;padding:0px;}
.loading-container {position:fixed;top:0;left:0;right:0;bottom:0;margin:calc(50vh - 75px) auto;z-index:100;background-color:transparent;}

}
@media only screen and (orientation : portrait) and (-webkit-device-pixel-ratio : 2){
.loading-container,.loading {height: 150px;position: relative;width: 150px;border-radius: 100%;}
#loading-text {width: 150px;height:150px;padding:50px;}     
#loading-text img{position:relative;width:100px;border:0px solid red;padding:0px;}
.loading-container {position:fixed;top:0;left:0;right:0;bottom:0;margin:calc(50vh - 75px) auto;z-index:100;background-color:transparent;}

}


@media only screen and (orientation : landscape) and (-webkit-device-pixel-ratio : 2.625){
.loading-container,.loading {height: 150px;position: relative;width: 150px;border-radius: 100%;}
#loading-text {width: 150px;height:150px;padding:50px;}     
#loading-text img{position:relative;width:100px;border:0px solid red;padding:0px;}
.loading-container {position:fixed;top:0;left:0;right:0;bottom:0;margin:calc(50vh - 75px) auto;z-index:100;background-color:transparent;}

}
@media only screen and (orientation : portrait) and (-webkit-device-pixel-ratio : 2.625){
.loading-container,.loading {height: 150px;position: relative;width: 150px;border-radius: 100%;border:10px solid red}
#loading-text {width: 150px;height:150px;padding:50px;}     
#loading-text img{position:relative;width:100px;padding:0px;}
.loading-container {position:fixed;top:0;left:0;right:0;bottom:0;margin:calc(50vh - 75px) auto;z-index:100;background-color:transparent;}

}

@media only screen and (orientation : landscape) and (-webkit-device-pixel-ratio : 2.75){
.loading-container,.loading {height: 150px;position: relative;width: 150px;border-radius: 100%;}
#loading-text {width: 150px;height:150px;padding:50px;}     
#loading-text img{position:relative;width:100px;;padding:0px;}
.loading-container {position:fixed;top:0;left:0;right:0;bottom:0;margin:calc(50vh - 75px) auto;z-index:100;background-color:transparent;}

}
@media only screen and (orientation : portrait) and (-webkit-device-pixel-ratio : 2.75){
.loading-container,.loading {height: 150px;position: relative;width: 150px;border-radius: 100%;}
#loading-text {width: 150px;height:150px;padding:50px;}     
#loading-text img{position:relative;width:100px;padding:0px;}
.loading-container {position:fixed;top:0;left:0;right:0;bottom:0;margin:calc(50vh - 75px) auto;z-index:100;background-color:transparent;}

}


@media only screen and (orientation : landscape) and (-webkit-device-pixel-ratio : 3.75){
.loading-container,.loading {height: 150px;position: relative;width: 150px;border-radius: 100%;}
#loading-text {width: 150px;height:150px;padding:50px;}     
#loading-text img{position:relative;width:100px;;padding:0px;}
.loading-container {position:fixed;top:0;left:0;right:0;bottom:0;margin:calc(50vh - 75px) auto;z-index:100;background-color:transparent;}

}
@media only screen and (orientation : portrait) and (-webkit-device-pixel-ratio : 3.75){
.loading-container,.loading {height: 150px;position: relative;width: 150px;border-radius: 100%;}
#loading-text {width: 150px;height:150px;padding:50px;}     
#loading-text img{position:relative;width:100px;padding:0px;}
.loading-container {position:fixed;top:0;left:0;right:0;bottom:0;margin:calc(50vh - 75px) auto;z-index:100;background-color:transparent;}

}


/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
.loading-container,.loading {height: 150px;position: relative;width: 150px;border-radius: 100%;}
#loading-text {width: 150px;height:150px;padding:50px;}     
#loading-text img{position:relative;width:100px;border:1px solid red;padding:0px;}
.loading-container {position:fixed;top:0;left:0;right:0;bottom:0;margin:calc(50vh - 75px) auto;z-index:100;background-color:transparent;}

}