/* ============================================================================================ */
/* Clases especiales que se crean puntualmente para usarse en con html en la descripción de un evento puntual */
/* CASO MAPA HECHO CON BOTONES DE CSS - MAPA ENTRECASA */

.map5entrecasa-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 0.2fr 0.15fr 0.5fr 0.95fr;
    grid-auto-flow: row;
    grid-template-areas:
        'escenario'
        'primf'
        'mcentro'
        'mcentroa';
}

.map5entrecasa-firstSubElement {
    margin-top: 0.2em;
}

.map5entrecasa-subItem {
    transition: opacity 0.8s;
    text-align: center;
}

.map5entrecasa-titleSection {
    font-weight: bold;

    transition: opacity 0.8s;
}

.map5entrecasa-titleDescSection {
    transition: opacity 0.8s;
}

.map5entrecasa-textButtonHover {
    opacity: 0;
    position: absolute;
    transition: opacity 0.3s;
    font-size: 2em;
    font-weight: bold;
}

.map5entrecasa-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}

/* A continuación se separan las clases de cada sección por líneas con guiones simples */
/* --------------------------------------------------------- */
.map5entrecasa-escenario {
    grid-area: escenario;
    background: #0097b2;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white !important;
    font-size: 1.3em;
    margin: 0 0 1% 0;
}
/* --------------------------------------------------------- */
.map5entrecasa-mlat {
    grid-area: mlat;
    background: #ffedab;
    color: var(--af-text);
    transition: 0.4s;
    position: relative;
    margin: 1% 1% 0 0;
}

.map5entrecasa-mlat:hover,
.map5entrecasa-mlat:focus {
    color: var(--af-text) !important;
    text-decoration: none;
    background: #fde58c;
}

.map5entrecasa-mlat .map5entrecasa-textButtonHover {
    color: var(--af-text);
}

.map5entrecasa-mlat:hover .map5entrecasa-textButtonHover,
.map5entrecasa-mlat:focus .map5entrecasa-textButtonHover {
    opacity: 1;
    transition: opacity 0.7s;;
}

.map5entrecasa-mlat:hover .map5entrecasa-titleSection,
.map5entrecasa-mlat:focus .map5entrecasa-titleSection,
.map5entrecasa-mlat:hover .map5entrecasa-subItem,
.map5entrecasa-mlat:focus .map5entrecasa-subItem {
    opacity: 0;
    transition: opacity 0.2s;
}
/* --------------------------------------------------------- */
.map5entrecasa-barra {
    grid-area: barra;
/*     background: #ec3aa6; */
    border-radius: 35px;
    display: flex;
    justify-content: center;
    align-items: start;
    color: white !important;
    font-size: 1.3em;
    margin: 3% 1% 0 0;
    width: 100%;
    height: 100%;
    position: relative;
}

.map5entrecasa-barraFigure {
    width: 0;
    border-style: solid;
    border-color: transparent #a63434 transparent transparent;
}

.map5entrecasa-barra-text {
    position: absolute;
    font-weight: bold;
    width: 98%;
    text-align: center;
}
/* --------------------------------------------------------- */
.map5entrecasa-depie {
    grid-area: depie;
    background: #fae7e0;
    color: var(--af-text);
    transition: 0.4s;
    position: relative;
    margin: 2% 1.5% 0 1%;
}

.map5entrecasa-depie:hover,
.map5entrecasa-depie:focus {
    color: var(--af-text) !important;
    text-decoration: none;
    background: #f4d6cb;
}

.map5entrecasa-depie .map5entrecasa-textButtonHover {
    color: var(--af-text);
}

.map5entrecasa-depie:hover .map5entrecasa-textButtonHover,
.map5entrecasa-depie:focus .map5entrecasa-textButtonHover {
    opacity: 1;
    transition: opacity 0.7s;;
}

