.site_button {
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    width: 215px;
    height: 55px;
    color: #222;
    font-size: 16px !important;
    font-weight: 400;
    line-height: normal;
    border: 1px solid #222;
    position: relative;
    transition: 0.5s;
    cursor: pointer;
}

.site_button:before {
    content: '';
    background: #D21515;
    width: 20px;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -1px;
    right: auto;
    margin: auto;
    z-index: -1;
    transition: 0.5s;
}

.btn_col_left .site_button:before {
    clip-path: polygon(0% -5%, 0% 100%, 100% 100%);
}

.btn_col_right .site_button:before {
    clip-path: polygon(0% 0%, 0% 105%, 100% 0%);
}

.btn_icon .site_button:after {
    content: '';
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3e%3cpath d='M0.793657 10.8023C0.870511 10.8792 0.961765 10.9403 1.06221 10.9819C1.16265 11.0235 1.2703 11.0449 1.37902 11.0449C1.48775 11.0449 1.5954 11.0235 1.69584 10.9819C1.79629 10.9403 1.88754 10.8792 1.96439 10.8023L11.3435 1.42321C11.4226 1.34691 11.4857 1.25562 11.5291 1.15467C11.5725 1.05373 11.5954 0.945145 11.5964 0.835261C11.5974 0.725378 11.5765 0.616395 11.535 0.51467C11.4934 0.412947 11.432 0.320518 11.3543 0.242779C11.2767 0.16504 11.1843 0.103546 11.0826 0.0618868C10.9809 0.0202284 10.872 -0.000761032 10.7621 0.000141144C10.6522 0.00104427 10.5436 0.0238199 10.4426 0.0671444C10.3416 0.110468 10.2503 0.17347 10.1739 0.252475L0.79476 9.63161C0.639783 9.78678 0.552734 9.99712 0.552734 10.2164C0.552734 10.4357 0.639783 10.6461 0.79476 10.8012L0.793657 10.8023Z' fill='%23222222'/%3e%3cpath d='M10.7584 11.5957C10.9779 11.5957 11.1884 11.5085 11.3436 11.3533C11.4988 11.1981 11.586 10.9876 11.586 10.7681V0.837287C11.586 0.617802 11.4988 0.407306 11.3436 0.252106C11.1884 0.0969057 10.9779 0.00971699 10.7584 0.00971699H0.82757C0.608085 0.00971699 0.397589 0.0969057 0.24239 0.252106C0.0871901 0.407306 0 0.617802 0 0.837287C0 1.05677 0.0871901 1.26727 0.24239 1.42247C0.397589 1.57767 0.608085 1.66486 0.82757 1.66486H9.93085V10.7681C9.93085 10.9876 10.018 11.1981 10.1732 11.3533C10.3284 11.5085 10.5389 11.5957 10.7584 11.5957Z' fill='%23222222'/%3e%3c/svg%3e");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right center;
    width: 100%;
    height: 11px;
    position: absolute;
    top: 2px;
    bottom: 0;
    left: auto;
    right: 15px;
    margin: auto;
    transition: 0.2s;
    z-index: 0;
}

.site_button:hover:before {
    width: 100%;
    clip-path: unset;
}

.site_button:hover {
    color: #fff;
}

.site_button:hover.site_button:after {
    filter: brightness(100);
}

@media all and (min-width: 320px) and (max-width: 767px) {

    .site_button {
        width: 145px;
        height: 35px;
        font-size: 14px !important;
    }

    .btn_icon .site_button:after {
        height: 7px;
        right: 4px;
    }

}

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

    .site_button {
        width: 150px;
        height: 40px;
        font-size: 14px !important;
    }

    .btn_icon .site_button:after {
        height: 8px;
        right: 5px;
    }

}

@media only screen and (min-width: 981px) and (max-width: 1140px) {

    .site_button {
        width: 170px;
        height: 43px;
        font-size: 15px !important;
    }

    .btn_icon .site_button:after {
        height: 9px;
        right: 8px;
    }

}

@media all and (min-width: 1141px) and (max-width: 1440px) {

    .site_button {
        width: 180px;
        height: 45px;
        font-size: 15px !important;
    }

    .btn_icon .site_button:after {
        height: 10px;
        right: 10px;
    }

}

@media all and (min-width: 1441px) and (max-width: 1880px) {

    .site_button {
        width: 200px;
        height: 50px;
        font-size: 15px !important;
    }

    .btn_icon .site_button:after {
        height: 10px;
    }

}