@media (max-width:1400px) {
    #circle-photo {
        right:9.1rem;
    }
}

@media (max-width: 1260px) {
    #wrap {
        width: 78%;
        margin: 0px auto;
    }

    #aboutMe {
        width: 100%;
        height: auto;
    }

    #profile {
        width: 80%;
        height: 421px;
        gap: 3rem;
    }

    #description {
        margin-left: 5rem;
    }

    #circle-photo {
        position: absolute;
        width: 24rem;
        height: 24rem;
        top: 11rem;
        right: 11rem;
        background-color: #fdf0d5;
        border-radius: 22rem;
        z-index: 0;
        overflow: hidden;
    }

    #foto img {
        position: relative;
        width: 30rem;
        height: 46rem;
        float: right;
        overflow: hidden;
        object-fit: cover;
        z-index: 1;
    }

    #containerExperience {
        width: 97.9%;
        column-gap: 5rem;
    }

    #timelineExperience {
        width: 28rem;
        padding: 2rem 4rem;
    }

    #timelineEducation {
        height: 18rem;
        padding: 2rem 4rem;
    }

    #lineLanguages {
        width: 260px;
        height: 190px;
    }

    #containerLanguages {
        width: 98%;
    }

    #lineLanguages {
        width: 20rem;
    }

    #techContainer {
        width: 97.9%;
    }

    .box {
        width: 20%;
    }

    svg#oracle,
    svg#sql {
        max-width: 5rem;
    }

    .box>svg {
        width: 4.5rem;
        height: auto;
    }

    #boxProyect {
        width: 98%
    }

    footer {
        padding: 12px 0px 12px;
    }

    #menuIcon {
        display: none;
    }
}

@media (max-width: 1210px) {
    #wrap {
        width: 85%;
        margin: 0px auto;
    }

    #containerExperience {
        column-gap: 3rem;
    }
}

@media (max-width: 1180px) {
    #profile {
        gap: 2rem;
    }

    #description {
        margin-left: 3.5rem;
    }

    #circle-photo {
        width: 25rem;
        height: 25rem;
        top: 11rem;
        right: 10rem;
    }
}

@media (max-width: 1075px) {
    #profile {
        gap: 1rem;
    }

    #description {
        margin-left: 2rem;
    }

    #circle-photo {
        width: 24rem;
        height: 24rem;
        top: 12rem;
        right: 9rem;
    }

    #foto img {
        width: 28rem;
        height: 42rem;
    }

    #timelineExperience {
        width: 25rem;
    }

    .box {
        width: 20%;
    }
}

@media (max-width: 1036px) {
    #circle-photo {
        width: 23rem;
        height: 23rem;
        top: 13rem;
        right: 8.8rem;
    }

    #foto img {
        width: 27rem;
        height: 40rem;
    }

    #timelineExperience {
        width: 23rem;
        padding: 2rem 3rem;
    }

    #timelineEducation {
        height: 18rem;
        padding: 2rem 3rem;
    }

    #lineLanguages {
        width: 16rem;
    }

    svg#oracle {
        max-width: 4.5rem;
    }

    .box>svg,
    svg#sql {
        max-width: 4rem;
        height: auto;
    }
}

@media (max-width: 937px) {
    #circle-photo {
        right: 8rem;
    }

    #timelineExperience {
        width: 20rem;
    }

    #timelineEducation {
        width: 17rem;
        height: 22rem;
    }

    #itemList>.detailEducation {
        padding-top: 50px;
    }

    .box {
        width: 22%;
    }
}

@media (max-width: 910px) {
    #circle-photo {
        right: 7.8rem;
    }
}

