@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
body {
    background-color: #c0c0c0;
    font-family: 'Open Sans', sans-serif;
    margin: auto;
    max-width: 320px;
    width: 98%;
}
/* ↑ BODY ↑ */

/* ↓ HEADER ↓ */
header {
    background-color: #6a8be5;
    box-shadow: 1px 0px 0px #adadad;
    box-sizing: border-box;
    color: white;
    display: inline-block;
    float: left;
    height: auto;
    margin-bottom: -8px;
    position: relative;
    overflow: hidden;
    width: 100%;
}
header h1 {
    color: white;
    display: block;
    float: left;
    font-size: 24px;
    letter-spacing: 2px;
    line-height: 38px;
    margin: 10px 10px 0px 10px;
    text-align: left;
    width: 96%;
}

/* ↑ HEADER ↑ */

/* ↓ NAV ↓ */
#smartphone-tablet-desktop {
    display: block;
    margin: 0px 0px 70px 0px;
    padding: 0px;
}
/* ↓ logo panormus.es ↓ */
#logo {
    float: left;
    height: 20px;
    margin: 20px 10px;
    width: 50%;
}

#logo img {
    height: 20px;
    margin-top: 0px;
    display: inline;
}
/* ↑ logo panormus.es ↑ */
/* ↓ clase imagen que activa menú ↓ */
.menu-movil img {
    cursor: pointer;
    height: 25px;
    margin: 10px;
}

/* ↑ clase imagen que activa menú ↑ */
/* ↓ abre y cierra menú desplegable ↓ */
#ver_menu {
    margin: 5px 5px 0px 0px;
}

#ver_menu img {
    display: block;
    float: right;
    height: 35px;
    width: 35px;
}

#ocultar_menu {
    background-color: #33741a6;
    float: left;
    height: 30px;
    margin: 10px 0px 30px 0px;
    padding: 5px 0px;
    width: 100%;
}

#ocultar_menu img {
    float: right;
    height: 35px;
    width: 35px;
    margin: -2px 15px 0px 0px;
}
/* ↑ abre y cierra menú desplegable ↑ */
/* ↓ menú desplegable ↓ */
nav #carta {
    background-color: #3c5db5;
    color: white;
    display: none;
    height: auto;
    line-height: 25px;
    margin-bottom: 7px;
    padding-bottom: 50px;
    width: 100%;
    position: fixed;
    right: 0;
    text-align: right;
}

nav #carta ul {
    line-height: 24px;
    list-style: none;
    min-width: 200px;
    margin: 5px;
}

nav #carta li {
    color: #f5a946;
    font-size: 18px;
    list-style: none;
    margin: 15px 15px 5px -30px;
    text-align: left;
}

nav #carta li a {
    color: white;
    text-decoration: none;
}

nav #carta li ul {
    margin-left: 10px;
}

.flecha-menu-desplegable {
    display: inline;
    margin: 0px 5px 0px 0px;
}

.flecha-menu-desplegable img {
    height: 14px;
    margin: 0px;
}
/* ↑ menú desplegable ↑ */
/* ↓ título h2 de portada ↓ */
header h2 {
    background-color: #6a8be5;
    color: #F2B14E;
    display: inline-block;
    float: left;
    margin-bottom: 20px;
    margin-left: 10px;
    padding: 0px;
    width: 98%;
}
/* ↑ título h2 de portada ↑ */
/* ↑ NAV ↑ */

/* ↓ SECTION ↓ */
/* ↓ section-contenido ↓ */
.section-contenido {
    background-color: #c0c0c0;
    color: #272727;
    float: left;
    display: inline-block;
    padding: 0px 0px 10px 0px;
    width: 100%;
}

/* ↑ section-contenido ↑ */

/* ↓ div titular de section ↓ */
.titular {
    background-color: #6a8be5;
    box-sizing: border-box;
    margin: 10px 0px 0px 0px;
    padding: 20px 0px 10px 0px;
    width: 100%;
}

