.st0 {
    fill: none;
    stroke: #ECECEC;
    stroke-width: 4.252;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
}

.st1 {
    fill-rule: evenodd;
    clip-rule: evenodd;
    fill: #D9D9D9;
}

.st2 {
    fill-rule: evenodd;
    clip-rule: evenodd;
    fill: none;
}

.st3 {
    fill: #1D1D1B;
}

.st4 {
    font-family: 'Hero-Light', Arial, sans-serif;
}

.st5 {
    font-size: 28.2967px;
}

.st6 {
    fill-rule: evenodd;
    clip-rule: evenodd;
    fill: none;
    stroke: #B4B4B3;
    stroke-width: 4.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
}

.st7 {
    fill-rule: evenodd;
    clip-rule: evenodd;
    fill: none;
    stroke: #B4B4B3;
    stroke-width: 7.9999;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
}

.st8 {
    fill-rule: evenodd;
    clip-rule: evenodd;
    fill: none;
    stroke: #989A9A;
    stroke-width: 4.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
}

.st9 {
    fill-rule: evenodd;
    clip-rule: evenodd;
    fill: #AFAFAF;
    stroke: #FFFFFF;
    stroke-width: 1.0001;
    stroke-miterlimit: 10;
}

.st10 {
    fill-rule: evenodd;
    clip-rule: evenodd;
    fill: #AFAFAF;
}

.st11 {
    fill: #FFFFFF;
}

.st12 {
    font-size: 27px;
}

.st13 {
    opacity: 0.31;
}

.nav-link {
    transition: background-color 0.3s ease;
}

svg text {
    transition: fill 0.3s ease;
}

svg line {
    transition: stroke 0.3s ease;
}

.bottom-15 {
    bottom: 3.75rem;
}

body {
    background-color: #ffffff;
    font-family: Hero-Light, Arial, sans-serif;
}

.p-1 {
    filter: grayscale(100%) brightness(115%);
    display: flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
}

.p-1:hover {
    filter: none;
}

.pinterest {
    filter: grayscale(100%) brightness(170%) contrast(100%);
}

.hero-svg {
    width: 100%;
    height: auto;
    max-height: 100vh;
    display: block;
}

@media (max-width: 520px), (max-height: 300px) { /*resolucion iPhone vertical*/

    .hero-svg {
        width: 100vm;
        height: 100hm;
        transform: translateX(-8%) viewBox(0 0 320 768);
    }

    #logodiv {
        position: absolute;
        right: 5vw;
        bottom: 5vh;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .p-1 {
        display: flex;
        width: 32px;
        height: 32px;
        align-items: center;
        justify-content: center;
    }

    #navdiv {
        display: none; /*botones inferiores*/
    }

    #g207 {
        transform: translateY(-89%) scale(3) translateX(-22.5%); /*hipertext*/
    }

    #g200 {
        transform: translateX(-57%) scale(3.7) translateY(-40%); /*SVG*/
    }

    #image200 {
        transform: translateX(26%) translateY(57%); /*Efimera logo*/
    }
}

@media (max-width: 300px), (max-height: 600px) { /*resolucion iPhone horizontal*/

    #navdiv {
        width: 103vw;
        font-size: 9.7px;
        height: 2vh;
    }

    #logodiv {
        position: absolute;
        right: 4rem;
        bottom: 7rem;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .p-1 {
        display: flex;
        width: 28px;
        height: 28px;
        align-items: center;
        justify-content: center;
    }

}

@font-face {
    font-family: "Hero-Light";
    src: url("https://db.onlinewebfonts.com/t/e8ac99972012d5f7a415f5299e95ffdf.eot");
    src: url("https://db.onlinewebfonts.com/t/e8ac99972012d5f7a415f5299e95ffdf.eot?#iefix")format("embedded-opentype"),
        url("https://db.onlinewebfonts.com/t/e8ac99972012d5f7a415f5299e95ffdf.woff2")format("woff2"),
        url("https://db.onlinewebfonts.com/t/e8ac99972012d5f7a415f5299e95ffdf.woff")format("woff"),
        url("https://db.onlinewebfonts.com/t/e8ac99972012d5f7a415f5299e95ffdf.ttf")format("truetype"),
        url("https://db.onlinewebfonts.com/t/e8ac99972012d5f7a415f5299e95ffdf.svg#Hero Light Regular")format("svg");