* {
    font-family: 'Fira Sans Condensed', 'sans-serif';
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

#colorgap {
    color: #e3686b;
}

.arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 10vw;
}

.arrow-home {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 10vw;
    margin-top: -5vw;
}

.arrow-home img {
    height: 3vw;
    width: 3vw;
}

.arrow img {
    height: 3vw;
    width: 3vw;
}

#solutions-text-img2 {
    position: absolute;
    bottom: 0;
    color: black;
    margin-left: 0.7vw;
    font-size: 1vw;
    font-weight: bold;
}

@media (orientation: portrait) {
    .arrow {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 20vw;
    }

    .arrow-home {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 10vw;
        margin-top: -15vw;
    }

    .arrow-home img {
        height: 10vw;
        width: 10vw;
    }

    .arrow img {
        height: 10vw;
        width: 10vw;
    }

    #solutions-text-img2 {
        position: absolute;
        bottom: 0;
        color: black;
        margin-left: 0.7vw;
        font-size: 2vw;
        font-weight: bold;
    }
}


/* ========================= CANVAS ========================== */

/* ========================== NAVBAR ========================= */

.navbar {
    width: 65vw;
    position: fixed;
    top: 3vw;
    right: 0vw;
    z-index: 999;
}

.navbar-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    transition: background-color 1s ease;
}

.grey-background {
    background-color: rgb(204, 204, 204);
}


.navbar-container a {
    text-decoration: none;
    color: rgb(255, 255, 255);
    font-size: 1.5vw;
    font-weight: bold;
    opacity: 0;
    pointer-events: none;
    margin-left: 2vw;
}

.navbar-container a:hover {
    color: #e3686b;
    text-shadow: 0px 0px 8px #e3686a7e;
}

.navbar-container a:not(:last-child) {
    margin-right: 1vw;
}

.navbarcolor {
    color: #e3686b;
}

.logo {
    margin-top: -0.3vw;
    font-size: 3vw;
    color: #e3686b;
    cursor: pointer;
    width: auto;
    margin-left: 5vw;
}

.idioma a.selected {
    color: #e3686b;
}

.idioma {
    margin-right: 2vw;
}

#idiomamargin {
    margin-right: -1vw;
}


@media (orientation: portrait) {

    * {
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    }

    .navbar {
        width: 100%;
        position: fixed;
        top: 3%;
        right: 0%;
        z-index: 999;
    }

    .navbar-container {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        transition: background-color 1s ease;
        padding: 1vw;
    }

    .navbar-container a {
        text-decoration: none;
        color: rgb(255, 255, 255);
        font-size: 2.7vw;
        font-weight: bold;
        opacity: 0;
        pointer-events: none;
        text-align: center;
    }

    .navbar-container a:hover {
        color: #e3686b;
        text-shadow: 0px 0px 8px #e3686a7e;
    }

    .navbar-container a:not(:last-child) {
        margin-right: 0.7vw;
    }

    .logo {
        margin-top: -1vw;
        font-size: 200%;
        color: #e3686b;
        cursor: pointer;
        width: auto;
        margin-left: 3%;
        margin-right: 2%;
    }

    .idioma a.selected {
        color: #e3686b;
    }

    .idioma {
        margin-right: 2vw;
        display: flex;
    }

    #idiomamargin {
        margin-right: 0vw;
    }

}

/* ------------------------------------ HOMEPAGE ------------------------------------ */

.page-homepage {
    margin: 0 auto;
    width: 80vw;
    height: 100vh;
    display: flex;
    align-items: center;
}

.page {
    margin: 0 auto;
    width: 80vw;
    height: 100%;
    display: flex;
    align-items: center;
}

.homepage img {
    width: auto;
    max-width: 100%;
    height: 100%;
    max-height: 98vh;
    transform: scaleX(-1);
    position: absolute;
    top: 0;
    margin-top: 3vw;
}

.homepage-title {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.homepage h1 {
    font-size: 8vw;
    color: #bcdaa5;
}

.homepage-p {
    display: flex;
    justify-content: flex-end;
}

.homepage p {
    font-size: 2vw;
    color: white;
    font-weight: bold;
    width: 46%;
    text-align: right;
    background-color: transparent;
    text-shadow: 0 0.3vw 0.6vw rgba(0, 0, 0, 0.1);
}

#backtext {
    background-color: rgba(0, 0, 0, 0.849);
}

@media (orientation: portrait) {
    .page-homepage {
        margin: 0 auto;
        width: 80vw;
        height: auto;
        height: 100vh;
        display: flex;
        align-items: center;
    }

    .page {
        margin: 0 auto;
        width: 95vw;
        height: 85vw;
        display: flex;
    }

    .homepage-img {
        display: flex;
        height: 100%;
        justify-content: center;
        width: 80vw;
    }

    .homepage img {
        width: 100vh;
        max-width: 100%;
        height: 87vh;
        max-height: 100vh;
        transform: scaleX(-1);
        position: absolute;
        top: 12vw;
        margin-top: 3vw;
    }


    .homepage-title {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .homepage h1 {
        font-size: 17vw;
        text-align: center;
        text-shadow: 0 0vw 2vw rgba(0, 0, 0, 0.658);
    }

    .homepage p {
        font-size: 5vw;
        width: 100%;
        text-align: center;
    }

    .homepage-p {
        margin-top: 50%;
    }
}


/*-------------------- PROJECTS ------------------------ */

.projects-container {
    width: 80vw;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

#projects-title {
    display: flex;
    flex-direction: column;
    align-content: space-around;
    align-items: flex-start;
    left: 0;
}

#projects-title h1 {
    color: rgb(151, 151, 151);
    text-decoration: underline;
    font-size: 1.5vw;
    font-weight: 100;
}

