.component-1-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.component-1 {
  position: relative;
  width: 100%;
  max-width: 950px;
}
.component-1 .base {
  position: absolute;
  z-index: 0;
}

.azul-block-2,.amarillo-block-2,.naranjo-block-2,
.azul-block,.amarillo-block,.naranjo-block{
  position: absolute;
  z-index: 100;
  height: 7em;
  border-radius: 100%;
  width: 22%;
  transition: 0.3s ease;
  cursor: pointer;
}
.azul-block {
  transform: rotateZ(-90deg);
  margin: 10.6% 0 0 38%;
}
.azul-block-2 {
  margin: 5% 0 0 21%;
  width:55%;
}
.amarillo-block {
  transform: rotateZ(-38deg);
  margin: 35.6% 0 0 22%;
}
.amarillo-block-2 {
  margin: 69% 0 0 9%;
  width:36%;
  height:9.5em;
}
.naranjo-block {
  transform: rotateZ(38deg);
  margin: 35.6% 0 0 54%;
}
.naranjo-block-2 {
  margin: 67% 0 0 54%;
  width:38%;
  height:9.5em;
}
.component-1 .azul,.component-1 .amarillo,.component-1 .naranjo {
  position: absolute;
  top: 0;
  z-index: 10;
  opacity: 1;
  transition: opacity .5s ease;
}

.component-1 a{
  position: absolute;
  z-index: 50;
}

.component-1 a.blue{
  left:33.5%;
  top:60px;
}

.component-1 a.yellow{
  left:9%;
  top:672px;
}
.component-1 a.orange{
  right:9%;
  top:654px;
  text-align: right;
}

.component-1 .second-layer {
  position: absolute;
  z-index: 10;
}

.service-shortcut{
  color:black;
  transition: 0.3s ease;
  font:bold 21px 'Brown';
  width:fit-content;
}

text{
  transition: 0.3s ease;
}
.azul .st2{
  fill:#383838;
}
.azul-block:hover ~.azul text, .azul-block-2:hover ~.azul text  {
  fill:var(--blue);
}

.amarillo-block:hover ~.amarillo text, .amarillo-block-2:hover ~.amarillo text {
  fill:var(--yellow2);
}

.naranjo-block:hover ~.naranjo text, .naranjo-block-2:hover ~.naranjo text  {
  fill:var(--orange);
}


/* Hover behavior */
/* .azul-block:hover ~ .azul,.amarillo-block:hover ~ .amarillo,.naranjo-block:hover ~ .naranjo  { opacity: .4; }*/
/* Active or focus behavior */
.azul.active,.amarillo.active,.naranjo.active,
.azul-block:hover ~ .azul.active,.amarillo-block:hover ~ .amarillo.active,.naranjo-block:hover ~ .naranjo.active { opacity: 1; }

@media only screen and (min-width: 410px) {
  .azul-block,.amarillo-block,.naranjo-block {height: 10em;}
}
@media only screen and (min-width: 500px) {
  .azul-block,.amarillo-block,.naranjo-block { height: 12em; }
}
@media only screen and (min-width: 600px) {
  .azul-block,.amarillo-block,.naranjo-block { height: 15em; }
}
@media only screen and (min-width: 700px) {
  .azul-block,.amarillo-block,.naranjo-block { height: 20em; }
}