@charset "UTF-8";
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: 16px;
}

html {
  margin: 0;
}

/*paleta de colores y sombras*/
/*sombras*/
/*bordes*/
/*tamaños*/
.btn-lonely {
  background-image: linear-gradient(200deg, white, #6d6d6d, white);
  transform: skewX(-15deg);
  letter-spacing: 0.1em;
  border-color: #585858;
}

.btn-lonely:hover:focus, .btn-lonely:active, .btn-lonely.active, .open > .dropdown-toggle.btn-lonely {
  color: white;
  background-color: #585858;
  border-color: #797979;
}

.btn-lonely:hover {
  color: #24d600;
}

.dropdown-item:hover {
  background: #797979;
  color: white;
}

/*paleta de colores y sombras*/
/*sombras*/
/*bordes*/
/*tamaños*/
.blog-card {
  height: 280px;
  width: 350px;
  padding-left: 0;
  display: flex;
  box-shadow: 0 3px 7px -1px rgba(0, 0, 0, 0.1);
  background: white;
  line-height: 1.4;
  border-radius: 5px;
  overflow: hidden;
}
.blog-card a {
  color: inherit;
}
.blog-card:hover .photo {
  transform: scale(1.3);
}
.blog-card .meta {
  position: relative;
}
.blog-card .photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.2s;
}
.blog-card .details, .blog-card .details ul {
  list-style-type: none;
}
.blog-card .details {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -100%;
  margin: auto;
  transition: left 0.2s;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 10px;
  width: 100%;
  font-size: 0.9rem;
}
.blog-card .details a {
  text-decoration: none;
}
.blog-card .details ul li {
  display: inline-block;
  list-style: none;
}
.blog-card .details .author, .blog-card .details .data:before {
  margin-right: 10px;
}
.blog-card .description {
  padding: 1rem;
  background: white;
  position: relative;
  z-index: 1;
}
.blog-card .description h1 {
  line-height: 1;
  margin: 0;
  font-size: 1.7rem;
}
.blog-card .description h2 {
  font-size: 1rem;
  font-weight: 300;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.651);
  margin-top: 5px;
}
.blog-card .description .read-more {
  text-align: right;
}
.blog-card .description .read-more a {
  color: #24d600;
  display: inline-block;
  position: relative;
}
.blog-card .description .read-more a:after {
  margin-left: -10px;
  opacity: 0;
  vertical-align: middle;
  transition: margin 0.3s, opacity 0.3s;
}
.blog-card .description .read-more a:hover:after {
  margin-left: 5px;
  opacity: 1;
}
.blog-card p {
  position: relative;
  margin: 1rem 0 0;
}
.blog-card p:first-of-type {
  margin-top: 1.25rem;
}
.blog-card p:first-of-type:before {
  position: absolute;
  height: 5px;
  background: #24d600;
  width: 35px;
  top: -0.75rem;
  border-radius: 3px;
}
.blog-card:hover .details {
  left: 0%;
}
@media (min-width: 360px) {
  .blog-card {
    flex-direction: row;
  }
  .blog-card .meta {
    flex-basis: 40%;
    height: auto;
  }
  .blog-card .description {
    flex-basis: 60%;
  }
  .blog-card .description:before {
    transform: skewX(-3deg);
    content: "";
    background: white;
    width: 30px;
    position: absolute;
    left: -10px;
    top: 0;
    bottom: 0;
    z-index: -1;
  }
  .blog-card.alt {
    flex-direction: row-reverse;
  }
  .blog-card.alt .description:before {
    left: inherit;
    right: -10px;
    transform: skew(3deg);
  }
  .blog-card.alt .details {
    padding-left: 25px;
  }
}

.small-text {
  font-size: 12px;
}

.h5__cards {
  color: #24d600;
}

/*----botones en galeria index----*/
.btn-container {
  position: relative;
  display: inline-block;
  text-align: center;
}

.btn-index {
  padding: 0.1rem 0.1rem;
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  text-decoration: none;
  color: white;
  background-color: #24d600;
  border: none;
}

/*----Redes Sociales----*/
.button #whatsapp {
  position: fixed;
  bottom: 4rem;
  right: 2rem;
  background: transparent;
  z-index: 100;
}

#iconos-redes > a {
  padding: 1rem;
}

i {
  color: white;
  font-size: 40px;
  text-shadow: 2px 2px 2px rgba(27, 27, 27, 0.75);
}

i:hover {
  color: #24d600;
}

/*----Redes----*/
.h5__cards {
  color: #24d600;
  font-size: 24px;
}

.h3__index {
  color: #585858;
}

.h3__index--color {
  color: white;
}

#container-title {
  background-color: rgba(0, 0, 0, 0.774);
}

body {
  background-image: url(../images/bbb-whopa.jpg);
  background-position: center;
  background-size: auto;
  font-family: "kanit", sans-serif;
}

/*------------------INDEX RESPONSIVE-----------------*/
#section1-index {
  margin-bottom: 5rem;
}

