/* Estilos generales */
*{margin: 0; padding: 0;}
html {font-family: Helvetica, Arial, sans-serif;font-size: 1.4em;}
h2 {font-size: 1.5rem;}
ul, ol, dl, p {font-size: 1.5rem;}
li, p {line-height: 1.5;}

/* Estilos para las listas de descripciones */

dd, dt {line-height: 1.5;}
dt {font-weight: bold;}
dd {margin-bottom: 1.5rem;}
img{display: block; max-width: 100%;height: auto;}
header, nav, section, footer, figure, figcaption{
    display: block;
    font-size: 1em;
}
ul, li{margin-left: 5%;list-style-image: url(jubileo.png);list-style-position: inside;padding-left: 2rem;background-position: 0 0;background-size: 1.6rem 1.6rem;background-repeat: no-repeat;}
p{margin-bottom: 2%;text-align: left;line-height: 1.4em;text-align: justify;font-size: large;}
#apariciones{width: 100%;}
span{color: #04AA6D;}
.fuente_pequeña{font-size: 20px;}
h1, h2, figcaption{}
h1{font-size: 2em;font-weight: normal;color: #5e5760;margin-bottom: 1em;line-height: 3rem;}
h2{font-size: 1.5em;font-weight: normal;color: #954c37;margin: 1em 0 1em 0;line-height: 3rem;}
label, input, textarea {display: block;width: 80%;margin-bottom: 1%;padding: 1% 0 1% 0;}
body {font-family: 'Arial', serif, sans-serif;line-height: 1.2em;padding: 5%;max-width: 1440px;}
header{margin-bottom: 0.5rem;}
header figure{width: calc(100% + 6rem); display: flex;}
header figure img, header figure figcaption{display: inline-block;vertical-align: middle;}
header figure img{width: 35%;float: left;}
header figure figcaption{font-size: 2em;line-height: 4rem;text-align: center;color: #954c37;margin-left: -0.2em;}
header figure figcaption span{font-size: 1em;display: block;color: #5e5760;border-bottom: 4px solid #4888db;padding: 0 3rem;}
footer{height: auto;margin-top: 5%;background-color: #84a982;padding: 2%;}
footer p{margin: 0px;}
footer a {text-decoration: none;}
@keyframes opacidad{
    from{opacity: 0;}
    50%{0.5;}
    to{opacity: 1;}
}
img, video, object {max-width:100%;}
#video{width: 500px;height: 315px;margin-left: 25%;}
main{width: 100%;animation: opacidad 1s ease-in 0.2s backwards;}
section.columnas-4{display: grid;grid-template-columns: 1fr 1fr 1fr 1fr;grid-gap: 1rem;  min-width: 900px;}
div.columna{display: flex;flex-direction: column;font-size: medium;}
div.columna h2{color: #fff;background-color: #E2856A;font-weight: normal;position: relative;text-align: right;margin: 0 0 5% 0;}
div.rombo h2:before{content: "";display: block;width: 1em;height: 1em;background: #fff;position: absolute;top: 100%;left: 0.5em;margin-top: -0.5em;transform: rotate(45deg);}
div.columna2 h2:before{top: 0;left: calc(100% - 1.5em);}
div.rombo img{outline: 2px solid #fff;outline-offset: -0.5rem;}
div.columna2 h2{order: 2;text-align: center;}
div.columna2 img{order: 1;}
div.columna2 p{order: 3;}
/* marcas */
section.columnas-4 a{text-decoration: none;color: green;padding: 1%;}
section.columnas-4 img{opacity: 1;transition: opacity 1s linear;}
section.columnas-4 img:hover{opacity: .4;}
/* nosotros */
section.columnas-2{display: grid;grid-template-columns: auto auto;grid-auto-flow: column;grid-gap: 1rem;}
section.columnas-2 p{margin-bottom: 1rem;}
input [type=submit]{margin: 0.5em 0;}
.negrita{font-weight: bold;margin-top: 1.5em;}
iframe{width: 100%;height: 100%;}
#submit{width: 25%;margin-top: 10px;margin-bottom: 10px;}
address{line-height: 30px;margin-bottom: 5%;}
.footer_p{text-align:left;}
.topnav {overflow: hidden;background-color: #84a982;}
.topnav a {float: left;display: block;color: #f2f2f2;text-align: center;padding: 14px 25px;text-decoration: none;font-size: 17px;width: 14%;}
.topnav a:hover {background-color: #04AA6D;color: #5e5760;}
.topnav a.active {background-color: #04AA6D;color: white;}
.topnav a.active:hover {background-color: #04AA6D;color: #5e5760;}
.topnav .icon {display: none;}
.centro{margin-top: 2%;display: inline-block;width: 100%;}
.columna_dcha{width: 75%;float: right;}
.columna_izda{word-wrap: break-word;width: 20%;float: left;padding-right: 2%;}
.banner{text-align: center;}
.banner_vert{width: 80%;margin-top: 50px;}
.santos{width: 25%;float: left;}
.img_biografia{display: block;float: left;margin-right: 2%;width: 20%;}
.img_ver_izda{display: block;float: left;margin-right: 2%;width: 40%;}
.img_ver_dcha{display: block;float: right;margin-left: 2%;width: 40%;}
.img_hor_izda{display: block;float: left;margin-right: 2%;width: 50%;}
.img_hor_dcha{display: block;float: right;margin-left: 2%;width: 50%;}
.peliculas{float: left;width: 200px;height: 280px;}
.enlaces{width: 180px;height: 40px;float: left;margin-right: 10px;border: 1px solid black;}
.contador{color: brown;margin: 1%;}
.form-group{margin-bottom: 3%;}
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
    }
    .columna_izda{
        width: 100%;
        margin-bottom: 10%;
    }
    .columna_dcha{
        margin: 0 5% 10% 5%;
        width: 100%;
    }
    section.columnas-4{
        display: inline;
    }
    #video{
        margin-left: 2%;
        width: 100%;
    }
    .img_hor_izda {
        width: 100%;
    }
    .img_hor_dcha{
        width: 100%
    }
    .img_ver_izda{
        width: 100%
    }
    .img_ver_dcha{
        width: 100%
    }
    .img_biografia {
        width: 100%;
}
    header figure{
        width: 100%; 
        display: flex;
        margin-left: 2%;
}
    .enlaces {
        width: 100%;
}
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
      width: 100%;
  }
    main{
        width: 100%;
        margin: 0px 5% 0px 5%;
        padding: 5%;
    }
    .columna_centro{
        width: 100%;
    }
    .columna_izda{
        width: 100%;
    }
    .columna_dcha{
        width: 100%;
    }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
@media screen and (max-width: 480px){
     main{
        width: 100%;
        margin: 0px 5% 0px 5%;
         padding: 5%;
    }
    .columna_centro{
        width: 100%;
    }
    .columna_izda{
        width: 100%;
    }
    .columna_dcha{
        margin-left: 5%;
        width: 100%;
    }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
.pdfview {/* Centrado */margin: auto;display: block;/* Tamaño */width: 100%;height: auto;/* Mejorar aspecto */border-radius: 20px;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
.formulario{} 
.submit {width:150px;height:30px;background:#E06829;border:1px solid #a24d21;margin-top:20px;cursor:pointer;font-family: Arial, sans-serif;font-size:14px;color:#FFFFFF;border-radius: 4px;}



/*
* romana.org
* Oficina de Informacion del Opus Dei, 2021
*/

* {padding: 0; margin: 0;}
	
body {
  font-family: 'Georgia', serif;
  background: none;
  line-height:1.3;
  color: #000;
}

p {
  font-size: 0.95em;
  margin-bottom: 0.5em;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
  text-align: left;
  -webkit-hyphens: none !important; 
  adobe-hyphenate: none !important; 
  -moz-hyphens: none !important; 
  hyphens: none !important;
  -epub-hyphens:none !important;
  page-break-after: avoid;
  page-break-before: avoid;
  page-break-inside: avoid;
}

h1.cover-inner {
  font-weight: normal;
	font-size: 2em;
  color: #c41427;
  letter-spacing: 2px !important;
  padding-top: 150px;
  text-transform: uppercase;
  line-height: 1;
}

h1.cover-inner::first-letter {
  font-size: 150% !important;
}

p.cover-inner {
  color: #c41427;
  margin-bottom: 0;
  font-style: italic;
  font-size: 0.9em;
}

p.cover-inner.boletin {
  color: #000;
  font-style: normal;
  margin-bottom: 100px;
}

p.copyright {
  font-size: 0.65em;
  text-align: center;
  margin-bottom: 0.5em;
  padding: 0 2em;
  text-indent: 3em;
}

p.copyright.datos {
  font-size: 0.60em;
  text-align: center;
  margin-bottom: 0;
}

p.copyright.datos.paragr {
  font-size: 0.60em;
  text-align: center;
  margin-bottom: 0.5em;
}

.borde-rojo {
  margin: 30px;
  padding: 60px 30px 40px 30px;
  border-left: 1px solid #c41427;
}

h1.section {
	font-size: 1.3em;
  margin-bottom: 1em;
  text-transform: uppercase;
}

h1.section::first-letter {
  font-size: 140% !important;
}

h2.subsection {
  position: relative;
  font-weight: normal;
  font-size: 0.9em;
  margin: 0.3em 0 0.3em 3em;
}

h2.subsection:before {
    position:absolute;
    content:"• ";
    width: 1em;
    top: 0;
    left: -1em;
}

h2.contents-section {
  font-weight: normal;
  font-size: 0.90em;
  text-transform: uppercase;
  color: #c41427;
  margin: 0.8em 0 0.4em 0;
}

h3.contents-subsection {
  font-weight: normal;
  font-size: 0.90em;
  font-style: italic;
  margin: 0.6em 0 0.3em 1em;
}

h4.contents-article {
  position: relative;
  font-weight: normal;
  font-size: 0.85em;
  margin: 0.4em 0 0.4em 3em;
}

h4.contents-article:before {
    position:absolute;
    content:"• ";
    width: 1em;
    top: 0;
    left: -1em;
}

h1.section-minor {
  font-size: 1.4em;
  margin-bottom: 0.5em;
}

h2.article-title {
  font-weight: normal;
  font-size: 1.3em;
  margin: 1em 0 0.5em 32px;
  line-height: 1.1;
}

.article-text p {
  text-indent: 32px;
  text-align: justify;
  -webkit-hyphens: auto !important; 
  adobe-hyphenate: auto !important; 
  -moz-hyphens: auto !important; 
  hyphens: auto !important;
  -epub-hyphens: auto !important;
  -webkit-hyphenate-before: 3;
  -webkit-hyphenate-after: 3;
  widows:2;
  orphans:2;
}

hr {
  margin: 40px 25%;
  padding: 0;
  height: 0;
  border-top: 0;
  border-bottom: 1px dotted var(--bd-info-row);
}

sup {
  line-height: 1.2;
  vertical-align: super;
  vertical-align: 40%;
  font-size: 67.5%;
  font-weight:normal !important;
}

sup sup {
  font-size: 11px;
}

a, a:link, a:active, a:visited, a:hover, a:focus, a:visited:hover {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  text-decoration: none !important;
  border-bottom: 1px solid #bbb !important;
  -webkit-tap-highlight-color:rgba(219,223,236,0.50);
}

a.contents, a.contents:link, a.contents:active, a.contents:visited, a.contents:hover, a.contents:focus, a.contents:visited:hover {
  border-bottom: 1px dotted #bbb !important;
}

p.volver {
  text-align: center;
  margin-top:1.5em;
  margin-bottom:1em;
}