/*** agrega aqui los estilos necesarios para modificar el template ***/

.bs-header-search .input-group {
    border: 1px solid #252552;
}

.bs-header-search .btn-search {
    box-shadow: 2px 0px #252552 inset;
    color: #252552;
}

.bs-banner-grid__info {
    background: url(patitasfondo.png);
    background-size: 85%;
}

.bs-collection__product-final-price {
    color: #858585;
}

.bs-collection__product-final-price {
    color: #858585;
}

.bs-header {
    background: url(pets.png);
}

.bs-header-search .input-group {
    background: rgb(255 255 255);
}

.bs-header {
    background: url(patitasfondo.png);
    background-size: 15%;
}

.bs-menu__lv1:hover {
    color: #cba153;
}

.btn-dark {
    background-color: #aaaaaa;
    border-color: #aaaaaa;
    color: #ffffff;
}

.btn-dark:hover {
    color: #ffffff;
    background-color: #2a2d59;
    border-color: #2a2d59;
}

.bs-footer__social .btn-social {
    background: #252552;
    color: #ffffff;
}

.bs-footer__social .btn-social:hover {
    background: #f3b849;
    color: var(--primary-contrast);
}

@media screen and (max-width:767px){
.bs-footer__social .chat-whatsapp {
    border: #252552 1px solid;
    color: #ffffff;
    background: #252552;
}
}


@media screen and (max-width:767px){
.bs-footer__social .chat-facebook {
    border: #252552 1px solid;
    color: #ffffff;
    background: #252552;
}
}

.btn-primary.paralax:hover, .btn-primary.paralax:active, .btn-primary.paralax.active,.btn-primary.paralax:focus,.btn-primary.paralax:not(:disabled):not(.disabled).active:focus,.btn-primary.paralax:not(:disabled):not(.disabled):active:focus,.show>.btn-primary.paralax.dropdown-toggle:focus.btn-primary.paralax:not(:disabled):not(.disabled).active, .btn-primary.paralax:not(:disabled):not(.disabled):active, .show>.btn-primary.paralax.dropdown-toggle,.btn-primary.paralax.disabled, .btn-primary.paralax:disabled{
background: #323584;
    border-color: #323584;
    color: var(--primary-contrast);
}


/*** arreglo facundo imagen footer ***/

@media screen and (min-width:111px){
.colorear {
    background-image: linear-gradient( rgb(0 0 0 / 0%), rgb(0 0 0 / 0%) ), url(bannerfooter.png);
    background-size: contain;
    padding-top: 0rem;
    max-width: 100%;
}
  .bs-footer__containt {
    padding-top: 73px;
} 
.bs-footer__containt::before {
    position: absolute;
    top: 6rem;
    bottom: 0;
    display: block;
    content: "";
    width: 100%;
    background: linear-gradient(180deg, rgba(var(--footer-bg-color),0) 0px, rgba(var(--footer-bg-color),1) 4rem , rgba(var(--footer-bg-color),1) 100% );
}
}
@media screen and (min-width:320px){
.colorear {
    background-image: linear-gradient( rgb(0 0 0 / 0%), rgb(0 0 0 / 0%) ), url(bannerfooter.png);
    background-size: contain;
    padding-top: 10rem;
    max-width: 100%;
}
  .bs-footer__containt {
    padding-top: 0px;
} 
.bs-footer__containt::before {
    position: absolute;
    top: -3rem;
    bottom: 0;
    display: block;
    content: "";
    width: 100%;
    background: linear-gradient(180deg, rgba(var(--footer-bg-color),0) 0px, rgba(var(--footer-bg-color),1) 4rem , rgba(var(--footer-bg-color),1) 100% );
}
}
@media screen and (min-width:576px) {
.colorear {
    background-image: linear-gradient( rgb(0 0 0 / 0%), rgb(0 0 0 / 0%) ), url(bannerfooter.png);
    background-size: contain;
    padding-top: 17rem;
    max-width: 100%;
}   
  .bs-footer__containt {
    padding-top: 0px;
}
.bs-footer__containt::before {
    position: absolute;
    top: -5rem;
    bottom: 0;
    display: block;
    content: "";
    width: 100%;
    background: linear-gradient(180deg, rgba(var(--footer-bg-color),0) 0px, rgba(var(--footer-bg-color),1) 4rem , rgba(var(--footer-bg-color),1) 100% );
}
}

@media screen and (min-width:768px) {
.colorear {
    background-image: linear-gradient( rgb(0 0 0 / 0%), rgb(0 0 0 / 0%) ), url(bannerfooter.png);
    background-size: contain;
    padding-top: 18rem;
    max-width: 100%;
}
  .bs-footer__containt {
    padding-top: 47px;
} 
.bs-footer__containt::before {
    position: absolute;
    top: -1rem;
    bottom: 0;
    display: block;
    content: "";
    width: 100%;
    background: linear-gradient(180deg, rgba(var(--footer-bg-color),0) 0px, rgba(var(--footer-bg-color),1) 4rem , rgba(var(--footer-bg-color),1) 100% );
}
}
@media screen and (min-width:992px) {
 .colorear {
    background-image: linear-gradient( rgb(0 0 0 / 0%), rgb(0 0 0 / 0%) ), url(bannerfooter.png);
    background-size: cover;
    padding-top: 22rem;
    max-width: 100%;
}
  .bs-footer__containt {
    padding-top: 0px;
}
.bs-footer__containt::before {
    position: absolute;
    top: -3rem;
    bottom: 0;
    display: block;
    content: "";
    width: 100%;
    background: linear-gradient(180deg, rgba(var(--footer-bg-color),0) 0px, rgba(var(--footer-bg-color),1) 4rem , rgba(var(--footer-bg-color),1) 100% );
}
}
@media screen and (min-width:1200px) {
 .colorear {
    background-image: linear-gradient( rgb(0 0 0 / 0%), rgb(0 0 0 / 0%) ), url(bannerfooter.png);
    background-size: cover;
    padding-top: 21rem;
    max-width: 100%;
}
  .bs-footer__containt {
    padding-top: 135px;
}
.bs-footer__containt::before {
    position: absolute;
    top: 6rem;
    bottom: 0;
    display: block;
    content: "";
    width: 100%;
    background: linear-gradient(180deg, rgba(var(--footer-bg-color),0) 0px, rgba(var(--footer-bg-color),1) 4rem , rgba(var(--footer-bg-color),1) 100% );
}
}
@media screen and (min-width:1600px) {
 .colorear {
    background-image: linear-gradient( rgb(0 0 0 / 0%), rgb(0 0 0 / 0%) ), url(bannerfooter.png);
    background-size: cover;
    padding-top: 18rem;
    max-width: 100%;
}
  .bs-footer__containt {
    padding-top: 251px;
}
.bs-footer__containt::before {
    position: absolute;
    top: 16rem;
    bottom: 0;
    display: block;
    content: "";
    width: 100%;
    background: linear-gradient(180deg, rgba(var(--footer-bg-color),0) 0px, rgba(var(--footer-bg-color),1) 4rem , rgba(var(--footer-bg-color),1) 100% );
}
}




@media screen and (max-width:576px) {
   
.bs-copyright {
    background: white;
    color: black;
} 
}
@media screen and (min-width:576px) {
 
.bs-copyright {
    background: #252552;
}   
}


h5.bs-footer__title {
    font-family: "Lilita One", sans-serif;
    font-weight: 400;
    font-style: normal;
    text-transform: uppercase;
    font-size: 22px;
}

.bs-home__title, .bs-home__title:hover {
    font-family: "Lilita One", sans-serif;
    text-transform:uppercase;
}