/*viewStandart blade grilla de imagenes y categorias*/
:root {
    --gap-columns-gallery: 15px;
}
ul.rig {
    list-style: none;
    padding: 0;
    width: 100%;
    display: flex;
    flex-flow: wrap;
    justify-content: center;
    gap: var(--gap-columns-gallery);
}
ul.rig li {
    list-style: none;
    overflow: hidden;
}
.contenedor-img {
    overflow: hidden;
}
.contenedor-img span {
    position: absolute;
    display: block;
    top: 95px;
    right: 0;
    padding: 7px;
    background: rgba(0,0,0, 0.6);
    color: #fff;
}
li.galeria_item .contenedor-img {
    height: 100%;
    width: 100%;
    aspect-ratio: 4/3;
}
li.galeria_item .contenedor-img .thumbnail {
    width: 100%;
    height: 100%;
    display: block !important;
    position: relative;
}
.contenedor-img .size-img-fijo {
    width: 100%;
    height: 100%;
    vertical-align: middle;
    overflow: hidden;
    display: flex;
    position: relative;
    margin: auto;
    align-items: center;
    justify-content: center;
}
ul.rig li img {
    margin: 0;
    display: block;
}
li.galeria_item .contenedor-img .thumbnail img {
    width: 100%;
    height: 100%;
    display: block !important;
    object-fit: cover;
}
ul.rig li h2 {
    margin: 0 0 5px;
}
@media screen and (min-width: 768px) {
    /* class for 2 columns */
    ul.rig.columns-2 li {
        flex: 0 0 48%;
        max-width: 48%;
    }
    /* class for 3 columns */
    ul.rig.columns-3 li {
        flex: 0 0 31.333333%;
        max-width: 31.333333%;
    }
    /* class for 4 columns */
    ul.rig.columns-4 li {
        flex: 0 0 23%;
        max-width: 23%;
    }
    /* class for 5 columns */
    ul.rig.columns-5 li {
        flex: 0 0 18%;
        max-width: 18%;
    }
}
.contenedor-img:hover .descImage {
    position: absolute;
    background-color: rgba(0,0,0,.7);
    filter: alpha(opacity=70);
    z-index: 1;
    display: inline-block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: auto;
 }
.descImage{
    display: none;
}
.contenedor-img .nameImage {
    height: 45px;
    margin: 10px 0;
    overflow: hidden;
}
.contenedor-img p.nxtilte {
    margin: 0;
}
.descImage .hovertilte{
    color: #fff;
    padding: 10px;
    margin-bottom: 0;
    height: 104px;
    overflow: hidden;
    line-height: 17px;
}
.descImage .hoverfecha{
    color: #fff;
    padding: 10px;
}
.galeria li.galeria_item {
    margin: 0;
    padding: 0;
}
@media (max-width: 780px) {

	.modal-footer .texto-descriptivo {
	    float: left;
	}
}
@media (max-width: 480px) {
    ul.rig.columns-4 li, ul.rig.columns-3 li { width: 50%; padding: 0 10px;}
	.contenedor-img:hover .descImage {
    	left: 10px;
    	right: 10px;
	    width: auto;
	}
}

@media (min-width:481px) and (max-width: 640px) {
    ul.rig.columns-4 li, ul.rig.columns-3 li { width: 47.5%; }
}

@media (min-width:641px) and (max-width: 767px) {
    ul.rig.columns-4 li, ul.rig.columns-3 li { width: 30.83%; }
}

@media (min-width:767px) and (max-width: 991px) {
    ul.rig.columns-4 li, ul.rig.columns-3 li { width: 47.5%; }
}

@media (min-width:993px) and (max-width: 1199px) {
    ul.rig.columns-4 li, ul.rig.columns-3 li { width: 30.83%; }
}


/*div superior de iframe youtube se utiliza para centrar el video*/
.cont-Yt{text-align: center;}