@media (max-width: 870px) {
    #circle-photo {
        right: 6rem;
    }

    #description {
        margin-left: 1rem;
    }

    #menu {
        opacity: 0;
        transform: translatex(40px);
        transition-duration: 0.1s;
        pointer-events: none;
    }

    #menuIcon {
        display: block;
        border: none;
        float: right;
        margin: 0.6rem 2rem;
        background-color: transparent;
    }

    #lineLanguages {
        width: 14rem;
    }

    .hamburger .line {
        width: 35px;
        height: 5px;
        background-color: #C3A565;
        display: block;
        margin: 8px auto;
        -webkit-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }

    .hamburger:hover {
        cursor: pointer;
    }

    #hamburger-5.is-active {
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    #hamburger-5.is-active .line:nth-child(2) {
        -webkit-transition: none;
        -o-transition: none;
        transition: none;
    }

    #hamburger-5 .line:nth-child(2) {
        -webkit-transition-delay: 0.3s;
        -o-transition-delay: 0.3s;
        transition-delay: 0.3s;
    }

    #hamburger-5.is-active .line:nth-child(2) {
        opacity: 0;
    }

    #hamburger-5.is-active .line:nth-child(1),
    #hamburger-5.is-active .line:nth-child(3) {
        width: 29px;
        height: 6px;
        -webkit-transform-origin: right;
        -moz-transform-origin: right;
        -ms-transform-origin: right;
        -o-transform-origin: right;
        transform-origin: right;
    }

    #hamburger-5.is-active .line:nth-child(1) {
        -webkit-transform: translateY(15px) rotate(45deg);
        -ms-transform: translateY(15px) rotate(45deg);
        -o-transform: translateY(15px) rotate(45deg);
        transform: translateY(15px) rotate(45deg);
    }

    #hamburger-5.is-active .line:nth-child(3) {
        -webkit-transform: translateY(-15px) rotate(-45deg);
        -ms-transform: translateY(-15px) rotate(-45deg);
        -o-transform: translateY(-15px) rotate(-45deg);
        transform: translateY(-15px) rotate(-45deg);
    }

    .box>svg,
    svg#sql {
        max-width: 4rem;
        height: auto;
    }

    #menu-overlay {
        opacity: 0;
        background: transparent;
    }

    #container-nav.active-menu {
        display: flex;
        width: 100%;
        height: 350px;
        justify-content: center;
    }

    #menu-overlay.active-menu {
        width: 100%;
        height: 100%;
        opacity: 1;
        position: fixed;
        z-index: 7;
        backdrop-filter: blur(1px);
        background: rgba(255, 255, 255, 0.7);
        pointer-events: none;
    }

    #menu.active-menu {
        opacity: 1;
        transform: translateY(50px);
        transition-duration: 0.7s;
        width: 550px;
        height: 280px;
        margin-top: -15px;
        border-radius: 15px;
        pointer-events: visible;
        background: #ffffff;
        box-shadow: -1px 0px 13px 1px #ccc;
    }

    #menu ul li {
        font-size: 1.3rem;
        list-style: none;
        display: block;
        margin: 15px 25px;
        letter-spacing: 1px;
        ;
        line-height: 70px;
    }

    #menu ul li a {
        color: #450000;
    }

    #menu ul li a:hover,
    #header.activeScroll ul li a:hover {
        transform: none;
    }
}

@media (max-width: 855px) {
    #circle-photo {
        right: 5rem;
    }
}

@media (max-width:830px) {
    #circle-photo {
        right: 3.8rem;
    }
}

@media (max-width: 818px) {
    #profile {
        gap: 0;
    }

}

@media (max-width: 809px) {
    #profile {
        height: 380px;
    }

    #circle-photo {
        width: 20rem;
        height: 20rem;
        right: 6.2rem;
    }

    #foto img {
        width: 24rem;
        height: 35rem;
    }

    #itemList .timelineTree {
        padding-top: 49px;
    }
}

@media (max-width: 777px) {
    #profile {
        height: 335px;
        gap: 0;
    }

    #circle-photo {
        width: 19.5rem;
        height: 19.5rem;
        top: 11.3rem;
        right: 4.2rem;
    }

    #lineLanguages {
        width: 10rem;
    }

    #containerExperience {
        display: grid;
    }

    #timelineExperience,
    #timelineEducation {
        width: 30rem;
    }

    #timelineEducation {
        margin-top: 20px;
    }

    #itemList .timelineTree,
    #itemList>.detailEducation {
        padding-top: 28px;
    }

    #techContainer {
        height: 600px;
    }

    #boxesTech {
        display: grid;
        height: 500px;
        justify-content: center;
        align-items: normal;
    }

    .box {
        width: 38rem;
        height: 130px;
        border-radius: 42px;
    }

    .box>svg,
    svg#sql {
        max-width: 5.5rem;
    }

    #boxFrontEnd,
    #boxBackEnd,
    #boxTool {
        gap: 1rem;
    }

    .footer {
        font-size: 0.9rem;
    }
}