.map5entrecasa-depie:hover .map5entrecasa-titleSection,
.map5entrecasa-depie:focus .map5entrecasa-titleSection,
.map5entrecasa-depie:hover .map5entrecasa-subItem,
.map5entrecasa-depie:focus .map5entrecasa-subItem {
    opacity: 0;
    transition: opacity 0.2s;
}
/* --------------------------------------------------------- */
.map5entrecasa-primf {
    grid-area: primf;
    background: #ffd297;
    color: var(--af-text);
    transition: 0.4s;
    position: relative;
    margin: 1% 1% 1% 1%;
}

.map5entrecasa-primf:hover,
.map5entrecasa-primf:focus {
    color: var(--af-text) !important;
    text-decoration: none;
    background: #f3c487;
}

.map5entrecasa-primf .map5entrecasa-textButtonHover {
    color: var(--af-text);
}

.map5entrecasa-primf:hover .map5entrecasa-textButtonHover,
.map5entrecasa-primf:focus .map5entrecasa-textButtonHover {
    opacity: 1;
    transition: opacity 0.7s;;
}

.map5entrecasa-primf:hover .map5entrecasa-titleSection,
.map5entrecasa-primf:focus .map5entrecasa-titleSection,
.map5entrecasa-primf:hover .map5entrecasa-subItem,
.map5entrecasa-primf:focus .map5entrecasa-subItem {
    opacity: 0;
    transition: opacity 0.2s;
}
/* --------------------------------------------------------- */
.map5entrecasa-mcentro {
    grid-area: mcentro;
    background: #b6e2d3;
    color: var(--af-text);
    transition: 0.4s;
    position: relative;
    margin: 1% 1% 1% 1%;
}

.map5entrecasa-mcentro:hover,
.map5entrecasa-mcentro:focus {
    color: var(--af-text) !important;
    text-decoration: none;
    background: #a5dbc9;
}

.map5entrecasa-mcentro .map5entrecasa-textButtonHover {
    color: var(--af-text);
}

.map5entrecasa-mcentro:hover .map5entrecasa-textButtonHover,
.map5entrecasa-mcentro:focus .map5entrecasa-textButtonHover {
    opacity: 1;
    transition: opacity 0.7s;;
}

.map5entrecasa-mcentro:hover .map5entrecasa-titleSection,
.map5entrecasa-mcentro:focus .map5entrecasa-titleSection,
.map5entrecasa-mcentro:hover .map5entrecasa-subItem,
.map5entrecasa-mcentro:focus .map5entrecasa-subItem {
    opacity: 0;
    transition: opacity 0.2s;
}
/* --------------------------------------------------------- */
.map5entrecasa-mcentroa {
    grid-area: mcentroa;
    background: #a0c7aa;
    color: var(--af-text);
    transition: 0.4s;
    position: relative;
    margin: 1% 1% 0 1%;
}

.map5entrecasa-mcentroa-manualHover {
    color: var(--af-text) !important;
    text-decoration: none;
    background: #86c095 !important;
}

.map5entrecasa-mcentroa-manualHover .map5entrecasa-textButtonHover {
    opacity: 1;
    transition: opacity 0.7s;
}

.map5entrecasa-mcentroa-manualHover .map5entrecasa-titleSection,
.map5entrecasa-mcentroa-manualHover .map5entrecasa-subItem {
    opacity: 0;
    transition: opacity 0.2s;
}

.map5entrecasa-mcentroa:hover,
.map5entrecasa-mcentroa:focus {
    color: var(--af-text) !important;
    text-decoration: none;
    background: #86c095;
}

.map5entrecasa-mcentroa .map5entrecasa-textButtonHover {
    color: var(--af-text);
}

.map5entrecasa-mcentroa:hover .map5entrecasa-textButtonHover,
.map5entrecasa-mcentroa:focus .map5entrecasa-textButtonHover {
    opacity: 1;
    transition: opacity 0.7s;
}

