@font-face {
  font-family: "Kodchasan";
  src: url("../fonts/mobile/Kodchasan/Kodchasan-ExtraLight.woff2") format("woff2"), url("../fonts/mobile/Kodchasan/Kodchasan-ExtraLight.woff") format("woff");
  font-weight: 200;
  font-style: normal;
}
.cf-splashsceen {
  /* Use Grid layout */
  display: grid;
  /* Center the items inside the grid (cf-content) 'place-items' is a shorthand for 'align-items' and 'justify-items' */
  place-items: center;
  /* --- Optional: Set dimensions for visualization --- */
  /* This makes the splash screen fill the viewport, a common scenario */
  width: 100vw;
  height: 100vh;
  position: fixed; /* Common for splash/loading screens */
  top: 0;
  left: 0;
  z-index: 1;
  background: #012433;
  background-image: url(../images/templates/mobile/backgrounds/loader_bg.jpg);
  background-size: 80% auto;
  background-position: center 50vh;
  background-repeat: no-repeat;
}

.cf-splashsceen .cf-content {
  transform: translateY(-50%);
  text-align: center;
  padding: 20px;
  font-family: "Kodchasan", sans-serif;
  font-weight: 200;
}

.cf-splashsceen .cf-content > .cf-value {
  color: #04f7f7;
  font-size: 128px;
  font-weight: 200;
  letter-spacing: -0.04em;
}

.cf-splashsceen .cf-content > .cf-detail {
  color: #fff;
  font-size: 30px;
  letter-spacing: -0.04em;
  text-transform: lowercase;
}