@media (max-width: 760px) {
    #foto img {
        width: 22rem;
    }
}

@media (max-width: 742px) {
    #aboutMe {
        height: 650px;
    }

    #profile {
        display: grid;
        max-width: 75%;
        margin: 0px auto;
        height: 600px;
        justify-content: normal;
        place-items: center;
        align-content: center;
        gap: 3rem;
    }

    #description {
        margin-top: 8rem;
    }

    #description h1 {
        padding: 0 1rem;
    }

    #description p {
        padding: 0 11rem 0 1rem;
    }

    #circle-photo {
        width: 18.9rem;
        height: 18.9rem;
        top: 27rem;
        right: 16rem;
    }

    #foto img {
        width: 26rem;
        height: 31rem;
        margin-right: 7rem;
        top: -6rem;
    }
}

@media (max-width: 730px) {
    #circle-photo {
        width: 19.9rem;
        height: 18.9rem;
        top: 27rem;
        right: 15rem;
    }
}

@media (max-width: 700px) {
    #circle-photo {
        width: 20.8rem;
        height: 18.9rem;
        top: 27rem;
        right: 14.1rem;
    }

    #foto img {
        margin-right: 10rem;
    }

    .box {
        width: 35rem;
    }
}

@media (max-width: 650px) {
    #menu.active-menu {
        width: 430px;
        height: 300px;
    }

    #aboutMe {
        height: 650px;
    }

    #profile {
        display: grid;
        max-width: 75%;
        margin: 0px auto;
        height: 600px;
        justify-content: normal;
        place-items: center;
        align-content: center;
        gap: 3rem;
    }

    #description {
        margin-top: 6rem;
    }

    #description h1 {
        padding: 0 1rem;
    }

    #description p {
        padding: 0 11rem 0 1rem;
    }

    #circle-photo {
        width: 20.4rem;
        height: 18.9rem;
        top: 27rem;
        right: 12rem;
    }

    #foto img {
        width: 25rem;
        height: 29rem;
        margin-right: 12rem;
        top: -5rem;
    }

    .box {
        width: 30rem;
    }
}

/* @media (min-width: 501px) and (max-width: 650px) {

} */

@media (min-width: 450px) and (max-width: 500px) {
    #menu.active-menu {
        width: 350px;
        height: 270px;
    }

    #description h1 {
        padding: 0 27rem 0 1rem;
    }

    #description p {
        padding: 0px 22rem 0 1rem;
    }

    #circle-photo {
        width: 15.1rem;
        height: 14rem;
        top: 32rem;
        right: 8.3rem;
    }

    #foto img {
        width: 20rem;
        height: 24rem;
        margin-right: 24rem;
        top: -3rem;
    }

    #containerExperience {
        margin-left: 0;
    }

    #timelineExperience,
    #timelineEducation {
        display: block;
        width: 79.7%;
        margin-left: 0;
    }

    #timelineExperience.movilDos {
        display: block;
        width: 79.7%;
        margin-left: 0;
    }

    #timelineEducation.movilDos {
        display: block;
        width: 79.7%;
        margin-left: 0;
    }

    #itemList .detailEducationOne {
        padding-top: 50px;
    }

    #legendColorTech {
        padding: 2.5rem 0 1rem 2rem;
    }

    #legendColorFrontEnd,
    #legendColorBackEnd,
    #legendColorTool {
        position: relative;
        margin: 0;
        margin-bottom: 1rem;
    }

    #legendColorTech>h4 {
        float: none;
        position: absolute;
        display: block;
        margin: -2.5rem 0 0 2rem;
    }

    #techContainer {
        height: 600px;
        width: 100%;
        margin-left: 0;
    }

    #boxesTech {
        height: 430px;
    }

    .box {
        width: 21rem;
        height: 100px;
    }

    .box>svg,
    svg#sql {
        max-width: 3.4rem;
    }

    #legendColorTech {
        padding: 2.5rem 0 1rem 2rem;
    }

    #legendColorFrontEnd,
    #legendColorBackEnd,
    #legendColorTool {
        position: relative;
        margin: 0;
        margin-bottom: 1rem;
    }

    #legendColorTech>h4 {
        float: none;
        position: absolute;
        display: block;
        margin: -2.5rem 0 0 2rem;
    }

}