@media only screen and (min-width: 360px) {
  .h3__index {
    font-size: 18px;
  }

  #index__bigscreen {
    display: none;
  }

  #index__mobile {
    display: flex;
    padding: 0%;
    margin: 0%;
    background-size: 100%;
  }

  .carousel__texto {
    background-color: black;
    color: white;
    align-items: center;
    height: 4.5rem;
    margin-bottom: -2rem;
  }

  .h4__carousel--mod {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.651);
  }

  .p__carrousel {
    text-align: center;
    font-size: 10px;
  }

  .img-gale {
    margin-bottom: 5%;
  }
}
@media only screen and (min-width: 480px) and (max-width: 768px) {
  .h3__index {
    font-size: 24px;
  }

  #index__bigscreen {
    display: none;
  }

  #index__mobile {
    display: flex;
    padding: 0%;
    margin: 0%;
    background-size: 100%;
  }

  .carousel__texto {
    background-color: black;
    color: white;
    align-items: center;
    height: 5rem;
  }

  .h4__carousel--mod {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.651);
  }

  .p__carrousel {
    text-align: center;
    font-size: 12px;
  }
}
@media only screen and (min-width: 768px) {
  #index__bigscreen {
    display: flex;
  }

  #index__mobile {
    display: none;
  }
}
@media only screen and (min-width: 1024px) {
  .h3__index {
    font-size: 32px;
  }
}
/*------------------HEADER-------------------*/
/*------------------HEADER-------------------*/
/*------------------HEADER-------------------*/
.navbar {
  box-shadow: 0px 5px 7px 0px rgba(59, 59, 59, 0.75);
}

.dropdown-menu {
  background-image: url(../images/bbb-whopasmall.jpg);
  background-size: cover;
}

main {
  margin-top: 8.75rem;
}

/*-------GALERÍA INDEX CON BOOTSTRAP--------*/
/*-------GALERÍA INDEX CON BOOTSTRAP--------*/
/*-------GALERÍA INDEX CON BOOTSTRAP--------*/
#section2-index .col-lg-4 {
  padding: 0.9%;
}
#section2-index img {
  border: 8px solid #d6d6d6;
}
#section2-index img:hover {
  border: 8px solid white;
  border-radius: 6px;
  box-shadow: 4px 4px 4px 1px rgba(156, 156, 156, 0.774);
}

.gale-index {
  justify-content: center;
  margin-bottom: 2.5rem;
}

#section3-index {
  margin-bottom: 4rem;
}

/*----Botón Contacto Index con Flexbox y Bootstrap----*/
/*----Botón Contacto Index con Flexbox y Bootstrap----*/
/*----Botón Contacto Index con Flexbox y Bootstrap----*/
#indexContact {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

/*------Footer Responsive con Grids y Media Queries--------*/
/*------Footer Responsive con Grids y Media Queries--------*/
/*------Footer Responsive con Grids y Media Queries--------*/
#autor {
  font-size: 12px;
  color: white;
  margin-top: 2rem;
}

#autor > a {
  text-decoration: none;
  color: white;
  font-size: 12px;
}

#autor > a:hover {
  color: #24d600;
}

@media only screen and (min-width: 360px) {
  .container__footer {
    grid-template-columns: 1fr;
  }

  .logo__footer {
    margin: 8% 0% 0% 0%;
  }

  footer i {
    font-size: 28px;
    margin-bottom: 1rem;
  }

  footer #iconos-redes > a {
    padding: 0.5rem;
  }
}
@media only screen and (min-width: 480px) {
  h3 {
    font-size: 1.5em;
    color: #585858;
  }

  .container__footer {
    grid-template-columns: 1fr;
  }

  .logo__footer {
    margin: 8% 0% 0% 0%;
  }
}
@media only screen and (min-width: 600px) {
  h3 {
    font-size: 1.5em;
    color: #585858;
  }

  .container__footer {
    grid-template-columns: 1fr;
  }
}
@media only screen and (min-width: 768px) {
  h3 {
    font-size: 1.5em;
    color: #585858;
  }

  .container__footer {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
@media only screen and (min-width: 1024px) {
  h3 {
    font-size: 1.8em;
    color: #585858;
  }

  .container__footer {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    text-align: center;
    align-items: center;
  }
}
@media only screen and (min-width: 1200px) {
  h3 {
    font-size: 1.8em;
    color: #585858;
  }

  .container__footer {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    text-align: center;
    align-items: center;
  }

  footer i {
    font-size: 28px;
  }

  footer #iconos-redes > a {
    padding-inline: 0.5rem;
  }

  #iconos-redes {
    margin-top: 3rem;
  }

  .logo__footer {
    margin-top: 2rem;
  }

  #autor {
    margin-bottom: 0rem;
  }

  .info__contacto--footer {
    margin-top: 2rem;
  }
}
/*----------------TIENDA----------------*/
/*----------------TIENDA----------------*/
/*----------------TIENDA----------------*/
.redireccionamiento__h1 {
  font-size: 30px;
  color: #24d600;
}

.redireccionamiento__h2 {
  color: #797979;
  font-size: 26px;
}

.redireccionamiento__h3 {
  font-size: 24px;
  color: white;
  background-color: #24d600;
  width: auto;
  margin: auto;
}

div.redireccionamiento {
  margin: 1rem;
  padding: 1rem;
  text-align: center;
}

