html {
    height: 100%;
  }
body{
    font-family: 'consolas';
    padding: 50px;
    min-height: 100vh;
    height: 100vh;
    margin:0;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
   }

   body::-webkit-scrollbar {
    display: none;
    }

body.noscroll{
  overflow: hidden;
}

   .topbar {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    background-color: white;
    z-index: 99;
    padding-bottom: 50px;
    }

    .topbar-item{
        width: 280px;
        height: 30px;
    }

    #menu-icono{
      text-align: left;
    }

    .flex-container {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: center;
      }
      
      .flex-item {
        width: 100%;
        min-height: 100%;
        font-size: 30px;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: space-between;
      }

      .portada{
        position: fixed; /* Stay in place */
        z-index: 0; 
        left: 0px;
        top: 90px;
        width: 100%; /* Full width */
        height: 100vh;
        overflow-y: hidden;
        margin: auto;
    }
      .portada-content{
        padding:50px;
        padding-bottom: 50px;
        height:calc(100% - 100px);
        z-index: 1;
    }

    .portada-img{
      position: relative;
      width: 100%;
      height: 100%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  }

    img.imagen-portada{
      position: relative;

      max-width:100%;
      max-height:100%;
      margin:auto;
      text-align: center;
      text-align: center;
        cursor: pointer;
        filter: none;
        -webkit-filter: grayscale(100%);
        -moz-filter:    grayscale(100%);
        -ms-filter:     grayscale(100%);
        -o-filter:      grayscale(100%);
      }

    .logo {
		display: inline-block;
        width:300px;
        cursor:pointer;
		}

    .button-container{
        text-align: right;
        display: inline-block;
    }
    
    .button{
        cursor: pointer;
        height: 40px;
    }

    .zoom{
      height: 35px;
    }

    form{
        display: inline-block;
        margin:0;
        vertical-align: middle;
    }
    input.buscador {
        margin: auto;
        border: none;
        color: black;
        background-color: transparent;
        font-family: 'consolas';
        text-align: right;
        z-index:99;
         }
    
    input.buscador:focus {
            border-bottom: 2px solid transparent;
             }


             .menu-container{
                z-index: 100;
              }
              
              .link_portada{
               width:fit-content;
              }
              .menu-icono{
                width:30px;
                cursor: pointer;
              }
              
              .menu-icono > img{
                width:40px;
              }
              
              .menu-lista{
                height:auto;
                width:300px;
                font-size: 30px;
                background-color: white;
                fill-opacity: 0.5;
                padding-top:30px;
                display:flex;
                display: none;
                flex-direction: column;
              }
              
              a:link {
                  color: black;
                  text-decoration: none;
                  border-bottom: 3px solid transparent;
                }
                
                a:visited {
                  color: black;
                  text-decoration: none;
                }
                
                a:hover {
                  color: black;
                  border-bottom: 3px solid black;
                  transition: 200ms;
                }
                
                a:active {
                  color: black;
                  text-decoration: none;
                }

    
   .usuario {
       opacity: 0;
       z-index: 100;
        }
   
   .usuario:hover {
           opacity: 1;
           transition: 1s;
        }

    #cargando_general {
            display: inline-block;
            position:absolute;
            left:50%;
            top:100px;
            transform: translate(-50%, 0);
            border: none;
            color: black;
            font-size: 24px;
            z-index:99;
            -webkit-animation: pulsate 3s ease-out;
            -webkit-animation-iteration-count: infinite; 
            opacity: 0.5;
    
            }
    
            @-webkit-keyframes pulsate {
                0% { 
                    opacity: 0.5;
                }
                50% { 
                    opacity: 1.0;
                }
                100% { 
                    opacity: 0.5;
                }
            }
   



#livesearch.resultados {
    margin-top: 0px;
}

.grid-container{
    width:100%;
    height:auto;
    display: grid;
    transition: 500ms;
    grid-template-columns: repeat(7, 1fr);
    grid-column-gap: 50px;
    grid-row-gap: 70px;
}

.elemento-grilla {
    position: relative;
    display: inline-grid;
    outline: 0;
    aspect-ratio: 1;
}

.texto-imagen {
    display: flex;
    flex-direction: row;
    opacity:1;
    position: absolute;
    bottom: -30px;
    font-size: 0.8em;
    width: 100%;
    text-align: left;
    vertical-align: bottom;
    height: 20px;
    z-index: 0;
}
.codigo-proyecto {
    display: none;
}
.nombre-proyecto {
    padding-left: 10px;
    background-color: white;
    opacity:0;
    z-index: 999999;
}

.elemento-grilla:hover{
   cursor: pointer;
}