@media (max-width:449px) {
    #profile {
        max-width: 80%;
        gap: 2rem;
    }

    #description h1 {
        padding: 0 27rem 0 1rem;
    }

    #description p {
        padding: 0px 23rem 0 1rem;
    }

    #circle-photo {
        width: 15.5rem;
        height: 14rem;
        top: 32rem;
        right: 8.3rem;
    }

    #foto img {
        width: 21rem;
        height: 25rem;
        margin-right: 22.8rem;
        top: -3rem;
    }

    #containerExperience {
        margin-left: 0;
    }

    #timelineExperience,
    #timelineEducation {
        /* width: 20.7rem; */
        width: 77.4%;
        margin-left: 0;
    }

    /*Media query matchMedia */
    #timelineExperience.movilUno {
        display: block;
        width: 77.4%;
        margin-left: 0;
    }

    #timelineEducation.movilUno {
        display: block;
        width: 77.4%;
        margin-left: 0;
    }

    #itemList .detailEducationOne.movilUno {
        padding-top: 50px;
    }

    #itemList .detailEducationOne {
        padding-top: 50px;
    }

    #boxesTech {
        height: 430px;
    }

    .box {
        width: 21rem;
        height: 100px;
    }

    .box>svg,
    svg#sql {
        max-width: 3.4rem;
    }

    #legendColorTech {
        padding: 2.5rem 0 1rem 2rem;
    }

    #legendColorFrontEnd,
    #legendColorBackEnd,
    #legendColorTool {
        position: relative;
        margin: 0;
        margin-bottom: 1rem;
    }

    #legendColorTech>h4 {
        float: none;
        position: absolute;
        display: block;
        margin: -2.5rem 0 0 2rem;
    }

}

@media (max-width: 422px) {
    #description p {
        padding: 0px 26rem 0 1rem;
    }

    #circle-photo {
        width: 15.9rem;
        right: 6.9rem;
    }

    #foto img {
        margin-right: 24.1rem;
    }

    #timelineExperience,
    #timelineEducation {
        width: 82.5%;
        margin-left: -0.58rem;
    }

    #timelineExperience.movil {
        width: 82.5%;
        margin-left: -0.58rem;
    }

    #timelineEducation.movil {
        width: 82.5%;
        margin-left: -0.58rem;
    }

    #techContainer {
        width: 26.7rem;
        margin-left: -8px;
    }
}

@media (max-width: 412px) {
    #circle-photo {
        top: 33rem;
        height: 16rem;
        width: 16.0rem;
        right: 6.8rem;
    }

    #menu.active-menu {
        width: 350px;
        height: 270px;
    }

    #timelineExperience,
    #timelineEducation {
        width: 18.5rem;
    }

    #description h1 {
        padding: 0 27rem 0 1rem;
    }

    #description p {
        padding: 0px 26rem 0 1rem;
    }

    #foto img {
        width: 20rem;
        height: 24rem;
        margin-right: 25rem;
        top: -3rem;
    }

    #boxFrontEnd,
    #boxBackEnd,
    #boxTool {
        gap: 0rem;
    }

    .box {
        width: 19rem;
        height: 100px;
    }

    .box>svg,
    svg#sql {
        max-width: 3.5rem;
    }
}

@media (max-width: 400px) {
    #circle-photo {
        top:33rem;
        height: 15rem;
        width: 15.5rem;
        right: 6.5rem;
    }
}

@media (max-width: 375px) {
    #circle-photo {
        width: 15.4rem;
        right: 5rem;
    }
    
}

