/********************************** LOGO DIBENIS *************************************/

.text-link-dibenis a, .text-link-dibenis a:visited, .text-link-dibenis a:active{ font-size: 12px; color: #AAAAAA; text-decoration: none; }
.text-link-dibenis a:hover { color: #333333; text-decoration: none; }
.text-link-dibenis a i, .text-link-dibenis a:hover i{ color: var(--color-primario); text-decoration: none; }
.text-link-dibenis a:hover i{ animation: rubberBand 1.0s 1; -webkit-animation: rubberBand 1.0s 1; }
@media (max-width: 575px){
  .text-link-dibenis{ margin-top:20px; }
}

/************************************* EMAIL *****************************************/

  .btn-enviar, .btn-contacto{
    cursor: pointer;
  }

  .swal2-popup {
    font-size: 0.7rem !important;
  }

/*********************************** PRODUCTOS ***************************************/

  .parallax-banner-3 {
    background-image: url("../images/banner-home-page-03.jpg?ver2");
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover; 
  }
  .producto{
    cursor: pointer;
  }
  .producto .linea-puntos{
    border-bottom: 2px dotted #e7e7e7; /**/
  }
  .producto:hover .linea-puntos{
    border-bottom: 2px solid var(--color-primario);
  }
  .producto:hover{
    box-shadow: 0px 0px 3px 2px #EEEEEE;
  }
  .producto .ver-precios,
  .producto .ver-descripcion {
    margin-top:1px;
  }
  .producto .precios,
  .producto .descripcion,
  .producto .ver-precios,
  .producto .ver-descripcion {
    display: none !important;
  }
  .producto .ver-precios {
    animation: fadeInLeft 0.3s;
    -webkit-animation: fadeInLeft 0.3s;
  }
  .producto .ver-descripcion {
    animation: fadeInRight 0.3s;
    -webkit-animation: fadeInRight 0.3s;
  }
  .producto .precios,
  .producto .descripcion {
    animation: fadeIn 0.5s;
    -webkit-animation: fadeIn 0.5s;
  }
  .producto .mostrar{
    display: block !important;
  }

/********************************* IMG-ROLLOVER *************************************/

  .img-hover-pulse:hover {
    animation: pulseInv 0.5s;
    -webkit-animation: pulseInv 0.5s;
  }
  .img-hover-alpha:hover {
    opacity: 0.7;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
  }
  .img-hover-shadow:hover {
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    box-shadow: 3px 4px 10px -5px #505050;
    -moz-box-shadow: 3px 4px 10px -5px #505050;
    -webkit-box-shadow: 3px 4px 10px -5px #505050;
    -o-box-shadow: 3px 4px 10px -5px #505050;
    -ms-box-shadow: 3px 4px 10px -5px #505050;
    transform: translate(-50%,calc(-50%-4px)) !important;
    -webkit-transform: translate(-50%,calc(-50%-4px)) !important;
    -ms-transform: translate(-50%,calc(-50%-4px)) !important;
    -moz-transform: translate(-50%,calc(-50%-4px)) !important;
    -o-transform: translate(-50%,calc(-50%-4px)) !important;
  }

/**/

/********************************* OWL-CAROUSEL *************************************/
  .owl-dots{
  }
  .owl-dots .owl-dot span{
    background: #d6d5d5 !important;
  }
  .owl-dots .owl-dot.active span{
    background: var(--color-rojo) !important;
  }
/**/

/************************ thumbs con relacion de aspecto ****************************/

  .img-mascara{
    position: relative !important;
    width: 100% !important; /**/
    /* height:100% !important; /**/
    overflow: hidden !important;
    padding:0px !important;
    margin:0px !important;
    background: #FFFFFF;
  }
  .img-mascara:after{
    display: block;
    content: '';
  }
  .img-mascara .img-icono{
    position: absolute;
    z-index: 1000;
    left: 50% !important;
    top: 50% !important;
    -webkit-transform: translate(-50%,-50%) !important;
    -ms-transform: translate(-50%,-50%) !important;
    transform: translate(-50%,-50%) !important;
    -moz-transform: translate(-50%,-50%) !important;
    -o-transform: translate(-50%,-50%) !important;
  }
  .img-mascara img{
    width:calc(100% + 2px) !important; /* al sumar 2px se le da un espacio para evitar que quede la imagen un bordes difuminados a la derecha */
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    -webkit-transform: translate(-50%,-50%) !important;
        -ms-transform: translate(-50%,-50%) !important;
            transform: translate(-50%,-50%) !important;
    max-width:none !important;
    max-height:none !important;
  }
  /*
  .img-mascara:hover img{opacity: 0.5; transform: scale(1.1, 1.1); transition: all 0.3s ease 0s;}
  */
  .img-mascara.rel-40:after{ padding-top: 40%; }
  .img-mascara.rel-45:after{ padding-top: 45%; }
  .img-mascara.rel-50:after{ padding-top: 50%; }
  .img-mascara.rel-55:after{ padding-top: 55%; }
  .img-mascara.rel-60:after{ padding-top: 60%; }
  .img-mascara.rel-65:after{ padding-top: 65%; }
  .img-mascara.rel-70:after{ padding-top: 70%; }
  .img-mascara.rel-75:after{ padding-top: 75%; }
  .img-mascara.rel-80:after{ padding-top: 80%; }
  .img-mascara.rel-85:after{ padding-top: 85%; }
  .img-mascara.rel-90:after{ padding-top: 90%; }
  .img-mascara.rel-95:after{ padding-top: 95%; }
  .img-mascara.rel-100:after{ padding-top: 100%; }

/**/

/************************** animaciones personalizadas ******************************/

  @keyframes pulseInv{
    0%{
      transform:scale(1);
      -webkit-transfor:scale(1);
      -moz-transform:scale(1);
      -ms-transform:scale(1);
      -o-transform:scale(1);
    }
    50% {
      transform:scale(0.95);
      -webkit-transform:scale(0.95);
      -moz-transform:scale(0.95);
      -ms-transform:scale(0.95);
      -o-transform:scale(0.95);
    }
    to {
      transform:scale(1);
      -webkit-transform:scale(1);
      -moz-transform:scale(1);
      -ms-transform:scale(1);
      -o-transform:scale(1);
    }
  }
  .pulseInv{
    animation-name: pulseInv;
    animation-duration: 1s; /* infinite */
  }
  @keyframes pulseBig{
    0%{
      transform:scale(0.8);
      -webkit-transform:scale(0.8);
      -moz-transform:scale(0.8);
      -ms-transform:scale(0.8);
      -o-transform:scale(0.8);
    }
    20% {
      transform:scale(1);
      -webkit-transform:scale(1);
      -moz-transform:scale(1);
      -ms-transform:scale(1);
      -o-transform:scale(1);
    }
    100% {
      transform:scale(0.8);
      -webkit-transform:scale(0.8);
      -moz-transform:scale(0.8);
      -ms-transform:scale(0.8);
      -o-transform:scale(0.8);
    }
  }
  .pulseBig{
    animation: pulseBig 0.6s 3;
    -webkit-animation: pulseBig 0.6s 3;
    transform:scale(0.8);
    -webkit-transform:scale(0.8);
    -moz-transform:scale(0.8);
    -ms-transform:scale(0.8);
    -o-transform:scale(0.8);
  }
  @keyframes pulseBigSmall{
    0%{
      transform:scale(0.8);
      -webkit-transform:scale(0.8);
      -moz-transform:scale(0.8);
      -ms-transform:scale(0.8);
      -o-transform:scale(0.8);
    }
    20%{
      transform:scale(0.8);
      -webkit-transform:scale(0.8);
      -moz-transform:scale(0.8);
      -ms-transform:scale(0.8);
      -o-transform:scale(0.8);
    }
    35% {
      transform:scale(1);
      -webkit-transform:scale(1);
      -moz-transform:scale(1);
      -ms-transform:scale(1);
      -o-transform:scale(1);
    }
    50%{
      transform:scale(0.9);
      -webkit-transform:scale(0.9);
      -moz-transform:scale(0.9);
      -ms-transform:scale(0.9);
      -o-transform:scale(0.9);
    }
    65% {
      transform:scale(1);
      -webkit-transform:scale(1);
      -moz-transform:scale(1);
      -ms-transform:scale(1);
      -o-transform:scale(1);
    }
    80% {
      transform:scale(0.8);
      -webkit-transform:scale(0.8);
      -moz-transform:scale(0.8);
      -ms-transform:scale(0.8);
      -o-transform:scale(0.8);
    }
    100% {
      transform:scale(0.8);
      -webkit-transform:scale(0.8);
      -moz-transform:scale(0.8);
      -ms-transform:scale(0.8);
      -o-transform:scale(0.8);
    }
  }
  .pulseBigSmall{
    animation: pulseBigSmall 0.7s 3;
    -webkit-animation: pulseBigSmall 0.7s 3;
    transform:scale(0.8);
    -webkit-transform:scale(0.8);
    -moz-transform:scale(0.8);
    -ms-transform:scale(0.8);
    -o-transform:scale(0.8);
  }
  @keyframes zoomOutAndDisappear{
    0%{
      opacity: 0;
      transform:scale(1.5);
      -webkit-transform:scale(1.5);
      -moz-transform:scale(1.5);
      -ms-transform:scale(1.5);
      -o-transform:scale(1.5);
    }
    50% {
      opacity: 1;
      transform:scale(0.75);
      -webkit-transform:scale(0.75);
      -moz-transform:scale(0.75);
      -ms-transform:scale(0.75);
      -o-transform:scale(0.75);
    }
    100% {
      opacity: 0;
      transform:scale(0.25);
      -webkit-transform:scale(0.25);
      -moz-transform:scale(0.25);
      -ms-transform:scale(0.25);
      -o-transform:scale(0.25);
    }
  }
  .zoomOutAndDisappear{
    opacity: 0;
    animation: zoomOutAndDisappear 1s;
    -webkit-animation: zoomOutAndDisappear 1s;
    transform:scale(0);
    -webkit-transform:scale(0);
    -moz-transform:scale(0);
    -ms-transform:scale(0);
    -o-transform:scale(0);
  }
  @keyframes zoomInAndOut{
    0%{
      opacity: 0;
      transform:scale(0);
      -webkit-transform:scale(0);
      -moz-transform:scale(0);
      -ms-transform:scale(0);
      -o-transform:scale(0);
    }
    10% {
      opacity: 1;
      transform:scale(1);
      -webkit-transform:scale(1);
      -moz-transform:scale(1);
      -ms-transform:scale(1);
      -o-transform:scale(1);
    }
    20% {
      opacity: 1;
      transform:scale(0.75);
      -webkit-transform:scale(0.75);
      -moz-transform:scale(0.75);
      -ms-transform:scale(0.75);
      -o-transform:scale(0.75);
    }
    80% {
      opacity: 1;
      transform:scale(0.75);
      -webkit-transform:scale(0.75);
      -moz-transform:scale(0.75);
      -ms-transform:scale(0.75);
      -o-transform:scale(0.75);
    }
    90% {
      opacity: 1;
      transform:scale(0.75);
      -webkit-transform:scale(0.75);
      -moz-transform:scale(0.75);
      -ms-transform:scale(0.75);
      -o-transform:scale(0.75);
    }
    100% {
      opacity: 0;
      transform:scale(0);
      -webkit-transform:scale(0);
      -moz-transform:scale(0);
      -ms-transform:scale(0);
      -o-transform:scale(0);
    }
  }
  .zoomInAndOut{
    opacity: 0;
    animation: zoomInAndOut 2s;
    -webkit-animation: zoomInAndOut 2s;
    transform:scale(0);
    -webkit-transform:scale(0);
    -moz-transform:scale(0);
    -ms-transform:scale(0);
    -o-transform:scale(0);
  }
  @keyframes zoomInBounceAndDisappear{
    0%{
      opacity: 0;
      transform:scale(0);
      -webkit-transform:scale(0);
      -moz-transform:scale(0);
      -ms-transform:scale(0);
      -o-transform:scale(0);
    }
    10% {
      opacity: 1;
      transform:scale(1.7);
      -webkit-transform:scale(1.7);
      -moz-transform:scale(1.7);
      -ms-transform:scale(1.7);
      -o-transform:scale(1.7);
    }
    15% {
      opacity: 1;
      transform:scale(0.7);
      -webkit-transform:scale(0.7);
      -moz-transform:scale(0.7);
      -ms-transform:scale(0.7);
      -o-transform:scale(0.7);
    }
    20% {
      opacity: 1;
      transform:scale(1.5);
      -webkit-transform:scale(1.5);
      -moz-transform:scale(1.5);
      -ms-transform:scale(1.5);
      -o-transform:scale(1.5);
    }
    25% {
      opacity: 1;
      transform:scale(0.8);
      -webkit-transform:scale(0.8);
      -moz-transform:scale(0.8);
      -ms-transform:scale(0.8);
      -o-transform:scale(0.8);
    }
    30% {
      opacity: 1;
      transform:scale(1.2);
      -webkit-transform:scale(1.2);
      -moz-transform:scale(1.2);
      -ms-transform:scale(1.2);
      -o-transform:scale(1.2);
    }
    35% {
      opacity: 1;
      transform:scale(0.90);
      -webkit-transform:scale(0.90);
      -moz-transform:scale(0.90);
      -ms-transform:scale(0.90);
      -o-transform:scale(0.90);
    }
    40% {
      opacity: 1;
      transform:scale(1.1);
      -webkit-transform:scale(1.1);
      -moz-transform:scale(1.1);
      -ms-transform:scale(1.1);
      -o-transform:scale(1.1);
    }
    45% {
      opacity: 1;
      transform:scale(1);
      -webkit-transform:scale(1);
      -moz-transform:scale(1);
      -ms-transform:scale(1);
      -o-transform:scale(1);
    }
    85% {
      opacity: 1;
      transform:scale(1);
      -webkit-transform:scale(1);
      -moz-transform:scale(1);
      -ms-transform:scale(1);
      -o-transform:scale(1);
    }
    90% {
      opacity: 1;
      transform:scale(1.5);
      -webkit-transform:scale(1.5);
      -moz-transform:scale(1.5);
      -ms-transform:scale(1.5);
      -o-transform:scale(1.5);
    }
    100% {
      opacity: 0;
      transform:scale(0.25);
      -webkit-transform:scale(0.25);
      -moz-transform:scale(0.25);
      -ms-transform:scale(0.25);
      -o-transform:scale(0.25);
    }
  }
  .zoomInBounceAndDisappear{
    opacity: 0;
    animation: zoomInBounceAndDisappear 2s;
    -webkit-animation: zoomInBounceAndDisappear 2s;
    transform:scale(0);
    -webkit-transform:scale(0);
    -moz-transform:scale(0);
    -ms-transform:scale(0);
    -o-transform:scale(0);
  }
  @keyframes zoomInBounce{
    0%{
      opacity: 0;
      transform:scale(0);
      -webkit-transform:scale(0);
      -moz-transform:scale(0);
      -ms-transform:scale(0);
      -o-transform:scale(0);
    }
    10% {
      opacity: 1;
      transform:scale(1.7);
      -webkit-transform:scale(1.7);
      -moz-transform:scale(1.7);
      -ms-transform:scale(1.7);
      -o-transform:scale(1.7);
    }
    20% {
      opacity: 1;
      transform:scale(0.7);
      -webkit-transform:scale(0.7);
      -moz-transform:scale(0.7);
      -ms-transform:scale(0.7);
      -o-transform:scale(0.7);
    }
    30% {
      opacity: 1;
      transform:scale(1.5);
      -webkit-transform:scale(1.5);
      -moz-transform:scale(1.5);
      -ms-transform:scale(1.5);
      -o-transform:scale(1.5);
    }
    40% {
      opacity: 1;
      transform:scale(0.8);
      -webkit-transform:scale(0.8);
      -moz-transform:scale(0.8);
      -ms-transform:scale(0.8);
      -o-transform:scale(0.8);
    }
    50% {
      opacity: 1;
      transform:scale(1.2);
      -webkit-transform:scale(1.2);
      -moz-transform:scale(1.2);
      -ms-transform:scale(1.2);
      -o-transform:scale(1.2);
    }
    60% {
      opacity: 1;
      transform:scale(0.90);
      -webkit-transform:scale(0.90);
      -moz-transform:scale(0.90);
      -ms-transform:scale(0.90);
      -o-transform:scale(0.90);
    }
    70% {
      opacity: 1;
      transform:scale(1.1);
      -webkit-transform:scale(1.1);
      -moz-transform:scale(1.1);
      -ms-transform:scale(1.1);
      -o-transform:scale(1.1);
    }
    80% {
      opacity: 1;
      transform:scale(1);
      -webkit-transform:scale(1);
      -moz-transform:scale(1);
      -ms-transform:scale(1);
      -o-transform:scale(1);
    }
    100% {
      opacity: 1;
      transform:scale(1);
      -webkit-transform:scale(1);
      -moz-transform:scale(1);
      -ms-transform:scale(1);
      -o-transform:scale(1);
    }
  }
  .zoomInBounce{
    animation: zoomInBounce 0.8s;
    -webkit-animation: zoomInBounce 0.8s;
    transform:scale(1);
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1);
    -o-transform:scale(1);
  }
  @keyframes slideRight{
    0% {
      right: 10px;
    }
    50% {
      right: 20px;
    }
    100% {
      right: -100px;
    }
  }
  .slideRight{
    animation: slideRight 0.3s;
    -webkit-animation: slideRight 0.3s;
    right: -100px;
  }
  @keyframes slideLeft{
    0% {
      right: -100px;
    }
    50% {
      right: -100px;
    }
    75% {
      right: 20px;
    }
    100% {
      right: 10px;
    }
  }
  .slideLeft{
    animation: slideLeft 0.6s;
    -webkit-animation: slideLeft 0.6s;
    right: 10px;
  }
  @keyframes slideUp{
    0% {
      top: 10px;
    }
    50% {
      top: 20px;
    }
    100% {
      top: -100px;
    }
  }
  .slideUp{
    animation: slideUp 0.3s;
    -webkit-animation: slideUp 0.3s;
    top: -100px;
  }
  @keyframes slideDown{
    0% {
      top: -100px;
    }
    50% {
      top: -100px;
    }
    75% {
      top: 20px;
    }
    100% {
      top: 10px;
    }
  }
  .slideDown{
    top: 10px;
    animation: slideDown 0.6s;
    -webkit-animation: slideDown 0.6s;
  }

/**/

/*********************** botones flotantes redes sociales ***************************/
  .social-flotante{
    position:fixed;
    /*
    top:50%;
    margin-top: -80px;
    */
    top:25%;
    margin-top:-40px;
    right: 0px;
    z-index: 9999;
  }
  .social-flotante .social-boton {
    transition-timing-function: ease-in-out;
    -moz-transition-timing-function: ease-in-out;
    -webkit-transition-timing-function: ease-in-out;
    -o-transition-timing-function: ease-in-out;
    transition-duration: .2s;
    -moz-transition-duration: .2s;
    -webkit-transition-duration: .2s;
    -o-transition-duration: .2s;
    position: relative;
    right: -70px;
    margin-bottom: 10px;
    padding: 7px 5px 5px 5px;
    border-radius: 3px 0 0 3px;
    -webkit-border-radius: 3px 0 0 3px;
    -moz-border-radius: 3px 0 0 3px;
    -ms-border-radius: 3px 0 0 3px;
    -o-border-radius: 3px 0 0 3px;
  }
    /*
    box-shadow:0 0 10px rgba(0,0,0,0.2);
    -moz-box-shadow:0 0 10px rgba(0,0,0,0.2);
    -webkit-box-shadow:0 0 10px rgba(0,0,0,0.2);
    */
  .social-flotante .social-boton i {
    font-size: 18px;
    vertical-align: middle;
    position: relative;
    top: -1px;
    color: #fff
  }
  .social-flotante .social-boton:hover {
    transition-timing-function: ease-in-out;
    -moz-transition-timing-function: ease-in-out;
    -webkit-transition-timing-function: ease-in-out;
    -o-transition-timing-function: ease-in-out;
    transition-duration: .2s;
    -moz-transition-duration: .2s;
    -webkit-transition-duration: .2s;
    -o-transition-duration: .2s;
    right: 0px;
    /* background: var(--color-primario); */
  }
  .social-flotante .social-boton span {
    padding:0 5px;
    position: relative;
    top:0;
    opacity: 0
  }
  .social-flotante .social-boton:hover span {
    opacity: 1;
    color: #fff
  }
  .social-flotante .social-boton:hover i {
    color: #fff
  }
  .social-flotante .social-boton a {
    color: #232323;
    font-size: 11px;
    text-transform: uppercase;
    padding:2px 7px;
    display: block;
    text-decoration: none;
    font-weight: 500
  }
/**/

/************************************ varios ****************************************/

  .titulo-borde .borde{
    display: inline-block;
    position: relative;
    border: 3px solid var(--color-primario);
    padding: 0px 10px;
    height: 24px;
    top: 40px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
  }
  .titulo-borde .texto{
    display: inline-block;
    position: relative;
    top: -40px;
    background: #FFFFFF;
    padding: 0px 5px;
  }

/**/

/***************************** seccion-promociones *********************************/

.seccion-promociones .descripcion{
  margin-top: 40px;
}

.galeria-promociones{
  display: flex;
  flex-wrap: wrap;
}
.galeria-promociones .item{
  padding: 3px;
}
.galeria-promociones.col1 .item{ width: 100% }
.galeria-promociones.col2 .item{ width: 50% }
.galeria-promociones.col3 .item{ width: 33.3% }
.galeria-promociones.col4 .item{ width: 25% }


/**/