/*
 * Custom style goes here.
 * A template should always ship with an empty custom.css
 */

.btn_mas_modelos .wrapper{
  position: relative;
  top: auto;
  left: auto;
  transform: translate(0%, 0%);
  width: fit-content;
  height: auto;
}
.btn_mas_modelos button{
  width: 18em;
  height: auto;
  background: linear-gradient(to left top, #004286 50%, #1651AA 50%);
  border-style: none;
  color: #fff;
  font-size: 11px;
  letter-spacing: 3px;
  font-family: 'Lato';
  font-weight: 600;
  outline: none;
  cursor: pointer;
  position: relative;
  padding: 0px;
  overflow: hidden;
  transition: all .5s;
  box-shadow: 0px 1px 2px rgba(0,0,0,.2);
}
.btn_mas_modelos button span{
    position: absolute;
    display: block;
}
.btn_mas_modelos button span:nth-child(1){
    height: 3px;
    width:200px;
    top:0px;
    left:-200px;
    background: linear-gradient(to right, rgba(0,0,0,0), #f6e58d);
    border-top-right-radius: 1px;
    border-bottom-right-radius: 1px;
    animation: span1 2s linear infinite;
    animation-delay: 1s;
}

@keyframes span1{
    0%{
        left:-200px
    }
    100%{
        left:200px;
    }
}
.btn_mas_modelos button span:nth-child(2){
    height: 70px;
    width: 3px;
    top:-70px;
    right:0px;
    background: linear-gradient(to bottom, rgba(0,0,0,0), #f6e58d);
    border-bottom-left-radius: 1px;
    border-bottom-right-radius: 1px;
    animation: span2 2s linear infinite;
    animation-delay: 2s;
}
@keyframes span2{
    0%{
        top:-70px;
    }
    100%{
        top:70px;
    }
}
.btn_mas_modelos button span:nth-child(3){
    height:3px;
    width:200px;
    right:-200px;
    bottom: 0px;
    background: linear-gradient(to left, rgba(0,0,0,0), #f6e58d);
    border-top-left-radius: 1px;
    border-bottom-left-radius: 1px;
    animation: span3 2s linear infinite;
    animation-delay: 3s;
}
@keyframes span3{
    0%{
        right:-200px;
    }
    100%{
        right: 200px;
    }
}

.btn_mas_modelos button span:nth-child(4){
    height:70px;
    width:3px;
    bottom:-70px;
    left:0px;
    background: linear-gradient(to top, rgba(0,0,0,0), #f6e58d);
    border-top-right-radius: 1px;
    border-top-left-radius: 1px;
    animation: span4 2s linear infinite;
    animation-delay: 4s;
}
@keyframes span4{
    0%{
        bottom: -70px;
    }
    100%{
        bottom:70px;
    }
}

.btn_mas_modelos button:hover{
    transition: all .5s;
    transform: rotate(-3deg) scale(1.1);
    box-shadow: 0px 3px 5px rgba(0,0,0,.4);
}
.btn_mas_modelos button:hover span{
    animation-play-state: paused;
}

.product-price{font-size: xx-large; color: #d21717 !important;} /*Cambio color y aumento tamaño en precio listado productos*/

#product .btn:disabled{background-color: gray !important;}

.details-link{background-color: gray !important;} /*Cambio color botones añadir al carrito a productos agotados*/

.estimateddelivery{background-color:#fbe47d;} /*Añadir fondo para el bloque de fecha estimada en ficha de producto*/

.ed_countdown, .date_green{font-weight:bold; color:#0110e8 !important;} /*Cambiar color letras en bloque de fecha estimada en ficha de producto*/

.collapse {display: block !important;}

#checkout .footer-top, #checkout .footer-main, #checkout .header-banner, #checkout .header-nav .container, #checkout .main-header .container, #checkout #header-main-menu {display: none;} /*Ocultar cabecera y pie de página cuando se acceda al carrito de compra*/