/*** jobs section ***/
.pr-z-100{
    position: relative;
    z-index: 1;
}
.z-i1{
    z-index: 1;
}
.container-jbc{
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    max-width: 1420px;
}

@media (max-width: 768px) {
    .container-jbc{
        max-width: 578px;
    }
}
.jobs-bcard .jbc-container{
    position: relative;
    height: 250px;
    border: 1px solid #a9a9a9d6;
    padding: 26px;
    background-color: #131313;
    color: #fff;
    background-image: url('../images/body-bg.jpg');
    background-size: cover;
    overflow: hidden;
    margin-bottom: 30px;
    box-shadow: 4px 5px 6px rgb(255 255 255 / 7%);
}
.jobs-bcard .jbc-container  > *{
    margin-bottom: 20px;
}
.jobs-bcard .jbc-title,
.jobs-bcard .jbc-worktime,
.jobs-bcard .jbc-workplace{
    position: relative;
    z-index: 3;
}
.jobs-bcard .jbc-container  > *:last-of-type{
    margin-bottom: 0;
}
.jobs-bcard .jbc-cta{
    margin-bottom: 15px;
}
.jobs-bcard .jbc-cta .center-black-circle{
    position: absolute;
    bottom: calc(50% - 30px);
    right: -50px;
    width: 61px;
    height: 61px;
    background-color: #131313;
    z-index: 4;
    border-top-left-radius: 385% 290%;
    border-bottom-left-radius: 400% 180%;
}
.jobs-bcard .jbc-cta .green-circle{
    position: absolute;
    bottom: calc(50% - 30px);
    right: -54px;
    width: 60px;
    height: 60px;
    border-top-left-radius: 385% 290%;
    border-bottom-left-radius: 400% 180%;
    background-color: #00B591;
    transition: transform 0.5s ease-in-out;
    z-index: 1;
}
.jbc-container:hover .jbc-cta .btn span.circle span:before,
.jbc-container:hover .jbc-cta .btn span.circle span:after {
    background-color: #000000;
}
.jobs-bcard .jbc-cta .btn span.circle:before {
    background-color: #ffffff;
}
.jbc-container:hover .jbc-cta .green-circle{
    transform: scale(6);
}
.jobs-bcard .btn span.circle {
    top: unset;
    bottom: 0;
    right: 25px;
    z-index: 2;
}
/*** END jobs section ***/


/* circle rules */
html,
body {
    overflow-x: hidden;
    position: relative;
}
.about-circle {
    position: absolute;
    top: -60px;
    right: 30px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    z-index: 0;
}

.about-circle__btn {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid #00B591;
    background-color: #131313;
    cursor: pointer;
    z-index: 2;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-animation: animCircle 10s linear infinite alternate;
    animation: animCircle 10s linear infinite alternate;
}

.about-circle__btn:before {
    content: '';
    display: block;
    position: absolute;
    width: 90%;
    height: 90%;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #131313;
    -webkit-animation: animCircle 10s linear infinite alternate;
    animation: animCircle 10s linear infinite alternate;
    -webkit-transition: -webkit-transform .6s ease;
    transition: -webkit-transform .6s ease;
    -o-transition: transform .6s ease;
    transition: transform .6s ease;
    transition: transform .6s ease, -webkit-transform .6s ease;
    border-radius: 50%;
}

.color-invert .about-circle__btn:before {
    -webkit-transform: translate(-50%, -50%) scale(0.7);
    -ms-transform: translate(-50%, -50%) scale(0.7);
    transform: translate(-50%, -50%) scale(0.7);
}


.about-circle__bg {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-animation: animCircle 10s linear infinite alternate;
    animation: animCircle 10s linear infinite alternate;
    background-color: #00B591;
    width: 90%;
    height: 90%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: all .6s ease;
    -o-transition: all .6s ease;
    transition: all .6s ease;
    z-index: 0;
}

.about-circle .about-circle__bg {
    -webkit-transform: translate(-50%, -50%) scale(5.2);
    -ms-transform: translate(-50%, -50%) scale(5.2);
    transform: translate(-50%, -50%) scale(5.2);
}
.about-circle:hover .about-circle__bg {
    -webkit-transform: translate(-50%, -50%) scale(5.2);
    -ms-transform: translate(-50%, -50%) scale(5.2);
    transform: translate(-50%, -50%) scale(5.2);
}
.color-invert .about-circle .about-circle__bg {
    -webkit-transform: translate(-50%, -50%) scale(0.7);
    -ms-transform: translate(-50%, -50%) scale(0.7);
    transform: translate(-50%, -50%) scale(0.7);
    -webkit-animation: animCircle;
    animation: animCircle;
    border-radius: 25% 50% 70% 70%;
}
.color-invert .about-circle__btn:hover:before {
    -webkit-transform: translate(-50%, -50%) scale(0.7);
    -ms-transform: translate(-50%, -50%) scale(0.7);
    transform: translate(-50%, -50%) scale(0.7);
    display: none;
}
.about-circle:before {
    content: 'CLICK CLICK WE ARE EDERA';
    display: none;
    position: absolute;
    right: 0;
    top: 0;
    text-transform: uppercase;
    font-weight: 700;
    color: #323232;
    width: 200px;
    -webkit-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    -webkit-transform: rotate(-90deg) translate(-120px, -30px);
    -ms-transform: rotate(-90deg) translate(-120px, -30px);
    transform: rotate(-90deg) translate(-120px, -30px);
    z-index: 1;
    font-size: .85rem;
}

.about--col-info.about-socials li:before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    right: -10px;
    width: 6px;
    height: 1px;
    background-color: #fff;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.about--col-info.about-socials li:last-child:before,
.circle-highlight {
    display: none;
}

@media(min-width: 768px) {
    .about-circle {
        position: absolute;
        top: 30%;
        right: -10%;
        width: 14%;
        height: 0;
        border-radius: 50%;
        z-index: 0;
        padding-top: 14%;
        -webkit-transform: translate(50%, -50%);
        -ms-transform: translate(50%, -50%);
        transform: translate(50%, -50%);
        -webkit-animation: animCircle 10s linear infinite alternate;
        animation: animCircle 10s linear infinite alternate;
    }
    .about-circle:before {
        display: none;
    }
    .circle-highlight {
        position: absolute;
        bottom: -60px;
        left: 50%;
        display: inline-block;
        font-size: .85rem;
        color: #646363;
        -webkit-transform: translate(-50%, 10px);
        -ms-transform: translate(-50%, 10px);
        transform: translate(-50%, 10px);
        margin-top: 30px;
        min-width: 200px;
    }
}
/* end circle rules */