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

/*globale styles for circle centers*/
div[id^="circle-center-"] {
    /* filter: grayscale(1); */
    background-size: cover;
}

/**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/construction-management/big-circles/1c.png");
    background-position: center;
}
.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/construction-management/big-circles/2-c.jpg");
    background-position: center;
}
.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/construction-management/big-circles/3c.png");
    background-position: center;
}
.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/construction-management/big-circles/4c.png");
    background-position: center;
}
.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/construction-management/big-circles/5-c.jpg");
    background-position: center;
}

/*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;
    max-width: 80px;
    margin-left: 10px;
}

/***
   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
 *************/

/***
   Site Administration
 ***/
.gl-section-1 {
    margin-top: 130px;
    position: relative;
}
#dv1 {
    position: absolute;
    top: 240px;
    left: calc(50% - 480px);
}

/*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(284deg);
    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(76deg);
}
#circle-container-6 li:hover #circle-6-1 {
    transform: translate(-41px, 249px);
}

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

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

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

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

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

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

/***
   Sequencing Of Works
 ***/
.gl-section-2 {
    position: relative;
    margin-top: 100px;
}
.gl-section-2 .section-title-desktop-wrapper {
    position: absolute;
    top: 50%;
}
.gl-section-2 .section-title-desktop-wrapper {
    position: absolute;
    top: 39%;
    right: calc(50% - 410px);
}

/**inner circle rotation**/
#circle-container-7 {
    transform: rotate(131deg);
    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(-132deg);
}
#circle-container-7 li:hover #circle-7-1 {
    transform: translate(163px, -190px);
}

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

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

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

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


/***
   Subcontractor Management
 ***/
.gl-section-3 {
    position: relative;
    margin-top: 80px;
}
.gl-section-3 .section-title-desktop-wrapper {
    position: absolute;
    top: 230px;
    left: calc(195px);
}
.desktop-circle-wrapper-3 {
    margin-left: 340px;
}


/**inner circle rotation**/
#circle-container-8 {
    transform: rotate(325deg);
    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(394deg);
}
#circle-container-8 li:hover #circle-8-1 {
    transform: translate(-175px, 166px);
}

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

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

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

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

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


/***
   Quality Control & Risk Management
 ***/
/*top margin for section*/
.gl-section-4 {
    position: relative;
    margin-top: 155px;
}
.gl-section-4 .section-title-desktop-wrapper {
    position: absolute;
    top: 235px;
    right: 50px;
}
.desktop-circle-wrapper-4 {
    margin-left: -420px;
}

/*move text up slightly so it fits in small circle (circle 4)*/
div#circle-9-4 {
    margin-top: -7px;
}

/**inner circle rotation**/
#circle-container-9 {
    transform: rotate(276deg);
    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(-1deg) translate(265px) rotate(85deg);
}
#circle-container-9 li:hover #circle-9-1 {
    transform: translate(4px, 241px);
}

/**Circle 2**/
/* #circle-container-9 > *:nth-of-type(2) {
   transform: rotate(32deg) translate(265px) rotate(52deg);
   } */
/* #circle-container-9 li:hover #circle-9-2 {
   transform: translate(-145px, 175px);
   } */
#circle-container-9 > *:nth-of-type(2) {
    transform: rotate(34deg) translate(265px) rotate(49deg);
}
#circle-container-9 li:hover #circle-9-2 {
    transform: translate(-157px, 196px);
}

/**Circle 3**/
/* #circle-container-9 > *:nth-of-type(3) {
   transform: rotate(62deg) translate(265px) rotate(20deg);
   } */
#circle-container-9 li:hover #circle-9-3 {
    transform: translate(-228px, 57px);
}
#circle-container-9 > *:nth-of-type(3) {
    transform: rotate(69deg) translate(256px) rotate(14deg);
}

/**Circle 4**/
/* #circle-container-9 > *:nth-of-type(4) {
   transform: rotate(95deg) translate(257px) rotate(-12deg);
   } */
/* #circle-container-9 li:hover #circle-9-4 {
   transform: translate(-227px, -67px);
   } */
#circle-container-9 > *:nth-of-type(4) {
    transform: rotate(106deg) translate(249px) rotate(-23deg);
}
#circle-container-9 li:hover #circle-9-4 {
    transform: translate(-212px, -105px);
}

/**Circle 5**/
/* #circle-container-9 > *:nth-of-type(5) {
   transform: rotate(129deg) translate(247px) rotate(-46deg);

   } */
/* #circle-container-9 li:hover #circle-9-5 {
   transform: translate(-146px, -183px);
   } */
#circle-container-9 > *:nth-of-type(5) {
    transform: rotate(145deg) translate(225px) rotate(-61deg);
}
#circle-container-9 li:hover #circle-9-5 {
    transform: translate(-95px, -205px);
}

/**Circle 6**/
/* #circle-container-9 > *:nth-of-type(6) {
   transform: rotate(200deg) translate(210px) rotate(-116deg);
   } */
/* #circle-container-9 li:hover #circle-9-6 {
   transform: translate(119px, -203px);
   } */
