.may-swatches label {
    background: #fff;
  }
  #menu-cart {
    @supports (-webkit-appearance:none) {
        .os-android & {
          max-height: calc(100vh - 56px) !important;
        }
      }
  }
  @keyframes alertIn {
    0% {
      transform: translateY(-20px);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }
  @keyframes alertOut {
    0% {
      transform: translateY(-20px);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }
  @keyframes alertIconRotate {
    0% {
      transform: rotate(-10deg);
    }
    50% {
      transform: rotate(10deg) scale(.9);
    }
    100% {
      transform: rotate(-10deg);
    }
  }
  @keyframes alertIconRotate2 {
    0% {
      transform: rotate(-2deg);
    }
    50% {
      transform: rotate(2deg) scale(.98);
    }
    100% {
      transform: rotate(-2deg);
    }
  }
 
  #alert-nw-container {
    padding: 1rem;
    padding-right: 65px;
    width: 100%;
    max-width: 560px;
    z-index: 1100;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto !important;
    height: fit-content;
  }
  body.modal-open #alert-nw-container {
    padding-right: 50px;
  }
  @media screen and (max-width: 767px) {
    #alert-nw-container {
      padding-right: 1rem;
    }
  }
  body.modal-open #alert-nw-container{
    margin-right: 17px;
  }
  #alert-nw-container:empty {
    pointer-events: none;
  }
  .alert-nw {
    padding: 1rem;
    background: #fff;
    border-radius: 6px;
    border: 2px solid #eee;
    box-shadow: 0 5px 5px -5px #0001;
    margin-bottom: 10px;
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;
    position: relative;
    overflow: hidden;
    animation-name: alertIn;
    animation-duration: .3s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28)
  }
  .alert-nw.alert-out {
    animation-name: alertOut;
    animation-direction: reverse;
  }
  .alert-nw button.close {
    position: absolute;
    top: 0;
    right: 0;
    line-height: 1;
    padding: 5px;
    opacity: .5;
    z-index: 99;
  }
  .alert-nw:before, .alert-nw:after {
    font-size: 4.5rem;
    display: block;
    font-family: 'FontAwesome';
    line-height: 1;
  }
  .alert-nw:before {
    animation-name: alertIconRotate2;
    animation-duration: 2s;
    animation-iteration-count: infinite;
  }
  .alert-nw.warning:before, .alert-nw.warning:after {
    content: "\f071";
    color: #e67d7d;
  }
  .alert-nw.warning {
    /* border: 2px solid #de0d0d94; */
    box-shadow: 0 0 5px 0px #de0d0d61;
  }
  .alert-nw.info:before, .alert-nw.info:after {
    content: "\f05a";
    color: #efc80a;
  }
  .alert-nw.info {
    /* border: 2px solid #efc80a94; */
    box-shadow: 0 0 5px 0px #efc80a61;
  }
  .alert-nw.success {
    /* border: 2px solid #84de0d61; */
    box-shadow: 0 0 5px 0px #84de0d61;
  }
  .alert-nw.success:before, .alert-nw.success:after {
    content: "\f14a";
    color: #9ad66d;
  }
  .alert-nw:after {
    width: 100%;
    position: absolute;
    top: 0;
    opacity: .1;
    right: 0;
    text-align: center;
    animation-name: alertIconRotate;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    font-size: 6.2rem;
  }
  .alert-nw .alert-custom-icon {
    display: block;
    margin: auto;
    width: 120px;
    margin-bottom: 15px;
  }
  .dropdown-hover  {
    
    position: relative;
  }
  .dropdown-hover .menu-list {
    margin-top: -5px;

  }
  .form-control.search-input:focus {
    box-shadow: none;
  }
  .dropdown-hover .menu-list {
    overflow: hidden;
    opacity: 0;border-radius: 10px;
    box-shadow: 0px 5px 8px #3336;
    transform: translateY(10px);
    pointer-events: none;
    transition: transform .3s;
    list-style: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    box-shadow: 0 0 5px #0002;
    padding: 0;
    text-align: left;
    z-index: 99;
  }
  .dropdown-hover .menu-list.btn-proveedores {
    border-radius: 0 10px 10px 10px;
  }
  .dropdown-hover li {
    background: transparent;
    transition: .4s all;
  }
  .dropdown-hover li:hover {
    background: #eee;
  }
  .dropdown-hover .menu-list i {
    color: #999;
    font-size: 9px;
  }
  .dropdown-hover:hover .menu-list, .dropdown-hover.active .menu-list {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
  }
  .nav-text-big .nav-item {
    font-size: 1.4em;
    font-weight: 300;
  }
  @media screen and (max-width:  767px) {
    #header-cart-wish {
      width:100%;
    }
  }
  .btn-top .btn-primary {
    letter-spacing: 1px;
    border-radius: 0 0 4px 4px;
    text-transform: uppercase;
  }
  .btn-top .btn-primary img{
    margin-right: 5px;
  }
  #content > h1, .title-module {
    position: relative;
  }
  
  #btn-header-wishlist  {
    background: #fff9;
    position: absolute; left: 0; top: 0; width: calc(100% + 45px);
    text-align: right;border-radius:7px;
    z-index: 1;
  }
  #btn-header-wishlist a {
    color:#fff;
    padding-right:10px;
    padding-left: 35px;
    line-height: 40px;
    height: 40px;
  }

  #btn-header-cart {
    background: #FFF9;
    border: none;
    border-radius: 15px 0 0 15px;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    padding-right: 30px;
    padding-left: 20px;
    height: 70px;
  }
  #btn-header-menu {
    margin-right: 40px; margin-left: 80px;
  }
  #btn-header-menu img{
    height: 40px;
  }
  @media screen and (max-width: 1000px) {
    #btn-header-menu {
    margin-left: 20px;
  }
  }
