:root{
  /*colores*/
    --color-menuhoriz-opc1: firebrick;
    --color-menuhoriz-opc2: darkorange;
    --color-menuhoriz-opc3: goldenrod;
    --color-menuhoriz-opc4: green;
    --color-menuhoriz-opc5: teal;
    --color-menuhoriz-opc6: orchid;
    --color-menuhoriz-opc7: darkmagenta;
  
    --color-menuvert-opc1: lightsalmon;
    --color-menuvert-opc2: PeachPuff;
    --color-menuvert-opc3: LemonChiffon;
    --color-menuvert-opc4: palegreen;
    --color-menuvert-opc5: Aquamarine;
    --color-menuvert-opc6: LightPink;
    --color-menuvert-opc7: plum;

}
/* grandes bloques */

body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	line-height: 18px;
	color: #333;
	background-color: #fff;
}
.container > *{overflow:hidden;}
#logo{
        grid-area: logo;background: url("../images/logo.png") no-repeat;background-position: center center; background-size: contain;  
}
#titulo{
  grid-area: titulo;
}
nav{
        grid-area: nav;/*justify-content:stretch;*/
}
main{
        grid-area: main;justify-content:stretch;
}
aside#derecha{
        grid-area:derecha;
}
aside#menuvert{
        grid-area: menuvert;
}
footer.footer{
    grid-area:footer;
}
main{background:#ccc;}

aside#derecha div{background:#fff;}
footer, .footer, footer p{
    margin:0;padding:0;text-align:center
}
footer p{
    color:cyan;
}
#top > div, header, header div, header div a{margin:0; padding:0;}
#titulo p{ color:#fff;
        font-size: 4vw;
    margin:0;line-height: 90%;
	text-align:center;
  	font-style:normal;font-family:Calibri;text-shadow: 0.1em 0.1em 0.5em red;
    
  animation-name: parpadeo;
  animation-duration: 4s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;

  -webkit-animation-name:parpadeo;
  -webkit-animation-duration: 4s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
}