/*---------Tienda Cards y Acordeon Bootstrap---------*/
* {
  font-family: "kanit", sans-serif;
}

/*paleta de colores y sombras*/
/*sombras*/
/*bordes*/
/*tamaños*/
#container__cards--tienda i {
  color: #d6d6d6;
  font-size: 120px;
  margin-bottom: 14px;
  text-shadow: 2px 2px 2px rgba(27, 27, 27, 0.75);
}

h3 {
  color: #24d600;
  text-align: center;
  margin: 0 0 5% 0;
  padding: 0.5rem;
}

.card-box {
  float: left;
  font-size: 1.2em;
  margin: 1% 0 0 1%;
  perspective: 800px;
  transition: all 0.3s ease 0s;
  width: 30%;
}

.card-box:hover .card {
  transform: rotateY(180deg);
}

.card {
  cursor: default;
  height: 20rem;
  background-color: rgba(255, 255, 255, 0.1);
  border: none;
  transform-style: preserve-3d;
  transition: transform 0.4s ease 0s;
  width: 100%;
  -webkit-animation: giro 1s 1;
  animation: giro 1s 1;
}

.front {
  background-image: url(../images/elegante-fondo-blanco-textura_23-2148431731.jpg);
  background-size: cover;
  border-left: 4px solid #585858;
  border-right: 4px solid #24d600;
  padding: 5% 5% 5% 5%;
}

.back {
  padding: 25% 5% 5% 5%;
}

.card p {
  margin-bottom: 1.8em;
  color: #585858;
  position: relative;
  padding: 0.5rem auto;
}

.card .front,
.card .back {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  box-sizing: border-box;
  color: white;
  display: block;
  font-size: 1.2em;
  height: 100%;
  position: absolute;
  text-align: center;
  width: 100%;
  box-shadow: 5px 5px 10px #797878;
  border-radius: 3rem;
}

.card .front strong {
  background: #fff;
  border-radius: 100%;
  border-left: 4px solid #585858;
  border-right: 4px solid #24d600;
  color: #24d600;
  font-size: 18px;
  line-height: 30px;
  padding: 0 7px 4px 6px;
}

.card .back {
  transform: rotateY(180deg);
}

.card .back {
  background-image: url(../images/elegante-fondo-blanco-textura_23-2148431731.jpg);
  background-size: cover;
}

.card-box:nth-child(1) .card {
  -webkit-animation: giro 1.5s 1;
  animation: giro 1.5s 1;
}

.card-box:nth-child(2) .card {
  -webkit-animation: giro 2s 1;
  animation: giro 2s 1;
}

.card-box:nth-child(3) .card {
  -webkit-animation: giro 2.5s 1;
  animation: giro 2.5s 1;
}

@-webkit-keyframes giro {
  from {
    transform: rotateY(180deg);
  }
  to {
    transform: rotateY(0deg);
  }
}
@keyframes giro {
  from {
    transform: rotateY(180deg);
  }
  to {
    transform: rotateY(0deg);
  }
}
@media screen and (max-width: 767px) {
  .card-box {
    margin-left: 2.8%;
    margin-top: 3%;
    width: 46%;
  }

  .card {
    height: 285px;
  }

  .cardBox:last-child {
    margin-bottom: 3%;
  }
}
@media screen and (max-width: 480px) {
  .card-box {
    width: 94.5%;
  }

  .card {
    height: 260px;
  }

  #container__cards--tienda i {
    font-size: 90px;
    margin-bottom: 12px;
  }
  #container__cards--tienda p {
    font-size: 12px;
  }
}
.accordion-button {
  color: #797979;
  font-size: 50%;
  background-color: rgba(255, 255, 255, 0.651);
  text-decoration: none;
}

.accordion-body {
  color: #797979;
  font-size: 80%;
  text-align: justify;
}

.accordion-item {
  background-color: rgba(255, 255, 255, 0.651);
}

.accordion-button:not(.collapsed) {
  color: #585858;
  background-color: white;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.13);
}

.accordion-button:focus {
  z-index: 3;
  border-color: #797979;
  outline: 0;
  box-shadow: 2px 1px 2px 1px rgba(102, 102, 102, 0.5);
}

.accordion-button:not(.collapsed)::after {
  color: #585858;
  transform: rotate(-180deg);
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgb(36,0214,0)'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
}

