HTTP/1.1 200 OK
Date: Thu, 05 Aug 2021 15:20:00 GMT
Server: Apache/2.4.48 (Unix)
Content-Type: text/css; charset=utf-8
Content-Length: 256

html {  background-color: lightgrey;}
body {background-color: lightgrey;  height: 100%;
  margin: 0;}



 #caja {
   position: relative;
        background-color: #ffffff;
        margin-top: -10px;
         margin-left: auto;
         margin-right: auto;
         width: 62%;
         height: 250px;
         border: 5px solid green;
         border-bottom-left-radius: 20px;
        
         border-bottom-right-radius: 20px;
    
          padding: 6px 22px 6px 22px;
         border-top: 0px solid #c9c9c9;
   
        }

.Regresar{
 


  position: relative ;  top:-60px;left: -25px;

}

    #bloqueo{   
    
 
     display: flex;
    justify-content: center;  /* Centrar elementos horizontalmente */
    align-items: center;      /* Centrar elementos verticalmente */
    height: 100%;
    
    
    }

.bloqueo{
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAQAAAADHm0dAAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAACYktHRAD/h4/MvwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB+cJGw4GKsricC8AAAEXSURBVCjPldI9L8NRFMfxT5vqoEtrkniI0eYhRHgFYqKRsPRtWEx9BxKxGESaWFhMErGwSRCjjn+dm5osGv9r0P5VHzR+Z7nnd7855+Tcy2+tuVD3qe7cqj+0LRKSiBQHgYtqgoaKfRUNwauFfmDKkaBhRwppu94Eh/3QMc+CinQrTzsTPClIjLZy8qiKW3nsBXm5XjQlRQJqnb/dLnSoftCgKfjsqtoUftq2NWLVqKoocWbMenev+RvdsuQD6Y4+sRhZDy47BznteKXuOPlGMh1ztWe+92jZStIxHrSBWyXHSu4Gb6CtaxOujLsZjs6L7KmZ677I9KBFr8rKNodXzVo3aV12OMq0A1O9dqYPWrDRx/3Pd/kC2ZxUxoTgfAYAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjMtMDktMjdUMTQ6MDY6MzYrMDA6MDB/lfejAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIzLTA5LTI3VDE0OjA2OjM2KzAwOjAwDshPHwAAACh0RVh0ZGF0ZTp0aW1lc3RhbXAAMjAyMy0wOS0yN1QxNDowNjo0MiswMDowMKdXQ8oAAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb7jwaAAAAAElFTkSuQmCC');
    border: none;
    width: 21px;  /* Ajusta según el tamaño de tu imagen */
    height: 21px; /* Ajusta según el tamaño de tu imagen */
    cursor: pointer;
    background-color: transparent;
    background-size: cover; /* Esto es para que la imagen cubra todo el botón */
    text-indent: -9999px;   /* Esto es para ocultar el texto del botón */
    margin: 0 10px;
    
}
.desbloqueo{
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAQAAAADHm0dAAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAACYktHRAD/h4/MvwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB+cJGw4GKsricC8AAAEKSURBVCjPjdI9SoNBEMbxXz5AJKWCotiIElMI3sBG0IjgAcQTWAUL7bUTLKzSWXgExQuIhdhpY6UIKSJooZCIYLIWvsTk/cA8Wyy7/Gd29pkBKuoaOlqubRuRqWV3Qm+1HCmlg5UBMAg69tLRegQ0Xbj1LQiezKWhjQhcUzDuTBB0baWhHUFwrgiqvgTBfhLMy4O2LvjUgSgwhv4q19sLA+c+xaMf7CrKufoPLVvSBLNJDwbRdcdRzdKyfqConag+BV1Bzlsi27NL01azJqLWa+67DfNmnP41POu5V/d2lN0kfY1rStWBR5tZldf65uvFosP+icv8r5JJE9m+9mvUibHh0LyF+MXQ+gFtd12zamU1MwAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMy0wOS0yN1QxNDowNjozNiswMDowMH+V96MAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjMtMDktMjdUMTQ6MDY6MzYrMDA6MDAOyE8fAAAAKHRFWHRkYXRlOnRpbWVzdGFtcAAyMDIzLTA5LTI3VDE0OjA2OjQyKzAwOjAwp1dDygAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAAASUVORK5CYII=');
    border: none;
    width: 21px;  /* Ajusta según el tamaño de tu imagen */
    height: 21px; /* Ajusta según el tamaño de tu imagen */
    cursor: pointer;
    background-color: transparent;
    background-size: cover; /* Esto es para que la imagen cubra todo el botón */
    text-indent: -9999px;   /* Esto es para ocultar el texto del botón */
   float: left;
    margin-right: 10px; /* si quieres algún espacio entre ellos */
}
    
    








