.j-btn {
    display: inline
}

.j-btn_more {
    position: relative;
    display: inline-block;
    padding: 0.2vw 5vw .5vw;
    border-radius: 0;
    outline: 0 !important;
}

.jbtn_2 {
    background: #8C21FF !important;
    color: #fff !important;
}

.j-btn_more:focus,
.j-btn_more:hover {
    text-decoration: none
}

.j-btn_more {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    /* background: #01E9FF; */
    -webkit-border-radius: 47px;
    -moz-border-radius: 47px;
    border-radius: 47px;
    border: 1px solid var(--yellow);
}

.j-btn_more:after {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    /*border: 2px #ffd60080 solid;*/
    -webkit-border-radius: inherit;
    -moz-border-radius: inherit;
    border-radius: inherit;
    -webkit-transition: border-color .2s;
    -o-transition: border-color .2s;
    -moz-transition: border-color .2s;
    transition: border-color .2s
}

.j-btn_more[data-magnetic]:before {
    content: "";
    display: block;
    position: absolute;
}

.j-btn_more-title {
    position: relative;
    display: block;
    overflow: hidden;
    z-index: 2;
}

.j-btn_more-title span {
    display: block;
    font-weight: bold;
    text-align: center;
    font-family: 'din_next_lt_arabicbold';
    font-size: 15px;
    padding: 0;
    -webkit-transform-origin: left top;
    -moz-transform-origin: left top;
    -ms-transform-origin: left top;
    -o-transform-origin: left top;
    transform-origin: left top;
    -webkit-transition: color .2s, -webkit-transform .4s;
    transition: color .2s, -webkit-transform .4s;
    -o-transition: color .2s, -o-transform .4s;
    -moz-transition: color .2s, transform .4s, -moz-transform .4s;
    transition: color .2s, transform .4s;
    transition: color .2s, transform .4s, -webkit-transform .4s, -moz-transform .4s, -o-transform .4s;
    color: var(--yellow);
}


.j-btn_more-title span:after {
    content: attr(data-text);
    display: block;
    position: absolute;
    color: var(--black);
    top: 152%;
    left: 0;
    -webkit-transform: skewY(5deg);
    -moz-transform: skewY(5deg);
    -ms-transform: skewY(5deg);
    -o-transform: skewY(5deg);
    transform: skewY(5deg);
    -webkit-transform-origin: left top;
    -moz-transform-origin: left top;
    -ms-transform-origin: left top;
    -o-transform-origin: left top;
    transform-origin: left top;
    -webkit-transition: -webkit-transform .4s;
    transition: -webkit-transform .4s;
    -o-transition: -o-transform .4s;
    -moz-transition: transform .4s, -moz-transform .4s;
    transition: transform .4s;
    transition: transform .4s, -webkit-transform .4s, -moz-transform .4s, -o-transform .4s
}

.j-btn_more-ripple {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-border-radius: inherit;
    -moz-border-radius: inherit;
    border-radius: inherit
}

.j-btn_more-ripple span {
    display: block;
    width: 100%;
    height: 100%;
    -webkit-transform: translateY(110%);
    -moz-transform: translateY(110%);
    -ms-transform: translateY(110%);
    -o-transform: translateY(110%);
    transform: translateY(110%);
    background: var(--yellow);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-transition: -webkit-transform .5s cubic-bezier(.4, 0, 0, 1), -webkit-border-radius .5s cubic-bezier(.4, 0, 0, 1);
    transition: -webkit-transform .5s cubic-bezier(.4, 0, 0, 1), -webkit-border-radius .5s cubic-bezier(.4, 0, 0, 1);
    -o-transition: border-radius .5s cubic-bezier(.4, 0, 0, 1), -o-transform .5s cubic-bezier(.4, 0, 0, 1);
    -moz-transition: transform .5s cubic-bezier(.4, 0, 0, 1), border-radius .5s cubic-bezier(.4, 0, 0, 1), -moz-transform .5s cubic-bezier(.4, 0, 0, 1), -moz-border-radius .5s cubic-bezier(.4, 0, 0, 1);
    transition: transform .5s cubic-bezier(.4, 0, 0, 1), border-radius .5s cubic-bezier(.4, 0, 0, 1);
    transition: transform .5s cubic-bezier(.4, 0, 0, 1), border-radius .5s cubic-bezier(.4, 0, 0, 1), -webkit-transform .5s cubic-bezier(.4, 0, 0, 1), -moz-transform .5s cubic-bezier(.4, 0, 0, 1), -o-transform .5s cubic-bezier(.4, 0, 0, 1), -webkit-border-radius .5s cubic-bezier(.4, 0, 0, 1), -moz-border-radius .5s cubic-bezier(.4, 0, 0, 1)
}