@media only screen and (min-width: 360px) {
  .redireccionamiento__h1 {
    font-size: 18px;
    margin-top: 1rem;
  }

  .redireccionamiento__h2 {
    font-size: 14px;
  }

  .redireccionamiento__h3 {
    font-size: 16px;
    margin-top: 1rem;
  }
}
@media only screen and (min-width: 480px) {
  .redireccionamiento__h1 {
    font-size: 18px;
    margin-top: 1rem;
  }

  .redireccionamiento__h2 {
    font-size: 14px;
  }

  .redireccionamiento__h3 {
    font-size: 16px;
    margin-top: 1rem;
  }
}
@media only screen and (min-width: 600px) {
  .redireccionamiento__h1 {
    font-size: 28px;
    margin-top: 1rem;
  }

  .redireccionamiento__h2 {
    font-size: 16px;
  }

  .redireccionamiento__h3 {
    font-size: 18px;
    margin-top: 1rem;
  }
}
@media only screen and (min-width: 768px) {
  .redireccionamiento__h1 {
    font-size: 28px;
    margin-top: 1rem;
  }

  .redireccionamiento__h2 {
    font-size: 16px;
  }

  .redireccionamiento__h3 {
    font-size: 18px;
    margin-top: 1rem;
  }
}
@media only screen and (min-width: 1024px) {
  .redireccionamiento__h1 {
    font-size: 28px;
    margin-top: 1rem;
  }

  .redireccionamiento__h2 {
    font-size: 20px;
  }

  .redireccionamiento__h3 {
    font-size: 20px;
    margin-top: 1rem;
  }
}
@media only screen and (min-width: 1200px) {
  .redireccionamiento__h1 {
    font-size: 32px;
    margin-top: 1rem;
  }

  .redireccionamiento__h2 {
    font-size: 28px;
  }

  .redireccionamiento__h3 {
    font-size: 32px;
    margin-top: 1rem;
  }
}
/*------------FOOTER CON GRIDS------------*/
/*------------FOOTER CON GRIDS------------*/
/*------------FOOTER CON GRIDS------------*/
.container__footer {
  display: grid;
  align-content: space-around;
  align-items: center;
  text-align: center;
  background-image: url(../images/bbb.jpg);
  background-image: cover;
  background-position: center;
  box-shadow: 0px -5px 7px 0px rgba(59, 59, 59, 0.75);
  padding: 1%;
}

ul.menu__footer {
  padding: 0%;
}

.menu__footer {
  list-style: none;
  font-size: 12px solid;
  color: white;
}

#menu__inf a {
  font-family: "kanit";
  font-size: 10px solid;
  color: white;
  text-decoration: none;
}

#menu__inf .focusHover a:hover {
  color: #24d600;
}

/*-------------- PÁGINAS LEGALES------------*/
/*-------------- PÁGINAS LEGALES------------*/
/*-------------- PÁGINAS LEGALES------------*/
.main__legales {
  margin: 12rem 3rem 5rem 3rem;
}

.legales {
  text-align: justify;
}

.legales__h3 {
  font-weight: bold;
  text-align: left;
  font-size: 24px;
  color: #585858;
}

.legales__h3--color {
  color: #24d600;
}

.legales__h3--text {
  text-transform: uppercase;
  text-align: center;
}

.legales__p {
  font-size: 14px;
  color: black;
  text-align: justify;
}

/*---PAGINA NOSOTROS---*/
.carousel-nosotros {
  width: 100%;
  height: 14rem;
}

#videos-nosotros {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  overflow: hidden;
}

.video-nosotros {
  border: 8px solid #d6d6d6;
}

marquee {
  background-color: rgba(0, 0, 0, 0.774);
  color: #ffffff;
  font-size: 20px;
  padding: 0.5rem;
  margin-bottom: 2rem;
}

@media only screen and (max-width: 480px) {
  .legales__h3--text {
    font-size: 16px;
  }
}
/*--------------------------PÁGINA DE PRODUCTOS-----------------------*/
/*--------------Productos: Galería con GRID: Info general-------------*/
/*--------------Productos: Galería con GRID: Info general-------------*/
/*--------------Productos: Galería con GRID: Info general-------------*/
#gallery {
  background-image: url(../images/bbb.jpg);
  background-size: 100vh;
  justify-content: center;
}

#gallery h3 {
  font-family: "kanit";
  font-weight: normal;
  font-size: 1.5rem;
  color: white;
  text-align: center;
  justify-content: center;
}

.grid-item {
  min-height: 240px;
  min-width: 220px;
  background-color: aqua;
  border: 0.15rem solid white;
  border-radius: 0.2rem;
}

.grid-item:hover {
  transform: scale(1.04);
  transition: 0.5s;
  filter: none;
  box-shadow: 5px 5px 5px 1px rgba(43, 42, 42, 0.774);
}

.grid-container {
  width: 95%;
  margin: auto;
  height: auto;
  padding: 2%;
  display: grid;
  grid-column-gap: 15px;
  grid-row-gap: 15px;
}

/*----------Galería con GRID: Items con imágenes----------*/
/*----------Galería con GRID: Items con imágenes----------*/
/*----------Galería con GRID: Items con imágenes----------*/
.item1 {
  grid-area: "item1";
  background-color: coral;
  background-image: url(../images/ax-100-1-sin-fondo.png);
  background-size: cover;
  background-position: center;
  filter: grayscale(1);
}

.item2 {
  grid-area: "item2";
  background-color: aquamarine;
  background-image: url(../images/relay-con-fusible.png);
  background-size: cover;
  background-position: center;
  filter: grayscale(1);
}

.item3 {
  grid-area: "item3";
  background-color: blue;
  background-image: url(../images/relay-gn125-en125.png);
  background-size: cover;
  background-position: center;
  filter: grayscale(1);
}

.item4 {
  grid-area: "item4";
  background-color: cadetblue;
  background-image: url(../images/bujias-vertical.jpg);
  background-size: cover;
  background-position: center;
  filter: grayscale(1);
}