.button {
  flex-grow: 1;
  font-size: 24px;
  border: none;
  cursor: pointer;
}



#sitio {
   display: grid;
   
 
grid-template-columns: repeat(3, 1fr); /* 3 columnas de igual tamaño */
    gap: 5px; /* Espacio entre imágenes */
  

}

.navideno{
  height: 16vw;
  background-image: url('navideño.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  color: #fff; 
   
  

   }

.arquitectonico {
  height: 16vw;
  background-image: url('arquitectonico.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  color: #fff;
}





 #tabla {
        margin: 0 auto;
        }
#tabla td {
    text-align: center;
 
}

.noCentrar {
    text-align: left; /* o puedes usar 'right' o 'justify', según tus necesidades */
    
}


#usuario{


  position: relative ;  left: 12px;
}
#user{


  position: relative ;  left: 12px;
}


#inicio1{   
 
  
  transform: translateY(100%);
  text-align: center;
      margin: 0 auto;
        }
    #subtitulo{   
    
   
    text-align:center;
    
    
              }
    #centrar{   
    
   
    text-align:center;
   
    
            }

.botones {
  width: 1%;
  margin: 0 auto;
         }





    .encender {
 
  display: inline-block;
  margin:auto;
    position: relative ; bottom: -10px; left: -200px;top:8px;
  padding: 10px 20px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #009C06;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #C0D4B2;
               }


.encender:hover {background-color: #008005}

.encender:active {
  background-color: #008F12 ;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
                  }
.apagar{
  display: inline-block;
  position: relative ; bottom: 40px;left: -50px; 
  padding: 10px 20px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #E60000;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #D4ADAD;
      }

.apagar:hover {background-color: #C90000}

.apagar:active {
  background-color: #A30000;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
                }
.automatico{
  display: inline-block;
 position: relative ; bottom: 88px;left: 75px;
  padding: 10px 20px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #0023E6;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #819AD4;
            }

.automatico:hover {background-color: #0000C9}

.automatico:active {
  background-color: #0000C9;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
                   }




#tabla{

  text-align: center;

}

  .inauguracion{
  
 
  top: 10;
  right: 500px;
            }
 #nutibara{   
         font-family: sans-serif;
    font-size: 250%;
    font-style: italic;
    font-weight: bold;
     display: flex;
     
     justify-content: center; /* Centrar horizontalmente */
     
 }  
  #playa{   
         font-family: sans-serif;
    font-size: 250%;
    font-style: italic;
    font-weight: bold;
     display: flex;
     
     justify-content: center; /* Centrar horizontalmente */
     
 }
  #parqueNorte{   
         font-family: sans-serif;
    font-size: 250%;
    font-style: italic;
    font-weight: bold;
     display: flex;
     
     justify-content: center; /* Centrar horizontalmente */
     
 } 
   #cartagena{   
         font-family: sans-serif;
    font-size: 250%;
    font-style: italic;
    font-weight: bold;
     display: flex;
     
     justify-content: center; /* Centrar horizontalmente */
     
 } 
   #PDR{   
         font-family: sans-serif;
    font-size: 250%;
    font-style: italic;
    font-weight: bold;
     display: flex;
     
     justify-content: center; /* Centrar horizontalmente */
     
 }  
   #santaMarta{   
         font-family: sans-serif;
    font-size: 250%;
    font-style: italic;
    font-weight: bold;
     display: flex;
     
     justify-content: center; /* Centrar horizontalmente */
     
 }             
            
#graficas{
     margin: 0;
    
    display: flex;
    justify-content: center; /* Centrar horizontalmente */
    
   
    gap: 1px; /* Espacio entre las tablas */
}


#tabla2{
   font-size: 15px;
    border: 1px solid black;
    padding: 1px;
}

#tabla1{
   font-size: 15px;
    border: 1px solid black;
    padding: 1px;
}
#tabla3{
    font-size: 15px;
    border: 1px solid black;
    padding: 1px;

}            
            
@media screen and (max-width: 1450px) {

#tabla1{

  font-size: 10px; 
}
#tabla3{

 font-size: 10px;

}

#tabla2{

 font-size: 10px;

}
.inauguracion{
 


  position: relative ;  top:-22px;left: -10px;

}

.planos{
 


  position: relative ;  top:-22px;left: -10px;

}



.botones{
 


  position: relative ;  left: 10px;

}
.automatico{

  font-size: 18px;
position: relative ; bottom: 82px;left: 65px;
         
            }
.apagar{

  font-size: 18px;

            }
.encender{

  font-size: 18px;
position: relative ; top: 2px; left: -180px;

            }




}