.bggreen {
    background-color: var(--verded);
}

.bgblack {
    background-color: var(--negrod);
}

.bgblanco {
    background-color: var(--blanco);
}


.bordergreen {
    border: 2px solid var(--verded);
}

.borderblack {
    border: 2px solid var(--negrod);
}

.borderblanco {
    border: 2px solid var(--blanco);
}

/* Header -------------------- */

.eleh1 {
    width: 35rem;
    height: 1.5rem;
    position: absolute;
    top: 20vw;
    left: 30vw;
    opacity: 0.5;
}

.eleh2 {
    width: 2rem;
    height: 10rem;
    position: absolute;
    top: 25vw;
    right: 15vw;
    opacity: 0.5;
}

.eleh3 {
    width: 10rem;
    height: 2rem;
    position: absolute;
    top: 30vw;
    right: 10vw;
    opacity: 0.5;
}

.eleh4, .eleh6 {
    width: 1.25rem;
    height: 6rem;
    position: absolute;
    top: 15vw;
    right: 15vw;
    opacity: 0.5;
}

.eleh4 {
    rotate: 45deg;
}

.eleh6 {
    rotate: 135deg;
    width: 0.75rem;
}

.eleh5 {
    width: 2rem;
    height: 15rem;
    position: absolute;
    top: 35vw;
    right: 20vw;
    opacity: 0.5;
}


.eleh7 {
    width: 9rem;
    position: absolute;
    top: 25vw;
    right: 32vw;
    opacity: 0.5;
}


.eleh8{
    width: 1.5rem;
    height: 7.5rem;
    position: absolute;
    top: 12vw;
    right: 45vw;
    opacity: 0.5;
}

@media (max-width: 900px) {
    .eleh1 {
        height: .75rem;
        width: 10rem;
        top: 27vh;
        left: 30vh;
    }

    .eleh2 {
        width: 1rem;
        height: 3rem;
        right: 5vh;
        top: 25vh;
    }

    .eleh4 {
        top: 11vh;
        right: 9vh;
    }

    .eleh6 {
        top: 11vh;
        right: 9vh;
    }

    .eleh3 {
        top: 20vh;
        left: 30vh;
    }

    .eleh7, .eleh5 {
        display: none;
    }

}

/* Nosotros -------------- */


.elen1 {
    width: 9rem;
    height: 2rem;
    opacity: 0.75;
    position: absolute;
    top: 8vw;
    left: 35vw;
}

.elen2 {
    width: 17rem;
    height: 1.5rem;
    opacity: 0.75;
    position: absolute;
    top: 17vw;
    right: 25vw;
}

.elen3 {
    width: 2rem;
    height: 4rem;
    opacity: 0.75;
    position: absolute;
    top: 20vw;
    right: 7vw;
}

.elen4 {
    width: 3rem;
    height: 10rem;
    opacity: 0.25;
    position: absolute;
    top: 5.5vw;
    right: 15vw;
    rotate: -45deg;
}

.elen5 {
    width: 10rem;
    opacity: 1;
    position: absolute;
    top: 12vw;
    left: 15vw;
    z-index: 1;
}

.elen6 {
    width: 1.5rem;
    height: 8rem;
    opacity: 1;
    position: absolute;
    top: 9vw;
    left: 22vw;
    z-index: 0;
}

.elen7 {
    width: 1.25rem;
    height: 17rem;
    opacity: 0.75;
    position: absolute;
    top: 15vw;
    right: 35vw;
}

.elen8 {
    width: 2rem;
    height: 7rem;
    opacity: 0.75;
    position: absolute;
    top: 8vw;
    right: 16vw;
    rotate: 45deg;
}

.elen9 {
    width: 12rem;
    height: 5rem;
    opacity: 0.75;
    position: absolute;
    top: 25vw;
    right: 15vw;
}

