:root {
  --svgsize: 800px;
  --animspeed: 0.3s;
  --animspeed2: 0.4s;
}

/*html body {
  text-align: center;
}*/

#serviceportfolio {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--svgsize);
  max-height: var(--svgsize);
  position: relative;
}

#serviceportfolio #svg-content {
  transform: scale(1);
  transform-origin: 600px 600px;
  transition-duration: var(--animspeed);
}

#serviceportfolio svg {
  max-width: var(--svgsize);
  width: 100vw;
  min-width: 100px;
}

#serviceportfolio #segment_x5F_1,
#serviceportfolio #segment_x5F_2,
#serviceportfolio #segment_x5F_3,
#serviceportfolio #segment_x5F_4,
#serviceportfolio #segment_x5F_5,
#serviceportfolio #segment_x5F_6,
#serviceportfolio #segment_x5F_7,
#serviceportfolio #segment_x5F_8 {
  cursor: pointer;
  opacity: 1;
  transition-duration: var(--animspeed);
  transition-property: transform, opacity;
  transform-origin: 600px 600px;
}

#serviceportfolio #segment_x5F_1:hover,
#serviceportfolio #segment_x5F_2:hover,
#serviceportfolio #segment_x5F_3:hover,
#serviceportfolio #segment_x5F_4:hover,
#serviceportfolio #segment_x5F_5:hover,
#serviceportfolio #segment_x5F_6:hover,
#serviceportfolio #segment_x5F_7:hover,
#serviceportfolio #segment_x5F_8:hover {
  cursor: pointer;
  opacity: 0.75;
  transition-duration: var(--animspeed);
  transition-property: transform, opacity;
  transform-origin: 600px 600px;
}

#needle {
}

#seg1,
#seg2,
#seg3,
#seg4,
#seg5,
#seg6,
#seg7,
#seg8 {
  transition-duration: var(--animspeed);
  transition-property: transform;
  transform: scale(1);
  transform-origin: 600px 600px;
}

#center-mask {
  transition-duration: var(--animspeed);
  transition-property: opacity;
}

#center-mask.hidden {
  opacity: 0 !important;
  transition-duration: var(--animspeed);
  transition-property: opacity;
}

.reduce {
  transition-duration: var(--animspeed);
  transition-property: transform;
  transform: scale(0.75) !important;
}

.maximize {
  transition-duration: var(--animspeed);
  transition-property: transform;
  transform: scale(1.56) !important;
  transform-origin: 600px 600px;
}

text {
  font-size: 30px;
  font-weight: bold;
  fill: white;
}

textPath {
  pointer-events: none;
}

#html-content {
  position: absolute;
  width: 45%;
  height: 45%;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.svg-text-content {
  opacity: 0;
  visibility: hidden;
  transition-duration: var(--animspeed);
  transition-property: opacity, visibility;
  font-size: clamp(5px, 2.25vw, 18px);
  line-height: 1.1em;
  padding: 15%;
  text-align: center;
  position: absolute;
  top: 0;
}

.svg-text-content h1,
.svg-text-content h2 {
  font-size: clamp(18px, 4.375vw, 35px);
}

.svg-text-content a {
  color: #ce162b;
  text-decoration: none;
  font-weight: bold;
}

a:hover {
  color: #001f3c !important;
}

.show {
  opacity: 1;
  visibility: visible;
  transition-duration: var(--animspeed);
  transition-property: opacity, visibility;
}

.needle_1,
.needle_2,
.needle_3,
.needle_4,
.needle_5,
.needle_6,
.needle_7,
.needle_8 {
  transition-duration: var(--animspeed2);
  transition-property: transform;
}

.needle_1 {
  transform: rotate(202.5deg);
}
.needle_2 {
  transform: rotate(247.5deg);
}
.needle_3 {
  transform: rotate(292.5deg);
}
.needle_4 {
  transform: rotate(337.5deg);
}

.needle_5 {
  transform: rotate(22.5deg);
}
.needle_6 {
  transform: rotate(67.5deg);
}
.needle_7 {
  transform: rotate(112.5deg);
}
.needle_8 {
  transform: rotate(157.5deg);
}

/* SVG STYLES */

.st0 {
  fill: #ffffff;
}
.st1 {
  opacity: 1;
  fill: #e7e6e6;
}
.st2 {
  opacity: 0.702;
}
.st3 {
  fill: none;
  stroke: #001f3c;
  stroke-width: 2;
  stroke-miterlimit: 10;
  stroke-dasharray: 5.991, 5.991;
}
.st4 {
  fill: #003669;
}
.st5 {
  fill: none;
  stroke: #003669;
  stroke-width: 3;
  stroke-miterlimit: 10;
}
.st6 {
  fill-rule: evenodd;
  clip-rule: evenodd;
  fill: #003669;
}
.st7 {
  fill: none;
}
.st8 {
  fill: #001f3c;
}
.st9 {
  fill: none;
  stroke: #001f3c;
  stroke-width: 3;
  stroke-miterlimit: 10;
}
.st10 {
  fill-rule: evenodd;
  clip-rule: evenodd;
  fill: #001f3c;
}
.st11 {
  fill: #ce162b;
}
.st12 {
  fill: none;
  stroke: #ce162b;
  stroke-width: 3;
  stroke-miterlimit: 10;
}
.st13 {
  fill-rule: evenodd;
  clip-rule: evenodd;
  fill: #ce162b;
}
.st14 {
  fill: #b1182e;
}
.st15 {
  fill: none;
  stroke: #b1182e;
  stroke-width: 3;
  stroke-miterlimit: 10;
}
.st16 {
  fill-rule: evenodd;
  clip-rule: evenodd;
  fill: #b1182e;
}
.st17 {
  fill: #9e1930;
}
.st18 {
  fill: none;
  stroke: #9e1930;
  stroke-width: 3;
  stroke-miterlimit: 10;
}
.st19 {
  fill-rule: evenodd;
  clip-rule: evenodd;
  fill: #9e1930;
}
.st20 {
  fill: #85192e;
}
.st21 {
  fill: none;
  stroke: #85192e;
  stroke-width: 3;
  stroke-miterlimit: 10;
}
.st22 {
  fill: #66182e;
}
.st23 {
  fill: none;
  stroke: #66182e;
  stroke-width: 3;
  stroke-miterlimit: 10;
}
.st24 {
  fill-rule: evenodd;
  clip-rule: evenodd;
  fill: #66182e;
}
.st25 {
  fill: #4e1223;
}
.st26 {
  fill: none;
  stroke: #4e1223;
  stroke-width: 3;
  stroke-miterlimit: 10;
}
.st27 {
  fill-rule: evenodd;
  clip-rule: evenodd;
  fill: #4e1223;
}