/* VARIABLES*/
.gaming {
  background-color: black;
  display: flexbox; }

.oficina {
  background-color: black;
  display: flexbox; }

.edicion {
  background-color: black;
  display: flexbox; }

.mapsys {
  background-color: black;
  display: flexbox; }

.gaming div {
  display: inline-block;
  margin: 100px;
  text-align: center; }

.oficina div {
  display: inline-block;
  margin: 100px;
  text-align: center; }

.edicion div {
  display: inline-block;
  margin: 100px;
  text-align: center; }

.mapsys div {
  display: inline-block;
  margin: 120px;
  text-align: center; }

.gaming a {
  color: white;
  text-decoration: none; }

.oficina a {
  color: white;
  text-decoration: none; }

.edicion a {
  color: white;
  text-decoration: none; }

.mapsys a {
  color: white;
  text-decoration: none; }

.reci a {
  color: white;
  text-decoration: none; }

.perifericos a {
  color: white;
  text-decoration: none; }

.pcs a {
  color: white;
  text-decoration: none; }

.mapsys img {
  width: 300px; }

.gaming img {
  width: 300px; }

.baja img {
  width: 300px; }

.oficina img {
  width: 300px; }

.edicion img {
  width: 300px; }

.gaming ul li {
  color: white; }

.oficina ul li {
  color: white; }

.edicion ul li {
  color: white; }

.mapsys ul li {
  color: white; }

.gaming h2 {
  color: white; }

.oficina h1 {
  color: white; }

.edicion h2 {
  color: white; }

.mapsys h2 {
  color: white; }

.formulario h1 {
  color: white; }

.formulario h2 {
  color: white; }

.perifericos h1 {
  color: white; }

.recomendados {
  color: white; }

.gaming h3 {
  display: inline;
  border: 2px solid red;
  font-size: 20px;
  color: white; }

.oficina h2 {
  display: inline;
  border: 2px solid red;
  font-size: 20px;
  color: white; }

.edicion h3 {
  display: inline;
  border: 2px solid red;
  font-size: 20px;
  color: white; }

.mapsys h3 {
  display: inline;
  border: 2px solid red;
  font-size: 20px;
  color: white; }

.p1 h1 {
  text-align: center;
  color: white;
  padding: 20px; }

.p1 h2 {
  text-align: center;
  color: red;
  padding: 20px; }

.p2 h2 {
  text-align: center;
  color: white;
  padding: 20px; }

.p2 h3 {
  text-align: center;
  color: red;
  padding: 20px; }

.p3 h2 {
  text-align: center;
  color: white;
  padding: 20px; }

.p3 h3 {
  text-align: center;
  color: red;
  padding: 20px; }

.p4 h2 {
  text-align: center;
  color: white;
  padding: 20px; }

.p4 h3 {
  text-align: center;
  color: red;
  padding: 20px; }

.p {
  background-color: black; }

.reci {
  background-color: black; }

.carruseles {
  background-color: black; }

.formulario {
  background-color: black; }

.recomendados {
  background-color: black; }

.reci h1 {
  text-align: center;
  color: white; }

.reci h2 {
  text-align: center;
  color: white; }

* {
  margin: 0;
  padding: 0; }

a {
  text-decoration: none;
  color: black; }

ul {
  list-style: none; }

.navbar {
  background-color: grey; }

.navbar a {
  color: white; }

.hero ul li {
  display: flexbox;
  text-align: center;
  padding: 20px; }

.hero ul li h2 {
  font-size: 30px; }

.hero ul li h3 {
  color: white;
  display: inline;
  font-size: 30px;
  border: 5px solid white;
  background-color: black; }

.hero ul li a {
  text-decoration: none; }

.hero {
  background-image: url(../img/gforce.jpg);
  height: 400px;
  color: white;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed; }

.ofertas {
  align-items: center;
  background-color: black; }

.ofe {
  text-align: center;
  font-size: 100px;
  padding-top: 80px; }

.pcs {
  text-align: center;
  color: white;
  justify-content: space-around;
  background-color: black; }

.pcs div h1 {
  font-size: 80px; }

.pcs div h2 {
  padding: 18px; }

.pcs div h3 {
  display: inline;
  border: 2px solid white;
  font-size: 20px; }

.pcs div img {
  width: 300px;
  height: auto;
  display: flexbox; }

.whatsapp {
  position: fixed;
  bottom: 80px;
  right: 30px; }