a.j-btn_more.red {
    border: 1px solid var(--red);
}

a.j-btn_more.red span {
    color: var(--red);
}

a.j-btn_more.red .j-btn_more-ripple span {
    background: var(--red);
}

a.j-btn_more.blue {
    border: 1px solid var(--blue);
}

a.j-btn_more.blue span {
    color: var(--blue);
}

a.j-btn_more.blue .j-btn_more-ripple span {
    background: var(--blue);
}

a.j-btn_more.white {
    border: 1px solid var(--white);
}

a.j-btn_more.white span {
    color: var(--white);
}

a.j-btn_more.white .j-btn_more-ripple span {
    background: var(--white);
}


@media (pointer:fine) {
    .j-btn_more:hover .j-btn_more-title span {
        color: var(--yellow);
        -webkit-transform: translateY(-150%) skewY(-7deg);
        -moz-transform: translateY(-150%) skewY(-7deg);
        -ms-transform: translateY(-150%) skewY(-7deg);
        -o-transform: translateY(-150%) skewY(-7deg);
        transform: translateY(-150%) skewY(-7deg)
    }
}

@media (pointer:fine) {
    .j-btn_more:hover .j-btn_more-title span:after {
        -webkit-transform: skewY(7deg);
        -moz-transform: skewY(7deg);
        -ms-transform: skewY(7deg);
        -o-transform: skewY(7deg);
        transform: skewY(7deg)
    }
}

@media (pointer:fine) {
    .j-btn_more:hover .j-btn_more-ripple span {
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
        -webkit-transition-duration: 0s, 0s;
        -moz-transition-duration: 0s, 0s;
        -o-transition-duration: 0s, 0s;
        transition-duration: 0s, 0s;
        -webkit-animation: j-checkbox_rounded-ripple-in .5s cubic-bezier(.4, 0, 0, 1);
        -moz-animation: j-checkbox_rounded-ripple-in .5s cubic-bezier(.4, 0, 0, 1);
        -o-animation: j-checkbox_rounded-ripple-in .5s cubic-bezier(.4, 0, 0, 1);
        animation: j-checkbox_rounded-ripple-in .5s cubic-bezier(.4, 0, 0, 1)
    }
}

@-webkit-keyframes j-checkbox_rounded-ripple-in {
    0% {
        -webkit-border-radius: 100%;
        border-radius: 100%;
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%)
    }

    100% {
        -webkit-border-radius: 0;
        border-radius: 0;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@-moz-keyframes j-checkbox_rounded-ripple-in {
    0% {
        -moz-border-radius: 100%;
        border-radius: 100%;
        -moz-transform: translateY(-100%);
        transform: translateY(-100%)
    }

    100% {
        -moz-border-radius: 0;
        border-radius: 0;
        -moz-transform: translateY(0);
        transform: translateY(0)
    }
}

@-o-keyframes j-checkbox_rounded-ripple-in {
    0% {
        border-radius: 100%;
        -o-transform: translateY(-100%);
        transform: translateY(-100%)
    }

    100% {
        border-radius: 0;
        -o-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes j-checkbox_rounded-ripple-in {
    0% {
        -webkit-border-radius: 100%;
        -moz-border-radius: 100%;
        border-radius: 100%;
        -webkit-transform: translateY(-100%);
        -moz-transform: translateY(-100%);
        -o-transform: translateY(-100%);
        transform: translateY(-100%)
    }

    100% {
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0)
    }
}