.item5 {
  grid-area: "item5";
  background-color: crimson;
  background-image: url(../images/cross-prod.jpg);
  background-size: cover;
  background-position: center;
  filter: grayscale(1);
}

.item6 {
  grid-area: "item6";
  background-color: indianred;
  background-image: url(../images/new-titan-150.png);
  background-size: cover;
  background-position: center;
  filter: grayscale(1);
}

.item7 {
  grid-area: "item7";
  background-color: khaki;
  background-image: url(../images/relay-con-cable.png);
  background-size: cover;
  background-position: center;
  filter: grayscale(1);
}

.item8 {
  grid-area: "item8";
  background-color: lightskyblue;
  background-image: url(../images/publi-mamamotos.jpg);
  background-size: cover;
  background-position: center;
  filter: grayscale(1);
}

.item9 {
  grid-area: "item9";
  background-color: palevioletred;
  background-image: url(../images/kit-de-transmision.jpg);
  background-size: cover;
  background-position: center;
  filter: grayscale(1);
}

.item10 {
  grid-area: "item10";
  background-color: peru;
  background-image: url(../images/ey-198-urbana-nayasa.jpg);
  background-size: cover;
  background-position: center;
  filter: grayscale(1);
}

.item11 {
  grid-area: "item11";
  background-color: sienna;
  background-image: url(../images/f-923-enduro-hf.jpg);
  background-size: cover;
  background-position: center;
  filter: grayscale(1);
}

.item12 {
  grid-area: "item12";
  background-color: teal;
  background-image: url(../images/jfo-0026.jpg);
  background-size: cover;
  background-position: center;
  filter: grayscale(1);
}

.item13 {
  grid-area: "item13";
  background-color: yellowgreen;
  background-image: url(../images/urbf931.jpg);
  background-size: cover;
  background-position: center;
  filter: grayscale(1);
}

.item14 {
  grid-area: "item14";
  background-color: yellow;
  background-image: url(../images/baterias.jpg);
  background-size: cover;
  background-position: center;
  filter: grayscale(1);
}

.item15 {
  grid-area: "item15";
  background-color: yellowgreen;
  background-image: url(../images/cub-kenda.jpg);
  background-size: cover;
  background-position: center;
  filter: grayscale(1);
}

.item16 {
  grid-area: "item16";
  background-color: turquoise;
  background-image: url(../images/filtro-aceite-pordentro.png);
  background-size: cover;
  background-position: center;
  filter: grayscale(1);
}

.item17 {
  grid-area: "item17";
  background-color: white;
  background-image: url(../images/filtros-portada.png);
  background-size: cover;
  background-position: center;
  filter: grayscale(1);
}

.item18 {
  grid-area: "item18";
  background-color: #c50404;
  background-image: url(../images/man-aluminio-street.jpg);
  background-size: cover;
  background-position: center;
  filter: grayscale(1);
}

.item19 {
  grid-area: "item19";
  background-color: rosybrown;
  background-image: url(../images/trave-mda.jpg);
  background-size: cover;
  background-position: center;
  filter: grayscale(1);
}

.item20 {
  grid-area: "item20";
  background-color: royalblue;
  background-image: url(../images/32mm-cortina-plana.png);
  background-size: cover;
  background-position: center;
  filter: grayscale(1);
}

.item21 {
  grid-area: "item21";
  background-color: #abd7f0;
  background-image: url(../images/punos-colores.png);
  background-size: cover;
  background-position: center;
  filter: grayscale(1);
}

.item22 {
  grid-area: "item22";
  background-color: seagreen;
  background-image: url(../images/nayasa-1.jpg);
  background-size: cover;
  background-position: center;
  filter: grayscale(1);
}

.item23 {
  grid-area: "item23";
  background-color: slateblue;
  background-image: url(../images/nayasa-2.jpg);
  background-size: cover;
  background-position: center;
  filter: grayscale(1);
}

.item24 {
  grid-area: "item24";
  background-color: wheat;
  background-image: url(../images/nayasa-3.jpg);
  background-size: cover;
  background-position: center;
  filter: grayscale(1);
}

.item25 {
  grid-area: "item25";
  background-color: #e40000;
  background-image: url(../images/jfa-m29.png);
  background-size: cover;
  background-position: center;
  filter: grayscale(1);
}

.item26 {
  grid-area: "item26";
  background-color: #ff9900;
  background-image: url(../images/punos-verde-fluo.png);
  background-size: cover;
  background-position: center;
  filter: grayscale(1);
}

.item27 {
  grid-area: "item27";
  background-color: turquoise;
  background-image: url(../images/ax-100-3-sin-fondo.png);
  background-size: cover;
  background-position: center;
  filter: grayscale(1);
}

.item28 {
  grid-area: "item28";
  background-color: violet;
  background-image: url(../images/cryptom-new-cryptom.png);
  background-size: cover;
  background-position: center;
  filter: grayscale(1);
}

.item29 {
  grid-area: "item29";
  background-color: #f7fda7;
  background-image: url(../images/jfa0238-yamaha.png);
  background-size: cover;
  background-position: center;
  filter: grayscale(1);
}