#projects-title p {
    margin-top: -0.5vw;
    font-size: 1.2vw;
    color: #9c9c9c;
}

@media (orientation: portrait) {
    .projects-container {
        width: 85vw;
        height: 630vw;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        margin-top: 5vw;
    }

    #projects-title {
        display: flex;
        flex-direction: column;
        align-content: space-around;
        align-items: flex-start;
        left: 0;
    }

    #projects-title h1 {
        color: rgb(151, 151, 151);
        text-decoration: underline;
        font-size: 4vw;
        font-weight: 100;
    }

    #projects-title p {
        margin-top: -0.5vw;
        font-size: 3.8vw;
        color: #9c9c9c;
    }
}

/* ========================= CARROUSEL ========================= */

.projects-carrousel {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 1vw;
}

.projects-cubo img {
    margin: 1vw;
    height: 18vw;
    width: 20vw;
    object-fit: cover;
    transition: opacity 0.5s;
    opacity: 70%;
}

.projects-cubo:hover img {
    opacity: 1;
}

.projects-cubo {
    border: 0.1vw solid black;
    margin-bottom: 2vw;
    position: relative;
    overflow: hidden;
}

.projects-startvideo {
    padding: 0vw;
    display: flex;
    position: absolute;
    z-index: 1;
    top: 11.5vw;
    left: 11vw;
    transform: translate(-50%, -70%);
}

.projects-startvideo img {
    height: 5vw;
    width: 5vw;
    filter: brightness(0) invert(0);
    transition: filter 0.6s;
}

.projects-startvideo:hover img {
    filter: brightness(0) invert(1);
}

.projects-intocubo {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.projects-intocubo p,
.projects-intocubo h2 {
    margin-top: -0.7vw;
    font-weight: bold;
}

.projects-intocubo p {
    font-size: 1vw;
}

.projects-intocubo h2 {
    color: #2b2b2b;
    font-size: 1.25vw;
}

.projects-intocubo img {
    height: 1.3vw;
    width: 1.3vw;
    position: absolute;
    right: 0;
    bottom: 0;
    margin-bottom: 1.1vw;
    cursor: pointer;
}

.projects-colorchange1 {
    color: rgb(83, 83, 83);
}

.projects-colorchange2 {
    color: #bcdaa5;
}

@media (orientation: portrait) {
    .projects-carrousel {
        display: flex;
        justify-content: center;
    }

    .projects-cubo img {
        margin: 2vw;
        height: 70vw;
        width: 81vw;
        object-fit: cover;
        transition: opacity 0.5s;
        opacity: 70%;
    }

    .projects-cubo:hover img {
        opacity: 1;
    }

    .projects-cubo {
        border: 0.1vw solid black;
        margin-top: 5vw;
        display: flex;
        align-items: center;
        flex-direction: column;
        align-content: center;
    }


    .projects-startvideo {
        padding: 0vw;
        display: flex;
        position: absolute;
        z-index: 1;
        transform: none;
        left: 30vw;
        top: 23vw;

    }

    .projects-startvideo img {
        height: 20vw;
        width: 20vw;
        filter: brightness(0) invert(0);
        transition: filter 0.6s;
    }

    .projects-startvideo:hover img {
        filter: brightness(0) invert(1);
    }

    .projects-intocubo {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 0vw;
    }

    .projects-intocubo p,
    .projects-intocubo h2 {
        margin-top: 1vw;
        font-weight: bold;
    }

    .projects-intocubo p {
        font-size: 3vw;
        margin-top: -2vw;
    }

    .projects-intocubo h2 {
        color: #2b2b2b;
        font-size: 4vw;
    }

    .projects-intocubo img {
        height: 5vw;
        width: 5vw;
        position: absolute;
        right: 0;
        bottom: 0;
        margin-bottom: 1.1vw;
        cursor: pointer;
    }

    .projects-colorchange1 {
        color: rgb(83, 83, 83);
    }

    .projects-colorchange2 {
        color: #bcdaa5;
    }
}

/* ==================== VIDEO ====================== */

#modal {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0;
    width: 100vw;
    height: 100vw;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
}

#modal-content {
    display: flex;
    justify-content: center;
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 1vw;
    border: 0.1vw solid #e3686b;
    width: 35vw;
    max-width: 80vw;
    box-shadow: 0 0 1vw #e3686a65;
    animation-duration: 1.3s;
    text-align: center;
}

#modal video {
    margin-left: 3.5vw;
    width: 25vw;
}

@keyframes animatetop {
    from {
        top: -50vw;
        opacity: 0;
    }

    to {
        top: 0;
        opacity: 1;
    }
}

@keyframes animateclose {
    from {
        top: 0;
        opacity: 1;
    }

    to {
        top: -50vw;
        opacity: 0;
    }
}

.close {
    margin-left: 2vw;
    margin-top: -1vw;
    color: #000000;
    float: right;
    font-size: 3vw;
    font-weight: bold;
}

.close:hover,
.close:focus {
    text-decoration: none;
    cursor: pointer;
}

@media (orientation: portrait) {
    #modal {
        display: none;
        position: fixed;
        z-index: 1000;
        top: 0;
        width: 100vw;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.5);
    }

    #modal-content {
        display: flex;
        justify-content: center;
        position: relative;
        background-color: #fefefe;
        margin: auto;
        padding: 1vw;
        border: 0.1vw solid #e3686b;
        width: 80vw;
        max-width: 80vw;
        box-shadow: 0 0 1vw #e3686a65;
        animation-duration: 1.3s;
        text-align: center;
    }

    #modal video {
        margin-left: 3.5vw;
        width: 70vw;
    }

    @keyframes animatetop {
        from {
            top: -50vw;
            opacity: 0;
        }

        to {
            top: 0;
            opacity: 1;
        }
    }

    @keyframes animateclose {
        from {
            top: 0;
            opacity: 1;
        }

        to {
            top: -50vw;
            opacity: 0;
        }
    }

    .close {
        margin-left: 2vw;
        margin-top: -1vw;
        color: #000000;
        float: right;
        font-size: 8vw;
        font-weight: bold;
    }

    .close:hover,
    .close:focus {
        text-decoration: none;
        cursor: pointer;
    }
}

