.no-margin {margin:0 !important}
.no-padding {padding:0 !important}
.no-margin-top {margin-top:0 !important}
.padding-100px-top {padding-top:100px;}
.padding-100px-bottom {padding-bottom:100px;}
.padding-100px-tb {padding-top:100px; padding-bottom:100px;}
.padding-30px-bottom {padding-bottom:30px;}
.padding-10px-tb {padding-top:10px; padding-bottom:10px;}
.padding-10px-top {padding-top:10px;}
.margin-30px-tb {margin-top:30px; margin-bottom:30px;}
.font-weight-600 {font-weight:600}
.margin-10px-top {margin-top:10px}
.margin-20px-top {margin-top:20px}
.margin-15px-top {margin-top:15px}






.color-alt{
    color: #EB3C27!important;
}

.input-buscador{
  width: 100%;
  margin-right: 20px;
}

.content-buscador-main{
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding-left: 30px;
  padding-right: 30px;
}

.bg-articulo{
  background: #F5F5F5;
}

.main-title{
  padding-bottom: 30px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
}

.line-bottom-y:before {
    content: '';
    display: block;
    margin-bottom: 0px;
    width: 100%;
    height: 3px;
    background-color: #FDDB27;
}

.botton-asesor{
  color: #000;
  background: #FFE039;
  padding: 9px 5px;
  min-width: 200px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-left: 25px;
  padding-right: 25px;
  font-weight: 600;
  border: none;
  border-radius: 5px;
  font-size: 14px;
}

.botton-buscar{
  color: #000;
  background: #FFE039;
  padding: 9px 5px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-left: 25px;
  padding-right: 25px;
  font-weight: 600;
  border: none;
  border-radius: 5px;
  font-size: 14px;
}

.botton-buscar:hover{
  color: #ffffff;
  background-color: #EB3C27;
}


.grid-main{
  display: grid;
  grid-template-columns: 1fr;
  gap:20px;
}

/* ===================================
  Galeria
====================================== */

#galeria-novedades{
  width: 100%;
  overflow: hidden;
}

#galeria-novedades .swiper-slide{
  width: 100%;
  height: 280px;
  background: blue;
  position: relative;
}

#galeria-novedades .img-novedad{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#galeria-novedades .content-description{
  z-index: 100;
  position: absolute;
  top:0px;
  width: 100%;
  height: 100%;
  /*background: linear-gradient(90deg, #000000 0%, rgba(0, 0, 0, 0) 100%);*/
  padding-left: 50px;
  padding-right: 50px;
  padding-top: 50px;
  padding-bottom: 50px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

#galeria-novedades .description{
  width: 100%;
  text-align: left;
}

#galeria-novedades h2{
  color: #fff;
  font-weight: 400;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* number of lines to show */
  -webkit-box-orient: vertical;
}

#galeria-novedades p{
  color: #fff;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* number of lines to show */
  -webkit-box-orient: vertical;
}


#galeria-novedades .swiper-button-next{
  z-index: 10;
  color: #fff;
  background-image: url(../img/ico-flecha-der.svg);
}



#galeria-novedades .swiper-button-prev{
    z-index: 10;
  color: #fff;
  background-image: url(../img/ico-flecha-izq.svg);
}

/* ===================================
    Filtros
====================================== */

.content-filtros{
  background: #F5F5F5;
  padding: 10px;
  border-radius: 5px;
  position: absolute;
  top:50px;
}

.conten-btn-filtros{
  display: inline;
  float: right;
}

/* ===================================
    Section catalogo
====================================== */

#cont-catalogo h3{
  font-size: 1.175rem;
}

.grid-section-catalogo{
  display: grid;
  grid-template-columns: 1fr;
  gap:20px;
}

.card-shop{
  border-radius: 5px 5px 0px 0px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 400px;
  background: #F5F5F5;
  padding: 10px;
}


.content-img{
  width: 100%;
  height: 300px;
  background: #fff
}


.card-shop .img-clothes {
    height: 100% !important;
    width: 100% !important;
    /*object-fit: cover;*/
    object-fit: scale-down;
    object-position: 50% 50%;
    aspect-ratio: 1 / 1;
}



.card-prices{
   height: 100%;
   width: 100%;
   display: flex;
   justify-content: space-between;
   flex-direction: column;
 }





.card-circle{
  width: 35px;
  height: 35px;
  background: #FFE039;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 10px;

}