.formulario {
  text-align: center;
  background-image: url(../img/gforce.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  color: aliceblue; }

.formulario div {
  padding: 10px; }

.recomendados h1 {
  text-align: center; }

.perifericos {
  text-align: center;
  font-size: 30px;
  padding-bottom: 20px;
  background-color: black; }

.perifericos img {
  height: 100%;
  width: 100%;
  object-fit: contain; }

.perifericos {
  width: 100%;
  margin-top: 25px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 250px;
  gap: 50px; }

.item {
  position: relative; }

.item h3 {
  border: 2px solid red;
  display: inline-flex; }

.item1 {
  grid-column: span 2; }

.owl-carousel div {
  text-align: center; }

.owl-carousel h3 {
  border: 2px solid red;
  display: inline-flex;
  color: white; }

.owl-carousel a {
  text-decoration: none; }

.carruseles h2 {
  color: white;
  padding-top: 40px; }

.reci div {
  text-align: center;
  padding: 30px; }

.reci h3 {
  display: inline;
  border: 2px solid red;
  font-size: 20px; }

footer {
  background-color: grey;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px; }

.pagos {
  text-align: center; }

.mapa {
  text-align: center;
  align-items: center; }

.pagos {
  text-align: center; }

footer h2 {
  text-align: center; }

footer h3 {
  text-align: center; }

@media (max-width: 600) {
  .pcs div img {
    width: 250px; } }

@media (max-width: 768px) {
  footer {
    background-color: grey;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 450px 450px 450px;
    grid-template-areas: "mapa"
 "video"
 "pagos"; }
  .mapa {
    width: 300px;
    grid-area: mapa;
    text-align: left;
    display: flexbox; }
  .mapa h2 {
    font-size: medium; }
  .mapa iframe {
    width: 300px !important; }
  .video {
    width: 300px;
    padding-top: 20px;
    display: flexbox;
    grid-area: video; }
  .video iframe {
    width: 300px !important;
    display: flexbox; }
  .pagos {
    width: 450px;
    display: flexbox;
    grid-area: pagos; }
  .pagos h2 {
    font-size: medium; }
  .whatsapp {
    position: fixed;
    bottom: 80px;
    right: 40px; } }

@media (max-width: 949px) {
  footer {
    background-color: grey;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 450px 450px 450px;
    grid-template-areas: "mapa mapa"
 "video video"
 "pagos pagos"; }
  .mapa {
    width: 430px;
    display: flexbox;
    grid-area: mapa;
    align-items: center; }
  .mapa iframe {
    width: 450px; }
  .video {
    width: 430px;
    padding-top: 20px;
    display: flexbox;
    grid-area: video;
    align-items: center; }
  .video iframe {
    width: 430px;
    display: flexbox;
    padding-top: 20px; }
  .pagos {
    width: 450px;
    display: flexbox;
    grid-area: pagos;
    align-items: center; } }

@media (max-width: 1024px) {
  footer {
    background-color: grey;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 450px 450px 450px; }
  .mapa {
    width: 450px; }
  .mapa iframe {
    width: 450px; }
  .video {
    width: 450px;
    display: flexbox; }
  .video iframe {
    width: 450px; }
  .pagos {
    width: 450px;
    padding-top: 100px; } }

@media (max-width: 1200px) {
  footer {
    background-color: grey;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 450px 450px 450px; }
  .mapa {
    width: 450px; }
  .mapa iframe {
    width: 450px; }
  .video {
    width: 450px;
    display: flexbox; }
  .video iframe {
    width: 450px; }
  .pagos {
    padding-top: 100px;
    grid-row: span 2; } }

@media (max-width: 1462px) {
  footer {
    background-color: grey;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 450px 450px 450px; }
  .mapa {
    width: 450px; }
  .mapa iframe {
    width: 450px; }
  .video {
    width: 450px;
    display: flexbox; }
  .video iframe {
    width: 450px; }
  .pagos {
    padding-top: 100px;
    grid-row: span 2; } }

@media screen and (max-width: 768px) {
  .perifericos {
    width: 100%;
    margin-top: 25px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 250px;
    gap: 50px; } }

@media (max-width: 792) {
  .oficina {
    width: 350px; }
  .gaming {
    width: 350px; }
  .edicion {
    width: 350px; }
  .mapsys {
    width: 350px; } }

@media screen and (max-width: 792) {
  .oficina {
    width: 30%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 300px; }
  .gaming {
    width: 350px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 300px; }
  .edicion {
    width: 350px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 300px; }
  .mapsys {
    width: 350px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 300px; } }