@charset "utf-8";
/* CSS Document */

/* -----------------------------------------------------------------------------------------------------------------------

  -- index.css
  -- CSS script for "Directorio Telefónico" site
  -- Site: DIRECTORIOTELEFONICO.UPRRP.EDU
  -- Last modification : March 1, 2025
  -- Created by : Wilmer Batista
  -- Copyright : División de Tecnologías Académicas y Administrativas, Recinto de Rio Piedras, Universidad de Puerto Rico

  ------------------------------------------------------------------------------------------------------------------------ */
.main_pages {
              display: none; /* Ocultar los divs al inicio */
            }

.header_gradient_colors
{
  background: linear-gradient(90deg, rgba(186,188,190,1) 48%, rgba(231,0,51,1) 75%);
}

.footer_gradient_colors
{
  background: linear-gradient(90deg, rgba(231,0,51,1) 25%, rgba(186,188,190,1) 52%);        
}

/* Main header image source */
#main_header_image
{
  content:url(../images/red_phone_icon_transparent.png);
  
  height:3%;
  width:3%;
  justify-content:left
}

/* Main header image source */
#main_header_title
{
  content:url(../images/directorio_telefonico_title_transparent.png);
  
  width:22%;
  justify-content:left
}

/* Main header image source */
#main_header_gallo
{
  height: 4vh;
  width: 3vw;
  content:url("../images/gallo-frente_izquierda_mini.png");
  
}

/* This belongs to the "loading" part of the web page */ 

.loading_container {
  height: 100vh;
  width: 100vw;
  font-family: Helvetica;
}

.loader {
  height: 20px;
  width: 250px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.loader--dot {
  animation-name: loader;
  animation-timing-function: ease-in-out;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  height: 40px;
  width: 40px;
  border-radius: 100%;
  background-color: black;
  position: absolute;
  border: 2px solid white;
}
.loader--dot:first-child {
  background-color: #8cc759;
  animation-delay: 0.5s;
}
.loader--dot:nth-child(2) {
  background-color: #8c6daf;
  animation-delay: 0.4s;
}
.loader--dot:nth-child(3) {
  background-color: #ef5d74;
  animation-delay: 0.3s;
}
.loader--dot:nth-child(4) {
  background-color: #f9a74b;
  animation-delay: 0.2s;
}
.loader--dot:nth-child(5) {
  background-color: #60beeb;
  animation-delay: 0.1s;
}
.loader--dot:nth-child(6) {
  background-color: #fbef5a;
  animation-delay: 0s;
}
.loader--text {
  position: absolute;
  top: 250%;
  left: 0;
  right: 0;
  width: 4rem;
  margin: auto;
}
.loader--text:after {
  content: "Cargando";
  font-weight: bold;
  animation-name: loading-text;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

@keyframes loader {
  15% {
    transform: translateX(0);
  }
  45% {
    transform: translateX(230px);
  }
  65% {
    transform: translateX(230px);
  }
  95% {
    transform: translateX(0);
  }
}
@keyframes loading-text {
  0% {
    content: "Cargando";
  }
  25% {
    content: "Cargando.";
  }
  50% {
    content: "Cargando..";
  }
  75% {
    content: "Cargando...";
  }
}



/* Background image in content main section */ 
#main_section_content
{
  background-image: url('../images/sky_background_uprrp.png') !important;
  background-size: cover; /* La imagen cubre el div */
  background-position: right;  /* La imagen centrada */
  background-repeat: no-repeat; /* Evitar que la imágen se repita */
}



/* Class to justify text. Theres no class in Bootstrap 5 to do this. */
.text-justify
{
  text-align: justify;    
  text-justify: inter-word;
}



/* Settings when resolution width is over 1600px */
@media (min-width: 1601px)
{
    
    
   
    
    /* Font size on all items without any id */
    :root 
    {
      font-size: 16px;  
    }
   
    
    
    
}



/* Settings when resolution width is over 601px and below 1600px */
@media (min-width: 1301px) and (max-width: 1600px)
{
   
    
  
    
    /* Font size on all items without any id */
    :root 
    {
      font-size: 13px;  
    }
    
    
}



/* Settings when resolution width is over 601px and below 1600px */
@media (min-width: 601px) and (max-width: 1300px)
{
    
    
    /* Font size on all items without any id */
    :root 
    {
      font-size: 15px;  
    }
    
     #ruv_main_content{ 
  
}
   

@media (max-width: 600px)
{
    /* Font size on all items without any id */
    :root 
    {
      font-size: 15px;  
    }
    
   
}