:root { --color1: #1565c0; --color2: #666; --color3: #444; --bg-color1: #1565c0; --bg-color2: #f5f5f5; --bg-color3: #eee; --font-size: 16px; --line-height: 1.4; }

/* Títulos */
.galeria .titulo1 { }
.galeria .titulo2 { }
.galeria .titulo3 { }


/*  #### ORDENACIÓN ####  */
.orderbycomp { line-height: 20px; text-align: right; margin: 0 0 20px;}
.orderbycomp .spnOrden { display: inline-block; padding: 2px; }
.orderbycomp select { border: 1px solid #eee; padding: 6px 8px; margin-left: 8px; border-radius: 4px; }
.orderbycomp option { padding: 3px 5px; }

/*  #### PAGINACIÓN ####  */
#paginacion { text-align: center; clear: both; margin-top: 30px; }
#paginacion ul li { display: inline-block; }
#paginacion ul li a { display: block; width: 30px; font-size: 14px; line-height: 30px; border-radius: 6px; text-decoration: none; margin: 5px; color: var(--color2); background-color: var(--bg-color3); }
#paginacion ul li:hover a { opacity: 0.8; }
#paginacion ul li:first-child a, #paginacion ul li:last-child a { width: 74px; font-size: 16px; }
#paginacion ul li .select { font-weight: bold; }
#paginacion ul li .des { opacity: 0.5; cursor: default; }

/*  #### GENERAL LISTADO ####  */
.galeria .listado{ display: grid; }
.galeria .listado .galres { background-position: center center; background-size: cover; position: relative; background-color: var(--bg-color2); overflow: hidden; }
.galeria .listado:not(.gal1) .galres { background-image: none !important; }
.galeria .listado .galres > div { /* background: rgba(255,255,255,0.9)  */ }
.galeria .listado .galres .imgres { position: relative; display: block; color: inherit;overflow:hidden; }
.galeria .listado .galres .imgres:hover img { transform:scale(1.2);}
.galeria .listado .galres .icolock { display: none; }
.galeria .listado .galres.lock .icolock { display: block; text-align: center; position: absolute; background: rgba(0,0,0,0.7); color: #FFF; top: 0; left: 0; width: 100%; height: 100%; }
.galeria .listado .galres.lock .icolock i { position: absolute; font-size: 60px; height: 60px; width: 60px; line-height: 60px; top: 50%; bottom: 50%; left: 50%; right: 50%; -moz-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); opacity: 0.5; }
.galeria .listado .galres .imgres img { display: block; width: 100%; transition: transform 300ms ease; }
.galeria .listado .galres .fotodesc { padding: 20px; overflow: hidden; }
.galeria .listado .galres .fotodesc .fotodesccont { }
.galeria .listado .galres .fotodesc .fotodesccont h2 { margin: 0 0 4px; }
.galeria .listado .galres .fotodesc .fotodesccont h2 a { text-decoration: none; color:inherit;}
.galeria .listado .galres .fotodesc .fotodesccont h2 a:hover { text-decoration: underline; }
.galeria .listado .galres .fotodesc .fotodesccont .numtipo { margin: 0 0 6px; opacity: 0.5; color: var(--color2); font-size: 120%; line-height: 120%; }
.galeria .listado .galres.lock .fotodesc .fotodesccont .numtipo { display: none; }
.galeria .listado .galres .fotodesc .fotodesccont .desc { display: block; max-height: calc(var(--font-size) * var(--line-height) * 4); overflow: hidden; position: relative; }
.galeria .listado .galres .fotodesc .fotodesccont .desc p { margin: 0; }
.galeria .listado .galres .fotodesc .fotodesccont .desc:before { background: rgba(0, 0, 0, 0) linear-gradient(to right, rgba(245, 245, 245, 0) 0%, rgba(245, 245, 245, 1) 100%) repeat scroll 0 0; top: calc(var(--font-size) * var(--line-height) * 3); content: "."; color: transparent; position: absolute; right: 0; width: 40%; }
.galeria .listado .galres .fotodesc .fotodesccont .descbtn { text-align: center; overflow: hidden; }
.galeria .listado .galres.fold .imgres .icotipo { text-align: center; position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 1; text-decoration: none; border-style: solid; border-width: 80px 80px 0 0; border-color: var(--color1) transparent transparent transparent; color: white;  }
.galeria .listado .galres.fold .imgres .icotipo:after { content: "\f07c"; }
.galeria .listado .galres .imgres .icotipo:after { font-family: "Font Awesome 5 Pro"; font-weight: 900; font-size: 26px; display: inline-block; margin-top: -133px; margin-left: 12px; display: inline-block; vertical-align: middle; }


.galeria .listado .galres.album .imgres .icotipo:after { content: "\f03e"; }
.galeria .listado .galres.album .imgres .icotipo { display: none; }

.galeria .listado .galres .imgres .imgres .icotipo spa
n { margin-right: 5px; display: inline-block; vertical-align: middle; }
.galeria .listado .galres .imgres .icotipo .num { margin-right: 5px; }
.galeria .listado .galres.lock .imgres .icotipo .num { display: none; }

/*  #### ESTILO 1 ####  */
.galeria .listado.gal1{grid-template-columns:1fr 1fr;grid-gap:20px; }
.galeria .listado.gal1 .galres { display: flex;  }
.galeria .listado.gal1 .galres .imgres { display:flex;flex-direction:column;}
.galeria .listado.gal1 .galres .imgres img { display: block; object-fit: cover; flex: 1; }
.galeria .listado.gal1 .galres > div { display: flex; background: rgba(255,255,255,0.9);}
.galeria .listado.gal1 .galres > a, .galeria .listado.gal1 .galres > div { width:50%;}
.galeria .listado.gal1 .galres .fotodesc { display: flex; flex-direction: column; justify-content: center; }
.galeria .listado.gal1 .galres .fotodesc .fotodesccont .desc:before { display:none; }

/*  #### ESTILO 2 ####  */
.galeria .listado.gal2 { grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 16px; }

/*  #### ESTILO 3 ####  */
.galeria .listado.gal3 { grid-template-columns: 1fr 1fr 1fr; grid-gap: 20px; }

/*  #### ESTILO 4 ####  */
.galeria .listado.gal4 { grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 12px; }
.galeria .listado.gal4 .galres .fotodesc{overflow: hidden; position: absolute; bottom: 0; color: white; background: rgba(0,0,0,0.8);  width: 100%;   padding: 4px 12px;  white-space: nowrap; text-align: left; -webkit-transition: all 200ms ease; -moz-transition: all 200ms ease; -ms-transition: all 200ms ease; -o-transition: all 200ms ease; transition: all 200ms ease;}
.galeria .listado.gal4 .galres .fotodesc{ opacity: 1; bottom: 0px;}
.galeria .listado.gal4 .galres .fotodesc h2{ margin: 0;font-size: var(--font-size); line-height:var(--line-height); text-overflow: ellipsis; overflow: hidden;white-space:nowrap}
.galeria .listado.gal4 .galres .fotodesc h2 a{ color: white !important; text-decoration: none; }
.galeria .listado.gal4 .galres .fotodesc .fotodesccont .numtipo { display: none; }
.galeria .listado.gal4 .galres .fotodesc .fotodesccont .desc { display: none; }
.galeria .listado.gal4 .galres .fotodesc .fotodesccont .desc:before {display:none;}


#olNav { margin: 0 0 20px; }
#olNav li{ display: inline-block; margin-right: 8px; /*max-width: 150px; overflow: hidden; */ text-overflow: ellipsis; white-space: nowrap;font-size:90%; line-height:120%;}
#olNav li a{ opacity: 0.8; text-decoration: none;color:var(--color2); }
#olNav li a::after { content: "\f105";font-family: "Font Awesome 5 Pro"; font-weight:900;margin-left: 8px;display:inline-block; }
#olNav li a:hover{ opacity: 1; }
.tnum{ opacity: 0.5; text-transform: uppercase; font-size: 120%; margin: 0 0 8px;}
.albumdesc{ margin: 0 0 20px; }
#albumcont .albumdesc { margin: 0 0 20px;}

.compgallery{display:grid;grid-gap:8px;grid-template-columns:1fr 1fr 1fr 1fr; }
.compgallery  a{ display:block;  position: relative; overflow: hidden; text-decoration: none;width:100%;height:100%; }
.compgallery a .imgdesc { display: block; background: rgba(0, 0, 0, 0.8); bottom: -40px; opacity: 0; width: 100%; color: white; font-size: 12px; line-height: 120%; max-height: 100%; padding: 12px; position: absolute; width: 100%; -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; -ms-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; transition: all 300ms ease-out; }
.compgallery a .imgdesc .t { display: block; font-weight: bold; margin-bottom: 2px; font-size: 14px; line-height: 120%; }
.compgallery a .imgdesc .d { }
.compgallery a:hover .imgdesc { bottom: 0; opacity: 1; }
.compgallery  a img{ display: block; width: 100%;object-fit:cover; }


.lockpass { text-align: center; }
.lockpass .lockcont{ display: inline-block; text-align: left; padding: 30px;width: 90%; max-width: 340px; border-radius: 6px; }
.lockpass .lockcont #valSum { margin: 0 0 10px; display: block; color: red;}
.lockpass #spnContrasena{ display: block; margin: 0 0 10px; width: 100%;text-align:center; }
.lockpass #spnContrasena i, .lockpass #spnContrasena span{ display: inline-block; vertical-align: middle; }
.lockpass #spnContrasena i{ display: none; }
.lockpass #txtContrasena{ display: block; margin: 0 0 10px; width: 100%; padding: 9px; border: 0; background: #fff; border: 1px solid #f0f0f0;}
.lockpass #btnContrasenaAcceder{ border: 0; margin: 0; display: block; width: 100%; padding: 10px;background-color:var(--bg-color1);color:white;}

.comppie { border-top: 1px solid #ccc; clear: both; float: left; margin-top: 20px; padding-top: 20px; width: 100%; }
.comppie div { margin-bottom: 20px; overflow: hidden; }
.comppie .pievolver { display: inline-block; border-radius: 6px; text-decoration: none; padding: 10px 40px; clear: both; line-height: 100%; background-color: var(--bg-color3); color: var(--color3); }
.comppie .pievolver i { margin-right: 10px; font-size: 20px; display: inline-block; }
.comppie .pievolver span, .pievolver i { display: inline-block; vertical-align: middle; }

/* ERROR 404*/
.dvError404{  }
.dvError404 .btn404 a{ display: inline-block; margin-right: 10px; padding: 8px 16px; border-radius: 4px; text-decoration: none; margin: 0 10px 10px 0; }
.dvError404 p{ margin: 0 0 20px; }

/* Mosaico */
.compgallery .icolock { display: none; }
.compgallery .icotipo { display: none; }

/* Tablet */
@media screen and (max-width: 1024px) {
    .galeria .listado.gal2 { grid-gap: 12px; }
    .galeria .listado.gal2 .galres .fotodesc {padding:12px;}
}
    @media screen and (max-width: 800px) {

        .galeria .listado.gal1 { grid-gap: 12px; }
        .galeria .listado.gal2 { grid-template-columns: 1fr 1fr 1fr; }
        .galeria .listado.gal3 { grid-gap: 12px; }
        .galeria .listado.gal4 { grid-template-columns: 1fr 1fr 1fr; }

        .listado .gal1 .galres { width: 100%; }
        .listado .gal1 .galres .imgres { width: 30%; }
        .listado .gal1 .galres .fotodesc { width: 70%; }


        .listado .gal2 .galres { width: 31.8333333%; margin: 0 1% 2% 1%; }
        .listado .gal2 .galres:nth-child(4n+1) { margin: 0 1% 2% 1%; clear: none; }
        .listado .gal2 .galres:nth-child(4n) { margin: 0 1% 2% 1%; }
        .listado .gal2 .galres:nth-child(3n+1) { margin: 0 1% 2% 0; clear: both; }
        .listado .gal2 .galres:nth-child(3n) { margin: 0 0 2% 1%; }

        .listado .gal3 .galres { width: 49%; }
        .listado .gal3 .galres:nth-child(3n+1) { margin: 0 1% 2% 1%; clear: none; }
        .listado .gal3 .galres:nth-child(3n) { margin: 0 1% 2% 1%; }
        .listado .gal3 .galres:nth-child(2n+1) { margin: 0 1% 2% 0; clear: both; }
        .listado .gal3 .galres:nth-child(2n) { margin: 0 0 2% 1%; }

        .listado .gal4 .galres { width: 33%; margin: 0 0.25% 0.5% 0.25%; }
        .listado .gal4 .galres:nth-child(4n+1) { margin: 0 0.25% 0.5% 0.25%; clear: none; }
        .listado .gal4 .galres:nth-child(4n) { margin: 0 0.25% 0.5% 0.25%; }
        .listado .gal4 .galres:nth-child(3n+1) { margin: 0 0.25% 0.5% 0; clear: both; }
        .listado .gal4 .galres:nth-child(3n) { margin: 0 0 0.5% 0.25%; }

        .compgallery { grid-template-columns: 1fr 1fr 1fr; }

        .gal_1 .galcont { width: 33.33%; }
    }

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

        .galeria .listado.gal1 { grid-template-columns: 1fr; }
        .galeria .listado.gal2 { grid-template-columns: 1fr 1fr; }
        .galeria .listado.gal3 { grid-template-columns: 1fr 1fr; }
        .galeria .listado.gal4 { grid-template-columns: 1fr 1fr; }

        .listado .gal1 .galres { margin: 0 0 5%; }
        .listado .gal1 .galres .imgres { width: 50%; }
        .listado .gal1 .galres .fotodesc { width: 50%; }

        .listado .gal2 .galres { width: 49%; }
        .listado .gal2 .galres:nth-child(3n+1) { margin: 0 1% 2% 1%; clear: none; }
        .listado .gal2 .galres:nth-child(3n) { margin: 0 1% 2% 1%; }
        .listado .gal2 .galres:nth-child(2n+1) { margin: 0 1% 2% 0; clear: both; }
        .listado .gal2 .galres:nth-child(2n) { margin: 0 0 2% 1%; }

        .listado .gal4 .galres { width: 49%; }
        .listado .gal4 .galres:nth-child(3n+1) { margin: 0 1% 2% 1%; clear: none; }
        .listado .gal4 .galres:nth-child(3n) { margin: 0 1% 2% 1%; }
        .listado .gal4 .galres:nth-child(2n+1) { margin: 0 1% 2% 0; clear: both; }
        .listado .gal4 .galres:nth-child(2n) { margin: 0 0 2% 1%; }

        
        .lockpass .lockcont { text-align: center; }
        .gal_1 .galcont { width: 50%; }
    }

    @media screen and (max-width: 500px) {
        .galeria .listado.gal2 { grid-template-columns: 1fr; grid-gap: 20px; }
        .galeria .listado.gal3 { grid-template-columns: 1fr; grid-gap: 20px; }
        .galeria .listado.gal4 { grid-template-columns: 1fr; }

        .galeria .listado:not(.gal4) .galres .fotodesc { padding: 16px !important; }

        #paginacion ul li { display: none; width: 49%; }
        #paginacion ul li:first-child { display: block; float: left; }
        #paginacion ul li:last-child { display: block; float: right; }
        #paginacion ul li:first-child a, #paginacion ul li:last-child a { width: 100%; margin: 0; line-height: 42px; font-size: 20px; }
        .compgallery { grid-template-columns: 1fr 1fr; }
    }

    @media screen and (max-width: 360px) {
        .nocont { text-align: center; }
        .galeria .listado.gal1 .galres { display: block; }
        .galeria .listado.gal1 .galres > a, .galeria .listado.gal1 .galres > div { width: 100%; }
        .compgallery a > span { display: none; }
    }