@media (max-width: 900px) {
    .elen1, .elen2, .elen8, .elen4 {
        display: none;
    }

    .elen9 {
        height: 2rem;
        top: 13vh;
    }

    .elen3 {
        width: 4rem;
        top: 15vh;
    }

    .elen5 {
        width: 6rem;
        top: 25vh;
    }
}

/* NOSOTROS ----------------- */

/* n1 ------------------------------------------- */

.elen1n1 {
    width: 12rem;
    height: 5rem;
    opacity: 0.75;
    position: absolute;
    top: 3vw;
    left: 20vw;
}

.elen1n2 {
    width: 15rem;
    height: 2rem;
    opacity: 0.75;
    position: absolute;
    top: 5.5vw;
    right: 12vw;
}

.elen1n3 {
    width: 12rem;
    height: 2rem;
    opacity: 1;
    position: absolute;
    top: 5vw;
    left: 15vw;
}

.elen1n4 {
    width: 12rem;
    height: 5rem;
    rotate: 90deg;
    opacity: 0.5;
    position: absolute;
    top: 4.5vw;
    right: 15vw;
}

@media (max-width: 900px) {

    .elen1n1 {
        width: 12rem;
        height: 3.5rem;
        top: 0vw;
        left: 12vw;
    }

    .elen1n2 {
        width: 5rem;
        height: 2rem;
        top: 10vw;
        right: 0vw;
    }

    .elen1n3 {
        width: 6rem;
        height: 1.5rem;
        top: 5vw;
        left: -4vw;
    }

    .elen1n4 {
        width: 6rem;
        height: 5rem;
        rotate: 90deg;
        opacity: 0.5;
        position: absolute;
        top: 0vw;
        right: 5vw;
    }

}

/* n2 ----------------------------------- */


.espiral {
    width: 10rem;
    height: 1.75rem;
    position: relative;
    margin: auto;
}

.elen2n1 {
    width: 10rem;
    height: 1.75rem;
    opacity: 0.75;
    position: absolute;
    top: 0;

}

.elen2n3 {
    width: 10rem;
    height: 1.75rem;
    opacity: 0.75;
    position: absolute;
    top: 0;
    left: 0vw;
    rotate: 45deg;
}

.elen2n6 {
    width: 10rem;
    height: 1.75rem;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0vw;
    rotate: -45deg;
}



.elen2n2 {
    width: 9rem;
    height: 2.75rem;
    opacity: 0.75;
    position: absolute;
    top: 8vw;
    right: 10vw;
}


.elen2n4 {
    width: 2rem;
    height: 12rem;
    opacity: 0.75;
    position: absolute;
    top: 5vw;
    right: 13vw;
}

.elen2n5 {
    width: 9rem;
    height: 6rem;
    opacity: 0.75;
    position: absolute;
    top: 15vw;
    left: 12vw;
}

.elen2n7 {
    width: 8rem;
    height: 5rem;
    opacity: 0.75;
    position: absolute;
    top: 12vw;
    left: 13vw;
    rotate: 90deg;
}


@media (max-width: 900px) {

    .espiral {
        width: 6rem;
        height: 1rem;
    }

    .elen2n1 {
        width: 6rem;
        height: 1rem;
    }

    .elen2n3 {
        width: 6rem;
        height: 1rem;
    }

    .elen2n6 {
        width: 6rem;
        height: 1rem;
    }



    .elen2n2 {
        width: 5rem;
        height: 2rem;
        top: 8vh;
        right: 0vw;
    }

    .elen2n4 {
        width: 1rem;
        height: 7rem;
        top: 10vw;
    }

    .elen2n5 {
        width: 5rem;
        height: 1rem;
        top: 30vw;
    }

    .elen2n7 {
        width: 5rem;
        top: 2vw;
    }
}

/* n3 ------------------------------------- */


.camino {
    margin: auto;
    width: 60%;
    height: .75rem;
    position: relative;
}

