@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: 400px) {
    #circle-photo {
        width: 15.8rem;
        height: 14.1rem;
        right: 5.3rem;
    }
}

@media (max-width: 412px) {
    #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: 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 {
            width: 15.9rem;
            height: 15rem;
            top: 35rem;
            right: 5.3rem;
        }

        #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;
        }
    }