.item30 {
  grid-area: "item30";
  background-color: teal;
  background-image: url(../images/elevadores.png);
  background-size: cover;
  background-position: center;
  filter: grayscale(1);
}

/*-------MOBILE FIRST GALERÍA en 360px 480px 600px 768px 1024px 1200px-------*/
/*-------MOBILE FIRST GALERÍA en 360px 480px 600px 768px 1024px 1200px-------*/
/*-------MOBILE FIRST GALERÍA en 360px 480px 600px 768px 1024px 1200px-------*/
@media only screen and (min-width: 360px) and (max-width: 480px) {
  .grid-container {
    grid-template-columns: 1fr;
  }

  #gallery {
    margin: 45% 2% 5% 2%;
  }

  .grid-item {
    height: 19rem;
  }
}
@media only screen and (min-width: 480px) {
  .grid-container {
    grid-template-columns: 1fr 1fr;
  }

  .grid-item {
    min-height: 150px;
    min-width: 150px;
  }

  #gallery {
    margin: 35% 2% 6% 2%;
  }
}
@media only screen and (min-width: 600px) {
  .grid-container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .grid-item {
    min-width: 150px;
  }

  .item1 {
    grid-row-start: 1;
    grid-row-end: 3;
  }

  .item4 {
    grid-row-start: 2;
    grid-row-end: 4;
  }

  .item2 {
    grid-column-start: 2;
    grid-column-end: 4;
  }

  .item8 {
    grid-column-start: 2;
    grid-column-end: 4;
  }

  .item9 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 5;
    grid-row-end: 7;
  }

  .item13 {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 7;
    grid-row-end: 8;
  }

  .item15 {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 8;
    grid-row-end: 10;
  }

  .item19 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 10;
    grid-row-end: 12;
  }

  .item21 {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 10;
    grid-row-end: 12;
  }

  .item23 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 12;
    grid-row-end: 14;
  }

  .item27 {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 14;
    grid-row-end: 15;
  }

  .item28 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 15;
    grid-row-end: 17;
  }

  #gallery {
    margin: 28% 2% 5% 2%;
  }
}
@media only screen and (min-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .grid-item {
    min-height: 200px;
  }

  .item1 {
    grid-row-start: 1;
    grid-row-end: 3;
  }

  .item4 {
    grid-row-start: 2;
    grid-row-end: 4;
  }

  .item2 {
    grid-column-start: 2;
    grid-column-end: 4;
    background-position: center;
  }

  .item8 {
    grid-column-start: 2;
    grid-column-end: 4;
  }

  .item9 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 5;
    grid-row-end: 7;
  }

  .item13 {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 8;
    grid-row-end: 10;
  }

  .item15 {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 7;
    grid-row-end: 8;
  }

  .item19 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 12;
    grid-row-end: 14;
  }

  .item21 {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 10;
    grid-row-end: 12;
  }

  .item23 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 10;
    grid-row-end: 12;
  }

  .item27 {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 14;
    grid-row-end: 15;
  }

  .item28 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 15;
    grid-row-end: 17;
  }

  #gallery {
    margin: 22% 2% 4% 2%;
  }
}
@media only screen and (min-width: 1024px) {
  .grid-container {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  .grid-item {
    min-height: 220px;
  }

  .item1 {
    grid-column-start: 1;
    grid-column-end: 2;
  }

  .item2 {
    grid-column-start: 2;
    grid-column-end: 3;
  }

  .item3 {
    grid-column-start: 3;
    grid-column-end: 5;
  }

  .item8 {
    grid-column-start: 3;
    grid-column-end: 5;
  }

  .item9 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 5;
    grid-row-end: 7;
  }

  .item13 {
    grid-column-start: 4;
    grid-column-end: 5;
    grid-row-start: 4;
    grid-row-end: 6;
  }

  .item15 {
    grid-column-start: 3;
    grid-column-end: 5;
    grid-row-start: 6;
    grid-row-end: 7;
  }

  .item18 {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 7;
    grid-row-end: 9;
  }

  .item19 {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 9;
    grid-row-end: 10;
  }

  .item21 {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 9;
    grid-row-end: 10;
  }

  .item22 {
    grid-column-start: 4;
    grid-column-end: 5;
    grid-row-start: 8;
    grid-row-end: 9;
  }

  .item23 {
    grid-column-start: 4;
    grid-column-end: 5;
    grid-row-start: 9;
    grid-row-end: 11;
  }

  .item24 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 9;
    grid-row-end: 11;
  }

  .item25 {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 10;
    grid-row-end: 11;
  }

  .item26 {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 10;
    grid-row-end: 11;
  }

  .item27 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 11;
    grid-row-end: 12;
  }

  .item28 {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 11;
    grid-row-end: 12;
  }

  .item29 {
    grid-column-start: 3;
    grid-column-end: 5;
    grid-row-start: 11;
    grid-row-end: 13;
  }

  .item30 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 12;
    grid-row-end: 13;
  }

  #gallery {
    margin: 16% 2% 3% 2%;
  }
}
@media only screen and (min-width: 1200px) {
  .grid-container {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }

  .grid-item {
    min-height: 260px;
  }

  .item1 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
  }

  .item2 {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 2;
  }

  .item3 {
    grid-column-start: 4;
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 2;
  }

  .item4 {
    grid-column-start: 5;
    grid-column-end: 6;
    grid-row-start: 1;
    grid-row-end: 3;
  }

  .item5 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 4;
  }

  .item6 {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
  }

  .item7 {
    grid-column-start: 4;
    grid-column-end: 5;
    grid-row-start: 2;
    grid-row-end: 3;
  }

  .item8 {
    grid-column-start: 3;
    grid-column-end: 6;
    grid-row-start: 3;
    grid-row-end: 4;
  }

  .item9 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 4;
    grid-row-end: 5;
  }

  .item10 {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 4;
    grid-row-end: 6;
  }

  .item11 {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 4;
    grid-row-end: 5;
  }

  .item12 {
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row-start: 4;
    grid-row-end: 6;
  }

  .item13 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 5;
    grid-row-end: 6;
  }

  .item14 {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 5;
    grid-row-end: 6;
  }

  .item15 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 6;
    grid-row-end: 7;
  }

  .item16 {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 6;
    grid-row-end: 7;
  }

  .item17 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 7;
    grid-row-end: 8;
  }

  .item18 {
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row-start: 6;
    grid-row-end: 7;
  }

  .item19 {
    grid-column-start: 2;
    grid-column-end: 5;
    grid-row-start: 7;
    grid-row-end: 8;
  }

  .item20 {
    grid-column-start: 5;
    grid-column-end: 6;
    grid-row-start: 7;
    grid-row-end: 9;
  }

  .item21 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 8;
    grid-row-end: 10;
  }

  .item22 {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 8;
    grid-row-end: 9;
  }

  .item23 {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 8;
    grid-row-end: 9;
  }

  .item24 {
    grid-column-start: 4;
    grid-column-end: 5;
    grid-row-start: 8;
    grid-row-end: 9;
  }

  .item25 {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 9;
    grid-row-end: 10;
  }

  .item26 {
    grid-column-start: 3;
    grid-column-end: 5;
    grid-row-start: 9;
    grid-row-end: 11;
  }

  .item27 {
    grid-column-start: 5;
    grid-column-end: 6;
    grid-row-start: 9;
    grid-row-end: 10;
  }

  .item28 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 10;
    grid-row-end: 11;
  }

  .item29 {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 10;
    grid-row-end: 11;
  }

  .item30 {
    grid-column-start: 5;
    grid-column-end: 6;
    grid-row-start: 10;
    grid-row-end: 11;
  }

  #gallery {
    margin: 14% 2% 3% 2%;
  }
}
/*--------Termina la Galería con GRIDS--------*/
/*--------Termina la Galería con GRIDS--------*/
/*--------Termina la Galería con GRIDS--------*/
/*------------------PÁGINA DE CONTACTO----------------*/
/*------------------PÁGINA DE CONTACTO----------------*/
/*------------------PÁGINA DE CONTACTO----------------*/
/*-------Main Contacto con Bootstrap--------*/
.contact__h5 {
  font-size: 26px;
  text-shadow: 2px 2px 2px rgba(27, 27, 27, 0.75);
}

