/*Navbar*/
.navbar{
    background:transparent !important;
}

.navbar img{
    height:40px;
}

/* Nombre DECIDATA */
.nombre_decidata{
    font-weight:bold;
}


/* Titulos */
.titulo{
    font-size: 48px;
    line-height: 56px;
    letter-spacing: -0.5px;
    color: #202124;
    font-family: "Google Sans Display","Google Sans","Roboto",Arial,sans-serif;
    font-weight: 400;
    text-align: center;
}

.subtitulo{
    font-family: "Google Sans","Roboto",Arial,sans-serif;
    font-size: 18px;
    line-height: 28px;
    color: #3c4043;
    margin: 0;
    text-align: center; 
}

#cabecera {
    padding-bottom:50px;
}


/* Grid */
#page-content {
    max-width:1200px;
    margin:auto;
    padding:30px;
}

.wrapper_proyecto {
    width:30%;
    padding:20px;
    display:inline-block;
    vertical-align: top;
}

.proyecto{
    border-radius: 7px;
    box-shadow: 0 0 10px 0 rgb(0 38 62 / 60%);
    padding: 0px;
    display: block;
    min-height: 500px;
    position: relative;
    transition: transform ease 300ms;
}

.proyecto img{
    width: 100%;
    height:200px;
    border-radius:7px 7px 0px 0px
}

.contenido_post_grid{
    padding:20px;
}

.link_demo {
    color: #00263e;
    position: absolute;
    bottom: 30px;
    font-weight: 700;
}

.proyecto:hover {
    transform: translate(0, -10px);
}

.link_demo {
    padding: 5px 8px;
    margin-left: -8px;
    text-decoration:unset;
    border-radius:7px;
    color: #00263e;
    position: absolute;
    bottom: 30px;
    font-weight: 700;
    background: linear-gradient(-45deg, #191654,#43C6AC) var(--p, 0) / var(--p, 0) no-repeat;
    transition: .4s, background-position 0s;
}

.link_demo:hover {
  --p: 100%;
  color: #fff;
}

.proyecto:hover {
    transform: translate(0, -10px);
}

.titulo_demo_link {
    text-decoration: none;
    color:black;
}

.contenido_post_grid{
    padding:20px;
    padding-bottom: 40px;
}

.titulo_demo_link {
    text-decoration: none;
    color:black;
}

.titulo_demo_link:hover {
    color:black;
}

/* Media Queries para  responsive */
@media(max-width:1000px){
    .wrapper_proyecto{
        width:50%;
    }
}

@media(max-width:550px){
    .wrapper_proyecto{
        width:100%;
    }
}

/* Login */
#page-content{
    max-width:100% !important;
    padding:0px;
}

#login-page{
    background: linear-gradient(-45deg,#43C6AC, #191654);
    height: calc(100vh);
    display: flex;
    align-items: center;
}


#login-form-wrapper {
    max-width: 450px;
    margin:
    auto;
    padding:20px;
}

#login-form{
    background:#ffffff80;
    padding: 40px 40px;
    border-radius:7px;
}

#login-form h1{
  /* object-fit:contain; */
  padding-bottom: 5px;
  font-weight:bold;
  text-align: center;
  margin-bottom: 60px;
  background: -webkit-linear-gradient(-45deg, #191654,#43C6AC);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#login-form label, #login-form input{
    width:100%;
} 

#login-form input{
    margin-bottom:20px;
    background:transparent;
    border:none;
    border-bottom:1px solid lightgray;
}

#login-form input::placeholder{
    color:#505050;
}

#login-form label{
    font-weight: bolder;
}

/*
#login{
    margin-top:40px;
    width:100%;
    background:linear-gradient(-45deg,#43C6AC, #191654);
    color: #191654;
    text-transform:uppercase;
    
    color:white;
    border:none;
}
*/

#login{
    text-decoration:unset;
    border-radius:7px;
    font-weight: 700;
    background: linear-gradient(-45deg,#43C6AC, #191654) var(--p, 0) / var(--p, 0) no-repeat;
    transition: .4s, background-position 0s;
    color:#191654;
    border:1px solid #191654;
    margin-top:40px;
    width:100%;
  }

#login:hover {
  --p: 100%;
  color: #fff;
  border:1px solid transparent;
}

#wrapper-proyectos {
    padding-top: 100px;
    max-width: 1200px;
    margin: auto;
    /* background: -webkit-linear-gradient(-45deg, #191654,#43C6AC); */
}

.titulo_demo{
  color: #191654;
    font-weight:bold;
    
}

/* Logo */
#logo {
    position: absolute;
    top:20px;
    left:20px
}

#logo img{
    display:block;    
    width:200px;
}

.titulo{
    background: -webkit-linear-gradient(-45deg, #191654,#43C6AC);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
    text-transform: uppercase;
}

/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 1px solid transparent;
  -webkit-text-fill-color: #505050;
  -webkit-box-shadow: 0 0 0px 10000px #97b7c0 inset;
  transition: background-color 5000s ease-in-out 0s;
}


#login-form.shake {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

#mensaje {
    position: absolute;
    bottom:5%;
    right: 5%;
    background: #deafb3;
}