@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

*{
    margin: 0;
    padding: 0;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    box-sizing: border-box;
}


.img-product{
    width: 33%;
    height:auto;
    position: relative;
    left: 13%;
}
.img-tab2{
    position: relative;
    top: -50px;
    width: 30%;
    height: auto;
    left: 27%;
}
.list{
    position: relative;
    left:50%;
    top:-448px;
    width: 50%;
    height: 100%;
    border-style: solid;
    border-width: 1px;
    z-index: -85;
}
.list-item{
    
    position: relative;
    top: 150px;
    left: 1%;
    width: 40%;
    display: block;
    border-width: 1px;
    border-style: solid;

}
#tecnic-drawing{
    position: relative;
    top: 35rem;
}
.tecnic-drawing{
    width: 50%;
    height: auto;
    margin-left:0%;
}

.footer{
    position: relative;
    top: 35rem;
    border-width: 1px;
    border-style: solid;
}
#performance-graphic{
    position: relative;
    top: 45rem;
    
}
.img-tab{
    position: relative;
    top: 200px;
    width: 30%;
    height: auto;
    left: 12.5%;
}
.performance-graphic{
    width: 50%;
    height: auto;
    margin-left:27%;
    margin-right: 27%;
}
.hr{
    position: relative;
    top: 50px;
    width: 85%;
    left: 7.5%;
}
.performance-head{
    position: relative;
    width: 20%;
    top: 155px;
    left: 7.5%;
    border-left: 10px solid #086c94;
}
.drawing-tecnic{
    position: relative;
    top: 350px;
    width: 85%;
    left: 7.5%;
}
.task{
    position: relative;
    width: 20%;
    top: 420px;
    left: 7.5%;
    border-left: 10px solid #086c94;
}
.graphic{
    position: relative;
    top: 650px;
    width: 85%;
    left: 7.5%;
}
.graphic-head{
    position: relative;
    width: 20%;
    top: 720px;
    left: 7.5%;
    border-left: 10px solid #086c94;
}
.graphic-img{
    position: relative;
    top: 170px;
    left: 23%;
    width: 35%;
    height: auto;
}

.footer{
    position: relative;
    top: 33rem;
}
.task-img{
    position: relative;
    top:480px;
    left: 13%;
    width: 75%;
    height: auto;
}
@media all and (max-width: 969px){
    .img-tab{
        position: relative;
        top: 230px;
        width: 33%;
        height: auto;
        left: 12.5%;
    }
    .product-img{
        position: relative;
        top: 82px;
       
    }
    
    .list{
        position: relative;
        left:50%;
        top:-316px;
        border-style: solid;
        border-width: 1px;
        z-index: 85;
    }
    .list-item{
        position: relative;
        top: 30%;
        left: 150px;
        font-size: 2.5vh;
        z-index: 15;
    }
    .list-item li{
        font-size: 2.5vh;
    }
    .performance-head{
        position: relative;
        top: 180px;
        left: 7.5%;
        font-size: 22px;
    }
    .hr{
        position: relative;
        top: 75px;
        width: 85%;
        left: 7.5%;
    }
    .drawing-tecnic{
        position: relative;
        top: 350px;
        width: 85%;
        left: 7.5%;
    }
    .task{
        position: relative;
        top: 420px;
        left: 7.5%;
        font-size: 22px;
    }
    .task-img{
        position: relative;
        top:480px;
        height: auto;
    }
    .graphic{
        position: relative;
        top: 600px;
        width: 85%;
        left: 7.5%;
    }
    .graphic-head{
        position: relative;
        top: 670px;
        left: 7.5%;
        border-left: 10px solid #086c94;
    }
    .graphic-img{
        position: relative;
        top: 190px;
        left: 20%;
        width: 33%;
        height: auto;
    }
}
@media all and (max-width: 705px){
    .img-product{
        width: 60%;
        position: relative;
        left:18%;
    }
   .img-tab{
    position: relative;
    top: 280px;
   }
   .img-tab2{
        display: none;
   }
    
    .performance-head{
        position: relative;
        top: 235px;
        left: 7.5%;
        font-size: 22px;
    }
    .hr{
        position: relative;
        top: 150px;
        width: 85%;
        left: 7.5%;
    }
  
    .task{
        position: relative;
        top: 410px;
        left: 7.5%;
        font-size: 22px;
    }
    .task-img{
        position: relative;
        top:460px;
        height: auto;
    }
    .drawing-tecnic{
        position: relative;
        top: 350px;
        width: 85%;
        left: 7.5%;
    }
    .graphic{
        position: relative;
        top: 570px;
        width: 85%;
        left: 7.5%;
    }
    .graphic-head{
        position: relative;
        top: 620px;
        left: 7.5%;
        border-left: 10px solid #086c94;
    }
    .graphic-img{
        position: relative;
        top: 270px;
        left: 20%;
        width: 35%;
        height: auto;
    }
    .footer{
        position: relative;
        top: 35rem;
    }
    
    
}
@media all and (max-width: 460px){
   
    .img-product{
        width: 60%;
        position: relative;
        left: 18%;
    }
    .performance-head{
        left: 7.5%;
        font-size: 13px;
    }
    .task{
        font-size: 13px;
    }
    .graphic-head{
        font-size: 13px;
    }
}