.card-circle:hover{
  color: #ffffff;
  background-color: #EB3C27;
}

.card-circle:hover img{
  filter: brightness(0) invert(1);
}

.model{
  color: #000000;
  font-size: 12px;
}


.description{
  color: #555555;
  font-size: 14px;
  display: -webkit-box;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 2;
 overflow: hidden;
}


.card-shop .price{
  color: #EB3C27;
  font-size: 20px;
  line-height: 0;
}

.content-acesor{
  width: 100%;
}


.btn-std-card {
     width: 100%;
     display: inline-block;
     height: 35px;
     padding: 0 30px;
     font-size: 0.8125rem;
     font-weight: 500;
     color: #2A2A2A;
     background-color: #FDDB27;
     letter-spacing: 0.5px;
     display: flex;
     justify-content: center;
     align-items: center;
     /* -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
     -o-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
     transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); */
}
.btn-std-card:hover {
     color: #ffffff;
     background-color: #EB3C27;
}

.grid-section-shop .img-clothes{
  border-radius: 10px 10px 0px 0px;

}

.title-card{
  display: -webkit-box;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 1;
 overflow: hidden;
}

/* ===================================
    Articulo
====================================== */

.articulo{
  padding-top: 40px;
  padding-bottom: 40px;
}

.grid-product{
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 20px;

}

.line-bottom{
  border-bottom: 1px solid #3F464E;
  padding-bottom: 5px;
}


/*Galery articulo*/

.grid-gallery{
  width: 100%;
  display: grid;
  grid-gap: 20px;
}


.gallery-wrapper {
    position: relative;
    overflow: hidden;
}

.gallery {
    position: relative;
    white-space: nowrap;
    font-size: 0;
}

.item-wrapper {
    cursor: pointer;
    background-color: white;
    width: 100%;
}

.article-gallery ul, li{
    list-style: none;

}

.main {
  grid-area: main;
}

.prueba {
    grid-area: item;
}

.gallery-item {
  height:100% !important;
  width: 100% !important;
  object-fit: cover;
  object-position: 50% 50%;
  aspect-ratio: 1 / 1;
  margin-left:auto!important;
  margin-top:auto!important;
}

.gallery-item:hover {
  cursor: zoom-in;
  opacity: 0.5; }

.gallery-item .active { opacity: 0; }



.product-image{
  height: 100% !important;
  width: 100% !important;
  object-fit: cover;
  object-position: 50% 50%;
  aspect-ratio: 1 / 1;

}

.article-gallery{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap:  10px;
    height: auto!important;
}



.input-group .btn {
    z-index: 0;
}


.positive{
  filter: brightness(0) invert(1);
}





/*collapse*/
#main {
  margin: 50px 0;
}

#main #faq .card {
  margin-bottom: 30px;
  border: 0;
  background: transparent;
}



#main #faq .card .card-header .btn-header-link {
  display: block;
  text-align: left;
  background: transparent;
  color: #555;
  padding-bottom: 5px;
  font-size: 15px;
  font-weight: 600;
}

#main #faq .card .card-header .btn-header-link:after {
  content: "\f286";
  font-family: bootstrap-icons !important;
  font-weight: 900;
  float: right;
}

#main #faq .card .card-header .btn-header-link.collapsed {
  background: transparent;
  color: #555;
  padding-bottom: 5px;

}

#main .card-body{
  padding-top: 20px;
  padding-left: 0px;
  padding-right: 0px;
}

#main .card-header{
  background-color: transparent;
  padding: 0px!important;
}

#main #faq .card .card-header .btn-header-link.collapsed:after {
  content: "\f282";
}

#main #faq .card .collapsing {
  background: transparent;
  line-height: 30px;
}

#main #faq .card .collapse {
  border: 0;
}

#main #faq .card .collapse.show {
  background: transparent;
  line-height: 30px;
  color: #555;
}

#main #faq .btn.focus, .btn:focus {
    outline: 0;
    box-shadow: none;
}


/*--------------------*/

.breadcrumbs-path .botton-quitar-filtro:hover{
  color: #EB3C27;
}


#filtros {
  margin: 10px 0;
}

#filtros .card {
  margin-bottom: 15px;
  border: 0;
}

#filtros .card-body{
  padding: 5px;
  background: transparent;
}

