@charset "utf-8";

.loader-wrapper { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; overflow: hidden; z-index: 9999; }

.loader-wrapper .loader-section { position: fixed; top: 0px; width: 51%; height: 100%; z-index: 10; }

.loader-wrapper .loader-section.section-left { left: 0px; }

.loader-wrapper .loader-section.section-right { right: 0px; }

.loader-wrapper p { position: absolute; left: 0px; right: 0px; top: 50%; }

.loader { display: block; position: relative; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0px 0px -75px; border-radius: 50%; border-width: 3px; border-style: solid; border-color: rgb(22, 160, 133) transparent transparent; border-image: initial; animation: 1.7s linear 0s infinite normal none running spin; z-index: 11; }

.loader::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; border-width: 3px; border-style: solid; border-color: rgb(231, 76, 60) transparent transparent; border-image: initial; animation: 0.6s linear 0s infinite normal none running spin-reverse; }

.loader::after { content: ""; position: absolute; inset: 15px; border-radius: 50%; border-width: 3px; border-style: solid; border-color: rgb(249, 201, 34) transparent transparent; border-image: initial; animation: 1s linear 0s infinite normal none running spin; }

.loaded .loader-wrapper { visibility: hidden; transform: translateY(-100%); transition: 0.3s ease-out 1s; }

.loaded .loader-wrapper .loader-section.section-left { transform: translateX(-100%); transition: 0.7s cubic-bezier(0.645, 0.045, 0.355, 1) 0.3s; }

.loaded .loader-wrapper .loader-section.section-right { transform: translateX(100%); transition: 0.7s cubic-bezier(0.645, 0.045, 0.355, 1) 0.3s; }

.loaded .loader { opacity: 0; transition: 0.3s ease-out; }

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

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

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

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