.map5entrecasa-mcentroa:hover .map5entrecasa-titleSection,
.map5entrecasa-mcentroa:focus .map5entrecasa-titleSection,
.map5entrecasa-mcentroa:hover .map5entrecasa-subItem,
.map5entrecasa-mcentroa:focus .map5entrecasa-subItem {
    opacity: 0;
    transition: opacity 0.2s;
}
/* --------------------------------------------------------- */
.map5entrecasa-titleMap {
    text-align: center;
    font-weight: bold;
}
/* --------------------------------------------------------- */
.map5entrecasa-mcentroa2 {
    grid-area: mcentroa2;
    background: #a0c7aa;
    color: var(--af-text);
    transition: 0.4s;
    position: relative;
    margin: 0 0 0 1%;
}

.map5entrecasa-mcentroa2-manualHover {
    color: var(--af-text) !important;
    text-decoration: none;
    background: #86c095;
}

.map5entrecasa-mcentroa2:hover,
.map5entrecasa-mcentroa2:focus {
    color: var(--af-text) !important;
    text-decoration: none;
    background: #86c095;
}

.map5entrecasa-mcentroa2 .map5entrecasa-textButtonHover {
    color: var(--af-text);
}
/* --------------------------------------------------------- */
/* MEDIA QUERIES DEL MAPA */
@media only screen and (min-width: 1500px) {
    .map5entrecasa-container {
        height: 51vw;
        width: 100%;
        padding: 0 25% 8% 25%;
        font-size: 0.8em;
    }

    .map5entrecasa-subItem {
        font-size: 1em !important;
    }

    .map5entrecasa-titleSection {
        font-size: 1.4em;
    }

    .map5entrecasa-titleDescSection {
        font-size: 1.3em;
    }

    .map5entrecasa-titleMap {
        font-size: 1.5em;
        margin: 0px 0 40px 0 !important;
    }

    .map5entrecasa-barra-text {
        font-size: 1.4em;
    }

    .map5entrecasa-barraFigure {
        width: 0;
        height: 10vw;
        border-width: 2.5vw 9vw 2.5vw 0;
    }
}

@media only screen and (max-width: 1500px) {
    .map5entrecasa-container {
        height: 52vw;
        width: 100%;
        padding: 0 25% 8% 25%;
        font-size: 0.8em;
    }

    .map5entrecasa-subItem {
        font-size: 1em !important;
    }

    .map5entrecasa-titleSection {
        font-size: 1.5em;
    }

    .map5entrecasa-barra-text {
        font-size: 1.5em;
    }

    .map5entrecasa-titleDescSection {
        font-size: 1.3em;
    }

    .map5entrecasa-titleMap {
        font-size: 1.5em;
        margin: 0px 0 40px 0 !important;
    }

    .map5entrecasa-barraFigure {
        width: 0;
        height: 10vw;
        border-width: 2.5vw 9vw 2.5vw 0;
    }
}

@media only screen and (max-width: 1400px) {
    .map5entrecasa-container {
        height: 51vw;
        width: 100%;
        padding: 0 25% 8% 25%;
        font-size: 0.8em;
    }

    .map5entrecasa-subItem {
        font-size: 0.8em !important;
    }

    .map5entrecasa-titleSection {
        font-size: 1.4em;
    }

    .map5entrecasa-barra-text {
        font-size: 1.4em;
    }

    .map5entrecasa-titleDescSection {
        font-size: 1.2em;
    }

    .map5entrecasa-titleMap {
        font-size: 1.4em;
        margin: 0px 0 40px 0 !important;
    }
}

@media only screen and (max-width: 1300px) {
    .map5entrecasa-container {
        height: 51vw;
        width: 100%;
        padding: 0 25% 8% 25%;
        font-size: 0.8em;
    }

    .map5entrecasa-subItem {
        font-size: 0.7em !important;
    }

    .map5entrecasa-titleSection {
        font-size: 1.3em;
    }

    .map5entrecasa-barra-text {
        font-size: 1.3em;
    }

    .map5entrecasa-titleDescSection {
        font-size: 1.2em;
    }

    .map5entrecasa-titleMap {
        font-size: 1.3em;
        margin: 0px 0 40px 0 !important;
    }
}