#filtros .card .card-header {
  border: 0;
  -webkit-box-shadow: 0 0 20px 0 rgba(213, 213, 213, 0.5);
          box-shadow: 0 0 20px 0 rgba(213, 213, 213, 0.5);
  border-radius: 2px;
  padding: 0;
}

#filtros .card .card-header .btn-header-link {
  color: #fff;
  display: block;
  text-align: left;
  background: #acacac;
  padding: 5px;
  font-size: 14px;
}

#filtros .card .card-header .btn-header-link:after {
  content: "\f2ea";
  font-family: bootstrap-icons !important;
  font-weight: 900;
  float: right;
}

#filtros .card .card-header .btn-header-link.collapsed {
  background: #E7E7E7;
  color: #000;

}

#filtros .card .card-header .btn-header-link.collapsed:after {
  content: "\f4fe";
}

#filtros .card .collapsing {
  background: #F5F5F5;
  line-height: 30px;
}

#filtros .card .collapse {
  border: 0;
}

#filtros .card .collapse.show {
  background:#F5F5F5;
  line-height: 30px;
  color: #222;
}

#filtros .list-group li{
  font-size: 14px;
}

#filtros .list-group li:hover{
  cursor: pointer;
  color: #EB3C27;
}

#filtros .active{
  color: #EB3C27;
}



#navbarToggleExternalContent{
  transform: translateX(-700px);
  transition: transform .35s ease;
  display: block;
  height: auto;
  width: 100%;
}

#navbarToggleExternalContent.menu-show{
  transform: translateX(0%);
}

/* ===================================
    Paginador
====================================== */


.page-link{
  color: #555555;
}

.page-link:focus{
  box-shadow: 0 0 0 0rem rgba(0,123,255,.25);
}

.page-link:hover{
  color: #fff;
  text-decoration: none;
  background-color: #EB3C27;
}

.pagination .active{
  background: #acacac;
  color:#000;
}

/* ===================================
    Responsive
====================================== */


/* xxs */ @media (max-width: 430px) {}
/* xs  */ @media (min-width: 431px) {

} /* @media (max-width: 575px) {} */
/* sm  */ @media (min-width: 576px) {
.main-title{
    padding-bottom: 30px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-direction: row;
}
}
/* md  */ @media (min-width: 768px) {

#galeria-novedades .swiper-slide{
  width: 100%;
  height: 500px;
  background: blue;
  position: relative;
}

.content-buscador-main{
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  padding-left: 30px;
  padding-right: 30px;
}



.article-gallery{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap:  10px;
    height: auto!important;
}

.conten-btn-filtros{
  display: none;
}


.content-filtros{
  background: #F5F5F5;
  padding: 10px;
  border-radius: 5px;
  position: relative;
  left: 0;
  top:0;
}
.grid-main{
  display: grid;
  grid-template-columns: 50% auto;
  gap:20px;
}

.grid-product{
  display: grid;
  grid-template-columns: auto 55%;
  grid-gap: 20px;

}

#galeria-novedades .content-description{
  z-index: 100;
  position: absolute;
  top:0px;
  width: 100%;
  height: 100%;
  /*background: linear-gradient(90deg, #00000 0%, rgba(0, 0, 0, 0) 100%);*/
  padding-left: 100px;
  padding-right: 100px;
  padding-top: 50px;
  padding-bottom: 50px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

#galeria-novedades .description{
  width: 80%;
  text-align: left;
}

#galeria-novedades h2{
  color: #fff;
  font-weight: 400;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* number of lines to show */
  -webkit-box-orient: vertical;
}

#galeria-novedades p{
  color: #fff;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* number of lines to show */
  -webkit-box-orient: vertical;
}

} /* ipad Portrait */
/* lg  */ @media (min-width: 992px) {

.articulo{
  padding-top: 50px;
  padding-bottom: 50px;
}

#galeria-novedades .description{
  width: 50%;
  text-align: left;
}


.grid-main{
  display: grid;
  grid-template-columns: 30% auto;
  gap:20px;
}

.grid-section-catalogo{
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap:20px;
}

} /* ipad Landscape */
/* xl  */ @media (min-width: 1200px) {
.articulo{
  padding-top: 100px;
  padding-bottom: 100px;
}
.grid-main{
  display: grid;
  grid-template-columns: 20% auto;
  gap:20px;
}

.grid-section-catalogo{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap:20px;
}
}
/* xxl */ @media (min-width: 1400px) {}