/*-------------- POPUP ----------- */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.popup {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0;
    width: 100vw;
    height: 100vh;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.5s;
}

.popup-content-guitarsalon {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    background-color: #fefefe;
    width: 50vw;
    margin: 0 auto;
    margin-top: 2vw;
    position: relative;
    border-radius: 1vw;
}

.popup-content-heavenly {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    background-color: #fefefe;
    width: 50vw;
    margin: 0 auto;
    margin-top: 2vw;
    position: relative;
    border-radius: 1vw;
}

.popup-content-viñaloriente {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    background-color: #fefefe;
    width: 50vw;
    margin: 0 auto;
    margin-top: 2vw;
    position: relative;
    border-radius: 1vw;
}

.popup-image {
    width: 25vw;
    object-fit: cover;
    border-top-right-radius: 0.9vw;
    border-bottom-right-radius: 0.9vw;
    height: 100%;
}

#popup-heavenly img {
    height: 32vw;
}

#popup-guitar img {
    height: 48vw;
}

#popup-viñaloriente img {
    height: 29vw;
}

.popup-text {
    width: 40%;
    font-size: 1vw;
    margin-left: 3vw;
    margin-top: 0.5vw;
    height: auto;
}


.popup-text button {
    display: block;
    margin: 1vw auto;
    font-size: 1vw;
    padding: 0.5vw;
    background-color: #bcdaa5;
    color: #000000;
    border: none;
    border-radius: 2vw;
    cursor: pointer;
}

.popup-text a {
    text-decoration: none;
    color: black;
    font-weight: bold;
}



.close2 {
    position: absolute;
    top: 0;
    right: 0;
    color: #000000;
    font-weight: bold;
    background-color: #bcdaa5;
    margin-right: 1vw;
    margin-top: 1vw;
    width: 2vw;
    height: 2vw;
    text-align: center;
    font-size: 1.6vw;
    border-radius: 5vw;
}

.close2:hover,
.close2:focus {
    text-decoration: none;
    cursor: pointer;
}

@media (orientation: portrait) {
    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    .popup {
        display: none;
        position: fixed;
        z-index: 1000;
        top: 0;
        width: 100vw;
        height: 100vh;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.5);
        animation: fadeIn 0.5s;
    }

    .popup-content {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        background-color: #fefefe;
        width: 50vw;
        margin: 0 auto;
        margin-top: 2vw;
        position: relative;
        border-radius: 1vw;
    }

    .popup-content-heavenly {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        background-color: #fefefe;
        width: 85vw;
        margin: 0 auto;
        margin-top: 15vw;
        position: relative;
        border-radius: 1vw;
    }

    .popup-content-viñaloriente {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        background-color: #fefefe;
        width: 85vw;
        margin: 0 auto;
        margin-top: 15vw;
        position: relative;
        border-radius: 1vw;
    }
    
    .popup-content-guitarsalon {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        background-color: #fefefe;
        width: 85vw;
        margin: 0 auto;
        margin-top: 15vw;
        position: relative;
        border-radius: 1vw;
    }
    .popup-image {
        object-fit: cover;
        border-top-right-radius: 0.9vw;
        border-bottom-right-radius: 0.9vw;
        height: 100%;
    }

    #popup-heavenly img {
        height: 115vw;
    }

    #popup-guitar img {
        height: 157vw;
    }

    #popup-viñaloriente img {
        height: 97vw;
    }

    .popup-text {
        width: 63%;
        font-size: 3vw;
        margin-left: 3vw;
        margin-top: 0.5vw;
        height: auto;
    }


    .popup-text button {
        display: block;
        margin: 3vw auto;
        font-size: 3vw;
        padding: 1.5vw;
        background-color: #bcdaa5;
        color: #000000;
        border: none;
        border-radius: 4vw;
        cursor: pointer;
    }

    .popup-text a {
        text-decoration: none;
        color: black;
        font-weight: bold;
    }



    .close2 {
        position: absolute;
        top: 0;
        right: 0;
        color: #000000;
        font-weight: bold;
        background-color: #bcdaa5;
        margin-right: 1vw;
        margin-top: 1vw;
        width: 5vw;
        height: 5vw;
        text-align: center;
        font-size: 4vw;
        border-radius: 5vw;
    }

    .close2:hover,
    .close2:focus {
        text-decoration: none;
        cursor: pointer;
    }

    .close2:hover,
    .close2:focus {
        text-decoration: none;
        cursor: pointer;
    }
}




/*------------------------------ SOLUTIONS ---------------------------------- */
#solutions-text-img {
    position: absolute;
    bottom: 0;
    color: white;
    margin-left: 0.7vw;
    font-size: 0.7vw;
    font-weight: 100;
}

/* 1st page */

.solutions-container1 {
    display: flex;
    align-items: center;
}

#solutions-image1 {
    position: relative;
    z-index: -1;
}

#solutions-image1 img {
    max-height: 100%;
    width: 35vw;
    max-width: 100%;
}

.solutions-text-container {
    margin-top: 8vw;
    margin-left: 2.6vw;
    margin-bottom: -1vw;
}

