/* Template 36 */
.col_36 h3 {
    margin: 0;
  }
  .circle {
    width: 145px;
    height: 145px;
    border: 15px solid transparent;
    border-radius: 50%;
    margin: 0;
    position: relative;
  }
  .circle1 {
    border-color: var(--secondary-color);
    border-left-color: transparent;
    border-top-color: transparent;
  }
  .circle2 {
    border-color: var(--primary-color);
    border-right-color: transparent;
  }
  .circle3 {
    border-color: var(--secondary-color);
    border-left-color: transparent;
  }
  .circle4 {
    border-color: var(--primary-color);
    border-right-color: transparent;
  }
  .circle5 {
    border-color: var(--secondary-color);
    border-left-color: transparent;
  }
  .circle6 {
    border-color: var(--primary-color);
    border-right-color: transparent;
  }
  .circle7 {
  border-color: var(--secondary-color);
  border-left-color: transparent;
  }
  .circle8 {
  border-color: var(--primary-color);
  border-right-color: transparent;
  }
  /* .template_35 .col_36:nth-of-type(odd) .circle {
    border-color: var(--secondary-color);
    border-left-color: transparent;
  }
  .template_35 .col_36:nth-of-type(even) .circle {
    border-color: var(--primary-color);
    border-right-color: transparent;
  } */
  .template_35 .col_36:nth-of-type(1) .circle {
    border-top-color: transparent;
  }
  .circle h4 {
  display: table;
  margin: 5px 0 0 5px;
  width: 105px;
  height: 105px;
  background: var(--secondary-color);
  border-radius: 50%;
  }
  .circle2 h4 {
  background: var(--primary-color);
  }
  .circle3 h4 {
  background: var(--secondary-color);
  }
  .circle4 h4 {
  background: var(--primary-color);
  }
  .circle5 h4 {
  background: var(--secondary-color);
  }
  .circle6 h4 {
  background: var(--primary-color);
  }
  .circle7 h4 {
  background: var(--secondary-color);
  }
  .circle8 h4 {
  background: var(--primary-color);
  }
  .circle span {
  font-size: 13px;
  color: #fff;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  }
  .circle i,
  .circle b {
  font-weight: bold;
  font-style: normal;
  display: block;
  }
  .circle i {
  font-size: 24px;
  }
  .wrap {
  display: flex;
  flex-wrap: wrap;
  max-width: 980px;
  margin: auto;
  }
  .col_36 {
  flex: 1 0 50%;
  display: flex;
  align-items: center;
  margin-bottom: -47px;
  position: relative;
  left: 23px;
  }
  .col2 {
  left: -35px;
  }
  .col1 {
  text-align: right;
  align-content: flex-end;
  }
  .col1 .content {
  order: -1;
  }
  .col_36 .content {
    flex: 1 0 0%;
    padding: 1px 10px;
    margin:-20px 0;
  }
  .col_36 .content h2 {
    font-size: 1rem;
  }
  .col_36 .content p {
    margin: 0.5em 0 0 0;
    font-size: 0.8rem;
    color: #666;
  }
  .circle1:before {
    content: "";
    height: 15px;
    width: 250px;
    position: absolute;
    right: 46px;
    top: -15px;
    background: var(--secondary-color);
    background:linear-gradient(to left, var(--secondary-color) 0%, white 100%);
    z-index: -1;
    animation:shimmer 10s infinite forwards;
  }
  @keyframes shimmer{
      0% {width: 0;}
      5%{width: 250px;}
      100%{width: 250px;}
  }
  .circle1:after,
  .circle8:after {
    content: "";
    position: absolute;
    left: -15px;
    top: -15px;
    width: 145px;
    height: 145px;
    border: 15px solid transparent;
    border-color: var(--secondary-color);
    border-left-color: transparent;
    border-top-color: transparent;
    transform: rotate(-45deg);
    border-radius: 50%;
    z-index: -1;
  }
  .circle8:after {
    border-color: var(--primary-color);
    border-right-color: transparent;
    border-bottom-color: transparent;
    transform: rotate(-45deg);
  }
  .circle8:before {
    content: "";
    height: 15px;
    width: 250px;
    position: absolute;
    right: -190px;
    bottom: -15px;
    background: var(--primary-color);
    background:linear-gradient(to right, var(--primary-color) 0%, white 100%);
    z-index: -1;
  }
  .circle8 {
    border-bottom-color: transparent;
  }
  @media screen and (max-width: 767px) {
    .wrap {
        display: block;
    }
    .content{margin:0;}
    .col_36 {
        margin: 10px 0;
        position: static;
    }
    .circle8:before,
    .circle8:after,
    .circle1:before,
    .circle2:after {
        display: none;
    }
    .circle1 {
        border-color: var(--secondary-color);
    }
    .circle2 {
        border-color: var(--primary-color);
    }
    .circle3 {
        border-color: var(--secondary-color);
    }
    .circle4 {
        border-color: var(--primary-color);
    }
    .circle5 {
        border-color: var(--secondary-color);
    }
    .circle6 {
        border-color: var(--primary-color);
    }
    .circle7 {
        border-color: var(--secondary-color);
    }
    .circle8 {
        border-color: var(--primary-color);
    }
  }
  .shim{
      position:absolute;
      z-index:2;
      left:0;
      top:0;
      margin-top:0;
      width:100%;
      height:100%;
      animation:shim 1s linear forwards;
      transform:rotate(-90deg);
  }
  .shim:after{
      content:"";
      position:absolute;
      left:50%;
      top:-15px;
      margin-left:-8px;
      width:15px;
      height:15px;
      background:radial-gradient(#fff, rgba(255,255,255,0));
  }
  .shimx{transform:rotate(90deg);}
  .shimx{animation:shim2 1s linear .75s forwards;}
  .shim2{animation-delay:.75s}
  .shim3{animation-delay:1.5s}
  .shim4{animation-delay:2.25s}
  .shim5{animation-delay:3s}
  .shim6{animation-delay:3.75s}
  .shim7{animation-delay:4.5s}
  .shim8{animation-delay:5.25s}
  @keyframes shim {
      from{transform:rotate(-90deg);}
      to{transform:rotate(270deg);}
  }
  @keyframes shim2 {
      from{transform:rotate(90deg);}
      to{transform:rotate(-270deg);}
  }