.arina-catalog-button{
    --c:var(--corner-color,#ff6a00);
    --t:2px;
    --corner:16px;

    position:relative;
    display:inline-block;
    padding:14px 32px;
    color:#fff;
    text-decoration:none;
    font:600 14px/1 sans-serif;
    letter-spacing:.3px;
    text-transform:uppercase;
}


.arina-catalog-button::before,
.arina-catalog-button::after{
    content:"";
    position:absolute;
    width:var(--corner);
    height:var(--corner);
    border:var(--t) solid var(--c);
}

.arina-catalog-button::before{
    top:0;
    left:0;
    border-right:0;
    border-bottom:0;
}

.arina-catalog-button::after{
    bottom:0;
    right:0;
    border-left:0;
    border-top:0;
}

.arina-catalog-button span{
    position:absolute;
    inset:0;
    pointer-events:none;
}


.arina-catalog-button i,
.arina-catalog-button b,
.arina-catalog-button em,
.arina-catalog-button strong{
    position:absolute;
    background:var(--c);
    transition:.35s ease;
}

.arina-catalog-button i{
    top:0;
    left:0;
    height:var(--t);
    width:0;
}


.arina-catalog-button b{
    top:0;
    right:0;
    width:var(--t);
    height:0;
}


.arina-catalog-button em{
    bottom:0;
    right:0;
    height:var(--t);
    width:0;
}


.arina-catalog-button strong{
    bottom:0;
    left:0;
    width:var(--t);
    height:0;
}


.arina-catalog-button:hover i{width:100%;}
.arina-catalog-button:hover b{height:100%;}
.arina-catalog-button:hover em{width:100%;}
.arina-catalog-button:hover strong{height:100%;}


.elementor-post .elementor-post__read-more{
    --c: var(--corner-color, #ff6a00);
    --t: 2px;
    --corner: 16px;

    position: relative;
    display: inline-block;
    padding: 14px 32px;
    color: #fff !important;
    text-decoration: none !important;
    font: 600 14px/1 sans-serif;
    letter-spacing: .3px;
    text-transform: uppercase;
    transition: .3s ease;
    overflow: visible;
}


.elementor-post .elementor-post__read-more::before,
.elementor-post .elementor-post__read-more::after{
    content: "";
    position: absolute;
    width: var(--corner);
    height: var(--corner);
    border: var(--t) solid var(--c);
    pointer-events: none;
}

.elementor-post .elementor-post__read-more::before{
    top: 0;
    left: 0;
    border-right: 0;
    border-bottom: 0;
}

.elementor-post .elementor-post__read-more::after{
    bottom: 0;
    right: 0;
    border-left: 0;
    border-top: 0;
}


.elementor-post .elementor-post__read-more{
    background-image:
        linear-gradient(var(--c), var(--c)),
        linear-gradient(var(--c), var(--c)),
        linear-gradient(var(--c), var(--c)),
        linear-gradient(var(--c), var(--c));
    background-repeat: no-repeat;
    background-size:
        0 var(--t),
        var(--t) 0,
        0 var(--t),
        var(--t) 0;
    background-position:
        left top,
        right top,
        right bottom,
        left bottom;
}

.elementor-post .elementor-post__read-more:hover{
    color: #fff !important;
    background-size:
        100% var(--t),
        var(--t) 100%,
        100% var(--t),
        var(--t) 100%;
}