*{
    padding: 0;
    margin: 0;
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
}




/*----------------Portada-----------------*/
/*----------------Portada-----------------*/

.portada{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.portada-img{
    width: 100%;
}
.portada-contenido{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.portada-texto{
    color:white;
    font-size: 3vw;

}
.btn-portada{
    color:black;
    text-decoration: none;
    background: white;
    padding: 5px 25px;
    border-radius: 13px;
    font-size: 1.2em;

}


/*----------------Portada-----------------*/
/*----------------Portada-----------------*/




/*----------------Pleca-----------------*/
/*----------------Pleca-----------------*/

.pleca{
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    padding: 50px 0px;
}

.pleca-text{
    font-size: .5em;
    text-transform: uppercase;
    font-weight: bolder;
    font-family: 'Poppins', sans-serif;
    letter-spacing: 1px;
    font-weight: bolder;
}
/*----------------Pleca-----------------*/
/*----------------Pleca-----------------*/




/*----------------Select-----------------*/
/*----------------Select-----------------*/
.select-wrapper{
    width: 70%;
    margin: auto;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;

}
select{
    width: 180px;
    height: 40px;
    margin: 10px auto;
    border: 0px;
    font-size: 1.2em;
}
select:focus{
    outline: none;
}


/*----------------Select-----------------*/
/*----------------Select-----------------*/




#grid-wrapper {
    max-width: 80%;
    margin: auto;
    columns: 3;
    gap: 10px;
    overflow: auto;
    padding-bottom: 50px;
    -moz-column-fill: balance;
       column-fill: balance;

}

.img-item {
width: 100%;
height: auto;
display: flex;
}


.white-panel {
position: relative;
display: flex;
margin-bottom: 10px;
display: none;
-webkit-column-break-inside: auto;
page-break-inside: auto;
break-inside: auto;
}



.item{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    position: relative;
    margin-bottom: 10px;
}

.info-item{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: .5s;
    cursor: pointer;

    
}

.bg-item1{background:#222823; color:white;}
.bg-item2{background:#383637; color:white;}
.bg-item3{background:#CECECE; color:#000000;}
.bg-item4{background:#E7E7E7; color:#000000;}
.bg-item5{background:#EFEEED; color:#000000;}
.bg-item6{background:#FEF4F2; color:#000000;}
.bg-item7{background:#DACDBD; color:#000000;}
.bg-item8{background:#CA936A; color:#000000;}
.bg-item9{background:#FF671B; color:#000000;}
.bg-item10{background:#E08477; color:#000000;}
.bg-item11{background:#7DC4BA; color:#000000;}
.bg-item12{background:#F9290D; color:white;}
.bg-item13{background:#F9290D; color:white;}
.bg-item14{background:#ACCDE5; color:#000000;}
.bg-item15{background:#3895C0; color:#000000;}
.bg-item16{background:#C3C99B; color:#000000;}
.bg-item17{background:#7D965F; color:#000000;}
.bg-item18{background:#00953A; color:white;}
.bg-item19{background:#144831; color:white;}
.bg-item20{background:#FECD08; color:#000000;}


.bg-item-banregio-tradicional{background:#FF671B; color:white;}
.bg-item-puntos{background:#EFEEED; color:black;}
.bg-item-banregio-patrimonial{background:#CA936A; color:black;}
.bg-item-pink{background:#F665AA; color:white;}
.bg-item-workspace{background:#0A4D24; color:white;}
.bg-item-adela{background:#ECA316; color:white;}


.white-panel:hover > .info-item{
    opacity: 1;

}

.date-item{
    font-size: .8em;
}

.name-item{
    font-size: 1.5em;
    text-align: center;
    line-height: 1.2;
}

.description-item{
    font-size: .8em;
    text-align: center;
}



/*-------------MASORNY-----------------------*/
/*-------------MASORNY-----------------------*/



/*-------------MASORNY-----------------------*/
/*-------------MASORNY-----------------------*/





@media (max-width:800px) {




#grid-wrapper {
    max-width: 100%;
    margin: auto;
    columns: 1;
    gap: 10px;
    overflow: auto;
    padding-bottom: 50px;
    -moz-column-fill: balance;
       column-fill: balance;

}


.select-wrapper{
    width: 100%;
    margin: auto;
    height: 200px;

}

select{
    width: 160px;
    height: 40px;
    margin: 10px auto;
    border: 0px;
    font-size: 1em;
}

 }