.works-container {
    width: 960px;
    margin: auto;
    position: absolute;
    top: 42px;
    left: calc(50% - 480px);
}

.circle-group {
    transition: opacity 300ms ease-in-out;
}

.circle-group .btn {
    transition: opacity 300ms ease-in-out;
    opacity: 0;
}

.circle-group .btn.done {
    opacity: 1;
}

.works-circle-desc {
    color: #ffffff;
    width: 192px;
    position: absolute;
}

.works-circle-desc.long {
    width: 300px;
}


.hdesc1 {
    top: 224px;
    left: 7px;
    text-align: right;
}

.hdesc2 {
    top: 458px;
    left: 7px;
    text-align: right;
}

.hdesc3 {
    top: 600px;
    left: 90px;
    text-align: right;
}

.hdesc4 {
    top: 79px;
    right: 90px;
    text-align: left;
}

.hdesc5 {
    top: 224px;
    right: 7px;
    text-align: left;
}

.hdesc6 {
    top: 458px;
    right: 7px;
    text-align: left;
}

.btn-work {
    background-color: #f57220;
    border-color: #f57220;
    color: #fff;
}

.btn-work:hover {
    color: #fff;
    background-color: #f5843e;
    border-color: #f5843e;
}

.works {
    margin: 100px 0;
}



.works-box .works-circle {
    background-image: url("../img/how/item_list_circle.png"), url("../img/how/item_logo.png");
    background-repeat: no-repeat;
    width: 470px;
    height: 470px;
    margin: 0 auto 50px;
    position: relative;
    background-position: center;
    background-size: 100%, 150px;
}

.works-inner-circle {
    position: absolute;
    width: 103px;
    height: 102px;
    cursor: pointer;
}

.circle1:hover {
    background: url("../img/how/2_ic_insurers_blue.svg"), url("../img/how/item_circle_hover.png");
    background-size: 60%, 100%;
    background-repeat: no-repeat;
    background-position-x: 50%;
    background-position-y: 50%;
}

.circle2:hover {
    background: url("../img/how/1_ic_developers_blue.svg"), url("../img/how/item_circle_hover.png");
    background-size: 60%, 100%;
    background-repeat: no-repeat;
    background-position-x: 50%;
    background-position-y: 50%;
}

.circle3:hover {
    background: url("../img/how/6_ic_sales_blue.svg"), url("../img/how/item_circle_hover.png");
    background-size: 60%, 100%;
    background-repeat: no-repeat;
    background-position-x: 50%;
    background-position-y: 50%;
}

.circle4:hover {
    background: url("../img//how/5_ic_inspectors_blue.svg"), url("../img/how/item_circle_hover.png");
    background-size: 60%, 100%;
    background-repeat: no-repeat;
    background-position-x: 50%;
    background-position-y: 50%;
}

.circle5:hover {
    background: url("../img/how/4_ic_users_blue.svg"), url("../img/how/item_circle_hover.png");
    background-size: 60%, 100%;
    background-repeat: no-repeat;
    background-position-x: 50%;
    background-position-y: 50%;
}

.circle6:hover {
    background: url("../img//how/3_ic_db_blue.svg"), url("../img/how/item_circle_hover.png");
    background-size: 60%, 100%;
    background-repeat: no-repeat;
    background-position-x: 50%;
    background-position-y: 50%;
}

.circle1 {
    left: -15px;
    top: 72px;
    background-image: url("../img/how/2_ic_insurers_white.svg"), url("../img/how/item_circle.png");
    background-size: 60%, 100%;
    background-repeat: no-repeat;
    background-position-x: 50%;
    background-position-y: 50%;
}

.circle2 {
    left: 187.5px;
    top: -36px;
    background: url("../img/how/1_ic_developers_white.svg"), url("../img/how/item_circle.png");
    background-size: 60%, 100%;
    background-repeat: no-repeat;
    background-position-x: 50%;
    background-position-y: 50%;
}