@media only screen and (max-width: 1200px) {
    .map5entrecasa-container {
        height: 51vw;
        width: 100%;
        padding: 0 25% 8% 25%;
        font-size: 0.8em;
    }

    .map5entrecasa-subItem {
        font-size: 0.6em !important;
    }

    .map5entrecasa-titleSection {
        font-size: 1.1em;
    }

    .map5entrecasa-barra-text {
        font-size: 1.1em;
    }

    .map5entrecasa-titleDescSection {
        font-size: 1.1em;
    }

    .map5entrecasa-titleMap {
        font-size: 1.1em;
        margin: 0px 0 40px 0 !important;
    }

    .map5entrecasa-barraFigure {
        width: 0;
        height: 10vw;
        border-width: 2.5vw 8.5vw 2.5vw 0;
    }
}

@media only screen and (max-width: 1100px) {
    .map5entrecasa-container {
        height: 52vw;
        width: 100%;
        padding: 0 25% 8% 25%;
        font-size: 0.8em;
    }

    .map5entrecasa-subItem {
        font-size: 0.6em !important;
    }

    .map5entrecasa-titleSection {
        font-size: 1.1em;
    }

    .map5entrecasa-titleDescSection {
        font-size: 1.1em;
    }

    .map5entrecasa-titleMap {
        font-size: 1.1em;
        margin: 0px 0 40px 0 !important;
    }

    .map5entrecasa-barra-text {
        font-size: 1.1em;
    }

    .map5entrecasa-barraFigure {
        width: 0;
        height: 10vw;
        border-width: 2.5vw 9vw 2.5vw 0;
    }
}

@media only screen and (max-width: 1000px) {
    .map5entrecasa-container {
        height: 52vw;
        width: 100%;
        padding: 0 25% 8% 25%;
        font-size: 0.6em;
    }

    .map5entrecasa-subItem {
        font-size: 0.7em !important;
    }

    .map5entrecasa-titleSection {
        font-size: 1.3em;
    }

    .map5entrecasa-barra-text {
        font-size: 1.3em;
    }

    .map5entrecasa-titleDescSection {
        font-size: 1.1em;
    }

    .map5entrecasa-titleMap {
        font-size: 1.3em;
        margin: 0px 0 40px 0 !important;
    }
}

@media only screen and (max-width: 900px) {
    .map5entrecasa-container {
        height: 52vw;
        width: 100%;
        padding: 0 25% 8% 25%;
        font-size: 0.6em;
    }

    .map5entrecasa-subItem {
        font-size: 0.6em !important;
    }

    .map5entrecasa-titleSection {
        font-size: 1.2em;
    }

    .map5entrecasa-barra-text {
        font-size: 1.2em;
    }

    .map5entrecasa-titleDescSection {
        font-size: 1.1em;
    }

    .map5entrecasa-titleMap {
        font-size: 1.2em;
        margin: 0px 0 40px 0 !important;
    }
}

@media only screen and (max-width: 799px) {
    .map5entrecasa-container {
        height: 95vw;
        width: 100%;
        padding: 0 25% 8% 25%;
        font-size: 0.9em;
    }

    .map5entrecasa-subItem {
        font-size: 0.77em !important;
    }

    .map5entrecasa-titleSection {
        font-size: 1.3em;
    }

    .map5entrecasa-barra-text {
        font-size: 1.3em;
    }

    .map5entrecasa-titleDescSection {
        font-size: 1.2em;
    }

    .map5entrecasa-titleMap {
        font-size: 1.6em;
        margin: 0px 0 50px 0 !important;
    }

    .map5entrecasa-barraFigure {
        width: 0;
        height: 18vw;
        border-width: 4vw 18vw 4vw 0;
    }
}