.solutions-text-container h1 {
    margin-top: 2vw;
    color: rgb(151, 151, 151);
    text-decoration: underline;
    font-size: 1.5vw;
    font-weight: 100;
}

.solutions-text-container p {
    margin-top: 1vw;
    font-size: 1.2vw;
    width: 80%;
    color: #9c9c9c;
}

.solutions-lista {
    font-size: 1.2vw;
    list-style-type: none;
    padding: 0;
    padding-left: 2.6vw;
}

.solutions-lista li {
    margin-bottom: 0.5vw;
}

.solutions-icono {
    color: #bcdaa5;
    margin-right: 0.5vw;
    font-weight: bold;
}


.solutions-title {
    margin-left: -23.4vw;
    margin-top: -3vw;
}

.solutions-title h1 {
    font-size: 7vw;
    margin-bottom: 2vw;
    color: white;
}

.solutions-title span {
    color: #bcdaa5;
}

.solutions-container2 img {
    height: 3vw;
    position: absolute;
    bottom: 1vw;
    left: 50%;
    transform: translateX(-50%);
}

@media (orientation: portrait) {

    #backnav55 {
        margin-left: 5vw;
    }

    #solutions-text-img {
        position: absolute;
        bottom: 0;
        color: white;
        margin-left: 0.7vw;
        font-size: 1.2vw;
        font-weight: 100;
    }

    .solutions-container1 {
        display: flex;
        align-items: center;
    }

    #solutions-image1 {
        position: relative;
        z-index: -1;
    }

    #solutions-image1 img {
        height: 75vw;
        width: 130vw;
    }

    .solutions-text-container {
        margin-top: 0vw;
        margin-left: 2.6vw;
        margin-bottom: -1vw;
    }

    .solutions-text-container h1 {
        margin-top: 2vw;
        color: rgb(151, 151, 151);
        text-decoration: underline;
        font-size: 4vw;
        font-weight: 100;
    }

    .solutions-text-container p {
        margin-top: 1vw;
        font-size: 3.3vw;
        width: 95%;
        color: #9c9c9c;
    }

    .solutions-lista {
        font-size: 2.7vw;
        list-style-type: none;
        padding: 0;
        padding-left: 2.6vw;
    }

    .solutions-lista li {
        margin-bottom: 0.5vw;
    }

    .solutions-icono {
        color: #bcdaa5;
        margin-right: 0.5vw;
        font-weight: bold;
    }

    .solutions-title {
        margin-left: -26.4vw;
        margin-top: -3vw;
    }

    .solutions-title h1 {
        font-size: 6.5vw;
        margin-bottom: 2vw;
        color: white;
    }

    .solutions-title span {
        color: #bcdaa5;
    }

    .solutions-container2 img {
        height: 3vw;
        position: absolute;
        bottom: 1vw;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* 2nd page */

.solutions-container2-1 {
    display: flex;
    align-items: center;
}

#solutions-image2-1 {
    position: relative;
    z-index: -1;
}

#solutions-image2-1 img {
    max-height: 100%;
    width: 35vw;
    max-width: 100%;
}

.solutions-text-container2 {
    margin-top: 11vw;
    margin-bottom: -1vw;
    text-align: right;
}

.solutions-text-container2 h1 {
    color: rgb(151, 151, 151);
    text-decoration: underline;
    font-size: 1.5vw;
    font-weight: 100;
    padding-right: 2.5vw;
}

.solutions-text-container2 p {
    margin-top: -1vw;
    font-size: 2.5vw;
    font-weight: bold;
    padding-right: 2.5vw;
}

.solutions-lista2 {
    text-align: left;
    font-size: 1.2vw;
    list-style-type: none;
    padding: 0;
    margin-left: 25vw;
}

.solutions-lista2 li {
    margin-bottom: 0.5vw;
}

.solutions-title2 {
    margin-left: 24.5vw;
    margin-top: -3vw;
    position: absolute;
}

.solutions-title2 h1 {
    font-size: 7vw;
    color: white;
    margin-top: 2vw;
}

.solutions-title2 span {
    color: #bcdaa5;
}

.solutions-container2-2 img {
    height: 3vw;
    position: absolute;
    bottom: 3.1vw;
    left: 30%;
    transform: translateX(-50%);
}

.solutions-icono2 {
    color: #bcdaa5;
    margin-left: 0.5vw;
    font-weight: bold;
    margin-right: 1vw;
}

#solutions-invisible {
    visibility: hidden;
    pointer-events: none;
    user-select: none;
}

@media (orientation: portrait) {


    .solutions-container2-1 {
        display: flex;
        align-items: center;
    }

    #solutions-image2-1 {
        position: relative;
        z-index: -1;
    }

    #solutions-image2-1 img {
        height: 75vw;
        width: 80vw;
        max-width: 100%;
    }

    .solutions-text-container2 {
        margin-top: 11vw;
        margin-bottom: -1vw;
        text-align: right;
    }

    .solutions-text-container2 h1 {
        color: rgb(151, 151, 151);
        text-decoration: underline;
        font-size: 4vw;
        font-weight: 100;
        padding-right: 2.5vw;
    }

    .solutions-text-container2 p {
        margin-top: -1vw;
        font-size: 3.3vw;
        font-weight: bold;
        padding-right: 2.5vw;
    }

    .solutions-lista2 {
        text-align: left;
        font-size: 2.7vw;
        list-style-type: none;
        padding: 0;
        margin-left: 5vw;
    }

    .solutions-lista2 li {
        margin-bottom: 0.5vw;
    }

    .solutions-title2 {
        margin-left: 16vw;
        margin-top: -3vw;
        position: absolute;
    }

    .solutions-title2 h1 {
        font-size: 6.5vw;
        color: white;
        margin-top: 2vw;
    }

    .solutions-title2 span {
        color: #bcdaa5;
    }

    .solutions-container2-2 img {
        height: 3vw;
        position: absolute;
        bottom: 3.1vw;
        left: 30%;
        transform: translateX(-50%);
    }

    .solutions-icono2 {
        color: #bcdaa5;
        margin-left: 0.5vw;
        font-weight: bold;
        margin-right: 1vw;
    }

    #solutions-invisible {
        visibility: hidden;
        pointer-events: none;
        user-select: none;
    }
}