.elemento-grilla:hover .texto-imagen{
    opacity:1;
    transition: 1s;
}

.elemento-grilla:hover .nombre-proyecto{
    opacity:1;
    transition: 1s;
}

.elemento-grilla:hover .imagen-busqueda {
    filter: grayscale(0%);
    transition: 300ms;
}

a.link-imagen{
  position: relative;
  display: inline-grid;
  outline: 0;
  aspect-ratio: 1;
  cursor: pointer;
  max-height: 100%;
  max-width: 100%;
  min-width: 0;
  min-height:0;
  margin: auto;
  margin-bottom:0;
  border: 0;
}

a.link-imagen:hover{
  cursor: pointer;
  border: 0;
}

.imagen-busqueda {
    cursor: pointer;
    max-height: 100%;
    max-width: 100%;
    min-width: 0;
    min-height:0;
    margin: auto;
    margin-bottom:0;
    transition-property: opacity, outline-color, box-shadow;
    transition-duration: 0.3s, 0.3s, 0.3s;
    opacity: 1;
    filter: grayscale(100%);
    outline: transparent solid 10px;
    z-index: 1;
}



.imagen-busqueda.seleccionado {
    outline: yellow solid 10px;
    cursor: pointer;
    opacity: 1;
    filter: grayscale(0%);
}


.bold{
    font-weight: bold;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: rgb(0, 0, 0);
    font-family: 'consolas';
    opacity: 1; /* Firefox */
  }

  input:focus::placeholder {
    color: transparent;
  }
  
  :-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: rgb(0, 0, 0);
    font-family: 'consolas';
    opacity: 1; /* Firefox */
  }
  
  ::-ms-input-placeholder { /* Microsoft Edge */
    color: rgb(0, 0, 0);
    font-family: 'consolas';
    opacity: 1; /* Firefox */
  }

  @media (max-width: 480px) {
    body{
        width: 100%;
        min-width: none;
        padding:40px;
    }

    .menu-container{
        width: 100%;
        padding-bottom: 50px;
    }

    .menu-lista{
      width:100%;
    }

    #cargando_general{
      top:150px;
    }
    .topbar {
      padding: 0px;
      align-items: center;
      flex-direction: column;
      justify-content: center;
    }

    body.noscroll{
      overflow: visible;
      text-align: left;
    }

    .lightbox-text{
      position:absolute;
      max-width:100%;
      top:20px;
      padding-right: 40px;
    }

    .caption-text{
      margin-bottom:0px;
    }

    a:link{
      overflow-wrap: break-word;
    }

    .codigo-modal{
      width:300px;
    }

    .lightbox{
      position: absolute;
      overflow: visible;
    }
    .lightbox-flex{
      display:none;
    }

    #close-project{
      display:none;
    }

    .blinking-cursor, .zoom{
      display:none;
  }

  .lightbox-content {
    padding:40px;
    margin-top:80px;
  }
  .lightbox-img img {
    max-width:100%;
    padding-bottom: 50px;
    display:block;
  }

  .flex-panel{
    flex-direction: column;
  }

    .grid-container{
        width:100%;
        height:100%;
        display: grid;
        transition: 500ms;
        grid-template-columns: repeat(2, 1fr);
        grid-column-gap: 40px;
        grid-row-gap: 50px;
    }

    .logo{
        width:100%;
    }




    input.buscador {

        font-size: 40px;

         }

       .button-container{

        }

        .button{
            
        }
}

.blinking-input {
  font-weight: 100;
  line-height: 40px;
  width:fit-content;
      }

.blinking-cursor {
    line-height: 40px;
    font-weight: 100;
    color: #2E3D48;
    margin:0;
    -webkit-animation: 1s blink step-end infinite;
    -moz-animation: 1s blink step-end infinite;
    -ms-animation: 1s blink step-end infinite;
    -o-animation: 1s blink step-end infinite;
    animation: 1s blink step-end infinite;
  }

  .erase-search {
    cursor: pointer;
    display:none; 
    height: 20px;
    color: #2E3D48;
    margin:0;
  }

        
  @keyframes blink {
    from, to {
      color: transparent;
    }
    50% {
      color: black;
    }
  }
  
  @-moz-keyframes blink {
    from, to {
      color: transparent;
    }
    50% {
      color: black;
    }
  }
  
  @-webkit-keyframes blink {
    from, to {
      color: transparent;
    }
    50% {
      color: black;
    }
  }
  
  @-ms-keyframes blink {
    from, to {
      color: transparent;
    }
    50% {
      color: black;
    }
  }
  
  @-o-keyframes blink {
    from, to {
      color: transparent;
    }
    50% {
      color: black;
    }
  }