@font-face {
    font-family: 'IberPangea';
    src: url('/wcorp/gc/prod/es_ES/estaticos/iberdrola_U/fonts/IberPangea-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
}

:root {
    --iberdrola-universities-forest: #00402A;
    --iberdrola-universities-sand: #FFF5EC;
    --iberdrola-universities-sand3: #D8CFC7;
}

#mapa-universidades {
    position: relative;
    max-width: 1024px;
    margin: 0 auto;
    margin-bottom:100px;
    margin-top:-60px;
}

#mapa-universidades .mapa-u-container {
    border-radius: 15px;
    border: 1px solid var(--iberdrola-universities-sand3);
    overflow: hidden;
    width: 100%;
    min-height: 325px;
}

#mapa-universidades .mapa-u-wrapper {
    height: 100%;
    position: relative;
    width: fit-content;
    height: fit-content;
    position: relative;
    left: calc(-155px + 20%);
}

#mapa-universidades .mapa-u-base {
    width: 100%;
    height: auto;
    min-width: 605px;
    max-width: 892px;

}

#mapa-universidades ul,
#mapa-universidades ul li {
    list-style: none;
    list-style-type: none;
    text-indent: 0;
    margin: 0;
    padding: 0;
}

#mapa-universidades .mapa-u-list {
    display: flex;
    flex-direction: column;
    row-gap: 5px;
    align-items: center;
    z-index: 2;
}


#mapa-universidades .mapa-u-card {
    display: flex;
    align-items: center;
    column-gap: 8px;
    background-color: var(--iberdrola-universities-sand);
    color: var(--iberdrola-universities-forest) !important;
    font-family: 'IberPangea';
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
    border-radius: 8px;
    padding: 10px;
    width: 94%;
    position: relative;
    top: -12px;
}

#mapa-universidades .mapa-u-card img {
    width: 48px;
    height: 48px;
}


#mapa-universidades .mapa-u-pin {
    width: 9px;
    height: 9px;
    background-image: url('/wcorp/gc/prod/es_ES/estaticos/iberdrola_U/imgs/punto.svg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: absolute;
    z-index: 10;
}

#mapa-universidades .mapa-u-container .mapa-u-wrapper .mapa-u-pin:nth-of-type(1) {
    top: 36%;
    left: 27%;
}

#mapa-universidades .mapa-u-container .mapa-u-wrapper .mapa-u-pin:nth-of-type(2) {
    top: 38%;
    left: 25%;
}


#mapa-universidades .mapa-u-container .mapa-u-wrapper .mapa-u-pin:nth-of-type(3) {
    top: 29%;
    left: 45%;
}

#mapa-universidades .mapa-u-container .mapa-u-wrapper .mapa-u-pin:nth-of-type(4) {
    top: 47%;
    left: 60%;
    /*z-index: 11;*/
}

#mapa-universidades .mapa-u-container .mapa-u-wrapper .mapa-u-pin:nth-of-type(5) {
    top: 39%;
    left: 45%;
}

#mapa-universidades .mapa-u-container .mapa-u-wrapper .mapa-u-pin:nth-of-type(6) {
    top: 39%;
    left: 45%;
}

#mapa-universidades .mapa-u-container .mapa-u-wrapper .mapa-u-pin:nth-of-type(7) {
    top: 67%;
    left: 35%;
}

#mapa-universidades .mapa-u-container .mapa-u-wrapper .mapa-u-pin:nth-of-type(8) {
    top: 51%;
    left: 18.5%;
}



