div.proyect {
  position: relative;
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #000;
  font-size: 5vw;
  padding: 2rem;
  box-sizing: border-box;
  overflow: hidden;
}

div.cr {
  position:relative;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  width: auto;
  height: 100vh;
  width: 100%;
   background: 
    linear-gradient(45deg, #003ee7 15px, transparent 15px) top left,
    linear-gradient(-45deg, #003ee7 15px, transparent 15px) top right,
    linear-gradient(135deg, #003ee7 15px, transparent 15px) bottom left,
    linear-gradient(225deg, #003ee7 15px, transparent 15px) bottom right;
  h1{
    font-size: 25px;
   
  }
  p{
     margin-top: 1rem;
    font-size: 18px;
    width: 90%;
    text-align: justify;
  }
}

div.crm{
  position: relative;
  height: 60vh;
  width: 20vh;
  left: 28%;
  
}


div.tiempo {
  position: absolute;
  left: 15%;
  top: 5%;
  
}

div.chip {
  position: absolute;
  left: 15%;
  top: 30%;
}

div.estrella {
  position: absolute;
  left: 15%;
  top: 60%;
}

div.icono_tiempo {
  position: absolute;
  left: 7%;
  top: 5%;
}


div.icono_chip {
  position: absolute;
  left: 7%;
  top: 30%;
}


div.icono_estrella {
  position: absolute;
  left: 7%;
  top: 60%;
}

div.equipo_prosman {
  position: relative;
  display: flex;
  justify-content: space-around;
  margin-bottom: 0%;
  flex-wrap: wrap;
  margin-top: 0%;
  width: 100%;
}

 div.equipo_prosman img {
  width: 100%; 
} 
div.equipo_body_txt {
  position: absolute;
  left: 40%;
  top: 65%;
  color: #ffffff;
  font-size: 25px;
  justify-content: center;
  align-items: center;
}

div.pro_final {
  position: relative;
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #000;
  font-size: 5vw;
  padding: 2rem;
  box-sizing: border-box;
  overflow: hidden;
}

div.pro_slogan {
  position: absolute;
  text-align: center;
  align-items: center;
  justify-content: center;
  left: 30%;
  top: 20%;
  font-size: 35px;
  color: white;
}

@media (max-width: 1024px)  {

  div.proyect img{
    position: relative;
    left: -2% !important;
    top: -10%;
  }
  

  div.equipo_body_txt {
    left: 35%;
    font-size: 22px;
  }
  
  div.pro_slogan {
    left: 25%;
    font-size: 30px;
  }
 div.cr{
 position: relative;
    

 }
  div.crm{
   position: absolute;
   top: 60%;
   left: 20%;
   height: 150%;
  }

  div.crm img{
    width:40vh;
  }

  div.tiempo{
  left: 40%;
  }

  div.chip{
    left: 40%;
    top: 20%;
 

  }
  
  div.estrella {
    left: 40%;
    top: 40%;
  }
  
  div.icono_tiempo{
 left: 25%;
  }
  div.icono_chip{
     left: 25%;
      top: 20%;
  }

  div.icono_estrella {
    left: 25%;
    top: 40%;
  }

div.pro_final{
    height: 80vh;
  }
   div.pro_final img{
      position: relative;
    left: -16%;
  }

}

/* Media Query 760px */
@media (max-width: 767px) {

   div.proyect img{
 position: relative;
   content: url("../Img/Img_components/Proyectos/Proyectos_movil.svg");
    max-width: 420px;
    left: -2% !important;
    top: -10%;
  }

   div.tiempo,
   div.chip,
  div.estrella {
    left: 25%;
  }
  
  div.icono_tiempo,
  div.icono_chip,
  div.icono_estrella {
    left: 10%;
  }
  
  
  div.equipo_body_txt {
    left: 30%;
    top: 70%;
    font-size: 10px;
  }
  
  div.pro_slogan {
    left: 20%;
    top: 15%;
    font-size: 25px;
  }
}

/* Media Query 480px */
@media  (max-width: 480px)  {
  div.proyect{
    height: 100vh;
  } 
  
  div.cr{
 position: relative;
 margin-top: 80%;
 
 }
  div.crm{
   position: absolute;
   top: auto;
   left: 20%;
   height: 100%;
  }

  div.crm img{
    position: relative;
    width:35vh;
    top: -40%;
  }

  div.tiempo,
  div.chip,
  div.estrella {
    left: 30%;
    top: 8%;
    font-size: medium;
    
  }
  
  div.chip {
    top: 33%;
  }
  
  div.estrella {
    top: 63%;
  }
  
  div.icono_tiempo,
  div.icono_chip,
  div.icono_estrella {
    left: 8%;
  }
  
  div.icono_tiempo {
    top: 6%;
  }
  
  div.icono_chip {
    top: 32%;
  }
  
  div.icono_estrella {
    top: 62%;
  }


  div.equipo_body_txt {
    left: 30%;
    top: 70%;
    font-size: 10px;
  }
  
  div.pro_final {
    height: auto;
    min-height: 100vh;
    padding: 0.8rem;
  }
  
  div.pro_slogan {
    left: 15%;
    top: 10%;
    font-size: 20px;
  }

  div.pro_final{
    height: 100vh;
  }
   div.pro_final img{
      position: relative;
    left: -5%;
  }
}

/* Media Query para orientación horizontal (landscape) */
@media (max-width: 900px) and (orientation: landscape) {
  div.proyect img{
     position: relative;
   content: url("../Img/Img_components/Proyectos/Proyectos.svg");
    max-width: 900px;
    left: -2% !important;
    top: 10%;
  } 
  
  
div.cr{
 position: relative;
   p{
    position: relative;
    padding: .5rem;
    margin-top: -2%;
    font-size: smaller;
   }

   h1{
    position: relative;
    
   }
 }
  div.crm{
   position: absolute;
   top: auto;
   left: 20%;
   height: 100%;
  }

  div.crm img{
    display: none;
  }

  div.tiempo,
  div.chip,
  div.estrella {
    left: 30%;
    top: 8%;
    font-size: medium;
    
  }
  
  div.chip {
    top: 33%;
  }
  
  div.estrella {
    top: 63%;
  }
  
  div.icono_tiempo,
  div.icono_chip,
  div.icono_estrella {
    left: 8%;
  }
  
  div.icono_tiempo {
    top: 6%;
  }
  
  div.icono_chip {
    top: 32%;
  }
  
  div.icono_estrella {
    top: 62%;
  }

  div.equipo_body_txt {
    left: 35%;
    top: 70%;
    font-size: 15px;
  }
  
  div.pro_final {
    height: auto;
    min-height: 100vh;
    padding: 0.8rem;
  }
  
  div.pro_slogan {
    left: 30%;
    top: 10%;
    font-size: 20px;
  }

  div.pro_final {
    height: 100vh;
  }
  
  div.pro_final img {
    position: relative;
    left: -5%;
    top: -10%;
  }
}