@import url(../global.css);

/* Buttons               */
/* --------------------- */
.btn--primary {
    background-color: transparent;
    border: none;
    color: var(--color--white-primary);
    font-size: 0.798rem;
    text-transform: uppercase;
    padding: 0.938rem 1.875rem;
    letter-spacing: 0.125rem;
    transition: all .3s;
    text-decoration: none;
    overflow: hidden;
    box-shadow: 0 5px 9px 0 rgba(91,205,255,.21);
}

.btn--primary:hover {
    color: var(--color--white-primary);
    background-color: var(--color--primary);
    text-decoration: none;
    background-color: unset;
}

.btn--primary:hover:after {
    transform: translate(-50%,-50%) skewX(-45deg) scale(1,1);
    transition: all .5s
}

.btn--primary:after {
    content: "";
    background: var(--color--secondary);
    position: absolute;
    z-index: -1;
    width: 160%;
    height: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%) skewX(-45deg) scale(0,1);
    transition: all .5s
}

.skew_hover {
    transition: .5s;
    background-color: unset;
    /* border-color: transparent; */
}

.skew_hover .header_anotherside-newsletter-text {
    color: #fff
}

.skew_hover:after {
    transform: translate(-50%,-50%) skewX(-45deg) scale(1,1)!important;
    transition: all .5s!important
}

.btn--primary-article {
    background-color: var(--color--black-primary);
}

@media only screen and (min-width: 1200px) {
    /* Botones               */
    /* --------------------- */
    .btn--primary {
        font-size: 0.875rem;
    }
}