.circle-container .service-name {
  display: none;
  position: absolute;
  width: 15em;
  top: 1em;
  left: -6em;
  text-align: center;
}

.circle-container {
  position: relative;
  width: 40em;
  height: 32em;
  padding: 0;
  list-style: none;
  margin: 0 auto 3em 5em;
}

.circle-container > * {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
}

.circle-container > *:nth-of-type(1) .service-icon {
  -webkit-transform: rotate(20deg) translate(15em) rotate(-20deg) rotate(45deg);
          transform: rotate(20deg) translate(15em) rotate(-20deg) rotate(45deg);
}

.circle-container > *:nth-of-type(2) .service-icon {
  -webkit-transform: rotate(56deg) translate(15em) rotate(-56deg) rotate(45deg);
          transform: rotate(56deg) translate(15em) rotate(-56deg) rotate(45deg);
}

.circle-container > *:nth-of-type(3) .service-icon {
  -webkit-transform: rotate(92deg) translate(15em) rotate(-92deg) rotate(45deg);
          transform: rotate(92deg) translate(15em) rotate(-92deg) rotate(45deg);
}

.circle-container > *:nth-of-type(4) .service-icon {
  -webkit-transform: rotate(128deg) translate(15em) rotate(-128deg) rotate(45deg);
          transform: rotate(128deg) translate(15em) rotate(-128deg) rotate(45deg);
}

.circle-container > *:nth-of-type(5) .service-icon {
  -webkit-transform: rotate(164deg) translate(15em) rotate(-164deg) rotate(45deg);
          transform: rotate(164deg) translate(15em) rotate(-164deg) rotate(45deg);
}

.circle-container > *:nth-of-type(6) .service-icon {
  -webkit-transform: rotate(200deg) translate(15em) rotate(-200deg) rotate(45deg);
          transform: rotate(200deg) translate(15em) rotate(-200deg) rotate(45deg);
}

.circle-container > *:nth-of-type(7) .service-icon {
  -webkit-transform: rotate(236deg) translate(15em) rotate(-236deg) rotate(45deg);
          transform: rotate(236deg) translate(15em) rotate(-236deg) rotate(45deg);
}

.circle-container > *:nth-of-type(8) .service-icon {
  -webkit-transform: rotate(272deg) translate(15em) rotate(-272deg) rotate(45deg);
          transform: rotate(272deg) translate(15em) rotate(-272deg) rotate(45deg);
}

.circle-container > *:nth-of-type(9) .service-icon {
  -webkit-transform: rotate(308deg) translate(15em) rotate(-308deg) rotate(45deg);
          transform: rotate(308deg) translate(15em) rotate(-308deg) rotate(45deg);
}

.circle-container > *:nth-of-type(10) .service-icon {
  -webkit-transform: rotate(344deg) translate(15em) rotate(-344deg) rotate(45deg);
          transform: rotate(344deg) translate(15em) rotate(-344deg) rotate(45deg);
}

.circle-container .service-icon {
  display: block;
  max-width: 100%;
  /*-webkit-transform: rotate(45deg);
          transform: rotate(45deg);*/
  padding: 2px;
  -webkit-transition: .25s;
  transition: .25s;
  box-shadow: -3px -3px 7px #c7c7c7, 3px 3px 7px #ffffff;
  border-radius: 8px;
}

.circle-container .service-icon:hover {
  box-shadow: inset -3px -3px 7px #c7c7c7, inset 3px 3px 7px #ffffff;
}

.circle-container .service.active .sesrvice-icon {
  border-color: #eb681d;
  /*box-shadow: 1px 1px 6px rgb(165, 146, 108);*/
  
}

.circle-container .service.active .service-name {
  display: block;
}

.circle-container .service.active img {
  filter: none;
}



.circle-container img {
  display: block;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  -webkit-transition: .25s;
  transition: .25s;
  -webkit-filter: contrast(0) grayscale(100%);
          filter: contrast(0) grayscale(100%);
}

.circle-container img:hover {
  -webkit-filter: grayscale(0);
          filter: grayscale(0);
}

@media screen and (max-width: 550px) {
  .circle-container {
    position: relative;
    width: 100%;
    height: 50vh;
    padding: 0;
    list-style: none;
    margin: 0;
  }

  .circle-container .service-name {
  font-size: 1.3em;
}

  .circle-container > * {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -1.5em;
  }
  .circle-container > *:nth-of-type(1) .service-icon {
    -webkit-transform: rotate(20deg) translate(10em) rotate(-20deg) rotate(45deg);
            transform: rotate(20deg) translate(10em) rotate(-20deg) rotate(45deg);
  }
  .circle-container > *:nth-of-type(2) .service-icon {
    -webkit-transform: rotate(56deg) translate(10em) rotate(-56deg) rotate(45deg);
            transform: rotate(56deg) translate(10em) rotate(-56deg) rotate(45deg);
  }
  .circle-container > *:nth-of-type(3) .service-icon {
    -webkit-transform: rotate(92deg) translate(10em) rotate(-92deg) rotate(45deg);
            transform: rotate(92deg) translate(10em) rotate(-92deg) rotate(45deg);
  }
  .circle-container > *:nth-of-type(4) .service-icon {
    -webkit-transform: rotate(128deg) translate(10em) rotate(-128deg) rotate(45deg);
            transform: rotate(128deg) translate(10em) rotate(-128deg) rotate(45deg);
  }
  .circle-container > *:nth-of-type(5) .service-icon {
    -webkit-transform: rotate(164deg) translate(10em) rotate(-164deg) rotate(45deg);
            transform: rotate(164deg) translate(10em) rotate(-164deg) rotate(45deg);
  }
  .circle-container > *:nth-of-type(6) .service-icon {
    -webkit-transform: rotate(200deg) translate(10em) rotate(-200deg) rotate(45deg);
            transform: rotate(200deg) translate(10em) rotate(-200deg) rotate(45deg);
  }
  .circle-container > *:nth-of-type(7) .service-icon {
    -webkit-transform: rotate(236deg) translate(10em) rotate(-236deg) rotate(45deg);
            transform: rotate(236deg) translate(10em) rotate(-236deg) rotate(45deg);
  }
  .circle-container > *:nth-of-type(8) .service-icon {
    -webkit-transform: rotate(272deg) translate(10em) rotate(-272deg) rotate(45deg);
            transform: rotate(272deg) translate(10em) rotate(-272deg) rotate(45deg);
  }
  .circle-container > *:nth-of-type(9) .service-icon {
    -webkit-transform: rotate(308deg) translate(10em) rotate(-308deg) rotate(45deg);
            transform: rotate(308deg) translate(10em) rotate(-308deg) rotate(45deg);
  }
  .circle-container > *:nth-of-type(10) .service-icon {
    -webkit-transform: rotate(344deg) translate(10em) rotate(-344deg) rotate(45deg);
            transform: rotate(344deg) translate(10em) rotate(-344deg) rotate(45deg);
  }
  .circle-container img {
    width: 3.5em;
    height: auto;
  }
}
/*# sourceMappingURL=iconCircleSet.css.map */