/* ------------------------------ */
/* ----------- 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__button--center, .section__buttons--center {
    text-align: center;
}
  
.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-3);
}
  
.section__buttons .button:last-child, .buttons .button:last-child {
    margin-right: 0;
}


/* Button */
.button, button {
    margin-top: var(--spacing-5);
}

.button a, button {
    position: relative;
    display: inline-block;
    color: var(--brand-black);
    background-color: transparent;
}

button {
    cursor: pointer;
}

.button a, button:not(.js-toggle) {
    font-weight: bold;
    line-height: var(--line-height-3);
    font-weight: bold;
    border: 1px solid var(--brand-black);
    border-radius: 62px;

    -webkit-transition: color var(--transition-2), background-color var(--transition-2), border-color var(--transition-2);
    -o-transition: color var(--transition-2), background-color var(--transition-2), border-color var(--transition-2);
    transition: color var(--transition-2), background-color var(--transition-2), border-color var(--transition-2);
}

.no-touchevents .button a:hover, .no-touchevents button:not(.js-toggle):hover {
    color: var(--brand-white);
    background-color: var(--brand-black);
}

.no-touchevents body.color--grey .button a:hover, .no-touchevents body.color--grey button:not(.js-toggle):hover {
    color: var(--brand-white);
    background-color: var(--brand-grey);
    border-color: var(--brand-grey);
}

.no-touchevents body.color--rosa .button a:hover, .no-touchevents body.color--rosa button:not(.js-toggle):hover {
    color: var(--brand-white);
    background-color: var(--brand-rosa);
    border-color: var(--brand-rosa);
}

.no-touchevents body.color--green .button a:hover, .no-touchevents body.color--green button:not(.js-toggle):hover {
    color: var(--brand-white);
    background-color: var(--brand-green);
    border-color: var(--brand-green);
}

.no-touchevents body.color--peach .button a:hover, .no-touchevents body.color--peach button:not(.js-toggle):hover {
    color: var(--brand-white);
    background-color: var(--brand-peach);
    border-color: var(--brand-peach);
}


/* Toggle */
button.js-toggle {
    width: 100%;
    padding: 0;
    border: 0;
}

button.js-toggle::before, button.js-toggle::after {
    content: "";
    position: absolute;
    top: 0;
    height: 100%;
    background-color: var(--brand-rosa);
}

button.js-toggle::before {
    -webkit-transform: translateX(-50%) rotate(90deg);
        -ms-transform: translateX(-50%) rotate(90deg);
            transform: translateX(-50%) rotate(90deg);
}

button.js-toggle::after {
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    -webkit-transition: -webkit-transform var(--transition-2);
    transition: -webkit-transform var(--transition-2);
    -o-transition: transform var(--transition-2);
    transition: transform var(--transition-2);
    transition: transform var(--transition-2), -webkit-transform var(--transition-2);
}

button.js-toggle.is-active::after {
   -webkit-transform: translateX(-50%) rotate(90deg);
       -ms-transform: translateX(-50%) rotate(90deg);
           transform: translateX(-50%) rotate(90deg);
}




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

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

    .button a, button:not(.js-toggle) {
        font-size: var(--font-size-standard);
    }

}


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

    .button a, button:not(.js-toggle) {
        padding: 20px 30px 19px;
    }

    .macos .button a, .macos button:not(.js-toggle), .ios .button a, .ios button:not(.js-toggle) {
        padding-top: 19px;
    }

}


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

    button.js-toggle {
        height: 49px;
        margin-top: var(--spacing-4);
    }

    button.js-toggle::before, button.js-toggle::after {
        left: 25px;
        width: 5px;
    }

}


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

    button.js-toggle {
        height: 45px;
        margin-top: 37px;
    }

    button.js-toggle::before, button.js-toggle::after {
        left: 23px;
        width: 5px;
    }

}


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

    .button a, button:not(.js-toggle) {
        padding: 19px 28px;
    }

    button.js-toggle {
        height: 42px;
        margin-top: 32px;
    }

    button.js-toggle::before, button.js-toggle::after {
        left: 21px;
        width: 4px;
    }

}


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

    .button a, button:not(.js-toggle) {
        padding: 18px 26px;
    }

    button.js-toggle {
        height: 36px;
        margin-top: 30px;
    }

    button.js-toggle::before, button.js-toggle::after {
        left: 18px;
        width: 4px;
    }

}


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

    .button a, button:not(.js-toggle) {
        padding: 17px 24px;
    }

    button.js-toggle {
        height: 36px;
        margin-top: 26px;
    }

    button.js-toggle::before, button.js-toggle::after {
        left: 18px;
        width: 4px;
    }

}


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

    .button a, button:not(.js-toggle) {
        font-size: 17px;
    }

     button.js-toggle::before, button.js-toggle::after {
        width: 3px;
    }

}


@media all and (max-width: 767.98px) and (min-width: 576px) {

    .button a, button:not(.js-toggle) {
        padding: 17px 22px 16px;
    }

    button.js-toggle {
        height: 34px;
        margin-top: 26px;
    }

    button.js-toggle::before, button.js-toggle::after {
        left: 17px;
    }

}


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

    .button a, button:not(.js-toggle) {
        padding: 15px 20px 14px;
    }

    button.js-toggle {
        height: 32px;
        margin-top: 18px;
    }

    button.js-toggle::before, button.js-toggle::after {
        left: 16px;
    }

}