/* =========================
   PRELOADER BASE
========================= */

#preloader{
  position: fixed;
  inset: 0;
  background: #fff; /* fondo oscuro */
  z-index: 99999;

  display:flex;
  align-items:center;
  justify-content:center;
}

.pre-wrap{
  width: 260px;
  text-align:center;
  color:#cc0f0f;
  font-family: Arial, sans-serif;
}

/* logo */
.pre-wrap img{
  width:100px;
  margin-bottom:15px;
}

/* texto */
.loading-text{
  font-size:20px;
  color:#000000;
  letter-spacing:2px;
  font-weight: 900;
  text-decoration: double;
  margin-bottom:15px;
}

/* =========================
   BARRA
========================= */

.progress{
  width:100%;
  height:20px;
  border-radius:12px;
  border:2px solid #000000;
  overflow:hidden;
  background:#ffffff;
  margin-bottom:15px;
}

.progress-bar{
  height:100%;
  width:0%;

  background: repeating-linear-gradient(
    45deg,
    #cc0f0f,
    #cc0f0f 10px,
    #ffffff 10px,
    #ffffff 20px
  );

  animation: moveStripes 1s linear infinite;
  transition: width 0.3s ease;
}

/* animación rayas */
@keyframes moveStripes{
  from { background-position: 0 0; }
  to   { background-position: 40px 0; }
}

/* porcentaje */
.progress-value{
  font-size:28px;
  color:#000000;
  font-weight:bold;
}

/* ocultar */
#preloader.hide{
  opacity:0;
  transition:opacity 0.4s ease;
  pointer-events:none;
}

/* ===============================
   1200px
=============================== */
@media (max-width: 1200px) {

  .pre-wrap{
    width: 240px;
  }

  .pre-wrap img{
    width: 90px;
  }

  .loading-text{
    font-size:18px;
  }

  .progress{
    height:18px;
  }

  .progress-value{
    font-size:24px;
  }
}

/* ===============================
   1100px
=============================== */
@media (max-width: 1100px) {

  .pre-wrap{
    width: 220px;
  }

  .pre-wrap img{
    width: 85px;
  }

  .loading-text{
    font-size:17px;
  }

  .progress{
    height:16px;
  }

  .progress-value{
    font-size:22px;
  }
}

/* ===============================
   900px (tablet)
=============================== */
@media (max-width: 900px) {

  .pre-wrap{
    width: 200px;
  }

  .pre-wrap img{
    width: 75px;
  }

  .loading-text{
    font-size:16px;
    letter-spacing:1.5px;
  }

  .progress{
    height:14px;
    border-radius:10px;
  }

  .progress-value{
    font-size:20px;
  }
}

/* ===============================
   600px (mobile)
=============================== */
@media (max-width: 600px) {

  .pre-wrap{
    width: 170px;
  }

  .pre-wrap img{
    width: 65px;
  }

  .loading-text{
    font-size:14px;
    letter-spacing:1px;
  }

  .progress{
    height:12px;
    border-radius:8px;
  }

  .progress-bar{
    background: repeating-linear-gradient(
      45deg,
      #cc0f0f,
      #cc0f0f 6px,
      #ffffff 6px,
      #ffffff 12px
    );
  }

  .progress-value{
    font-size:18px;
  }
}