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

/**circle center - The middle circle - Each pic must have own css class**/
.cs-circle-center-1 {
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/project-management/project-management.jpg");
}
.cs-circle-center-2 {
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/project-management/project-management-2.jpg");
}
.cs-circle-center-3 {
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/project-management/project-management-3.jpg");
}
.cs-circle-center-4 {
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/project-management/project-management-4.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
*************/

/***
PROJECT PLANNING
***/
/**inner circle rotation**/
#circle-container-1 {
transform: rotate(0deg);
border: unset;
}

/**all surrounding circles**/
#circle-container-1 > * {
display: block;
position: absolute;
top: 50%;
left: 50%;
margin: -70px;
border: 1px solid;
border-radius: 50%;
text-align: center;
background:white;
}

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

/**Circle 2**/
#circle-container-1 > *:nth-of-type(2) {
transform: rotate(45deg) translate(265px) rotate(-45deg);
}
#circle-container-1 li:hover #circle-1-2 {
transform: translate(-188px, -170px);
}

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

/**Circle 4**/
#circle-container-1 > *:nth-of-type(4) {
transform: rotate(135deg) translate(265px) rotate(-135deg);
}
#circle-container-1 li:hover #circle-1-4 {
transform: translate(185px, -175px);
}

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

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

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

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


/***
CONSTRUCTION PROGRAMMING
***/
/**inner circle rotation**/
#circle-container-2 {
transform: rotate(0deg);
border: 5px solid #81be41;
}
/*center circle*/
#circle-center-2 {
border: unset;
}

/**all surrounding circles**/
#circle-container-2 > * {
display: block;
position: absolute;
top: 50%;
left: 50%;
margin: -70px;
border: 1px solid;
border-radius: 50%;
text-align: center;
background:white;
}

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

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

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

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


/***
CONSTRUCTION MANAGEMENT
***/
/*top margin for section*/
.circle-section:nth-of-type(3) {
margin-top: 150px;
}
/**inner circle rotation**/
#circle-container-3 {
transform: rotate(285deg);
border: unset;
}

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

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

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

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

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

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

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

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


/***
PROJECT CLOSE-OUT
***/
/**inner circle rotation**/
#circle-container-4 {
transform: rotate(130deg);
border: unset;
}
div#circle-outer-4 {
width: 500px;
height: 500px;
position: absolute;
border: 5px solid;
border-radius: 50%;
border-color: #81be41;
left: 113px;
top: 10px;
border-left: unset;
border-right: unset;
border-bottom: unset;
transform: rotate(88deg);
}

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

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

/**Circle 2**/
#circle-container-4 > *:nth-of-type(2) {
transform: rotate(25deg) translate(265px) rotate(205deg);
}
#circle-container-4 li:hover #circle-4-2 {
transform: translate(219px, -96px);
}

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

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

/**Circle 5**/
#circle-container-4 > *:nth-of-type(5) {
transform: rotate(100deg) translate(265px) rotate(130deg);
}
#circle-container-4 li:hover #circle-4-5 {
transform: translate(157px, 211px);
}