/*media query para ajustar video youtube a las diferentes resoluciones*/
@media (max-width: 380px){
    .video-youtube{
        width: 100%;
        height: 150px;
    }
    ul.rig.columns-4 li, ul.rig.columns-3 li { width: 100%}
}

@media (min-width:381px) and (max-width:660px){
    .video-youtube{
        width: 100%;
        height: 215px;
    }
}

/* medidas para visualizar archivos mp3, mp4 y flv en la modal*/

.repMp3{
    width: 90%;
    display:block;
    margin:0 auto 0 auto;
}
.repMp4{
    width: 90%;
    display:block;
    margin:0 auto 0 auto;
}
.repFlv{
    width: 90%;
    height: 297px;
    display:block;
    margin:0 auto 0 auto;
}
.thumbnail-mod{
    display: inline-block !important; 
    padding: initial; 
    margin-bottom: initial; 
    line-height: initial; 
    background-color: initial; 
    border: initial; 
}


/*estilos del slide jssor*/

/* jssor slider arrow navigator skin 05 css */
/*
.jssora05l                  (normal)
.jssora05r                  (normal)
.jssora05l:hover            (normal mouseover)
.jssora05r:hover            (normal mouseover)
.jssora05l.jssora05ldn      (mousedown)
.jssora05r.jssora05rdn      (mousedown)
*/
.jssora05l, .jssora05r {
    position: absolute;
    padding: 10px;
    background: rgba(0,0,0, 0.7);
    color: #fff;
    font-size: 1.7em;
    cursor: pointer;
}
.jssora05l:before {
    content: "\f104";
    font-family: 'FontAwesome';
}
.jssora05r:before {
    content: "\f105";
    font-family: 'FontAwesome';
}
/*.jssora05l, .jssora05r {
    display: block;
    position: absolute;
    width: 40px;
    height: 40px;
    cursor: pointer;
    background: url('../img/a17.png') no-repeat;
    overflow: hidden;
}
.jssora05l { background-position: -10px -40px; }
.jssora05r { background-position: -70px -40px; }
.jssora05l:hover { background-position: -130px -40px; }
.jssora05r:hover { background-position: -190px -40px; }*/
.jssora05l.jssora05ldn { background-position: -250px -40px; }
.jssora05r.jssora05rdn { background-position: -310px -40px; }

/* jssor slider thumbnail navigator skin 01 css */
/*
.jssort01-99-66 .p            (normal)
.jssort01-99-66 .p:hover      (normal mouseover)
.jssort01-99-66 .p.pav        (active)
.jssort01-99-66 .p.pdn        (mousedown)
*/
.jssort01-99-66 .p {
    position: absolute;
    top: 0;
    left: 0;
    width: 99px;
    height: 66px;
    text-align-last: center;
    line-height: 66px;

}
.jssort01-99-66 .t {
    vertical-align: middle;
    position: relative;
    top: 0;
    left: 0;
    max-width: 100%;
    max-height: 100%;
    border: none;
}
.jssort01-99-66 .w {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}
.jssort01-99-66 .c {
    position: absolute;
    width: 99px;
    height: 66px;
    box-sizing: content-box;
    background: url('../img/t01.png') -800px -800px no-repeat;
    _background: none;
}

.jssort01-99-66 .pav .c {
    width: 99px;
    height: 66px;
    background-position: 50% 50%;
}

.jssort01-99-66 .p:hover .c {
    background-position: 50% 50%;
}

.jssort01-99-66 .p.pdn .c {
    background-position: 50% 50%;
    width: 99px;
    height: 66px;
}

* html .jssort01-99-66 .c, * html .jssort01-99-66 .pdn .c, * html .jssort01-99-66 .pav .c {
    /* ie quirks mode adjust */
    width /**/: 99px;
    height /**/: 66px;
}

/**/
.cont-image{
    text-align: center !important;
    line-height: 480px !important;
}


/*ajuste para que el thumbnail grande no dañe las dimensiones de la imagen*/
.Slide-Image{
    width: initial !important;
    height: initial !important;
}

