/********** PAGES - AGENDA CULTURAL ************/	
#page-agendacultural {position: relative;}

#page-agendacultural .fondo-page .overlay {  background-color: brown;}
#page-agendacultural .fondo-page .wrapp-gradient {
    background-image: -webkit-radial-gradient(circle 1010px at center, transparent 0%, midnightblue 120%);
    background-image: -moz-radial-gradient(circle 1010px at center, transparent 0%, midnightblue 120%);
    background-image: -o-radial-gradient(circle 1010px at center, transparent 0%, midnightblue 120%);
     background-image: radial-gradient(circle 1010px at center, transparent 0%, midnightblue 120%); }

#page-agendacultural .fondo-page .wrapp-gradient:before {  content: '';  position: absolute;
}
/********** FIN - AGENDA CULTURAL ************/	



/********** PAGE - EVENTOS / CURSOS Y TALLERES ************/	
#page-talleres{background: #1b0202;}

#page-talleres .fondo-page 
   {background-image: url('../images/front/talleres.jpg') !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    position: absolute;
    width:100%;
	background-size: cover;
    height: 1250px;
}

#page-talleres .fondo-page .overlay {  background-color: rgba(0, 0, 0, 0.5); height: 100%;    }

#page-talleres .fondo-page .wrapp-gradient {
    background-image: -webkit-radial-gradient(circle 888px at center, transparent 0%, #651f1fb8 100%);
    background-image: -moz-radial-gradient(circle 761px at center, transparent 0%, #651f1fb8 100%);
    background-image: -o-radial-gradient(circle 761px at center, transparent 0%, #651f1fb8 100%);
     background-image: radial-gradient(circle 761px at center, transparent 0%, #651f1fb8 100%); height: 100%;   }

#page-talleres:before,
#page-talleres .fondo-page .wrapp-gradient:before {  content: '';  position: absolute;  
}
/**************** FIN EVENTOS / TALLERES ****************/




/********** PAGE - EVENTOS / MÚSICA ************/	
#page-musica {background: #2a051f;}

#page-musica .fondo-page 
   {background-image: url('../images/front/musica.jpg') !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    position: absolute;
    width:100%;
	background-size: cover;
    height: 1250px;
}

#page-musica .fondo-page .overlay {  background-color: rgba(0, 0, 0, 0.5); height: 100%;    }

#page-musica .fondo-page .wrapp-gradient {
    background-image: -webkit-radial-gradient(circle 888px at center, transparent 0%, #cc219780 100%);
    background-image: -moz-radial-gradient(circle 761px at center, transparent 0%, #cc219780 100%);
    background-image: -o-radial-gradient(circle 761px at center, transparent 0%, #cc219780 100%);
     background-image: radial-gradient(circle 761px at center, transparent 0%, #cc219780 100%); height: 100%;   }

#page-musica:before,
#page-musica .fondo-page .wrapp-gradient:before {  content: '';  position: absolute;  
}
/**************** FIN EVENTOS / MÚSICA ****************/




/********** PAGE - EVENTOS / MÁS EVENTOS ************/	
#page-maseventos {background: #321c46;}

#page-maseventos .fondo-page 
   {background-image: url('../images/front/maseventos.jpg') !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    position: absolute;
    width:100%;
	background-size: cover;
    height: 1250px;
}

#page-maseventos .fondo-page .overlay {  background-color: rgba(0, 0, 0, 0.5); height: 100%;    }

#page-maseventos .fondo-page .wrapp-gradient {
    background-image: -webkit-radial-gradient(circle 888px at center, transparent 0%, #ac5ff394 100%);
    background-image: -moz-radial-gradient(circle 761px at center, transparent 0%, #ac5ff394 100%);
    background-image: -o-radial-gradient(circle 761px at center, transparent 0%, #ac5ff394 100%);
     background-image: radial-gradient(circle 761px at center, transparent 0%, #ac5ff394 100%); height: 100%;   }

#page-maseventos:before,
#page-maseventos .fondo-page .wrapp-gradient:before {  content: '';  position: absolute;  
}
/************** FIN EVENTOS / MÁS EVENTOS *************/





/********** PAGE - EVENTOS / CINECLUB ************/	
#page-cineclub{background: #10497B;}

#page-cineclub .fondo-page 
   {background-image: url('../images/front/cineclub-01.jpg') !important;
    background-position: center !important;
	background-repeat: no-repeat !important;
    position: absolute;
    width: 100%;
	background-size: cover;
    height: 1250px;
}

#page-cineclub .overlay {  background-color: rgba(0, 0, 0, 0.7);height: 100%;   }

#page-cineclub  .wrapp-gradient {
    background-image: -webkit-radial-gradient(circle 888px at center, transparent 0%, #065194 100%);
    background-image: -moz-radial-gradient(circle 761px at center, transparent 0%, #065194 100%);
    background-image: -o-radial-gradient(circle 761px at center, transparent 0%, #065194 100%);
     background-image: radial-gradient(circle 761px at center, transparent 0%, #065194 100%);
     height: 100%;
    }

#page-cineclub:before,
#page-cineclub .wrapp-gradient:before { content: '';  position: absolute;
}
/**************** FIN EVENTOS / CINECLUB****************/





/********** PAGE - SALA DE CINE / CINECLUB ************/	
#page-saladecine {background: #000;}
#page-saladecine .views-element-container {z-index: 1; position: relative;}
#page-saladecine canvas {position: absolute; top: 0;}

#page-saladecine .fondo-page 
   {
    position: absolute;
    width: 100%;
	background-size: cover;
    height: 1250px;
    contain: layout;
}

#page-saladecine    .overlay {  background-color: rgba(0, 0, 0, 0.2);height: 100%;   }

#page-saladecine  .wrapp-gradient {
    background-image: -webkit-radial-gradient(circle 710px at center, transparent 0%, #000 110%);
    background-image: -moz-radial-gradient(circle 710px at center, transparent 0%, #000 110%);
    background-image: -o-radial-gradient(circle 710px at center, transparent 0%, #000 110%);
     background-image: radial-gradient(circle 710px at center, transparent 0%, #000 110%);
     background-image: radial-gradient(circle 710px at center, transparent 0%, #000 110%);
     height: 100%;
     
    }

#page-saladecine:before,
#page-saladecine .wrapp-gradient:before { content: '';  position: absolute;
}
/**************** FIN SALA DE CINE / CINECLUB****************/





/********** PAGE - EVENTOS / ESPACIOS DE ARTE *********/	
#page-museosygalerias { background: black;}

#page-museosygalerias .fondo-page 
   {background-image: url('../images/front/espaciosdearte.jpg') !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    position: absolute;
    width:100%;
	background-size: cover;
    height: 1250px;
}

#page-museosygalerias .fondo-page .overlay {  background-color: rgba(0, 0, 0, 0.5); height: 100%;   }

#page-museosygalerias .fondo-page .wrapp-gradient {
    background-image: -webkit-radial-gradient(circle 710px at center, transparent 0%, black 120%);
    background-image: -moz-radial-gradient(circle 710px at center, transparent 0%, black 120%);
    background-image: -o-radial-gradient(circle 710px at center, transparent 0%, black 120%);
     background-image: radial-gradient(circle 710px at center, transparent 0%, black 120%);
     height: 100%; }

#page-museosygalerias:before,
#page-museosygalerias .fondo-page .wrapp-gradient:before {  content: '';  position: absolute;
}
#page-museosygalerias .text-section h4  { color: black; font-size: 1em;}   
/**************** FIN ESPACIOS DE ARTE ****************/





/********** PAGE / SALA DEEXPOSICIONES *********/	
#page-saladeexpos { background: black;}
#page-saladeexpos  .views-element-container {z-index: 1; position: relative;}
#page-saladeexpos  canvas {position: absolute;  top: 0;}

#page-saladeexpos .fondo-page 
   {
    position: absolute;
    width:100%;
	background-size: cover;
    height: 1250px;
    contain: layout;
}

#page-saladeexpos .fondo-page .overlay {  background-color: rgba(0, 0, 0, 0.5); height: 100%;   }

#page-saladeexpos .fondo-page .wrapp-gradient {
    background-image: -webkit-radial-gradient(circle 1000px at center, transparent 0%, black 90%);
    background-image: -moz-radial-gradient(circle 1000px at center, transparent 0%, black 90%);
    background-image: -o-radial-gradient(circle 1000px at center, transparent 0%, black 90%);
     background-image: radial-gradient(circle 1000px at center, transparent 0%, black 90%);
     background-image: radial-gradient(circle 1000px at center, transparent 0%, black 90%);

     height: 100%; }

#page-saladeexpos:before,
#page-saladeexpos.fondo-page .wrapp-gradient:before {  content: '';  position: absolute;
}
#page-saladeexpos .text-section h4  { color: black;}   
/**************** FIN SALA DE EXPOSICIONES ****************/





/********** PAGE - EVENTOS / ARTES ESCENICAS ************/	
#page-artesescenicas{background: #70540f;}

#page-artesescenicas .fondo-page 
   {background-image: url('../images/front/artesescenicas.jpg') !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    position: absolute;
    width: 100%;
	background-size: cover;
    height: 1250px;
}

#page-artesescenicas .fondo-page .overlay {  background-color: rgba(0, 0, 0, 0.5); height: 100%;    }

#page-artesescenicas .fondo-page .wrapp-gradient {
    background-image: -webkit-radial-gradient(circle 600px at center, transparent 0%, goldenrod 100%);
    background-image: -moz-radial-gradient(circle 600px at center, transparent 0%, goldenrod 100%);
    background-image: -o-radial-gradient(circle 600px at center, transparent 0%, goldenrod 100%);
     background-image: radial-gradient(circle 600px at center, transparent 0%, goldenrod 100%); 
	height: 100%;  
}

#page-artesescenicas:before,
#page-artesescenicas .fondo-page .wrapp-gradient:before {  content: '';  position: absolute;
}

figure, figcaption {display: block;}
/************** FIN  EVENTOS / ARTES ESCENICAS  **************/
        /****** FIN TOTAL VISTAS - EVENTOS-AGENDACULTURAL *******/






/******** VISTA/PAGE - OFERTA - TALLERES ARTÍSTICOS *********/	
#page-talleresartisticos .fondo-page 
   {background-image: url('../images/front/talleresartisticos_01.jpg') !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;

}

#page-talleresartisticos .fondo-page .overlay {  background-color: rgba(0, 0, 0, 0.5);}
#page-talleresartisticos .fondo-page .wrapp-gradient {
    background-image: -webkit-radial-gradient(circle 1000px at center, transparent 0%, rgba(40, 20, 1, 0.7) 100%);
    background-image: -moz-radial-gradient(circle 1000px at center, transparent 0%, rgba(40, 20, 1, 0.7) 100%);
    background-image: -o-radial-gradient(circle 1000px at center, transparent 0%, rgba(40, 20, 1, 0.7) 100%);
     background-image: radial-gradient(circle 1000px at center, transparent 0%, rgba(40, 20, 1, 0.7) 100%); 
}

#page-talleresartisticos .fondo-page .wrapp-gradient:before {  content: '';  position: absolute;
}

figure, figcaption {display: block;}

.page-title {   margin-bottom: 0;	margin-left: 6%; }

#page-talleresartisticos .isofilters{ padding: 0px;  margin-bottom: 1%; }

#page-talleresartisticos    .isofilters ul.filter {  margin-bottom: 0;  }
#page-talleresartisticos    .isofilters ul.filter li {  margin: 1%; }
/************** FIN VISTA/PAGE  OFERTA - TALLERES ARTÍSTICOS  ************/






/********** VISTA/PAGE - ESPACIOS DE ARTE - GRID ************/	
.grid {
    margin: 2px;
    padding: 10px;
    background: whitesmoke;
    filter: drop-shadow(2px 4px 6px black);
}
.grideventos { flex-wrap: wrap; display: flex; justify-content: space-between; }

.grid:nth-child(3){ align-self: center;}

.grid:nth-child(4n-7){  width: 40%; }

.grid:not(:first-child){ flex: auto;width: 18%;  }

/***esta combinacion genera los ultimos cards enormes y desproporcionados****
.grid:not(:first-child):not(:last-child){ flex: auto;width: 18%;  }
**/

/***estos dos seleccionan el el primero 
.gride:nth-child(1){  width: 40%; }
**/

/***estos dos seleccionan el quinto 
.gride:nth-child(5){  width: 50%; }
.grid:nth-child(5n+0){  width: 50%; }**/

/**
.grid:nth-child(even),
.grid:nth-child(4) {filter: grayscale(90%); }
**/

.grid figure { position: relative;  float: left;  overflow: hidden;   width: 100%; height: 100%;   background: #000;   text-align: center;    cursor: pointer; filter: grayscale(90%);
}

.grid figure:hover img{opacity:0.30;}

.grid figure figcaption{color:#fff;-webkit-backface-visibility:hidden;backface-visibility:hidden;}

.grid figure figcaption::before,
.grid figure figcaption::after{pointer-events:none;}

.grid figure figcaption,
.grid figure figcaption > a{position:absolute;top:0;left:0;width:100%;height:100%;}

.grid figure img {
    position: relative;
    display: block;
    max-width: 100%;
    opacity: 1;
    transition: all 0.3s ease;
	height: auto;
	box-sizing: border-box;	
}

.grid figure figcaption, 
.grid figure figcaption > a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

figure.effect-marley figcaption {   text-align: right; }

figure.effect-marley figcaption {text-align:right;}

figure.effect-marley h3, 
figure.effect-marley .fecha,
figure.effect-marley .sede,
figure.effect-marley .infoevento 
{float: right;  width: 100%;}

figure.effect-marley .infoevento {margin-top: 15px;
	-webkit-transform:translate3d(0,100%,0);
	transform:translate3d(0,100%,0);}

figure.effect-marley h3 {background-color:  rgba(0, 0, 0, 0.7);
	padding:10px 20px 0 20px;
		-webkit-transition:-webkit-transform 0.35s;transition:transform 0.35s;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0);}

figure.effect-marley .fecha,
figure.effect-marley .sede {background-color:  rgba(0, 0, 0, 0.5);
	padding:0px 20px; margin-top: -6px;
	clear: right;
	-webkit-transition:-webkit-transform 0.35s;
	transition:transform 0.35s;
	-webkit-transform:translate3d(0,15px,0);
	transform:translate3d(0,15px,0);}

figure h3 {font-size: 1.4em; font-family: 'Raleway',sans-serif; }

.fecha { font-family: 'Raleway',sans-serif; }

figure p { font-family: 'Raleway',sans-serif; }

/*
terreeeefigure.effect-marley .fecha::after
{ border-bottom: 1px solid rgba(255,255,255,0.1);  position:absolute;top:0;left:0;width:100%;content:'';-webkit-transform:translate3d(0,24px,0);transform:translate3d(0,24px,0);}*/

figure.effect-marley h3::after,
figure.effect-marley .infoevento
{opacity:0;
	    background-color: rgba(0, 0, 0, 0.3);
	-webkit-transition:opacity 0.35s,
		-webkit-transform 0.35s;
	transition:opacity 0.35s,transform 0.35s;}

figure.effect-marley:hover .fecha,
figure.effect-marley:hover .sede{background-color: rgba(211, 166, 46, 0.4);
	-webkit-transform:translate3d(0,0,0);
	transform:translate3d(0,0,0);}

figure.effect-marley:hover h3 {
	-webkit-transform:translate3d(0,0,0);
	transform:translate3d(0,0,0);}

figure.effect-marley:hover h3::after,
figure.effect-marley:hover .infoevento {
	opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}

/**
marley p {
    opacity: 0;
    -webkit-transition: opacity 0.35s,-webkit-transform 0.35s;
    transition: opacity 0.35s,transform 0.35s;
}
figure.effect-zoe figcaption {top:auto;bottom:0;padding:3em;height:8.75em;color:#3c4a50;-webkit-transition:-webkit-transform 0.35s;transition:transform 0.35s;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);}
.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}
**/

/********** FIN VISTA/PAGE - ESPACIOS DE ARTE - GRID ************/	


.viewtitleclass{
  text-align: left;
}

/********** VISTA/PAGE - ESPACIOS EMBLEMÁTICOS ***********
.page-espaciosemblematicos{position: relative;

}*/	
.bg-img {
  -webkit-background-size: cover; 
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: 50% 50%;
  opacity:1; 
  max-height:300px;
  overflow: hidden;
  padding: unset;
}
.bg-img  img
{    position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);}

/********** FIN VISTA/PAGE - ESPACIOS EMBLEMÁTICOS ************/	


/**********  GALERÍAS UG ************/
/********** VISTA/PAGE - GALERÍAS UG - EXPO DISPONIBLE ************/	

div#vista-galeriasug {
    position: relative;
    overflow-x: hidden;
    clear: both;
}
.imagenprincipal-container {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  margin-top: 0px;
  margin-bottom: 0px;
  height: 500px;
}
.imagenprincipal {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    width: 100%;
    height: 100%;
    visibility: inherit;
    opacity: 1;
    transform: matrix(1, 0, 0, 1, 0, 0);
}
.galeriaug img{
    background-repeat: no-repeat;
  /*background-image: url("https://premiumlayers.com/wpthemes/museum/wp-content/uploads/revslider/home1/slide-1.jpg");*/
  background-size: cover;
  background-position: center top;
  width: 100%;
  height: 100%;
  opacity: 1;
  visibility: inherit;
  z-index: 20;
  position: inherit;
  transform: translate(-0%, -50%);
}
.galeriaug-element_cover {
    position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     z-index: 0;
     transform: translateZ(0);
   }

.nombregaleria {
 position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  white-space: nowrap;
  font-size: 60px;
}

.galeriaug-element_cover::before,
.galeriaug-element_cover::after {
    background: rgb(249,211,1);
    background: linear-gradient(318deg, rgb(249 211 1 / 46%) 0%, 
    rgb(182 125 13 / 34%) 37%, rgb(181 30 33 / 60%) 72%, rgb(181 20 111 / 45%) 100%);
    height: 100%;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -100;
  content: '';
  display: block;
  transition: opacity .5s ease-in-out,background-color .5s ease-in-out;
}
/**---banner animated---**/
.banner {
  background-color: black;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}
.banner-img {
  position: relative;
  overflow: hidden;
}
.banner-img::before {
  position: absolute;
  content: "";
  background-color: rgb(0 0 0 / 60%);
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}
.banner-img img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}
.bannerprincipal {
  position: relative;
  z-index: 1;
  background: linear-gradient(318deg, rgb(249 211 1 / 46%) 0%, rgb(182 125 13 / 34%) 37%, rgb(181 30 33 / 60%) 72%, rgb(181 20 111 / 45%) 100%);
    min-height: 500px;
}
.bannerprincipal h1 {
  position: absolute;
  left: 4%;
  font-size: 30em;
  font-weight: 800;
  text-transform: uppercase;
  /*background-image: url(https://www.yudiz.com/codepen/interior-design/mask-img.jpg);*/
  background-repeat: repeat;
  background-size: contain;
  background-position: center;
  opacity: 0.6;
  color: white;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  font-family: 'josefin-bold', sans-serif;
  z-index: -1;
}
.banner-bg {
  position: relative;
  z-index: 1;
  max-width: 100%;
  overflow: hidden;
  max-height: 500px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.banner-text {
  padding: 1% 4%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  overflow: hidden;
  background: linear-gradient(318deg, rgb(249 211 1 / 46%) 0%, rgb(182 125 13 / 34%) 37%, rgb(181 30 33 / 60%) 72%, rgb(181 20 111 / 45%) 100%);
  z-index: 1;
  width: 50%;
  min-height: 500px;
}
.banner-text h2 {
  margin: 0 0 8px;
  font-size: 5em;
  line-height: .9;
  font-weight: 400;
  font-style: normal;
  color: white;
  position: relative;
  user-select: none;
}
.expoactual  {    font-family: Os, Raleway, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 2.5em;
  line-height: 30px;
  color: rgb(255 255 255 / 72%);
  position: relative;
}
.expoactual p {    
  font-size: 1.5em;
  line-height: 1em;
  margin: 0 auto 1%;
  color: #f08e8e;
  font-weight: 600;
}
/**---end banner Animated---**/

/*
.infogaleriasug-col{ position: relative; }
.infogaleriasug-box { float: left; clear: both; display: block; 
    box-sizing: border-box;
    width: 100%; height: 100%; }
*/

/**---info tabs---**/
.infogaleriasug { position: relative; z-index: 1; margin-top: -80px; 
  font-family: 'josefin-light';
 }
.infogaleriasug-container {position: static; max-width: 80%;   padding: 0px 15px;  margin: 0 auto; } 
.infogaleriasug .info-box {
  position: relative;
  min-height: 80px;
  background-color: rgb(50 32 15 / 49%);
  border: 1px solid rgba(161, 161, 161, 0.2);
  border-bottom: 0;
  text-align: center;
  border-top-left-radius: 10px;
  border-top-right-radius: 50px;
}
.infogaleriasug .info-box h5,
.infogaleriasug .info-box p { margin: 0; padding: 0;}

.infogaleriasug .info-box h5 { position: relative;  font-size: .8em;
    color: white; font-weight: 800; 
}
.infogaleriasug .info-box p { position: relative; font-size: .9em;
    color: white;  padding: 0 5%; line-height: 1.2em;
}

.infogaleriasug .info-box .inner-box{  position: relative; padding: 0 .4%;}
/**--- end info tabs---**/

.bloque2totheleft hr {
    background: #f19100 none repeat scroll 0 0;
    border: medium none;
    height: 2px;
    width: auto;
    margin-left: 0;
  }
.bloque2totheleft h4{  color: white; }
.bloque2totheleft {
  background: black; 
  min-height: 560px;
  display: flex;
  align-items: stretch;
}
.bloque2totheleft .left-row {
  background: #c2b8ad;
  
}
.bloque2totheleft .galeria-img {
    max-height: 600px;
    display: inline-block;
    width: 100%;
    background-size: cover;
    min-height: 600px;
    margin-bottom: -10px;
    background-position: center center;
    /*
    background-image: url('/sites/default/files/images/museosygalerias/polivalente.jpg') !important;
    */
  }
  .bloque2totheleft .galeria-img img {
    width: 100%;
    min-height: 600px;
  }
.bloque2totheleft .historia-galeria {
    padding: 2%;
    display: flex;
    flex-wrap: wrap;
    box-shadow: -7px 8px 21px 0px rgba(0,0,0,0.66);
-webkit-box-shadow: -7px 8px 21px 0px rgba(0,0,0,0.66);
-moz-box-shadow: -7px 8px 21px 0px rgba(0,0,0,0.66);
  }
  .historia-galeria span.yellow { font-size: .8em;}
  .bloque2totheleft p,
  .bloquetothecenter p {
    text-align: justify;
    padding: 0 2%;
  }

  .bloquetothecenter {  background: #e1d5c8;    padding: 1%; color: #222;  }
  .bloquetothecenter h4 { padding: 2% 0 0; }

  .socialnetworks .social, .socialnetworks .social li, .socialnetworks .social li a {
    position: relative;
    color: white;
    padding: 0px;
  }

  @media only screen and (min-width: 1551px) and (max-width: 1750px) {
   
  }
  @media only screen and (min-width: 1201px) and (max-width: 1550px) {
    
  }
  @media only screen and (max-width: 1200px) {
    .imagenprincipal-container {
      height: auto;
    }
    .expoactual {    font-size: 1em; margin: 0 4%;   }

    .bloque2totheleft {
      display: block !important;
      position: relative !important;
    }
    .bloque2totheleft .historia-galeria {
      background: black;
    }
    .bloque2totheleft .galeria-img,
    .bloque2totheleft .galeria-img img {
      min-height: auto;
    }
    .bannerprincipal h1 {
      left: 4%;
      font-size: 10em;
    }
    .banner-text h2 {
      font-size: 3.8em;
    }  
	 .infogaleriasug-container {	max-width: 100%;	padding: 0px ;	  }
   .infogaleriasug  {     margin-top: 0;   background-color: #c1c1c1; }
   .infogaleriasug .info-box { border-radius: 0px;  }
  }

  @media only screen and (min-width: 992px) and (max-width: 1200px) {
  }

  @media only screen and (max-width: 1140px) {   
  }

  @media screen and (max-width: 991px){
    .bannerprincipal {
      min-height: auto;
    }
   
    /* .infogaleriasug-wrapcol{
         width: calc(100% + 30px); 
    }
   
    .infogaleriasug-wrapcol{
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        width: 100%;
        flex-wrap: wrap;
    } */
  }

  @media (min-width: 768px) and (max-width: 991px) {
    .bloque2totheleft .historia-galeria  {
      padding: 30px;
    }
  }

  @media only screen and (max-width: 767px) {
    
    .bannerprincipal h1 {
      z-index: 2 !important;
    }
    .banner-text {
      margin: 0;
      padding: 0;
      position: absolute;
      z-index: 3;
    }
    .banner-text h2 {
      margin: 5% 2% 0;
    font-size: 3em;
    }
    .banner-text h3 {
      font-size: 1.2em;
      margin-left: 10%;
    }
    .bloque2totheleft .historia-galeria  {
    padding: 30px;
    }
    .banner-text {
    width: 70%;
    overflow: visible;
    }
  }

#vista-galeriasug a.colorboxgallery img {margin-top: 0em;}
.galeriafotos {  background: #f8f8f8;    padding: 2% 0;  }
  .galeriafotos .title {
  text-align: center;
  margin-bottom: 2em;
  display: inline-block;
  width: 100%; 
  }
  .galeriafotos hr {
  background: #f19100 none repeat scroll 0 0;
  border: medium none;
  height: 2px;
  width: 100px;
  margin: 0 auto 2% auto;
  }
  .galeriafotos p {color: #777;}



/**--- gsap - bloques---**/
/* gsap-section1 */
.gsap-section1 .reverse-row { align-items: flex-start; }

/* gsap-section2 */
.project-box {
  width: 100%;
  height: 334px;
  position: relative;
}
.project-content {
  padding: 2px 32px;
  position: relative;
  z-index: 1;
}
.project-content::before,
.project-content::after {
  position: absolute;
  content: "";
  height: 2px;
  width: 130px;
  background: var(--color-3);
}
.project-content::after {
  right: 14px;
  bottom: 3px;
}
.project-content::before {
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
}

/* gsap-section3 */
.gsap-section3 {
  position: relative;
}
.gsap-section3 .theme-dark h2.title {
  color: rgb(255 255 255 / 8%);
}
.gsap-section1 h2.title,
.gsap-section2 h2.title,
.gsap-section3 h2.title {
  font-family: 'josefin-bold', sans-serif;
  letter-spacing:-8px ;
  font-size: 18em;
  line-height: 1;
  color: rgba(0, 0, 0, 0.03);
  text-transform: uppercase;
  position: absolute;
  top: -40px;
  left: 0;
  width: 100%;
  user-select: none;
  pointer-events: none;
  display: block;
  z-index: 1;
}
.gsap-section3-box {
  position: relative;
  width: 100%;
  height: auto;
  z-index: 2;
}
.embeddark{
  background: black;
  padding: 1% 10%;
}
.box-border {
  position: relative;
  border: 16px solid #bc967657;
  padding: 2%;

}
.gsap-section3 .descriptionimage {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
 /* top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);*/
}
.gsap-section3 .descriptionimage img
{
  position: relative;
  width: 100%;
  height: 100%;
  background-size: cover;
}
/* CON COLOR BOX
.gsap-section3 .descriptionimage {
  display: block;
  position: relative;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
}
*/
.gsap-section3 .description {
  color: #444;
  text-align: justify;
}

.gsap-section3 .gsapimg {
  aspect-ratio: 1 / 1;
  width: 315px;
  position: absolute;
}
.gsap-section3 .gsapimg img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}
.gsap-section3 .gsapimg1 {
  top: -22%;
  left: 4%;
  z-index: 2;
}
.gsap-section3 .gsapimg2 {
  top: 12%;
  right: 6%;
}
.gsap-section3 .gsapimg3 {
  bottom: 0;
  left: 8%;
  z-index: 2;
}
.iraexpo-btn {
  margin: 0;
  padding: 17px 23px;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #fff;
  background-color: black;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  z-index: 1;
  transition: all 0.15s;
  user-select: none;
}
.iraexpo-btn::before {
  left: 6px;
  top: 6px;
  position: absolute;
  content: "";
  border: 1px solid #b28d6d;
  height: 100%;
  width: 100%;
  transition: all 0.15s;
  z-index: -1;
}
.iraexpo-btn img {
  width: 24px;
}
.img-fluid {
  max-width: 100%;
  height: auto;
}
/**--- fin gsap - bloques---**/

/********** GALERÍAS UG ************/
/********** END VISTA/PAGE - GALERÍAS UG - EXPO DISPONIBLE ************/	






/********** VISTA/PAGE - FIC, PROGRAMA ************/	
#page-ficprograma {/* background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);*/
	/*background:linear-gradient(-45deg, #ff460e, #0c2544, #dc8908,#0c2544, #f49c12, #ff9f00); */
  /*background: linear-gradient(-45deg, #92e4c9, #e6e2a1, #f3f1eff5,#e2aa82c7, #f2efe9);*/
  background: black;
    background-size: auto;
  background-size: 100% 800%;
  animation: gradient 15s ease infinite;
    background-size: 400% 400%;
	animation: gradient 15s ease infinite;
    -webkit-transform: translateZ( 45px );
    -moz-transform: translateZ( 45px );
    -o-transform: translateZ( 45px );
    transform: translateZ( 45px );
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -o-transition: .4s;
    transition: .4s;
    overflow: hidden;
	}

#page-ficprograma .item-evento { border: 1px solid #debb2733;}
#page-ficprograma .fondo-page   { height: auto; }
/*
#page-ficprograma .fondo-page .overlay {    
 
    background-image: -webkit-radial-gradient(circle 1000px at center, transparent 0%, #85d5cf 400%);
    background-image: -moz-radial-gradient(circle 1000px at center, transparent 0%, #85d5cf 400%);
    background-image: -o-radial-gradient(circle 1000px at center, transparent 0%, #85d5cf 400%);
     background-image: radial-gradient(circle 1000px at center, transparent 0%, #85d5cf 400%);
     height: 100%;
     margin: 0;
     background-repeat: no-repeat;
      background-attachment: fixed;
      height: 100%; position: absolute;
      width: 100%;  }
*/
#page-ficprograma .fondo-page .wrapp-gradient {
    
    background-image: url('../images/front/bg_fic.png') !important;
    background: black;
    background-position: center !important;
    background-repeat: no-repeat !important;
    position: absolute;
    width:100%;
	background-size: cover;
    height: 1250px;
    /*
 background-image: -webkit-linear-gradient(  360deg, rgb(10, 10, 10), rgba(32, 119, 208,  0%) 50%);
 background-image: -moz-linear-gradient(  360deg, rgb(10, 10, 10), rgba(32, 119, 208,  0%) 50%);
 background-image: -o-linear-gradient(  360deg, rgb(10, 10, 10), rgba(32, 119, 208,  0%) 50%);
 background-image:  linear-gradient(  360deg, rgb(10, 10, 10), rgba(32, 119, 208,  0%) 50%);*/
      }


#page-ficprograma .views-exposed-form {  background: #092820;  }

#page-ficprograma:before,
#page-ficprograma .fondo-page .wrapp-gradient:before {  content: '';  position: absolute; }
#page-ficprograma .text-section h4  { color: black;}   


#page-ficprograma .views-element-container {z-index: 1; position: relative;}

#papel-picado{
position: absolute;
top: 0;
bottom: 0;
width: 100%;
max-width: 100%;
height: 100vh;
z-index: 1;
transform-style: preserve-3d;
overflow: hidden;
bottom: 0;

}

/*
.falling-leaves {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  max-width: 100%;
  height: 100vh; 
  z-index: 0;
  transform-style: preserve-3d;
  overflow: hidden;
  bottom: 0;
  left: 50%;
}

.leaf-scene {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  transform-style: preserve-3d;
}
.leaf-scene div {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background: url('../images/svgs/leaf.svg') no-repeat;
  background-size: 100%;
  transform-style: preserve-3d;
  backface-visibility: visible;
}
*/


/*
.particles{
    width: 100%;
    height: 100vh; 
       top: 0;
    bottom: 0;
    position: absolute;
    z-index: 0;
    transform-style: preserve-3d;
    overflow: hidden;
}
.confetti {
    position: absolute;
    z-index: 1;
    top: -10px;
    border-radius: 0%;
}
.confetti--animation-slow {
    animation: confetti-slow 6.25s linear 1 forwards;
}
.confetti--animation-medium {
    animation: confetti-medium 3.75s linear 1 forwards;
}
.confetti--animation-fast {
    animation: confetti-fast 3.25s linear 1 forwards;
}
@keyframes confetti-slow {
    0% { transform: translate3d(0, 0, 0) rotateX(0) rotateY(0); }
    100% { transform: translate3d(25px, 105vh, 0) rotateX(360deg) rotateY(180deg); }
  }
@keyframes confetti-medium {
    0% { transform: translate3d(0, 0, 0) rotateX(0) rotateY(0); }
    100% { transform: translate3d(100px, 105vh, 0) rotateX(100deg) rotateY(360deg); }
  }
@keyframes confetti-fast {
    0% { transform: translate3d(0, 0, 0) rotateX(0) rotateY(0); } 
    100% { transform: translate3d(-50px, 105vh, 0) rotateX(10deg) rotateY(250deg); }
  }

  */

/*
.particles{
    width: 100%;
    height: 100vh; 
       top: 0;
    bottom: 0;
    position: absolute;
    z-index: 1;
    transform-style: preserve-3d;
    overflow: hidden;
}
@keyframes move {
    0%{
        transform: translateY(0);
        opacity: 0;
    }
    10% ,90%{
        opacity: 1;
    }
    100%{
        transform: translateY(45vw);
        opacity: 0;
    }
}
@keyframes rotate-container {
    0%{
        transform:
            perspective(1000px)
            translateZ(0px);
    }
    100%{
        transform:
            perspective(1000px)
            translateZ(150px);
    }
}
*/

/**************** FIN VISTA/PAGE - FIC, PROGRAMA ****************/



/********** VISTA/PAGE - UNIVERSIADA, PROGRAMA ************/	
#cubeanimation {position: relative;z-index: 0;}
#page-universiadaprograma {background: #0a66b9b8}
#page-universiadaprograma .views-element-container {z-index: 1; position: relative;}
#page-universiadaprograma canvas {position: absolute;
    top: 0;}

#page-universiadaprograma    .myVideo,
#page-saladeexpos    .myVideo,
#page-saladecine    .myVideo {
        position: absolute;
        right: 0;
        bottom: 0;
        min-width: 100%;
        min-height: 100%;
        z-index: -1;

    }
#page-universiadaprograma .fondo-page {
    position: absolute;
    width: 100%;
	background-size: cover;
    height: 1250px;
    contain: layout;
}

#page-universiadaprograma .overlay {  background-color: rgba(0, 0, 0, 0.2);
    height: 100%; position: relative;  }

#page-universiadaprograma  .wrapp-gradient {
    background-image: -webkit-radial-gradient(circle 810px at center, transparent 0%, #67b1f3b8 90%);
    background-image: -moz-radial-gradient(circle 810px at center, transparent 0%, #67b1f3b8 90%);
    background-image: -o-radial-gradient(circle 810px at center, transparent 0%, #67b1f3b8 90%);
     background-image: radial-gradient(circle 810px at center, transparent 0%, #67b1f3b8 90%);
     height: 100%;
     
    }

#page-universiadaprograma:before,
#page-universiadaprograma .wrapp-gradient:before { content: '';  position: absolute;
}

/**************** FIN VISTA/PAGE - UNIVERSIADA, PROGRAMA ****************/