/* ↑ div titular de section ↑ */
/* ↓ título h2 de section ↓ */
.titular-h2 {
    font-size: 26px;
    font-weight: 600;
    color: white;
    display: inline-block;
    line-height: 30px;
    letter-spacing: 0.1px;
    margin: 0px 0px 12px 12px;
    text-align: left;
}

/* ↑ título h2 de section ↑ */
/* ↑ SECTION ↑ */

/* ↓ ARTICLE ↓ */

/* ↓ article-capitulo ↓ */
.article-capitulo {
    background-color: #c0c0c0;
    border-radius: 2px;
    display: inline-block;
    margin: 0px;
    padding: 1px 10px;
    width: 92%;
}

/* ↑ article-capitulo ↑ */
/* ↓ título h3 de article-capitulo ↓ */
.article-capitulo h3 {
    font-size: 22px;
    font-weight: 600;
    display: block;
    line-height: 30px;
    letter-spacing: 0.5px;
    margin: 25px 0px 25px 1%;
    padding: 0px 10px 0px 0px;
    text-align: left;
}

/* ↑ título h3 de article-capitulo ↑ */
/* ↓ título h4 de article-capitulo ↓ */
.article-capitulo h4 {
    font-size: 20px;
    display: block;
    line-height: 26px;
    letter-spacing: 1px;
    margin: 28px 20px 18px 1%;
    text-align: left;
}

/* ↑ título h4 de article-capitulo ↑ */
/* ↓ título h5de article-capitulo ↓ */
.article-capitulo h5 {
    font-size: 18px;
    display: block;
    line-height: 26px;
    letter-spacing: 1px;
    margin: 20px 20px 18px 1%;
    text-align: left;
}

/* ↑ título h5 de article-capitulo ↑ */
/* ↓ título h6de article-capitulo ↓ */
.article-capitulo h6 {
    font-size: 18px;
    display: block;
    line-height: 26px;
    letter-spacing: 1px;
    margin: 20px 20px 18px 1%;
    text-align: left;
}

/* ↑ título h6 de article-capitulo ↑ */
/* ↓ párrafo ↓ */
.article-capitulo .parrafo {
    font-size: 18px;
    display: inline-block;
    letter-spacing: 0.4px;
    line-height: 26px;
    word-spacing: 0.6px;
    margin: 2px 0px 18px 1%;
    text-align: left;
    width: 96%;
}
/* ↑ párrafo ↑ */
/* ↓ párrafo para índice y media-imagen ↓ */

.article-capitulo .parrafo-a-seguir {
    font-size: 18px;
    display: inline;
    line-height: 26px;
    letter-spacing: 0.1px;
    text-align: left;
}

/* ↑ párrafo para índice y media-imagen ↑ */
/* ↓ id para párrafo en cursiva ↓ */
#italic {
    font-style: italic;
}

#italic-white {
    color: white;
    font-style: italic;
    font-size: 13px;
}

#strong {
    font-weight: bold;
}

/* ↑ id para párrafo en cursiva ↑ */
/* ↓ clase para párrafo de anotaciones (*) ↓ */
.article-capitulo .nota-pie-de-pagina {
    font-size: 14px;
    display: inline-block;
    line-height: 20px;
    letter-spacing: 0.1px;
    margin: 1px 0px 25px 1%;
    text-align: left;
    width: 96%;
}

/* ↑ clase para párrafo de anotaciones (*) ↑ */
/* ↓ enlaces de article-capitulo ↓ */
.article-capitulo a {
    color: #184aba;
    font-weight: bold;
    text-decoration: none;
}

.article-capitulo a:hover {
    background-color: #c0c0c0;
    color: #315db7;
    text-decoration: underline;
}

.article-capitulo a:visited {
    color: #257320;
}

.article-capitulo li a {
    line-height: 28px;
}

