/* ------------------------------ */
/* ----------- 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, .login-submit input[type="submit"] {
    position: relative;
    display: inline-block;
    font-weight: bold;
    text-transform: uppercase;
}

button, .login-submit input[type="submit"] {
    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, .login-submit .icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.button .icon.icon--copy {
    left: 12px;
    transform: translateY(-50%) scale(.95);
}

.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, .login-submit::before {
    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;
}

.button--normal.button--beige a::before, .button--normal.button--beige button::before, .button--small.button--beige a::before, .button--small.button--beige button::before, .button--normal .quform-button-back button::before {
    background: var(--brand-beige);
}

  
.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,
.no-touchevents  .login-submit:hover::before {
    width: 100%;
}

.button--normal .icon, .button--small .icon, .login-submit .icon--arrow {
    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;
    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;
}

.filter__reset {
    position: relative;
}

.button--minimal span::after, .filter__container .filter__reset::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;
}

.filter__container .filter__reset::after {
    bottom: 2px;
}

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

.no-touchevents .filter__container .filter__reset:hover {
    opacity: var(--opacity-2);
}


/* Button Icon */
.button.button--icon {
    margin-top: 0;
}

.button--icon a, .button--icon button {
    border: 2px solid var(--brand-brown);
    border-radius: var(--border-radius-small);
    transition: color var(--transition-2), background-color var(--transition-2);
}

.button--icon .icon, .button--icon button .icon {
    transition: fill var(--transition-2), stroke var(--transition-2);
}

.button--icon .icon--star {
    margin-top: -1px;
}

.no-touchevents .button--icon a:hover, .no-touchevents .button--icon button:hover {
    background-color: var(--brand-brown);
    color: var(--brand-white);
}

.no-touchevents .button--icon a:hover .icon, .no-touchevents .button--icon button:hover .icon {
    fill: var(--brand-white);
}

.no-touchevents .button--icon:not(.button--active) button:hover, .button--icon.button--active button,
.no-touchevents .button--border button:hover, .no-touchevents .button--border a:hover,
.no-touchevents .quform-upload-button:hover {
    background-color: var(--brand-brown);
    color: var(--brand-white);
}

.no-touchevents .button--icon:not(.button--active) button:hover .icon, .button--icon.button--active .icon {
    fill: var(--brand-white);
}

.no-touchevents .button--icon:not(.button--active) button:hover .icon--cross, .button--icon.button--active .icon--cross,
.no-touchevents .button--icon:not(.button--active) button:hover .icon--plus, .no-touchevents .button--icon:not(.button--active) button:hover .icon--copy,
.no-touchevents .button--icon a:hover .icon--plus {
    stroke: var(--brand-white);
}

.button--icon .icon--bin {
    width: 17px;
    height: 19px;
    left: 15px;
}

.section__controls .button--icon, .section__box .status .button--status, .box .button--icon {
    display: inline-block;
}

.button--icon + .button--icon.button--remove-animal {
    margin-left: 0;
    margin-bottom: var(--spacing-4);
    margin-top: -10px;
}


/* Button small */
.button--border button, .button--border a {
    padding: 6px 14px 5px;
    border: 2px solid var(--brand-brown);
    border-radius: var(--border-radius-small);
    text-transform: uppercase;
}

.quform-element h2 + .button--icon {
    margin-bottom: var(--spacing-4);
    margin-top: 0;
}


.quform-element h2 + .button--icon, .quform-element h2 + .button--icon + .button--icon {
    display: block;
}

.quform-element h2 + .button--inline, .quform-element h2 + .button--icon + .button--icon {
    display: inline-block;
}


/* Upload button */
.quform-upload-button, input[type=file], input[type=file]::file-selector-button {
    cursor: pointer;
}


input[type=file]::file-selector-button {
    text-transform: uppercase;
    font-size: var(--font-size-2);
    font-weight: bold;
    line-height: var(--line-height-1);
    color: var(--brand-brown);
    background-color: transparent;
    border: 0;
    transition: var(--transition-2);
}

.no-touchevents .quform-upload-button:hover input[type=file]::file-selector-button {
    color: var(--brand-white);
}

.quform-upload-button {
    display: inline-block;
    position: relative;
    border: 2px solid var(--brand-brown);
    border-radius: var(--border-radius-small);
    transition: var(--transition-2);
}

.quform-upload-button::before {
    content: "";
    position: absolute;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="%23473816"><path d="M8,6.2c0.8,0,1.5-0.7,1.5-1.5S8.8,3.2,8,3.2S6.5,3.8,6.5,4.7S7.2,6.2,8,6.2z"/><path d="M15.4,0H2.5C1.1,0,0,1.2,0,2.6v12.8C0,16.8,1.1,18,2.5,18h12.9c1.3,0,2.5-1.1,2.5-2.5c0-21.8,0-8.1,0-12.8C17.9,1.2,16.8,0,15.4,0L15.4,0z M2.5,1.5h12.9c0.5,0,1,0.5,1,1v8.7l-2.4-4c-0.2-0.4-0.7-0.7-1.2-0.7c-0.4,0-1,0.2-1.2,0.6l-2.9,4L6.3,8.6C6,8.3,5.6,8.1,5.2,8.1s-0.8,0.2-1,0.5l-2.7,3.2V2.6C1.5,2.1,1.9,1.5,2.5,1.5L2.5,1.5z"/></svg>');
    background-repeat: no-repeat;
    background-size: contain;
    transition: var(--transition-2);
}

