/* ------------------------------ */
/* ----------- Buttons ---------- */
/* ------------------------------ */

/* General */
.section > .section__button, .section .row > div > .section__button, .section > .section__buttons, .section .row > div > .section__buttons {
    margin-top: 0;
    padding-top: 0;
}
  
.section > .section__title + .section__button .button, .section > .section__title + .section__buttons .button {
    margin-top: 0;
}

.section__buttons .button, .buttons .button {
    display: inline-block;
}
  
.section__buttons .button, .buttons .button {
    margin-right: var(--spacing-4);
}
  
.section__buttons .button:last-child, .buttons .button:last-child {
    margin-right: 0;
}


/* Button */
.button a, button {
    position: relative;
    display: inline-block;
    font-size: var(--font-size-1);
    font-weight: 500;
    -webkit-transition: color var(--transition-2);
    -o-transition: color var(--transition-2);
    transition: color var(--transition-2);
}

button {
    position: relative;
    cursor: pointer;
    padding: 0;
    line-height: var(--line-height-1);
    color: var(--brand-black);
    background-color: transparent;
    border: 0;
}


/* Filled */
.button--normal + .button--normal {
    margin-top: 0 !important;
}

.button--normal a, button {
    overflow: hidden;
    -webkit-transition: padding var(--transition-1);
    -o-transition: padding var(--transition-1);
    transition: padding var(--transition-1);
}

.no-touchevents .button--normal a:hover, .no-touchevents button:hover {
    padding-right: 10px;
    padding-left: 60px;
}

.button--normal svg, button svg {
    position: absolute;
    left: -17px;
    -webkit-transition: left var(--transition-1);
    -o-transition: left var(--transition-1);
    transition: left var(--transition-1);
}



/* Big */



/* ------------------------------ */
/* -------- Media Queries ------- */
/* ------------------------------ */

@media all and (min-width: 992px) {

    .button--normal a, button {
        padding: var(--spacing-2) 25px var(--spacing-2) 45px;
    }

    .button--normal svg, button svg {
        top: 17px;
    }

}


@media all and (min-width: 1400px) {

    .no-touchevents .button--normal a:hover svg, .no-touchevents button:hover svg {
        left: -2px;
    }

}


@media all and (min-width: 2000px) {

    .button:not(.button--normal) {
        margin-top: var(--spacing-7);
    }
    
    .button--normal {
        margin-top: calc(var(--spacing-7) - var(--spacing-2));
    }

}


@media all and (max-width: 1999.98px) {

    .button:not(.button--normal) {
        margin-top: var(--spacing-6);
    }
    
    .button--normal {
        margin-top: calc(var(--spacing-6) - var(--spacing-2));
    }

}


@media all and (max-width: 1399.98px) {

    .no-touchevents .button--normal a:hover svg, .no-touchevents button:hover svg {
        left: -7px;
    }

}


@media all and (max-width: 991.98px) {

    .button--normal a, button {
        padding: var(--spacing-1) 25px var(--spacing-1) 43px;
    }

    .button--normal svg, button svg {
        top: 12px;
    }

}