.info-circle {
    position   : relative;
    font-family: Arial;
    max-width  : 100vh;
    width      : 100%;
    margin     : auto;
}

.info-circle * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing   : border-box;
    box-sizing        : border-box
}

.info-circle .outer-circle {
    background   : rgba(146, 65, 19, 0.25);
    width        : 420px;
    height       : 420px;
    margin       : auto;
    border-radius: 50%;
    padding      : 10px 0px
}

.info-circle .inner-circle {
    position     : relative;
    background   : #fff;
    width        : 400px;
    height       : 400px;
    margin       : auto;
    border-radius: 50%
}

.info-circle .image {
    text-align: center;
    position  : relative;
    top       : 50%;
    transform : translateY(-50%);
    display   : block;
    margin    : auto;
}

.info-circle .info-blocks {
    position: absolute;
    top     : 0px;
    width   : 420px;
    height  : 420px;
    margin  : auto
}

.info-circle .info-blocks .info-block {
    position  : absolute;
    transition: 0.8s transform
}

.info-circle .info-blocks .info-block .info-icon {
    position          : relative;
    background        : #66ccff;
    color             : #000000;
    text-align        : center;
    padding           : 24px;
    width             : 32px;
    height            : 32px;
    border-radius     : 50%;
    -webkit-box-sizing: content-box;
    -moz-box-sizing   : content-box;
    box-sizing        : content-box
}

.info-circle .info-blocks>div:nth-of-type(even) .info-icon {
    float: left
}

.info-circle .info-blocks>div:nth-of-type(even) .info-text {
    position: absolute;
    float   : left;
    left    : 90px
}

.info-circle .info-blocks>div:nth-of-type(odd) .info-icon {
    float: right
}

.info-circle .info-blocks>div:nth-of-type(odd) .info-text {
    position: absolute;
    float   : right;
    right   : 90px
}

.info-circle .info-blocks>div:nth-of-type(odd) {
    text-align: right
}

.info-circle .info-blocks>div:nth-of-type(1) {
    transform: translate(60px, -10px)
}

.info-circle .info-blocks>div:nth-of-type(2) {
    transform: translate(280px, -10px)
}

.info-circle .info-blocks>div:nth-of-type(3) {
    transform: translate(-10px, 70px)
}

.info-circle .info-blocks>div:nth-of-type(4) {
    transform: translate(350px, 70px)
}

.info-circle .info-blocks>div:nth-of-type(5) {
    transform: translate(calc(420px - 455px), 170px)
}

.info-circle .info-blocks>div:nth-of-type(6) {
    transform: translate(calc(420px - 45px), 170px)
}


.info-circle .info-blocks>div:nth-of-type(7) {
    transform: translate(-10px, 270px)
}

.info-circle .info-blocks>div:nth-of-type(8) {
    transform: translate(350px, 270px)
}

.info-circle .info-blocks>div:nth-of-type(9) {
    transform: translate(calc(420px - 250px), 370px)
}
.info-circle .info-blocks>div:nth-of-type(9) .info-text.title-only {
	transform: translate(90%, calc(-100% + 90px));
}
.info-circle .info-blocks>div:nth-of-type(10) .info-text.title-only {
	transform: translate(-100%, calc(-100% - 25px));
}
.info-circle .info-blocks>div:nth-of-type(10) {
    transform: translate(calc(420px - 250px), -40px)
}

.info-circle .info-blocks>div:nth-of-type(11) {
    transform: translate(65px, 345px)
}

.info-circle .info-blocks>div:nth-of-type(12) {
    transform: translate(275px, 345px)
}


.info-circle .info-text.title-only {
    margin-top: 30px
}

.info-text.title-only {
    width: max-content;
}

.info-circle .text-upper {
    text-transform: uppercase
}

.info-circle .clearfix:after {
    content: '';
    display: table;
    clear  : both
}

.info-icon:hover {
    background: #363936 !important;
}

@media screen and (max-width:768px) {
    .info-circle .info-text.title-only {
        display: none;
    }

    .info-circle .outer-circle {
        width : 320px;
        height: 320px;
    }

    .info-circle .inner-circle {
        width : 300px;
        height: 300px;
    }

    .info-circle .info-blocks {
        width: 300px;
    }

    .info-circle .info-blocks .info-block {
        position  : absolute;
        transition: 0.8s transform
    }

    .info-circle .info-blocks .info-block .info-icon {
        position          : relative;
        background        : #66ccff;
        color             : #000000;
        text-align        : center;
        padding           : 15px;
        width             : 25px;
        height            : 25px;
        border-radius     : 50%;
        -webkit-box-sizing: content-box;
        -moz-box-sizing   : content-box;
        box-sizing        : content-box
    }

    .info-circle .info-blocks>div:nth-of-type(even) .info-icon {
        float: left
    }

    .info-circle .info-blocks>div:nth-of-type(even) .info-text {
        position: absolute;
        float   : left;
        left    : 90px
    }

    .info-circle .info-blocks>div:nth-of-type(odd) .info-icon {
        float: right
    }

    .info-circle .info-blocks>div:nth-of-type(odd) .info-text {
        position: absolute;
        float   : right;
        right   : 90px
    }

    .info-circle .info-blocks>div:nth-of-type(odd) {
        text-align: right
    }

    .info-circle .info-blocks>div:nth-of-type(1) {
        transform: translate(90px, -20px)
    }

    .info-circle .info-blocks>div:nth-of-type(2) {
        transform: translate(20px, 20px)
    }

    .info-circle .info-blocks>div:nth-of-type(3) {
        transform: translate(-20px, 90px)
    }

    .info-circle .info-blocks>div:nth-of-type(4) {
        transform: translate(-20px, 170px)
    }

    .info-circle .info-blocks>div:nth-of-type(5) {
        transform: translate(20px, 240px)
    }

    .info-circle .info-blocks>div:nth-of-type(6) {
        transform: translate(90px, 280px)
    }

    .info-circle .info-blocks>div:nth-of-type(7) {
        transform: translate(175px, 280px)
    }

    .info-circle .info-blocks>div:nth-of-type(8) {
        transform: translate(245px, 240px)
    }

    .info-circle .info-blocks>div:nth-of-type(9) {
        transform: translate(285px, 170px)
    }

    .info-circle .info-blocks>div:nth-of-type(10) {
        transform: translate(285px, 90px)
    }
    .info-circle .info-blocks>div:nth-of-type(11) {
        transform: translate(245px, 20px)
    }
    .info-circle .info-blocks>div:nth-of-type(12) {
        transform: translate(175px, -20px)
    }

    .info-circle .image img {
        width: 100px !important;
        margin-left: -25px;
    }
    .info-circle .image {
        width: 35px;
        left: -5px;
    }
}