#main__contact {
  margin-top: 10rem;
}

.contact__h1--color {
  color: white;
  text-shadow: 2px 2px 2px rgba(27, 27, 27, 0.75);
}

.form__contact {
  color: white;
  background-color: rgba(0, 0, 0, 0.774);
  border-radius: 5px;
}

fieldset {
  border: 2px solid white;
  padding-left: 1rem;
  padding-bottom: 1rem;
}

.grid__contact {
  display: grid;
}

#contact__page {
  place-items: center;
}

.btn-outline-success:hover {
  background-color: white;
  border-color: #24d600;
}

.form-check-input:checked {
  background-color: #24d600;
  border-color: #24d600;
}

.btn-contact {
  text-decoration: none;
  color: white;
  background-color: #24d600;
  border: none;
}

@media only screen and (min-width: 360px) and (max-width: 480px) {
  .grid__contact {
    grid-template-columns: 1fr;
  }

  .contact__h1 {
    font-size: 38px;
  }

  #contact__page {
    background-image: none;
  }

  .logo__contact {
    width: 75%;
  }

  #contact__us {
    background-image: url(../images/background-contactus2.jpg);
    background-size: cover;
    margin-bottom: 1rem;
    align-items: center;
    background-position-x: center;
    text-align: center;
    color: white;
  }

  .contact__h5 {
    font-size: 18px;
    padding: 0.5rem;
  }
}
@media only screen and (min-width: 480px) and (max-width: 600px) {
  .grid__contact {
    grid-template-columns: 1fr;
  }

  .contact__h1 {
    font-size: 38px;
  }

  #contact__page {
    background-image: none;
  }

  .logo__contact {
    width: 75%;
  }

  #contact__us {
    background-image: url(../images/background-contactus2.jpg);
    background-size: cover;
    margin-bottom: 1rem;
    align-items: center;
    background-position-x: center;
    text-align: center;
    color: white;
  }

  .contact__h5 {
    font-size: 20px;
    padding: 0.5rem;
  }
}
@media only screen and (min-width: 600px) {
  .grid__contact {
    grid-template-columns: 1fr;
  }

  .contact__h1 {
    font-size: 38px;
  }

  #contact__page {
    background-image: none;
  }

  .logo__contact {
    width: 75%;
  }

  #contact__us {
    background-image: url(../images/background-contactus2.jpg);
    padding-top: 2rem;
    background-size: cover;
    margin-bottom: 1rem;
    align-items: center;
    background-position-x: center;
    text-align: center;
    color: white;
  }

  .contact__h5 {
    font-size: 20px;
    padding: 0.5rem;
  }
}
@media only screen and (min-width: 768px) {
  .grid__contact {
    grid-template-columns: 1fr 1fr;
  }

  .contact__h1 {
    font-size: 48px;
  }

  #contact__page {
    background-image: url(../images/background-contactus2.jpg);
    background-repeat: no-repeat;
    background-position-x: center;
  }

  .logo__contact {
    width: 90%;
    margin-bottom: 1rem;
  }

  #contact__us {
    background-image: none;
    margin: auto;
    padding-inline: 1rem;
  }

  .grid__contact--item2 {
    margin: 1rem;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1200px) {
  .grid__contact {
    grid-template-columns: 1fr 1fr;
    padding: 1rem;
  }

  .grid__contact--item1 {
    grid-column-start: 1;
    grid-column-end: 2;
  }

  .grid__contact--item2 {
    grid-column-start: 2;
    grid-column-end: 3;
  }

  #contact__page {
    background-image: url(../images/background-contactus2.jpg);
    height: auto;
    background-repeat: no-repeat;
    background-position-x: center;
  }

  .p__cont {
    margin-top: 3rem;
  }

  #contact__us {
    background-image: none;
    margin: auto;
    padding: auto;
    justify-content: center;
    align-items: center;
  }

  .contact__h1 {
    font-size: 54px;
  }

  .logo__contact {
    width: 100%;
  }
}
@media only screen and (min-width: 1200px) {
  .grid__contact {
    grid-template-columns: 1fr 1fr;
    padding: 1rem;
  }

  .grid__contact--item1 {
    grid-column-start: 1;
    grid-column-end: 2;
  }

  .grid__contact--item2 {
    grid-column-start: 2;
    grid-column-end: 3;
    margin-top: auto;
    margin-bottom: auto;
  }

  #contact__page {
    background-image: url(../images/background-contactus2.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position-x: center;
  }

  #contact__us {
    background-image: none;
  }

  .contact__h1 {
    font-size: 72px;
  }

  .logo__contact {
    width: 100%;
  }
}
/*---------Mapa de Google----------*/
/*---------Mapa de Google----------*/
/*---------Mapa de Google----------*/
.p__cont {
  text-align: center;
  font-size: 32px;
  color: #585858;
}

