@media screen {
    /*LOADER*/
    #Loader { position:fixed; top:0; left:0; z-index:9999; overflow:hidden; width:100%; height:100%; background-color:#000;
             display: flex; justify-content: center; align-items: center;
             -webkit-transition: opacity 0.3s ease-out 0.3s, visibility 0.3s ease-out 0.3s; 
             transition: opacity 0.3s ease-out 0.3s, visibility 0.3s ease-out 0.3s; }
    

        .spinner { position: relative; width: 4.5em;
                   -webkit-transition: all 0.3s ease-out; 
                    transition: all 0.3s ease-out;}  
                    
            .spinner-logo { -webkit-animation: spinner 3s ease-out infinite;
                            animation: spinner 3s ease-out infinite; } 

    #Loader.off { opacity:0; visibility:hidden; }
    #Loader.off .spinner { opacity: 0;
                             -webkit-transform: scale(1.25);
                            transform: scale(1.25);}
}

@-webkit-keyframes spinner {
  0% {opacity: 0; }
  50% {opacity: 1;}
  100% {opacity: 0;}
}

@keyframes spinner {
  0% {opacity: 0; }
  50% {opacity: 1;}
  100% {opacity: 0;}
}