.flex{
   display: flex;
}
.divgrandesid{
   width: 20%;
   background-color: aqua;
   opacity: 0;
}
.divgrandep3{
   width: 80%;
} 
.divpeq{ 
   display: flex; 
   width: 99% 0;
   margin: 0.25%;
   box-shadow: rgb(100 100 111 / 50%) 0px 2px 7px 0px;
   border: 3px solid white;  
   background-color: hsl(0, 0%, 100%);  
}
.divpeq:hover{
   cursor: pointer;
   transform: scale(1.05);
   transition: all 0.4s ease;
   z-index: 100;
   background-color: white;
}
.imagenp3{
   width: 100px;
   height: 80px;
}
.imagenp3:hover{
   transform: scale(6);
   transition: all 0.3s ease;
   background-color: rgba(0, 0, 0, 0.05);
   z-index: 999;
}
.productop3{
   width: 70%;
   padding: 1.5% 1%;
   color: #000b9f;
   font-family: monospace;
   font-size: 15px;
}
.preciop3{
   color: rgb(255, 0, 0);
   font-size: 18px;
   text-align: center;
   font-family: 'Montserrat', sans-serif;
   padding: 2.5% 0 0 0;
   width: 10%;
}
.preciop3>span{
   font-weight: 900;
   font-family: 'Montserrat', sans-serif;
}
.cpusimple{
   position: relative;
   border-left: 5px solid rgb(255, 166, 77);
   background-color:rgb(255, 166, 77) ;
}
.vidfueref{
   position: relative;
   border-left: 5px solid rgb(0 181 0);
   background-color:rgb(0 181 0) ;
}
.perifericos{
   position: relative;
   border-left: 5px solid rgb(80, 80, 254);
   background-color: rgb(80, 80, 254);
}
.descpcpusimple{
   position: absolute;
   top: 40%;
   left: -300px;
   width: 500px;
   z-index: -1;
   border: 5px solid rgb(255, 166, 77);
   border-radius: 10px;
   font-size: 13px;
   color: rgb(153, 57, 57);
}
.descvidfueref{
   position: absolute;
   top: 15%;
   left: -300px;
   width: 500px;
   z-index: -1;
   border: 5px solid rgb(0 181 0);
   border-radius: 10px;
   font-size: 13px;
   color: rgb(87, 167, 87);
}
.descperifericos{
   position: absolute;
   top: 40%;
   left: -300px;
   width: 500px;
   z-index: -1;
   border: 5px solid rgb(80, 80, 254);
   border-radius: 10px;
   font-size: 13px;
   color: rgb(43, 43, 124);
} 
.ocultar{
   display: none;
}
#response2{
  position: absolute;
   top: 40%;
   z-index: 500;
   left: 11%;
   width: 80%;
}
.btn23{
  position: relative;
  width: 50%;
  box-shadow: rgba(51, 51, 58, 0.5) 0px 2px 7px 0px;
  border: 3px solid white;
  background-color: hsl(179.31deg 35.93% 94.09%);
  font-size: 14px;
  color: #164f8b;
  height: 80px;
}
.btn23:hover{
  cursor: pointer;
  background-color: rgb(245, 255, 191);
}
.px25{
  font-size: 20px;
  color: #a1a1a1;
}
.rojo2{
  color: #ff9e9e;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 11px;
}
.px80{
  width: 100px;
}
.ver-x{
  padding: 1% 3%;
  text-align: center;
  display: block;
}
.img100px{
  width: 50px;
  height: 50px;
}
.img100px:hover{
  transform: scale(5);
  transition: all 0.7s ease-out;
  z-index: 999;
}
.h1_1:hover{
cursor: pointer;
color: #d70000;
}
.typing{
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 1.5rem;
  margin: 0 auto;
  font-family: "Courier New";
  border-right: 0.15em solid #18bdec;
  animation: typing 4s steps(38) 1s 1 normal both, blink 1s steps(1) infinite;
}
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@keyframes blink {
  50% {
    border-color: transparent;
  }
}
@media print{
   .noprint{
       display: none;
   }
   .divgrandep3{
       width: 100%;
    }
    .imagenp3{
       width: 50px;
       height: 40px;
    }
    .productop3{
       width: 70%;
       padding: 2px;
       font-size: 11px;
    }
}