#mapa {
  border-top: double 10px rgba(0, 0, 0, 0.774);
  border-right: none;
  border-bottom: double 10px rgba(0, 0, 0, 0.774);
  border-left: none;
  margin: 0%;
  padding: 0%;
  overflow: hidden;
}

#pag__error {
  margin: 0%;
  padding: 0%;
  position: relative;
  text-align: center;
  font-weight: bolder;
  position: relative;
  width: 100%;
  vertical-align: middle;
  align-items: center;
  display: inline-block;
  background-image: url(../images/bbb.jpg);
  overflow: hidden;
}

.h2__error {
  font-size: 100px;
  text-align: center;
  font-style: italic;
}

.degrad {
  background: linear-gradient(50deg, #686767, white, black);
  color: transparent;
  -webkit-background-clip: text;
          background-clip: text;
}

.sombra_movil {
  transform: translateX(0);
  transition-duration: 0.3s;
}

.sombra_movil:before {
  opacity: 0.4;
  transform: translateY(6px);
  position: auto;
  -webkit-animation: 1.5s moversombra infinite;
          animation: 1.5s moversombra infinite;
}

@-webkit-keyframes moversombra {
  50% {
    opacity: 1;
    -webkit-transform: translateY(3px);
  }
}

@keyframes moversombra {
  50% {
    opacity: 1;
    -webkit-transform: translateY(3px);
  }
}
.sombra_movil:before {
  content: "";
  top: 100%;
  height: 10px;
  width: 90%;
  opacity: 0;
  background: radial-gradient(center, ellipse, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 80%);
  transition-duration: 0.3s;
}

.h1__error {
  font-size: 200px;
  text-align: center;
  font-weight: bold;
  background: -webkit-linear-gradient(100deg, white, white, black);
  color: transparent;
  -webkit-background-clip: text;
          background-clip: text;
  opacity: 0.4;
  transform: translateY(20px);
  -webkit-animation: 1.5s moversombra infinite;
          animation: 1.5s moversombra infinite;
}

.h3__error {
  background: -webkit-linear-gradient(50deg, #686767, white, black);
  color: transparent;
  -webkit-background-clip: text;
          background-clip: text;
}

.intermitente {
  -webkit-animation: 2s intermitente infinite;
          animation: 2s intermitente infinite;
}

@-webkit-keyframes intermitente {
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
}

@keyframes intermitente {
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
}/*# sourceMappingURL=style.css.map */