/* ========================= THIRD PAGE ========================= */

.solutions-container3 {
    height: 100vh;
    width: 80vw;
    margin: 0 auto;
    background-color: #6b6b6b;
}

.solutions-container3-3 {
    margin: auto;
    position: relative;
    top: 9vw;
    margin-left: 5vw;
    margin-right: 5vw;
}

.solutions-container3-3 h1 {
    position: absolute;
    top: -2vw;
    color: #bcdaa5;
    margin: 0;
    text-decoration: underline;
    font-weight: 100;
    font-size: 1.5vw;
    margin-top: 2vw;
    margin-left: 0.2vw;
}

.solutions-container3-3 p {
    color: #f8f8f8;
    font-size: 4vw;
    font-weight: bold;
    margin: 0;
    padding-top: 2vw;
}


.solutions-container3-3 img {
    filter: brightness(0) invert(1);
    height: 4vw;
    vertical-align: middle;
    margin: 0;
}

.solutions-container3-3 ul {
    color: #f8f8f8;
    font-size: 1.2vw;
    padding: 3vw;
    list-style-type: none;
    margin-left: 11vw;
    margin-right: 11vw;
}

.solutions-container3-3 li {
    margin-bottom: 1vw;
}

#solutions-flaticon img {
    height: 0.9vw;
    margin-top: -0.1vw;
    margin-right: 1vw;
}

.solutions-container3 #bajar {
    height: 3vw;
    position: absolute;
    bottom: 10%;
    left: 79%;
    transform: translateX(-50%);
}


@media (orientation: portrait) {
    .solutions-container3-3 {
        height: 100%;
        width: 90vw;        
        margin: 0px auto;
        background-color: rgb(107, 107, 107);
        top: 5vw;
        margin-bottom: 10vw;

    }


    .solutions-container3 {
        height: 0;
        width: 90vw;        
        margin: 0px auto;
        background-color: rgb(107, 107, 107);
    }

    .solutions-container3-3 ul {
        color: #f8f8f8;
        font-size: 3.3vw;
        list-style-type: none;
        margin-left: 0vw;
        margin-right: 0vw;
        padding: 0vw 6vw 6vw;
    }

    .solutions-container3-3 h1 {
        position: relative;
        top: 5vw;
        left: 5vw;
        color: #bcdaa5;
        margin: 0;
        text-decoration: underline;
        font-weight: 100;
        font-size: 4vw;
    }

    .solutions-container3-3 p {
        color: #f8f8f8;
        font-size: 6vw;
        font-weight: bold;
        padding: 5vw;
    }

    .solutions-container3-3 img {
        filter: brightness(0) invert(1);
        height: 3.5vw;
        vertical-align: middle;
        margin: 0;
    }


    .solutions-container3-3 li {
        margin-bottom: 2vw;
    }

    #solutions-flaticon img {
        height: 2vw;
        margin-top: -0.1vw;
        margin-right: 1vw;
    }
}

/* ========================= FOURTH PAGE ========================= */

.solutions-container4 {
    height: 60vh;
    width: 80vw;
    margin: 0 auto;
}

.solutions-title-container4 {
    margin-left: 5vw;
    margin-right: 5vw;
}

.solutions-title4 {
    margin-top: -1vw;
    font-size: 4vw;
    font-weight: bold;
}

#solutions-nametitle4 {
    color: #bcdaa5;
    font-weight: 100;
    text-decoration: underline;
    font-size: 1.5vw;
    margin-left: 0.2vw;
}

.solutions-targets {
    margin-top: -1vw;
    margin-left: 5.1vw;
    margin-right: 5vw;
    display: flex;
    justify-content: space-between;
}

#solutions-target1,
#solutions-target2,
#solutions-target3 {
    width: 19vw;
}


#solutions-target1 h1,
#solutions-target2 h1,
#solutions-target3 h1 {
    display: flex;
    flex-wrap: wrap;
    height: 4vw;
    align-content: center;
}

#solutions-target1 {
    margin-right: auto;
}

#solutions-target3 {
    margin-left: auto;
}

.solutions-targets h1 {
    font-size: 1.7vw;
    font-weight: bold;
}

.solutions-targets p {
    padding-top: 0.8vw;
    font-size: 1.2vw;
    font-weight: lighter;
    color: #474747;
    margin-bottom: -1vw;
}

.solutions-container4 #bajar {
    height: 3vw;
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
}

@media (orientation: portrait) {
    
    .solutions-container4 {
        height: 220vw;
        width: 90vw;
        margin: 0 auto;
    }

    .solutions-title-container4 {
        margin-left: 0vw;
        margin-right: 0vw;
        padding-top: 3vw;
    }

    .solutions-title4 {
        font-size: 7vw;
        font-weight: bold;
        text-align: center;
    }

    #solutions-nametitle4 {
        color: #bcdaa5;
        font-weight: 100;
        text-decoration: underline;
        font-size: 4vw;
        text-align: center;
    }

    .solutions-targets {
        margin-top: 0vw;
        margin-left: 0vw;
        margin-right: 0vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-wrap: wrap;
        align-content: center;
        justify-content: none;
    }

    #solutions-target1,
    #solutions-target2,
    #solutions-target3 {
        width: 55vw;
        display: flex;
        text-align: center;
        flex-direction: column;
        align-items: center;
        margin-bottom: 3vw;
    }

    .solutions-targets h1 {
        font-size: 4vw;
        font-weight: bold;
        margin-bottom: 5vw;
    }

    .solutions-targets p {
        font-size: 3.3vw;
        font-weight: lighter;
        color: #474747;
        margin-bottom: -1vw;
    }
}