#logo {
  margin-left: 2em;
  margin-right: auto;
  max-width: 220px;
  z-index: 2;
  text-align: left;
  margin-bottom: 15px;
  margin-top: 10px;
}

#logo img{
  max-width: 200px;
  max-height: 70px;
}
@media screen and (max-width: 768px) {
  #logo {
    text-align: left;
  }
  #logo img{
    max-height: 40px;
  }
  
}

#cart {
  margin-right: 0;
}
@media screen and (max-width: 768px) {
  #btn-header-menu {
    margin-right: auto; margin-left: auto;
  }
  #btn-header-menu img{
    height: 50px;
  }
  #btn-header-menu .menu-list {
    left: 0;
    right: auto;
  }
  #div-header-search {
    padding: 0 1.5rem 0 1.5rem;
  }
  #logo {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 15px;
    margin-top: 10px;
  }
  #cart {
    margin-right: auto;
    margin-left: auto;
  }
  #btn-header-cart {
    border-radius: 50px;
    height: 40px;
    width: 40px;
    padding: 0;
  }
  #btn-header-cart img {
    height: 30px;
  }
  #div-header-search {
    padding-left:15px;
    padding-right:15px;
  }

}

.alert-nw-relative {
  min-height: 90px;
  padding: 1rem;
  padding-right: 110px;
  background: #fff;
  border-radius: 6px;
  border: none;
  box-shadow: none;
  margin-bottom: 10px;
  font-size: 1rem;
  line-height: 1.5;
  text-align: center;
  position: relative;
  overflow: hidden;
  animation-name: alertIn;
  animation-duration: .6s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28)
}

.alert-nw-relative:before, .alert-nw-relative:after {
  font-size: 4.5rem;
  display: block;
  font-family: 'FontAwesome';
  line-height: 1;
}
.alert-nw-relative:before {
  position: absolute;
  right: 15px;
  top: 50%;
  margin-top:  -45px;
  animation-name: alertIconRotate2;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
.alert-nw-relative.danger:before, .alert-nw-relative.danger:after {
  content: "\f071";
  color: #e67d7d;
  
}
.alert-nw-relative.danger {
  background: #f001;
  color:  #b34949;
}
.alert-nw-relative.warning:before, .alert-nw-relative.warning:after {
  content: "\f119";
  color: #e67d7d;
  font-family: "Font Awesome 6 Free";
  font-weight: 800;
}
.alert-nw-relative.warning {
  background: #f001;
  color:  #b34949;
}
.alert-nw-relative.info:before, .alert-nw-relative.info:after {
  content: "\f05a";
  color: #efc80a;
}
.alert-nw-relative.info {
  border: 2px solid #efc80a94;
  box-shadow: 0 0 5px 0px #efc80a61;
}
.alert-nw-relative.success {
  border: 2px solid #84de0d61;
  box-shadow: 0 0 5px 0px #84de0d61;
}
.alert-nw-relative.success:before, .alert-nw.success:after {
  content: "\f14a";
  color: #9ad66d;
}
.alert-nw-relative:after {
  position: absolute;
  top: 50%;
  margin-top:  -45px;
  opacity: .1;
  right: 15px;
  text-align: center;
  animation-name: alertIconRotate;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  font-size: 5.2rem;
}
/* body {
  background: url('/image/diseno_2023_04/background_header.png') no-repeat, linear-gradient(180deg, var(--color-primary) 100px, #ffffff 600px); background-size: contain;background-position: top center
} 
#header-fake:before {
  background: url('/image/diseno_2023_04/background_header.png') no-repeat,  linear-gradient(180deg, #1976D2 76px, #ffffff00 100%); background-size: cover;background-position: top center
} */
/* header {
  background: var(--color-primary-dark);
} */
@media screen and (max-width:767px) {
  /* body {
    background: url('/image/diseno_2023_04/background_header_mobile.png') no-repeat, linear-gradient(180deg, #1976D2 100px, #ffffff 600px); background-size: contain; background-position: top center;
  }
  #header-fake:before {
    background: url('/image/diseno_2023_04/background_header_mobile.png') no-repeat, linear-gradient(180deg, #1976D2 76px, #ffffff00 100%); background-size: cover;
  } */
}
#header-fake {
  position:fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 151;
  transition: background .5s;
  background-image: transparent;
  transition: width .4s;
}
#header-fake:before {
  background: url('/image/diseno_2023_04/background_header.png') no-repeat,  linear-gradient(180deg, var(--color-primary-dark) 60px, #ffffff00 100%); background-size: cover;background-position: top center;
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0;
  transition: all .5s;
}
@media screen and (min-width: 1362px) {
  body.ff-padded-show #header-fake {
    width: calc(100% - 320px);
  }
}
#header-fake.active:before  {
  opacity:1;
}
@media screen and (max-width:767px) {
  #btn-header-menu img {
    height: 30px;
  }
}