.circle3 {
    left: 381px;
    top: 72px;
    background: url("../img/how/6_ic_sales_white.svg"), url("../img/how/item_circle.png");
    background-size: 60%, 100%;
    background-repeat: no-repeat;
    background-position-x: 50%;
    background-position-y: 50%;
}

.circle4 {
    left: -15px;
    bottom: 70px;
    background: url("../img/how/5_ic_inspectors_white.svg"), url("../img/how/item_circle.png");
    background-size: 60%, 100%;
    background-repeat: no-repeat;
    background-position-x: 50%;
    background-position-y: 50%;
}

.circle5 {
    left: 187.5px;
    bottom: -34px;
    background: url("../img/how/4_ic_users_white.svg"), url("../img/how/item_circle.png");
    background-size: 60%, 100%;
    background-repeat: no-repeat;
    background-position-x: 50%;
    background-position-y: 50%;
}

.circle6 {
    left: 381px;
    bottom: 70px;
    background: url("../img/how/3_ic_db_white.svg"), url("../img/how/item_circle.png");
    background-size: 60%, 100%;
    background-repeat: no-repeat;
    background-position-x: 50%;
    background-position-y: 50%;
}

.inner-text {
    position: absolute;
    font-size: 1.2em;
    top: -30px;
    line-height: 1em;
    font-weight: 500;
    color: #ffffff;
    text-transform: uppercase;
    width: 100%;
    text-align: center;
}

/* Small View */
.circle1-1:hover {
    background: url("../img/how/2_ic_insurers_blue.svg"), url("../img/how/item_circle_hover.png");
    background-size: 60%, 100%;
    background-repeat: no-repeat;
    background-position-x: 50%;
    background-position-y: 50%;
}

.circle2-2:hover {
    background: url("../img/how/1_ic_developers_blue.svg"), url("../img/how/item_circle_hover.png");
    background-size: 60%, 100%;
    background-repeat: no-repeat;
    background-position-x: 50%;
    background-position-y: 50%;
}

.circle3-3:hover {
    background: url("../img/how/6_ic_sales_blue.svg"), url("../img/how/item_circle_hover.png");
    background-size: 60%, 100%;
    background-repeat: no-repeat;
    background-position-x: 50%;
    background-position-y: 50%;
}

.circle4-4:hover {
    background: url("../img//how/5_ic_inspectors_blue.svg"), url("../img/how/item_circle_hover.png");
    background-size: 60%, 100%;
    background-repeat: no-repeat;
    background-position-x: 50%;
    background-position-y: 50%;
}

.circle5-5:hover {
    background: url("../img/how/4_ic_users_blue.svg"), url("../img/how/item_circle_hover.png");
    background-size: 60%, 100%;
    background-repeat: no-repeat;
    background-position-x: 50%;
    background-position-y: 50%;
}

.circle6-6:hover {
    background: url("../img//how/3_ic_db_blue.svg"), url("../img/how/item_circle_hover.png");
    background-size: 60%, 100%;
    background-repeat: no-repeat;
    background-position-x: 50%;
    background-position-y: 50%;
}

.circle1-1 {
    left: 1.5rem;
    top: auto;
    background-image: url("../img/how/2_ic_insurers_white.svg"), url("../img/how/item_circle.png");
    background-size: 60%, 100%;
    background-repeat: no-repeat;
    background-position-x: 50%;
    background-position-y: 50%;
    display: none;
}

.circle2-2 {
    left: 1.5rem;
    top: auto;
    background: url("../img/how/1_ic_developers_white.svg"), url("../img/how/item_circle.png");
    background-size: 60%, 100%;
    background-repeat: no-repeat;
    background-position-x: 50%;
    background-position-y: 50%;
    display: none;
}

.circle3-3 {
    left: 1.5rem;
    top: auto;
    background: url("../img/how/6_ic_sales_white.svg"), url("../img/how/item_circle.png");
    background-size: 60%, 100%;
    background-repeat: no-repeat;
    background-position-x: 50%;
    background-position-y: 50%;
    display: none;
}