/* ↑ enlaces de article-capitulo ↑ */
/* ↓ listas de article-capitulo ↓ */

.article-capitulo ul {
    margin: -7px 0px 24px -20px;
    list-style: none;
}

.article-capitulo ol {
    margin: -7px 0px 24px 3px;
}

.article-capitulo li {
    font-size: 17px;
    line-height: 28px;
    letter-spacing: 0.3px;
    margin: 10px 0px;
    padding: 0px 0px 0px 0px;
    text-align: left;
}

.article-capitulo ul > li > ul {
    margin-top: 3px;
    margin-bottom: 3px;
}

/* ↑ listas de article-capitulo ↑ */
/* ↑ ARTICLE ↑ */
/* ↓ FIGURE ↓ */

article figure {
    display: block;
    margin: auto;
}

/* ↓ contenedor de image-article ↓ */
.image-article {
    float: left;
    box-sizing: border-box;
    margin: 20px 0px 20px 0px;
    padding: 0px;
    width: 96%;
}

/* ↑ contenedor de image-article ↑ */
/* ↓ imagen de image-article ↓ */
.image-article img {
    width: 100%;
}

/* ↑ imagen de image-article ↑ */
/* ↓ párrafo de image-article ↓ */
.image-article figcaption {
    font-size: 16px;
    line-height: 22px;
    margin: 10px 0px;
    text-align: left;
    width: 98%;
}

/* ↑ párrafo de image-article ↑ */
/* ↓ contenedor de imagen lateral ↓ */
.media-imagen {
    display: inline-block;
    padding: 0px 0px 10px 0px;
}

/* ↑ contenedor de imagen lateral ↑ */
/* ↓ imagen lateral ↓ */
.media-imagen img {
    width: 98%;
}

/* ↑ imagen lateral ↑ */
/* ↓ párrafo imagen lateral ↓ */
.media-imagen figcaption {
    font-size: 14px;
    line-height: 18px;
    margin: 10px 0px 10px 0px;
    text-align: left;
    width: 98%;
}

/* ↑ párrafo imagen lateral ↑ */
/* ↓ contenedor imágenes emparejadas ↓ */
/* a partir del SEGUNDO SALTTO se añade un id (drcha) para diferenciar el margin de la imagen a la derecha */
.doble-imagen {
    display: inline-block;
    padding: 0px 0px 10px 0px;
}

/* ↑ contenedor imágenes emparejadas ↑ */
/* ↓ imágenes emparejadas ↓ */
.doble-imagen img {
    width: 98%;
}

/* ↑ imágenes emparejadas ↑ */
/* ↓ párrafo imágenes emparejadas ↓ */
.doble-imagen figcaption {
    font-size: 14px;
    line-height: 18px;
    margin: 10px 0px 0px 0px;
    text-align: left;
    width: 98%;
}

/* ↑ párrafo imágenes emparejadas ↑ */

/* ↑ FIGURE ↑ */
/* ↓ DIVS ↓ */

/* ↓ div almohadilla (display block desde 481px) ↓ */
.almohadilla {
    display: none;
    height: 8px;
}

/* ↑ div almohadilla ↑ */
/* ↓ div espaciado ↓ */
.espaciado {
    box-sizing: border-box;
    height: 7px;
    width: 98%;
}

/* ↑ div espaciado ↑ */

/* ↓ Índice ↓ */

/* ↓ clase div indice ↓ */
.indice {
    background-color: #9e9e9e;
    border: solid 1px #c3c2c2;
    display: block;
    float: left;
    height: auto;
    margin: 12px 0px 36px 0px;
    width: auto;
    float: left;
    height: auto;
}

/* ↓ id div que pone 'mostrar' ↓ */
#mostrar {
    display: block;
    padding: 18px 25px;
    width: 80%;
}

/* ↓ id div que pone 'ocultar' ↓ */
#ocultar {
    display: none;
    padding: 18px 50px 18px 25px;
    width: 80%;
}