@media (max-width: 370px) {
    #menu.active-menu {
        width: 300;
    }

    #aboutMe {
        height: 744px;
    }

    #description {
        margin-top: 12rem;
        margin-left: -6px;
    }

    #description h1 {
        padding: 0 27rem 0 0rem;
    }

    #description p {
        padding: 0px 30rem 0 0rem;
    }

    #social {
        margin: 3rem 0px 0px 0rem;
    }

    #circle-photo {
        top: 37rem;
        height: 15.2rem;
        width: 15.5rem;
        right: 5.6rem;
    } 

    #foto img {
        width: 20rem;
        height: 26rem;
        margin-right: 30rem;
        margin-left: 0rem;
        top: -3rem;
    }

    #lineLanguages {
        width: 7rem;
        height: 11.5rem;
    }

    #timelineExperience,
    #timelineEducation {
        width: 15.9rem;
    }

    .box {
        width: 18rem;
        height: 95px;
    }

    .box>svg,
    svg#sql {
        max-width: 3.2rem;
    }

    #itemList .timelineOne,
    #itemList .timelineTree,
    #itemList .detailEducationTwo {
        padding-top: 49px;
    }

    #containerLanguages h2 {
        margin-left: -1.5rem;
    }

    #languageList {
        margin-left: -1.5rem;
    }

    #techContainer {
        width: 21.87rem;
        margin-left: 5.5px;
    }
}

@media (max-width: 350px) {
    #menu.active-menu {
        width: 300;
    }

    #aboutMe {
        height: 744px;
    }

    #description {
        margin-top: 12rem;
        margin-left: -6px;
    }

    #description h1 {
        padding: 0 27rem 0 0rem;
    }

    #description p {
        padding: 0px 30rem 0 0rem;
    }

    #circle-photo {
        width: 15.9rem;
        height: 15rem;
        top: 35rem;
        right: 4.3rem;
    }

    #foto img {
        width: 20rem;
        height: 26rem;
        margin-right: 30rem;
        margin-left: -1rem;
        top: -3rem;
    }

    #timelineExperience,
    #timelineEducation {
        width: 14.9rem;
    }

    #itemList .timelineOne,
    #itemList .timelineTree,
    #itemList>.detailEducation {
        padding-top: 49px;
    }

    #legendColorTech {
        padding: 2.5rem 0 1rem 2rem;
    }

    #legendColorFrontEnd,
    #legendColorBackEnd,
    #legendColorTool {
        position: relative;
        margin: 0;
        margin-bottom: 1rem;
    }

    #techContainer {
        height: 550px;
    }

    #legendColorTech>h4 {
        float: none;
        position: absolute;
        display: block;
        margin: -2.5rem 0 0 2rem;
    }

    #boxesTech {
        height: 370px;
    }

    .box {
        width: 16rem;
        height: 80px;
    }

    .box>svg,
    svg#sql {
        max-width: 2.5rem;
    }
}

@media (max-width: 300px) {
    #wrap {
        width: 90%;
    }

    #menu.active-menu {
        width: 250px;
    }

    #profile {
        max-width: 60%;
    }

    #description h1 {
        padding: 0 33rem 0 0rem;
    }

    #description p {
        padding: 0px 31rem 0 0rem;
    }

    #social {
        margin: 3rem 0px 0px 0rem;
    }

    #circle-photo {
        top: 37rem;
        right: 2.6rem;
    }

    #foto img {
        margin-left: -4rem;
    }

    #timelineExperience,
    #timelineEducation {
        width: 11.5rem;
    }

    #lineLanguages {
        width: 5rem;
    }

    #techContainer {
        width: 90.1%;
        height: 692px;
        margin-left: 1.1rem;
    }

    #boxesTech {
        height: 505px;
        gap: 1rem;
    }

    .box {
        width: 11rem;
        height: 145px;
    }

    .box>svg,
    svg#sql {
        max-width: 3.5rem;
    }

    #timelineEducation {
        height: 25.9rem;
    }

    #itemList .timelineTwo,
    #itemList .timelineFour {
        padding-top: 49px;
    }

    #itemList>.detailEducationOne {
        padding-top: 70px;
    }

    #legendColorTech {
        padding: 2.5rem 0 1rem 2rem;
    }

    #legendColorFrontEnd,
    #legendColorBackEnd,
    #legendColorTool {
        position: relative;
        margin: 0;
        margin-bottom: 1rem;
    }

    #legendColorTech>h4 {
        float: none;
        position: absolute;
        display: block;
        margin: -2.5rem 0 0 2rem;
    }
}