@media only screen and (max-width: 700px) {
    .map5entrecasa-container {
        height: 95vw;
        width: 100%;
        padding: 0 25% 8% 25%;
        font-size: 0.7em;
    }

    .map5entrecasa-subItem {
        font-size: 0.75em !important;
    }

    .map5entrecasa-titleSection {
        font-size: 1.4em;
    }

    .map5entrecasa-barra-text {
        font-size: 1.4em;
    }

    .map5entrecasa-titleDescSection {
        font-size: 1.3em;
    }

    .map5entrecasa-titleMap {
        font-size: 1.5em;
        margin: 0px 0 45px 0 !important;
    }
}

@media only screen and (max-width: 540px) {
    .map5entrecasa-container {
        height: 96vw;
        width: 100%;
        padding: 0 25% 8% 25%;
        font-size: 0.6em;
    }

    .map5entrecasa-subItem {
        font-size: 0.7em !important;
    }

    .map5entrecasa-titleSection {
        font-size: 1.3em;
    }

    .map5entrecasa-barra-text {
        font-size: 1.3em;
    }

    .map5entrecasa-titleDescSection {
        font-size: 1.2em;
    }

    .map5entrecasa-titleMap {
        font-size: 1.4em;
        margin: 0px 0 40px 0 !important;
    }
}

@media only screen and (max-width: 450px) {
    .map5entrecasa-container {
        height: 98vw;
        width: 100%;
        padding: 0 25% 8% 25%;
        font-size: 0.5em;
    }

    .map5entrecasa-subItem {
        font-size: 0.7em !important;
    }

    .map5entrecasa-titleSection {
        font-size: 1.3em;
    }

    .map5entrecasa-barra-text {
        font-size: 1.3em;
    }

    .map5entrecasa-titleDescSection {
        font-size: 1.2em;
    }

    .map5entrecasa-titleMap {
        font-size: 1.1em;
        margin: 0px 0 30px 0 !important;
    }
}

@media only screen and (max-width: 350px) {
    .map5entrecasa-container {
        height: 98vw;
        width: 100%;
        padding: 0 25% 8% 25%;
        font-size: 0.5em;
    }

    .map5entrecasa-subItem {
        font-size: 0.6em !important;
    }

    .map5entrecasa-titleSection {
        font-size: 1em;
    }

    .map5entrecasa-barra-text {
        font-size: 1em;
    }

    .map5entrecasa-titleDescSection {
        font-size: 0.9em;
    }

    .map5entrecasa-titleMap {
        font-size: 1em;
        margin: 0px 0 30px 0 !important;
    }
}

@media only screen and (max-width: 300px) {
    .map5entrecasa-container {
        height: 98vw;
        width: 100%;
        padding: 0 25% 8% 25%;
        font-size: 0.5em;
    }

    .map5entrecasa-subItem {
        font-size: 0.5em !important;
    }

    .map5entrecasa-titleSection {
        font-size: 0.9em;
    }

    .map5entrecasa-barra-text {
        font-size: 0.9em;
    }

    .map5entrecasa-titleDescSection {
        font-size: 0.8em;
    }

    .map5entrecasa-titleMap {
        font-size: 0.8em;
        margin: 0px 0 30px 0 !important;
    }
}

@media only screen and (max-width: 250px) {
    .map5entrecasa-container {
        height: 98vw;
        width: 100%;
        padding: 0 25% 8% 25%;
        font-size: 0.5em;
    }

    .map5entrecasa-subItem {
        font-size: 0.3em !important;
    }

    .map5entrecasa-titleSection {
        font-size: 0.7em;
    }

    .map5entrecasa-barra-text {
        font-size: 0.7em;
    }

    .map5entrecasa-titleDescSection {
        font-size: 0.7em;
    }

    .map5entrecasa-titleMap {
        font-size: 0.7em;
        margin: 0px 0 20px 0 !important;
    }
}

/* FIN - CASO MAPA HECHO CON BOTONES DE CSS - MAPA ENTRECASA */
/* FIN Clases especiales que se crean puntualmente para usarse en con html en la descripción de un evento puntual */
/* ============================================================================================ */