/* ↓ Títulos de esta página ↓ */
.indice h4 {
    display: inline;
    font-size: 15.5px;
    font-weight: 100;
    line-height: 33px;
    margin-right: 7px;
    margin-bottom: 7px;
}

/* ↓ párrafo dentro título para 'onclic' ↓ */
.indice p {
    color: #23468d;
    cursor: pointer;
    display: inline;
    font-size: 15.5px;
    font-weight: 100;
    margin: 0px 3px;
}

/* ↓ clase para párrafo 'Mostrar' ↓ */
.indice #muestra {
    cursor: pointer;
}

/* ↓ clase para párrafo 'Ocultar' ↓ */
.indice #oculta {
    cursor: pointer;
}
/* ↓ enlaces internos del índice ↓ */
.indice a {
    color: #23468d;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.1px;
    text-decoration: none;
}
.indice a:hover {
    background-color: #9e9e9e;
    color: #315db7;
    text-decoration: underline
}

.indice a:visited {
    color: #23468d;
}

/* ↑ enlaces internos del índice ↑ */
/* ↓ lista enlaces internos ↓ */
.indice ol {
    color: #315db7;
    margin: 16px 00px 0px 30px;
    padding: 0px;
    width: auto;
}

.indice ul {
    margin: 6px 20px 0px 10px;
    padding: 0px;
    width: auto;
}

.indice li {
    letter-spacing: 1px;
    line-height: 33px;
    margin-top: 8px;
    margin-bottom: 8px;
    text-align: left;
    width: auto;
}

.indice li > ul {
    margin-left: 20px;
    width: auto;
}

/* ↑ lista enlaces internos ↑ */
/* ↑ Índice ↑ */
/* ↓ flecha arriba ↓ */
#flecharriba {
    background-color: #3c5db5;
    border-radius: 50%;
    cursor: pointer;
    height: 40px;
    width: 40px;
    position: fixed;
    right: 15px;
    bottom: 10px;
    z-index: 999;
}

#flecharriba img {
    height: 25px;
    width: 25px;
    position: relative;
    top: -10px;
    left: -32px;
}

/* ↑ flecha arriba ↑ */
/* ↓ cookies ↓ */
.cookies {
    background-color: #3b57a2;
    box-sizing: border-box;
    bottom: 0px;
    display: block;
    height: auto;
    left: 0px;
    opacity: 0.9;
    padding: 10px;
    position: fixed;
    text-align: center;
    width: 100%;
}

.cookies h2 {
    color: white;
    font-size: 15px;
    display: block;
    line-height: 30px;
    margin: 0px;
}

.cookies p {
    color: white;
    font-size: 13px;
    display: block;
    line-height: 30px;
    margin: 0px;
}

.cookies a {
    color: #f5a946;
    font-weight: normal;
    text-decoration: none;
}

.cookies a:hover {
    text-decoration: underline;
}

.cookies button {
    background-color: #F2B14E;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-weight: strong;
    font-size: 12px;
    margin: 10px;
    padding: 6px 16px;
}

.cookies button:hover {
    background-color: white;
}

.cookies__boton {
    color: black;
}

/* ↑ cookies ↑ */
/* ↓ banner ↓ */
#banner {
    background-color: #c0c0c0;
    box-sizing: border-box;
    display: inline-block;
    display: inline-block;
    float: left;
    margin-bottom: -10px;
    position: static;
    width: 100%;
}

#banner a {
    color: #315db7;
    font-weight: 500;
    text-decoration: none;
}

#banner a:hover {
    color: #3c5db5;
    font-weight: 600;
}

#banner a:visited {
    color: #628ef0;
}

.banner-img {
    width: 98½;
    height: auto;
}

#nota-banner {
    font-size: 14px;
    font-style: italic;
    display: inline-block;
    letter-spacing: 0.1px;
    text-align: left;
    width: 96%;
}

