/*****************************
* PAGE LOADER
*****************************/

#loader {
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     background-color: var(--secondary-colour);
     display: flex !important;
     justify-content: center;
     align-items: center;
     z-index: 9999;
     transition: opacity 1s ease-out, transform 0.5s ease-out;
     margin: 0;
     padding: 0;
}

#loader.fade-out {
     opacity: 0;
     transform: scale(1.1);
}

#loader img {
     width: 50px;
     height: 50px;

}

@keyframes spin {
     from {
          transform: rotate(0deg);
     }

     to {
          transform: rotate(360deg);
     }
}

#loading-text {
     font-family: var(--secondary-font);
     font-size: 24px;
     color: black;
     animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse {
     0% {
          opacity: 1;
     }

     50% {
          opacity: 0.5;
     }

     100% {
          opacity: 1;
     }
}

@keyframes fadeOut {
     from {
          opacity: 1;
          transform: scale(1);
     }

     to {
          opacity: 0;
          transform: scale(1.1);
     }
}

.fade-out {
     animation: fadeOut 1s ease-out forwards;
}