/*Inner Wrapper*/
.cs-circles {
position: relative;
}

/**circle center - The middle circle**/
.cs-circle-center-a {
width: 310px;
height: 310px;
border: 2px solid #81BE41;
position: absolute;
border-radius: 50%;
left: calc(50% - (310px / 2));
top: calc(50% - (310px / 2));
background-image: url("../../images/quantinty-surviying/quantity-surveying-a.jpg");
}
.cs-circle-center-b {
width: 310px;
height: 310px;
border: 2px solid #81BE41;
position: absolute;
border-radius: 50%;
left: calc(50% - (310px / 2));
top: calc(50% - (310px / 2));
background-image: url("../../images/quantinty-surviying/quantity-surveying-b.jpg");
}
.cs-circle-center-c {
width: 310px;
height: 310px;
border: 2px solid #81BE41;
position: absolute;
border-radius: 50%;
left: calc(50% - (310px / 2));
top: calc(50% - (310px / 2));
background-image: url("../../images/quantinty-surviying/quantity-surveying-c.jpg");
}
.cs-circle-center-d {
width: 310px;
height: 310px;
border: 2px solid #81BE41;
position: absolute;
border-radius: 50%;
left: calc(50% - (310px / 2));
top: calc(50% - (310px / 2));
background-image: url("../../images/quantinty-surviying/quantity-surveying-d.jpg");
}
.cs-circle-center-e {
width: 310px;
height: 310px;
border: 2px solid #81BE41;
position: absolute;
border-radius: 50%;
left: calc(50% - (310px / 2));
top: calc(50% - (310px / 2));
background-image: url("../../images/quantinty-surviying/quantity-surveying-e.jpg");
}

/*surrounding circular line container*/
.circle-container {
border: solid 5px #81BE41;
border-bottom-color: transparent;
border-left-color: transparent;
width: 500px;
height: 500px;
border-radius: 50%;
padding: 0;
list-style: none;
margin: 15px auto;
position: relative;
}
/*surrounding (small) circle dimensions and font sizes*/
.circle-container * {
width: 140px;
height: 140px;
font-size: 12px;
}
.circle-text {
display: flex;
align-content: center;
justify-content: center;
align-items: center;
}

/***
   hover | Global
 ***/
/*transition time for circle hover animations*/
.circle-container li,.circle-container li *{
transition: transform 0.4s;
}
/*change surrounding (small) circle dimensions and color */
.circle-container li:hover {
background-color: #81BE41!important;
width: 160px;
height: 160px;
}
/*make surrounding (small) circle text larger on hover*/
.circle-container li:hover .circle-text {
font-size: 24px;
line-height: 24px;
color: #81BE41;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

/*************
   END GLOBAL STYLES
 *************/

/***
   Financial Feasibility Studies
 ***/
/*shift title left a bit..*/
.section1 h2 {
    margin-left: 60px;
}
/*top margin for section*/
.circle-section:nth-of-type(3) {
    margin-top: 150px;
}
/**inner circle rotation**/
#circle-container-6 {
    transform: rotate(27deg);
    border: unset;
}

/**all surrounding circles**/
#circle-container-6 > * {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -70px;
    border: 1px solid;
    border-radius: 50%;
    text-align: center;
    background:white;
}
#circle-container-6 * {
    width: 100px;
    height: 100px;
    font-size: 12px;
}
#circle-container-6 li:hover{
    width: 110px;
    height: 110px;
}
#circle-container-6 li:hover .circle-text {
    font-size: 24px;
    line-height: 24px;
}

/**Circle 1**/
#circle-container-6 > *:nth-of-type(1) {
    transform: rotate(0deg) translate(265px) rotate(-27deg);
}
#circle-container-6 li:hover #circle-6-1 {
    transform: translate(-228px, -84px);
}

/**Circle 2**/
#circle-container-6 > *:nth-of-type(2) {
    transform: rotate(25deg) translate(265px) rotate(-52deg);
}
#circle-container-6 li:hover #circle-6-2 {
    transform: translate(-153px, -175px);
}

/**Circle 3**/
#circle-container-6 > *:nth-of-type(3) {
    transform: rotate(50deg) translate(265px) rotate(-77deg);
}
#circle-container-6 li:hover #circle-6-3 {
    transform: translate(-50px, -232px);
}