#circle-container-9 > *:nth-of-type(6) {
    transform: rotate(190deg) translate(210px) rotate(253deg);
}
#circle-container-9 li:hover #circle-9-6 {
    transform: translate(78px, -203px);
}

/**Circle 7**/
/* #circle-container-9 > *:nth-of-type(7) {
   transform: rotate(243deg) translate(206px) rotate(-159deg);
   } */
/* #circle-container-9 li:hover #circle-9-7 {
   transform: translate(213px, -76px);
   } */
#circle-container-9 > *:nth-of-type(7) {
    transform: rotate(234deg) translate(206px) rotate(-150deg);
}
#circle-container-9 li:hover #circle-9-7 {
    transform: translate(197px, -108px);
}

/**Circle 8**/
/* #circle-container-9 > *:nth-of-type(8) {
   transform: rotate(285deg) translate(218px) rotate(-202deg);
   } */
/* #circle-container-9 li:hover #circle-9-8 {
   transform: translate(231px, 65px);
   } */
#circle-container-9 > *:nth-of-type(8) {
    transform: rotate(279deg) translate(212px) rotate(-195deg);
}
#circle-container-9 li:hover #circle-9-8 {
    transform: translate(220px, 51px);
}


/**Circle 9**/
/* #circle-container-9 > *:nth-of-type(9) {
   transform: rotate(324deg) translate(236px) rotate(-241deg);
   } */
/* #circle-container-9 li:hover #circle-9-9 {
   transform: translate(137px, 189px);
   } */
#circle-container-9 > *:nth-of-type(9) {
    transform: rotate(322deg) translate(236px) rotate(-238deg);
}
#circle-container-9 li:hover #circle-9-9 {
    transform: translate(139px, 194px);
}

/***
   Project Close Out
 ***/
/*top margin for section*/
.gl-section-5 {
    position: relative;
    margin-top: 150px!important;
}
/**inner circle rotation**/
#circle-container-10 {
    transform: rotate(0deg);
    border: unset;
}
.gl-section-5 .section-title-desktop-wrapper {
    margin-bottom: -70px;
}

/**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: 100px;
    height: 100px;
    font-size: 12px;
}
#circle-container-10 li:hover{
    width: 110px;
    height: 110px;
}
#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(-251px, 3px);
}

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

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

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

/**Circle 5**/
#circle-container-10 > *:nth-of-type(5) {
    transform: rotate(143deg) translate(244px) rotate(-145deg);
}
#circle-container-10 li:hover #circle-10-5 {
    transform: translate(213px, -127px);
}

/*line svg through small circles*/
div#bottom-svg-wrapper {
    position: absolute;
    top: 237px;
    left: calc(50% - (500px / 2));
}

/**Circle 6**/
#circle-container-10 > *:nth-of-type(6) {
    transform: rotate(105deg) translate(255px) rotate(-104deg);
}
#circle-container-10 li:hover #circle-10-6 {
    transform: translate(76px, -241px);
}

/****
   Mobile CSS
 ****/
@media only screen and (max-width:470px){
    #gl-section-1-mobile {
	/*margin-top: 160px;*/
    }
    .section1 h2, .section2 h2, .section3 h2, .section4 h2, .section5 h2 {
	margin-left: unset;
	text-align: center;
    }

    div#gl-section-2-mobile {
	margin-top: -95px;
    }
    div#gl-section-3-mobile {
	margin-top: -60px;
    }
    div#gl-section-4-mobile {
	margin-top: -135px;
    }
    div#gl-section-5-mobile {
	margin-top: -100px;
	margin-bottom: -75px;
    }
    /*make all mobile wrappers wider!*/
    .gl-mobile-section-wrapper {
	margin-left: -6vw;
	margin-right: unset!important;
	min-width: 98vw;
    }


    /****
       Slick circles
     ****/
    /*remove numbers from dots*/
    .slick-dots li button {
	display: none;
    }
    /*slide items*/
    .gl-s-c-m-v-circle {
	border-radius: 50%;
	border: 2px solid;
	width: 300px;
	height: 300px;
	margin: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 32px;
	padding: 30px;
	line-height: 32px;
	text-align: center;
	color: #81BE41;
    }
    /*dots*/
    ul.slick-dots {
	display: flex!important;
	flex-direction: row;
	justify-content: space-evenly;
	align-items: center;
    }
    .slick-dots li {
	list-style: circle;
	font-size: 25px;
	color: black;
    }
    .slick-dots .slick-active {
	color: #81be41!important;
	list-style: unset!important;
    }
    /*arrows*/
    .gl-s-c-m-v-arrows-wrapper {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	width: 95vw;
	margin-left: calc((30px / 2) - (5vw / 2));
    }
    .gl-s-c-m-v-a {
	font-size: 50px;
	color: #81BE41;
	z-index: 9999999;
	margin-top: -50px;
    }
    .gl-slick-circles-mobile-version {
	position: relative;
    }
    .gl-s-c-m-v-arrows {
	position: absolute;
	top: 50%;
    }
    
}