.circle4-4 {
    left: 1.5rem;
    bottom: auto;
    background: url("../img/how/5_ic_inspectors_white.svg"), url("../img/how/item_circle.png");
    background-size: 60%, 100%;
    background-repeat: no-repeat;
    background-position-x: 50%;
    background-position-y: 50%;
    display: none;
}

.circle5-5 {
    left: 1.5rem;
    bottom: auto;
    background: url("../img/how/4_ic_users_white.svg"), url("../img/how/item_circle.png");
    background-size: 60%, 100%;
    background-repeat: no-repeat;
    background-position-x: 50%;
    background-position-y: 50%;
    display: none;
}

.circle6-6 {
    left: 1.5rem;
    bottom: auto;
    background: url("../img/how/3_ic_db_white.svg"), url("../img/how/item_circle.png");
    background-size: 60%, 100%;
    background-repeat: no-repeat;
    background-position-x: 50%;
    background-position-y: 50%;
    display: none;
}

.text1-1,
.text2-2,
.text3-3,
.text4-4,
.text5-5,
.text6-6 {
    position: relative;
    top: 120px;
    font-size: 1rem;
}

.text4,
.text5,
.text6 {
    top: 114px;
}

@media(max-width: 959px) {
    .inner-text {
        bottom: auto !important;
    }


    .works-container {
        width: 530px;
        z-index: 2;
        position: relative;
        left: unset;
    }

    .works-circle-desc {
        display: block !important;
        position: relative;
        right: auto !important;
        top: 1px !important;
        text-align: left !important;
        left: 153px !important;
        width: calc(100% - 172px);
        height: 179px;
    }

    .works-circle-desc.long {
        width: calc(100% - 173px);
    }

    .circle1-1,
    .circle2-2,
    .circle3-3,
    .circle4-4,
    .circle5-5,
    .circle6-6 {
        display: block;
    }
}

@media(max-width: 576px) {
    .works-container {
        width: 335px;
        z-index: 2;
        position: relative;
        left: unset;
        top: 0;
        height: 100px;
    }

    .works-box .works-circle {
        left: 0;
        width: 276px;
    }

    .works {
        margin: 0;
    }

    .works-box .works-circle {
       
        background-size: 100%, 120px;
    }

    .works-inner-circle {
        width: 70px;
        height: 70px;
    }
    .works-circle-long {
        top: 0 !important;
        left: 0 !important;
        margin-left: 170px !important;
        width: calc(100% - 170px);
    }

    .works-box .works-circle {
        margin: 0 auto;
    }

    .works-container .works-inner-circle {
        width: 102px;
        height: 102px;
    }

    .circle1 {
        top: 125px;
        left: -10px;
    }

    .circle4 {
        bottom: 125px;
        left: -10px;
    }

    .circle2 {
        left: 110px;
        top: 65px;
    }

    .circle5 {
        left: 110px;
        bottom: 65px;
    }

    .circle3 {
        left: 225px;
        top: 125px;
    }

    .circle6 {
        left: 225px;
        bottom: 125px;
    }

    .inner-text {
        font-size: .8rem;
    }

    .works-container .inner-text {
        top: 110px !important;
    }

    .text4,
    .text5,
    .text6 {
        top: 80px;
    }
}

@media (max-width:385px) {
    .works-container {
        width: 100%;
        z-index: 2;
        position: relative;
        left: unset;
    }
}

@media(max-width: 320px) {
    .works-inner-circle {
        width: 60px;
        height: 60px;
    }

    .circle1 {
        top: 125px;
        left: -10px;
    }

    .circle4 {
        bottom: 125px;
        left: -10px;
    }

    .circle2 {
        left: 110px;
        top: 65px;
    }

    .circle5 {
        left: 110px;
        bottom: 65px;
    }

    .circle3 {
        left: 225px;
        top: 125px;
    }

    .circle6 {
        left: 225px;
        bottom: 125px;
    }
}