/**Circle 4**/
#circle-container-6 > *:nth-of-type(4) {
    transform: rotate(75deg) translate(265px) rotate(-102deg);
}
#circle-container-6 li:hover #circle-6-4 {
    transform: translate(66px, -225px);
}

/**Circle 5**/
#circle-container-6 > *:nth-of-type(5) {
    transform: rotate(100deg) translate(265px) rotate(-127deg);
}
#circle-container-6 li:hover #circle-6-5 {
    transform: translate(174px, -169px);
}

/**Circle 6**/
#circle-container-6 > *:nth-of-type(6) {
    transform: rotate(126deg) translate(251px) rotate(-153deg);
}
#circle-container-6 li:hover #circle-6-6 {
    transform: translate(243px, -83px);
}


/***
   Project Budgets
 ***/
/*top margin for section*/
/**inner circle rotation**/
#circle-container-7 {
    transform: rotate(-49deg);
    border: unset;
}

/**all surrounding circles**/
#circle-container-7 > * {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -70px;
    border: 1px solid;
    border-radius: 50%;
    text-align: center;
    background:white;
}
#circle-container-7 * {
    width: 100px;
    height: 100px;
    font-size: 12px;
}
#circle-container-7 li:hover{
    width: 110px;
    height: 110px;
}
#circle-container-7 li:hover .circle-text {
    font-size: 24px;
    line-height: 24px;
}

/**Circle 1**/
#circle-container-7 > *:nth-of-type(1) {
    transform: rotate(0deg) translate(265px) rotate(49deg);
}
#circle-container-7 li:hover #circle-7-1 {
    transform: translate(-147px, 206px);
}

/**Circle 2**/
#circle-container-7 > *:nth-of-type(2) {
    transform: rotate(25deg) translate(265px) rotate(24deg);
}
#circle-container-7 li:hover #circle-7-2 {
    transform: translate(-217px, 112px);
}

/**Circle 3**/
#circle-container-7 > *:nth-of-type(3) {
    transform: rotate(50deg) translate(265px) rotate(-1deg);
}
#circle-container-7 li:hover #circle-7-3 {
    transform: translate(-239px, -5px);
}

/**Circle 4**/
#circle-container-7 > *:nth-of-type(4) {
    transform: rotate(75deg) translate(265px) rotate(-26deg);
}
#circle-container-7 li:hover #circle-7-4 {
    transform: translate(-210px, -115px);
}

/**Circle 5**/
#circle-container-7 > *:nth-of-type(5) {
    transform: rotate(100deg) translate(265px) rotate(-51deg);
}
#circle-container-7 li:hover #circle-7-5 {
    transform: translate(-139px, -203px);
}


/***
   Tender & Procurement
 ***/
/*top margin for section*/
/**inner circle rotation**/
#circle-container-8 {
    transform: rotate(145deg);
    border: unset;
}

/**all surrounding circles**/
#circle-container-8 > * {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -80px;
    border: 1px solid;
    border-radius: 50%;
    text-align: center;
    background:white;
}
#circle-container-8 * {
    width: 100px;
    height: 100px;
    font-size: 12px;
}
#circle-container-8 li:hover{
    width: 110px;
    height: 110px;
}
#circle-container-8 li:hover .circle-text {
    font-size: 24px;
    line-height: 24px;
}

/**Circle 1**/
#circle-container-8 > *:nth-of-type(1) {
    transform: rotate(0deg) translate(265px) rotate(214deg);
}
#circle-container-8 li:hover #circle-8-1 {
    transform: translate(184px, -140px);
}

/**Circle 2**/
#circle-container-8 > *:nth-of-type(2) {
    transform: rotate(25deg) translate(265px) rotate(-172deg);
}
#circle-container-8 li:hover #circle-8-2 {
    transform: translate(226px, -41px);
}

/**Circle 3**/
#circle-container-8 > *:nth-of-type(3) {
    transform: rotate(50deg) translate(265px) rotate(165deg);
}
#circle-container-8 li:hover #circle-8-3 {
    transform: translate(219px, 74px);
}

