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


/* Button */
button {
    cursor: pointer;
    padding: 0;
    color: var(--brand-black);
    background-color: transparent;
    border: 0;
}

.button, button {
    position: relative;
    display: inline-block;
}

.button_hover {
    position: relative;
}

.button--arrow {
    overflow: hidden;
}

.button--arrow > span {
    position: relative;
    display: inline-block;
    -webkit-transition: var(--transition-1);
    -o-transition: var(--transition-1);
    transition: var(--transition-1);
}

.button--arrow > span > svg {
    position: absolute;
    top: 15px;
    -webkit-transition: var(--transition-1);
    -o-transition: var(--transition-1);
    transition: var(--transition-1);
}

.button--arrow.button--filled > span > svg.icon--arrow-left, .button--arrow.button--cta > span > svg.icon--arrow-left, .no-touchevents .button--arrow.button--transparent a:hover + span > svg.icon--arrow-left, 
.no-touchevents .button_hover:hover .button--arrow.button--transparent span > svg.icon--arrow-left {
    left: -50px;
    opacity: 0;
}

.button--arrow.button--filled > span > svg.icon--arrow-right, .button--arrow.button--cta > span > svg.icon--arrow-right, .no-touchevents .button--arrow.button--transparent a:hover + span > svg.icon--arrow-right, 
.no-touchevents .button_hover:hover .button--arrow.button--transparent span > svg.icon--arrow-right {
    right: var(--spacing-3);
}

.no-touchevents .button--arrow.button--filled a:hover + span > svg.icon--arrow-right, .no-touchevents .button--arrow.button--cta a:hover + span > svg.icon--arrow-right, .button--arrow.button--transparent > span > svg.icon--arrow-right,
.no-touchevents .button_hover:hover .button--arrow.button--filled span > svg.icon--arrow-right, .no-touchevents .button_hover:hover .button--arrow.button--cta > span > svg.icon--arrow-right {
    right: -50px;
    opacity: 0;
}



/* Filled */
.button--arrow.button--filled > span {
    padding: 11px 80px 11px var(--spacing-3);
    color: var(--brand-white);
    background-color: var(--brand-black);
}

.no-touchevents .button--arrow.button--filled a:hover + span, .no-touchevents .button_hover:hover .button--arrow.button--filled > span {
    padding-right: var(--spacing-3);
    padding-left: 80px;
}

.no-touchevents .button--arrow.button--filled a:hover + span > svg.icon--arrow-left, .no-touchevents .button_hover:hover .button--arrow.button--filled > span > svg.icon--arrow-left {
    opacity: 1;
    left: var(--spacing-3);
}

.button--arrow.button--filled > span svg {
    fill: var(--brand-white);
    stroke: var(--brand-white);
}


/* White */
.button--white {
    color: var(--brand-white);
}

.button--white > span svg {
    fill: var(--brand-white);
    stroke: var(--brand-white);
}

.button--white.button--filled > span {
    color: var(--brand-black);
    background-color: var(--brand-white);
}

.button--white.button--filled > span svg {
    fill: var(--brand-black);
    stroke: var(--brand-black);
}




/* CTA */
.button--arrow.button--cta {
    margin-right: -15px;
}

.button--arrow.button--cta > span {
    padding: 11px 80px 11px 0;
}

.no-touchevents .button--arrow.button--cta a:hover + span {
    padding-right: var(--spacing-3);
    padding-left: 65px;
}

.no-touchevents .button--arrow.button--cta a:hover + span > svg.icon--arrow-left {
    opacity: 1;
    left: 0;
}


/* Transparent */
.button--arrow.button--transparent > span {
    padding: 11px var(--spacing-3) 11px 65px;
}

.no-touchevents .button--arrow.button--transparent a:hover + span, .no-touchevents .button_hover:hover .button--arrow.button--transparent > span {
    padding-right: 80px;
    padding-left: 0;
}

.button--arrow.button--transparent > span > svg.icon--arrow-left {
    left: 0;
}

.no-touchevents .button--arrow.button--transparent a:hover + span > svg.icon--arrow-right, .no-touchevents .button_hover:hover .button--arrow.button--transparent > span > svg.icon--arrow-right {
    opacity: 1;
}


/* PDF */
.button--pdf {
    overflow: hidden;
}

.button--pdf a {
    display: block;
    padding: 11px var(--spacing-3) 11px 0;
}

.button--pdf a span {
    display: inline-block;
    margin-left: calc(var(--spacing-3) + 12px);
}

.button--pdf a svg {
    position: absolute;
    left: 0;
    -webkit-transition: var(--transition-1);
    -o-transition: var(--transition-1);
    transition: var(--transition-1);
}

.button--pdf .icon--download--top {
    top: -12px;
    opacity: 0;
}

.button--pdf .icon--download--bottom, .no-touchevents .button--pdf a:hover .icon--download--top {
    top: 14px;
}

.no-touchevents .button--pdf a:hover .icon--download--top {
    opacity: 1;
}

.no-touchevents .button--pdf a:hover .icon--download--bottom {
    top: 50px;
    opacity: 0;
}



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

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

    .button, button {
        margin-top: var(--spacing-5-5);
    }
    
    .section__button .button {
        margin-top: var(--spacing-8);
    }

}


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

    .button, button {
        margin-top: var(--spacing-5);
    }
    
    .section__button .button {
        margin-top: var(--spacing-7);
    }

}


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

    .button--arrow.button--filled > span {
        padding: 10px 74px 10px var(--spacing-3);
    }

    .no-touchevents .button--arrow.button--filled a:hover + span, .no-touchevents .button_hover:hover .button--arrow.button--filled > span {
        padding-left: 74px;
    }

    .button--arrow.button--transparent > span {
        padding: 10px var(--spacing-3) 10px 59px;
    }

    .button--arrow > span > svg {
        top: 14px;
    }

    .button--pdf .icon--download--bottom, .no-touchevents .button--pdf a:hover .icon--download--top {
        top: 12px;
    }

}