/*
    CSS FRONTEND!
*/

:root{
   --bgcolor:#f10011;
   --placeholder-text:#000;
   --gdr-verde:#396639;
	--placeholder-text-error: #c00;
	--sjb-select-height:40px;
    --sjb-hover-speed:200ms;
}

.sjb-hidden{
   display:none !important;
}


div.sjb-archive-container, div.sjb-archive-container *{
	box-sizing: border-box;
}
div.sjb-archive-container{
   display:block;
   margin-bottom:32px;
   padding-bottom:32px;
}
.loading-msg{
    display:none;
    position:absolute;
    padding:5vh;
    width:100%;
    justify-content: center;
    align-items: center;
    font-size:2em;
    transition: var(--sjb-hover-speed) filter linear;
    color:#97c00d;
    z-index:10;
}

div.sjb-archive-container.is-loading .sjb-archive{
   opacity:0.5;
   pointer-events:none;
   user-select:none;
   filter: blur(9px);
   transition: var(--sjb-hover-speed) filter linear;
}
div.sjb-archive-container.is-loading .loading-msg{
    display:flex;
}

.sjb-cat-filter{
   display:flex;
   width:100%;
   justify-content: center;
   align-items: flex-start;
   flex-wrap: wrap;
   padding-bottom:1em;
}

.sjb-cat-filter .sjb-box{width:100%;}

.sjb-filtro-select{
	width:100%;
	border:1px solid var(--gdr-verde) !important;
    border-radius:100px;
}

select.sjb-filtro-select ,
select.sjb-filtro-select.select {
    color: var(--gdr-verde) !important;
}

/*LISTADO*/

.sjb-archive{
    display:grid;
    grid-template-columns: repeat(5, 1fr);
    width:100%;
    gap:24px 24px;
    padding: 0 25px;
    margin:0;
}

.sjb-archive.no-posts{
     grid-template-columns: repeat(1, 1fr);
}
p.no-posts-found{
    width:100%;
    text-align:center;
    text-transform: uppercase;
    color:var(--gdr-verde);

}
@media (max-width: 1300px) {
    .sjb-archive{
        grid-template-columns: repeat(4, 1fr);
    }
}
@media (max-width: 990px) {
    .sjb-archive{
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 768px) {
    .sjb-archive{
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px) {
    .sjb-archive{
        grid-template-columns: repeat(1, 1fr);
    }
}


/* a */
.sjb-archive-item{
    display:flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width:100%;
    /* background:#f4f4f4; */
    padding-bottom:24px;
    /* border:1px solid #f4f4f4; */
    transition: border-color var(--sjb-hover-speed) cubic-bezier(0.4, 0, 0.2, 1),
                color var(--sjb-hover-speed) ease-in-out,
                box-shadow var(--sjb-hover-speed) ease-in-out;
    text-decoration: none;
}


.sjb-archive-item:hover {
    /* border-color:var(--gdr-verde); */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
/*768x460*/
.sjb-post-thumbnail {
    display:block;
    overflow:hidden;
    width:100%;
    padding-top: calc(460 / 768* 100%);
    position: relative;
}

.icono-ampliar{
    position:absolute;
    display:block;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    line-height: 44px;
    border-radius: 100px;
    margin: 10px 5px 10px;
    z-index:10;
    background:rgba(255,255,255,0.5);
    color:#fff;
   /* Opacity transition from 0 to 1 */
    opacity:0;
    transition: opacity var(--sjb-hover-speed) ease-in-out;
    pointer-events:none;

}
.sjb-archive-item:hover .icono-ampliar{
    opacity:1;

}
.icono-ampliar:before{
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: "\2b";
    font-size: 24px;
    display: block;
    text-align: center;
    line-height: 44px;
    color:#fff;
}
/*content: "\ef02"*/

.sjb-post-thumbnail img{
    position:absolute;
    top:0;
    display:block;
    width:100%;
    height:auto;
    transform-origin: center;
    z-index:5;
    transition: transform var(--sjb-hover-speed) ease-in-out;
}

.sjb-archive-item:hover .sjb-post-thumbnail img{
    transform: scale(1.3);
}
.sjb-post-content{
    padding: 25px 30px 10px; /*the7*/
    /* border:1px dashed #c00; */

}

.sjb-post-content h3 {
    font-size: 20px;
}
.sjb-post-content span{
    display:inline-block;
    width:100%;
    text-align: left;
    line-height: normal;;
    padding:0;
    margin-bottom:0.3em;
}
.sjb-post-content span.concello{color:#222;}
.sjb-post-content span.date{color:#000;}

.pagination.sjb{
    display:flex;
    width:100%;
    justify-content: center;
    padding:1em 0;
    align-items: center;
}
.pagination.sjb span.texto{
    padding-right: 1em;
}
.pagination.sjb span:not(.texto){
    color:var(--gdr-verde);
    border-bottom:2px solid var(--gdr-verde);
    margin:0 0.2em;
    padding:0.5em 0.8em 0.2em;

}
.pagination.sjb a{
    color:var(--gdr-verde);
    text-decoration: none;
    margin:0 0.2em;
    padding:0.5em 0.8em 0.2em;
    border-bottom:2px solid transparent;
    cursor:pointer;
    user-select:none;
    transition: border-color 200ms ease-in-out, color 200ms ease-in-out;
}
.pagination.sjb a:hover{
    border-color:var(--gdr-verde);
}


@media (min-width: 700px) {
    #pagination-mobile{
        display:none;
    }
}
@media (max-width: 699px) {
    #pagination-desktop{
        display:none;
    }
}