/**Circle 4**/
#circle-container-8 > *:nth-of-type(4) {
    transform: rotate(75deg) translate(265px) rotate(140deg);
}
#circle-container-8 li:hover #circle-8-4 {
    transform: translate(164px, 179px);
}

/**Circle 5**/
#circle-container-8 > *:nth-of-type(5) {
    transform: rotate(100deg) translate(265px) rotate(115deg);
}
#circle-container-8 li:hover #circle-8-5 {
    transform: translate(85px, 249px);
}

/**Circle 6**/
#circle-container-8 > *:nth-of-type(6) {
    transform: rotate(335deg) translate(265px) rotate(240deg);
}
#circle-container-8 li:hover #circle-8-6 {
    transform: translate(99px, -220px);
}


/***
   Construction Cost Management
 ***/
/*top margin for section*/
/**inner circle rotation**/
#circle-container-9 {
    transform: rotate(-49deg);
    border: unset;
}

/**all surrounding circles**/
#circle-container-9 > * {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -70px;
    border: 1px solid;
    border-radius: 50%;
    text-align: center;
    background:white;
}
#circle-container-9 * {
    width: 100px;
    height: 100px;
    font-size: 12px;
}
#circle-container-9 li:hover{
    width: 110px;
    height: 110px;
}
#circle-container-9 li:hover .circle-text {
    font-size: 24px;
    line-height: 24px;
}

/**Circle 1**/
#circle-container-9 > *:nth-of-type(1) {
    transform: rotate(0deg) translate(265px) rotate(49deg);
}
#circle-container-9 li:hover #circle-9-1 {
    transform: translate(-147px, 206px);
}

/**Circle 2**/
#circle-container-9 > *:nth-of-type(2) {
    transform: rotate(25deg) translate(265px) rotate(24deg);
}
#circle-container-9 li:hover #circle-9-2 {
    transform: translate(-217px, 112px);
}

/**Circle 3**/
#circle-container-9 > *:nth-of-type(3) {
    transform: rotate(50deg) translate(265px) rotate(-1deg);
}
#circle-container-9 li:hover #circle-9-3 {
    transform: translate(-239px, -5px);
}

/**Circle 4**/
#circle-container-9 > *:nth-of-type(4) {
    transform: rotate(75deg) translate(265px) rotate(-26deg);
}
#circle-container-9 li:hover #circle-9-4 {
    transform: translate(-210px, -115px);
}

/**Circle 5**/
#circle-container-9 > *:nth-of-type(5) {
    transform: rotate(100deg) translate(265px) rotate(-51deg);
}
#circle-container-9 li:hover #circle-9-5 {
    transform: translate(-139px, -203px);
}


/***
   Last Section
 ***/
/*top margin for section*/
/**inner circle rotation**/
#circle-container-10 {
    transform: rotate(0deg);
    border: unset;
}

/**all surrounding circles**/
#circle-container-10 > * {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -67px;
    border: 1px solid;
    border-radius: 50%;
    text-align: center;
    background: white;
}
#circle-container-10 * {
    width: 140px;
    height: 140px;
    font-size: 12px;
}
#circle-container-10 li:hover{
    width: 150px;
    height: 150px;
}
#circle-container-10 li:hover .circle-text {
    font-size: 24px;
    line-height: 24px;
}

/**Circle 1**/
#circle-container-10 > *:nth-of-type(1) {
    transform: rotate(0deg) translate(265px) rotate(0deg);
}
#circle-container-10 li:hover #circle-10-1 {
    transform: translate(-267px, 3px);
}

/**Circle 2**/
#circle-container-10 > *:nth-of-type(2) {
    transform: rotate(90deg) translate(265px) rotate(-90deg);
}
#circle-container-10 li:hover #circle-10-2 {
    transform: translate(-2px, -260px);
}

/**Circle 3**/
#circle-container-10 > *:nth-of-type(3) {
    transform: rotate(180deg) translate(265px) rotate(-180deg);
}
#circle-container-10 li:hover #circle-10-3 {
    transform: translate(260px, -5px);
}


/****
   Align Sections
 ****/
.section1 .cs-circles, .section3 .cs-circles, .section2 h2, .section4 h2{
    float:right;
}
.section2 .cs-circles, .section4 .cs-circles, .section1 h2, .section3 h2{
    float:left;
}