/* ------------------------------ */
/* ----------- 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__youtube + .section__button, .section > .section__vimeo + .section__button {
    padding-top: var(--spacing-4);
}
  
.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;
}

.section__text + .section__button--big {
    padding-top: var(--spacing-10);
}

.section__button + .section__button--big {
    padding-top: var(--spacing-12);
}

.section__text + .section__button--big .button {
    margin-top: 0;
}


/* Button */
.button a, button {
    position: relative;
    display: inline-block;
    font-weight: bold;
    text-transform: uppercase;
    -webkit-transition: var(--transition-2);
    -o-transition: var(--transition-2);
    transition: var(--transition-2);
}

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

.button {
    position: relative;
    left: -1px;
}

.button .icon {
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
}

.button.button--white a, .button--white button {
    color: var(--brand-white);
}

.button--normal a, .button--normal button, .button--normal a span, .button--normal button span,
.button--small a, .button--small button, .button--small a span, .button--small button span {
    position: relative;
}

.button--normal a span, .button--normal button span, .button--small a span, .button--small button span {
    z-index: 2;
}

.button--normal a::before, .button--normal button::before, .button--small a::before, .button--small button::before {
    -webkit-transition: width 0.85s cubic-bezier(0.15, -0.25, 0.265, 1.25);
    -o-transition: width 0.85s cubic-bezier(0.15, -0.25, 0.265, 1.25);
    transition: width 0.85s cubic-bezier(0.15, -0.25, 0.265, 1.25);
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: var(--brand-gradient-green);
    z-index: 1;
}
  
.no-touchevents .button--normal a:hover::before, .no-touchevents .button--normal button:hover::before,
.no-touchevents .button--small a:hover::before, .no-touchevents .button--small button:hover::before {
    width: 100%;
}

.button--normal .icon, .button--small .icon {
    position: absolute;
    z-index: 1;
}



/* Big */
.button--big span {
    position: relative;
    text-transform: none;
}

.button--big span::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: -2px;
    width: calc(100% + 4px);
    height: 3px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="21" height="3" viewBox="0 0 21 3"><line style="fill:none;stroke:%23473816;stroke-width:3;stroke-linecap:round;stroke-dasharray:10,10;" x1="2" y1="1.5" x2="21" y2="1.5"/></svg>');
    background-repeat: repeat-x;
    -webkit-transition: background-image var(--transition-2);
    -o-transition: background-image var(--transition-2);
    transition: background-image var(--transition-2);
}

.no-touchevents .button--big a:hover {
    opacity: var(--opacity-2);
}

.button--big {
    margin-top: 0;
}


/* Minimal */
.button--minimal span {
    position: relative;
    text-transform: none;
}

.button--minimal span::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: calc(100% + 2px);
    height: 2px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="2" viewBox="0 0 12 2"><line style="fill:none;stroke:%23473816;stroke-width:2;stroke-linecap:round;stroke-dasharray:6,6;" x1="1" y1="1" x2="12" y2="1"/></svg>');
    background-repeat: repeat-x;
}

.button--minimal {
    margin-top: 10px;
}



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

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

    .button a, button {
        font-size: var(--font-size-2);
    }


    /* Normal */
    .button--normal a, .button--normal button {
        padding: 12px 60px 12px 24px;
        height: 54px;
    }

    .button--normal.button--play button {
        padding-right: 52px;
    }

    .button--normal a::before, .button--normal button::before {
        width: 53px;
        min-width: 53px;
        height: 53px;
        border-radius: 53px;
    }

    .button--normal .icon--arrow, .button--normal .icon--play, .button--normal .icon--download {
        right: 23px;
    }


    /* Small */
    .button--small a, .button--small button {
        font-size: var(--font-size-1);
        padding: 8px 46px 8px 18px;
        height: 42px;
    }
    
    .button--small a::before, .button--small button::before {
        width: 42px;
        height: 42px;
        border-radius: 42px;
    }

    .button--small .icon--arrow-small {
        right: 17px;
        margin-top: -1px;
    }

}

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

    .section__button, .section__downloads {
        text-align: center;
    }
    
    .button__container, .downloads__container {
        display: inline-block;
        width: var(--width-text);
    }
    
    .section__button:not(.section__button--big) .button__container, .section__downloads .downloads__container {
        text-align: left;
    }

}


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

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

}


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

    .button {
        margin-top: var(--spacing-4);
    }

}


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

    .button a, button {
        font-size: 17px;
    }

    /* Normal */
    .button--normal a, .button--normal button {
        padding: 13px 50px 10px 20px;
        height: 49px;
    }

    .button--normal.button--play button {
        padding-right: 46px;
    }

    .button--normal a::before, .button--normal button::before {
        width: 49px;
        min-width: 49px;
        height: 49px;
        border-radius: 49px;
    }

    .button--normal .icon {
        margin-top: -1px;
        -webkit-transform-origin: center;
            -ms-transform-origin: center;
                transform-origin: center;
    }

    .button--normal .icon--arrow {
        right: 17px;
        -webkit-transform: scale(.85) translateY(-50%);
            -ms-transform: scale(.85) translateY(-50%);
                transform: scale(.85) translateY(-50%);
    }

    .button--normal .icon--play {
        right: 18px;
        -webkit-transform: scale(.9) translateY(-50%);
            -ms-transform: scale(.9) translateY(-50%);
                transform: scale(.9) translateY(-50%);
    }

    .button--normal .icon--download {
        right: 18px;
        -webkit-transform: scale(.85) translateY(-50%);
            -ms-transform: scale(.85) translateY(-50%);
                transform: scale(.85) translateY(-50%);
    }

    
    /* Small */
    .button--small {
        margin-top: 5px;
    }

    .button--small a, .button--small button {
        text-transform: unset;
    }
    
    .button--small .icon, .button--small a::before, .button--small button::before {
        display: none;
    }  
    
    .button--small a::after, .button--small button::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: -1px;
        width: calc(100% + 2px);    
        height: 2px;
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="2" viewBox="0 0 12 2"><line style="fill:none;stroke:%23473816;stroke-width:2;stroke-linecap:round;stroke-dasharray:6,6;" x1="1" y1="1" x2="12" y2="1"/></svg>');
        background-repeat: repeat-x;
    }

}