*{-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: "logo  logo     titulo    titulo"  min-content
               "logo  logo     contenido dcho" min-content
                 "izqdo movil    contenido dcho" 1fr
                 "izqdo menu     menu      dcho" min-content
               "izqdo pie      pie       pie"     min-content /
               min-content min-content 1fr min-content;
      justify-items: center;align-items:center;grid-gap:0 25px;
          }
  
    .logo{grid-area: logo}
    .titulo {grid-area: titulo;text-align: center;vertical-align:center;font-size: 4vw;font-weight: bolder}
    .izqdo {grid-area: izqdo}
    .movil {grid-area: movil}
    .dcho {grid-area: dcho}
    .menu {grid-area: menu}
    .pie {grid-area:pie}	
     main {grid-area:contenido;border:1px solid #ddd;place-self:stretch;box-shadow: 1000px 1000px 1000px rgba(255,200,220,0.2) inset;}
      .logo img{width: 95px;margin-left: 6px;}
    
  .menu ul{display:flex;flex-flow wrap;}
  .menu ul li{list-style:none;}
  .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);
  }
  .menu ul li a:hover,.menu ul li a:focus,.menu ul li a:active,.menu ul li a:target{
    background: #b520e6;
  }
  
  .ora {background:url("/media/templates/site/strosario/images/ora.png");background-size:cover;height:22px;width:22px}
  .para {background:url("/media/templates/site/strosario/images/para.png");background-size:cover;height:22px;width:22px}
  .play {background:url("/media/templates/site/strosario/images/play.svg") #02108a;background-size:cover;height:22px;width:22px}
  .verificado {background:url("/media/templates/site/strosario/images/verificacion.svg") #02108a;background-size:cover;height:22px;width:22px}
  
    main> div> div{width:99.5%}
  .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"],span[id^="contador"],span[id^="cont"] {width:10px;background:yellow;color:red;margin:0 2px;padding:1px;}
  #abreviaturas{background:#fff;opacity:0.8; padding:4px;}
.oraciones-entrada,.pierosario{text-align:center;}
    /**
    @media (max-width: 920px){
            body{grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 8fr;}
  }