/* ========================= FIFTH PAGE ========================= */

.solutions-container5 {
    height: 100vh;
    width: 80vw;
    max-width: 80vw;
    margin: 0 auto;
    background-color: #6b6b6b;
    position: relative;
}

.solutions-title-container5 {
    margin-left: 5vw;
    margin-right: 25vw;
    padding-top: 5vw;
    color: #f8f8f8;
    position: absolute;
    z-index: 1;
}

.solutions-title-container5 h1 {
    font-size: 4vw;
    margin-top: -0.5vw;
}

.solutions-title-container5 h2 {
    font-size: 1.5vw;
    font-weight: 100;
    text-decoration: underline;
    margin-left: 0.2vw;
}

.solutions-title-container5 h3 {
    font-size: 1.5vw;
    font-weight: 500;
    margin-top: -1vw;
    margin-right: vw;
}

#solutions-color {
    margin-top: -1vw;
    font-size: 1.5vw;
    font-weight: bold;
    color: #e3686b;

}

.solutions-img-container5 {
    position: absolute;
    bottom: 0;
    width: 100%;
}

.solutions-img-container5 img {
    width: 80vw;
    height: 28vw;
}

#solutions-buttonimg {
    display: flex;
    margin-top: -4.5vw;
    margin-right: -2vw;
}

#solutions-buttonimg #subir {
    width: 3vw;
    cursor: pointer;
    transform: rotate(180deg);
    margin-left: auto;
    text-align: right;
    margin-right: -5vw;
}

@media (orientation: portrait) {
    .solutions-container5 {
        margin: 0 auto;
        background-color: #6b6b6b;
        height: 120vw;
        width: 95vw;
        margin-top: 5vw;
        margin-bottom: 5vw;
        max-width: 95vw;
    }

    .solutions-title-container5 {
        margin-left: 5vw;
        margin-right: 14vw;
        padding-top: 5vw;
        color: #f8f8f8;
        position: absolute;
        z-index: 1;
    }

    .solutions-title-container5 h1 {
        font-size: 7vw;
        margin-top: -0.5vw;
    }

    .solutions-title-container5 h2 {
        font-size: 4vw;
        font-weight: 100;
        text-decoration: underline;
        margin-left: 0.2vw;
    }

    .solutions-title-container5 h3 {
        font-size: 3.3vw;
        font-weight: 500;
        margin-top: -1vw;
    }

    #solutions-color {
        margin-top: -1vw;
        font-size: 2.8vw;
        font-weight: bold;
        color: #e3686b;
    }

    .solutions-img-container5 {
        position: absolute;
        bottom: 0;
        width: 100%;
    }

    .solutions-img-container5 img {
        width: 95vw;
        height: 60vw;
    }


}

/* ========================== ABOUT ME ========================= */

.aboutme-container {
    display: flex;
    flex-direction: column;
    width: 80vw;
    margin: 0 auto;
    height: 36vw;
}

.aboutme-text-container {
    display: flex;
    flex-direction: column;
}

.aboutme-text-container p {
    font-size: 1.5vw;
    font-weight: 100;
    color: #9c9c9c;
    margin-bottom: -1vw;

}

#aboutme-title {
    margin: 0;
    font-size: 1.5vw;
    font-weight: 100;
    color: #bcdaa5;
    text-decoration: underline;
}


#aboutme-subtitle2 {
    font-size: 1vw;
    font-weight: 100;
    color: #9c9c9c;
    margin-top: -1.2vw;
}

.aboutme-opiniones {
    margin-top: 5vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: 0 auto;

}


#aboutme-opinion {
    display: flex;
    flex-direction: column;
    width: 28vw;
    height: auto;
}

#aboutme-text1 {
    display: flex;
    align-items: center;
    font-size: 1.3vw;
    height: 25vw;
    width: 23vw;
}

#aboutme-text2 {
    display: flex;
    margin-left: 0vw;
    align-items: center;
}

#aboutme-text2 img {
    width: 3vw;
    border: 0.1vw solid rgba(0, 0, 0, 0.295);
    border-radius: 8vw;
}

#aboutme-text3 {
    margin-left: 3vw;
}

#aboutme-text3 h1 {
    font-size: 1vw;
}

#aboutme-text3 h3 {
    margin-top: -0.5vw;
    font-size: 1vw;
    font-weight: 100;
}

