.toggle-menu{
  font: normal 1.0625rem / 1.5rem Roboto;
}
.toggle-menu .circle-list{
  display: grid;
  gap: .5rem;
  margin: 0;
  grid-auto-flow: column;
  justify-content: center;
}
.toggle-menu .circle-list .circle {
  border: 2px solid transparent;
  border-radius: 99px;
  padding: 3px;
  height: 30px;
  width: 30px;
  text-align: center;
  line-height: 10px;
  transition: all .5s;
  position: relative;
}
.toggle-menu .circle-list a.circle{line-height: 1.125rem;text-decoration: none!important;}
.toggle-menu .circle-list .circle.black{border-color: #000;background-color: #000;color:#fff;}
.toggle-menu .circle-list .circle.white{border-color: #fff;background-color: #fff;color:#000;}
.toggle-menu .circle-list .circle.quartz{border-color: #dc8b9d;background-color: #dc8b9d;color:#000;}
.toggle-menu .circle-list .circle.phantomgreen{border-color: #7eb851;background-color: #7eb851;color:#000;box-shadow: inset 0px 0px 0px 3px #4a9367;}
.toggle-menu .circle-list .circle.phantomwhite{border-color: #fff;background-color: #fff;color:#000;box-shadow: inset 0px 0px 0px 3px #c6c7c9;}
.toggle-menu .circle-list .circle.phantomblack{border-color: #4d4d4f;background-color: #4d4d4f;color:#fff;box-shadow: inset 0px 0px 0px 3px #0b0a0a;}
.toggle-menu .circle-list .circle.esportgreen{border-color: #7eb851;background-color: #7eb851;color:#000;}
.toggle-menu .circle-list .circle .text {
  text-transform: uppercase;
  text-align: center;
  -webkit-transition: font-size .5s ease;
  -moz-transition: font-size .5s ease;
  -o-transition: font-size .5s ease;
  transition: font-size .5s ease;
  font-size: 0;
  font-weight: 700;
}
.toggle-menu .circle-list .circle .text{
  animation-delay: .5s;
  font-size: 0;
}
@media (min-width: 768px) {
  .toggle-menu{margin-top:-70px;padding-bottom:30px;}
}
@media (min-width: 769px) {
  .toggle-menu .circle-list .circle:hover,
  .toggle-menu .circle-list .circle:focus-visible{width:180px;outline: none !important;}
  .toggle-menu .circle-list .circle:hover .text,
  .toggle-menu .circle-list .circle:focus-visible .text{font-size: 0.8125rem;}
    /*.toggle-menu .circle-list .circle:hover{transform: scale(150%);}*/
}
@media (max-width: 768px) {
  .toggle-menu .circle-list .circle.active{border-color: #44d62c!important;}
  /*.toggle-menu .circle-list .circle.active{transform: scale(150%);}*/
}
@media (max-width: 767px) {
  .toggle-menu{margin-top:2rem;}
}
[id*="-black"],
[id*="-white"],
[id*="-quartz"],
[id*="-phantomgreen"],
[id*="-phantomwhite"],
[id*="-phantomblack"],
[id*="-esportgreen"]{display:none}
[id*="-black"].active,
[id*="-white"].active,
[id*="-quartz"].active,
[id*="-phantomgreen"].active,
[id*="-phantomwhite"].active,
[id*="-phantomblack"].active,
[id*="-esportgreen"].active{display:block}