.circularBlock{
    position: relative;
    width: 650px;
    height: 650px;
    margin:0 auto;
    border-radius: 100%;
}
.circular{
    position: absolute;
    left:50%;
    top: 50%;
    background: red;
    overflow:hidden;
    border-radius: 100%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
        box-shadow: 0 0 15px #c3c1c1;

}
.circular1 {
    background-color: #aedb24;
}
.circular1New{
    background-color: #247edb;
}
.circular2 {
    background-color: #ffe463;
}
.circular3 {
    background-color: #6feafc;
}
.circular4 {
    background-color: #f8949e;
}
.circular5{
    background:#caccce;
}
.triangle{
    position: absolute;
    left:0;
    top:0;
    height: 100%;
    width: 100%;
}

.circularBlock svg{
    width: 100%;
}
.circularBlock svg path,
.circularBlock svg g{
    width: 100%;
}
.circularTriangle,
.circularTriangle2,
.circularTriangle3,
.circularTriangle4{
    width: 558px;
    height: 102%;
    position: absolute;
    left: 50%;
    top: -2px;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    text-align: center;
    opacity:0;   
}
.circularTriangle img{
    max-width: 560px;
    opacity: 0.7;
    position: relative;
    z-index: 2;
}
.circular1NewTriangle img{
    max-width: 444px;
    opacity: 1;
}
.circularTriangle2 img{
    max-width: 299px;
}
.circularTriangle3 img{
    max-width: 180px;
}
.circularTriangle4 img{
    max-width: 96px;
}
.circularConatiner{
    display: inline-block;
    vertical-align: top;
    position: relative;
}
.certificatesText{
    position: absolute;
    left: 50%;
    top: 52px;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    z-index: 1;
    opacity: 0;
}
.certificatesText img{
    max-width: 230px;
}
/**-- Triangle Rotate --**/
@keyframes triangleRotate{
  0% {
    opacity: 0;
  }
  100%{
      opacity: 1;
      transform: translateX(-50%) rotate(180deg);
      -webkit-transform: translateX(-50%) rotate(180deg);
  }
}
/**-- Triangle Rotate Ends --**/

.categoryContent1{
    position: absolute;
    right: 60px;
    top: 10px;
    z-index: 1;
    transform: rotate(-30deg);
    width: 23%;
    opacity:0;    
}
.categoryContent1,
.categoryContent2,
.categoryContent3{
    font-size: 15px;
}
.categoryContent1 img{
    max-width: 150px;
}
.firstSlideContent1{
        position: absolute;
    left: -110px;
    top: 44%;
    transform: translateY(0%) rotate(-89deg);
    -webkit-transform: translateY(0%) rotate(-89deg);
    width: 120px;
    text-align: center;
}
.firstSlideContent2{
    position: absolute;
    left: -20px;
    top: 49%;
    transform: translateY(0%) rotate(-89deg);
    -webkit-transform: translateY(0%) rotate(-89deg);
}


.categoryContent2{
    position: absolute;
    left: 50%;
    bottom: 30px;
    z-index: 9;
    width: 73%;
    opacity:0;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}
.categoryContent2 img{
    max-width: 100%;
}
.secondSlideContent2{
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
    bottom: 120px;
}
.secondSlideContent1{
   position: absolute;
    left: 50%;
    text-align: center;
    top: -60px;
    width: 120px;
    transform: translateX(-50%);
}
.categoryContent3{
    position: absolute;
    left: 50px;
    top: 30px;
    z-index: 1;
    transform: rotate(25deg);
    width: 24%;
    opacity:0;
}
.categoryContent3 img{
    max-width: 100%;
}

.thirdSlideContent1{
        position: absolute;
    left: 145px;
    text-align: center;
    top: 47%;
    width: 120px;
    transform: translateY(-55%) rotate(95deg);
    -webkit-transform: translateY(-55%) rotate(95deg);
}
.thirdSlideContent2{
        position: absolute;
    left: 60px;
    width: 100%;
    text-align: center;
    top: 190px;
    transform: rotate(95deg);
    -webkit-transform: rotate(95deg);
}
.btnsDiv{
    position: absolute;
    left:0;
    top:0;
    z-index: 1;
}
.categoryLink{
    float: left;
    padding: 16px;
    background: #f2f2f2;
    border-right: solid 1px #fff;
    position: relative;
    color:#333;
    text-transform: uppercase;
    text-decoration: none;
}
.categoryHeading01,
.categoryHeading02,
.categoryHeading03{
    position: absolute;
    left:0;
    top:0;
    z-index:10;
    color:#fff;
    text-transform: uppercase;
    cursor: pointer;
    opacity:0;
    font-size: 18px;
}
.categoryHeading01{
    left: auto;
    right: -150px;
    top: 160px;
    bottom: auto;
    transform: rotate(-120deg);
    -webkit-transform: rotate(-120deg);
    height: 59px;
    width: 73.33%;
    text-align: center;
    padding: 15px 0 0
}
.categoryHeading02{
    left: 50%;
    top: auto;
    bottom: 26px;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    height: 60px;
    width: 53.33%;
    text-align: center;
    padding: 16px 0 0;
}
.categoryHeading03{
    left: -150px;
    top: 160px;
    bottom: auto;
    transform: rotate(-70deg);
    -webkit-transform: rotate(-64deg);
    height: 63px;
    width: 73.33%;
    text-align: center;
    padding: 20px 0 0;
}
.categoryContentBottom1,
.categoryContentBottom2,
.categoryContentBottom3{
    z-index: 2;
}
.categoryContentBottom1{
    position: absolute;
    right: -10px;
    bottom: 290px;
    transform: rotate(240deg);
    -webkit-transform: rotate(240deg);
    opacity: 0;
}
.categoryContentBottom2{
    position: absolute;
    left: 140px;
    bottom: 48px;
    opacity: 0;
}
.categoryContentBottom3{
    position: absolute;
    left: -4px;
    bottom: 270px;
    transform: rotate(117deg);
    -webkit-transform: rotate(117deg);
    opacity: 0;
}
.categoryContentBottom1 img,
.categoryContentBottom2 img,
.categoryContentBottom3 img{
    max-width: 380px;
}
@media(min-width: 999px){
.circularConatiner{
    transform: scale(0.8);
    -webkit-transform: scale(0.8);
}
}

@media(max-width: 999px){
.circular.circular1 .circularTriangle img {
    max-width: 540px;
}
}
@media(max-width: 650px){
.circularBlock{
    position:absolute;
    left:50%;
    top:50px;
    transform: scale(0.8) translateX(-63%);
    -webkit-transform: scale(0.8) translateX(-63%);
}
.circularConatiner{
    top: -90px;
}
}
@media(max-width: 500px) {
.circularBlock{
    transform: scale(0.6) translateX(-85%);
    -webkit-transform: scale(0.6) translateX(-85%);
}
.circularConatiner{
    top: -150px;
}
.circlecontainer {
    padding-bottom: 0;
}
}
@media(max-width: 400px) {
.circularBlock{
    transform: scale(0.5) translateX(-100%);
    -webkit-transform: scale(0.5) translateX(-100%);
}
.circularConatiner {
    top: -200px;
}

}



/*New CSS for Alignment and update*/
.circularConatiner{
	overflow: hidden;
}
@media(max-width: 999px){
.circularConatiner{
	overflow:inherit;
}
}