@media (orientation: portrait) {

    .aboutme-container {
        margin: 0 auto;
        width: 95vw;
        height: 175vw;
        margin-top: 5vw;
    }

    .aboutme-text-container {
        display: flex;
        flex-direction: column;
        margin: 0 auto;
        text-align: center;
    }


    .aboutme-text-container p {
        font-size: 3.8vw;
        font-weight: 100;
        color: #9c9c9c;
        margin-bottom: -1vw;

    }

    #aboutme-title {
        font-size: 4vw;
        font-weight: 100;
        color: #bcdaa5;
        text-decoration: underline;
        text-align: center;
    }


    #aboutme-subtitle2 {
        font-size: 2vw;
        font-weight: 100;
        color: #9c9c9c;
        margin-top: -1.2vw;
    }

    .aboutme-opiniones {
        margin-top: 5vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }


    #aboutme-opinion {
        display: flex;
        flex-direction: column;
        width: 80vw;
        height: auto;
        margin-right: 0;
        margin-top: 0;
    }

    #aboutme-text1 {
        display: flex;
        align-items: center;
        font-size: 3vw;
        height: auto;
        width: 80vw;
    }

    #aboutme-text2 {
        display: flex;
        margin-left: 0vw;
        align-items: center;
    }

    #aboutme-text2 img {
        width: 10vw;
        border: 0.1vw solid rgba(0, 0, 0, 0.295);
        border-radius: 8vw;
    }

    #aboutme-text3 {
        margin-left: 3vw;
    }

    #aboutme-text3 h1 {
        font-size: 3vw;
        width: 30vw;
    }

    #aboutme-text3 h3 {
        margin-top: -0.5vw;
        font-size: 3vw;
        font-weight: 100;
        width: 30vw;
    }
}

/* ========================== CONTACT ========================= */

.contact-container {
    margin: 0 auto;
    background-image: url('/imgs/valldemosacontact.png');
    background-size: cover;
    background-position: center;
    position: relative;
    height: 50vw;
}

#contact-text-img {
    position: absolute;
    bottom: 0;
    right: 0;
    color: white;
    margin-right: 1vw;
    font-style: italic;
}

.contact-text {
    display: flex;
    font-size: 1vw;
    color: #bcdaa5;
    width: 45%;
    padding-top: 12vw;
    margin-left: 5vw;
    margin-bottom: 3vw;
}

.contact-parts {
    display: flex;
    flex-direction: row;
    color: white;
    font-size: 0.75vw;
    margin-left: 10vw;
    align-items: center;
}

.contact-parts a {
    text-decoration: none;
    color: white;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.contact-parts #linkrel:hover {
    color: #bcdaa5;
    text-decoration: underline;
    cursor: pointer;
}

.contact-parts img {
    width: 3vw;
    height: 3vw;
    filter: invert(1);
    margin-right: 1vw;
}

@media (orientation: portrait) {
    .contact-container {
        margin: 0 auto;
        background-image: url('/imgs/valldemosacontact.png');
        background-size: cover;
        background-position: center;
        position: relative;
        height: 70vw;
        width: 95vw;
        margin-top: 5vw;
        margin-bottom: 20vw;
    }

    #contact-text-img {
        position: absolute;
        bottom: 0;
        right: 0;
        color: white;
        font-style: italic;
        font-size: 2vw;
        margin-right: 3vw;
    }

    .contact-text {
        display: flex;
        font-size: 1.5vw;
        color: #bcdaa5;
        width: 45%;
        padding-top: 3vw;
        margin-left: 5vw;
        margin-bottom: 3vw;
    }

    .contact {
        display: flex;
        flex-direction: column;
        color: #bcdaa5;
        width: 45%;
        margin-bottom: 3vw;
    }


    .contact-parts {
        display: flex;
        flex-direction: row;
        color: white;
        font-size: 1vw;
        margin-left: 5vw;
    }

    .contact-parts a {
        text-decoration: none;
        color: white;
        transition: color 0.3s ease, text-shadow 0.3s ease;
    }

    .contact-parts #linkrel:hover {
        color: #bcdaa5;
        text-decoration: underline;
        cursor: pointer;
    }

    .contact-parts img {
        width: 3vw;
        height: 3vw;
        filter: invert(1);
        margin-right: 1vw;
    }
}