@-moz-keyframes parpadeo{  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

@-webkit-keyframes parpadeo {  
  0% { opacity: 1.0; }
  50% { opacity: 0.3; }
   100% { opacity: 1.0; }
}
@keyframes parpadeo {  
  0% { opacity: 1.0; }
   50% { opacity: 0.3; }
  100% { opacity: 1.0; }
}
#titulo p em {
  		font-size:.75em;
}
div[class*="mhopc"]{color:#fff;}
nav ul{margin:0;padding:0;width:100%;height:100%; display:grid;grid-template-columns: repeat(7, 1fr);
        text-decoration: none; list-style: none;overflow:show;grid-gap:0 1px;
    }
nav ul li{border-radius:8px 8px 0 0;padding:2px; }
nav ul li:nth-child(1),.mhopc1, .item-pagemhopc1{background: var(--color-menuhoriz-opc1);}
nav ul li:nth-child(2),.mhopc2, .item-pagemhopc2{background: var(--color-menuhoriz-opc2);}
nav ul li:nth-child(3),.mhopc3, .item-pagemhopc3{background: var(--color-menuhoriz-opc3);}
nav ul li:nth-child(4),.mhopc4, .item-pagemhopc4{background: var(--color-menuhoriz-opc4);}
nav ul li:nth-child(5),.mhopc5, .item-pagemhopc5{background: var(--color-menuhoriz-opc5);}
nav ul li:nth-child(6),.mhopc6, .item-pagemhopc6{background: var(--color-menuhoriz-opc6);}
nav ul li:nth-child(7),.mhopc7, .item-pagemhopc7{background: var(--color-menuhoriz-opc7);}
nav ul li a{display:block;text-decoration:none;
             text-align:center;padding:2.7px;font-size:2.6vw;color:#fff;}
nav ul li a:hover{color:pink;font-weight:bolder;}

.sidebar-nav ul{margin:0;padding:0;width:100%;height:100% !important; display:grid;grid-template-rows: repeat(7, fr);
        height:auto;text-decoration: none; list-style: none;grid-gap:0 1px;
    }
.sidebar-nav ul li{border-radius:0 8px 8px 0;padding:2px;display:table }
.sidebar-nav ul li:nth-child(1),.mvopc1 #art{background: var(--color-menuvert-opc1);}
.sidebar-nav ul li:nth-child(2),.mvopc2 #art{background: var(--color-menuvert-opc2);}
.sidebar-nav ul li:nth-child(3),.mvopc3 #art{background: var(--color-menuvert-opc3);}
.sidebar-nav ul li:nth-child(4),.mvopc4 #art{background: var(--color-menuvert-opc4);}
.sidebar-nav ul li:nth-child(5),.mvopc5 #art{background: var(--color-menuvert-opc5);}
.sidebar-nav ul li:nth-child(6),.mvopc6 #art{background: var(--color-menuvert-opc6);}
.sidebar-nav ul li:nth-child(7),.mvopc7 #art{background: var(--color-menuvert-opc7);}
.sidebar-nav ul li a{display:table-cell;text-decoration:none;vertical-align:middle;
             text-align:center;padding:2px;font-size:1.35vw}
.sidebar-nav ul li:hover{font-weight:bolder;}
.sidebar-nav ul li a:hover{color:#fff;}
/*clases para cuadros flex*/
.flexvert{display:flex;flex-direction:column;}
.flexhor{display:flex;flex-flow:row nowrap;}
/**/
div[class*="item-page"],.com-content-article,.page-header,.com-content-article__body,.page-header h1, .com-content-article__body #art {margin:0;padding:0;}
#art {height:auto;min-height:100%} 
#art p{text-align:justify;}
.page-header h1{padding:13px 0;text-align:center;color:#fff;}
.com-content-article__body{width:100%;height:68vh;overflow-x:hidden; overflow-y:auto;direction:rtl;}

.com-content-article.sin-scroll .com-content-article__body{overflow:visible !important;direction:ltr !important;}

.page-header + .com-content-article__body{height:60vh;}
.com-content-article__body #art{direction:ltr;padding:25px;color:#000;}
#preportada{display:table;height:100%;width:100%;margin:0;padding:0;direction:ltr;vertical-align:middle; border-collapse: separate; border-spacing: 60px;}
#portada{display:table-cell;border:4px double;text-align:center;font-family:Serif,Times New Roman, Garamond;font-size:3.5vw;line-height:normal;vertical-align:middle;font-style:italic;} 

/* Tablas con divs */
#tabla {
    display: table;
    table-layout:fixed;position:relative;top:0;left:0;
    width: 96%;
    height:51vh;
    text-align: center;
    margin: 0 auto !important;background:transparent;
}
/* los enlaces como celdas sustituyendo a los div*/
.linea {
    	display: table-row;
}
.clareada{background:rgba(255,255,255,0.3);
	}
.columna {
    display: table-cell;
    vertical-align: middle;
    padding: 0;
}
.titulos{background:#000;
	opacity:.3;color:#fff;font-weight:bold;
}
.titulos .columna{border:1px solid #fff;}
.orden{width:5% !important}
#tabla > .linea > a.columna {text-decoration:none;}
/* para tablas a cuatro columnas 2 de ellas de orden */
.columna {
	width:45%
}
.linea a:hover{background:#fff;opacity:.5;
	color:#000;font-weight:bold;text-decoration:none;}

/*nuevo ampliación imagenes*/
.capasombra{
  background-color: rgba(0,0,0,.8);
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  opacity:0;
  pointer-events:none;
  transition: all 1s;z-index:100 !important;
}
a img.minima 
 {
height:120px;
}
div:target
	{  opacity:1;
  pointer-events:auto;}


.cajaluz{width:100%;height:100%;display:flex; flex-flow:row nowrap;align-items:center;justify-content:space-around;
  
}

.cajaluz  figure{
			margin:0;padding:5px;
			text-align:center;			 
			background-color:#E0FFFF;
			border-radius:10px;
}
.cajaluz .areaimg{position:relative;top:0;left:0;bottom:0;right:0;}
.areaimg img{max-height:550px}
.areaimg > figcaption,
 a[href*="#foto"] + figcaption{font-size:.75em;text-align:center}
.sobreareaimg {position:absolute;top:0;left:0;bottom:0;right:0;z-index:100;display:block;width:100%;height:100%;
						opacity:0}

.sobreareaimg:hover{opacity:.5;}

.sobreareaimg p{display:block;width:100%;background:none !important;text-align:center !important;}
.sobreareaimg p a{width:2.25em;font-family:verdana;font-weight:bold;background:red;
                  border-radius:1em;color:#fff;padding:0 .25em;text-decoration:none;}

.sobreareaimg p.cerrar a{font-size:1.25em;}
.sobreareaimg :is(.ant,.sig) {margin-top:30%;width:10%;font-size:1.75em}
.sobreareaimg p.ant {float:left;margin-left:5px}
.sobreareaimg p.sig {float:right;margin-right:5px}
/*fin nuevo ampliación imágenes*/


/* Para menu de pestañas */
/*
#nav-tabs{
	position:absolute; 
	top:0;
	left:0; 
	padding:0;
	display:block;
	width:100%;
	height:calc(8vh + 1px);
	direction:ltr;
}
#nav-tabs ul {
	list-style:none;
	width:96%;
	margin:0 auto; 
	padding:0; 
}
#nav-tabs ul li{
	display:inline-block;
	margin:0px 3px 0 0;;
	text-align:center;
	padding:0 5px;
	border-bottom:0;
}
#nav-tabs ul li a {
  text-decoration: none; display:block;
	border:1px solid #ccc;
	-webkit-border-top-right-radius: 15px;
	-webkit-border-top-left-radius: 15px;
   -moz-border-top-left-radius: 15px
   -moz-border-top-right-radius: 15px; 
   border-top-left-radius: 15px;
   border-top-right-radius: 15px;
	font-size:1.4rem;
	line-height:7.8vh;
	border-bottom:1px solid #ccc;
	background:#fff;padding:0 5px;
}
#nav-tabs ul li a:hover,  #nav-tabs ul li a:active,  #nav-tabs ul li a:focus{
  background-color:#efefef;color:maroon;border-bottom:1px solid #fff;
}

div[id^="tab"]  {
position:absolute;top:8.1vh;left:15px; 
 display:block;width:96%;height:51vh; overflow-y:auto;padding:0; margin:0; /*direction:ltr*/;background-color:#fff; /*direction:rtl;*//*
}
#tab1{display:table !important;table-layout:fixed; }
#tab1:target,#tab2:target,#tab3:target, #tab4:target,#tab5:target, #tab6:target,#tab7:target {z-index:10}
div[id^="tab"] .subtab{display:table-cell;vertical-align:middle;text-align:center;direction:ltr;}
#tab1{z-index:8}
#tab2{z-index:2}
#tab3{z-index:3}
#tab4{z-index:4}
#tab5{z-index:5}
#tab6{z-index:6}
#tab7{z-index:7}*/
/*fin para menu pestañas*/

/*flotaciones*/
.izq {float:left;margin:5px 15px 10px 0}
.dcha {float:right;margin:5px 0 10px 15px}
.figizq {float:left;background:#fff;margin:16px 16px 0 0;padding:8px;border:8px solid#eee;}
.figdcha {float:right;background:#fff;margin:16px 0 0 16px;padding:8px;border:8px solid#eee;}
.figcent img{background:#fff;margin:16px 0 0 16px;padding:8px 8px 20px 8px;border:8px solid#eee;}
.figcent{text-align:center;margin:auto;}
.figcent figcaption{ background:none;margin:-25px 0 25px 0}
.figcent img.oro{background:#fff;margin:16px 0 0 16px;padding:8px;border:8px inset#ffbf00;}
.oro{border:8px inset#ffbf00;}
/**/

/*TOOLTIP:
Ejemplo en Html 
<div class="tooltip top">Texto que disparará el tooltip al posar el ratón sobre él
    <span class="tiptext">Texto del tooltip</span>
</div>
*/
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted maroon;
}

.tooltip .tiptext {
    visibility: hidden;
    width: 120px;
    background-color: blue;
    color: #fff;
    text-align: center;
    border-radius: 3px;
    padding: 6px 0;
    position: absolute;
    z-index: 1;
    box-shadow: 0 5px 10px rgba(0, 0, 255, 0.2);
}
.tooltip .tiptext::after {
    content: "";
    position: absolute;
    border-width: 5px;
    border-style: solid; 
}
.tooltip:hover .tiptext {
    visibility: visible;
}
/*CSS para Tooltip arriba*/
.tooltip.top .tiptext{
    margin-left: -60px;
    bottom: 150%;
    left: 50%;
}
.tooltip.top .tiptext::after{
    margin-left: -5px;
    top: 100%;
    left: 50%;
    border-color: blue transparent transparent transparent;
}
/*CSS para Tooltip abajo*/
.tooltip.bottom .tiptext{
    margin-left: -60px;
    top: 150%;
    left: 50%;
}
.tooltip.bottom .tiptext::after{
    margin-left: -5px;
    bottom: 100%;
    left: 50%;
    border-color: transparent transparent blue transparent;
}
/*CSS para Tooltip izquierda*/
.tooltip.left .tiptext{
    top: -5px;
    right: 110%;
}
.tooltip.left .tiptext::after{
    margin-top: -5px;
    top: 50%;
    left: 100%;
    border-color: transparent transparent transparent blue;
}
/*CSS para Tooltip derecha*/
.tooltip.right .tiptext{
    top: -5px;
    left: 110%;
}
.tooltip.right .tiptext::after{
    margin-top: -5px;
    top: 50%;
    right: 100%;
    border-color: transparent blue transparent transparent;
}
/*tooltip sobre imagenes*/
.tooltipimg {
    position: relative;
    display: inline;
}
.tooltipimg img{border:0;padding:0;margin:0;}
.tooltipimg .tiptext {
    visibility: hidden;
    width:1000px; 
    max-width: 380px;
    font-size:1rem;
    background-color: blue;
    color: #fff;
    text-align: center;
    border-radius: 3px;
    padding: 6px 0;
    position: absolute;
    z-index: 1;
    box-shadow: 0 5px 10px rgba(0, 0, 255, 0.2);
}
.tooltipimg .tiptext::after {
    content: "";
    position: absolute;
    border-width: 5px;
    border-style: solid; 
}
.tooltipimg:hover .tiptext {
    visibility: visible;
}
/*CSS para Tooltip arriba*/
.tooltipimg.top .tiptext{
    margin-left: -60px;
    bottom: 150%;
    left: 50%;
}
.tooltipimg.top .tiptext::after{
    margin-left: -5px;
    top: 100%;
    left: 50%;
    border-color: blue transparent transparent transparent;
}
/*CSS para Tooltip abajo*/
.tooltipimg.bottom .tiptext{
    margin-left: -60px;
    top: 150%;
    left: 50%;
}
.tooltipimg.bottom .tiptext::after{
    margin-left: -5px;
    bottom: 100%;
    left: 50%;
    border-color: transparent transparent blue transparent;
}
/*CSS para Tooltip izquierda*/
.tooltipimg.left .tiptext{
    top: -5px;
    right: 110%;
}
.tooltipimg.left .tiptext::after{
    margin-top: -5px;
    top: 50%;
    left: 100%;
    border-color: transparent transparent transparent blue;
}
/*CSS para Tooltip derecha*/
.tooltipimg.right .tiptext{
    top: -5px;
    left: 110%;
}
.tooltipimg.right .tiptext::after{
    margin-top: -5px;
    top: 50%;
    right: 100%;
    border-color: transparent blue transparent transparent;
}

/**/
/*fin tooltip*/
/*menutab*/
.contenedortab{	
	position:relative;top:0;left:0;display:block;width:98%;height:auto;
	/*max-width:120em;*/
	background-color: transparent;
	padding:0;margin:auto;
}
.contenedortab .ul{
	width:100%;
	background-color: transparent;
	display:flex !important;
	flex-flow:row nowrap;
	justify-content:flex-start;
	align-items:flex-stretch;
	list-style-type:none;
	padding:0;
	margin:0;
}
.contenedortab .li{
	background-color: rgb(245, 245, 245);
	padding:1em;
	margin:0 2px 0 0;
	border:1px solid #aaa;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
	transition:all .5s ease;
    font-size:12px;
}
.contenedortab .li:hover{cursor:pointer;}
.contenedortab .li.activo{
	background-color: #fff ;
	color:maroon;
	border-bottom:0;
}
.contenedortab .subcontenedor{
	background-color: transparent;
	position:relative;
    width:100%;
	height:48vh;
	padding:0;
	margin:0;
    overflow-y:auto;
    direction:rtl;
}
.contenedortab .bloque{
	background-color: rgb(245, 245, 245);
	box-sizing:border-box;
	margin:0;
	padding: 0 1em;
	position:absolute;
	top:0;
	/*opacity:0;*/ display:none;
	transition:all .5s ease;
    min-height:47.5vh;
    direction:ltr;width:100%;
}
.contenedortab .bloque.activo{
	background-color: #fff;
	/*opacity:1;*/display:block;
}


/*ficha humilladeros*/
.botonfijo {  font-family: Arial;
  color: #ffffff;
  font-size: 18px;
  padding: 6px;
  text-decoration: none;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  -webkit-box-shadow: 0px 1px 3px #96b891;
  -moz-box-shadow: 0px 1px 3px #96b891;
  box-shadow: 0px 1px 3px #96b891;
  text-shadow: 1px 1px 3px #666666;
  border: solid #07d615 1px;
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#45e007), to(#3a9e08));
  background: -moz-linear-gradient(top, #45e007, #3a9e08);
  -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#45e007, endColorStr=#3a9e08);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#45e007, endColorStr=#3a9e08);
  display:inline-block; /* IE is so silly */
}
.botonfijo:hover {
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#fff305), to(#d9bf14));
  background: -moz-linear-gradient(top, #fff305, #d9bf14)
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#45e007, endColorstr=#3a9e08);
}

#fichap1,#fichap2{display:flex;flex-flow:row wrap;justify-content:space-around;border:1px solid #fff;border-radius:8px;}
#fichap2{margin-top:5px;}

#fichap1 .fil, #fichap2 .fil{margin:5px}
#fichap1 .fil:first-child .celd:first-child::after {content: "Localidad/Lugar";font-weight:bold;}
#fichap1 .fil:first-child .celd:nth-child(3)::after {content: "Municipio";font-weight:bold;}
#fichap1 .fil:nth-child(2) .celd:nth-child(1)::after {content: "Coordenadas geográficas";font-weight:bold;}
#fichap1 .fil:nth-child(2) .celd:nth-child(3)::after {content: "Tipología";font-weight:bold;}

#fichap2 .fil .celd div{display:flex;flex-flow:row wrap;justify-content:center;gap:10px;}
#fichap2 .fil:nth-child(1) .celd:nth-child(1) h4::after {content: "GALERÍA FOTOGRÁFICA";}
#fichap2 .fil .celd div a img {height:105px !important;}
#fichap3 {display:block;margin:5px auto;width:100%;border:1px solid #fff;border-radius:8px;}
#fichap3 div::before {content:"MAPA DE LOCALIZACIÓN"; text-align:center;padding-left:25px;}

/*via crucis*/
  
  .viacrucis{width:98%; position:relative;top:0;margin:0; padding:0; }
  #viacrucis{width:100%;height:6vh;background:#eee; display:grid; grid-template-columns:14% 26% 60%; 
    grid-template-rows:  1fr 1fr;/*justify-items:center;align-items:center;*/
    grid-template-areas: "leyenda leyenda leyenda" "titulo1 titulo2 titulo3";
    }
  #viacrucis .leyenda{grid-area:leyenda; background:#444;color:#eee;padding-left:10px;text-align:center;}
  #viacrucis .titulo1{grid-area:titulo1;} 
  #viacrucis .titulo2{grid-area:titulo2}
  #viacrucis .titulo3{grid-area:titulo3}
  #viacrucis .titulo1, #viacrucis .titulo2, #viacrucis .titulo3{background:#888;color:#111;padding-left:10px;text-align:center;}

  #viacrucis2 {width:100%; height:54vh; overflow-y:auto; direction:rtl; text-align:center; }
  #viacrucis2 > #contenido {width:100%; direction:ltr; display:grid; grid-template-columns:14% 26% 60%;justify-content: center;align-content:center;}
  #viacrucis2 #contenido div {border-right:1px solid #FFFAF0;border-bottom:1px solid #FFFAF0;}

#viacrucis2 #contenido div:nth-child(3n) {background:rgb(247, 215, 174);display:grid;grid-template-columns:repeat(3, 1fr);align-items:center;justify-items:center;align-content:center;justify-content:center;}
  
  #viacrucis2 #contenido div a img { max-width:100%;max-height:150px;}
  #viacrucis2 #contenido #final {grid-column:1 / span 3;grid-row: 16;text-align:center;}
  
   .viacrucis  .modal {
    background-color: rgba(0,0,0,.8);
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    opacity:0;
    pointer-events:none;
    transition: all 1s;
      display:flex;
      align-items: center;
      justify-content: center;
      z-index:1000;
  }
  .viacrucis .modal:target
  { 
    opacity:1;
    pointer-events:auto;
  }
  .viacrucis .modal .imagen img{max-height:90vh}
  .viacrucis .modal .imagen a.cerrar{
          display:block;margin:0;width:2rem;padding:0;border-radius:1rem;
          background:red;color:#fff;text-decoration:none;
          font-family:arial;font-size:1.4rem;font-weight:bold;
          position:relative;top:0px;left:49%;opacity:.5;text-align:center;
  }
  .viacrucis .modal .imagen a.cerrar:hover{opacity:1;}
  .viacrucis .modal .imagen p {position:relative width:100%; color:#fff; text-align:center;margin:auto; opacity:1;}
  .viacrucis .modal .imagen p span{color:#ffffff !important;}
  
/*Cofradías y pasos*/
.lasalud {background: linear-gradient(to bottom, #AB66AB, #634698);color:#fcf;}
.lapaloma{ background: linear-gradient(to bottom, #820000, #C70000);color:pink;}
.laoracion{background: linear-gradient(to bottom, #A275B4 , #5B2C6F);color:#ddd;}
.esperanza{background: linear-gradient(to bottom, #1E5B0E, #0F1D0E);color:#ccc;}
.agonia{background: linear-gradient(to bottom, #70191B, #E14A3B);color:#bbb;}
.pasion{background: linear-gradient(to bottom, #800080, #9D52EE);color:#bbb;}
.inmaculada{background: linear-gradient(to bottom, #000044, #800080);color:#bbb;}
.descendimiento{background: linear-gradient(to bottom, #442222,	#DA70D6);color:#bbb;}
.amor{background: linear-gradient(to bottom, purple, #8A2BE2);color:#bbb;}
.dolores{background: linear-gradient(to bottom, #551144,#000000);color:#bbb;}
.merced{background: linear-gradient(to bottom, #002244,	#193d21);color:#bbb;}
.stoentierro{background: linear-gradient(to bottom, #001133,#222222);color:red;}
#fichacofr {font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif;font-size:.8em;
               width:96%;  display:flex;  margin:auto;flex-flow:row no-wrap; margin-top:10px;
              border:4px double #fff;
}
#fichacofr div p b{display:inline-block;background:#000; border-radius:3px;padding:4px;}
#fichacofr > div {display:flex; flex-direction:column; justify-content:center; }
#fichacofr > div {margin: 7px;}
#fichacofr > div:nth-child(1) {width: 195px; }
#fichacofr > div:nth-child(2) {width: calc(100% - 432px) ;text-align:justify;  }
#fichacofr > div:nth-child(3) {width: 237px; }
#fichacofr > div > img,  #fichacofr > div img + p {margin: 7px auto; color:#fff;}
#fichacofr + p {margin-bottom:30px}
#fichacofr + p a:nth:child(1) {text-align:left;float:left}
#fichacofr + p a:nth:child(2) {text-align:right;float:right}


.domingoramos{background: linear-gradient(to top, orange, #FFFACD);color:#333;}


/*Pasión Castro Urdiales- galería de beatos*/
.galeriacomun {
    width:98% ;
    margin: auto;
    box-sizing: border-box;
    list-style-type: none;
    padding: 20px;
    display:flex;
    flex-flow: row wrap;
    background:#444;
}
.galeriacomun li {
    padding: 5px;
}
.castroh img{
    width: 140px;
    height:87px;
}
.castrov img{
    width: 100px;
    height:160px;
}
.beatos img{
    width: 110px;
    height:150px;
}
.virgmarh img{
    width: 150px;
    height:100px;
}
.virgmarv img{
    width: 100px;
    height:150px;
}
.ampl {
    position:fixed;
    left:0;top:0;
    width:100%;
    height:100%;
    background:rgba(0, 0, 0, .8);
    display:flex;
    flex-flow:column;
    justify-content: center;
    align-items: center;
    display:none;
    z-index:1000;
}
#castroh .ampl div{
    display:block;
    width:400px;
    height:250px;
    }
#castrov .ampl div{
    display:block;
    width:250px;
    height:400px;
    }
#beatos .ampl div{
    display:block;
    width:350px;
    height:485px;
    }
#ih .ampl div{
    display:block;
    width:525px;
    height:350px;
    }
#iv .ampl div{
    display:block;
    width:350px;
    height:525px;
    }
div.ampl:target {
    display:flex;
}
.ampl .cerrar{
  display:block;
}
.ampl :is(.cerrar, .anter, .poster)
/*
.ampl .cerrar, .ampl .anter, .ampl .poster*/
{
    text-decoration: none;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: bold;
    background-color: red;
    color:white;
    opacity: 0.4;
    width:25px;
    height:25px;
    padding:0px;
    margin:0 auto;
    text-align:center;
    border-radius: 10px;
}
.ampl :is(.cerrar:hover, .anter:hover, .poster:hover)
/*.ampl .cerrar:hover,.ampl .anter:hover, .ampl .poster:hover*/{
  opacity:1;z-index:3000;
}
 
.ampl .anter, .ampl .poster{margin-top:220px;}
.ampl .anter   {float:left;}
.ampl .poster {float:right;}

/*flecha adelante y atrás*/
.ant-sig a:nth-child(2)::after {content:'\021e8';}
.ant-sig a:nth-child(1)::before {content:'\021e6';}
.ant-sig a:nth-child(2) {float:right;}
.ant-sig a:nth-child(1) {float:left;}
.ant-sig a {background:rgba(246,3,3,.5);border-radius:6px;padding:3px;color:red;text-decoration:none;}
.ant-sig a:hover {background:rgba(246,3,3,1);color:white;}
.ant-sig a:nth-child(3){display:block;width:33%;text-align:center;margin:auto;}

/*enlace a parroquias con trama (gride)*/
    .trama{display:grid; 
            grid-template-columns: 2fr 1fr; 
            margin:0 20px;width:99%;margin:auto;column-gap:10px; row-gap:10px;
        }
        .trama div{
                    border:1px solid #aaa;  
                    padding:8px ;
                    -webkit-border-radius:8px;
  	 				 border-radius: 8px;
                    -moz-border-radius:8px;
        }

       .trama div.titulo{ text-align:center; 
             padding:8px 0px; 
              border:solid 1px #004F72; 
               -webkit-border-radius:14px 14px 0px 0px; 
                border-radius: 14px 14px 0px 0px;                 
                -moz-border-radius-topleft:14px;
                -moz-border-radius-topright:14px;
                -moz-border-radius-bottomleft:0px; 					-
                moz-border-radius-bottomright:0px; 
                color:#E5FFFF; 
                background-color:#3BA4C7; 
                background-image: -moz-linear-gradient(top, #3BA4C7 0%, #1982A5 100%); 
                background-image: -webkit-linear-gradient(top, #3BA4C7 0%, #1982A5 100%); 
 background-image: -o-linear-gradient(top, #3BA4C7 0%, #1982A5 100%); 
 background-image: -ms-linear-gradient(top, #3BA4C7 0% ,#1982A5 100%); 
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1982A5', endColorstr='#1982A5',GradientType=0 ); 
 background-image: linear-gradient(top, #3BA4C7 0% ,#1982A5 100%);   
 -webkit-box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; 
 -moz-box-shadow: 0px 0px 2px #bababa,  inset 0px 0px 1px #ffffff;  
 box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;  
  
  }
  .trama div a:hover{
      text-decoration: none;
        padding:6px 6px; 
        border:solid 1px #004F72; 
                    -webkit-border-radius:14px;
  	 				 border-radius: 14px;
                    -moz-border-radius:14px;
 color:#E5FFFF; 
 background-color:#a2c73b; 
 background-image: -moz-linear-gradient(top, #d1be6b 0%, #90a519 100%); 
 background-image: -webkit-linear-gradient(top, #d1be6b 0%, #90a519 100%); 
 background-image: -o-linear-gradient(top, #d1be6b 0%, #90a519 100%); 
 background-image: -ms-linear-gradient(top, #d1be6b 0% ,#90a519 100%); 
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1982A5', endColorstr='#1982A5',GradientType=0 ); 
 background-image: linear-gradient(top, #d1be6b 0% ,#90a519 100%);   
 -webkit-box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; 
 -moz-box-shadow: 0px 0px 2px #bababa,  inset 0px 0px 1px #ffffff;  
 box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;   
 }
/*Tablas con grid*/
 .marcotabulado{
            display: grid;
            width:98%;
            background: #fdecfd;
        }
       /* .marcotabulado.fil2{
            grid-template-rows: repeat(2, 1fr);
        }
        .marcotabulado.fil3{
            grid-template-rows: repeat(3, 1fr);
        }
        .marcotabulado.fil4{
            grid-template-rows: repeat(4, 1fr);
        }
        .marcotabulado.fil5{
            grid-template-rows: repeat(2, 5fr);
        }
        .marcotabulado.fil6{
            grid-template-rows: repeat(6, 1fr);
        }
        .marcotabulado.fil7{
            grid-template-rows: repeat(7, 1fr);
        }
        .marcotabulado.fil8{
            grid-template-rows: repeat(8, 1fr);
        }
        .marcotabulado.fil9{
            grid-template-rows: repeat(9, 1fr);
        }
        .marcotabulado.fil10{
            grid-template-rows: repeat(10, 1fr);
        }*/
        .marcotabulado.col2{
            grid-template-columns: repeat(2, 1fr); 
        }
        .marcotabulado.col3{
            grid-template-columns: repeat(3, 1fr); 
        }
        .marcotabulado.col4{
            grid-template-columns: repeat(4, 1fr); 
        }
        .marcotabulado.col5{
            grid-template-columns: repeat(5, 1fr); 
        }
        .marcotabulado.col6{
            grid-template-columns: repeat(6, 1fr); 
        }
        .marcotabulado.col7{
            grid-template-columns: repeat(7, 1fr); 
        }
        .marcotabulado.col8{
            grid-template-columns: repeat(8, 1fr); 
        }
        .marcotabulado.col9{
            grid-template-columns: repeat(9, 1fr); 
        }
        .marcotabulado.col10{
            grid-template-columns: repeat(10, 1fr); 
        }
        .marcotabulado.col11{
            grid-template-columns: repeat(11, 1fr); 
        }
       .marcotabulado .titulogeneral{
            font-size: calc(1.1vw + 7px);
            text-align: center;display: flex;justify-content: center; align-items: center;
        }
        .col2 .titulogeneral{            
            grid-area: 1 / 1 / 1 / 3;
        }
        .col3 .titulogeneral{            
            grid-area: 1 / 1 / 1 / 4;
        }
        .col4 .titulogeneral{            
            grid-area: 1 / 1 / 1 / 5;
        }
        .col5 .titulogeneral{            
            grid-area: 1 / 1 / 1 / 6;
        }
        .col6 .titulogeneral{            
            grid-area: 1 / 1 / 1 / 7;
        }
        .col7 .titulogeneral{            
            grid-area: 1 / 1 / 1 / 8;
        }
        .col8 .titulogeneral{            
            grid-area: 1 / 1 / 1 / 9;
        }
        .col9 .titulogeneral{            
            grid-area: 1 / 1 / 1 / 10;
        }
        .col10 .titulogeneral{            
            grid-area: 1 / 1 / 1 / 11;
        }
        .col11 .titulogeneral{            
            grid-area: 1 / 1 / 1 / 12; 
        }

        .titulocolumn{
            background: maroon; color: white;
        }
        .titulocolumn, .item{
            text-align: center; display: flex;justify-content: center;align-items: center;
            border:1px solid pink;font-size: calc(0.6vw + 7.3px);
        }

/*visitor counter*/
.jsvisitcountervisitas{border:1px solid #ccc;border-radius:8px;padding:5px 2px 5px 8px}
.jsvisitcountervisitas::before{content:"VISITANTES";letter-spacing:3px;font-weight:bolder;font-size:22px;padding:5px;}
.jsvisitcountervisitas .table {text-align:center;padding-bottom:5px;border-bottom:1px solid #ccc;margin:5px 0 10px 0;}
.jsvisitcountervisitas .boxed .table_row:last-child{display:flex;flex-flow:row nowrap;}
.boxed {padding-bottom:5px;border-bottom:1px solid #ccc;margin-bottom:10px;}
.jsvisitcountervisitas .boxed .table_row span strong:after{content:"_";color:transparent;}

/*Modificaciones a la lista de categorías*/
{background-color:transparent;}
.com-content-categories.categories-list, .com-content-categories__items, .com-content-categories__items{width:80%;height:90%;background:none;margin:auto;background-color: transparent;}
.com-content-categories__item-title-wrapper, .com-content-categories__item-title{background-color:transparent;}

/*Clasificación categrorías - empleo humilladeros*/
.contenedorcomarcas{
  			direction:ltr;
            width:500px;
            margin:auto;
            display: flex; flex-direction:column;
            justify-items: center;
            align-items: center;
  			text-align:center;
            background-color: #f1f1f1;
            box-shadow:7px 13px 37px #222; opacity: .5);
        }
.contenedorcomarcas .cat1{
  width: 100%;
            height:auto;
            border-bottom: 1px solid white;text-align:center;
}
        .contenedormunicipios{
            width:94%;
            box-shadow:7px 13px 37px 7px #111;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            column-gap: 5px;
        } 
        .cat1>a{
            display: block;
            height: auto;
            text-decoration: none;
            padding: 5px;
            background-color: #4e4242;
            color:white;
            border-bottom: 1px solid white;
        }    
		.cat1>a:focus, .cat1>a:active{
  			background-color:red;
			}
        .cat1:target>a{background-color: navy;}
        .cat2{
           display:none; 
           width: 100%;
           height: auto; 
           padding:2px;
           background-color:rgb(221, 221, 183);
           margin:auto;
           border-bottom: 1px solid rgb(156, 128, 75);
        }
        .cat1:target  .cat2{
            display: flex;flex-flow: row wrap; gap:3px;
          justify-items:center;align-items:center;
        }
        .cat2 a{
            text-decoration: none;
            background-color: rgb(180, 160, 184);
            border-radius: 8px;
            border:1px solid navy;
           padding:3px;        
        }
        .cat2 a:hover{
            background-color: rgb(219, 191, 155);
        }
/*insertar video adaptable*/
.adaptavideo{
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.adaptamarco, .adaptavideo>iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/*MENU HAMBURGUESA*/
      .button-menu{
        z-index: 200;
        width: 40px;
        height: 40px;
        border: none;
        display: flex;
        background: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }
      
      .button-menu span{
        width: 37px;
        height: 4px;
        margin-bottom: 5px;
        position: relative;
        background: #444444;
        border-radius: 3px;
        transform-origin: 4px 0px;
        transition: all .2s linear;
      }
      
      .button-menu.close span {
        opacity: 1;
        transform: rotate(45deg) translate(0px, 0px);
        background: #ffffff;
      }
      
      .button-menu.close span:nth-child(2){
        transform: rotate(-45deg) translate(-8px, 5px);
      }
      
      .button-menu.close span:nth-child(3){
        display: none;
      }
      
      
      @media screen and (min-width:600px) {
        .button-menu{
          display: none;
        }