@import url("https://fonts.googleapis.com/css?family=Poppins");
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
  color: #222;
}

*,
*:after,
*:before {
  box-sizing: inherit;
}

body {
  background-image: linear-gradient(#00B3CC, #D6FF7F);
}

.c-action {
  position: absolute;
  transform-origin: center;
  transform: rotate(-90deg) translate(-50%, -100%);
  font-size: 1.2em;
  font-weight: bold;
}

h1 {
  position: absolute;
  top: -11%;
  font-size: 1.4em;
}

.pies-container {
  position: absolute;
  width: 350px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.info-pie,
.info-piesecond {
  position: relative;
  display: block;
  max-width: 350px;
  height: 350px;
  margin-bottom: 2em;
}
.info-pie svg,
.info-piesecond svg {
  max-width: 350px;
  max-height: 350px;
  position: relative;
}
.info-pie svg path,
.info-piesecond svg path {
  cursor: pointer;
  transform-origin: center center;
  transition: 0.3s ease;
}
.info-pie svg path:hover,
.info-piesecond svg path:hover {
  transform: scale(1.2);
}
.info-pie__slide,
.info-piesecond__slide {
  max-width: 400px;
  width: 100%;
  box-shadow: 5px 5px 30px #aaa;
  padding: 1em;
  position: absolute;
  top: 0%;
  left: 0%;
  height: 100%;
  opacity: 0;
  z-index: -1;
  transition: 0.3s ease;
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 3px;
  transform: translateX(0%) scale(0);
}
.info-pie__slide--isActive,
.info-piesecond__slide--isActive {
  opacity: 1;
  transform: translateX(110%) scale(1);
}
.info-pie__slide--isActiveToTop,
.info-piesecond__slide--isActiveToTop {
  opacity: 1;
  transform: translateY(-100%) scale(1);
  z-index: 1;
}
.info-pie__slide--isActiveToBottom,
.info-piesecond__slide--isActiveToBottom {
  opacity: 1;
  transform: translateY(100%) scale(1);
  z-index: 1;
}
.info-pie__label,
.info-piesecond__label {
  font-size: 1.5em;
  margin: 0.5em 0;
}

@keyframes path_animation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}