/* ↑ banner ↑ */
/* ↑ DIVS ↑ */
/* ↓ ASIDE ↓ */

#titular-aside  {
    background-color: #3b57a2;
    box-shadow: 1px 2px 3px #adadad;
    box-sizing: border-box;
    display: inline-block;
    float: left;
    height: auto;
    margin-top: 25px;
    margin-bottom: 12px;
    padding: 0px 18px;
    width: 100%;
}

#titular-aside a {
    color: white;
}

#aside-panormus {
    background-color: #c0c0c0;
    box-sizing: border-box;
    display: inline-block;
    display: inline-block;
    float: left;
    margin-bottom: -10px;
    position: static;
    width: 100%;
}

#aside-panormus a {
    color: #31508d;
    font-weight: 600;
    text-decoration: none;
}

#aside-panormus a:hover {
    text-decoration: underline;
}

#aside-panormus a:visited {
    color: #315db7;
}

.parrafo-aside {
    color: white;
    float: left;
    font-size: 20px;
    font-weight: bold;
    line-height: 28px;
    letter-spacing: 1px;
    margin: 12px 0px;
    text-align: left;
    width: 98%;
}

.aside-enlaces {
    background-color: #9e9e9e;
    box-shadow: 1px 2px 3px #adadad;
    display: inline-block;
    float: left;
    margin-bottom: 15px;
    margin-left: 2%;
    padding: 0px 0px 5px 0px;
    width: 98%;
}

.aside-enlaces img {
    height: auto;
    padding: 0px 0px 0px 0px;
    width: 100%
}

.aside-enlaces p {
    font-size: 15px;
    margin-top: 5px;
    margin-bottom: 3px;
    padding-left: 7px;
    padding-right: 3px;
}

/* ↑ ASIDE ↑ */
/* ↓ FOOTER ↓ */

footer {
    background-color: #3c5db5;
    box-sizing: border-box;
    color: white;
    display: inline-block;
    float: left;
    height: auto;
    margin-top: 10px;
    margin-bottom: 5px;
    overflow: hidden;
    padding-top: 50px;
    width: 100%;
}

footer a {
    color: white;
    font-weight: 500;
    text-decoration: none;
}

footer a:hover {
    background-color: #3c5db5;
    color: white;
    text-decoration: underline;
}

#footer-common {
    background-color: #3c5db5;
    display: inline-block;
    margin-top: -15px;
    width: 90%;
}

#footer-common p {
    color: white;
    display: block;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.2px;
    line-height: 18px;
    margin: 0px 30px 25px 30px;
    padding: 0px 5px;
    text-align: center;
}

#footer-common img {
    display: block;
    margin: auto;
    height: auto;
}

/* ↑ FOOTER ↑ */

/* ↓ MEDIA QUERIES ↓ */

/*   PRIMER SALTO    */

@media screen and (min-width: 321px) {
    body {
        max-width: 480px;
    }

    nav #carta ul {
        margin-left: 10px;
    }

    header {
        padding-left: 7px;
    }

    header h1 {
        letter-spacing: 3px;
    }

    .titular-h2 {
        margin-left: 16px;
    }

    .doble-imagen {
        padding: 0px 0px 14px 0px;
    }

    .doble-imagen figcaption {
        padding: 7px 0px 0px 0px;
    }

    .article-capitulo {
        padding: 0px 10px 0px 15px;
    }

    #titular-aside {
        margin-bottom: 20px;
    }

    .aside-enlaces {
        width: 80%;
        margin-left: 10%;
    }

    #footer-common {
        margin-right: 50px;
    }
}

/*   SEGUNDO SALTO   */