.no-touchevents .quform-upload-button:hover::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="%23ffffff"><path d="M8,6.2c0.8,0,1.5-0.7,1.5-1.5S8.8,3.2,8,3.2S6.5,3.8,6.5,4.7S7.2,6.2,8,6.2z"/><path d="M15.4,0H2.5C1.1,0,0,1.2,0,2.6v12.8C0,16.8,1.1,18,2.5,18h12.9c1.3,0,2.5-1.1,2.5-2.5c0-21.8,0-8.1,0-12.8C17.9,1.2,16.8,0,15.4,0L15.4,0z M2.5,1.5h12.9c0.5,0,1,0.5,1,1v8.7l-2.4-4c-0.2-0.4-0.7-0.7-1.2-0.7c-0.4,0-1,0.2-1.2,0.6l-2.9,4L6.3,8.6C6,8.3,5.6,8.1,5.2,8.1s-0.8,0.2-1,0.5l-2.7,3.2V2.6C1.5,2.1,1.9,1.5,2.5,1.5L2.5,1.5z"/></svg>');
}


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


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

    .filter__reset {
        font-size: var(--font-size-1);
    }

}


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

    .button a, button, .login-submit input[type="submit"] {
        font-size: var(--font-size-2);
    }


    /* Normal */
    .button--normal a, .button--normal button, .login-submit input[type="submit"].button {
        padding: 12px 56px 12px 24px;
        height: 54px;
    }

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

    .button--normal .icon--arrow,.button--normal .icon--arrow-back, .login-submit .icon--arrow {
        right: 19px;
    }

    .button--normal .icon--play {
        right: 25px;
    }

    .button--normal .icon--download {
        right: 22px;
    }


    /* Small */
    .button--small a, .button--small button {
        font-size: var(--font-size-1);
        padding: 8px 44px 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: 15px;
    }


    /* Icon */
    .button--icon .icon, .quform-upload-button::before {
        left: 14px;
    }

    .box .button--icon {
        margin-top: var(--spacing-1);
    }

    .popup .popup__container > .button:not(.quform-element-submit):not(.button--archive) {
        margin-top: var(--spacing-3);
    }

    .button--icon a, .button--icon button {
        padding: 6px 14px 4px 42px;
    }

    input[type=file]::file-selector-button {
        padding: 6px 8px 4px 42px;
    }

}


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

    .button--icon + .button--icon, .status span + .button--status, .button--border + .button--icon {
        margin-left: var(--spacing-2);
    }

    .button--normal {
        margin-right: var(--spacing-6);
    }

}


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

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

    .box--special .button {
        margin-top: var(--spacing-3);
    }

    .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 (max-width: 1399.98px) {

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

    .box--special .button {
        margin-top: var(--spacing-3);
    }

}


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

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

    .button--icon + .button--icon, .status span + .button--status, .button--border + .button--icon {
        margin-left: var(--spacing-1);
    }

}


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

    .button a, button, .login-submit input[type="submit"] {
        font-size: var(--font-size-2);
    }

    /* Normal */
    .button--normal a, .button--normal button, .login-submit input[type="submit"].button {
        padding: 10px 46px 9px 20px;
        height: 46px;
    }

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

    .button--normal .icon, .login-submit .icon--arrow {
        margin-top: -1px;
        transform-origin: center;
    }

    .button--normal .icon--arrow, .login-submit .icon--arrow, .button--normal .icon--arrow-back {
        right: 15px;
        transform: scale(.85) translateY(-50%);
    }

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

    .button--normal .icon--download {
        right: 17px;
        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;
    }


    /* .button--icon + .button--icon, .status span + .button--status, .button--border + .button--icon { */
    .button--icon, .button--border {
        margin-right: var(--spacing-1);
    }

    input[type=file]::file-selector-button {
        padding: 5px 8px 4px 38px;
    }

    .box .button--icon {
        margin-top: 12px;
    }

    .box h4 + .button--icon {
        margin-top: 5px;
    }

    .button--icon a, .button--icon button {
        padding: 6px 14px 2px 36px;
    }

    input[type=file]::file-selector-button {
        padding: 6px 14px 2px 36px;
    }

    .button--icon .icon, .quform-upload-button::before {
        transform: translateY(-50%) scale(.9);
        left: 11px;
    }


    /* Popup */
    .popup:not(.popup_take-responsibility):not(.popup_publish) .popup__container > .button:not(.quform-element-submit):not(.button--archive) {
        margin-top: var(--spacing-2);
    }

    .popup_take-responsibility .popup__container > ul + .button.button--normal, .popup_publish  .popup__container > .button {
        margin-top: var(--spacing-1);
    }
}


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

    .popup .popup__container > .button:not(.quform-element-submit):not(.button--archive) {
        margin-top: var(--spacing-2);
    }

    .button .icon, .login-submit .icon {
        transform: translateY(-50%) scale(.9);
    }

}


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

    .button .icon, .login-submit .icon {
        transform: translateY(-50%) scale(.85);
    }

    .button, .login-submit {
        margin-top: var(--spacing-2);
    }

    .button--icon .icon, .quform-upload-button::before {
        left: 10px;
    }

    .button--icon a, .button--icon button {
        padding-left: 34px;
    }

}



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

    .button--normal {
        margin-right: var(--spacing-3);
    }

}


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

    .filter__reset {
        font-size: 14px;
    }

    .button a, button, .login-submit input[type="submit"] {
        text-align: left;
    }

}


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

    .popup .popup__container .button {
        margin-right: 0;
    }

}