.elen3n1 {
    opacity: 0.5;
    width: .75rem;
    height: 8rem;
    position: absolute;
    top: 0;
    left: 0;
}

.elen3n2 {
    opacity: 0.5;
    width: 100%;
    height: 0.75rem;
    position: absolute;
    top: 0;
    left: 0;
}

.elen3n3 {
    opacity: 0.5;
    width: .75rem;
    height: 9rem;
    position: absolute;
    bottom: 0;
    right: 0;
}

.elen3n6 {
    width: 1.5rem;
    height: 1.5rem;
    position: absolute;
    top: 7rem;
    left: -.45rem;
    rotate: 45deg;
}

.elen3n8 {
    width: 1.5rem;
    height: 1.5rem;
    position: absolute;
    top: -9rem;
    right: -.35rem;
    rotate: 45deg;
}
/*  */

.elen3n4 {
    width: 2rem;
    height: 9rem;
    opacity: 0.75;
    position: absolute;
    top: 6vw;
    left: 16vw;
}

.elen3n5 {
    width: 2rem;
    height: 9rem;
    opacity: 0.75;
    position: absolute;
    top: 18vw;
    right: 13vw;
}

.elen3n7 {
    width: 9rem;
    height: 9rem;
    opacity: 0.75;
    position: absolute;
    top: 8vw;
    left: 14vw;
}

@media (max-width: 900px) {
    .camino {
        width: 90%;
    }

    .elen3n1, .elen3n3 {
        display: none;
    }

    .elen3n6, .elen3n8 {
        width: 1rem;
        height: 1rem;
        top: -0.1rem;
    }

    /*  */

    .elen3n4 {
        width: 1.5rem;
        height: 5rem;
        top: 2vw;
        left: 16vw;
    }

    .elen3n5 {
        width: 1.5rem;
        height: 6rem;
        top: 18vw;
        right: 10vw;
    }

    .elen3n7 {
        width: 6rem;
        top: 4vw;
        left: 10vw;
    }
}


/* n4 -------------------------------- */

.elen4n1 {
    width: 9rem;
    height: 1.5rem;
    opacity: 1;
    position: absolute;
    top: 7.5vw;
    left: 10vw;
}

.elen4n2 {
    width: 9rem;
    height: 1.5rem;
    opacity: .75;
    position: absolute;
    top: 7.5vw;
    left: 10vw;
    rotate: 45deg;
}

.elen4n3 {
    width: 9rem;
    height: 3rem;
    opacity: .75;
    position: absolute;
    top: 5vw;
    right: 10vw;
}

.elen4n4 {
    width: 9rem;
    height: 9rem;
    opacity: 0.75;
    position: absolute;
    top: 3vw;
    right: 14vw;
    rotate: 90deg;
}

@media (max-width: 900px) {

    .elen4n1 {
        width: 6rem;
        height: 1rem;
        top: 15vw;
        left: 8vw;
    }

    .elen4n2 {
        width: 6rem;
        height: 1rem;
        top: 15vw;
        left: 8vw;
        rotate: 45deg;
    }

    .elen4n3 {
        width: 6rem;
        height: 2rem;
        top: 10vw;
        right: 2vw;
    }

    .elen4n4 {
        width: 4rem;
        top: 3vw;
        right: 14vw;
        rotate: 90deg;
    }

}

/* contacto nosotros --------------------------- */

.elenc1 {
    width: 7.5vw;
    opacity: .75;
    position: absolute;
    top: 8vw;
    right: 25vw;
}

.elenc2 {
    width: 7.5vw;
    opacity: .75;
    position: absolute;
    top: 8vw;
    left: 25vw;
}

@media (max-width: 900px) {
    .elenc1 {
        width: 5rem;
        opacity: .75;
        position: absolute;
        top: 4rem;
        right: 17.5vw;
    }

    .elenc2 {
        width: 5rem;
        opacity: .75;
        position: absolute;
        top: 4rem;
        left: 17.5vw;
    }
}