.descrip
{
    height:115px;
    max-height:115px;
    overflow-y: auto;
    text-align: justify;
    margin-left:7px;
    color:#FFF;
    margin-top: 5px;
    width: 710px;
    border: 1px solid #fff;
}

/*ajuste para texto de titulo en la caja contenedora*/
.content-galeria .conten {
    background-color: rgba(0, 0, 0, 0.8);
    position: relative;
    top: 100%;
    float: left;
    width: 100%;
    border-top: 1px solid rgba(255,255,255,0.4);
}
.content-galeria .title {
    padding: 10px;
    color: #FFF;
}
.content-galeria .title h2 {
    margin-top: 0;
    color: #fff;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.content-galeria .title a {
    color: #fff;
    float: right;
    margin-bottom: 11px;
}
.content-galeria .title span {
    font-size: 1.3em;
    margin-right: 5px;
}

/*caja contenedora videos y audio en slide*/
.conten2
{
    transform:translateY(-15px);
    background-color: rgba(0, 0, 0, 0.7);
    position: relative;
    /*margin-top:400px;*/
    padding-right:680px;

}

/*ajuste de tamaño en el contenedor lateral de imagenes de slide*/
.thumb-ajust{
    top:15px !important;
    height: 550px;
}

/* ajuste para cambiar de slide a grilla en viewPlus*/
.grid-pres{display: none;}

@media (max-width: 680px) {
    /*ajuste que se realizo para visualizar slide tamaño segun el media*/
    .jssort01-99-66{
        visibility: hidden important;
        width: 1px !important;
    }
    .jssorPlusnx{
        width: 222px !important;
    }
    .jssorPlusSlidernx{
        width: 720px !important;
        left: 0px !important;
    }
    .jssora05l{
        visibility: hidden;
    }
    .jssora05r{
        visibility: hidden;
    }

/*slide pres es un div que contiene el slide de galerias en vista viewPlus,
grid pres es un div que contiene la grilla en vista viewPlus
cuando la resolucion tiene un ancho inferior a 680px se cambia el tipo de presentacion
de una a otra*/
    .grid-pres{display: block;}
    .slide-pres{display: none;}

}

/* MODAL */
.dModGaleria #image-gallery {
    background: rgba(0,0,0,0.7);
}
.dModGaleria .modal-content {
    box-shadow: none;
    background: transparent;
    border: 0;
}
.dModGaleria .modal-content .modal-header {
    border-bottom: 0;
    padding: 0 15px;
}
.dModGaleria button.close {
    opacity: 1;
}
.dModGaleria button.close span {
    font-size: 3em;
    text-shadow: none;
    color: #999;
    font-weight: normal;
}
.dModGaleria .modal-footer {
    border: 0;
    color: #fff;
}
.modal-footer .texto-descriptivo{
    max-height: 30%;
    overflow-y: auto;
    margin-top: 10px;
    padding-right: 0;
}
.modal-footer #image-gallery-title {
    font-weight: bold;
}
.modal-footer .redes a, .modal-footer a {
    border-radius: 100%;
    width: 35px;
    height: 35px;
    border: 1px solid #ccc;
    background: #fff;
    margin-left: 5px;
    padding: 0;
    text-align: center;
    display: block;
}
.modal-footer .redes a span{
    font-size: 1.2em;
    line-height: 1.9em;
    padding-left: 6px;
}
/*flechas modal bootstrap*/
.next{position:absolute; left:-20px; z-index:1; top:50%; margin-top:-9px; color:whitesmoke;}
.previous{position:absolute; right:-40px; z-index:1; top:50%; margin-top:-9px; color:whitesmoke;}

.next:hover{position:absolute; left:-20px; z-index:1; top:50%; margin-top:-9px; color:lightskyblue;cursor:pointer;}
.previous:hover{position:absolute; right:-40px; z-index:1; top:50%; margin-top:-9px; color:lightskyblue;cursor:pointer;}

.center-block {
    text-align: center;
}


/*medidas para visualizar video de youtube*/
.video-youtube{
    width: 100%;
    height: 360px;
}