@media screen and (min-width: 768px) and (orientation: landscape) {

    .navbar {
        width: 65%;
        position: fixed;
        top: 3%;
        right: 0%;
        z-index: 999;
    }

    .navbar-container {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        transition: background-color 1s ease;
        padding: 1%;
    }

    .navbar-container a {
        text-decoration: none;
        color: rgb(255, 255, 255);
        font-size: 1.7vw;
        font-weight: bold;
        opacity: 0;
        pointer-events: none;
        text-align: center;
    }

    .page-homepage {
        margin: 0 auto;
        width: 80vw;
        height: 100vh;
        display: flex;
        align-items: center;
    }

    .page {
        margin: 0 auto;
        width: 80vw;
        height: 100%;
        display: flex;
    }

    .homepage {
        width: auto;
        height: auto;
    }

    .homepage img {
        position: absolute;
        top: 0;
        left: 0;
        width: auto;
        max-height: 100%;
        transform: scaleX(-1);
        z-index: -1;
        object-fit: cover;
        height: 95vh;
    }

    .homepage-title {
        position: none;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        margin-right: 0vw;
        margin-top: 5vw;
    }

    .homepage h1 {
        font-size: 9vw;
        text-align: right;
        margin: 0;
    }

    .homepage p {
        font-size: 2vw;
        width: 60%;
        text-align: right;
        margin-top: 8vw;
    }

    .arrow-home {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 10vw;
        margin-top: -12vw;
    }

    .arrow-home img {
        height: 3vw;
        width: 3vw;
    }

    .arrow img {
        height: 3vw;
        width: 3vw;
    }

    .projects-container {
        width: 80vw;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        margin-top: 8vw;
    }

    .solutions-container3-3 {
        height: 100%;
        width: 80vw;
        margin: 0px auto;
        background-color: rgb(107, 107, 107);
        top: 0vw;
    }


    .solutions-container3 {
        height: 0;
        width: 80vw;
        margin: 0px auto;
        background-color: rgb(107, 107, 107);
    }

    .solutions-container4 {
        height: 100%;
        width: 80vw;
        margin: 0 auto;
    }

    .solutions-container5 {
        height: 100%;
        width: 80vw;
        margin: 0 auto;
        background-color: #6b6b6b;
        position: relative;
    }

    .solutions-title-container5 {
        margin-left: 5vw;
        margin-right: 25vw;
        padding-top: 5vw;
        color: #f8f8f8;
        position: relative;
        z-index: 1;
    }

    .solutions-img-container5 {
        position: relative;
        bottom: 0;
        width: 100%;
    }

    .contact-container {
        margin: 0 auto;
        background-image: url(/imgs/valldemosacontact.png);
        background-size: cover;
        background-position: center;
        position: relative;
        height: 100%;
    }

    #projects-title h1 {
        color: rgb(151, 151, 151);
        text-decoration: underline;
        font-size: 2.5vw;
        font-weight: 100;
    }

    #projects-title p {
        margin-top: -0.5vw;
        font-size: 2vw;
        color: #9c9c9c;
    }

    .solutions-container1 {
        display: flex;
        align-items: center;
        margin-top: 2vw;
    }

    .solutions-text-container {
        margin-top: 1vw;
        margin-left: 2.6vw;
        margin-bottom: -1vw;
    }

    .solutions-text-container h1 {
        margin-top: 0vw;
        color: rgb(151, 151, 151);
        text-decoration: underline;
        font-size: 2.5vw;
        font-weight: 100;
    }

    .solutions-text-container p {
        margin-top: 1vw;
        font-size: 2vw;
        width: 80%;
        color: #9c9c9c;
    }

    #solutions-image1 img {
        max-height: none;
        width: 38vw;
        max-width: none;
    }

    .solutions-lista {
        font-size: 1.7vw;
        list-style-type: none;
        padding: 0;
        padding-left: 2.6vw;
    }

    .solutions-text-container2 h1 {
        color: rgb(151, 151, 151);
        text-decoration: underline;
        font-size: 2.5vw;
        font-weight: 100;
        padding-right: 2.5vw;
    }

    .solutions-lista2 {
        text-align: left;
        font-size: 1.7vw;
        list-style-type: none;
        padding: 0;
        margin-left: 25vw;
    }

    .solutions-container3-3 ul {
        color: #f8f8f8;
        font-size: 1.7vw;
        list-style-type: none;
        margin-left: 8vw;
        margin-right: 8vw;
    }

    .solutions-container3-3 h1 {
        position: relative;
        top: 3vw;
        left: 3vw;
        color: #bcdaa5;
        margin: 0;
        text-decoration: underline;
        font-weight: 100;
        font-size: 2.5vw;
    }

    .solutions-container3-3 p {
        color: #f8f8f8;
        font-size: 4vw;
        font-weight: bold;
        margin: 0;
        padding-top: 3vw;
        margin-left: 3vw;
    }

    .solutions-title-container4 {
        margin-left: 5vw;
        margin-right: 5vw;
    }

    #solutions-nametitle4 {
        color: #bcdaa5;
        font-weight: 100;
        text-decoration: underline;
        font-size: 2.5vw;
        margin-left: 0.2vw;
    }

    .solutions-targets p {
        padding-top: 0.8vw;
        font-size: 1.7vw;
        font-weight: lighter;
        color: #474747;
        margin-bottom: -1vw;
    }

    .solutions-targets h1 {
        font-size: 2vw;
        font-weight: bold;
    }

    #solutions-target1 h1,
    #solutions-target2 h1,
    #solutions-target3 h1 {
        display: flex;
        flex-wrap: wrap;
        height: 7vw;
        align-content: center;
    }

    .solutions-title-container5 h2 {
        font-size: 2.5vw;
        font-weight: 100;
        text-decoration: underline;
        margin-left: 0.2vw;
    }

    .solutions-title-container5 h3 {
        font-size: 2vw;
        font-weight: 500;
        margin-top: -1vw;
        margin-right: 0vw;
    }

    #solutions-color {
        margin-top: -1vw;
        font-size: 2vw;
        font-weight: bold;
        color: #e3686b;
    }

    #aboutme-title {
        margin: 0;
        font-size: 2.5vw;
        font-weight: 100;
        color: #bcdaa5;
        text-decoration: underline;
    }

    .aboutme-text-container p {
        font-size: 2vw;
        font-weight: 100;
        color: #9c9c9c;
        margin-bottom: -1vw;
    }

    .aboutme-text-container {
        margin-bottom: 3vw;
    }

    #aboutme-text1 {
        display: flex;
        align-items: center;
        font-size: 1.7vw;
        height: 30vw;
        width: 23vw;
    }

    #aboutme-text3 h1 {
        font-size: 1.5vw;
    }

    #aboutme-text3 h3 {
        margin-top: -0.5vw;
        font-size: 1.5vw;
        font-weight: 100;
    }

    .aboutme-container {
        display: flex;
        flex-direction: column;
        width: 80vw;
        margin: 0 auto;
        height: 100%;
    }

    #aboutme-text2 img {
        width: 5vw;
        border: 0.1vw solid rgba(0, 0, 0, 0.295);
        border-radius: 8vw;
    }

    .contact-text {
        display: flex;
        font-size: 1.3vw;
        color: #bcdaa5;
        width: 45%;
        padding-top: 8vw;
        margin-left: 7vw;
        margin-bottom: 3vw;
    }

    .contact-parts {
        display: flex;
        flex-direction: row;
        color: white;
        font-size: 1vw;
        margin-left: 7vw;
        align-items: center;
    }

    .contact-parts img {
        width: 5vw;
        height: 5vw;
        filter: invert(1);
        margin-right: 1vw;
    }

    .contact {
        padding-bottom: 15vw;
    }

    .projects-intocubo h2 {
        color: rgb(43, 43, 43);
        font-size: 1.5vw;
    }

    .projects-intocubo p {
        font-size: 1.2vw;
    }
}