@media screen and (min-width: 481px) {
    body {
        padding-left: 4px;
        max-width: 700px;
    }

    header {
        padding-left: 12px;
    }

    header h1 {
        font-size: 28px;
    }

    .titular-h2 {
        margin-left: 18px;
    }

    #mostrar {
        width: 55%;
    }
    #ocultar {
        width: 65%;
    }

    .article-capitulo {
        padding: 0px 10px 0px 18px;
        width: 94%;
    }

    .titulo-separado {
        font-size: 20px;
    }

    .almohadilla {
        display: block;
        margin: 3px 0px;
    }

    .image-article {
        width: 98%;
    }

    .image-article figcaption {
        width: 98%;
    }

    .doble-imagen {
        margin: 20px 26px 8px 0px;
        width: 46%;
    }

    .doble-imagen img {
        width: 99%;
    }
    /* ↓ id para doble imagen a la derecha ↓ */
    #drcha {
        margin: 50px 0px 0px 0px;
    }
    /* ↑ id para doble imagen a la derecha ↑ */

    .doble-imagen figcaption {
        width: 99%;
    }

    .aside-enlaces {
        width: 45%;
        margin-left: 3%;
    }
}

/*   TERCER  SALTO   */

@media screen and (min-width: 701px) {
    body {
        width: 99%;
        max-width: 750px;
    }

    .section-contenido {
        width: 61%;
    }

    #mostrar {
        width: 65%;
    }
    #ocultar {
        width: 80%;
    }

.article-capitulo h3 {
    font-size: 20px;
}

.article-capitulo h4 {
    font-size: 19px;
}

.article-capitulo h5 {
    font-size: 18px;
}
    .doble-imagen {
        margin: 20px 26px 8px 0px;
        width: 45%;
    }

    .doble-imagen img {
        width: 99%;
    }

    .doble-imagen figcaption {
        width: 99%;
    }
    /* ↓ id para doble imagen a la derecha ↓ */
    #drcha {
        margin: 20px 0px 8px 0px;
    }

    #aside-panormus {
        width: 35%;
        margin-left: 2%;
    }

    #titular-aside {
        margin: 20px 0px;
        padding: 0px 11%;
    }

    .aside-enlaces {
        margin: 0x;
        margin-left: 2%;
        padding: 0px;
        width: 96%;
    }

    #banner {
        width: 35%;
        margin-left: 2%;
    }
}

/*    CUARTO  SALTO   */

@media screen and (min-width: 751px) {
    body {
        max-width: 900px;
    }

    #mostrar {
        width: 75%;
    }
    #ocultar {
        width: 75%;
    }

    .doble-imagen {
        margin: 20px 26px 8px 0px;
        width: 45%;
    }

    .doble-imagen img {
        width: 99%;
    }

    .doble-imagen figcaption {
        width: 99%;
    }
    /* ↓ id para doble imagen a la derecha ↓ */
    #drcha {
        margin: 20px 0px 8px 0px;
    }

}

/*   QUINTO  SALTO    */

@media screen and (min-width: 901px) {
    body {
        max-width: 1100px;
    }

    #mostrar {
        width: 70%;
    }

    #ocultar {
        width: 70%;
    }
}

/*   SEXTO SALTO    */

@media screen and (min-width: 1001px) {
    body {
        max-width: 1200px;
        background-color: #c0c0c0;
    }

    header {
        margin-bottom: 10px;
    }

    #titular-portada {
        box-sizing: border-box;
        width: 100%;
    }

    .section-contenido {
        max-width: 800px;
    }

    .article-capitulo {
        background-color: #c0c0c0;
        padding-left: 2%;
        width: 96%;
    }

    #mostrar {
        width: 50%;
    }

    #ocultar {
        width: 65%;
    }

    #aside-panormus {
        max-width: 380px;
    }

    #titular-aside {
        margin-bottom: 20px;
        padding-left: 8%;
    }

}

/*   SEPTIMO SALTO    */

@media screen and (min-width: 1201px) {
    body {
        max-width: 1500px;
        background-color: #c0c0c0;
    }

    #mostrar {
        width: 40%;
    }

    #ocultar {
        width: 70%;
    }

}