:root{

--fond0 {background:blanchedalmond}
--fond1 {background: url("media/templates/site/rosario/images/fondos/dolor.jpg")}
--fond2 {background: url("media/templates/site/rosario/images/fondos/gozo.jpg")}
--fond3 {background: url("media/templates/site/rosario/images/fondos/gloria.gif")}
--fond4 {background: url("media/templates/site/rosario/images/fondos/luz.jpg")}

/*
--img1dl{background: url("media/templates/site/rosario/images/dolor/1.jpg");}
--img2dl{background: url("media/templates/site/rosario/images/dolor/2.jpg");}
--img3dl{background: url("media/templates/site/rosario/images/dolor/3.jpg");}
--img4dl{background: url("media/templates/site/rosario/images/dolor/4.jpg");}
--img5dl{background: url("media/templates/site/rosario/images/dolor/5.jpg");}

--img1gz{background: url("media/templates/site/rosario/images/gozo/1.jpg");}
--img2gz{background: url("media/templates/site/rosario/images/gozo/2.jpg");}
--img3gz{background: url("media/templates/site/rosario/images/gozo/3.jpg");}
--img4gz{background: url("media/templates/site/rosario/images/gozo/4.jpg");}
--img5gz{background: url("media/templates/site/rosario/images/gozo/5.jpg");}

--img1gl{background: url("media/templates/site/rosario/images/gloria/1.jpg");}
--img2gl{background: url("media/templates/site/rosario/images/gloria/2.jpg");}
--img3gl{background: url("media/templates/site/rosario/images/gloria/3.jpg");}
--img4gl{background: url("media/templates/site/rosario/images/gloria/4.jpg");}
--img5gl{background: url("media/templates/site/rosario/images/gloria/5.jpg");}

--img1lu{background: url("media/templates/site/rosario/images/luz/1.jpg");}
--img2lu{background: url("media/templates/site/rosario/images/luz/2.jpg");}
--img3lu{background: url("media/templates/site/rosario/images/luz/3.jpg");}
--img4lu{background: url("media/templates/site/rosario/images/luz/4.jpg");}
--img5lu{background: url("media/templates/site/rosario/images/luz/5.jpg");}
*/
}

/*fondos de las páginas*/

.fintro{ var(--fond0)}
.fdolor {var(--fond1)}
.fgozo {var(--fond2)}
.fgloria {var(--fond3)}
.fluz {var(--fond4)}

/*imagenes de los misterios*/
/*dolor
.dolor1{var(--img1dl)}
.dolor2{var(--img2dl)}
.dolor3{var(--img3dl)}
.dolor4{var(--img4dl)}
.dolor5{var(--img5dl)}*/
/*gozo
.gozo1 {var(--img1gz)}
.gozo2 {var(--img2gz)}
.gozo3 {var(--img3gz)}
.gozo4 {var(--img4gz)}
.gozo5 {var(--img5gz)}*/
/*gloria
.gloria1{var(--img1gl)}
.gloria2{var(--img2gl)}
.gloria3{var(--img3gl)}
.gloria4{var(--img4gl)}
.gloria5{var(--img5gl)}*/
/*luz
.luz1 {var(--img1lu)}
.luz2 {var(--img2lu)}
.luz3 {var(--img3lu)}
.luz4 {var(--img4lu)}
.luz5 {var(--img5lu)}*/

*{-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

html, body{position: absolute;top: 0;left: 0;margin:0;padding:0;}
body{
             width: 99.8vw;height: 99.7vh;overflow:hidden;padding:0 15px !important;
	    display:grid;grid-template-areas:"logo logo titulo titulo"
					     "izquierdo intro intro derecho"
			    		     "izquierdo contenido contenido derecho"
			    		     "izquierdo fin fin derecho"
			    		     "izquierdo menu menu derecho"
					     "izquierdo pie pie pie";
	
	grid-template-columns:min-content min-content 5fr min-content;
	grid-template-rows: 2fr min-content 5fr min-content 1fr;
	justify-items: center;align-items:center;grid-gap:0 25px;
        }

	.claselogo{grid-area:logo;}
	.titulopag{grid-area:titulo;text-align: center;vertical-align:center;font-size: 4vw;font-weight: bolder;}
	.ladoizq{grid-area:izquierdo;}
	.oraciones-entrada{grid-area:intro;background:#fff;opacity:0.8}
	.ladodcho{grid-area:derecho}
	main{grid-area:contenido;border:1px solid #ddd;place-self:stretch;}
	.oraciones-finales{grid-area:fin;background:#fff;opacity:0.8;place-self:stretch;}
	#pie{grid-area:pie;}
	.opciones-menu{grid-area:menu}	
        .claselogo img{width: 95px;margin-left: 6px;}

/*.oraciones-finales .mod-custom.custom{width:100%;border:3px solid red;}*/
	@media (max-width: 450px){
          body{grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 8fr;}
}
.opciones-menu ul{display:flex;flex-flow wrap;}

.opciones-menu ul li{list-style:none;}

.opciones-menu ul li a{display:block;width:100%;height:100%;
  font-family: Arial;
  color: #ffffff;
  font-size: 15px;
  padding: 10px;
  text-decoration: none;
  -webkit-border-radius: 17px;
  -moz-border-radius: 17px;
  border-radius: 17px;
  -webkit-box-shadow: 0px 1px 3px #666666;
  -moz-box-shadow: 0px 1px 3px #666666;
  box-shadow: 0px 1px 3px #666666;
  text-shadow: 1px 1px 3px #666666;
  border: solid #5151b3 1px;
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#d992eb), to(#7d9acc));
  background: -moz-linear-gradient(top, #d992eb, #7d9acc);
}
.opciones-menu ul li a:hover {
  background: #b520e6;
}

.ora {background:url("/media/templates/site/rosario/images/ora.png");background-size:cover;height:22px;width:22px;}
.para {background:url("/media/templates/site/rosario/images/para.png");background-size:cover;height:22px;width:22px;}

.misterios {display:grid;grid-template-columns:repeat(5,1fr)}

div[id*="mist"]{display:grid;grid-template-columns: 25px 1fr  34px;}
div[id*="mist"] img{width:100%;}
div[id*="mist"] .item{background:white; opacity:.8;}
div[id*="mist"] div[id*="orden"]{font-size:28px;letter-spacing:-2px; color:red;font-weight: bolder;grid-area: 1 / 1 / 2 / 2;}
div[id*="mist"] div[id*="texto"]{grid-area: 1 / 2 / 2 / 3;}
div[id*="mist"] div[id*="control"]{grid-area: 1 / 3 / 2 / 4; font-size:10px;background:white;text-align:center;}
div[id*="mist"] .dibujo{grid-area: 2 / 1 / 3 / 4;}


.oraciones5misterios {display:grid; grid-template-columns:repeat(5,1fr);width:100%;margin:0;}
.oraciones_misterio{border-right:1px solid #ccc;width:100%;text-align:center;}
.oraciones_misterio:last-child{border-right:0;}
.oraciones_misterio i{font-size:10px;}
span[id^="clicks"] {width:10px;background:yellow;color:red;margin:0 2px;padding:1px;}
#abreviaturas{background:#fff;opacity:0.8; padding:4px;}