@media (min-width: 768px) {
    #mapa-universidades .mapa-u-container {
        display: flex;
        justify-content: center;
        margin: 0 auto;
        width: 100%;
    }

    #mapa-universidades .mapa-u-wrapper {
        left: initial;
    }

    #mapa-universidades .mapa-u-base {
        left: initial;
    }

    #mapa-universidades .mapa-u-pin {
        width: 14px;
        height: 14px;
    }

    #mapa-universidades .mapa-u-list {}

    #mapa-universidades .mapa-u-card {
        width: 256px;
        position: absolute;
        max-width: 27.5%;
        z-index: 10;
    }

    #mapa-universidades .mapa-u-card:nth-of-type(1) {
        top: 5%;
        left: 2%;
        width: 204px;
    }

    #mapa-universidades .mapa-u-card:nth-of-type(2) {
        top: 5%;
        left: 34%;
    }

    #mapa-universidades .mapa-u-card:nth-of-type(3) {
        top: 5%;
        /*left: 67%;*/
        right: 2%;
    }

    #mapa-universidades .mapa-u-card:nth-of-type(4) {
        top: 80%;
        /*left: 67%;*/
        right: 2%;
        width: 276px;
        z-index: 12;
    }

    #mapa-universidades .mapa-u-card:nth-of-type(5) {
        top: 36%;
        /*left: 67%;*/
        right: 2%;
        width: 228px;

    }

    #mapa-universidades .mapa-u-card:nth-of-type(6) {
        top: 80%;
        left: 42%;
        width: 176px;
    }

    #mapa-universidades .mapa-u-card:nth-of-type(7) {
        top: 80%;
        left: 2%;
    }

    #mapa-universidades .mapa-u-card:nth-of-type(8) {
        top: 60%;
        left: 2%;
        width: 208px;
    }

    #mapa-universidades .mapa-u-container .mapa-u-wrapper .mapa-u-pin:nth-of-type(1)::after {
        content: '';
        display: block;
        background-size: contain;
        width: 71px;
        height: 111px;
        border-right: solid 1px black;
        border-bottom: solid 1px black;
        position: absolute;
        top: -104px;
        left: 13px;
    }

    #mapa-universidades .mapa-u-container .mapa-u-wrapper .mapa-u-pin:nth-of-type(2)::after {
        content: '';
        display: block;
        background-size: contain;
        width: 100px;
        height: 100px;
        border-left: solid 1px black;
        border-bottom: solid 1px black;
        position: absolute;
        top: -95px;
        left: -101px;
    }


    #mapa-universidades .mapa-u-container .mapa-u-wrapper .mapa-u-pin:nth-of-type(3)::after {
        content: '';
        display: block;
        background-size: contain;
        width: 320px;
        height: 100px;
        border-right: solid 1px black;
        border-bottom: solid 1px black;
        position: absolute;
        top: -94px;
        left: 13px;
    }

    #mapa-universidades .mapa-u-container .mapa-u-wrapper .mapa-u-pin:nth-of-type(4)::after {
        content: '';
        display: block;
        background-size: contain;
        width: 128px;
        height: 146px;
        border-right: solid 1px black;
        border-top: solid 1px black;
        position: absolute;
        top: 6px;
        left: 13px;
    }

    #mapa-universidades .mapa-u-container .mapa-u-wrapper .mapa-u-pin:nth-of-type(5)::after {
        content: '';
        display: block;
        background-size: contain;
        width: 320px;
        height: 1px;
        border-bottom: solid 1px black;
        position: absolute;
        top: 6px;
        left: 13px;
    }

    #mapa-universidades .mapa-u-container .mapa-u-wrapper .mapa-u-pin:nth-of-type(6)::after {
        content: '';
        display: block;
        background-size: contain;
        width: 1px;
        height: 200px;
        border-right: solid 1px black;
        position: absolute;
        top: 14px;
        left: 6px;
    }

    #mapa-universidades .mapa-u-container .mapa-u-wrapper .mapa-u-pin:nth-of-type(7)::after {
        content: '';
        display: block;
        background-size: contain;
        width: 127px;
        height: 83px;
        border-right: solid 1px black;
        border-bottom: solid 1px black;
        position: absolute;
        top: 14px;
        left: -121px;
    }

    #mapa-universidades .mapa-u-container .mapa-u-wrapper .mapa-u-pin:nth-of-type(8)::after {
        content: '';
        display: block;
        background-size: contain;
        width: 102px;
        height: 36px;
        border-left: solid 1px black;
        border-top: solid 1px black;
        position: absolute;
        top: 7px;
        left: -104px;
    }


}