.holderCircle  {
     width:  500px;
     height:  500px;
     border-radius:  100%;
     margin:  0px auto;
     position:  relative;
 }
.dotCircle  {
     width:  100%;
     height:  100%;
     position:  absolute;
     margin:  auto;
     top:  0;
     left:  0;
     right:  0;
     bottom:  0;
     border-radius:  100%;
     z-index:  20;
 }

.dotCircle  .itemDot  {
     display:  block;
     width:  80px;
     height:  80px;
     position:  absolute;
     background:  #ffffff;
     color:  #C2272D;
     border-radius:  20px;
     text-align:  center;
     line-height:  80px;
     font-size:  30px;
     z-index:  3;
     cursor:  pointer;
     border:  2px solid #e6e6e6;
 }

.dotCircle  .itemDot .forActive  {
     width:  56px;
     height:  56px;
     position:  absolute;
     top:  0;
     left:  0;
     right:  0;
     bottom:  0;
     display:  none;
 }

.dotCircle  .itemDot .forActive::after  {
     content:  '';
     width:  5px;
     height:  5px;
     border:  3px solid #C2272D;
     bottom:  -31px;
     left:  -14px;
     filter:  blur(1px);
     position:  absolute;
     border-radius:  100%;
 }

.dotCircle  .itemDot .forActive::before  {
     content:  '';
     width:  6px;
     height:  6px;
     filter:  blur(5px);
     top:  -15px;
     position:  absolute;
     transform:  rotate(-45deg);
     border:  6px solid #C2272D;
     right:  -39px;
 }

.dotCircle  .itemDot.active .forActive  {
     display:  block;
 }

.round  {
     position:  absolute;
     left:  40px;
     top:  45px;
     width:  410px;
     height:  410px;
     border:  2px dotted #C2272D;
     border-radius:  100%;
     -webkit-animation:  rotation 100s infinite linear;
 }

.dotCircle .itemDot:hover,  .dotCircle .itemDot.active  {
     color:  #ffffff;
     transition:  0.5s;
     background: #C2272D;
     /* IE6-9 */ border:  2px solid #ffffff;
     -webkit-box-shadow:  0 30px 30px 0 rgba(0,  0,  0,  .13);
     -moz-box-shadow:  0 30px 30px 0 rgba(0,  0,  0,  .13);
     box-shadow:  0 30px 30px 0 rgba(0,  0,  0,  .13);
 }

.dotCircle .itemDot  {
     font-size:  40px;
 }

.contentCircle  {
     width:  250px;
     border-radius:  100%;
     color:  #222222;
     position:  relative;
     top:  150px;
     left:  50%;
     transform:  translate(-50%,  -50%);
 }

.contentCircle .CirItem  {
     border-radius:  100%;
     color:  #222222;
     position:  absolute;
     text-align:  center;
     bottom:  0;
     left:  0;
     opacity:  0;
     transform:  scale(0);
     transition:  0.5s;
     font-size:  15px;
     width:  100%;
     height:  100%;
     top:  0;
     right:  0;
     margin:  auto;
     line-height:  250px;
 }

.CirItem.active  {
     z-index:  1;
     opacity:  1;
     transform:  scale(1);
     transition:  0.5s;
 }

.contentCircle .CirItem i  {
     font-size:  180px;
     position:  absolute;
     top:  0;
     left:  50%;
     margin-left:  -90px;
     color:  #000000;
     opacity:  0.04;
 }

@media only screen and (min-width:300px) and (max-width:599px)  {
   
.round {
    left: 0px;
    top: 45px;
    width: 300px;
    height: 300px;   
}    
    
	.holderCircle  {
     width:  300px;
     height:  300px; 
    margin:  10px auto;
 }

	.holderCircle::after  {
     width:  100%;
     height:  100%;
 }

	.dotCircle  {
     width:  0%;
     height:0%;
     top:  0;
     right:  0;
     bottom:  0;
     left:  0;
     margin:  auto;
      transition: none;
    transform: none;    
 }
.contentCircle {
    width: 220px;   
    top: 90px;   
}

.contentCircle .CirItem i  {       
     top:  10px;
     left:  50%;       
     opacity:  0.1;
 }    
    
.services .title {
   margin-top: 30px;
}    
    
.dotCircle .itemDot  {
   display: none;
    transition: none;
    transform: none;
 }    
}

@media only screen and (min-width:600px) and (max-width:767px)  {
 }

@media only screen and (min-width:768px) and (max-width:991px)  {
 }

@media only screen and (min-width:992px) and (max-width:1199px)  {
 }

@media only screen and (min-width:1200px) and (max-width:1499px)  {
 }

  .title-box .title  {
     font-weight:  600;
     letter-spacing: 1px;
     position:  relative;
     z-index:  -1;
 }

    .title-box span  {
     text-shadow:  0 10px 10px rgba(0,  0,  0,  .15);
     font-weight:  800;
     color:  #C2272D;
 }

        .title-box p  {
    font-size:  14px;
     line-height:  1.2em;
 }